/* ── Álbum compartido · Isa & Antonio ─────────────────────────────
   La identidad NO se inventa: sale de la invitación de
   bodaisayantonio.es. Crema #f8f7f2, verdes salvia de la acuarela y
   la caligrafía de pincel de los novios, recortada de la propia
   invitación (img/nombres.jpg) en vez de imitarla con otra tipografía.

   Todo el fondo de la interfaz es EXACTAMENTE ese crema, y por eso
   los recortes de la acuarela encajan sin necesitar transparencia.
   Si algún día se cambia --crema, hay que rehacer los recortes.     */

:root{
  color-scheme:light;   /* la invitación es clara; nada de inversión automática */

  --crema:#f8f7f2;
  --crema-velo:rgba(248,247,242,.9);
  --crema-hondo:#f1efe5;
  --linea:#e0e1d5;
  --linea-fuerte:#c7cbb9;

  --verde-hondo:#41573b;   /* el verde de las hojas y de la caligrafía */
  --texto:#4e6146;         /* el verde del texto de la invitación */
  --texto-suave:#647259;
  --salvia:#7a8f7a;        /* el del botón «CONFIRMA ASISTENCIA» */
  --salvia-velo:#e7eade;
  --acento:#5e7156;        /* salvia oscurecido: con texto crema sí contrasta */
  --acento-tinta:#f8f7f2;

  --peligro:#9c4a3f;
  --radio:12px;
  --radio-s:8px;
  --sombra:0 1px 2px rgba(65,87,59,.06), 0 8px 26px rgba(65,87,59,.09);
  --sombra-alta:0 14px 44px rgba(45,60,42,.22);

  --fuente:"Montserrat","Muli",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Zonas seguras del iPhone: la barra de acciones vive abajo del todo */
  --seguro-abajo:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* Columna a pantalla completa para que la barra de acciones quede
     abajo del todo aunque haya pocas fotos, y no flotando a media
     página. 100dvh y no 100vh: en el móvil la barra del navegador
     aparece y desaparece, y 100vh deja un hueco muerto. */
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  font-family:var(--fuente);
  font-size:16px;
  font-weight:400;
  line-height:1.55;
  color:var(--texto);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
main{flex:1 0 auto}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}

/* Las mayúsculas muy espaciadas son la voz de la invitación:
   «NOS COMPLACE INVITARTE», «29.08.2026». */
.grabado{
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--texto-suave);
}

/* ── Portada ──────────────────────────────────────────────────── */
/* Se desplaza con la página. Sólo la barra de pestañas queda pegada:
   una cabecera fija lo bastante alta como para que la caligrafía se
   lea se comería un quinto de la pantalla del móvil para siempre. */
.portada{
  text-align:center;
  padding:18px 16px 14px;
}
/* La caligrafía real de la invitación, recortada de ella. Se funde
   con el fondo porque su crema es exactamente el mismo. */
.portada__nombres{
  width:min(196px,52vw);
  height:auto;
  margin:0 auto 6px;
}
.portada__fecha{
  margin:0 0 10px;
  font-size:12px; font-weight:500; letter-spacing:.3em;
  color:var(--texto-suave);
}
.portada__lema{
  margin:0;
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--texto-suave);
}

/* ── Barra de pestañas (pegada arriba) ────────────────────────── */
.barra-pestanas{
  position:sticky; top:0; z-index:30;
  padding:10px 16px;
  background:var(--crema-velo);
  backdrop-filter:saturate(1.2) blur(12px);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid var(--linea);
  margin-bottom:12px;
}

/* Pestañas Todas / Mis fotos */
.pestanas{
  display:flex; gap:4px;
  background:var(--crema-hondo);
  border:1px solid var(--linea);
  border-radius:999px;
  padding:4px;
  max-width:420px;
  margin:0 auto;
}
.pestana{
  flex:1; border:0; background:transparent; cursor:pointer;
  padding:9px 10px; border-radius:999px;
  font-size:12.5px; font-weight:600; letter-spacing:.06em;
  color:var(--texto-suave);
  transition:background .18s, color .18s;
}
.pestana[aria-selected="true"]{
  background:var(--crema); color:var(--verde-hondo);
  box-shadow:0 1px 3px rgba(65,87,59,.14);
}
.pestana__cuenta{font-weight:500; opacity:.7}

/* ── Galería ──────────────────────────────────────────────────── */
.galeria{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  padding:0 3px;
}
@media (min-width:560px){ .galeria{grid-template-columns:repeat(4,1fr); gap:6px; padding:0 6px} }
@media (min-width:900px){ .galeria{grid-template-columns:repeat(6,1fr)} }
@media (min-width:1300px){ .galeria{grid-template-columns:repeat(8,1fr); max-width:1600px; margin:0 auto} }

.celda{
  position:relative;
  aspect-ratio:1;
  border:0; padding:0; margin:0;
  background:var(--crema-hondo);
  border-radius:var(--radio-s);
  overflow:hidden;
  cursor:pointer;
  /* El navegador reserva el hueco antes de que llegue la miniatura:
     así la rejilla no da saltos mientras se cargan cientos de fotos. */
  contain:content;
}
.celda img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .35s ease;
}
.celda img.puesta{opacity:1}
.celda:active{transform:scale(.97); transition:transform .1s}
.celda__mia{
  position:absolute; top:5px; right:5px;
  width:18px; height:18px; border-radius:50%;
  background:var(--acento); color:var(--acento-tinta);
  display:grid; place-items:center; font-size:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.celda__oculta{
  position:absolute; inset:0;
  background:rgba(38,48,35,.62);
  color:var(--crema); display:grid; place-items:center;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}

/* Vacíos y avisos */
.vacio{ padding:44px 28px 56px; text-align:center; color:var(--texto-suave) }
.vacio__rama{
  width:132px; height:auto; margin:0 auto 4px; opacity:.9;
  /* Los recortes de la acuarela son JPEG y su crema se desvía lo justo
     para que se note el rectángulo del recorte sobre el fondo. Un
     desvanecido en los bordes lo disuelve y además queda más bonito. */
  -webkit-mask-image:radial-gradient(ellipse at center, #000 52%, transparent 78%);
  mask-image:radial-gradient(ellipse at center, #000 52%, transparent 78%);
}
.vacio__titulo{
  font-size:17px; font-weight:600; color:var(--verde-hondo); margin:0 0 6px;
}
.vacio p{margin:0; font-size:14px; max-width:34ch; margin-inline:auto}

.cargando{ padding:26px; text-align:center; color:var(--texto-suave); font-size:13px;
  letter-spacing:.1em; text-transform:uppercase }

/* ── Barra de acciones ────────────────────────────────────────── */
.acciones{
  position:sticky; bottom:0; z-index:25;
  display:flex; gap:10px;
  padding:12px 14px calc(12px + var(--seguro-abajo));
  margin-top:18px;
  background:var(--crema-velo);
  backdrop-filter:saturate(1.2) blur(12px);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);
  border-top:1px solid var(--linea);
}
.boton{
  flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:0 16px;
  border:1px solid var(--linea-fuerte); border-radius:var(--radio);
  background:var(--crema); color:var(--texto);
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:var(--sombra);
  transition:transform .12s, filter .18s;
  -webkit-tap-highlight-color:transparent;
}
.boton:active{transform:scale(.975)}
.boton--principal{
  background:var(--acento); border-color:var(--acento); color:var(--acento-tinta);
}
.boton--principal:active{filter:brightness(1.08)}
.boton svg{width:20px; height:20px; flex:none}
.boton--fino{
  min-height:38px; font-size:11px; flex:none; padding:0 13px;
}
.boton--peligro{color:var(--peligro); border-color:var(--peligro)}
a.boton{text-decoration:none}

/* ── Panel de subida ──────────────────────────────────────────── */
.subida{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--crema);
  border-top:1px solid var(--linea-fuerte);
  box-shadow:var(--sombra-alta);
  padding:16px 16px calc(16px + var(--seguro-abajo));
  transform:translateY(110%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.subida.abierta{transform:translateY(0)}
.subida__fila{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.subida__titulo{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde-hondo); margin:0;
}
.subida__cuenta{font-size:13px; color:var(--texto-suave); font-variant-numeric:tabular-nums}
.barra{ height:7px; border-radius:999px; background:var(--salvia-velo); overflow:hidden }
.barra__relleno{
  height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--salvia),var(--verde-hondo));
  transition:width .25s ease;
}
.subida__pie{
  margin:10px 0 0; font-size:13px; color:var(--texto-suave);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.subida__error{color:var(--peligro); font-weight:600}

/* ── Visor a pantalla completa ────────────────────────────────── */
/* Aquí sí manda el fondo oscuro: lo que importa es la foto.        */
.visor{
  position:fixed; inset:0; z-index:60;
  background:#14180f;
  display:none;
  touch-action:none;
}
.visor.abierto{display:block}
.visor__lienzo{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.visor__foto{
  max-width:100%; max-height:100%;
  object-fit:contain;
  user-select:none; -webkit-user-drag:none;
  will-change:transform;
}
.visor__cabecera, .visor__pie{
  position:absolute; left:0; right:0;
  padding:14px 16px;
  color:var(--crema);
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(#000a,transparent);
  transition:opacity .25s;
}
.visor__cabecera{top:0; padding-top:calc(14px + env(safe-area-inset-top,0px))}
.visor__pie{
  bottom:0; padding-bottom:calc(14px + var(--seguro-abajo));
  background:linear-gradient(transparent,#000b);
  justify-content:space-between;
}
.visor.limpio .visor__cabecera,
.visor.limpio .visor__pie{opacity:0; pointer-events:none}
.visor__autor{font-size:15px; font-weight:600; line-height:1.25}
.visor__fecha{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.75;
}
.visor__cuenta{
  margin-left:auto; font-size:11px; letter-spacing:.14em; opacity:.75;
  font-variant-numeric:tabular-nums;
}
.icono-boton{
  border:0; background:rgba(248,247,242,.16); color:var(--crema);
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; flex:none;
  -webkit-tap-highlight-color:transparent;
}
.icono-boton:active{background:rgba(248,247,242,.32)}
.icono-boton svg{width:20px; height:20px}
.icono-boton--peligro{background:rgba(180,80,68,.38)}
.visor__botones{display:flex; gap:8px}
.visor__flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px;
  display:none;
}
@media (min-width:760px) and (hover:hover){ .visor__flecha{display:grid} }
.visor__flecha--izq{left:16px}
.visor__flecha--der{right:16px}

/* ── Diálogos ─────────────────────────────────────────────────── */
.velo{
  position:fixed; inset:0; z-index:70;
  background:rgba(45,58,40,.45);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
  /* En un móvil pequeño con el teclado abierto la tarjeta no cabe:
     que se pueda desplazar en vez de quedar cortada por arriba. */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.velo.abierto{display:flex}

/* La tarjeta imita la invitación: crema, marco fino, la caligrafía
   arriba y la acuarela asomando por una esquina. */
.tarjeta{
  position:relative;
  width:100%; max-width:380px;
  margin:auto;
  background:var(--crema);
  border:1px solid var(--linea-fuerte);
  border-radius:4px;
  box-shadow:var(--sombra-alta);
  padding:22px 20px 18px;
  text-align:center;
  overflow:hidden;
}
/* La rama asoma por abajo a la izquierda, como en la invitación.
   No es decorativa "por encima": vive detrás del texto. */
.tarjeta__rama{
  position:absolute; left:-46px; bottom:-24px;
  width:112px; height:auto; opacity:.4;
  pointer-events:none;
  z-index:0;
  /* Igual que arriba: el borde derecho del recorte se desvanece para
     que la rama parezca entrar en la tarjeta, no estar pegada encima. */
  -webkit-mask-image:linear-gradient(to right, #000 55%, transparent 100%);
  mask-image:linear-gradient(to right, #000 55%, transparent 100%);
}
.tarjeta > *:not(.tarjeta__rama):not(.solo-lectores){position:relative; z-index:1}
.tarjeta__nombres{
  width:min(158px,44%); height:auto; margin:0 auto 8px;
}
.tarjeta__fecha{
  margin:0 0 12px;
  font-size:12.5px; font-weight:500; letter-spacing:.28em;
  color:var(--texto-suave);
}
.tarjeta__titulo{
  font-size:18px; font-weight:600; color:var(--verde-hondo); margin:0 0 8px;
}
.tarjeta p{margin:0 0 16px; font-size:13.5px; line-height:1.5; color:var(--texto-suave)}
.campo{
  width:100%; padding:13px 14px;
  border:1px solid var(--linea-fuerte); border-radius:var(--radio-s);
  background:#fffefa; color:var(--texto);
  font:inherit; font-size:16px;   /* 16px evita que iOS haga zoom al enfocar */
  text-align:center;
  margin-bottom:14px;
}
.campo::placeholder{color:var(--texto-suave); opacity:.7}
.campo:focus{outline:2px solid var(--salvia); outline-offset:1px; border-color:transparent}
.tarjeta .boton{width:100%}
.tarjeta__nota{
  margin:14px 0 0 !important; font-size:11.5px; color:var(--texto-suave); line-height:1.5;
}
.enlace-suave{
  background:none; border:0; padding:6px; cursor:pointer;
  color:var(--texto-suave); font-size:13px; text-decoration:underline;
}

/* ── Aviso flotante ───────────────────────────────────────────── */
.aviso{
  position:fixed; left:50%; bottom:calc(94px + var(--seguro-abajo));
  transform:translate(-50%,20px); z-index:80;
  max-width:min(92vw,420px);
  background:var(--verde-hondo); color:var(--crema);
  padding:11px 18px; border-radius:999px;
  font-size:12.5px; font-weight:600; letter-spacing:.04em; text-align:center;
  box-shadow:var(--sombra-alta);
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.aviso.visible{opacity:1; transform:translate(-50%,0)}

/* ── Panel de administración ──────────────────────────────────── */
.admin-barra{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--linea);
  background:var(--crema);
  position:sticky; top:0; z-index:20;
}
.admin-barra__titulo{
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--verde-hondo); margin:0 auto 0 0;
}
.admin-seleccion{
  font-size:12px; color:var(--texto-suave); font-variant-numeric:tabular-nums;
}
.celda--elegida{outline:3px solid var(--acento); outline-offset:-3px}
.celda__marca{
  position:absolute; top:5px; left:5px;
  width:20px; height:20px; border-radius:50%;
  background:var(--acento); color:var(--acento-tinta);
  display:grid; place-items:center; font-size:12px; font-weight:700;
}

.oculto{display:none !important}
.solo-lectores{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}