/* modal.css — el aviso de privacidad, en <dialog> nativo. */
.modal {
  width: min(100% - var(--esp-4) * 2, 640px);
  max-height: calc(100dvh - var(--esp-8));
  border-radius: var(--radio-xl);
  background: var(--kv-nube);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}
.modal::backdrop { background: var(--kv-tinta-62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-entra var(--mov-medio) var(--curva); }
@keyframes modal-entra { from { opacity: 0; transform: translateY(12px); } }
.modal__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-5) var(--esp-6) var(--esp-4);
  border-bottom: 1px solid var(--kv-perla);
}
.modal__titulo { font-size: var(--txt-xl); }
.modal__cerrar {
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--kv-tinta-suave);
  transition: background-color var(--mov-rapido) var(--curva);
}
.modal__cerrar:hover { background: var(--kv-bruma); color: var(--kv-tinta); }
.modal__cerrar:focus-visible { border-radius: 50%; }
.modal__cerrar svg { width: 20px; height: 20px; }
.modal__contenido {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-5) var(--esp-6) var(--esp-7);
  max-height: calc(100dvh - var(--esp-8) - 88px);
  overflow-y: auto;
  color: var(--kv-tinta-suave);
  font-size: var(--txt-sm);
}
.modal__version { font-size: var(--txt-xs); color: var(--kv-tinta-tenue); }