/* Colores en variables: cada tema solo cambia estos valores. Sin data-tema (o con clasico) se usan estos. */
:root {
  --color-fondo: #7a1f2b;
  --color-texto-cabecera: #fdf6ec;
  --color-puerta: #f6efe4;
  --color-numero: #7a1f2b;
  --color-acento: #e0b04f;
  --color-interior: #fff3c4;
  --radio: 12px;
}

/* Temas (js/temas.js pone data-tema en <html>). Contraste comprobado: texto ≥ 4,5:1 y contorno de «hoy» ≥ 3:1 */
:root[data-tema="romantico"] {
  --color-fondo: #9e2f50;
  --color-puerta: #fdebf0;
  --color-numero: #7d1838;
  --color-acento: #f2a0b5;
  --color-interior: #ffe4ec;
}

:root[data-tema="invierno"] {
  --color-fondo: #1d3557;
  --color-puerta: #f4f8fb;
  --color-numero: #1d3557;
  --color-acento: #b8c7d6;
  --color-interior: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto-cabecera);
}

/* env(safe-area-inset-*) es el hueco del notch (0 en el resto de pantallas): el contenido no queda debajo */
.cabecera {
  padding: 24px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  text-align: center;
}

.cabecera h1 {
  margin: 0;
  font-size: 1.6rem;
}

.cabecera p {
  margin: 8px 0 0;
  opacity: 0.85;
}

/* Móvil primero: 4 columnas x 6 filas */
.rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
}

/* En pantallas anchas caben 6 columnas x 4 filas */
@media (min-width: 600px) {
  .rejilla {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* El botón es el marco: su fondo es el interior dorado que se ve al abrir.
   perspective da profundidad al giro de la hoja (sin ella el giro 3D se vería plano).
   overflow: hidden recorta la hoja para que nunca tape la puerta de al lado. */
.puerta {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: var(--radio);
  background: radial-gradient(circle, var(--color-interior), var(--color-acento));
  color: var(--color-numero);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  perspective: 600px;
}

/* La hoja gira sobre su borde izquierdo, como una bisagra. 0.7s = OPEN_MS en calendario.js */
.hoja {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio);
  background: var(--color-puerta);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  transform-origin: left center;
  transition: transform 0.7s ease-in-out, color 0.3s, filter 0.7s;
}

/* Ángulo positivo: la hoja se pliega hacia dentro (se aleja) y queda como una franja junto a la bisagra.
   El oscurecido simula la sombra y el número se desvanece porque ya no se lee. */
.puerta.abierta .hoja {
  transform: rotateY(80deg);
  filter: brightness(0.8);
  color: transparent;
}

/* Foto pequeña en el interior de las puertas abiertas que tienen foto */
.interior {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.puerta.bloqueada {
  opacity: 0.55;
}

.puerta.bloqueada::after {
  content: "🔒";
  position: absolute;
  z-index: 1;
  right: 6px;
  bottom: 4px;
  font-size: 0.8rem;
}

/* Temblor de la puerta bloqueada. 0.4s = SHAKE_MS en calendario.js */
.puerta.temblor {
  animation: temblor 0.4s;
}

@keyframes temblor {
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  75% { transform: rotate(-3deg); }
}

/* Respeta "reducir movimiento" del sistema */
@media (prefers-reduced-motion: reduce) {
  .hoja {
    transition: none;
  }

  .puerta.temblor {
    animation: none;
  }
}

/* La última puerta desbloqueada se resalta para encontrarla rápido */
.puerta.hoy {
  outline: 3px solid var(--color-acento);
  outline-offset: 2px;
  box-shadow: 0 0 16px var(--color-acento);
}

.puerta:focus-visible {
  outline: 3px solid var(--color-texto-cabecera);
  outline-offset: 2px;
}

.mensaje {
  text-align: center;
  padding: 16px;
}

.dialogo {
  width: min(90vw, 420px);
  padding: 0;
  border: none;
  border-radius: var(--radio);
  background: var(--color-puerta);
  color: var(--color-numero);
  text-align: center;
}

/* El padding va dentro: así un clic en el <dialog> solo puede venir del fondo */
.dialogo-contenido {
  padding: 20px;
}

.dialogo::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.dialogo h2 {
  margin: 0 0 12px;
}

.dialogo img {
  display: block;
  width: 100%;
  max-height: 50vh;
  object-fit: cover;
  border-radius: var(--radio);
}

/* Móvil en horizontal (poca altura): foto más baja para que quepan título, texto y botón sin scroll */
@media (max-height: 500px) {
  .dialogo img {
    max-height: 35vh;
  }

  .dialogo h2 {
    margin-bottom: 8px;
  }
}

/* [hidden] pierde contra display: block, así que se refuerza */
.dialogo img[hidden] {
  display: none;
}

.dialogo p {
  font-size: 1.1rem;
  line-height: 1.4;
}

.dialogo-cerrar {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radio);
  background: var(--color-fondo);
  color: var(--color-texto-cabecera);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Editor (crear.html) ---------- */

.editor {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}

.tarjeta,
.puerta-editor {
  margin: 0 0 10px;
  border: none;
  border-radius: var(--radio);
  background: var(--color-puerta);
  color: var(--color-numero);
}

.tarjeta {
  padding: 16px;
}

/* El legend de un fieldset se dibuja sobre el borde: con float queda dentro de la tarjeta */
.tarjeta > legend {
  float: left;
  width: 100%;
  margin-bottom: 4px;
  font-size: 1.2rem;
  font-weight: 700;
}

.editor label {
  display: block;
  margin: 12px 0 4px;
  font-weight: 600;
}

/* font-size de 16px como mínimo: con menos, Safari de iPhone hace zoom al tocar el campo */
.editor input,
.editor textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #c9b9a6;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 1rem;
}

.editor textarea {
  resize: vertical;
}

.editor input[type="file"] {
  padding: 8px;
  font-size: 0.9rem;
}

.editor [aria-invalid="true"] {
  border: 2px solid #c62828;
}

.editor small {
  display: block;
  margin-top: 4px;
  opacity: 0.75;
}

/* De y Para: uno debajo de otro en móvil, uno junto al otro si cabe */
@media (min-width: 480px) {
  .fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

.progreso {
  margin: 20px 0 4px;
  font-weight: 700;
}

.aviso {
  margin: 0 0 12px;
  font-size: 0.9rem;
  opacity: 0.85;
}

.puerta-editor {
  padding: 0 16px;
}

.puerta-editor summary {
  display: flex;
  gap: 8px;
  padding: 14px 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

/* Con display: flex el navegador quita el triángulo de <details>: se dibuja a mano para que se vea que se despliega */
.puerta-editor summary::-webkit-details-marker {
  display: none;
}

.puerta-editor summary::before {
  content: "▸";
}

.puerta-editor[open] summary::before {
  content: "▾";
}

/* min-width: 0 deja que el texto se recorte con "…" en vez de ensanchar la tarjeta */
.resumen {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 400;
  opacity: 0.7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puerta-editor[open] {
  padding-bottom: 16px;
}

.puerta-editor label:first-of-type {
  margin-top: 0;
}

.contador {
  margin: 4px 0 0;
  font-size: 0.85rem;
  text-align: right;
  opacity: 0.7;
}

.error {
  padding: 12px;
  border-radius: var(--radio);
  background: #fdecea;
  color: #8a1c1c;
  font-weight: 600;
}

.boton {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border: none;
  border-radius: var(--radio);
  background: var(--color-acento);
  color: var(--color-numero);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

.boton:focus-visible,
.puerta-editor summary:focus-visible {
  outline: 3px solid var(--color-texto-cabecera);
  outline-offset: 2px;
}

.foto-estado {
  margin: 6px 0 0;
  font-size: 0.9rem;
}

.foto-estado:empty {
  display: none;
}

/* Miniatura de la foto ya comprimida, con su peso y el botón para quitarla */
.foto-elegida {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.foto-elegida[hidden] {
  display: none;
}

.foto-elegida img {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  object-fit: cover;
}

.foto-elegida span {
  flex: 1;
  font-size: 0.9rem;
  opacity: 0.75;
}

.quitar-foto {
  padding: 8px 12px;
  border: 1px solid var(--color-numero);
  border-radius: 8px;
  background: transparent;
  color: var(--color-numero);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Progreso al guardar: mismo cuadro que los errores, pero sin rojo */
.error.info {
  background: var(--color-puerta);
  color: var(--color-numero);
}

.boton:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---------- Landing (index.html) ---------- */

/* Un enlace con aspecto de botón: block para que ocupe el ancho como .boton */
.boton-enlace {
  display: block;
  max-width: 360px;
  margin: 20px auto 0;
  text-align: center;
  text-decoration: none;
}

.boton-enlace:focus-visible {
  outline: 3px solid var(--color-texto-cabecera);
  outline-offset: 2px;
}

.demo {
  margin-top: 24px;
  text-align: center;
}

.demo h2 {
  margin: 0;
  font-size: 1.3rem;
}

.demo p {
  margin: 6px 0 0;
  opacity: 0.85;
}

.demo-etiqueta {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-acento);
  color: var(--color-numero);
  font-size: 0.85rem;
  font-weight: 700;
}

.demo p.demo-etiqueta {
  margin-bottom: 10px;
  opacity: 1;
}

.landing {
  max-width: 600px;
  margin: 0 auto;
  padding: 8px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left));
}

.landing h2 {
  text-align: center;
}

.pasos,
.ventajas {
  padding: 16px 16px 16px 36px;
  border-radius: var(--radio);
  background: var(--color-puerta);
  color: var(--color-numero);
  line-height: 1.5;
}

.pasos li + li,
.ventajas li + li {
  margin-top: 8px;
}

/* ---------- Pago (pagar.html y gracias.html) ---------- */

.pago {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}

.pago h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.pago .boton-enlace {
  max-width: none;
}

.precio {
  margin: 16px 0 4px;
  font-size: 1.8rem;
  font-weight: 700;
}

.codigo {
  margin: 16px 0 0;
}

.pago label {
  display: block;
  margin: 12px 0 4px;
  font-weight: 600;
}

/* El enlace y su botón en la misma fila; min-width: 0 deja que el input encoja en 320 px */
.enlace-copiar {
  display: flex;
  gap: 8px;
}

.enlace-copiar input {
  flex: 1;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--color-numero);
  border-radius: var(--radio);
  font: inherit;
  font-size: 16px;
}

.enlace-copiar .boton {
  width: auto;
  margin-top: 0;
  padding: 10px 16px;
}

.boton-secundario {
  background: transparent;
  border: 2px solid var(--color-numero);
}

/* ---------- Privacidad (privacidad.html) y pie de todas las páginas ---------- */

.legal {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  line-height: 1.5;
  /* El email es una sola palabra larga: sin esto se sale de la pantalla a 320 px */
  overflow-wrap: break-word;
}

.legal h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.legal p,
.legal ul {
  margin: 0;
}

.legal ul {
  padding-left: 20px;
}

.legal li + li,
.legal ul + p {
  margin-top: 8px;
}

/* Enlaces del color del texto: el azul por defecto apenas se lee sobre el granate o el crema */
.legal a,
.acepto a,
.pie a {
  color: inherit;
}

.acepto {
  margin-top: 12px;
  text-align: center;
}

.pie {
  padding: 8px max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.85;
}

/* ---------- Selector de tema (crear.html y demo de index.html) ---------- */

.temas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  border: none;
}

.temas legend {
  width: 100%;
  margin-bottom: 4px;
  padding: 0;
  font-weight: 600;
}

/* currentColor: borde y foco del color del texto, sirve sobre la tarjeta clara y sobre el fondo oscuro */
.tema {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* Las 3 opciones se reparten el ancho: a 320 px caben en una fila sin bajar la tercera */
  flex: 1 1 0;
  min-width: 0;
  max-width: 104px;
  padding: 6px 4px;
  border: 2px solid transparent;
  border-radius: var(--radio);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

/* .editor .tema gana a .editor label (bloque, margen y negrita de los campos) */
.editor .tema {
  display: flex;
  margin: 0;
  font-weight: 400;
}

/* El radio queda oculto pero accesible: lo que se ve es la muestra y el borde de la opción elegida */
.tema input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.tema:has(input:checked),
.tema[aria-pressed="true"] {
  border-color: currentColor;
  font-weight: 700;
}

.tema:has(input:focus-visible),
.tema:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* Cada muestra enseña el fondo y la puerta de su tema, sea cual sea el tema de la página */
.muestra {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.muestra-clasico {
  background: linear-gradient(135deg, #7a1f2b 50%, #f6efe4 50%);
}

.muestra-romantico {
  background: linear-gradient(135deg, #9e2f50 50%, #fdebf0 50%);
}

.muestra-invierno {
  background: linear-gradient(135deg, #1d3557 50%, #f4f8fb 50%);
}

.demo .temas {
  margin-bottom: 8px;
}