/* ============================================================
   La Ñapa — hoja de estilos única
   Todo el sitio usa este archivo. Si cambias un color acá,
   cambia en todas las páginas.
   ============================================================ */

:root{
  /* --- Paleta v3 -----------------------------------------------
     Azul eléctrico como marca, cian como acento sobre oscuro,
     coral para el momento del dinero.
     Contrastes verificados con la fórmula WCAG; ver el manual.
     ------------------------------------------------------------ */
  --tinta:        #050B24;   /* fondo oscuro y texto principal */
  --tinta-suave:  #101A3A;   /* tarjetas y superficies sobre lo oscuro */
  --azul:         #040DBF;   /* acción sobre fondo claro */
  --azul-hover:  #131CD6;   /* el mismo azul, al pasar el mouse */
  --cian:         #33CCFF;   /* acento SOLO sobre fondo oscuro */
  --cian-clara:  #66D9FF;   /* cian al pasar el mouse */
  --coral:        #FF7A5C;   /* la plata, SOLO sobre fondo oscuro */
  --coral-hondo:  #A83A22;   /* la plata, sobre fondo claro */
  --confirmado:   #0D6048;   /* verde para pagos, sobre fondo claro */
  --hielo:        #F5F7FC;   /* fondo claro */
  --blanco:       #FFFFFF;
  --gris:         #4E5B75;   /* texto secundario sobre claro */
  --gris-claro:   #A9B6D0;   /* texto secundario sobre oscuro */
  --alerta:       #9B1C1C;
  --linea:        #DDE3F0;   /* separadores sobre claro */
  --linea-campo:  #7E8DB3;   /* borde de campos y botones: 3,31:1 sobre blanco */
  --linea-oscura: #1C2846;   /* separadores sobre oscuro */

  --radio:      14px;
  --ancho:      1060px;

  /* Pila de fuentes: si Outfit no carga, cae a una sans, nunca a serif */
  --fuente-titulo: Outfit,"Segoe UI","Trebuchet MS",Helvetica,Arial,sans-serif;
}

*{ box-sizing:border-box }

/* El atributo hidden tiene que ganar siempre. Sin esto, cualquier
   regla con display (por ejemplo .lista-ofertas{display:grid}) le
   gana y el elemento se queda a la vista aunque diga hidden. */
[hidden]{ display:none !important }
html{ scroll-behavior:smooth }

body{
  margin:0;
  background:var(--hielo);
  color:var(--tinta);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.display{
  font-family:var(--fuente-titulo);
  letter-spacing:-.025em;
  line-height:1.15;
  margin:0 0 14px;
}
h1{ font-size:clamp(30px,5.2vw,50px); font-weight:800 }
h2{ font-size:clamp(23px,3.4vw,32px); font-weight:700 }
h3{ font-size:19px; font-weight:700 }
p{ margin:0 0 14px }
a{ color:var(--azul); text-underline-offset:3px }

.contenedor{ max-width:var(--ancho); margin:0 auto; padding:0 22px }
.angosto{ max-width:680px }
.centrado{ text-align:center }
.silencio{ color:var(--gris) }
.pequeno{ font-size:14px }

/* ---------- Barra superior ---------- */
.barra{
  position:sticky; top:0; z-index:50;
  background:rgba(245,247,252,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--linea);
}
.barra .contenedor{
  display:flex; align-items:center; justify-content:space-between;
  height:54px; gap:16px;
}
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none }
.marca img{
  width:28px; height:28px; border-radius:8px; display:block;
  /* El cuadro del ícono tiene que leerse como una pieza aparte del
     fondo, no como parte de la barra. Un filo claro y una sombra
     corta bastan; sin esto, sobre la barra oscura solo se ve la tilde. */
  box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 2px 6px rgba(5,11,36,.35);
}
.marca span{
  font-family:var(--fuente-titulo); font-weight:800; font-size:17px;
  letter-spacing:-.03em; color:var(--tinta);
}
.barra nav{ display:flex; align-items:center; gap:8px }
.barra nav a.enlace{ font-size:14px; text-decoration:none; color:var(--gris); padding:6px 9px }

/* Los botones que van dentro de una barra son más compactos que los
   del cuerpo de la página: si no, la barra vuelve a crecer. */
.barra .boton, .barra-app .boton{
  padding:8px 16px; font-size:14.5px; border-radius:10px;
}
.barra nav a.enlace:hover{ color:var(--tinta) }
@media(max-width:640px){ .barra nav a.enlace{ display:none } }

/* "Entrar" en la barra de la portada.
   Va como enlace y no como botón para que no le compita al de abrir
   cuenta, pero a diferencia de los enlaces de secciones este NO se
   esconde en el celular: quien ya tiene cuenta tiene que poder
   entrar desde el teléfono, que es desde donde va a entrar casi
   todo el mundo. */
.barra nav a.entrar{
  font-size:14.5px; font-weight:600; color:var(--tinta);
  text-decoration:none; padding:8px 4px; white-space:nowrap;
}
.barra nav a.entrar:hover{ text-decoration:underline; text-underline-offset:4px }
.barra nav a.entrar:focus-visible{ outline:2px solid var(--azul); outline-offset:2px; border-radius:6px }

/* El contador de gente esperando.
   Discreto a propósito: es un dato, no un anuncio. El punto late para
   que se lea como algo vivo, y se queda quieto si la persona tiene
   activado "reducir movimiento" en su teléfono. */
.esperando{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14.5px; margin-top:18px; color:var(--gris);
}
.bloque.oscuro .esperando{ color:var(--gris-claro) }
.esperando .punto{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:#0D6048; box-shadow:0 0 0 3px rgba(13,96,72,.18);
  animation:latir 2.4s ease-in-out infinite;
}
.bloque.oscuro .esperando .punto{
  background:var(--cian); box-shadow:0 0 0 3px rgba(51,204,255,.22);
}
@keyframes latir{
  0%,100%{ transform:scale(1);   opacity:1 }
  50%    { transform:scale(.72); opacity:.55 }
}
@media (prefers-reduced-motion: reduce){ .esperando .punto{ animation:none } }

/* "¿Ya tienes cuenta?" debajo de los botones grandes de la portada. */
.ya-tengo{ font-size:14.5px; margin-top:16px }
.bloque.oscuro .ya-tengo{ color:var(--gris-claro) }
.ya-tengo a{ font-weight:600 }


/* ============================================================
   TEXTURA Y SEÑAS VISUALES
   ------------------------------------------------------------
   Lo de adentro se veía plano al lado de la portada: puro blanco
   sobre gris. Esto le da carácter sin volverlo ruidoso.

   La regla que me impuse: la textura de fondo usa NUESTRA onda,
   la del logo. Es tentador poner símbolos de control de videojuego
   —equis, círculos— pero eso nos haría ver como las cien
   aplicaciones de recompensas de las que nos estamos separando.
   La marca es una tienda de barrio que le echa a uno de más, no
   un arcade.
   ============================================================ */

/* La onda del logo, repetida y casi invisible. Da la sensación de
   material en vez de vacío. Va en el fondo, nunca encima del texto. */
.bloque.oscuro, .tapa-saldo, .barra-app, .bloque.electrico{
  position:relative;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='72' viewBox='0 0 120 72'%3E%3Cpath d='M-10 46 C 8 20, 32 20, 46 45 C 60 70, 84 70, 102 44' fill='none' stroke='%23FFFFFF' stroke-opacity='0.055' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:120px 72px;
}
.bloque.oscuro > *, .tapa-saldo > *, .barra-app > *, .bloque.electrico > *{ position:relative }

/* ---------- La ficha de cada marca ----------
   No es el logo del operador: es su color y su inicial en nuestra
   tipografía. Se reconoce igual de rápido y no usamos nada ajeno. */
.ficha-marca{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fuente-titulo); font-weight:800; font-size:19px;
  color:#fff; letter-spacing:-.02em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(5,11,36,.18);
}

/* ---------- Opciones con dibujo ---------- */
.opcion{ display:flex; align-items:center; gap:13px }
.opcion .texto{ flex:1; min-width:0 }
.opcion .texto b{ display:block }
.opcion .texto span{ display:block }
.opcion .marca-check{
  width:22px; height:22px; border-radius:50%; flex:none;
  border:1.5px solid var(--linea-campo); display:flex;
  align-items:center; justify-content:center; color:transparent;
}
.opcion.elegida .marca-check{
  background:var(--azul); border-color:var(--azul); color:#fff;
}
.opcion .marca-check svg{ width:13px; height:13px }

/* ---------- Iconos de los movimientos ---------- */
.icono-mov{
  width:36px; height:36px; border-radius:11px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.icono-mov svg{ width:18px; height:18px }
.icono-mov.entra{ background:#E4F2EC; color:var(--confirmado) }
.icono-mov.sale{  background:#FBECEA; color:var(--coral-hondo) }
.icono-mov.ajuste{ background:#EDF0F9; color:var(--gris) }

/* ---------- La cabecera de pedir recompensa ----------
   La pantalla arrancaba en frío, directo en un formulario. Es
   justo la pantalla donde la persona recibe algo: merece un
   momento, como lo tiene la de inicio. */
.tapa-premio{ background:var(--tinta); color:var(--hielo); padding:26px 0 30px }
.tapa-premio .rotulo{ font-size:14px; color:var(--gris-claro); margin-bottom:6px }
.tapa-premio .cifra{
  font-family:var(--fuente-titulo); font-weight:800; font-size:40px;
  letter-spacing:-.03em; line-height:1; color:var(--coral);
}
.tapa-premio .nota{ font-size:13.5px; color:var(--gris-claro); margin-top:10px }

/* ---------- Botones ----------
   REGLA DEL SISTEMA:
   · Sobre fondo CLARO  → .principal (azul lleno, texto blanco)
   · Sobre fondo OSCURO → .acento    (cian lleno, texto tinta)
   El cian sobre fondo claro se pierde: 1,75:1. Nunca ahí.
   El coral tampoco: 2,39:1. Sobre claro va --coral-hondo.
   ------------------------------------------------------------ */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--fuente-titulo); font-weight:700; font-size:15.5px;
  padding:12px 22px; border-radius:12px; border:none; cursor:pointer;
  text-decoration:none; transition:transform .06s ease, background .15s ease;
}
.boton:active{ transform:translateY(1px) }
.boton.principal{ background:var(--azul); color:var(--blanco) }
.boton.principal:hover{ background:var(--azul-hover) }
.boton.acento{ background:var(--cian); color:var(--tinta) }
.boton.acento:hover{ background:var(--cian-clara) }
.boton.oscuro{ background:var(--tinta); color:var(--hielo) }
.boton.oscuro:hover{ background:var(--tinta-suave) }
.boton.borde{ background:transparent; color:var(--tinta); border:1.5px solid var(--tinta) }
.boton.borde.claro{ color:var(--hielo); border-color:#5A63E0 }
.boton.borde.claro:hover{ background:var(--tinta-suave) }
.boton.ancho{ width:100%; padding:14px 22px }
.boton[disabled]{ opacity:.55; cursor:not-allowed }

/* ---------- Bloques ---------- */
.bloque{ padding:70px 0 }
.bloque.oscuro{ background:var(--tinta); color:var(--hielo) }
.bloque.oscuro h1,.bloque.oscuro h2,.bloque.oscuro h3{ color:var(--hielo) }
.bloque.oscuro .silencio{ color:var(--gris-claro) }
/* Bloque en azul eléctrico. Sobre este fondo: blanco 11,57 · cian 6,18 ·
   gris claro 5,67 · coral 4,51. Todos pasan. */
.bloque.electrico{ background:var(--azul); color:var(--blanco) }
.bloque.electrico h1,.bloque.electrico h2,.bloque.electrico h3{ color:var(--blanco) }
.bloque.electrico .silencio{ color:#C9D2FA }
.bloque.electrico .etiqueta{ color:var(--cian) }
.bloque.electrico a:not(.boton){ color:var(--cian) }
.bloque.electrico .boton.borde{ color:var(--blanco); border-color:#7C84EE }

/* :not(.boton) es obligatorio — si no, esta regla le gana por especificidad
   al color del botón y el texto queda cian sobre cian, invisible. */
.bloque.oscuro a:not(.boton){ color:var(--cian) }
.bloque.crema{ background:var(--hielo) }
.bloque.blanco{ background:var(--blanco) }

.etiqueta{
  display:inline-block; font-family:var(--fuente-titulo); font-weight:700; font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--cian);
  margin-bottom:14px;
}
.etiqueta.tinta{ color:var(--gris) }

/* ---------- Portada ---------- */
.portada{ padding:76px 0 66px }
.portada .frase{
  font-family:var(--fuente-titulo); font-weight:800; font-size:clamp(30px,5.4vw,52px);
  line-height:1.08; letter-spacing:-.03em; margin:0 0 20px; max-width:760px;
}
.portada .frase em{ font-style:normal; color:var(--cian) }
.portada .bajada{ font-size:18px; color:var(--gris-claro); max-width:560px; margin-bottom:28px }
.acciones{ display:flex; gap:12px; flex-wrap:wrap; align-items:center }

/* ---------- Tarjetas ---------- */
.rejilla{ display:grid; gap:16px }
.rejilla.dos{ grid-template-columns:repeat(2,1fr) }
.rejilla.tres{ grid-template-columns:repeat(3,1fr) }
.rejilla.cuatro{ grid-template-columns:repeat(4,1fr) }
@media(max-width:860px){ .rejilla.tres,.rejilla.cuatro{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ .rejilla.dos,.rejilla.tres,.rejilla.cuatro{ grid-template-columns:1fr } }

.tarjeta{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); padding:22px;
}
.bloque.oscuro .tarjeta{ background:var(--tinta-suave); border-color:var(--linea-oscura) }
.tarjeta .paso{
  width:32px; height:32px; border-radius:10px; background:var(--azul); color:var(--blanco);
  font-family:var(--fuente-titulo); font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.bloque.oscuro .tarjeta .paso{ background:var(--cian); color:var(--tinta) }
.tarjeta h3{ margin-bottom:6px }
.tarjeta p{ margin:0; font-size:14.5px; color:var(--gris) }
.bloque.oscuro .tarjeta p{ color:var(--gris-claro) }

/* ---------- Tarjeta de oferta (ejemplo real de la app) ---------- */
.oferta{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:16px; padding:20px; max-width:390px;
}
.oferta .cabeza{ display:flex; gap:13px; align-items:center; margin-bottom:14px }
.oferta .ico{
  width:48px; height:48px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,#C9D3EE,#96A4CC);
}
.oferta .titulo{ font-family:var(--fuente-titulo); font-weight:700; font-size:16px; line-height:1.2 }
.oferta .tarea{ font-size:13px; color:var(--gris) }
.oferta .plata{ font-family:var(--fuente-titulo); font-weight:800; font-size:29px; color:var(--coral-hondo); letter-spacing:-.02em }
.oferta .porhora{ font-size:13px; color:var(--gris); margin-top:-2px }
.oferta .datos{ border-top:1px dashed var(--linea); margin-top:14px; padding-top:12px; display:grid; gap:7px }
.oferta .dato{ display:flex; justify-content:space-between; font-size:13.5px }
.oferta .dato span:first-child{ color:var(--gris) }
.oferta .dato span:last-child{ font-weight:600 }
.oferta .reparto{
  margin-top:12px; background:#E8F3EF; border:1px solid #C9E2DA;
  border-radius:10px; padding:11px 13px; font-size:13px; color:#0D5241;
}
.oferta .reparto b{ color:var(--confirmado) }

/* ---------- Formularios ---------- */
.hoja{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:18px; padding:32px; max-width:440px; margin:0 auto;
}
.campo{ margin-bottom:16px }
.campo label{ display:block; font-size:14px; font-weight:600; margin-bottom:6px }
.campo input{
  width:100%; padding:12px 14px; font-size:16px; font-family:inherit;
  border:1.5px solid var(--linea-campo); border-radius:11px; background:var(--blanco); color:var(--tinta);
}
/* El anillo que aparece al pararse en un campo.
   Antes era azul oscuro a media opacidad y, sobre el gris del campo,
   se veía como una mancha turbia. Ahora el borde queda azul fuerte
   —que es lo que da el contraste y marca dónde estás— y el halo va
   en cian, que sobre blanco se lee limpio en vez de ensuciar. */
.campo input:focus{
  outline:none;
  border-color:var(--azul);
  background:var(--blanco);
  box-shadow:0 0 0 3px rgba(51,204,255,.55);
}
.campo.error input:focus{ box-shadow:0 0 0 3px rgba(200,60,45,.26) }

/* Para quien se mueve con el teclado: que se vea dónde está parado. */
.boton:focus-visible{ outline:3px solid var(--azul); outline-offset:2px }
.acepto input:focus-visible{ outline:2px solid var(--azul); outline-offset:2px }
.barra-app nav a:focus-visible,
.bloque.oscuro a:focus-visible{ outline:2px solid var(--cian); outline-offset:3px }

.campo .pista{ font-size:12.5px; color:var(--gris); margin-top:5px }
.campo .pista.bien{ color:#1B6B3A; font-weight:500 }
.campo .pista.mal{ color:var(--alerta) }
.campo.error input{ border-color:var(--alerta) }

/* ---------- El botón para ver la clave ----------
   OJO CON EL NOMBRE DE ESTAS CLASES. La primera versión de esto se
   llamaba ".ojo", y esa clase YA EXISTÍA en el proyecto con otro
   sentido: es la que pinta en rojo los avisos importantes de los
   textos legales y los números que hay que mirar en el panel. El
   choque sacó el recuadro rojo de la política de privacidad fuera
   de la pantalla. Por eso ahora se llaman "caja-clave" y
   "ver-clave", que no se parecen a nada más.

   El botón se mete dentro del campo, así que el texto necesita
   espacio a la derecha para no quedar debajo. El área que se puede
   tocar es de 38px: menos que eso, en un celular no se le pega. */
.campo .caja-clave{ position:relative; display:block }
.campo .caja-clave input{ padding-right:48px }
.ver-clave{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; padding:0; border:none; border-radius:9px;
  background:none; color:var(--gris); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ver-clave:hover{ color:var(--tinta); background:rgba(5,11,36,.06) }
.ver-clave:focus-visible{ outline:2px solid var(--azul); outline-offset:1px }
.ver-clave svg{ width:20px; height:20px }
.campo .mensaje-error{ font-size:13px; color:var(--alerta); margin-top:5px; display:none }
.campo.error .mensaje-error{ display:block }

.acepto{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--gris); margin-bottom:18px }
.acepto input{ margin-top:3px; width:17px; height:17px; flex:none; accent-color:var(--azul) }

.aviso{ border-radius:12px; padding:13px 15px; font-size:14px; margin-bottom:16px; display:none }
.aviso.visible{ display:block }
.aviso.malo{ background:#FBECEA; border:1px solid #EDD0CB; color:#8E1B14 }
.aviso.bueno{ background:#E8F3EF; border:1px solid #C9E2DA; color:#0D5241 }

/* ---------- Preguntas ---------- */
details{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:12px; padding:16px 18px; margin-bottom:10px;
}
details summary{ font-family:var(--fuente-titulo); font-weight:700; font-size:16px; cursor:pointer; list-style:none }
details summary::-webkit-details-marker{ display:none }
details summary::after{ content:"+"; float:right; color:var(--azul); font-weight:600 }
details[open] summary::after{ content:"–" }
details p{ margin:12px 0 0; font-size:14.5px; color:#2B3550 }

/* ---------- Texto legal ---------- */
.legal{ max-width:720px; margin:0 auto }
.legal h2{ font-size:21px; margin:34px 0 10px }
.legal h3{ font-size:16px; margin:22px 0 6px }
.legal p,.legal li{ font-size:15px; color:#26314D }
.legal ul{ padding-left:20px } .legal li{ margin-bottom:6px }
.legal .fecha{ font-size:13.5px; color:var(--gris) }

/* ---------- Pie ---------- */
.pie{ background:var(--tinta); color:var(--gris-claro); padding:44px 0 34px; font-size:14px }
.pie a{ color:#C6D0E8; text-decoration:none; display:block; margin-bottom:7px }
.pie a:hover{ color:var(--cian) }
.pie .cols{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px; margin-bottom:28px }
@media(max-width:640px){ .pie .cols{ grid-template-columns:1fr } }
.pie h4{ color:var(--hielo); font-size:13px; text-transform:uppercase; letter-spacing:.09em; margin:0 0 12px }
.pie .fino{ border-top:1px solid var(--linea-oscura); padding-top:18px; font-size:12.5px; color:#7C89AE }

/* ---------- Pasos en línea (reemplazan la rejilla de cuatro tarjetas iguales) ---------- */
.pasos{ max-width:720px; margin:26px 0 0 }
.paso-linea{ display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--linea) }
.paso-linea:first-child{ border-top:none; padding-top:0 }
.paso-linea .n{
  flex:none; width:30px; height:30px; border-radius:9px; background:var(--azul); color:#fff;
  font-family:var(--fuente-titulo); font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.paso-linea .t{ font-family:var(--fuente-titulo); font-weight:700; font-size:17px; margin-bottom:3px }
.paso-linea p{ margin:0; font-size:15px; color:#2E3A56 }

/* ---------- Recuadros dentro de los textos legales ---------- */
.nota-legal{
  background:#EAF0FE; border:1px solid #C6D4F5; border-radius:12px;
  padding:14px 16px; margin:16px 0; font-size:14.5px; color:#16276B;
}
.nota-legal b{ color:#0B1747 }
.nota-legal.ojo{ background:#FBECEA; border-color:#EDD0CB; color:#8E1B14 }
.nota-legal.ojo b{ color:#6E1810 }
.legal .formal{ font-size:13px; color:var(--gris); margin:-6px 0 18px }

/* ============================================================
   Pantallas de adentro (con sesión iniciada)
   ============================================================ */

/* Mientras se revisa la sesión no se muestra nada, para que no
   alcance a verse el contenido antes de saber si puede estar acá. */
.protegido{ visibility:hidden }
.protegido.listo{ visibility:visible }

.barra-app{
  background:var(--tinta); color:var(--hielo);
  position:sticky; top:0; z-index:50;
}
.barra-app .contenedor{
  display:flex; align-items:center; justify-content:space-between;
  height:54px; gap:16px;
}
.barra-app .marca span{ color:var(--hielo) }
.barra-app .marca img{
  box-shadow:0 0 0 1px rgba(51,204,255,.30), 0 2px 8px rgba(0,0,0,.45);
}
.barra-app nav{ display:flex; align-items:center; gap:13px }
.barra-app nav a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--gris-claro); font-size:13.5px; text-decoration:none;
  white-space:nowrap;
}
.barra-app nav a:hover{ color:var(--cian) }

/* Los dibujitos de la barra van dentro del enlace y toman su color,
   así que cambian solos al pasar el mouse. Sin archivos aparte: si la
   página cargó, están. */
.barra-app nav a svg{ width:16px; height:16px; flex:none }

/* En pantallas angostas hay que elegir. Se guarda la palabra "la ñapa"
   —el dibujo de la marca se queda— y se aprieta un poco la barra, que
   es preferible a que los enlaces se salgan o se amontonen. */
@media(max-width:560px){
  .barra-app .marca span{ display:none }
  .barra-app nav{ gap:9px }
  .barra-app nav a{ font-size:12.5px; gap:5px }
  .barra-app nav a svg{ width:15px; height:15px }
}
@media(max-width:360px){
  .barra-app nav{ gap:7px }
  .barra-app nav a{ font-size:12px }
}

.tapa-saldo{ background:var(--tinta); color:var(--hielo); padding:22px 0 36px }
.tapa-saldo .hola{ font-size:14.5px; color:var(--gris-claro); margin-bottom:4px }
.tapa-saldo .cifra{
  font-family:var(--fuente-titulo); font-weight:800; font-size:44px;
  letter-spacing:-.03em; line-height:1; color:var(--coral);
}
.tapa-saldo .falta{ font-size:13.5px; color:var(--gris-claro); margin-top:8px }

/* El recuadro punteado del muro vacío.
   Tenía un margen negativo pensado para la pantalla ancha, donde el
   título y su explicación caben en una sola línea. En el celular esa
   explicación se pasa a dos líneas, y el margen negativo terminaba
   montando el recuadro encima del texto. Ahora el aire se pone y se
   quita según el ancho, no a la fuerza. */
.hueco{
  border:2px dashed var(--linea); border-radius:16px;
  padding:40px 26px; text-align:center; background:var(--blanco);
  margin-top:10px;
}
.hueco .marbete{
  display:inline-block; font-family:var(--fuente-titulo); font-weight:700;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gris); border:1px solid var(--linea); border-radius:99px;
  padding:4px 11px; margin-bottom:14px;
}
.hueco h3{ margin-bottom:8px }
.hueco p{ max-width:440px; margin:0 auto 6px; font-size:14.5px; color:var(--gris) }

.fila{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--linea);
}
.fila:last-child{ border-bottom:none }
.fila .que{ font-size:13px; color:var(--gris) }
.fila .valor{ font-weight:600; font-size:15px }
.fila .accion{ font-size:14px; color:var(--azul); text-decoration:none; white-space:nowrap }
.fila .accion.peligro{ color:var(--alerta) }

/* ============================================================
   M2 — el muro de ofertas
   ============================================================ */
/* minmax(0,1fr) y el min-width:0 de abajo son lo que deja que el
   nombre largo de una oferta se corte con puntos suspensivos. Sin
   eso, en pantallas de 320px la fila se sale y aparece esa barra
   horizontal fea que obliga a arrastrar la pantalla de lado. */
.lista-ofertas{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:6px }

.fila-oferta{
  min-width:0;
  display:flex; gap:14px; align-items:center;
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:14px; padding:15px 17px;
  text-decoration:none; color:inherit;
  transition:border-color .12s ease, transform .06s ease;
}
.fila-oferta:hover{ border-color:#B9C4DE }
.fila-oferta:active{ transform:translateY(1px) }
.fila-oferta .ico{
  width:46px; height:46px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,#C9D3EE,#96A4CC);
  background-size:cover; background-position:center;
}
.fila-oferta .medio{ flex:1; min-width:0 }
.fila-oferta .nombre{
  font-family:var(--fuente-titulo); font-weight:700; font-size:16px;
  line-height:1.2; margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fila-oferta .que{ font-size:13px; color:var(--gris);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fila-oferta .datos{ font-size:12.5px; color:var(--gris); margin-top:4px }
/* Era var(--noche), que NUNCA se definió: el tiempo real y el "62 de
   cada 100" salían del mismo gris que el resto y se perdía justo el
   dato por el que existe este producto. */
.fila-oferta .datos b{ color:var(--tinta); font-weight:600 }
.fila-oferta .derecha{ text-align:right; flex:none }
.fila-oferta .cuanto{
  font-family:var(--fuente-titulo); font-weight:800; font-size:19px;
  color:var(--coral-hondo); letter-spacing:-.02em;
}
.fila-oferta .porhora{ font-size:11.5px; color:var(--gris) }

.orden{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:6px 12px; flex-wrap:wrap; margin-bottom:16px;
}
.orden .titulo{ font-family:var(--fuente-titulo); font-weight:700; font-size:19px;
  margin:0; letter-spacing:-.02em; line-height:1.3 }
.orden .como{ font-size:13px; color:var(--gris); line-height:1.45 }

/* En el celular la explicación se va a dos líneas y queda pegada a lo
   que sigue. Ahí necesita más aire debajo, no el mismo de la pantalla
   ancha. */
@media(max-width:640px){
  .orden{ margin-bottom:22px }
  .hueco{ margin-top:0 }
}

.cargando{ color:var(--gris); font-size:14.5px; padding:22px 0 }

/* ---------- Detalle de una oferta ---------- */
/* Se llamaba .detalle, y esa clase también la usa el panel para una
   línea de texto. Renombrada para que no se pisen, igual que pasó
   con .ojo. */
.hoja-oferta{ max-width:520px; margin:0 auto }
.hoja-oferta .cabeza{ display:flex; gap:16px; align-items:center; margin-bottom:20px }
.hoja-oferta .ico{
  width:64px; height:64px; border-radius:16px; flex:none;
  background:linear-gradient(135deg,#C9D3EE,#96A4CC); background-size:cover;
}
.hoja-oferta .cifra{
  font-family:var(--fuente-titulo); font-weight:800; font-size:44px;
  letter-spacing:-.03em; line-height:1; color:var(--coral-hondo);
}
.hoja-oferta .porhora{ font-size:14px; color:var(--gris); margin-top:4px }

.hechos{ margin:22px 0; border-top:1px solid var(--linea) }
.hecho{ display:flex; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--linea); font-size:14.5px }
.hecho .nombre{ color:var(--gris) }
.hecho .valor{ font-weight:600; text-align:right }
.hecho .valor small{ display:block; font-weight:400; font-size:12px; color:var(--gris) }

.reparto-grande{
  background:#E8F3EF; border:1px solid #C9E2DA; border-radius:12px;
  padding:15px 17px; font-size:14px; color:#0D5241; margin-bottom:20px;
}
.reparto-grande b{ color:var(--confirmado) }

/* ---------- Movimientos ---------- */
.movimiento{
  display:flex; justify-content:space-between; gap:13px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--linea);
}
.movimiento .concepto{ font-weight:600; font-size:14.5px }
.movimiento .cuando{ font-size:12.5px; color:var(--gris) }
.movimiento .monto{ font-family:var(--fuente-titulo); font-weight:700; font-size:16px; white-space:nowrap }
.movimiento .monto.mas{ color:var(--confirmado) }
.movimiento .monto.menos{ color:var(--alerta) }

/* ============================================================
   M5 — pedir la recompensa
   ============================================================ */
.opciones{ display:grid; grid-template-columns:1fr 1fr; gap:9px }
@media(max-width:460px){ .opciones{ grid-template-columns:1fr } }

/* Los montos, como fichas. Los que no alcanzan se ven apagados en
   vez de desaparecer: así la persona entiende que existen y cuánto
   le falta, en vez de creer que no hay más opciones. */
.montos{ display:flex; flex-wrap:wrap; gap:9px }
.monto-opcion{
  font-family:var(--fuente-titulo); font-weight:700; font-size:15px;
  padding:11px 17px; border-radius:11px; cursor:pointer;
  background:var(--blanco); border:1.5px solid var(--linea-campo);
  color:var(--tinta);
}
.monto-opcion:hover:not([disabled]){ border-color:var(--azul) }
.monto-opcion.elegida{
  border-color:var(--azul); background:var(--azul); color:var(--blanco);
  box-shadow:0 0 0 3px rgba(51,204,255,.45);
}
.monto-opcion[disabled]{ opacity:.45; cursor:not-allowed }
.monto-opcion:focus-visible{ outline:2px solid var(--azul); outline-offset:2px }

.opcion{
  text-align:left; font-family:inherit; cursor:pointer;
  background:var(--blanco); border:1.5px solid var(--linea-campo);
  border-radius:11px; padding:11px 13px; color:var(--tinta);
  transition:border-color .12s ease, background .12s ease;
}
.opcion b{ display:block; font-family:var(--fuente-titulo); font-size:14.5px; font-weight:700 }
.opcion span{ display:block; font-size:12px; color:var(--gris); margin-top:1px; line-height:1.35 }
.opcion:hover{ border-color:#B9C4DE }
.opcion.elegida{ border-color:var(--azul); background:#EAF0FE }
.opcion.elegida b{ color:var(--azul) }

.retiro-fila{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--linea);
}
.retiro-fila .que{ font-weight:600; font-size:14.5px }
.retiro-fila .cuando{ font-size:12.5px; color:var(--gris) }
.retiro-fila .monto{ font-family:var(--fuente-titulo); font-weight:700; font-size:15.5px; white-space:nowrap }

.marca-estado{
  display:inline-block; font-size:11.5px; font-weight:600;
  padding:2px 8px; border-radius:99px; margin-left:7px; vertical-align:1px;
}
.marca-estado.pedido      { background:#EAF0FE; color:#16276B }
.marca-estado.en_revision { background:#FDF3E7; color:#7A4A12 }
.marca-estado.entregado   { background:#E8F3EF; color:#0D5241 }
.marca-estado.rechazado   { background:#FBECEA; color:#8E1B14 }

/* ============================================================
   M0 — el panel nuestro
   ============================================================ */
.tablero{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:11px; margin-top:18px;
}
.dato-caja{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:12px; padding:14px 15px;
}
.dato-caja .rotulo{ font-size:12px; color:var(--gris); line-height:1.3 }
.dato-caja .valor{
  font-family:var(--fuente-titulo); font-weight:800; font-size:24px;
  letter-spacing:-.02em; margin-top:5px;
}
.dato-caja.plata .valor{ color:var(--coral-hondo) }
.dato-caja.ojo   { border-color:#EDD0CB; background:#FBECEA }
.dato-caja.ojo .valor{ color:var(--alerta) }

.tarea-fila{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:12px; padding:14px 16px; margin-bottom:10px;
}
.tarea-fila .arriba{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; flex-wrap:wrap;
}
.tarea-fila .quien{ font-weight:600; font-size:15px }
.tarea-fila .detalle{ font-size:13px; color:var(--gris); margin-top:2px }
.tarea-fila .monto{
  font-family:var(--fuente-titulo); font-weight:800; font-size:19px;
  color:var(--coral-hondo); white-space:nowrap;
}
.tarea-fila .acciones-fila{
  display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center;
}
.tarea-fila input{
  flex:1; min-width:150px; padding:9px 11px; font-size:13.5px; font-family:inherit;
  border:1.5px solid var(--linea); border-radius:9px; background:var(--hielo);
}
.boton.chico{ padding:9px 14px; font-size:13.5px; border-radius:9px }
.boton.peligro{ background:var(--alerta); color:#fff }

.linea-simple{
  display:flex; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--linea); font-size:13.5px;
}
.linea-simple .cuando{ color:var(--gris); white-space:nowrap; font-size:12.5px }
.linea-simple .tipo{ font-weight:600 }
.linea-simple.mala .tipo{ color:var(--alerta) }
.vacio-chico{ color:var(--gris); font-size:14px; padding:16px 0 }