/* Componentes base de Huellitas (ENTREGA-DE-DISENO § «Componentes base»).
   .btn-principal, .pespunte y .textura-vichy nacen en tokens.css; aquí se completan. */

/* Botones ------------------------------------------------------------------ */
.btn-principal, .btn-oscuro, .btn-secundario, .btn-peligro {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 22px;
  border-radius: var(--radio-boton);
  font-size: 16px; text-decoration: none; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.btn-principal { color: var(--color-cacao); font-variation-settings: 'opsz' 16; }
.btn-principal:hover { color: var(--color-cacao); }
.btn-principal--pildora { border-radius: var(--radio-chip); min-height: 52px; }
.btn-oscuro {
  background: var(--color-cacao); color: var(--color-blanco-calido); border: 0;
  font-family: var(--font-titulos); font-variation-settings: 'opsz' 18; font-weight: 800; font-size: 18px;
  transition: background var(--dur-toque);
}
/* Solo con puntero real: en el celular el hover se queda pegado después de tocar. */
@media (hover: hover) { .btn-oscuro:hover { background: var(--color-hover-oscuro); color: var(--color-blanco-calido); } }
.btn-secundario {
  background: var(--color-blanco-calido); color: var(--color-cacao);
  border: 2px solid var(--color-avena); font-weight: 700;
}
.btn-peligro {
  background: var(--color-alerta-fondo); color: var(--color-alerta);
  border: 2px solid var(--color-alerta-borde); font-weight: 700;
}
.btn-peligro:hover { color: var(--color-alerta); }
.btn-ancho { width: 100%; }
:is(.btn-principal, .btn-oscuro, .btn-secundario, .btn-peligro):disabled { opacity: 0.5; cursor: not-allowed; }

/* Campos: etiqueta visible arriba, 52 px de alto, 16 px de letra (iOS no hace zoom) ---- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 700; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 0 14px;
  border: 2px solid var(--color-borde-campo); border-radius: var(--radio-campo);
  background: var(--color-blanco-calido); color: var(--color-cacao);
  font-size: 16px;
}
/* El placeholder del navegador (#A9A9A9) da 2,3:1: texto suave da 6,5:1. */
.campo input::placeholder, .campo textarea::placeholder { color: var(--color-texto-suave); opacity: 1; }
.campo textarea { padding: 14px; min-height: 120px; resize: vertical; line-height: 1.45; }
.campo :is(input, select, textarea):focus-visible { outline: none; border-color: var(--color-cacao); }
.campo__ayuda { font-size: 13px; color: var(--color-texto-suave); }
.campo__error { font-size: 13px; font-weight: 600; color: var(--color-alerta); }
.campo [aria-invalid="true"] { border-color: var(--color-alerta); }

/* Chips -------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  border-radius: var(--radio-chip);
  border: 2px solid var(--color-avena);
  background: var(--color-blanco-calido); color: var(--color-cacao);
  font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.chip--sel, .chip[aria-checked="true"], .chip[aria-pressed="true"] {
  border-color: var(--color-cacao); background: var(--color-cacao); color: var(--color-blanco-calido);
}
.segmentado {
  display: flex; gap: 4px; padding: 4px;
  border-radius: var(--radio-chip); background: var(--color-avena);
}
.segmentado .chip { flex: 1; justify-content: center; border-color: transparent; background: transparent; }
.segmentado .chip--sel, .segmentado .chip[aria-checked="true"] { background: var(--color-cacao); color: var(--color-blanco-calido); }

/* Chips de estado: Activa, Pendiente, Admin, «Muy pronto» */
.estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radio-chip);
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--color-cacao);
}
.estado--activa { background: var(--color-salvia-clara); }
.estado--pendiente { background: var(--color-mostaza-clara); }
.estado--admin { background: var(--color-cacao); color: var(--color-mostaza); }

/* Interruptor: <button role="switch" aria-checked> de 56×34 -------------------- */
.interruptor {
  flex: 0 0 auto; position: relative;
  width: 56px; height: 34px; padding: 0; border: 0;
  border-radius: var(--radio-chip);
  background: var(--color-interruptor-apagado);
  cursor: pointer;
  transition: background var(--dur-toque);
}
.interruptor::after {
  content: ""; position: absolute; top: 4px; left: 4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-blanco-calido);
  box-shadow: 0 1px 2px rgba(43,33,24,0.3);
  transition: transform var(--dur-toque);
}
.interruptor[aria-checked="true"] { background: var(--color-oliva); }
.interruptor[aria-checked="true"]::after { transform: translateX(22px); }

/* Hoja inferior: <dialog class="hoja"> ---------------------------------------- */
.hoja {
  position: fixed; inset: auto 0 0 0; margin: 0 auto;
  width: 100%; max-width: 430px; max-height: 90dvh;
  padding: 14px 20px calc(24px + env(safe-area-inset-bottom));
  border: 0; border-radius: 30px 30px 0 0;
  background: var(--color-leche); color: var(--color-cacao);
  overflow-y: auto;
}
.hoja::before {
  content: ""; display: block; width: 44px; height: 5px; margin: 0 auto 16px;
  border-radius: var(--radio-chip); background: var(--color-avena);
}
.hoja::backdrop { background: rgba(43,33,24,0.48); }
.hoja[open] { animation: hoja-entra var(--dur-entrada) ease-out; }
@keyframes hoja-entra { from { transform: translateY(24px); opacity: 0; } }

/* Tarjetas ----------------------------------------------------------------- */
.tarjeta {
  background: var(--color-blanco-calido);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}

/* Privacidad: color + ícono, siempre juntos ----------------------------------- */
.privacidad {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--radio-chip);
  font-size: 11px; font-weight: 600; line-height: 1.4;
  color: var(--color-cacao);
}
.privacidad::before {
  content: ""; flex: 0 0 auto; width: 11px; height: 11px;
  background: currentColor;
  -webkit-mask: var(--privacidad-icono) center / contain no-repeat;
  mask: var(--privacidad-icono) center / contain no-repeat;
}
.privacidad--familia {
  background: var(--privacidad-familia);
  --privacidad-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3 3-5 6-5s6 2 6 5'/%3E%3Cpath d='M16 4a3 3 0 0 1 0 6'/%3E%3Cpath d='M18 15c2 .5 3 2 3 5'/%3E%3C/svg%3E");
}
.privacidad--solo-papas {
  background: var(--privacidad-solo-papas);
  --privacidad-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.privacidad--capsula {
  background: var(--privacidad-capsula);
  --privacidad-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='2'/%3E%3Cpath d='M3 8l9 6 9-6'/%3E%3C/svg%3E");
}

/* Polaroid con cinta de vichy ------------------------------------------------- */
.polaroid {
  position: relative;
  background: var(--color-blanco-calido);
  padding: 8px 8px 12px;
  border-radius: 6px;
  box-shadow: var(--sombra-polaroid);
  transform: rotate(var(--giro, -2.5deg));
  display: flex; flex-direction: column; gap: 8px;
}
.polaroid::before {
  content: ""; position: absolute; top: -9px; left: 50%;
  width: 56px; height: 18px; margin-left: -28px;
  background-color: rgba(226,100,63,0.8);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.45) 0 4px, transparent 4px 8px), repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 4px, transparent 4px 8px);
  transform: rotate(4deg);
}
.polaroid:nth-child(even) { --giro: 2deg; }
.polaroid__foto { border-radius: 3px; background: var(--color-arcilla-clara); object-fit: cover; width: 100%; aspect-ratio: 1; }

/* Estado vacío (12-pantallas-vacias) ------------------------------------------- */
.vacio {
  position: relative;
  min-height: 440px;
  padding: 24px;
  border-radius: 32px;
  background: var(--color-blanco-calido);
  outline: var(--pespunte);
  outline-offset: -10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center;
}
.vacio .etiqueta, .vacio .vacio__pronto { align-self: flex-start; }
.vacio__titulo { font-family: var(--font-titulos); font-variation-settings: 'opsz' 22; font-weight: 700; font-size: 22px; line-height: 1.15; }
.vacio__texto { font-size: 15px; line-height: 1.45; color: var(--color-texto-medio); max-width: 280px; }
/* Etiqueta, no botón: chica, sin sombra ni 44 px, y no se toca. */
.vacio__pronto {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radio-chip);
  background: var(--color-mostaza-clara); color: var(--color-cacao);
  font-size: 13px; font-weight: 700; line-height: 1.3;
}
.vacio--oscuro { background: var(--color-cacao); color: var(--color-blanco-calido); outline: 0; }
.vacio--oscuro .etiqueta, .vacio--oscuro .vacio__texto { color: var(--color-avena); }
.vacio__pendientes {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: var(--radio-chip);
  background: color-mix(in srgb, var(--color-blanco-calido) 14%, transparent); color: var(--color-blanco-calido);
  font-size: 14px; font-weight: 700;
}
.vacio__pendientes[hidden], .vacio [data-tomar-foto][hidden] { display: none; }
.vacio__reintentar {
  min-height: 44px; padding: 0 16px; border: 0; background: none; cursor: pointer;
  color: var(--color-blanco-calido); font-size: 15px; font-weight: 700; text-decoration: underline;
}

/* Cargando: tres huellitas que avanzan, o el sonajero que se agita ---------------- */
.cargando { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; }
.cargando__huella { width: 22px; height: 22px; opacity: 0.2; animation: huella-paso 1.2s infinite; }
.cargando__huella:nth-child(odd) { transform: rotate(-12deg) translateY(4px); }
.cargando__huella:nth-child(even) { transform: rotate(12deg) translateY(-4px); }
.cargando__huella:nth-child(2) { animation-delay: 0.3s; }
.cargando__huella:nth-child(3) { animation-delay: 0.6s; }
@keyframes huella-paso { 0%, 100% { opacity: 0.2; } 30%, 60% { opacity: 1; } }
.cargando__sonajero { width: 56px; height: 56px; transform-origin: 50% 85%; animation: sonajero 0.8s ease-in-out infinite; }
@keyframes sonajero { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) {
  .cargando__huella { opacity: 0.6; }
}

/* Acceso: entrar, crear contraseña, enlaces (acceso-3 y acceso-4) -------------------- */
.marco--acceso { padding-bottom: 0; min-height: 100dvh; }
.marco--acceso .pantalla {
  min-height: 100dvh; padding: calc(24px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  gap: 18px;
}
.acceso__sol, .acceso__luna, .acceso__salvia { position: absolute; border-radius: 50%; pointer-events: none; }
.acceso__sol { right: -80px; top: -60px; width: 260px; height: 260px; background: var(--color-terracota); }
.acceso__luna { right: 90px; top: 130px; width: 70px; height: 70px; background: var(--color-mostaza); }
.acceso__salvia { left: -70px; bottom: -70px; width: 220px; height: 220px; background: var(--color-salvia); }
.acceso__logo { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.acceso__logo-icono {
  width: 34px; height: 34px; border-radius: 12px; background: var(--color-cacao);
  display: flex; align-items: center; justify-content: center;
}
.acceso__saludo { display: flex; flex-direction: column; gap: 8px; }
.acceso__saludo .texto, .acceso__pie { color: var(--color-texto-suave); }
.acceso__titulo--grande { font-family: var(--font-titulos); font-variation-settings: 'opsz' 34; font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -1px; }
.acceso__saludo:has(.acceso__titulo--grande) { margin-top: 130px; gap: 6px; }
.acceso__form { display: flex; flex-direction: column; gap: 12px; }
.acceso__form--crecer { flex: 1; gap: 20px; }
.acceso__entrar { margin-top: 4px; }
.acceso__guardar { margin-top: auto; }
.acceso__guardar:disabled { background: var(--color-divisor); color: var(--color-texto-suave); opacity: 1; }
.acceso__sello {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border-radius: var(--radio-chip);
  background: var(--color-salvia); font-size: 13px; font-weight: 700;
}
.acceso__o { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--color-texto-suave); }
.acceso__o span { flex: 1; height: 2px; background: var(--color-avena); }
.acceso__magico { border-color: var(--color-cacao); }
.acceso__pie { margin-top: auto; text-align: center; }
.acceso__enlace-corto { display: flex; align-items: center; min-height: 44px; margin: -6px 0; font-size: 14px; font-weight: 600; }
.campo__fila { display: flex; align-items: center; justify-content: space-between; }
.campo__clave {
  display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 0 4px 0 0;
  border: 2px solid var(--color-borde-campo); border-radius: var(--radio-campo); background: var(--color-blanco-calido);
}
.campo .campo__clave input { border: 0; background: transparent; min-height: 44px; padding: 0 0 0 14px; flex: 1; min-width: 0; }
.campo__clave:focus-within { border-color: var(--color-cacao); }
.campo .campo__clave input:focus-visible { outline: none; }
.campo__ojo {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: var(--color-leche); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.requisitos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.requisitos li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.requisitos__marca {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-blanco-calido); box-shadow: inset 0 0 0 2px var(--color-arcilla);
  display: flex; align-items: center; justify-content: center;
}
.requisitos li[data-cumple="true"] .requisitos__marca { background: var(--color-oliva); box-shadow: none; }
.requisitos li[data-cumple="true"] .requisitos__marca::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2.5px solid var(--color-blanco-calido); border-bottom: 2.5px solid var(--color-blanco-calido);
  transform: rotate(-45deg);
}

/* Entrar por el QR (boceto «1 · Escanea el QR», piezas de acceso-1) ------------------- */
.qr__mancha {
  position: absolute; right: -110px; top: -150px; width: 230px; height: 230px; pointer-events: none;
  border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%; background: var(--color-mostaza);
}
.acceso__sello--evento { position: relative; background: var(--color-mostaza-clara); }
.qr__saludo { position: relative; }
.qr__saludo .titulo { padding-right: 8px; }
.qr__form { gap: 14px; }
.qr__chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.qr__chips legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip--radio { position: relative; }
.chip--radio input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.chip--radio:has(input:checked) { border-color: var(--color-cacao); background: var(--color-cacao); color: var(--color-blanco-calido); }
.chip--radio:has(input:focus-visible) { outline: 3px solid var(--color-cacao); outline-offset: 2px; }
.qr__otro { display: none; }
.qr__form:has(input[value="otro"]:checked) .qr__otro { display: flex; }
.qr__entrar { margin-top: 4px; width: 100%; }
.qr__pie { text-align: center; }
.qr__inactivo { min-height: 360px; margin-top: 24px; }
.qr__entrar-enlace { font-weight: 700; }

/* Evento: aviso del solicitante y contador del admin (la página completa está al final) ------------ */
.evento__titulo { display: flex; flex-direction: column; gap: 6px; }
.aviso {
  padding: 14px 16px; border-radius: var(--radio-campo);
  background: var(--color-mostaza-clara); color: var(--color-cacao);
  font-size: 15px; font-weight: 600; line-height: 1.4;
}
.aviso--enlace { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.contador__enlace {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px;
  text-decoration: none; color: var(--color-cacao);
}
.contador__numero {
  flex: 0 0 auto; min-width: 48px; min-height: 48px; padding: 0 8px; border-radius: var(--radio-icono);
  background: var(--color-terracota); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titulos); font-variation-settings: 'opsz' 24; font-weight: 800; font-size: 24px;
}
.contador__texto { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 16px; }

/* Llegaron por el QR (boceto «3 · Ustedes», piezas de acceso-6) --------------------------- */
.familia__sol {
  position: absolute; right: -90px; top: -150px; width: 220px; height: 220px;
  border-radius: 50%; background: var(--color-mostaza); pointer-events: none;
}
.familia__cabecera { position: relative; display: flex; align-items: center; gap: 12px; }
.boton-icono {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radio-icono);
  background: var(--color-blanco-calido); display: flex; align-items: center; justify-content: center;
}
.pildora-admin {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
  border-radius: var(--radio-chip); background: var(--color-cacao); color: var(--color-blanco-calido);
  font-size: 12px; font-weight: 700;
}
.familia__titulo { position: relative; display: flex; flex-direction: column; gap: 6px; }
.familia__titulo .texto { color: var(--color-texto-suave); }
.familia__seccion { display: flex; flex-direction: column; gap: 10px; }
.familia__lista { list-style: none; margin: 0; padding: 4px 14px; border-radius: 22px; box-shadow: none; }
.fila {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--color-divisor);
}
.fila:last-child { border-bottom: 0; }
.fila__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.fila__avatar--mostaza { background: var(--color-mostaza); }
.fila__avatar--salvia { background: var(--color-salvia); }
.fila__avatar--arcilla { background: var(--color-arcilla); }
.fila__avatar--avena { background: var(--color-avena); }
.fila__quien { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; font-size: 15px; }
.fila__quien b { overflow-wrap: anywhere; }
.fila__marca { margin-top: 4px; }
.fila__acciones { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.fila__acciones form { margin: 0; }
.btn-aprobar, .btn-no-familia {
  min-height: 44px; padding: 0 18px; border-radius: var(--radio-chip);
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.btn-aprobar { border: 2px solid var(--color-salvia); background: var(--color-salvia); color: var(--color-cacao); }
.btn-no-familia { border: 2px solid var(--color-alerta-borde); background: var(--color-blanco-calido); color: var(--color-alerta); }
.fila__cuenta { font-size: 13px; font-weight: 600; color: var(--color-texto-medio); overflow-wrap: anywhere; }
.hoja__cuerpo { display: flex; flex-direction: column; gap: 12px; }
.hoja__acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* Estado de un recuerdo en la cola del celular (HU-17, parciales/_estado_subida.html):
   cola.js cambia data-estado y aquí se muestra solo el texto que toca. */
.estado-subida { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; font-weight: 700; color: var(--color-texto-medio); }
.estado-subida [data-para], .estado-subida__progreso, .estado-subida__reintentar { display: none; }
.estado-subida[data-estado="en_cola"] [data-para="en_cola"],
.estado-subida[data-estado="subiendo"] [data-para="subiendo"],
.estado-subida[data-estado="sin_senal"] [data-para="sin_senal"],
.estado-subida[data-estado="error"] [data-para="error"],
.estado-subida[data-estado="listo"] [data-para="listo"] { display: inline; }
.estado-subida[data-estado="subiendo"] .estado-subida__progreso { display: inline; font-variant-numeric: tabular-nums; }
.estado-subida[data-estado="error"] { color: var(--color-alerta); }
.estado-subida[data-estado="error"] .estado-subida__reintentar { display: inline-flex; min-height: 44px; padding: 0 16px; font-size: 15px; }
.cola-prueba { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

/* Captura rápida (02-captura-rapida-1/2/3, HU-12 … HU-17) ---------------------------------- */
.marco--captura { padding-bottom: 0; overflow: clip; }
.marco--captura .pantalla {
  min-height: 100dvh; gap: 0;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.captura__mancha {
  position: absolute; left: -70px; bottom: -80px; width: 240px; height: 240px;
  border-radius: 50%; background: var(--color-avena); pointer-events: none;
}
.captura { flex: 1; display: flex; flex-direction: column; gap: 18px; line-height: normal; }
.captura__cabecera { position: relative; display: flex; align-items: center; justify-content: space-between; }
.captura__evento {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px;
  border-radius: var(--radio-chip); background: var(--color-mostaza);
  font-size: 13px; font-weight: 700;
}
.captura__fase { position: relative; flex: 1; display: flex; flex-direction: column; }
.captura__fase[hidden] { display: none; }
.captura h1:focus { outline: none; }
.captura__error:empty { display: none; }
.captura__error { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--color-alerta); }

/* Elegir */
.elegir { gap: 14px; }
.elegir__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 0; }
.elegir__foto, .elegir__camino {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  border: 0; color: var(--color-cacao); text-align: left; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: transform var(--dur-toque), box-shadow var(--dur-toque);
}
.elegir__foto:focus-within, .elegir__camino:focus-within, .elegir__camino:focus-visible { outline: 3px solid var(--color-cacao); outline-offset: 2px; }
.elegir__input:focus-visible { outline: none; }
.elegir__foto {
  min-height: 200px; padding: 20px; border-radius: 30px;
  background: var(--color-terracota); box-shadow: var(--sombra-pisada);
}
.elegir__foto:active { transform: translateY(4px); box-shadow: none; }
.elegir__circulo {
  position: absolute; right: -20px; top: -20px; width: 150px; height: 150px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-blanco-calido) 22%, transparent); pointer-events: none;
}
.elegir__camara { position: absolute; right: 26px; top: 26px; pointer-events: none; }
.elegir__foto-titulo { font-family: var(--font-titulos); font-variation-settings: 'opsz' 28; font-weight: 800; font-size: 28px; pointer-events: none; }
.elegir__foto-sub { font-size: 14px; font-weight: 600; pointer-events: none; }
.elegir__caminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.elegir__camino { min-height: 108px; gap: 2px; padding: 14px 16px; border-radius: var(--radio-tarjeta); font: inherit; }
.elegir__camino:active { transform: scale(0.98); }
.elegir__camino--video { background: var(--color-salvia); }
.elegir__camino--audio { background: var(--color-mostaza); }
.elegir__camino--escribir { background: var(--color-blanco-calido); }
.elegir__camino--galeria { background: var(--color-avena); }
.elegir__camino-titulo { font-family: var(--font-titulos); font-variation-settings: 'opsz' 18; font-weight: 700; font-size: 18px; pointer-events: none; }
.elegir__camino-sub { font-size: 12px; font-weight: 600; opacity: 0.85; pointer-events: none; }
.elegir__pie { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-texto-medio); }

/* Revisar */
.revisar { gap: 16px; }
.revisar__cabecera { display: flex; align-items: center; gap: 10px; }
.revisar__cabecera .boton-icono { border: 0; cursor: pointer; color: var(--color-cacao); }
.revisar__titulo { font-family: var(--font-titulos); font-variation-settings: 'opsz' 24; font-weight: 800; font-size: 24px; }
.revisar__vista { display: flex; flex-direction: column; gap: 12px; }
.revisar__vista[hidden] { display: none; }
.revisar__fila { display: flex; gap: 10px; }
.revisar__fila .revisar__polaroid { flex: 2 1 0; min-width: 0; }
.revisar__polaroid {
  flex: none; height: 230px; padding: 8px;
  background: var(--color-blanco-calido); border-radius: 8px;
  transform: rotate(-1.5deg); box-shadow: var(--sombra-polaroid);
}
.revisar__medio {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 4px; background: var(--color-arcilla-clara);
  display: flex; align-items: center; justify-content: center;
}
.revisar__medio img { width: 100%; height: 100%; object-fit: cover; }
.revisar__marcador { color: var(--color-nota-a-mano); }
.revisar__play {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-cacao) 60%, transparent);
}
.revisar__play::after {
  content: ""; position: absolute; left: 17px; top: 13px;
  border-style: solid; border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--color-blanco-calido);
}
.revisar__lado { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.revisar__mini { flex: 1; min-height: 0; border-radius: var(--radio-icono); overflow: hidden; }
.revisar__mini .revisar__medio { border-radius: 0; background: var(--color-avena); }
.revisar__mas {
  flex: 1; min-height: 44px; border: 0; border-radius: var(--radio-icono);
  background: var(--color-salvia); color: var(--color-cacao);
  font-weight: 800; font-size: 15px; cursor: pointer;
}
.revisar__mosaico {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.revisar__tarjeta { aspect-ratio: 1; border-radius: var(--radio-icono); overflow: hidden; }
.revisar__tarjeta .revisar__medio { border-radius: 0; }
.revisar__escuchar audio { width: 100%; height: 44px; }
.revisar .campo { gap: 6px; }
.revisar .campo[hidden] { display: none; }
.revisar__opcional { font-weight: 500; color: var(--color-texto-suave); }
.revisar .campo input { min-height: 50px; }
.revisar .campo textarea { min-height: 220px; }
.revisar__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.revisar__ayuda-nivel { margin-top: -6px; font-size: 13px; line-height: 1.35; color: var(--color-texto-suave); }
.revisar__chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px;
  border: 2px solid var(--color-cacao); border-radius: var(--radio-chip);
  background: var(--color-blanco-calido); color: var(--color-cacao);
  font: inherit; font-size: 14px; font-weight: 700;
}
.revisar__chip--evento { background: var(--color-mostaza); }
.revisar__chip--privacidad { cursor: pointer; -webkit-user-select: none; user-select: none; }
/* Privacidad: color + ícono, siempre juntos (Familia salvia / dos personas, Solo papás mostaza /
   candado, Cápsula arcilla / sobre). Los íconos son los mismos de .privacidad. */
.revisar__punto {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--privacidad-familia);
}
.revisar__punto::after {
  content: ""; width: 12px; height: 12px; background: var(--color-cacao);
  -webkit-mask: var(--privacidad-icono) center / contain no-repeat;
  mask: var(--privacidad-icono) center / contain no-repeat;
}
.revisar__chip--privacidad[data-nivel="familia"] .revisar__punto { background: var(--privacidad-familia); }
.revisar__chip--privacidad[data-nivel="solo_papas"] .revisar__punto { background: var(--privacidad-solo-papas); }
.revisar__chip--privacidad[data-nivel="capsula"] .revisar__punto { background: var(--privacidad-capsula); }
.revisar__chip--privacidad[data-nivel="familia"] { --privacidad-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3 3-5 6-5s6 2 6 5'/%3E%3Cpath d='M16 4a3 3 0 0 1 0 6'/%3E%3Cpath d='M18 15c2 .5 3 2 3 5'/%3E%3C/svg%3E"); }
.revisar__chip--privacidad[data-nivel="solo_papas"] { --privacidad-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.revisar__chip--privacidad[data-nivel="capsula"] { --privacidad-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='2'/%3E%3Cpath d='M3 8l9 6 9-6'/%3E%3C/svg%3E"); }
.revisar__pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 50px; }
.revisar__subir { width: 100%; min-height: 60px; font-size: 19px; font-variation-settings: 'opsz' 19; }

/* Grabar audio */
.audio { gap: 16px; }
.audio__centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding-bottom: 60px; }
.audio__reloj { font-family: var(--font-titulos); font-variation-settings: 'opsz' 44; font-weight: 800; font-size: 44px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.audio__boton {
  position: relative; width: 148px; height: 148px; border: 0; border-radius: 50%;
  background: var(--color-terracota); color: var(--color-cacao); box-shadow: var(--sombra-pisada);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font-titulos); font-variation-settings: 'opsz' 18; font-weight: 800; font-size: 18px;
  cursor: pointer; transition: transform var(--dur-toque), box-shadow var(--dur-toque);
}
.audio__boton:active { transform: translateY(4px); box-shadow: none; }
.audio__boton:disabled { opacity: 0.6; }
.audio__detener { display: none; width: 34px; height: 34px; border-radius: 8px; background: var(--color-cacao); }
.audio__boton--grabando { background: var(--color-mostaza); outline: var(--pespunte); outline-offset: -10px; }
.audio__boton--grabando .audio__icono { display: none; }
.audio__boton--grabando .audio__detener { display: block; }
.audio__ayuda { font-size: 15px; color: var(--color-texto-medio); max-width: 260px; line-height: 1.4; }

/* Página del evento (04-evento, HU-18 … HU-21) ------------------------------------------------
   Texturas de la pantalla (máximo dos): festón en la portada y vichy en las cintas de lo preparado. */
.marco--evento .pantalla { gap: 18px; }
.chip[aria-current="true"] { border-color: var(--color-cacao); background: var(--color-cacao); color: var(--color-blanco-calido); }

.portada {
  position: relative;
  margin: calc(-22px - env(safe-area-inset-top)) -20px 8px;
  padding: calc(22px + env(safe-area-inset-top)) 20px 30px;
  border-radius: 0 0 36px 36px;
  background: var(--color-cacao); color: var(--color-blanco-calido);
  display: flex; flex-direction: column; gap: 18px;
}
/* Festón: el borde de babero que cuelga de la portada, entre las dos esquinas redondas. */
.portada::after {
  content: ""; position: absolute; left: 34px; right: 34px; bottom: -9px; height: 10px;
  background: radial-gradient(circle at 50% 0, var(--color-cacao) 9px, transparent 9.5px) 0 0 / 20px 10px round no-repeat;
  pointer-events: none;
}
.portada__sol, .portada__luna, .portada__punto { position: absolute; border-radius: 50%; pointer-events: none; }
.portada__sol { right: -50px; top: calc(40px + env(safe-area-inset-top)); width: 200px; height: 200px; background: var(--color-terracota); }
.portada__luna { right: 70px; top: calc(150px + env(safe-area-inset-top)); width: 90px; height: 90px; background: var(--color-mostaza); }
.portada__punto { right: 20px; top: calc(22px + env(safe-area-inset-top)); width: 22px; height: 22px; background: var(--color-salvia); }
.portada__cubos { position: absolute; right: 22px; top: calc(118px + env(safe-area-inset-top)); width: 100px; height: 100px; }
.portada__barra { position: relative; display: flex; align-items: center; min-height: 44px; }
.portada__volver {
  width: 44px; height: 44px; border-radius: var(--radio-icono);
  background: color-mix(in srgb, var(--color-blanco-calido) 12%, transparent); color: var(--color-blanco-calido);
  display: flex; align-items: center; justify-content: center;
}
.portada__volver:hover { color: var(--color-blanco-calido); }
.portada :focus-visible { outline-color: var(--color-mostaza); }
.portada__texto { position: relative; display: flex; flex-direction: column; gap: 8px; max-width: 230px; }
.portada__etiqueta {
  align-self: flex-start; padding: 5px 10px; border-radius: var(--radio-chip);
  background: var(--color-mostaza); color: var(--color-cacao);
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
}
.portada__hola { font-size: 15px; font-weight: 600; color: var(--color-avena); }
.portada__titulo {
  font-family: var(--font-titulos); font-variation-settings: 'opsz' 38; font-weight: 800;
  font-size: 38px; line-height: 1; letter-spacing: -1px; overflow-wrap: anywhere;
}
.portada__meta { font-size: 14px; color: var(--color-avena); }
.portada__quienes { position: relative; display: flex; align-items: center; gap: 10px; }
.portada__avatares { display: flex; flex: 0 0 auto; }
.portada__avatar {
  width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--color-cacao);
  color: var(--color-cacao); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.portada__avatar + .portada__avatar { margin-left: -9px; }
.portada__avatar--mostaza { background: var(--color-mostaza); }
.portada__avatar--salvia { background: var(--color-salvia); }
.portada__avatar--avena { background: var(--color-avena); }
.portada__subieron { font-size: 14px; line-height: 1.35; color: var(--color-avena); }

.evento__subir { font-size: 18px; min-height: 58px; }

/* Recordatorio de crear contraseña */
.recordatorio { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; padding: 16px; }
.recordatorio__icono {
  width: 44px; height: 44px; border-radius: var(--radio-icono); background: var(--color-mostaza-clara);
  display: flex; align-items: center; justify-content: center;
}
.recordatorio__cuerpo { display: flex; flex-direction: column; gap: 2px; align-self: center; }
.recordatorio__titulo { font-family: var(--font-titulos); font-variation-settings: 'opsz' 18; font-weight: 700; font-size: 18px; line-height: 1.2; }
.recordatorio__texto { font-size: 14px; color: var(--color-texto-medio); }
.recordatorio__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.recordatorio__acciones form { display: contents; }
.recordatorio__crear, .recordatorio__despues { flex: 1 1 150px; min-height: 48px; padding: 0 14px; font-size: 15px; }

/* Tarjeta del QR (solo Ana y Bryan) y la hoja con el QR en grande */
.qr-evento {
  display: flex; align-items: center; gap: 16px; padding: 16px;
  border-radius: 26px; background: var(--color-blanco-calido);
}
.qr-evento__codigo {
  position: relative; flex: 0 0 auto; width: 110px; height: 110px; padding: 8px;
  border: 2px solid var(--color-cacao); border-radius: 16px; background: var(--color-blanco-calido);
  cursor: pointer;
}
.qr-evento__codigo svg:first-child, .hoja-qr__codigo svg:first-child { width: 100%; height: 100%; }
.qr-evento__huella {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: var(--color-mostaza); box-shadow: 0 0 0 3px var(--color-blanco-calido);
  display: flex; align-items: center; justify-content: center;
}
.qr-evento__huella--grande { width: 52px; height: 52px; margin: -26px 0 0 -26px; box-shadow: 0 0 0 5px var(--color-blanco-calido); }
.qr-evento__texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qr-evento__titulo { font-family: var(--font-titulos); font-variation-settings: 'opsz' 17; font-weight: 700; font-size: 17px; line-height: 1.15; }
.qr-evento__ayuda { font-size: 13px; line-height: 1.35; color: var(--color-texto-suave); }
.qr-evento__marca { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; }
.hoja-qr__codigo {
  position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 4px auto;
  padding: 14px; border: 2px solid var(--color-cacao); border-radius: 22px; background: var(--color-blanco-calido);
}
.hoja-qr__url { overflow-wrap: anywhere; }

/* Lo preparado por Ana y Bryan: polaroids en fila que se desliza */
.preparados { display: flex; flex-direction: column; gap: 6px; }
.preparados[hidden] { display: none; }
.preparados__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preparados__ordenar {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px;
  font-size: 15px; font-weight: 700;
}
.preparados__lista {
  list-style: none; margin: 0 -20px; padding: 18px 20px 24px;
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.preparados__lista::-webkit-scrollbar { display: none; }
.preparado { flex: 0 0 236px; scroll-snap-align: center; animation: entra-polaroid var(--dur-entrada) ease-out both; }
.preparado:nth-child(2) { animation-delay: calc(var(--escalonado) * 1); }
.preparado:nth-child(3) { animation-delay: calc(var(--escalonado) * 2); }
.preparado:nth-child(n+4) { animation-delay: calc(var(--escalonado) * 3); }
@keyframes entra-polaroid { from { opacity: 0; transform: translateY(16px) rotate(var(--giro, -2.5deg)); } }
.preparado .polaroid__foto { display: flex; align-items: center; justify-content: center; }
.preparado__nota, .preparado__audio {
  aspect-ratio: 1; border-radius: 3px; padding: 16px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.preparado__nota {
  background: var(--color-mostaza);
  font-family: var(--font-titulos); font-variation-settings: 'opsz' 18; font-weight: 700; font-size: 18px; line-height: 1.25;
  overflow: hidden;
}
.preparado__audio { background: var(--color-mostaza-clara); align-items: center; }
.preparado__audio audio { width: 100%; }
.preparado__frase { font-family: var(--font-titulos); font-variation-settings: 'opsz' 15; font-weight: 700; font-size: 15px; line-height: 1.25; padding: 0 2px; }
.preparado__play { position: absolute; left: 50%; top: calc(8px + 110px); margin: -22px 0 0 -22px; }
.preparado .recuerdo__video { width: 100%; aspect-ratio: 1; border-radius: 3px; background: var(--color-cacao); }

/* Mosaico de la familia: dos columnas que se acomodan (las fotos más altas, notas y videos más bajos) */
.familia-evento { display: flex; flex-direction: column; gap: 18px; }
.filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.filtros .chip { flex: 0 0 auto; }
.mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 10px; column-gap: 10px; }
.recuerdo {
  position: relative; overflow: hidden;
  grid-row: span 13; height: 120px; margin: 0 0 10px;
  border-radius: 20px; background: var(--color-avena);
  display: flex; align-items: center; justify-content: center;
  animation: entra-tarjeta var(--dur-entrada) ease-out both;
}
.mosaico > .recuerdo:nth-child(2) { animation-delay: calc(var(--escalonado) * 1); }
.mosaico > .recuerdo:nth-child(3) { animation-delay: calc(var(--escalonado) * 2); }
.mosaico > .recuerdo:nth-child(4) { animation-delay: calc(var(--escalonado) * 3); }
.mosaico > .recuerdo:nth-child(5) { animation-delay: calc(var(--escalonado) * 4); }
.mosaico > .recuerdo:nth-child(6) { animation-delay: calc(var(--escalonado) * 5); }
.mosaico > .recuerdo:nth-child(n+7) { animation-delay: calc(var(--escalonado) * 6); }
.recuerdo--quieto { animation: none; }
@keyframes entra-tarjeta { from { opacity: 0; transform: translateY(16px); } }
.recuerdo--foto, .recuerdo--local { grid-row: span 20; height: 190px; }
.recuerdo--audio { grid-column: 1 / -1; }
.recuerdo__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recuerdo__vacio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.recuerdo__vacio--arcilla { background: var(--color-arcilla-clara); color: var(--color-nota-a-mano); }
.recuerdo__vacio--avena { background: var(--color-avena); color: var(--color-oliva); }
.recuerdo__vacio--video, .recuerdo--video { background: var(--color-salvia); }
.recuerdo__autor {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
  padding: 4px 9px; border-radius: var(--radio-chip);
  background: var(--color-blanco-calido); color: var(--color-cacao);
  font-size: 14px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recuerdo__procesando { font-weight: 600; color: var(--color-texto-suave); }
.recuerdo__play {
  position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--color-cacao); color: var(--color-salvia);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.recuerdo__play svg { margin-left: 3px; }
.recuerdo__play:focus-visible { outline-color: var(--color-cacao); outline-offset: 3px; }
.recuerdo__video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--color-cacao); }
.recuerdo--reproduciendo { grid-row: span 20; height: 190px; }
.recuerdo--nota {
  background: var(--color-mostaza); padding: 14px;
  flex-direction: column; align-items: stretch; justify-content: space-between;
}
.recuerdo__cita {
  font-family: var(--font-titulos); font-variation-settings: 'opsz' 16; font-weight: 700;
  font-size: 16px; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.recuerdo__firma { font-size: 14px; font-weight: 700; }
.recuerdo--audio {
  background: var(--color-salvia-clara); padding: 14px 14px 46px;
  flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px;
  grid-row: span 15; height: 140px;
}
.recuerdo__icono-audio { position: absolute; right: 14px; top: 14px; }
.recuerdo__titulo-audio { font-family: var(--font-titulos); font-variation-settings: 'opsz' 16; font-weight: 700; font-size: 16px; padding-right: 30px; }
.recuerdo--audio audio { width: 100%; min-height: 44px; }
.recuerdo--local { background: var(--color-arcilla-clara); color: var(--color-nota-a-mano); flex-direction: column; justify-content: flex-end; }
.recuerdo__vista { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.recuerdo__vista--nota { background: var(--color-mostaza); }
.recuerdo--local .estado-subida {
  position: relative; margin: 0 8px 8px; padding: 6px 10px; border-radius: 14px;
  background: var(--color-blanco-calido); color: var(--color-cacao); font-size: 12px;
}
.recuerdo--local .estado-subida[data-estado="error"] { color: var(--color-alerta); }
.recuerdo--local .estado-subida[data-estado="error"] .estado-subida__reintentar { min-height: 44px; font-size: 14px; padding: 0 12px; }
.recuerdo--privado .estado-subida { display: none; }
.recuerdo__privado {
  position: relative; margin: 0 8px 8px; padding: 8px 10px; border-radius: 14px;
  background: var(--color-mostaza-clara); color: var(--color-cacao); font-size: 13px; font-weight: 700; line-height: 1.3;
}
.recuerdo__privado[hidden] { display: none; }
.familia-evento__nada { font-size: 15px; color: var(--color-texto-suave); text-align: center; padding: 24px 0; }
.vacio--liso { outline: 0; }

/* «3 nuevas»: aparece arriba si estabas desplazado; al tocarla sube e inserta */
.pildora-nuevas {
  position: fixed; z-index: 11; top: calc(14px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--radio-chip);
  background: var(--color-cacao); color: var(--color-blanco-calido);
  font-size: 15px; font-weight: 700; box-shadow: var(--sombra-tarjeta); cursor: pointer;
  animation: pildora-entra var(--dur-entrada) ease-out;
}
.pildora-nuevas[hidden] { display: none; }
.pildora-nuevas:focus-visible { outline-color: var(--color-mostaza); }
@keyframes pildora-entra { from { opacity: 0; transform: translate(-50%, -12px); } }

/* Preparar (solo Ana y Bryan) */
.preparar__cabecera { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.preparar__volver { background: var(--color-blanco-calido); }
.preparar__titulo { display: flex; flex-direction: column; gap: 8px; }
.preparar { display: flex; flex-direction: column; gap: 14px; }
.preparar__nada-oculto { text-align: center; }
.preparar__filas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.preparar__fila { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.preparar__resumen { display: flex; align-items: center; gap: 12px; }
.preparar__mini {
  flex: 0 0 auto; width: 56px; height: 56px; overflow: hidden; border-radius: 14px;
  background: var(--color-avena); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titulos); font-weight: 800; font-size: 20px;
}
.preparar__mini img { width: 100%; height: 100%; object-fit: cover; }
.preparar__mini--nota { background: var(--color-mostaza); }
.preparar__mini--video { background: var(--color-salvia); }
.preparar__mini--audio { background: var(--color-salvia-clara); }
.preparar__que { display: flex; flex-direction: column; min-width: 0; }
.preparar__controles { display: flex; flex-direction: column; gap: 4px; border-top: 2px solid var(--color-divisor); padding-top: 8px; }
/* El interruptor mide 56×34 como en la entrega; el borde transparente lleva el área táctil a 66×44. */
.preparar__interruptor .interruptor { box-sizing: content-box; border: 5px solid transparent; background-clip: padding-box; }
.preparar__interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 15px; font-weight: 600; }
.preparar__orden { display: flex; gap: 8px; padding-top: 4px; }
.preparar__orden form { flex: 1; }
.preparar__mover { width: 100%; min-height: 44px; }

/* La línea de Ana y Bryan: lo que la página del evento no muestra (oculto, privado, por aprobar) */
.linea-admin {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 48px;
  padding: 8px 14px; border-radius: var(--radio-campo);
  background: var(--color-avena); color: var(--color-cacao); text-decoration: none; font-size: 14px;
}
.linea-admin:hover { color: var(--color-cacao); }
.linea-admin__texto b { text-decoration: underline; }
.preparar__marcas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* «¡Ana y Bryan tienen algo que contarte!»: llega con banderines cuando revelan lo preparado */
.revelado {
  position: fixed; z-index: 12; left: max(12px, calc(50% - 203px)); right: max(12px, calc(50% - 203px));
  top: calc(12px + env(safe-area-inset-top));
  padding: 44px 16px 14px; border-radius: var(--radio-tarjeta);
  background: var(--color-blanco-calido); box-shadow: var(--sombra-polaroid);
  display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  animation: revelado-entra var(--dur-guardar) cubic-bezier(.3, 1.4, .5, 1) both;
}
.revelado[hidden] { display: none; }
.revelado__banderines { left: -10px; top: -4px; width: 410px; height: 56px; animation: revelado-banderines var(--dur-guardar) ease-out both; }
.revelado__texto {
  font-family: var(--font-titulos); font-variation-settings: 'opsz' 22; font-weight: 800;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.4px;
}
.revelado__acciones { display: flex; gap: 10px; align-items: center; }
.revelado__ver { flex: 1; min-height: 52px; font-size: 18px; }
.revelado__cerrar { flex: 0 0 auto; }
@keyframes revelado-entra { from { opacity: 0; transform: translateY(-24px) scale(.96); } }
@keyframes revelado-banderines { from { transform: translateY(-40px); } }
.revelado__cerrar { border: 2px solid var(--color-avena); color: var(--color-cacao); cursor: pointer; }

/* Las tarjetas del evento abren el detalle (HU-22, ruling T12b): el enlace cubre toda la tarjeta y lo que
   se toca dentro (audio, «Ver el video», el video ya abierto) queda encima. */
.recuerdo__abrir { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.recuerdo__abrir:focus-visible { outline: 3px solid var(--color-cacao); outline-offset: -3px; }
/* Al volver del detalle, la tarjeta que abriste se marca un momento (evento.js). */
.recuerdo--volviste { outline: 4px solid var(--color-mostaza); outline-offset: 2px; }
.recuerdo__play { z-index: 2; }
.recuerdo audio, .preparado audio { position: relative; z-index: 2; }
.recuerdo__video { z-index: 2; }
.preparado .recuerdo__video { position: relative; }

/* Detalle de un recuerdo (08-detalle-recuerdo, parte de la entrega 1) ---------------------------------- */
.marco--detalle .pantalla { gap: 20px; }
.detalle__mancha {
  position: absolute; left: -90px; top: 120px; width: 240px; height: 220px;
  border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%;
  background: var(--color-avena); pointer-events: none;
}
.detalle__barra { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.detalle__barra .boton-icono { color: var(--color-cacao); border: 0; cursor: pointer; }
.detalle__solo-ustedes {
  position: relative; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 12px 14px; border-radius: 18px;
  background: var(--color-cacao); color: var(--color-blanco-calido); font-size: 14px; font-weight: 700;
}
.detalle__marca { padding: 3px 10px; border-radius: var(--radio-chip); background: var(--color-mostaza); color: var(--color-cacao); }
.detalle__marca--capsula { background: var(--color-arcilla); }
.detalle__marca--por-aprobar { background: var(--color-blanco-calido); }
.detalle__polaroid { --giro: -1deg; margin: 0; padding: 10px 10px 14px; gap: 10px; }
.detalle__polaroid::before { top: -10px; width: 76px; height: 20px; margin-left: -38px; transform: rotate(3deg); }
.detalle__carrusel {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; border-radius: 3px;
}
.detalle__carrusel::-webkit-scrollbar { display: none; }
.detalle__carrusel:focus-visible { outline: 3px solid var(--color-cacao); outline-offset: 3px; }
.detalle__diapositiva { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; position: relative; }
.detalle__abrir {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 3px;
  background: var(--color-arcilla-clara); color: var(--color-nota-a-mano); cursor: zoom-in;
}
.detalle__abrir:focus-visible { outline: 3px solid var(--color-cacao); outline-offset: -3px; }
.detalle__foto { display: block; width: 100%; height: auto; max-height: min(48dvh, 520px); object-fit: contain; border-radius: 3px; }
.detalle__vacio { display: flex; height: min(360px, 42dvh); align-items: center; justify-content: center; }
.detalle__video { display: block; width: 100%; max-height: 70dvh; border-radius: 3px; background: var(--color-cacao); }
.detalle__audio {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  min-height: 240px; padding: 20px; border-radius: 3px; background: var(--color-mostaza-clara); color: var(--color-cacao);
}
.detalle__audio audio { width: 100%; min-height: 44px; }
.detalle__no-se-ve { margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.4; }
.detalle__no-se-ve[hidden] { display: none; }
.detalle__contador {
  position: absolute; right: 20px; top: 20px; padding: 4px 9px; border-radius: var(--radio-chip);
  background: color-mix(in srgb, var(--color-cacao) 88%, transparent); color: var(--color-blanco-calido);
  font-size: 14px; font-weight: 700; pointer-events: none;
}
.detalle__puntos { display: flex; justify-content: center; margin: -6px 0 -10px; }
.detalle__punto {
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.detalle__punto span {
  display: block; width: 8px; height: 8px; border-radius: var(--radio-chip);
  background: var(--color-interruptor-apagado); transition: width var(--dur-toque);
}
.detalle__punto[aria-current="true"] span { width: 22px; background: var(--color-cacao); }
.detalle__nota {
  position: relative; margin: 0; padding: 24px 20px 20px; border-radius: var(--radio-tarjeta);
  background: var(--color-mostaza); box-shadow: var(--sombra-polaroid); transform: rotate(-1deg);
  display: flex; flex-direction: column; gap: 14px;
}
.detalle__nota-texto {
  margin: 0; font-family: var(--font-titulos); font-variation-settings: 'opsz' 22; font-weight: 700;
  font-size: 22px; line-height: 1.3; overflow-wrap: break-word;
}
.detalle__nota-firma { font-size: 15px; font-weight: 700; }
.detalle__textos { position: relative; display: flex; flex-direction: column; gap: 8px; }
.detalle__titulo {
  margin: 0; font-family: var(--font-titulos); font-variation-settings: 'opsz' 28; font-weight: 800;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.6px; overflow-wrap: break-word;
}
.detalle__relato { margin: 0; font-size: 16px; line-height: 1.5; color: var(--color-texto-medio); }
.detalle__autor { display: flex; align-items: center; gap: 10px; }
.detalle__avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--color-arcilla-clara);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.detalle__quien { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; overflow-wrap: break-word; }
.detalle__quien span { font-size: 13px; color: var(--color-texto-suave); }
.detalle__privacidad { flex: 0 0 auto; gap: 5px; min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 700; }
.detalle__privacidad::before { width: 14px; height: 14px; }
.detalle__guardar { display: flex; flex-direction: column; gap: 10px; }
.detalle__progreso { display: flex; align-items: center; gap: 12px; }
.detalle__progreso[hidden], .detalle__guardar [hidden] { display: none; }
.detalle__progreso progress { flex: 1; min-width: 0; height: 10px; accent-color: var(--color-terracota); }
.detalle__progreso .btn-secundario { min-height: 44px; padding: 0 16px; }
.detalle__estado, .detalle__pista { margin: 0; }
.detalle__pista { font-size: 15px; font-weight: 700; line-height: 1.4; }
.detalle__pista:empty { display: none; }
.detalle__estado:empty { display: none; }
.detalle__datos { background: var(--color-blanco-calido); border-radius: var(--radio-tarjeta); padding: 6px 16px; }
.detalle__datos-titulo { margin: 12px 0 4px; font-size: 13px; }
.detalle__lista { margin: 0; display: flex; flex-direction: column; }
.detalle__dato {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0;
  border-bottom: 1px solid var(--color-divisor);
}
.detalle__dato:last-child { border-bottom: 0; }
.detalle__dato svg { flex: 0 0 auto; }
.detalle__dato dd { margin: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; font-size: 15px; overflow-wrap: break-word; }
.detalle__evento {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border-radius: var(--radio-chip); background: var(--color-mostaza); color: var(--color-cacao);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.detalle__evento:hover { color: var(--color-cacao); }

/* Visor a pantalla completa (visor.js): el original, sobre cacao, con «Cerrar» siempre a la vista */
.visor {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: var(--color-cacao); color: var(--color-blanco-calido);
}
.visor::backdrop { background: var(--color-cacao); }
.visor[open] { animation: visor-entra var(--dur-entrada) ease-out; }
@keyframes visor-entra { from { opacity: 0; } }
.visor__escena {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none; cursor: zoom-in;
}
.visor__escena[data-acercado] { cursor: grab; }
.visor__imagen {
  max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 50% 50%;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.visor__imagen:not([src]) { display: none; }
.visor__acciones {
  position: absolute; z-index: 1; top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
}
.visor__boton {
  display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--radio-chip); background: var(--color-blanco-calido); color: var(--color-cacao);
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.visor__boton[hidden] { display: none; }
.visor__boton:focus-visible { outline: 3px solid var(--color-mostaza); outline-offset: 2px; }
.visor__estado {
  position: absolute; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom));
  margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--color-blanco-calido); color: var(--color-cacao);
  font-size: 15px; text-align: center;
}
.visor__estado:empty { display: none; }

/* Control del QR (HU-26): sección «Invitados por QR» de acceso-6-familia */
.qr-admin { display: flex; flex-direction: column; gap: 14px; padding: 14px; border-radius: 22px; }
.qr-admin__fila { display: flex; align-items: center; gap: 12px; }
.qr-admin__icono {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radio-icono); background: var(--color-avena);
  display: flex; align-items: center; justify-content: center;
}
.qr-admin__que { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qr-admin__que b { font-size: 15px; }
.qr-admin__fila form { display: flex; align-items: center; min-height: 44px; }
.qr-admin__codigo { width: min(100%, 240px); margin: 0 auto; padding: 12px; border: 2px solid var(--color-cacao); border-radius: 22px; background: #fff; }
.qr-admin__codigo svg { width: 100%; height: auto; }
.qr-admin__url { text-align: center; overflow-wrap: anywhere; }
.qr-admin__acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
/* El interruptor del QR es de 44 px de alto (área táctil mínima), no los 34 de los demás. */
.qr-admin__fila .interruptor { width: 68px; height: 44px; }
.qr-admin__fila .interruptor::after { top: 7px; left: 6px; width: 30px; height: 30px; }
.qr-admin__fila .interruptor[aria-checked="true"]::after { transform: translateX(24px); }

/* Avisos de navegador incrustado e iPhone (HU-02, HU-17) ------------------------------------------ */
.aviso-navegador { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.aviso-navegador[hidden], .aviso-ios[hidden] { display: none; }
.aviso-navegador__texto, .aviso-navegador__estado { margin: 0; }
.aviso-navegador__copiar { min-height: 44px; }
.aviso-navegador__estado:empty { display: none; }
.aviso-ios { margin: 0 0 12px; text-align: center; }