/* ---------------------------------------------------------------------------
   El atributo [hidden] tiene que ganar SIEMPRE.
   El navegador lo implementa con display:none en su hoja de usuario, que
   cualquier regla nuestra de display (.sin-red{display:flex}, .nuevas{display:grid}...)
   pisa por especificidad. Sin esto, poner el.hidden = true no oculta nada:
   la banda de "sin cobertura" se quedaba fija en pantalla con conexión perfecta.
   --------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ==========================================================================
   Galería · Ígor y Alba — sistema de diseño
   --------------------------------------------------------------------------
   Móvil primero. Todo lo que se toca mide 48 px o más. Nada de animaciones
   de entrada por scroll: aquí manda la velocidad y el pulgar.

   Índice
     01 · Variables
     02 · Reset
     03 · Tipografía y utilidades
     04 · Estructura de pantalla
     05 · Barra inferior de pestañas
     06 · Botones
     07 · Campos de formulario
     08 · Chips y etiquetas
     09 · Avatares
     10 · Tarjeta del feed
     11 · Reacciones
     12 · Rejilla de miniaturas
     13 · Huecos de momentos (subir)
     14 · Tarjetas de momento
     15 · Ruleta de muecas
     16 · Cámara
     17 · Visor (detalle a pantalla completa)
     18 · Avisos: toast, hoja inferior, confirmación
     19 · Esqueletos de carga
     20 · Sin conexión y "fotos nuevas"
     21 · Estados: vacío, cargando, error
     22 · Subida masiva
     23 · Reto y ranking
     24 · Yo, contadores y estadísticas
     25 · Escritorio (≥ 700 px)
     26 · Movimiento reducido y noscript
   ========================================================================== */


/* ==========================================================================
   01 · VARIABLES
   ========================================================================== */

:root{
  /* Color — misma familia que la web principal, más densa y más oscura */
  --crema:        #f6f1e8;
  --papel:        #fffaf2;
  --tinta:        #1f2a24;
  --tinta-honda:  #131c18;
  --oro:          #b8956a;
  --oro-suave:    #dac08c;
  --vino:         #9c243a;
  --vino-hondo:   #7d1b2e;
  --salvia:       #8a9a8c;
  --apagado:      #8a8378;

  /* Derivados de trabajo */
  --tinta-media:  #2a3831;   /* superficies elevadas sobre el fondo oscuro */
  --linea:        rgba(184,149,106,.24);
  --linea-clara:  rgba(31,42,36,.14);
  --texto-claro:  #ece5d8;   /* texto sobre fondo oscuro */
  --texto-tenue:  rgba(236,229,216,.62);
  --texto-oscuro: var(--tinta);
  --texto-suave:  #6d675e;   /* secundario sobre crema */
  --aviso:        #e0b23c;   /* banda de sin cobertura */
  --error:        #c2402f;
  --ok:           #4f7a55;

  /* Colores de las cinco reacciones (mismo tono que el sprite) */
  --r-corazon: #e0374a;
  --r-cerveza: #e8a72e;
  --r-risa:    #f5c542;
  --r-fuego:   #ef7f27;
  --r-amor:    #f06d80;

  /* Radios */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Sombras */
  --s-1: 0 1px 2px rgba(19,28,24,.16);
  --s-2: 0 4px 14px rgba(19,28,24,.22);
  --s-3: 0 12px 34px rgba(19,28,24,.38);
  --s-oro: 0 0 0 3px rgba(218,192,140,.35);

  /* Medidas */
  --ancho: 620px;                 /* ancho máximo del contenido en escritorio */
  --alto-barra: 62px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-arriba: env(safe-area-inset-top, 0px);

  /* Tipos */
  --f-texto: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-mono-marca: "Tangerine", "Snell Roundhand", "Brush Script MT", cursive;

  color-scheme: dark;
}


/* ==========================================================================
   02 · RESET
   ========================================================================== */

*,
*::before,
*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

html, body{ height: 100%; }

body{
  margin: 0;
  min-height: 100%;
  background: var(--tinta);
  color: var(--texto-claro);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }

img, svg, video, canvas{ display: block; max-width: 100%; }
img{ height: auto; }

button, input, select, textarea{
  font: inherit;
  color: inherit;
  margin: 0;
}
button{
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a{ color: var(--oro-suave); text-decoration: none; }
a:hover{ color: var(--oro); }

hr{ border: 0; border-top: 1px solid var(--linea); margin: 20px 0; }

::selection{ background: var(--oro-suave); color: var(--tinta-honda); }

/* Foco visible SIEMPRE. Es de noche y hay gente con una copa en la mano. */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--oro-suave);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }


/* ==========================================================================
   03 · TIPOGRAFÍA Y UTILIDADES
   ========================================================================== */

.display{
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .01em;
  font-size: 30px;
}
.display-xl{ font-size: 40px; }
.display-sm{ font-size: 23px; }

.monograma{
  font-family: var(--f-mono-marca);
  font-size: 62px;
  line-height: 1;
  color: var(--oro-suave);
  text-align: center;
  font-weight: 400;
}
.monograma em{ font-style: normal; color: var(--oro); padding: 0 .06em; }

.eyebrow{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 500;
}

.tenue{ color: var(--texto-tenue); }
.pequeno{ font-size: 13.5px; }
.centrado{ text-align: center; }
.negrita{ font-weight: 500; }

/* Solo para lectores de pantalla */
.sr-solo{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Iconos del sprite */
.icono{ flex: none; display: block; }
svg use{ pointer-events: none; }


/* ==========================================================================
   04 · ESTRUCTURA DE PANTALLA
   ========================================================================== */

#app{
  min-height: 100dvh;
  padding-top: var(--seguro-arriba);
  padding-bottom: calc(var(--seguro-abajo) + 12px);
}

/* Cuando hay barra de pestañas hay que dejarle hueco.
   app.js pone la clase .con-barra en <body> al pintarla; el :has() es el
   cinturón por si algún día se olvida. */
body.con-barra #app,
body:has(#barra:not(:empty)) #app{
  padding-bottom: calc(var(--alto-barra) + var(--seguro-abajo) + 16px);
}

/* Contenedor estándar de una pantalla */
.pantalla{
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 16px;
}
.pantalla-ancha{ padding: 0; }

/* Pantallas de identidad (puerta, registro, selfie…): centradas y aireadas */
.pantalla-centrada{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 22px calc(32px + var(--seguro-abajo));
  text-align: center;
}
.pantalla-centrada .campo{ text-align: left; }

/* Cabecera de sección (título + acción a la derecha) */
.cabecera{
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 16px;
  padding-top: calc(10px + var(--seguro-arriba));
  margin-bottom: 8px;
  background: linear-gradient(var(--tinta) 72%, rgba(31,42,36,0));
  backdrop-filter: saturate(1.2) blur(6px);
}
.cabecera h1,
.cabecera h2{
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cabecera .sub{
  display: block;
  font-family: var(--f-texto);
  font-size: 12.5px;
  color: var(--texto-tenue);
  letter-spacing: .02em;
}
.cabecera-acciones{ display: flex; align-items: center; gap: 6px; }

/* Botón redondo de icono (volver, cerrar, opciones…) */
.icono-btn{
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--texto-claro);
  transition: background .18s ease, color .18s ease;
}
.icono-btn:hover{ background: rgba(236,229,216,.09); }
.icono-btn:active{ background: rgba(236,229,216,.16); }
.icono-btn.claro{ color: var(--tinta); }
.icono-btn.claro:hover{ background: rgba(31,42,36,.08); }

/* Bloque genérico de contenido sobre el fondo oscuro */
.panel{
  background: var(--tinta-media);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 16px;
}
.panel-crema{
  background: var(--crema);
  color: var(--tinta);
  border: 0;
}
.panel-crema a{ color: var(--vino); }

.separador{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 14px;
  color: var(--oro);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.separador::before,
.separador::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}


/* ==========================================================================
   05 · BARRA INFERIOR DE PESTAÑAS
   ========================================================================== */

.barra{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  padding: 0 4px calc(var(--seguro-abajo));
  background: rgba(19,28,24,.94);
  backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--linea);
}
.barra:empty{ display: none; }

.barra-item{
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--alto-barra);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 2px 9px;
  color: var(--texto-tenue);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color .18s ease;
}
.barra-item span{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra-item .icono{ width: 23px; height: 23px; }
.barra-item:hover{ color: var(--oro-suave); }

.barra-item.activo{ color: var(--oro); font-weight: 400; }
.barra-item.activo .icono{ stroke-width: 1.7; }
.barra-item.activo::before{
  content: "";
  position: absolute;
  margin-top: -8px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--oro);
}
.barra-item{ position: relative; }

/* Punto de aviso (p. ej. reto pendiente) */
.barra-item .punto{
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vino);
  box-shadow: 0 0 0 2px rgba(19,28,24,.94);
}


/* ==========================================================================
   06 · BOTONES
   ========================================================================== */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn .icono{ width: 20px; height: 20px; }
.btn:active{ transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.btn-bloque{ display: flex; width: 100%; }

.btn-primario{
  background: var(--vino);
  color: #fff7f3;
  border-color: var(--vino);
  box-shadow: var(--s-2);
}
.btn-primario:hover:not(:disabled){ background: var(--vino-hondo); border-color: var(--vino-hondo); }

.btn-fantasma{
  background: transparent;
  color: var(--oro-suave);
  border-color: var(--oro);
}
.btn-fantasma:hover:not(:disabled){ background: rgba(184,149,106,.14); color: var(--oro-suave); }
/* Sobre fondo claro (dentro de tarjetas crema) */
.panel-crema .btn-fantasma,
.tarjeta .btn-fantasma{ color: var(--tinta); border-color: var(--oro); }
.panel-crema .btn-fantasma:hover,
.tarjeta .btn-fantasma:hover{ background: var(--oro-suave); color: var(--tinta-honda); }

.btn-peligro{
  background: transparent;
  color: #ea8c7d;
  border-color: rgba(234,140,125,.55);
}
.btn-peligro:hover:not(:disabled){ background: var(--error); color: #fff5f2; border-color: var(--error); }

.btn-oro{
  background: var(--oro);
  color: var(--tinta-honda);
  border-color: var(--oro);
  font-weight: 400;
}
.btn-oro:hover:not(:disabled){ background: var(--oro-suave); }

.btn-mini{
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13.5px;
  gap: 6px;
}
.btn-mini .icono{ width: 16px; height: 16px; }

/* Botón que parece enlace: para acciones secundarias ("Sortear otra") */
.enlace{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  background: none;
  color: var(--oro-suave);
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(218,192,140,.45);
  border-radius: var(--r-sm);
}
.enlace:hover{ color: var(--oro); text-decoration-color: var(--oro); }
.enlace.peligro{ color: #ea8c7d; text-decoration-color: rgba(234,140,125,.45); }

.botonera{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.botonera-fila{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.botonera-fila > *{ flex: 1 1 140px; }

/* Girador dentro de un botón mientras se envía */
.btn .girador{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: girar .8s linear infinite;
}
@keyframes girar{ to{ transform: rotate(360deg); } }


/* ==========================================================================
   07 · CAMPOS DE FORMULARIO
   ========================================================================== */

.campo{
  display: block;
  margin-bottom: 16px;
  position: relative;
}
.campo > label,
.campo .etiqueta{
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 400;
}

.campo input,
.campo textarea,
.campo select{
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  background: rgba(246,241,232,.06);
  color: var(--texto-claro);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  font-size: 16.5px;              /* 16 px o más: iOS no hace zoom */
  font-weight: 300;
  letter-spacing: .01em;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  appearance: none;
}
.campo textarea{ min-height: 96px; resize: vertical; line-height: 1.45; }
.campo input::placeholder,
.campo textarea::placeholder{ color: rgba(236,229,216,.34); }

.campo input:focus,
.campo textarea:focus,
.campo select:focus{
  outline: none;
  border-color: var(--oro);
  background: rgba(246,241,232,.1);
  box-shadow: var(--s-oro);
}

.campo .pista{
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--texto-tenue);
}
.campo .error{
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  color: #f0a396;
  font-weight: 400;
}
.campo .error:empty{ display: none; }
.campo.mal input,
.campo.mal textarea,
.campo input[aria-invalid="true"]{
  border-color: #d4705f;
  box-shadow: 0 0 0 3px rgba(212,112,95,.18);
}
.campo .bien{
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  color: #a9c7ab;
}
.campo.bien input{ border-color: rgba(138,154,140,.65); }

/* Campo de código de la puerta: grande, centrado y con espaciado */
.campo-codigo input{
  text-align: center;
  font-size: 26px;
  letter-spacing: .32em;
  text-transform: uppercase;
  padding: 16px 12px;
  min-height: 62px;
  font-family: var(--f-display);
}

/* Campo con icono a la izquierda (buscador) */
.campo-icono{ position: relative; }
.campo-icono input{ padding-left: 46px; }
.campo-icono .icono{
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--oro);
  pointer-events: none;
}
.campo-icono > label ~ .icono{ top: calc(50% + 13px); }

/* Autocompletado de nombres (¿quién eres?) */
.sugerencias{
  margin-top: 8px;
  background: var(--crema);
  color: var(--tinta);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--s-2);
}
.sugerencias:empty{ display: none; }
.sugerencia{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  text-align: left;
  font-size: 16px;
  border-bottom: 1px solid var(--linea-clara);
  color: var(--tinta);
  transition: background .15s ease;
}
.sugerencia:last-child{ border-bottom: 0; }
.sugerencia:hover,
.sugerencia:focus-visible{ background: #ece5d6; }
.sugerencia .marca{
  font-size: 12.5px;
  color: var(--apagado);
  white-space: nowrap;
}
.sugerencia.registrada{ color: var(--texto-suave); }


/* ==========================================================================
   08 · CHIPS Y ETIQUETAS
   ========================================================================== */

.chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(184,149,106,.16);
  border: 1px solid rgba(184,149,106,.4);
  color: var(--tinta);
  font-size: 12.5px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip .emoji{ font-size: 13.5px; line-height: 1; }

/* Sobre fondo oscuro */
.chip.oscuro,
.tinta-fondo .chip{ color: var(--oro-suave); background: rgba(184,149,106,.14); }

.chip-reto{
  background: rgba(156,36,58,.12);
  border-color: rgba(156,36,58,.4);
  color: var(--vino);
  font-weight: 400;
}
.chip-reto .icono{ width: 13px; height: 13px; }

.chip-boton{ cursor: pointer; min-height: 32px; }
.chip-boton:hover{ background: rgba(184,149,106,.28); }
.chip-boton.activo{ background: var(--oro); border-color: var(--oro); color: var(--tinta-honda); }

/* Fila de filtros con scroll horizontal */
.chips-fila{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 16px 12px;
  margin: 0 -16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips-fila::-webkit-scrollbar{ display: none; }


/* ==========================================================================
   09 · AVATARES
   ========================================================================== */

.avatar{
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tinta-media);
  border: 1px solid var(--linea);
}
.avatar-sm{ width: 28px; height: 28px; }
.avatar-md{ width: 48px; height: 48px; }
.avatar-lg{ width: 120px; height: 120px; border-width: 2px; }
.avatar-xl{ width: 160px; height: 160px; border-width: 2px; box-shadow: var(--s-3); }

/* Avatar de respaldo cuando aún no hay foto: inicial sobre oro */
.avatar-vacio{
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--oro) 0%, var(--oro-suave) 100%);
  color: var(--tinta-honda);
  font-family: var(--f-display);
  font-size: .55em;
  text-transform: uppercase;
}


/* ==========================================================================
   10 · TARJETA DEL FEED
   ========================================================================== */

.feed{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 12px;
}

.tarjeta{
  background: var(--crema);
  color: var(--tinta);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--s-2);
  contain: content;
}

.tarjeta-cabecera{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
}
.tarjeta-cabecera .avatar{ border-color: rgba(31,42,36,.12); }
.tarjeta-quien{
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.25;
}
.tarjeta-nick{
  font-size: 15px;
  font-weight: 500;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tarjeta-hace{
  font-size: 12.5px;
  color: var(--texto-suave);
  letter-spacing: .01em;
}
.tarjeta-cabecera .chip{ flex: none; }
.tarjeta-cabecera .icono-btn{ width: 40px; height: 40px; color: var(--texto-suave); }
.tarjeta-cabecera .icono-btn:hover{ background: rgba(31,42,36,.07); color: var(--tinta); }

/* La foto: ancho completo, altura la que traiga el atributo height.
   Nunca se recorta y NUNCA salta el scroll al cargar. */
.tarjeta-foto{
  display: block;
  width: 100%;
  background: #e6dfd2;
  border-top: 1px solid rgba(31,42,36,.07);
  border-bottom: 1px solid rgba(31,42,36,.07);
}
.tarjeta-foto img{
  width: 100%;
  height: auto;
  display: block;
  background: #e6dfd2;
}

.tarjeta-pie{
  padding: 6px 10px 10px;
}


/* ==========================================================================
   11 · REACCIONES
   ========================================================================== */

.reacciones{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 8px;
}

.reaccion{
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-suave);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.reaccion .icono,
.reaccion .emoji{
  width: 24px;
  height: 24px;
  font-size: 21px;
  line-height: 24px;
  filter: saturate(.6) opacity(.72);
  transition: filter .16s ease, transform .16s ease;
}
.reaccion .n{ min-width: 12px; text-align: left; }
.reaccion .n.cero{ opacity: .45; }
.reaccion:hover{ background: rgba(31,42,36,.06); }
.reaccion:active{ transform: scale(.94); }

/* La mía: resaltada */
.reaccion.mia{
  background: rgba(184,149,106,.2);
  border-color: rgba(184,149,106,.5);
  color: var(--tinta);
  font-weight: 500;
}
.reaccion.mia .icono,
.reaccion.mia .emoji{ filter: none; transform: scale(1.1); }

/* Latido al poner una reacción (lo añade y lo quita el JS) */
.reaccion.late .icono,
.reaccion.late .emoji{ animation: latido .38s ease; }
@keyframes latido{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.32); }
  100%{ transform: scale(1.1); }
}

/* Versión grande del visor (48 px) */
.reacciones-grandes{ gap: 6px; padding: 10px 8px 4px; }
.reacciones-grandes .reaccion{
  min-height: 56px;
  font-size: 15px;
  color: var(--texto-tenue);
}
.reacciones-grandes .reaccion .icono,
.reacciones-grandes .reaccion .emoji{ width: 30px; height: 30px; font-size: 27px; line-height: 30px; }
.reacciones-grandes .reaccion:hover{ background: rgba(236,229,216,.1); }
.reacciones-grandes .reaccion.mia{
  background: rgba(184,149,106,.24);
  border-color: rgba(184,149,106,.55);
  color: var(--texto-claro);
}


/* ==========================================================================
   12 · REJILLA DE MINIATURAS
   ========================================================================== */

.rejilla{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.rejilla-item{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--tinta-media);
  overflow: hidden;
  border-radius: 2px;
}
/* La miniatura va posicionada: así el alto de la celda lo manda el
   aspect-ratio y NUNCA la imagen (si contribuye al tamaño intrínseco,
   una foto vertical estira toda la fila). */
.rejilla-item img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rejilla-item:active img{ opacity: .8; }
/* Marca de esquina (reto, oculta, mía…) */
.rejilla-item .marca{
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(19,28,24,.68);
  color: var(--oro-suave);
  font-size: 12px;
}
.rejilla-item .marca .icono{ width: 13px; height: 13px; }

.rejilla-4{ grid-template-columns: repeat(4, 1fr); }
.rejilla-suelta{ gap: 8px; }
.rejilla-suelta .rejilla-item{ border-radius: var(--r-sm); }


/* ==========================================================================
   13 · HUECOS DE MOMENTOS (pantalla Subir)
   ========================================================================== */

.momento-bloque{ margin-bottom: 26px; }

.momento-titulo{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.momento-titulo .emoji{ font-size: 20px; line-height: 1; }
.momento-titulo h3{
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--texto-claro);
}
.momento-titulo .dia{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro);
}
.momento-desc{
  font-size: 13.5px;
  color: var(--texto-tenue);
  margin-bottom: 10px;
  line-height: 1.4;
}

.huecos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.hueco{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(246,241,232,.05);
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--linea);
  color: var(--oro-suave);
  transition: border-color .18s ease, background .18s ease;
}
/* Igual que en la rejilla: la foto va posicionada para que el hueco sea
   siempre cuadrado, suba lo que suba la gente (vertical, panorámica…). */
.hueco img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vacío: borde discontinuo y un + centrado.
   Valen los dos nombres (.vacio y .hueco-vacio) y se anulan a la fuerza
   los márgenes de la clase de estado vacío (§21), que se llama igual. */
.hueco.vacio,
.hueco.hueco-vacio{
  border: 1.5px dashed rgba(184,149,106,.5);
  background: rgba(246,241,232,.03);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  max-width: none;
  gap: 0;
}
.hueco.vacio:hover,
.hueco.hueco-vacio:hover{ border-color: var(--oro); background: rgba(184,149,106,.09); }
.hueco.vacio .icono,
.hueco.hueco-vacio .icono{ width: 28px; height: 28px; opacity: .85; }

/* Subiendo: velo oscuro, porcentaje y barra de progreso dentro del hueco */
.hueco.subiendo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(19,28,24,.55);
}
.hueco .porcentaje{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--papel);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.hueco .progreso{
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  height: 4px;
  margin: 0;                     /* anula el margen de .progreso (§22) */
  border-radius: 4px;
  background: rgba(255,250,242,.28);
  overflow: hidden;
}
.hueco .progreso i{
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--oro-suave);
  transition: width .25s ease;
}
.hueco.error{ border-color: rgba(212,112,95,.7); }
.hueco.error .porcentaje{ color: #f0a396; font-size: 13px; text-align: center; padding: 6px; }

.contador-huecos{
  font-size: 14px;
  color: var(--texto-tenue);
  margin-bottom: 20px;
}
.contador-huecos b{ color: var(--oro-suave); font-weight: 500; }


/* ==========================================================================
   14 · TARJETAS DE MOMENTO (pantalla Momentos)
   ========================================================================== */

.momentos-rejilla{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 4px;
}

.tarjeta-momento{
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tinta-media);
  border: 1px solid var(--linea);
  color: var(--texto-claro);
  text-decoration: none;
  aspect-ratio: 4 / 5;
  transition: transform .18s ease, border-color .18s ease;
}
.tarjeta-momento:hover{ transform: translateY(-2px); border-color: var(--oro); }
.tarjeta-momento img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Degradado sobre la portada para que se lea el nombre.
   Se resetean position y z-index porque .velo (§18) es el fondo oscuro de
   las hojas y modales, y si no lo anulamos aquí se comería la pantalla. */
.tarjeta-momento .velo,
.tarjeta-momento .degradado{
  position: absolute;
  inset: 0;
  z-index: auto;
  backdrop-filter: none;
  animation: none;
  background: linear-gradient(rgba(19,28,24,.05) 30%, rgba(19,28,24,.86));
}
/* Sin portada: emoji gigante centrado */
.tarjeta-momento .emoji-grande{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 54px;
  opacity: .55;
}
.tarjeta-momento .info{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tarjeta-momento .nombre{
  font-family: var(--f-display);
  font-size: 21px;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tarjeta-momento .nombre .emoji{ font-size: 17px; }
.tarjeta-momento .cuenta{
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro-suave);
}


/* ==========================================================================
   15 · RULETA DE MUECAS
   ========================================================================== */

.ruleta{
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 6px auto 4px;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--tinta-media), var(--tinta-honda));
  border: 1px solid var(--linea);
  box-shadow: inset 0 0 60px rgba(0,0,0,.35), var(--s-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* Brillo dorado arriba y abajo, como una tragaperras */
.ruleta::before,
.ruleta::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 46px;
  z-index: 3;
  pointer-events: none;
}
.ruleta::before{ top: 0; background: linear-gradient(var(--tinta-honda), rgba(19,28,24,0)); }
.ruleta::after{ bottom: 0; background: linear-gradient(rgba(19,28,24,0), var(--tinta-honda)); }

.ruleta-cara{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}
.ruleta-emoji{
  font-size: 82px;
  line-height: 1;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.4));
}
.ruleta-texto{
  font-family: var(--f-display);
  font-size: 25px;
  line-height: 1.15;
  color: var(--oro-suave);
  max-width: 15ch;
}
.ruleta-esperando .ruleta-emoji{ opacity: .5; }
.ruleta-esperando .ruleta-texto{ color: var(--texto-tenue); font-size: 20px; }

/* Giro: los emojis pasan a toda velocidad, frenan y rebotan */
.ruleta.girando .ruleta-cara{ animation: rodar .085s linear infinite; }
.ruleta.frenando .ruleta-cara{ animation: rodar .34s cubic-bezier(.22,.9,.3,1) 2; }
.ruleta.parada .ruleta-cara{ animation: rebote .5s cubic-bezier(.2,1.5,.4,1); }

@keyframes rodar{
  0%   { transform: translateY(48%); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(-48%); opacity: 0; }
}
@keyframes rebote{
  0%   { transform: translateY(26%) scale(.92); }
  60%  { transform: translateY(-5%) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

.ruleta-pie{
  font-size: 14.5px;
  color: var(--texto-tenue);
  margin-top: 4px;
}


/* ==========================================================================
   16 · CÁMARA
   ========================================================================== */

.camara{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

.camara-vista{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #000;
}
.camara-vista video,
.camara-vista img,
.camara-vista canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Cámara frontal en espejo, como se espera de un selfie */
.camara-vista video.espejo{ transform: scaleX(-1); }

/* La mueca, arriba y legible sobre cualquier fondo */
.camara-overlay{
  position: absolute;
  top: calc(14px + var(--seguro-arriba));
  left: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  background: rgba(19,28,24,.62);
  backdrop-filter: blur(8px);
  color: var(--papel);
  text-align: center;
  font-family: var(--f-display);
  font-size: 21px;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.camara-overlay .emoji{ font-size: 26px; font-family: var(--f-texto); }

.camara-cerrar{
  position: absolute;
  top: calc(10px + var(--seguro-arriba));
  left: 8px;
  z-index: 5;
  color: var(--papel);
  background: rgba(19,28,24,.45);
}

/* Cuenta atrás 3 · 2 · 1 */
.camara-cuenta{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 170px;
  line-height: 1;
  color: var(--papel);
  text-shadow: 0 8px 40px rgba(0,0,0,.65);
  pointer-events: none;
  animation: pulso-cuenta .9s ease-out;
}
@keyframes pulso-cuenta{
  0%   { transform: scale(1.5); opacity: 0; }
  25%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(.85); opacity: .1; }
}
/* Fogonazo al disparar */
.camara-flash{
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #fff;
  pointer-events: none;
  animation: fogonazo .34s ease-out forwards;
}
@keyframes fogonazo{ from{ opacity: .9; } to{ opacity: 0; } }

.camara-barra{
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 16px calc(16px + var(--seguro-abajo));
  background: #000;
}

/* Disparador de 72 px */
.disparador{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--papel);
  border: 4px solid rgba(255,250,242,.35);
  background-clip: padding-box;
  box-shadow: 0 0 0 2px rgba(255,250,242,.5);
  transition: transform .12s ease, background .18s ease;
}
.disparador:active{ transform: scale(.92); background: var(--oro-suave); }
.disparador:disabled{ opacity: .5; }

.camara-alterna{
  color: rgba(255,250,242,.75);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  padding: 6px 12px;
}
.camara-alterna:hover{ color: var(--papel); }

/* Previsualización tras capturar */
.camara-previa .camara-barra{
  flex-direction: row;
  justify-content: center;
  gap: 12px;
}
.camara-previa .camara-barra .btn{ flex: 1 1 auto; max-width: 220px; }

/* Aviso cuando no hay permiso de cámara */
.camara-fallo{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
  color: var(--texto-claro);
  background: var(--tinta-honda);
}


/* ==========================================================================
   17 · VISOR (detalle de foto a pantalla completa)
   ========================================================================== */

.visor{
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #000;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

.visor-barra{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 6px 24px;
  padding-top: calc(6px + var(--seguro-arriba));
  background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0));
  color: var(--papel);
}
.visor-barra .icono-btn{ color: var(--papel); }
.visor-barra .icono-btn:hover{ background: rgba(255,255,255,.14); }

.visor-lienzo{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: pan-y;
}
.visor-lienzo img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Flechas laterales (escritorio) */
.visor-flecha{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 52px;
  height: 52px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: var(--papel);
}
.visor-flecha:hover{ background: rgba(0,0,0,.7); }
.visor-flecha.izq{ left: 10px; }
.visor-flecha.der{ right: 10px; }
.visor-flecha.der .icono{ transform: none; }
.visor-flecha.izq .icono{ transform: rotate(180deg); }

.visor-pie{
  flex: none;
  padding: 12px 14px calc(14px + var(--seguro-abajo));
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.72) 34%);
  color: var(--texto-claro);
}
.visor-quien{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.visor-quien .nick{ font-size: 15.5px; font-weight: 500; }
.visor-quien .cuando{ font-size: 13px; color: var(--texto-tenue); }
.visor-quien .chip{ color: var(--oro-suave); background: rgba(184,149,106,.16); }


/* ==========================================================================
   18 · AVISOS: TOAST, HOJA INFERIOR, CONFIRMACIÓN
   ========================================================================== */

#avisos{
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
#avisos > *{ pointer-events: auto; }

/* --- Toast --- */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(var(--alto-barra) + var(--seguro-abajo) + 16px);
  transform: translateX(-50%);
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 460px);
  padding: 13px 18px;
  border-radius: var(--r-pill);
  background: var(--crema);
  color: var(--tinta);
  font-size: 14.5px;
  line-height: 1.35;
  box-shadow: var(--s-3);
  animation: toast-entra .26s cubic-bezier(.2,.9,.3,1);
}
body:not(.con-barra) .toast{ bottom: calc(var(--seguro-abajo) + 22px); }
.toast .icono{ width: 19px; height: 19px; flex: none; }
.toast.ok{ background: #e7efe4; color: #24402a; }
.toast.ok .icono{ color: var(--ok); }
.toast.error{ background: #f6e2dd; color: #5c2317; }
.toast.error .icono{ color: var(--error); }
.toast.saliendo{ animation: toast-sale .22s ease forwards; }

@keyframes toast-entra{
  from{ opacity: 0; transform: translate(-50%, 16px); }
  to  { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toast-sale{
  from{ opacity: 1; transform: translate(-50%, 0); }
  to  { opacity: 0; transform: translate(-50%, 10px); }
}

/* --- Fondo compartido por hoja y modal --- */
.velo{
  position: fixed;
  inset: 0;
  z-index: 102;
  background: rgba(11,17,14,.62);
  backdrop-filter: blur(2px);
  animation: aparecer .18s ease;
}
@keyframes aparecer{ from{ opacity: 0; } to{ opacity: 1; } }

/* --- Hoja inferior --- */
.hoja{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 103;
  max-height: 86dvh;
  overflow-y: auto;
  padding: 10px 12px calc(14px + var(--seguro-abajo));
  background: var(--crema);
  color: var(--tinta);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--s-3);
  animation: hoja-sube .26s cubic-bezier(.2,.9,.3,1);
}
@keyframes hoja-sube{ from{ transform: translateY(102%); } to{ transform: translateY(0); } }
.hoja::before{
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 4px;
  background: rgba(31,42,36,.2);
}
.hoja-titulo{
  padding: 4px 10px 10px;
  font-family: var(--f-display);
  font-size: 20px;
  text-align: center;
  color: var(--tinta);
}
.hoja-opcion{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 16px;
  text-align: left;
  color: var(--tinta);
  transition: background .15s ease;
}
.hoja-opcion:hover{ background: rgba(31,42,36,.06); }
.hoja-opcion .icono{ width: 20px; height: 20px; color: var(--texto-suave); }
.hoja-opcion.peligro{ color: var(--vino); }
.hoja-opcion.peligro .icono{ color: var(--vino); }
.hoja-cancelar{
  margin-top: 8px;
  width: 100%;
  min-height: 52px;
  border-radius: var(--r-md);
  background: rgba(31,42,36,.07);
  color: var(--texto-suave);
  font-size: 16px;
}
.hoja-cancelar:hover{ background: rgba(31,42,36,.12); }

/* --- Modal de confirmación --- */
.modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 103;
  width: min(92vw, 380px);
  padding: 24px 22px 18px;
  background: var(--crema);
  color: var(--tinta);
  border-radius: var(--r-lg);
  box-shadow: var(--s-3);
  text-align: center;
  animation: modal-entra .2s cubic-bezier(.2,.9,.3,1);
}
@keyframes modal-entra{
  from{ opacity: 0; transform: translate(-50%,-46%) scale(.96); }
  to  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
.modal-texto{
  font-family: var(--f-display);
  font-size: 21px;
  line-height: 1.25;
  margin-bottom: 18px;
}
.modal-botones{ display: flex; flex-direction: column; gap: 8px; }
.modal-botones .btn{ width: 100%; }
.modal .btn-cancelar{
  background: transparent;
  color: var(--texto-suave);
  border-color: transparent;
}
.modal .btn-cancelar:hover{ background: rgba(31,42,36,.07); color: var(--tinta); }


/* ==========================================================================
   19 · ESQUELETOS DE CARGA
   ========================================================================== */

.esqueleto{
  background: var(--crema);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--s-1);
}
.esqueleto-cabecera{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.brillo{
  position: relative;
  overflow: hidden;
  background: #e6dfd2;
}
.brillo::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,250,242,0), rgba(255,250,242,.75), rgba(255,250,242,0));
  animation: brillar 1.35s ease-in-out infinite;
}
@keyframes brillar{ to{ transform: translateX(100%); } }

.esq-circulo{ width: 36px; height: 36px; border-radius: 50%; flex: none; }
.esq-linea{ height: 11px; border-radius: 6px; }
.esq-linea.corta{ width: 42%; }
.esq-linea.media{ width: 62%; }
.esq-foto{ width: 100%; aspect-ratio: 4 / 3; }
.esq-pie{ height: 44px; margin: 10px 14px; border-radius: var(--r-pill); }

/* Esqueletos oscuros (rejillas, momentos) */
.brillo-oscuro{ background: rgba(246,241,232,.07); }
.brillo-oscuro::after{
  background: linear-gradient(90deg, rgba(246,241,232,0), rgba(246,241,232,.12), rgba(246,241,232,0));
}


/* ==========================================================================
   20 · SIN CONEXIÓN Y "FOTOS NUEVAS"
   ========================================================================== */

.sin-red{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  padding-top: calc(9px + var(--seguro-arriba));
  background: var(--aviso);
  color: #2e2200;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: .01em;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  animation: banda-baja .24s ease;
}
.sin-red .icono{ width: 17px; height: 17px; flex: none; }
@keyframes banda-baja{ from{ transform: translateY(-100%); } to{ transform: translateY(0); } }

/* Botón flotante "N fotos nuevas ↑" */
.nuevas{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Debajo de la cabecera pegajosa, que desde V3 lleva también la fila de
     sub-pestañas (Todo · Selfies · Bingo) y mide ~108px. */
  top: calc(112px + var(--seguro-arriba));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--oro);
  color: var(--tinta-honda);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: var(--s-3);
  animation: nuevas-entra .28s cubic-bezier(.2,.9,.3,1);
}
.nuevas:hover{ background: var(--oro-suave); }
.nuevas .icono{ width: 17px; height: 17px; }
@keyframes nuevas-entra{
  from{ opacity: 0; transform: translate(-50%,-14px); }
  to  { opacity: 1; transform: translate(-50%,0); }
}
/* Si además hay banda de sin cobertura, todo baja lo que mide la banda.
   app.js pone la clase .sin-cobertura en <body> mientras no hay red. */
body.sin-cobertura .nuevas{ top: calc(154px + var(--seguro-arriba)); }
body.sin-cobertura .cabecera{ padding-top: calc(52px + var(--seguro-arriba)); }
body.sin-cobertura .visor-barra,
body.sin-cobertura .camara-overlay,
body.sin-cobertura .camara-cerrar{ margin-top: 42px; }


/* ==========================================================================
   21 · ESTADOS: VACÍO, CARGANDO, ERROR
   ========================================================================== */

.vacio{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  margin: 46px auto;
  padding: 0 20px;
  text-align: center;
}
.vacio .dibujo{
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px dashed rgba(184,149,106,.45);
  color: var(--oro);
  margin-bottom: 2px;
}
.vacio .dibujo .icono{ width: 32px; height: 32px; }
.vacio .dibujo .emoji{ font-size: 34px; }
.vacio h2,
.vacio .titulo{
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--texto-claro);
}
.vacio p{ font-size: 14.5px; color: var(--texto-tenue); line-height: 1.5; }
.vacio .btn{ margin-top: 6px; }

.cargando{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 16px;
  color: var(--texto-tenue);
  font-size: 14px;
}
.cargando .girador{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--oro);
  border-top-color: transparent;
  animation: girar .8s linear infinite;
}

.error-pantalla{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  margin: 52px auto;
  padding: 0 20px;
  text-align: center;
}
.error-pantalla .icono{ width: 34px; height: 34px; color: var(--aviso); }
.error-pantalla p{ font-size: 15.5px; line-height: 1.5; color: var(--texto-claro); }

/* Cuenta atrás de la pantalla de espera (P0) */
.cuenta-atras{
  font-family: var(--f-display);
  font-size: 46px;
  letter-spacing: .06em;
  color: var(--oro-suave);
  font-variant-numeric: tabular-nums;
  margin: 8px 0;
}
.cuenta-atras small{
  display: block;
  font-family: var(--f-texto);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-top: 4px;
}


/* ==========================================================================
   22 · SUBIDA MASIVA
   ========================================================================== */

.lista-subida{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 8px;
}

.fila-subida{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: rgba(246,241,232,.05);
  border: 1px solid var(--linea);
}
.fila-subida .mini{
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--tinta-media);
}
.fila-subida .datos{ flex: 1 1 auto; min-width: 0; }
.fila-subida .nombre{
  font-size: 13.5px;
  color: var(--texto-claro);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fila-subida .estado{
  font-size: 12.5px;
  color: var(--texto-tenue);
  margin-top: 2px;
}
.fila-subida.hecha .estado{ color: #a9c7ab; }
.fila-subida.fallada{ border-color: rgba(212,112,95,.5); }
.fila-subida.fallada .estado{ color: #f0a396; }
.fila-subida .icono-estado{ width: 20px; height: 20px; flex: none; }
.fila-subida.hecha .icono-estado{ color: var(--ok); }
.fila-subida.fallada .icono-estado{ color: var(--error); }

.progreso{
  height: 5px;
  margin-top: 6px;
  border-radius: 5px;
  background: rgba(246,241,232,.12);
  overflow: hidden;
}
.progreso i{
  display: block;
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--oro), var(--oro-suave));
  transition: width .25s ease;
}
.progreso.indeterminado i{
  width: 40%;
  animation: vaiven 1.1s ease-in-out infinite;
}
@keyframes vaiven{
  0%  { transform: translateX(-100%); }
  100%{ transform: translateX(250%); }
}

.contador-masiva{
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
  color: var(--texto-tenue);
  margin: 14px 0 4px;
}
.contador-masiva b{
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--oro-suave);
  font-weight: 400;
}

/* El input de archivo real se esconde: el botón hace de disparador */
.input-oculto{
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}


/* ==========================================================================
   23 · RETO Y RANKING
   ========================================================================== */

.reto-caja{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 20px;
  text-align: center;
  background: linear-gradient(165deg, var(--tinta-media), rgba(19,28,24,.6));
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
}
.reto-objetivo{ position: relative; }
.reto-objetivo .avatar{ border-color: var(--oro); }
.reto-objetivo .nick{
  margin-top: 10px;
  font-family: var(--f-display);
  font-size: 27px;
  color: var(--texto-claro);
}
.reto-mueca{
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--texto-tenue);
  max-width: 28ch;
}
.reto-mueca .emoji{ font-size: 19px; }
.reto-caja .btn{ width: 100%; max-width: 320px; }

.ranking{ margin-top: 8px; }
.fila-ranking{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 6px;
  border-bottom: 1px solid rgba(184,149,106,.14);
}
.fila-ranking:last-child{ border-bottom: 0; }
.fila-ranking .puesto{
  width: 26px;
  flex: none;
  text-align: center;
  font-family: var(--f-display);
  font-size: 19px;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}
.fila-ranking .nick{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fila-ranking .puntos{
  font-size: 13.5px;
  color: var(--texto-tenue);
  white-space: nowrap;
}
.fila-ranking.yo{
  background: rgba(184,149,106,.12);
  border-radius: var(--r-sm);
  border-bottom-color: transparent;
}
.fila-ranking.yo .nick{ color: var(--oro-suave); font-weight: 500; }
.fila-ranking.podio .puesto{ color: var(--oro-suave); font-size: 22px; }

/* Confeti breve al completar un reto */
.confeti{
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  overflow: hidden;
}
.confeti i{
  position: absolute;
  top: -12px;
  width: 8px;
  height: 13px;
  border-radius: 2px;
  opacity: .95;
  animation: caer 1.9s cubic-bezier(.3,.6,.5,1) forwards;
}
@keyframes caer{
  to{ transform: translateY(108vh) rotate(620deg); opacity: 0; }
}


/* ==========================================================================
   24 · YO, CONTADORES Y ESTADÍSTICAS
   ========================================================================== */

.perfil{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 6px;
  text-align: center;
}
.perfil .nick-linea{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.perfil .nick{
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1.1;
}
.perfil .mueca{
  font-size: 14px;
  color: var(--texto-tenue);
}

.contadores{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin: 18px 0 6px;
  padding: 14px 6px;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.contadores.cuatro{ grid-template-columns: repeat(4, 1fr); }
.contador{ text-align: center; }
.contador .n{
  display: block;
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1;
  color: var(--oro-suave);
  font-variant-numeric: tabular-nums;
}
.contador .que{
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  line-height: 1.3;
}

/* Estadísticas (solo admin) */
.stats-resumen{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.stats-caja{
  padding: 12px 10px;
  border-radius: var(--r-md);
  background: rgba(246,241,232,.05);
  border: 1px solid var(--linea);
  text-align: center;
}
.stats-caja .n{
  font-family: var(--f-display);
  font-size: 26px;
  color: var(--oro-suave);
  font-variant-numeric: tabular-nums;
}
.stats-caja .que{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.stats-momentos{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.stats-momento{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(184,149,106,.12);
  border: 1px solid var(--linea);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.fila-persona{
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 60px;
  padding: 10px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(184,149,106,.14);
  color: var(--texto-claro);
}
.fila-persona:hover{ background: rgba(246,241,232,.04); }
.fila-persona .datos{ flex: 1 1 auto; min-width: 0; }
.fila-persona .linea1{
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fila-persona .linea1 .real{ color: var(--texto-tenue); font-size: 13.5px; }
.fila-persona .linea2{
  font-size: 12.5px;
  color: var(--texto-tenue);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.fila-persona .icono{ color: var(--oro); width: 16px; height: 16px; }

.orden{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
  font-size: 13.5px;
  color: var(--texto-tenue);
}
.orden select{
  min-height: 40px;
  padding: 6px 30px 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--linea);
  background: rgba(246,241,232,.06);
  color: var(--texto-claro);
  font-size: 14px;
  appearance: none;
}

/* Aviso de cuenta bloqueada o red cerrada */
.aviso-caja{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  margin: 0 0 16px;
  border-radius: var(--r-md);
  background: rgba(224,178,60,.12);
  border: 1px solid rgba(224,178,60,.4);
  color: #f0dcae;
  font-size: 14px;
  line-height: 1.45;
}
.aviso-caja .icono{ width: 19px; height: 19px; flex: none; color: var(--aviso); margin-top: 1px; }
.aviso-caja.tranquilo{
  background: rgba(138,154,140,.12);
  border-color: rgba(138,154,140,.4);
  color: #cdd8cd;
}
.aviso-caja.tranquilo .icono{ color: var(--salvia); }


/* ==========================================================================
   25 · ESCRITORIO (≥ 700 px)
   En el móvil se ve de pie con una copa; en el portátil, al día siguiente,
   con resaca. Contenido centrado y sin estirarse a lo ancho.
   ========================================================================== */

@media (min-width: 700px){
  body{ font-size: 16.5px; }

  #app{ padding-bottom: 40px; }
  body.con-barra #app,
  body:has(#barra:not(:empty)) #app{
    padding-bottom: calc(var(--alto-barra) + 40px);
  }

  .feed{ max-width: var(--ancho); margin: 0 auto; padding: 0; gap: 22px; }
  .pantalla{ padding: 0 24px; }
  .cabecera{ max-width: var(--ancho); margin: 0 auto 12px; padding: 14px 4px; }
  .cabecera h1, .cabecera h2{ font-size: 30px; }

  .momentos-rejilla{
    max-width: var(--ancho);
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .rejilla{ max-width: var(--ancho); margin: 0 auto; gap: 4px; }
  .huecos{ gap: 10px; }

  /* La barra de pestañas se queda abajo pero centrada y con bordes */
  .barra{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(var(--ancho), calc(100vw - 32px));
    bottom: 16px;
    border: 1px solid var(--linea);
    border-radius: var(--r-pill);
    padding: 0 6px;
    box-shadow: var(--s-3);
  }
  .barra-item{ min-height: 58px; font-size: 11px; }

  .toast{ bottom: 96px; }
  body:not(.con-barra) .toast{ bottom: 28px; }

  /* La hoja inferior pasa a ser una tarjeta centrada */
  .hoja{
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(92vw, 420px);
    border-radius: var(--r-lg);
    animation: modal-entra .2s cubic-bezier(.2,.9,.3,1);
    padding-bottom: 14px;
  }
  .hoja::before{ display: none; }

  .modal-botones{ flex-direction: row-reverse; justify-content: center; }
  .modal-botones .btn{ width: auto; min-width: 120px; }

  .visor-flecha{ display: grid; }
  .visor-lienzo{ padding: 0 70px; }

  .camara-vista video,
  .camara-vista img{ object-fit: contain; }

  .pantalla-centrada{ max-width: 460px; }
  .stats-resumen{ grid-template-columns: repeat(4, 1fr); }

  /* En pantallas grandes, un poco de aire alrededor del contenido oscuro */
  .contenedor-escritorio{ max-width: var(--ancho); margin: 0 auto; }
}

@media (min-width: 1100px){
  .visor-lienzo{ padding: 0 90px; }
}


/* ==========================================================================
   26 · MOVIMIENTO REDUCIDO Y NOSCRIPT
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* La ruleta no gira: aparece la mueca y ya. Sigue siendo una sorpresa. */
  .ruleta.girando .ruleta-cara,
  .ruleta.frenando .ruleta-cara,
  .ruleta.parada .ruleta-cara{ animation: none !important; transform: none !important; opacity: 1 !important; }
  .brillo::after{ display: none; }
  .confeti{ display: none; }
  .camara-cuenta{ animation: none; opacity: 1; }
}

.noscript{
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
  color: var(--texto-claro);
}
.noscript .monograma{ margin-bottom: 18px; }
.noscript h1{ margin-bottom: 14px; font-size: 27px; }
.noscript p{ margin-bottom: 12px; color: var(--texto-tenue); line-height: 1.55; }
.noscript a{ color: var(--oro-suave); text-decoration: underline; text-underline-offset: 4px; }

/* Cuando el navegador no soporta JS modular no debe verse la app a medias */
@media print{
  .barra, #avisos, .camara, .visor{ display: none !important; }
  body{ background: #fff; color: #000; }
}


/* ==========================================================================
   27 · INSTALAR LA APP  (sección «La app», en P12 · Yo)
   Añadido al final a propósito: no reescribe ni una línea de lo de arriba.
   ========================================================================== */

.app-instalar{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-instalar p{
  margin: 0;
  color: var(--texto-tenue);
  font-size: 14px;
  line-height: 1.55;
}

/* Ya instalada: se dice y punto, sin botones que no llevan a nada */
.app-instalar .app-instalar__hecho{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--salvia);
}
.app-instalar__hecho::before{
  content: "✓";
  font-size: 15px;
  line-height: 1;
}

/* Los dos pasos de iOS: numerados, que se leen de un vistazo */
.app-instalar__pasos{
  margin: 0;
  padding-left: 20px;
  color: var(--texto-tenue);
  font-size: 14px;
  line-height: 1.6;
}
.app-instalar__pasos li + li{ margin-top: 6px; }
.app-instalar__pasos strong{ color: var(--texto-claro); font-weight: 500; }
.app-instalar__pasos .emoji{ font-size: 15px; line-height: 1; }

/* «Forzar actualización»: discreto, centrado y separado de lo de arriba */
.app-instalar__pie{
  display: flex;
  justify-content: center;
  padding-top: 4px;
  border-top: 1px solid var(--linea);
}
.app-instalar__pie .enlace{ font-size: 13.5px; }


/* =====================================================================
   TEMA CLARO (V2, 09-DECISIONES-V2 §Diseño)
   Fondo blanco, elegante pero rápido. Va AL FINAL de app.css a propósito:
   gana por orden de cascada sin reescribir las reglas de arriba, y si un día
   hay que volver al oscuro basta con quitar este bloque.
   Lo único que sigue oscuro: el visor de foto a pantalla completa, la ruleta
   y la cámara (son escenarios, no superficies de lectura).
   ===================================================================== */

:root{
  --fondo:        #ffffff;
  --superficie:   #faf8f4;   /* secciones suaves */
  --superficie-2: #f3efe8;   /* elevadas: paneles, miniaturas vacías */
  --borde:        #ebe5da;
  --borde-fuerte: #d9d1c3;

  /* Las variables "oscuras" de v1 pasan a significar lo que toca en claro.
     --tinta se queda como TINTA (texto): muchas reglas la usan como color de
     texto sobre crema y así tiene que seguir. */
  --texto-claro:  #1f2a24;   /* "texto sobre el fondo de la app" -> ahora tinta */
  --texto-tenue:  #6d675e;
  --tinta-media:  var(--superficie-2);
  --linea:        var(--borde);
  --linea-clara:  rgba(31,42,36,.12);

  --s-1: 0 1px 2px rgba(31,42,36,.06);
  --s-2: 0 6px 18px rgba(31,42,36,.08);
  --s-3: 0 14px 40px rgba(31,42,36,.14);
}

html, body{ background: var(--fondo); }
body{ color: var(--texto-claro); font-weight: 400; }
::selection{ background: var(--oro-suave); color: var(--tinta-honda); }

/* Cabecera pegajosa: degradado blanco en vez de verde */
.cabecera{ background: linear-gradient(var(--fondo) 72%, rgba(255,255,255,0)); }
.cabecera h1, .cabecera h2{ color: var(--tinta); }

/* Botones de icono y paneles */
.icono-btn{ color: var(--tinta); }
.icono-btn:hover{ background: rgba(31,42,36,.06); }
.icono-btn:active{ background: rgba(31,42,36,.11); }
.panel{ background: var(--superficie); border-color: var(--borde); }

/* Tarjetas del feed: blancas, borde fino, sombra muy suave */
.tarjeta{
  background: var(--fondo);
  border: 1px solid var(--borde);
  box-shadow: var(--s-1);
  border-radius: 16px;
  overflow: hidden;
}
.tarjeta-cabecera{ background: var(--fondo); }
.tarjeta-nick{ color: var(--tinta); font-weight: 600; }
.tarjeta-hace{ color: var(--texto-tenue); }
.tarjeta-foto{ background: var(--superficie-2); }

/* Chips */
.chip{
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--tinta);
}
.chip-reto{ background: #fff4f6; border-color: #f1cdd5; color: var(--vino); }
.chip-reto.validado{ background: #eef6ef; border-color: #cfe3d2; color: var(--ok); }
.chip-bingo{ background: #fff8e8; border-color: #f0dfb3; color: #8d6b44; }

/* Campos */
.campo input, .campo textarea, .campo select{
  background: var(--fondo);
  color: var(--tinta);
  border: 1px solid var(--borde-fuerte);
}
.campo input::placeholder, .campo textarea::placeholder{ color: #a39c90; }
.campo input:focus, .campo textarea:focus, .campo select:focus{
  background: var(--fondo);
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(184,149,106,.18);
}
.campo .error{ color: var(--error); }
.campo .pista{ color: var(--texto-tenue); }

/* Barra inferior: blanca con desenfoque, activa en vino */
.barra{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--borde);
}
.barra-item{ color: var(--texto-tenue); }
.barra-item:hover{ color: var(--tinta); }
.barra-item.activo{ color: var(--vino); }
.barra-item.activo::before{ background: var(--vino); }

/* Avatares, rejillas, momentos, subida */
.avatar{ background: var(--superficie-2); border-color: var(--borde); }
.rejilla-item{ background: var(--superficie-2); }
.tarjeta-momento{ background: var(--fondo); border-color: var(--borde); color: var(--tinta); box-shadow: var(--s-1); }
.tarjeta-momento:hover{ border-color: var(--oro); }
.momento-titulo h3{ color: var(--tinta); }
.fila-subida .mini{ background: var(--superficie-2); }
.fila-subida .nombre{ color: var(--tinta); }
.fila-subida.hecha .estado{ color: var(--ok); }

/* Estados */
.vacio .titulo, .error-pantalla p{ color: var(--tinta); }
.cargando{ color: var(--texto-tenue); }
.cuenta-atras{ color: var(--vino); }

/* Toast, hoja inferior, modal: blancos */
.toast{ background: var(--tinta); color: #fff; box-shadow: var(--s-3); }
.hoja, .modal{ background: var(--fondo); color: var(--tinta); }

/* Lo que sigue OSCURO a propósito */
.visor{ background: #0f1512; color: #ece5d8; }
.ruleta{ background: linear-gradient(165deg, #2a3831, #131c18); color: #ece5d8; }
.ruleta::before{ background: linear-gradient(#131c18, rgba(19,28,24,0)); }
.ruleta::after{ background: linear-gradient(rgba(19,28,24,0), #131c18); }
.ruleta-texto, .ruleta-esperando .ruleta-texto{ color: #ece5d8; }
.camara{ background: #000; }

/* ---------------------------------------------------------------------
   Sub-pestañas del feed (Todo · Selfies) y contador de gente
   --------------------------------------------------------------------- */
.cabecera-feed{ display: flex; flex-direction: column; gap: 10px; }
.cabecera-feed .fila{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.subpestanas{
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-pill);
}
.subpestana{
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: var(--r-pill);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--texto-tenue);
  min-height: 40px;
  transition: background .18s ease, color .18s ease;
}
.subpestana.activa{ background: var(--fondo); color: var(--vino); box-shadow: var(--s-1); }
.activos{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--texto-tenue);
}
.activos::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(79,122,85,.18);
}

/* ---------------------------------------------------------------------
   Selfies
   --------------------------------------------------------------------- */
.selfies-marcador{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 4px 0 14px;
}
.selfies-marcador > div{
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px;
  padding: 10px 12px; text-align: center;
}
.selfies-marcador .num{ font-size: 22px; font-weight: 600; color: var(--tinta); line-height: 1.1; }
.selfies-marcador .lbl{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-tenue); margin-top: 2px; }
.vidas{ display: inline-flex; gap: 3px; justify-content: center; }
.vidas .icono{ width: 20px; height: 20px; color: var(--vino); }
.vidas .icono.gastada{ color: var(--borde-fuerte); }
.racha{ color: #ef7f27; font-weight: 600; }

.objetivo{
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 18px;
  padding: 22px 18px; text-align: center; box-shadow: var(--s-2);
}
.objetivo .avatar-xl{ margin: 0 auto 12px; }
.objetivo .sin-app{
  width: 120px; height: 120px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--oro) 0%, var(--oro-suave) 100%);
  color: var(--tinta-honda); font-size: 44px; font-weight: 600;
}
.objetivo .nombre{ font-size: 24px; font-weight: 600; color: var(--tinta); margin: 0; }
.objetivo .pista{ color: var(--texto-tenue); margin: 6px 0 0; }
.objetivo .acciones{ display: grid; gap: 10px; margin-top: 18px; }
.objetivo .saltar{ font-size: 14px; color: var(--texto-tenue); background: none; border: 0; cursor: pointer; padding: 10px; min-height: 44px; font: inherit; }

.por-validar{ display: grid; gap: 10px; margin: 6px 0 16px; }
.por-validar-item{
  display: flex; align-items: center; gap: 12px;
  background: #fff8e8; border: 1px solid #f0dfb3; border-radius: 14px; padding: 10px 12px;
}
.por-validar-item img{ width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.por-validar-item .txt{ flex: 1 1 auto; min-width: 0; font-size: 14px; }
.por-validar-item .txt b{ color: var(--tinta); }

.ranking{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ranking li{
  display: flex; align-items: center; gap: 12px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px; padding: 8px 12px;
}
.ranking .pos{ width: 26px; text-align: center; font-weight: 600; color: var(--texto-tenue); }
.ranking li:nth-child(1) .pos{ color: #c9a227; }
.ranking li:nth-child(2) .pos{ color: #9aa3ad; }
.ranking li:nth-child(3) .pos{ color: #b08052; }
.ranking .nick{ flex: 1 1 auto; font-weight: 500; color: var(--tinta); }
.ranking .pts{ font-weight: 600; color: var(--vino); }
.ranking li.yo{ border-color: var(--oro); background: #fffcf5; }

.bingo{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 14px; }
.bingo-casilla{
  aspect-ratio: 1; border-radius: 14px; border: 1px dashed var(--borde-fuerte);
  background: var(--superficie); padding: 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; font-size: 11.5px; line-height: 1.25; color: var(--tinta);
  position: relative; overflow: hidden;
}
.bingo-casilla .emoji{ font-size: 22px; }
.bingo-casilla.hecha{ border-style: solid; border-color: var(--ok); }
.bingo-casilla.hecha img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bingo-casilla.hecha .tick{
  position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ok); color: #fff; display: grid; place-items: center;
}
.bingo-casilla.hecha .tick .icono{ width: 14px; height: 14px; }

/* ---------------------------------------------------------------------
   Sugerencias para el DJ
   --------------------------------------------------------------------- */
.dj-mia{
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px;
}
.dj-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dj-item{
  display: flex; align-items: center; gap: 12px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px; padding: 10px 12px;
}
.dj-item.mia{ border-color: var(--oro); }
.dj-item .txt{ flex: 1 1 auto; min-width: 0; }
.dj-item .titulo{ font-weight: 600; color: var(--tinta); }
.dj-item .artista{ font-size: 13.5px; color: var(--texto-tenue); }
.dj-item .quien{ font-size: 12.5px; color: var(--texto-tenue); margin-top: 2px; }
.voto{
  appearance: none; border: 1px solid var(--borde-fuerte); background: var(--fondo); cursor: pointer;
  border-radius: var(--r-pill); padding: 8px 12px; min-height: 40px; min-width: 64px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--tinta);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.voto .icono{ width: 16px; height: 16px; }
.voto.activo{ background: var(--vino); border-color: var(--vino); color: #fff; }
.voto:disabled{ opacity: .45; cursor: default; }

/* ---------------------------------------------------------------------
   Yo: semáforo, cápsula, etiquetado
   --------------------------------------------------------------------- */
.seccion-yo{ margin: 18px 0 0; }
.seccion-yo h3{ margin: 0 0 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); font-weight: 600; }
.semaforo{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.semaforo button{
  appearance: none; border: 1px solid var(--borde); background: var(--fondo); cursor: pointer;
  border-radius: 12px; padding: 10px 6px; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: inherit; font-size: 11.5px; color: var(--texto-tenue);
}
.semaforo button .luz{ width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--borde-fuerte); }
.semaforo button.activo{ border-color: var(--tinta); color: var(--tinta); font-weight: 600; }
.semaforo .verde .luz{ background: #4f7a55; border-color: #4f7a55; }
.semaforo .amarillo .luz{ background: #e0b23c; border-color: #e0b23c; }
.semaforo .rojo .luz{ background: #c2402f; border-color: #c2402f; }
.semaforo-punto{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 6px; vertical-align: middle; }
.semaforo-punto.verde{ background: #4f7a55; } .semaforo-punto.amarillo{ background: #e0b23c; } .semaforo-punto.rojo{ background: #c2402f; }

.capsula textarea{ min-height: 120px; }
.capsula .contador{ text-align: right; font-size: 12px; color: var(--texto-tenue); margin-top: 4px; }

.enlace-fila{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo);
  color: var(--tinta); text-decoration: none; min-height: 48px;
}
.enlace-fila + .enlace-fila{ margin-top: 8px; }
.enlace-fila .icono{ color: var(--texto-tenue); }

/* Perfil público */
.perfil-cab{ text-align: center; padding: 8px 0 14px; }
.perfil-cab .avatar-lg{ margin: 0 auto 10px; }
.perfil-cab .nick{ font-size: 24px; font-weight: 600; color: var(--tinta); margin: 0; }
.perfil-cab .nombre{ color: var(--texto-tenue); margin: 2px 0 0; }
.perfil-cab .mueca{ color: var(--texto-tenue); font-size: 14px; margin-top: 6px; }
.perfil-cab .puesto{ display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: var(--r-pill); background: #fff4f6; color: var(--vino); font-weight: 600; font-size: 13px; }

/* Enlaces de nick en el feed */
.tarjeta-nick a, .enlace-nick{ color: inherit; text-decoration: none; }
.tarjeta-nick a:active, .enlace-nick:active{ opacity: .7; }

@media (min-width: 700px){
  .bingo{ gap: 10px; }
  .selfies-marcador{ gap: 10px; }
}

/* Cabecera del feed en columna: que los hijos no se centren ni encojan */
.cabecera-feed{ align-items: stretch; }
.cabecera-feed .fila h1{ flex: 1 1 auto; }
.cabecera-feed .subpestanas{ align-self: flex-start; }

/* ---------------------------------------------------------------------
   Etiquetas en el visor («Con Ana y Luis») y su editor
   --------------------------------------------------------------------- */
.visor-etiquetas{ margin: 4px 0 0; font-size: 13px; color: rgba(236,229,216,.78); }
.visor-etiquetas a{ color: inherit; text-decoration: underline; text-decoration-color: rgba(236,229,216,.4); text-underline-offset: 2px; }

.etiquetador{ padding: 0 10px 10px; display: grid; gap: 10px; }
.etiquetador .chips{ display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; }
.etiquetador .chip button{
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 17px; line-height: 1; padding: 0 0 0 6px; color: inherit;
}
.etiquetador .campo{ margin: 0; }
.etiquetador .sugerencias{ display: grid; gap: 4px; max-height: 200px; overflow: auto; }
.etiquetador .sugerencias button{
  appearance: none; border: 1px solid var(--borde); background: var(--fondo); cursor: pointer;
  border-radius: 10px; padding: 10px 12px; min-height: 44px; text-align: left;
  font: inherit; color: var(--tinta);
}
.etiquetador .sugerencias button:hover{ border-color: var(--oro); }

/* ---------------------------------------------------------------------
   Capas de ui.js (hojaInferior / confirmar / capa)
   ui.js usa .capa, .capa--hoja, .capa--dialogo, .hoja__*, .dialogo__* y
   .boton--*, que no tenían regla (el CSS de v1 nombraba .hoja-titulo y
   .modal). Aquí se les da estilo, reaprovechando el de las hojas.
   --------------------------------------------------------------------- */
.capa{
  position: fixed; inset: 0; z-index: 102;
  background: rgba(19,28,24,.55);
  backdrop-filter: blur(2px);
  animation: capa-aparece .18s ease;
}
@keyframes capa-aparece{ from{ opacity: 0; } to{ opacity: 1; } }
.capa--dialogo{ display: grid; place-items: center; padding: 20px; }

.hoja__titulo{
  padding: 4px 10px 10px;
  font-family: var(--f-display);
  font-size: 20px;
  text-align: center;
  color: var(--tinta);
  margin: 0;
}
.hoja__opciones{ display: grid; gap: 2px; }
.hoja__opcion{
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 54px; padding: 14px 16px;
  border-radius: var(--r-md);
  font: inherit; font-size: 16px; text-align: left; color: var(--tinta);
  transition: background .15s ease;
}
.hoja__opcion:hover{ background: rgba(31,42,36,.06); }
.hoja__opcion.es-peligro{ color: var(--vino); }
.hoja__opcion.es-principal{ color: var(--vino); font-weight: 600; justify-content: center; }
.hoja__cancelar{
  appearance: none; border: 0; cursor: pointer;
  margin-top: 8px; width: 100%; min-height: 52px;
  border-radius: var(--r-md);
  background: rgba(31,42,36,.07);
  color: var(--texto-tenue);
  font: inherit; font-size: 16px;
}
.hoja__cancelar:hover{ background: rgba(31,42,36,.12); }

.dialogo{
  width: min(420px, 100%);
  background: var(--fondo); color: var(--tinta);
  border-radius: var(--r-lg);
  padding: 22px 20px 16px;
  box-shadow: var(--s-3);
  animation: hoja-sube .22s cubic-bezier(.2,.9,.3,1);
}
.dialogo__texto{ margin: 0 0 16px; font-size: 16.5px; line-height: 1.4; text-align: center; }
.dialogo__botones{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.boton{
  appearance: none; cursor: pointer;
  min-height: 46px; padding: 10px 16px;
  border-radius: var(--r-pill);
  font: inherit; font-size: 15.5px; font-weight: 500;
  border: 1px solid var(--borde-fuerte); background: var(--fondo); color: var(--tinta);
}
.boton--fantasma:hover{ border-color: var(--oro); }
.boton--peligro{ background: var(--vino); border-color: var(--vino); color: #fff; }
.boton--peligro:hover{ background: var(--vino-hondo); border-color: var(--vino-hondo); }

/* =====================================================================
   V3 (11 sept 2026) · cámara, momentos con hora, palabra guardada
   ===================================================================== */

/* --- Hoja de «¿cámara o carrete?» ---------------------------------- */
.hoja__opcion--foto{ gap: 14px; align-items: center; }
.hoja__opcion--foto .icono{ flex: 0 0 auto; color: var(--vino); }
.hoja__opcion--foto .txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hoja__opcion--foto .txt .titulo{ font-weight: 600; }
.hoja__opcion--foto .txt .pista{ font-size: 13px; color: var(--texto-tenue); }

/* --- Momentos que todavía no han empezado -------------------------- */
.tarjeta-momento.cerrado{ opacity: .62; }
.tarjeta-momento.cerrado:hover{ border-color: var(--borde); }
.candado-momento{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--superficie-2); border: 1px solid var(--borde);
  font-size: 12.5px; color: var(--texto-tenue); white-space: nowrap;
}
.candado-momento .icono{ width: 13px; height: 13px; }

.momento-bloqueado{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin: 8px 0 4px;
  border: 1px dashed var(--borde-fuerte); border-radius: 14px;
  background: var(--superficie);
  color: var(--texto-tenue); font-size: 14px; line-height: 1.4;
}
.momento-bloqueado .icono{ flex: 0 0 auto; color: var(--borde-fuerte); }
.momento-bloqueado b{ color: var(--tinta); font-weight: 600; }

.hueco.cerrado{
  opacity: .55;
  border-style: dashed;
  cursor: default;
}
.hueco.cerrado .icono{ color: var(--borde-fuerte); }

/* --- La palabra guardada en este móvil ----------------------------- */
.mi-palabra{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--oro); border-radius: 12px;
  background: #fffcf5;
}
.mi-palabra .txt{ min-width: 0; }
.mi-palabra .lbl{ display: block; font-size: 12.5px; color: var(--texto-tenue); }
.mi-palabra .val{
  display: block; font-size: 20px; font-weight: 600; color: var(--vino);
  font-family: var(--f-texto); letter-spacing: .04em;
}
.mi-palabra .val.oculta{ letter-spacing: .18em; }

/* La palabra recién elegida, en grande, al terminar el registro. */
.palabra-grande{
  margin: 14px 0; padding: 18px 16px; text-align: center;
  border: 1px solid var(--oro); border-radius: 16px; background: #fffcf5;
}
.palabra-grande .val{
  font-family: var(--f-display); font-size: 38px; line-height: 1.1; color: var(--vino);
}
.palabra-grande .pista{ font-size: 13px; color: var(--texto-tenue); margin-top: 6px; }

/* =====================================================================
   V3.1 · campana de avisos, bienvenida, subida rápida
   ===================================================================== */

/* --- Burbuja roja con número (campana y pestaña Feed) -------------- */
.burbuja{
  position: absolute; top: -2px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--vino); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--fondo);
  pointer-events: none;
}
.campana{ position: relative; flex: 0 0 auto; }
.barra-item{ position: relative; }
.barra-item .burbuja{ top: 2px; right: calc(50% - 22px); }

/* --- Lista de avisos (hoja) ---------------------------------------- */
.avisos-lista{ display: grid; gap: 4px; max-height: 58dvh; overflow-y: auto; padding: 2px 2px 8px; }
.aviso{
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 10px; border-radius: 12px; text-align: left;
  font: inherit; color: var(--tinta);
}
.aviso:hover{ background: rgba(31,42,36,.05); }
.aviso.nuevo{ background: #fff4f6; }
.aviso-foto{ width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--superficie-2); }
.aviso-minis{ display: flex; flex: 0 0 auto; }
.aviso-minis img{ width: 36px; height: 48px; object-fit: cover; border-radius: 8px; border: 2px solid var(--fondo); margin-left: -10px; }
.aviso-minis img:first-child{ margin-left: 0; }
.aviso-txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14.5px; line-height: 1.3; }
.aviso-sub{ font-size: 12.5px; color: var(--texto-tenue); }
.avisos-pie{ padding: 6px 4px 0; }

/* --- Bienvenida ---------------------------------------------------- */
.bienvenida-cab{ text-align: center; padding: 18px 0 6px; }
.bienvenida-cab .avatar-lg{ margin: 0 auto 12px; }
.bienvenida-cab .display{ margin: 0 0 6px; }
.bienvenida-bloque{
  margin: 14px 0 0; padding: 14px 16px;
  border: 1px solid var(--borde); border-radius: 16px; background: var(--fondo);
  box-shadow: var(--s-1);
}
.bienvenida-bloque h3{
  margin: 0 0 4px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vino); font-weight: 600;
}
.bienvenida-bloque .semaforo{ margin-top: 10px; }
.bienvenida-bloque .btn{ margin-top: 10px; }

.pasos-ios{ list-style: none; margin: 12px 0 8px; padding: 0; display: grid; gap: 10px; counter-reset: paso; }
.pasos-ios li{ display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.35; }
.paso-icono{
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--superficie); border: 1px solid var(--borde); color: #0a7aff;
}
.paso-icono.paso-texto{ width: auto; padding: 0 10px; font-size: 13px; font-weight: 600; }

/* --- Álbum en la hoja de «¿Dónde la ponemos?» ---------------------- */
.emoji-album{ font-size: 22px; width: 28px; text-align: center; flex: 0 0 auto; }
.hoja__opcion.es-principal-album{ background: #fff4f6; }
.hoja__opcion:disabled{ opacity: .5; cursor: default; }

/* --- Píldora de subida rápida -------------------------------------- */
.subida-rapida{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(76px + var(--seguro-abajo, 0px)); z-index: 90;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 32px); padding: 10px 16px 12px;
  border-radius: 999px; background: var(--tinta); color: #fff;
  box-shadow: var(--s-3); font-size: 14px;
  overflow: hidden;
}
.subida-rapida .girador{ width: 16px; height: 16px; flex: 0 0 auto; }
.subida-rapida .txt{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subida-rapida .barra-mini{ position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15); }
.subida-rapida .barra-mini > span{ display: block; height: 100%; width: 0; background: var(--oro-suave); transition: width .2s ease; }

/* --- V3.1 (revisión): reemplazo en álbum lleno, foto en espera, comodines --- */
.reemplazo-rejilla{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 6px 6px; }
.reemplazo-opcion{
  appearance: none; border: 1px solid var(--borde); background: var(--superficie); cursor: pointer;
  border-radius: 12px; padding: 0; overflow: hidden; display: flex; flex-direction: column;
  font: inherit; color: var(--tinta);
}
.reemplazo-opcion img, .reemplazo-vacio{ width: 100%; aspect-ratio: 1; object-fit: cover; display: grid; place-items: center; background: var(--superficie-2); }
.reemplazo-pie{ font-size: 12.5px; padding: 6px 4px; text-align: center; color: var(--vino); font-weight: 600; }
.subida-rapida.pendiente{ background: var(--vino); cursor: pointer; padding-right: 44px; }
.subida-rapida.pendiente .girador{ display: none; }
.subida-rapida .descartar{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  appearance: none; border: 0; background: rgba(255,255,255,.18); color: #fff; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; font-size: 18px; line-height: 30px; padding: 0;
}
.aviso-ios{
  margin: 10px 0 0; padding: 10px 12px; border-radius: 12px;
  background: #fff8e8; border: 1px solid #f0dfb3; font-size: 14px; line-height: 1.4; color: var(--tinta);
}
.stats-comodines{ display: flex; flex-wrap: wrap; gap: 6px; }
.stats-comodines code{ padding: 6px 10px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); font-size: 15px; }

/* =====================================================================
   V3.4 · Gente y reacciones
   Pestaña «Gente» (buscador + lista), pantalla «Reacciones a tus fotos»,
   sus entradas desde «Yo» y desde la campana, la línea «Han reaccionado…»
   del visor y la barra de abajo con 6–7 pestañas. Al final a propósito,
   como los bloques de antes: no reescribe ni una línea de lo de arriba.
   ===================================================================== */

/* --- Barra con 6 pestañas (7 el admin) ------------------------------
   A 360 px, con 6 pestañas a cada etiqueta le quedan ~53 px y «Momentos»,
   con su espaciado entre letras, pide ~54: se cortaba por un pelo. Sin
   espaciado y con 1 px de relleno le sobran ~4. Con 7 quedan ~51 px: sin
   hueco entre pestañas, sin relleno y a 9,5 px, cabe. Solo en móviles
   estrechos y solo con muchas pestañas (app.js pone la clase): con menos
   pestañas la barra se queda exactamente igual que antes. */
@media (max-width: 480px){
  .barra.barra--muchas .barra-item{ letter-spacing: 0; padding-left: 1px; padding-right: 1px; }
  .barra.barra--llena{ gap: 0; padding-left: 2px; padding-right: 2px; }
  .barra.barra--llena .barra-item{ font-size: 9.5px; padding-left: 0; padding-right: 0; }
}
/* A 320 px (iPhone SE de los primeros, o un móvil con la pantalla ampliada)
   ni así: con 6 pestañas a «Momentos» le quedaban 48 px, pedía 49 y salía
   «Moment…». Ahí fuera también el hueco entre pestañas y su relleno, como ya
   se hace con 7: quedan ~52 px por etiqueta y cabe entera. */
@media (max-width: 340px){
  .barra.barra--muchas{ gap: 0; padding-left: 2px; padding-right: 2px; }
  .barra.barra--muchas .barra-item{ padding-left: 0; padding-right: 0; }
}

/* --- Gente: cabecera con el buscador --------------------------------- */
/* Más fondo sólido que el degradado normal: debajo pasan filas muy juntas. */
.gente-cab{ background: linear-gradient(var(--fondo) 86%, rgba(255,255,255,0)); }
.gente-buscador{ position: relative; margin: 0; }
.gente-buscador input{ padding-left: 46px; padding-right: 50px; }
/* Fuera la × del navegador: ponemos la nuestra, de 48 px y en todos igual. */
.gente-buscador input::-webkit-search-cancel-button,
.gente-buscador input::-webkit-search-decoration{ -webkit-appearance: none; appearance: none; }
.gente-lupa{
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--oro); pointer-events: none;
}
.gente-borrar{
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; color: var(--texto-tenue);
}
.gente-borrar:hover{ background: rgba(31,42,36,.06); color: var(--tinta); }

/* --- Gente: la lista -------------------------------------------------- */
/* La columna, fija al ancho de la pantalla (minmax(0, 1fr)). Sin ella, la
   rejilla la hace tan ancha como la fila más larga sin cortar: el nick va en
   una línea, así que bastaba UN nick largo (doce emojis, o «Tú» y el semáforo
   a 320 px) para sacar todas las filas, y la barra de abajo, de la pantalla.
   Así cada fila se queda en su sitio y el nick sale con «…». */
.gente-lista{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
/* El margen negativo alinea los avatares con el resto de la pantalla y deja
   que el fondo al tocar llegue casi al borde. No desborda: .pantalla tiene
   16 px de relleno y aquí se comen 10. */
.gente-fila{
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 10px; margin: 0 -10px;
  border-radius: 14px; color: var(--tinta); text-decoration: none;
  transition: background .15s ease;
}
.gente-fila:hover{ background: var(--superficie); color: var(--tinta); }
.gente-fila:active{ background: var(--superficie-2); }
.gente-fila .avatar{ width: 44px; height: 44px; }
.gente-fila .avatar-vacio{ font-size: 19px; font-weight: 600; }
.gente-txt{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gente-nick{
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--tinta);
}
.gente-nick .txt{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gente-nick .semaforo-punto{ flex: none; margin-left: 0; }
.gente-tu{
  flex: none; padding: 1px 8px; border-radius: var(--r-pill);
  background: #fff4f6; color: var(--vino);
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
}
.gente-nombre{
  font-size: 13.5px; line-height: 1.3; color: var(--texto-tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gente-fotos{
  flex: none; font-size: 12.5px; color: var(--texto-tenue);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.gente-nadie b{ color: var(--tinta); font-weight: 600; }

/* --- Reacciones a tus fotos: resumen ---------------------------------- */
.reac-resumen{
  margin: 0 0 14px; padding: 14px 16px; text-align: center;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
}
.reac-resumen__txt{ font-size: 16px; color: var(--texto-tenue); }
.reac-resumen__txt b{ color: var(--tinta); font-weight: 600; }
.reac-tipos{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.reac-tipo{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 7px; border-radius: var(--r-pill);
  background: var(--fondo); border: 1px solid var(--borde);
  font-size: 14px; font-weight: 600; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.reac-tipo .icono{ width: 18px; height: 18px; }
.reac-tipos--foto{ justify-content: flex-start; gap: 4px; margin: 0; }
.reac-tipos--foto .reac-tipo{ padding: 2px 8px 2px 5px; font-size: 13px; background: var(--superficie); }

/* --- Reacciones a tus fotos: una tarjeta por foto --------------------- */
.reac-lista{ display: grid; gap: 12px; }
.reac-tarjeta{
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 16px;
  box-shadow: var(--s-1); overflow: hidden;
}
.reac-tarjeta.con-nuevas{ border-color: #f1cdd5; }
.reac-cab{ display: flex; align-items: center; gap: 12px; padding: 10px; }
.reac-mini{
  flex: none; display: block; width: 72px; height: 72px;
  border-radius: 12px; overflow: hidden; background: var(--superficie-2);
}
.reac-mini img{ width: 100%; height: 100%; object-fit: cover; }
.reac-mini:active img{ opacity: .8; }
.reac-info{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.reac-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  font-size: 12.5px; color: var(--texto-tenue);
}
.reac-nuevas{
  display: inline-block; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--vino); color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
}

.reac-personas{ list-style: none; margin: 0; padding: 4px 6px 6px; border-top: 1px solid var(--borde); }
.reac-persona{
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 8px; border-radius: 10px;
  color: var(--tinta); text-decoration: none;
}
.reac-persona:hover{ background: var(--superficie); color: var(--tinta); }
.reac-persona:active{ background: var(--superficie-2); }
.reac-persona.nueva{ background: #fff8f9; }
.reac-persona .avatar{ width: 34px; height: 34px; }
.reac-persona .avatar-vacio{ font-size: 15px; font-weight: 600; }
.reac-persona .nick{
  flex: 1 1 auto; min-width: 0; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reac-persona .icono{ width: 20px; height: 20px; }
.reac-persona .cuando{ flex: none; font-size: 12.5px; color: var(--texto-tenue); white-space: nowrap; }
.punto-nuevo{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vino); }
.reac-mas{
  display: block; width: 100%; min-height: 48px; padding: 10px 16px;
  border-top: 1px solid var(--borde);
  font-size: 14.5px; font-weight: 500; color: var(--vino); text-align: center;
}
.reac-mas:hover{ background: var(--superficie); }

/* --- «Yo»: la entrada a las reacciones -------------------------------- */
.enlace-reacciones{
  gap: 12px; min-height: 64px; padding: 12px 14px;
  border-color: #f1cdd5; background: #fff8f9;
}
.enlace-reacciones:hover{ color: var(--tinta); border-color: var(--vino); }
.enlace-reacciones .txt{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.enlace-reacciones .titulo{ font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.enlace-reacciones .sub{ font-size: 13px; line-height: 1.3; color: var(--texto-tenue); }
.contador-nuevas{
  flex: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--vino); color: #fff;
  font-size: 12.5px; font-weight: 700; line-height: 24px; text-align: center;
}

/* --- Campana: «Ver todas las reacciones», al final de la lista -------- */
.aviso-todas{ justify-content: space-between; min-height: 56px; margin-top: 4px; border: 1px solid var(--borde); }
.aviso-todas b{ color: var(--vino); font-weight: 600; }
.aviso-todas .icono{ flex: none; color: var(--texto-tenue); }

/* --- Visor: «Han reaccionado: Ana, Luis y 3 más» ----------------------
   El visor sigue oscuro a propósito, pero su pie cogía el color de texto del
   tema claro (--texto-claro pasó a ser tinta): el nick y los números salían
   oscuro sobre oscuro. Aquí se le devuelve el claro, igual que ya hacían las
   etiquetas («Con Ana y Luis»). */
.visor-pie{ color: #ece5d8; }
.visor-quien .cuando{ color: rgba(236,229,216,.62); }
.reacciones-grandes .reaccion{ color: rgba(236,229,216,.72); }
.reacciones-grandes .reaccion.mia{ color: #fff7f3; }
.visor-han-reaccionado{
  display: flex; align-items: center; gap: 6px;
  width: 100%; min-height: 44px; margin-top: 4px; padding: 8px 6px;
  border-radius: var(--r-sm); text-align: left;
  font-size: 13.5px; line-height: 1.35; color: rgba(236,229,216,.8);
}
.visor-han-reaccionado .txt{ flex: 1 1 auto; min-width: 0; }
.visor-han-reaccionado b{ color: #fff7f3; font-weight: 600; }
.visor-han-reaccionado .icono{ flex: none; opacity: .7; }
.visor-han-reaccionado:hover,
.visor-han-reaccionado:active{ background: rgba(255,255,255,.08); }

/* =====================================================================
   V3.6 · Aviso de «La app se ha actualizado» (js/actualizar.js)
   ===================================================================== */
.dialogo--novedades{ text-align: left; padding: 22px 20px 16px; }
.dialogo__emoji{ margin: 0 0 4px; font-size: 30px; line-height: 1; text-align: center; }
.dialogo__titulo{
  margin: 0 0 12px;
  font-family: var(--f-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 25px; font-weight: 500; line-height: 1.15;
  text-align: center; color: var(--tinta);
}
.dialogo__lista{ margin: 0 0 14px; padding: 0 0 0 20px; font-size: 15px; line-height: 1.4; list-style: disc; }
.dialogo__lista li::marker{ color: var(--vino); }
.dialogo__lista li{ margin: 0 0 7px; }
.dialogo--novedades .dialogo__texto{ font-size: 14.5px; color: var(--texto-tenue); }
.dialogo__botones--pila{ grid-template-columns: 1fr; }
.dialogo__botones--pila .boton{ min-height: 50px; }

/* =====================================================================
   V3.7 · Cabecera que no flota · botones del selfie bien visibles
   ===================================================================== */

/* La cabecera pegajosa tenía un fondo que se iba haciendo transparente en su
   último 28 %. Con una sola fila daba igual, pero en el feed (título + «Todo ·
   Selfies · Bingo», ~128 px) y en «Gente» (con el buscador) esa franja es
   justo la segunda fila: al deslizar, las fotos pasaban por detrás y el menú
   parecía ir volando suelto. Ahora el fondo es sólido y el degradado queda
   FUERA, por debajo, sin nada encima. Sin backdrop-filter, que en iPhone
   también hacía cosas raras con lo pegajoso. */
.cabecera{
  background: var(--fondo);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cabecera::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 12px;
  background: linear-gradient(var(--fondo), rgba(255,255,255,0));
  pointer-events: none;
}
/* La píldora «N fotos nuevas», justo por debajo de la cabecera del feed. */
.nuevas{ top: calc(136px + var(--seguro-arriba)); }
body.sin-cobertura .nuevas{ top: calc(178px + var(--seguro-arriba)); }

/* Selfies: dos botones iguales de grandes, «Subir el selfie» y «Pasar». */
.objetivo .acciones{ gap: 12px; }
.btn-selfie,
.btn-pasar{ min-height: 56px; font-size: 16.5px; font-weight: 600; letter-spacing: .01em; }
.btn-pasar{
  background: #fff;
  color: var(--vino);
  border: 2px solid var(--vino);
  box-shadow: var(--s-1, 0 1px 2px rgba(0,0,0,.06));
}
.btn-pasar:hover:not(:disabled){ background: #fff4f6; }
.btn-pasar:disabled{ color: var(--texto-tenue); border-color: var(--borde-fuerte); opacity: 1; }
.pasar-caja{ display: grid; gap: 6px; }
.pasar-nota{ margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--texto-tenue); text-align: center; }

/* =====================================================================
   V3.8 · Aviso de la organización · burbuja del contador
   ===================================================================== */

/* V3.9: la rejilla de «Los selfies de la vergüenza» que ocupaba este
   bloque se ha ido a su propia pantalla (ver el bloque V3.9, al final de
   este archivo). De aquí solo siguen en uso la burbuja del contador —ahora
   en el enlace de la pantalla de Selfies— y el aviso de la organización. */
.burbuja-verguenza{
  flex: none;
  min-width: 24px; height: 24px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--vino); color: #fff7f3;
  font-size: 13px; font-weight: 600; line-height: 1;
}
.aviso-organizacion{
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--vino);
  border-left-width: 5px;
  border-radius: var(--r-md);
  background: #fff4f6;
}
.aviso-organizacion h3{
  margin: 0 0 6px;
  font-size: 15px; font-weight: 600; color: var(--vino);
}
.aviso-organizacion p{ margin: 0; font-size: 15px; line-height: 1.4; color: var(--tinta); }

/* =====================================================================
   V3.9 · Selfies dudosos: el enlace (js/vistas/selfies.js) y su pantalla
          propia (js/vistas/dudosos.js)
   ===================================================================== */

/* El enlace va debajo del marcador y es UNA FILA, no una caja con fotos: la
   pantalla de Selfies es para jugar, y la rejilla de antes se comía el
   objetivo y los botones. 56 px de alto, como todo lo que se toca. */
.dudosos-enlace{
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; margin: 2px 0 14px; padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: var(--r-md);
  background: var(--superficie); color: var(--tinta);
}
.dudosos-enlace:hover,
.dudosos-enlace:active{ background: var(--superficie-2); }
.dudosos-emoji{ flex: none; font-size: 22px; line-height: 1; }

/* `min-width: 0` para que a 320 px se recorte el texto y no se salgan de la
   pantalla la burbuja y la flecha, que son lo que hay que ver. */
.dudosos-txt{ flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.dudosos-tit{ font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.dudosos-sub{
  font-size: 12.5px; line-height: 1.3; color: var(--texto-tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dudosos-flecha{
  flex: none; font-size: 22px; line-height: 1;
  color: var(--texto-tenue);
}

/* --- La pantalla propia (#dudosos) ------------------------------------- */

/* La regla, con los ritmos que manda el servidor, antes de las fotos. */
.dudosos-regla{
  margin: 0 0 14px;
  font-size: 13.5px; line-height: 1.45;
  color: var(--texto-tenue);
}
.dudosos-regla b{ color: var(--tinta); font-weight: 600; }

/* Rejilla propia y no `.rejilla`: aquí cada foto lleva pie (quién, con quién
   y cuándo). Con `auto-fill` caben dos columnas a 320 px sin apreturas y
   cuatro en escritorio, sin media queries. */
.dudosos-rejilla{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.dudosos-item{ min-width: 0; }

.dudosos-foto{
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--superficie-2); border: 1px solid var(--borde);
}
/* Como en `.rejilla-item`: la foto va posicionada para que el alto lo mande
   el aspect-ratio y no la imagen. */
.dudosos-foto img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.dudosos-foto:active img{ opacity: .8; }

/* El tuyo, con cariño: un lazo dorado, no un capirote. */
.dudosos-item.mio .dudosos-foto{ border-color: var(--oro); }
.dudosos-mio{
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(19,28,24,.68); color: var(--oro-suave);
  font-size: 11px; line-height: 1.5; letter-spacing: .02em;
}

/* `anywhere` porque hay nicks y nombres largos: antes que salir de la
   columna y empujar la pantalla a lo ancho, que partan. */
.dudosos-pie{
  display: grid; gap: 1px; margin-top: 6px;
  font-size: 12.5px; line-height: 1.3; color: var(--texto-tenue);
  overflow-wrap: anywhere;
}
.dudosos-pie .nick{ color: var(--tinta); font-weight: 500; }

/* =====================================================================
   V3.10 · Cuenta atrás de las vidas · barra de progreso · moderación
   ===================================================================== */

/* --- La cuenta atrás de la siguiente vida (js/vistas/selfies.js) -------- */

/* Debajo del marcador, SIEMPRE en un renglón (V3.11): «❤️ Ganas una vida en
   15:34 · cada 30 min». El margen de arriba es negativo para pegarla al
   marcador, que ya trae 14 px suyos. */
.vidas-cuenta{
  display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px;
  margin: -8px 0 12px; padding: 0 2px;
  font-size: 13px; line-height: 1.35; color: var(--texto-tenue);
}
.vidas-cuenta .emoji{ font-size: 13px; line-height: 1; }
.vidas-cuenta-linea{ min-width: 0; white-space: nowrap; }
.vidas-cuenta-nota{ font-size: 12px; }
@media (max-width: 340px){
  .vidas-cuenta{ font-size: 12px; }
  .vidas-cuenta-nota{ font-size: 11.5px; }
}

/* `tabular-nums`: sin esto, los dígitos cambian de ancho cada segundo y la
   frase entera va bailando mientras se descuenta. */
.vidas-reloj{
  color: var(--vino); font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --- «Llevas 12 de 212 personas (6 %)» ---------------------------------- */

/* Texto y barra, con el porcentaje a la derecha. El texto puede encoger
   (`min-width: 0`) y el porcentaje no, que es lo que se busca de un vistazo;
   a 320 px la frase parte en dos líneas antes que sacar nada de la pantalla. */
.progreso-gente{ margin: 0 0 14px; }
.progreso-gente-txt{
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 0 6px;
  font-size: 13.5px; line-height: 1.3; color: var(--texto-tenue);
}
.progreso-gente-txt b{ min-width: 0; color: var(--tinta); font-weight: 600; }
.progreso-gente-pct{
  flex: none; color: var(--vino); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.progreso-gente-barra{
  height: 10px; overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--r-pill);
  background: var(--superficie-2);
}
.progreso-gente-barra i{
  display: block; height: 100%; width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--oro), var(--oro-suave));
  transition: width .35s ease;
}

/* --- Moderación del admin (js/vistas/dudosos.js) ------------------------ */

/* Cuelga del pie de cada miniatura de #dudosos, donde las columnas miden
   118 px a 320 px: los botones van APILADOS (grid de una columna) y no en
   fila, que es la única forma de que ninguno se salga a lo ancho. */
.moderacion{ display: grid; gap: 6px; margin-top: 8px; }
.moderacion-botones{ display: grid; gap: 6px; }

.moderacion-estado{
  justify-self: start;
  padding: 1px 8px;
  border: 1px solid var(--borde); border-radius: var(--r-pill);
  background: var(--superficie-2); color: var(--texto-tenue);
  font-size: 11px; line-height: 1.6; letter-spacing: .02em;
}
.moderacion-estado.es-1{ background: #eef6ef; border-color: #cfe3d2; color: var(--ok); }
.moderacion-estado.es-2{ background: #fff4f6; border-color: #f1cdd5; color: var(--vino); }

/* Más pequeños que `.btn-mini`: son dos (o tres) por foto y esto es un panel
   de mando, no una llamada a la acción. Aun así, 34 px de alto: se tocan de
   noche y con prisa. */
.moderacion-btn{
  min-height: 34px; padding: 6px 10px;
  font-size: 12.5px; letter-spacing: 0;
  background: var(--fondo); color: var(--tinta);
  border: 1px solid var(--borde-fuerte);
}
.moderacion-btn:hover:not(:disabled){ background: var(--superficie-2); }
.moderacion-bueno{ color: var(--ok); border-color: rgba(79,122,85,.45); }
.moderacion-bueno:hover:not(:disabled){ background: #eef6ef; }
.moderacion-malo{ color: var(--vino); border-color: rgba(156,36,58,.4); }
.moderacion-malo:hover:not(:disabled){ background: #fff4f6; }

/* =====================================================================
   V3.10 bis · Interruptor de selfies en el feed y chapa de «+3 y +3»
   ===================================================================== */

/* La fila de «Todo · Selfies · Bingo» con el interruptor a la derecha. */
.fila-subpestanas{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: nowrap;
}
.cabecera-feed .fila-subpestanas .subpestanas{ align-self: auto; flex: 0 1 auto; min-width: 0; }

/* V3.11 · En la MISMA línea: las pestañas aprietan su relleno para dejarle
   sitio al interruptor, y así la cabecera no gana otra fila de alto. */
.fila-subpestanas .subpestana{ padding: 8px 12px; }
@media (max-width: 360px){
  .fila-subpestanas .subpestana{ padding: 8px 9px; font-size: 13.5px; }
}

/* «Visibles / Ocultos»: pequeño, del tamaño de un chip. */
.fila-subpestanas .chip-selfies{ margin-left: auto; }
.chip-selfies{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 12px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-pill);
  background: var(--superficie, #fff); color: var(--texto-tenue);
  font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer; white-space: nowrap;
}
.chip-selfies .emoji{ font-size: 14px; }
.chip-selfies:hover{ border-color: var(--oro); }
/* Apagado = los selfies están escondidos: se ve que hay un filtro puesto. */
.chip-selfies.apagado{
  background: var(--vino); border-color: var(--vino); color: #fff7f3;
}
.chip-selfies.apagado .emoji{ filter: grayscale(1) brightness(2); }

/* La chapa de «si te lo confirma, +3 y +3». Media línea, bien visible. */
.chapa-confirmar{
  display: inline-flex; align-items: center; gap: 7px;
  margin: 10px auto 0; padding: 6px 12px;
  border-radius: var(--r-pill);
  background: #fff4f6; border: 1px solid var(--vino);
  color: var(--vino); font-size: 13.5px; font-weight: 600; line-height: 1.25;
  text-align: left;
}
.chapa-confirmar .emoji{ font-size: 15px; }
.por-validar-item .btn-mini{ white-space: normal; }

/* ---------------------------------------------------------------------
   V3.11 · Créditos, al final del perfil
   --------------------------------------------------------------------- */
.creditos{
  margin: 26px 0 6px; padding: 14px 8px 0;
  border-top: 1px solid var(--borde);
  text-align: center; font-size: 12px; line-height: 1.55; color: var(--texto-tenue);
}
.creditos p{ margin: 0; }
.creditos a{ color: var(--vino); text-decoration: none; border-bottom: 1px solid currentColor; }


/* ---------------------------------------------------------------------
   V3.12 · Después de la boda: recopilar fotos y clasificación final
   --------------------------------------------------------------------- */

/* La tarjeta de Google Fotos, arriba del feed. */
.recopilar{
  margin: 12px 16px 4px; padding: 14px 14px 12px;
  border: 1px solid var(--oro); border-radius: 16px;
  background: linear-gradient(135deg, #fffaf0 0%, #fff4f6 100%);
  box-shadow: 0 6px 20px rgba(156,36,58,.08);
}
.recopilar[hidden]{ display: none; }
.recopilar-cab{ display: flex; align-items: center; gap: 12px; }
.recopilar-emoji{ font-size: 30px; line-height: 1; }
.recopilar-txt{ min-width: 0; }
.recopilar-tit{ margin: 0; font-weight: 600; font-size: 15.5px; line-height: 1.25; color: var(--tinta); }
.recopilar-sub{ margin: 2px 0 0; font-size: 13px; color: var(--texto-tenue); }
.recopilar-btn{ display: flex; justify-content: center; margin-top: 12px; width: 100%; text-align: center; text-decoration: none; }
.recopilar-mas{ margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--tinta); }
.recopilar-mas summary{
  cursor: pointer; color: var(--vino); font-weight: 600; list-style: none;
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
}
.recopilar-mas summary::-webkit-details-marker{ display: none; }
.recopilar-mas summary::after{ content: "▾"; transition: transform .2s ease; }
.recopilar-mas[open] summary::after{ transform: rotate(180deg); }
.recopilar-mas p{ margin: 6px 0 0; }
.recopilar-mas .btn{ margin-top: 10px; color: var(--vino); border-color: var(--vino); background: #fff; }

/* El aviso de la pantalla Subir. */
.aviso-recopilar{
  margin: 0 0 14px; padding: 10px 12px;
  border-left: 3px solid var(--oro); border-radius: 10px;
  background: #fffaf0; font-size: 13.5px; line-height: 1.45; color: var(--tinta);
}
.aviso-recopilar p{ margin: 0; }
.aviso-recopilar p + p{ margin-top: 4px; }
.aviso-recopilar a{ color: var(--vino); font-weight: 600; }

/* Diez huecos: cinco por fila. */
.huecos.huecos--muchos{ grid-template-columns: repeat(5, 1fr); gap: 6px; }

/* «Subir» con aura: un halo dorado que late y una chispa. */
.barra-item--subir .icono{
  border-radius: 50%;
  animation: aura-subir 2.4s ease-in-out infinite;
}
.barra-item--subir::after{
  content: "✨"; position: absolute; top: 2px; right: calc(50% - 22px);
  font-size: 11px; line-height: 1; pointer-events: none;
}
@keyframes aura-subir{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(218,192,140,.0); background: transparent; }
  50%{ box-shadow: 0 0 0 7px rgba(218,192,140,.35); background: rgba(218,192,140,.28); }
}
@media (prefers-reduced-motion: reduce){
  .barra-item--subir .icono{ animation: none; box-shadow: 0 0 0 5px rgba(218,192,140,.35); background: rgba(218,192,140,.28); }
}

/* Clasificación final. */
.final-cabecera{ text-align: center; margin: 4px 0 14px; }
.final-titulo{ margin: 2px 0 6px; font-family: var(--f-display, Georgia, serif); font-size: 28px; font-weight: 500; color: var(--tinta); }
.podio{
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px;
  margin: 8px 0 14px;
}
.podio-puesto{
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: var(--tinta); min-width: 0;
}
.podio-medalla{ font-size: 26px; line-height: 1; }
.podio-1 .podio-medalla{ font-size: 32px; }
.podio-puesto .avatar{ border-radius: 50%; object-fit: cover; border: 2px solid var(--borde); }
.podio-1 .avatar{ border-color: #c9a227; box-shadow: 0 0 0 4px rgba(201,162,39,.18); }
.podio-nick{ max-width: 100%; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio-pts{ font-size: 12px; color: var(--vino); font-weight: 600; }
.podio-escalon{
  width: 100%; margin-top: 4px; border-radius: 10px 10px 0 0;
  background: var(--superficie-2, #f3efe8); color: var(--texto-tenue);
  font-weight: 700; font-size: 18px; text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.podio-1 .podio-escalon{ height: 64px; background: #f6ecd0; color: #9b7b17; }
.podio-2 .podio-escalon{ height: 46px; }
.podio-3 .podio-escalon{ height: 34px; background: #f3e3d4; color: #8a5f38; }
.final-tuyo{ text-align: center; margin: 0 0 6px; font-size: 14px; color: var(--tinta); }

.premios{ display: grid; gap: 8px; }
.premio{
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--oro); border-radius: 14px; background: #fffcf5;
  text-decoration: none; color: var(--tinta);
}
.premio-emoji{ font-size: 28px; line-height: 1; flex: none; }
.premio-txt{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.premio-titulo{ font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--vino); font-weight: 600; }
.premio-quien{ font-size: 16px; font-weight: 600; }
.premio-motivo{ font-size: 13px; color: var(--texto-tenue); }
.premio .avatar{ flex: none; border-radius: 50%; object-fit: cover; }

.curiosidades{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.curiosidades li{
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px;
  background: var(--superficie, #faf8f4); border-radius: 12px; font-size: 14px; line-height: 1.4;
}
.curiosidades .emoji{ flex: none; font-size: 17px; line-height: 1.2; }