/* EVOX SIGNALS — sistema visual
 *
 * Pensado para el celular primero: la mayoría va a entrar desde el teléfono, y
 * el analista publica desde ahí. Barra de pestañas abajo, al alcance del pulgar.
 *
 * Paleta del logo: verde lima sobre negro. El lima se reserva para lo que
 * importa (acciones, aciertos, marca); si se usa en todo, deja de resaltar.
 */

:root {
  --ground: #000000;
  --surface: #0C100E;
  --surface-2: #131916;
  --line: #1E2622;
  --line-fuerte: #2C3832;
  --ink: #E8EFE9;
  --muted: #7E8C85;
  --muted-2: #55605A;

  --lima: #AEFA09;
  --lima-tenue: rgba(174, 250, 9, 0.10);
  --lima-borde: rgba(174, 250, 9, 0.35);
  --sobre-lima: #06090A;

  --verde: #35D97A; /* ganancia */
  --rojo: #FF5B5B; /* pérdida */
  --ambar: #FFB020; /* espera, aviso */
  --azul: #4DA6FF; /* informativo */

  --radio: 4px;
  --barra: 4.6rem; /* alto de la barra de pestañas */

  --s0: 0.78rem;
  --s1: 0.88rem;
  --s2: 1rem;
  --s3: 1.15rem;
  --s4: 1.5rem;
  --s5: 2rem;

  --display: Orbitron, ui-sans-serif, system-ui, sans-serif;
  --texto: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--texto);
  font-size: var(--s2);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Fondo de marca detrás de todo.
 *
 * Va como capa fija con `position: fixed` y NO con `background-attachment:
 * fixed`: en iPhone esa propiedad se siente temblorosa al hacer scroll. Así el
 * contenido se desliza encima y el fondo se queda quieto, fluido.
 *
 * Encima lleva un velo negro para que los destellos azules de las orillas no
 * compitan con el texto. Las tarjetas se quedan OPACAS a propósito: la app es
 * números, y números sobre una textura se vuelven difíciles de leer.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('/app/fondo.jpg') center center / cover no-repeat;
  opacity: 0.45;
  pointer-events: none;
}

/* Deja aire para la barra de pestañas y para la zona segura del iPhone. */
#vista {
  padding: 0 1rem calc(var(--barra) + env(safe-area-inset-bottom, 0px) + 1.5rem);
  max-width: 34rem;
  margin: 0 auto;
  min-height: 100%;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-family: var(--display); font-weight: 800; font-size: var(--s5); line-height: 1.05; }
h2 { font-family: var(--display); font-weight: 600; font-size: var(--s4); line-height: 1.15; }
h3 { font-weight: 600; font-size: var(--s3); }
p { margin: 0; }
a { color: var(--lima); text-decoration: none; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.verde { color: var(--verde); }
.rojo { color: var(--rojo); }
.lima { color: var(--lima); }
.ambar { color: var(--ambar); }
.centro { text-align: center; }
.oculto { display: none !important; }

.rotulo {
  font-family: var(--mono);
  font-size: var(--s0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ── Encabezado de pantalla ─────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(var(--ground) 72%, transparent);
  padding: calc(env(safe-area-inset-top, 0px) + 1.2rem) 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cabecera h1 { font-size: var(--s4); }
.cabecera .der { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }

.atras {
  background: none; border: 0; color: var(--muted); font-size: var(--s4);
  cursor: pointer; padding: 0 0.3rem 0 0; line-height: 1;
}
.atras:hover { color: var(--ink); }

/* ── Barra de pestañas ──────────────────────────────────────────────── */

nav.pestanas {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  background: rgba(6, 9, 8, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
nav.pestanas a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem;
  height: var(--barra);
  color: var(--muted-2);
  font-size: 0.66rem;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.15s;
}
nav.pestanas a svg { width: 1.32rem; height: 1.32rem; }
nav.pestanas a.activa { color: var(--lima); }
nav.pestanas a:active { background: var(--surface); }
nav.pestanas a span { white-space: nowrap; }

/* Al analista le toca una pestaña más (Publicar) y son cinco. En un celular
   angosto "ANALISTAS" ya no cabe a ese ancho, así que la tipografía baja un
   punto solo en ese caso — al usuario normal no le cambia nada. */
nav.pestanas.cinco a { font-size: 0.6rem; letter-spacing: 0.03em; }
nav.pestanas.cinco a svg { width: 1.22rem; height: 1.22rem; }

/* ── Tarjetas ───────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 1rem;
}
.tarjeta + .tarjeta { margin-top: 0.7rem; }

.lista { display: flex; flex-direction: column; gap: 0.7rem; }

/* ── Tarjeta de señal ───────────────────────────────────────────────── */

.senal { display: block; color: inherit; position: relative; overflow: hidden; }
.senal .fila1 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }

.avatar {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: none;
  background: var(--surface-2); border: 1px solid var(--line);
  object-fit: cover;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 0.7rem; color: var(--muted);
}
.senal .quien { font-size: var(--s1); font-weight: 600; }
.senal .cuando { font-size: var(--s0); color: var(--muted-2); margin-left: auto; white-space: nowrap; }

.par { display: flex; align-items: baseline; gap: 0.55rem; margin-bottom: 0.8rem; }
.par .activo { font-family: var(--display); font-weight: 600; font-size: var(--s3); letter-spacing: 0.02em; }

.dir {
  font-family: var(--mono); font-size: var(--s0); font-weight: 600;
  padding: 0.1rem 0.45rem; border-radius: 2px; letter-spacing: 0.06em;
}
.dir.long { background: rgba(53, 217, 122, 0.14); color: var(--verde); }
.dir.short { background: rgba(255, 91, 91, 0.14); color: var(--rojo); }

.niveles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.niveles > div { background: var(--surface-2); border-radius: 3px; padding: 0.5rem 0.55rem; }
.niveles .et { display: block; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.15rem; }
.niveles .va { font-size: var(--s1); }
.niveles .obj .va { color: var(--verde); }
.niveles .stop .va { color: var(--rojo); }

/* Señal tapada: se ve que hay algo, no se ve qué. */
.tapada .velo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; padding: 1.5rem 1rem;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, transparent 6px, transparent 12px);
  border: 1px dashed var(--line-fuerte); border-radius: 3px;
  text-align: center;
}
.tapada .velo .candado { font-size: 1.3rem; }
.tapada .velo b { font-family: var(--mono); color: var(--ambar); font-size: var(--s1); }
.tapada .velo span { font-size: var(--s0); color: var(--muted); }

/* Tarjeta de señal compacta.
 *
 * Todo lo de este bloque está acotado a `.senal` A PROPÓSITO: aprieta la
 * tarjeta de señal y nada más. Las demás tarjetas de la app (perfiles, cuenta,
 * ser analista) se quedan igual. Si algún día hay que regresarlo, se borra este
 * bloque completo y no queda rastro.
 */
.tarjeta.senal { padding: 0.65rem 0.75rem; }
.senal .fila1 { gap: 0.5rem; margin-bottom: 0.45rem; }
.senal .avatar { width: 1.5rem; height: 1.5rem; font-size: 0.58rem; }
.senal .quien { font-size: 0.82rem; }
.senal .cuando { font-size: 0.7rem; }
.senal .par { gap: 0.45rem; margin-bottom: 0.45rem; }
.senal .par .activo { font-size: 1rem; }
.senal .dir { font-size: 0.66rem; padding: 0.08rem 0.4rem; }
/* El rango de entrada iba partido en dos renglones y era lo que más alto
   ocupaba de toda la tarjeta (75 de 162 px). En una sola línea, con la casilla
   de entrada más ancha que las otras dos porque lleva dos números. */
.senal .niveles { gap: 0.3rem; grid-template-columns: 1.45fr 1fr 1fr; }
.senal .niveles > div { padding: 0.3rem 0.4rem; }
.senal .niveles .et { font-size: 0.55rem; margin-bottom: 0.05rem; }
.senal .niveles .va { font-size: 0.78rem; line-height: 1.2; white-space: nowrap; }
.senal .niveles .ent .va { font-size: 0.7rem; }
.senal .niveles .raya { opacity: 0.45; margin: 0 0.12em; }
.senal .chip { font-size: 0.62rem; padding: 0.1rem 0.4rem; }

/* La tapada no tiene nada que enseñar más que su activo y cuánto falta: en una
   sola línea en vez de un bloque centrado de tres renglones. */
.tapada .velo { flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; text-align: left; }
.tapada .velo .candado { font-size: 0.9rem; }
.tapada .velo b { font-size: 0.78rem; }
.tapada .velo span:last-child { display: none; }

/* ── Insignias de estado ────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.15rem 0.45rem; border-radius: 2px;
  border: 1px solid var(--line-fuerte); color: var(--muted);
  white-space: nowrap;
}
.chip.abierta { color: var(--azul); border-color: rgba(77, 166, 255, 0.4); }
.chip.gano { color: var(--verde); border-color: rgba(53, 217, 122, 0.4); }
.chip.perdio { color: var(--rojo); border-color: rgba(255, 91, 91, 0.4); }
.chip.nivel { color: var(--lima); border-color: var(--lima-borde); }
/* Señal de mentira. Ámbar y no rojo: es un aviso, no un error. */
.chip.demo { color: var(--ambar); border-color: rgba(255, 176, 32, 0.45); background: rgba(255, 176, 32, 0.08); }
.chip.solido { background: var(--lima); color: var(--sobre-lima); border-color: var(--lima); }

/* ── Botones y formularios ──────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--lima); color: var(--sobre-lima);
  border: 0; border-radius: var(--radio);
  padding: 0.85rem 1.3rem;
  font-family: var(--display); font-weight: 600; font-size: var(--s1);
  letter-spacing: 0.03em; cursor: pointer; width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn.fantasma { background: transparent; color: var(--ink); border: 1px solid var(--line-fuerte); }
.btn.chico { padding: 0.55rem 0.9rem; font-size: var(--s0); width: auto; }
.btn.peligro { background: transparent; color: var(--rojo); border: 1px solid rgba(255, 91, 91, 0.4); }

label { display: block; margin-bottom: 1rem; }
label .txt { display: block; font-size: var(--s1); margin-bottom: 0.35rem; font-weight: 500; }
label .ayuda { display: block; font-size: var(--s0); color: var(--muted); margin-bottom: 0.45rem; line-height: 1.45; }

input, select, textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radio);
  padding: 0.75rem 0.85rem;
  font-family: var(--texto);
  font-size: var(--s2); /* 16px o más: menos y iOS hace zoom al enfocar */
}
input.mono { font-family: var(--mono); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--lima); outline-offset: 1px; border-color: var(--lima);
}
textarea { resize: vertical; min-height: 5.5rem; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.opciones { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.opciones button {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 0.45rem 0.85rem; font-size: var(--s1);
  font-family: var(--texto); cursor: pointer;
}
.opciones button.puesta { background: var(--lima-tenue); border-color: var(--lima-borde); color: var(--lima); }

.par-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }

/* ── Avisos ─────────────────────────────────────────────────────────── */

.aviso {
  border-radius: var(--radio); padding: 0.85rem 1rem;
  font-size: var(--s1); line-height: 1.5;
  border: 1px solid var(--line-fuerte); background: var(--surface);
}
.aviso.malo { border-color: rgba(255, 91, 91, 0.45); background: rgba(255, 91, 91, 0.07); color: #FFC9C9; }
.aviso.bueno { border-color: var(--lima-borde); background: var(--lima-tenue); }
.aviso.espera { border-color: rgba(255, 176, 32, 0.4); background: rgba(255, 176, 32, 0.07); }

.vacio { text-align: center; padding: 3.5rem 1.5rem; color: var(--muted); }
.vacio .icono { font-size: 2.2rem; margin-bottom: 0.7rem; opacity: 0.5; }
.vacio p { font-size: var(--s1); line-height: 1.6; }

/* ── Estadísticas ───────────────────────────────────────────────────── */

.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.cifra { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio); padding: 0.8rem 0.6rem; text-align: center; }
.cifra .n { font-family: var(--mono); font-size: var(--s4); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cifra .et { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-top: 0.25rem; }

.barra-acierto { height: 5px; border-radius: 3px; background: rgba(255, 91, 91, 0.35); overflow: hidden; margin-top: 0.8rem; }
.barra-acierto > i { display: block; height: 100%; background: var(--verde); }

/* ── Fila de analista (rankings) ────────────────────────────────────── */

.analista-fila { display: flex; align-items: center; gap: 0.75rem; }
.analista-fila .pos {
  font-family: var(--mono); font-size: var(--s1); color: var(--muted-2);
  width: 1.5rem; text-align: right; flex: none;
}
.analista-fila .avatar { width: 2.4rem; height: 2.4rem; }
.analista-fila .quien { flex: 1; min-width: 0; }
.analista-fila .quien b { display: block; font-size: var(--s2); font-weight: 600; }
.analista-fila .quien span { font-size: var(--s0); color: var(--muted); }
.analista-fila .dato { text-align: right; flex: none; }
.analista-fila .dato b { display: block; font-family: var(--mono); font-size: var(--s3); }
.analista-fila .dato span { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }

/* Fila de ranking, compacta.
 *
 * Dos analistas al mismo % de acierto pueden ser cosas opuestas — uno gana 12%
 * y pierde 3%, el otro al revés — así que el detalle tiene que estar. Pero
 * tiene que caber: con la rejilla de cuatro casillas etiquetadas la fila medía
 * 197 px y solo cabían dos analistas por pantalla.
 *
 * Todo lo de este bloque está acotado a `.analista-fila-rica`: no toca ninguna
 * otra tarjeta de la app. Si hay que regresarlo, se borra completo.
 */
.tarjeta.analista-fila-rica { display: block; color: inherit; padding: 0.6rem 0.7rem; }
.analista-fila-rica .arriba { display: flex; align-items: center; gap: 0.55rem; }
.analista-fila-rica .pos {
  font-family: var(--mono); font-size: var(--s1); color: var(--muted-2);
  width: 1.35rem; text-align: center; flex: none;
}
.analista-fila-rica .avatar { width: 1.9rem; height: 1.9rem; font-size: 0.62rem; }
.analista-fila-rica .quien { flex: 1; min-width: 0; }
.analista-fila-rica .quien b {
  display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.analista-fila-rica .quien span { font-size: 0.7rem; color: var(--muted-2); }
.analista-fila-rica .dato { text-align: right; flex: none; line-height: 1.1; }
.analista-fila-rica .dato b { display: block; font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.analista-fila-rica .dato span { font-size: 0.55rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-2); }
.analista-fila-rica .barra-acierto { margin-top: 0.45rem; height: 3px; }

/* Las cifras en UN renglón, separadas por puntos, en vez de cuatro casillas
   etiquetadas más un pie de racha. */
.tira-cifras {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45rem;
  margin-top: 0.4rem;
  font-family: var(--mono); font-size: 0.68rem; font-variant-numeric: tabular-nums;
  color: var(--muted-2);
}
.tira-cifras i { font-style: normal; }
.tira-cifras b { font-weight: 600; }
.tira-cifras .sep-punto { opacity: 0.35; }

/* Llamado para reclutar analistas. Va donde se ve, no escondido en la cuenta:
   sin analistas no hay producto. */
.reclutar {
  display: block; color: inherit;
  background: var(--lima-tenue); border: 1px solid var(--lima-borde);
  border-radius: var(--radio); padding: 1rem 1.1rem;
}
.reclutar b { display: block; font-size: var(--s2); margin-bottom: 0.2rem; }
.reclutar span { font-size: var(--s1); color: var(--muted); line-height: 1.5; }
.reclutar .flecha { color: var(--lima); font-weight: 600; }

/* Pasos numerados (página de reclutamiento). La numeración va porque el
   contenido SÍ es una secuencia: solicitas, publicas, cobras, subes. */
.pasos { display: flex; flex-direction: column; gap: 1.1rem; }
.paso { display: flex; gap: 0.9rem; align-items: flex-start; }
.paso .num {
  width: 1.7rem; height: 1.7rem; flex: none; border-radius: 50%;
  border: 1px solid var(--lima-borde); color: var(--lima);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--s0); font-weight: 600;
}
.paso b { display: block; font-size: var(--s2); margin-bottom: 0.15rem; }

/* Carrusel horizontal de las vitrinas de portada. */
.vitrina { margin-bottom: 1.8rem; }
.vitrina > header { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.7rem; }
.tira { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.4rem; scroll-snap-type: x mandatory; }
.tira::-webkit-scrollbar { display: none; }
.tira > * { scroll-snap-align: start; flex: none; width: 10.5rem; }

.mini { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio); padding: 0.9rem; text-align: center; color: inherit; }
.mini .avatar { width: 3rem; height: 3rem; margin: 0 auto 0.5rem; }
.mini b { display: block; font-size: var(--s1); font-weight: 600; margin-bottom: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .n { font-family: var(--mono); font-size: var(--s3); }

/* ── Filtros ────────────────────────────────────────────────────────── */

.filtros { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.2rem; margin-bottom: 1rem; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button {
  flex: none; background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 0.35rem 0.8rem; font-size: var(--s1);
  font-family: var(--texto); cursor: pointer; white-space: nowrap;
}
.filtros button.puesta { background: var(--lima-tenue); border-color: var(--lima-borde); color: var(--lima); }

/* ── Carga ──────────────────────────────────────────────────────────── */

.cargando { display: flex; justify-content: center; padding: 3rem 0; }
.giro {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 2px solid var(--line-fuerte); border-top-color: var(--lima);
  animation: gira 0.7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.esqueleto { background: var(--surface); border-radius: var(--radio); height: 8.5rem; animation: late 1.4s ease-in-out infinite; }
@keyframes late { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }

@media (prefers-reduced-motion: reduce) {
  .giro { animation-duration: 2s; }
  .esqueleto { animation: none; }
  * { transition: none !important; }
}

/* ── Bienvenida ─────────────────────────────────────────────────────── */

.bienvenida { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: 2rem 0 3rem; }
.bienvenida img { width: 11rem; margin: 0 auto; display: block; }
.bienvenida .promesa { text-align: center; color: var(--muted); font-size: var(--s2); line-height: 1.6; max-width: 24rem; margin: 0 auto; }
.bienvenida .acciones { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }

/* ── Detalle de señal ───────────────────────────────────────────────── */

.linea-tiempo { display: flex; flex-direction: column; gap: 0; margin-top: 0.5rem; }
.linea-tiempo .hito { display: flex; gap: 0.8rem; padding-bottom: 1rem; position: relative; }
.linea-tiempo .hito:not(:last-child)::before {
  content: ''; position: absolute; left: 0.36rem; top: 1.1rem; bottom: 0; width: 1px; background: var(--line-fuerte);
}
.linea-tiempo .punto { width: 0.75rem; height: 0.75rem; border-radius: 50%; flex: none; margin-top: 0.35rem; background: var(--line-fuerte); z-index: 1; }
.linea-tiempo .punto.bueno { background: var(--verde); }
.linea-tiempo .punto.malo { background: var(--rojo); }
.linea-tiempo .qué { font-size: var(--s1); }
.linea-tiempo .cuando { font-size: var(--s0); color: var(--muted-2); }

/* ── Tabla del ranking detallado ────────────────────────────────────── */

/* Una tabla ancha en un celular no cabe, y encogerla hasta que quepa la vuelve
   ilegible. Se desplaza a lo ancho DENTRO de su caja, con la columna del
   analista clavada a la izquierda para no perder de vista de quién es cada
   renglón. La página nunca se mueve de lado. */
.scroll-tabla {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.tabla-ranking {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.tabla-ranking th,
.tabla-ranking td {
  padding: 0.5rem 0.6rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.tabla-ranking tbody tr:last-child td { border-bottom: 0; }
.tabla-ranking tbody tr:hover td { background: var(--surface-2); }

.tabla-ranking thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.tabla-ranking thead th:hover { color: var(--ink); }
.tabla-ranking thead th.ordenando { color: var(--lima); }

/* La columna del analista se queda fija al desplazar a lo ancho. */
.tabla-ranking .fijo {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.tabla-ranking thead .fijo { z-index: 3; background: var(--surface-2); }
.tabla-ranking tbody tr:hover .fijo { background: var(--surface-2); }

.tabla-ranking .pos { color: var(--muted-2); font-family: var(--mono); text-align: center; width: 2rem; }
.tabla-ranking .num { text-align: right; font-family: var(--mono); }

.tabla-ranking .quien-td { display: flex; align-items: center; gap: 0.5rem; color: inherit; }
.tabla-ranking .quien-td .avatar { width: 1.6rem; height: 1.6rem; font-size: 0.55rem; }
.tabla-ranking .quien-td b { display: block; font-size: 0.82rem; font-weight: 600; }
.tabla-ranking .quien-td i { font-style: normal; font-size: 0.66rem; color: var(--muted-2); }

/* ── Textos flotantes de ayuda ──────────────────────────────────────── */

/* El indicador solo aparece si el usuario tiene las ayudas encendidas. Quien ya
   entendió las apaga desde su cuenta y la app se ve limpia. */
body.con-ayudas [data-ayuda] { cursor: help; }
body.con-ayudas [data-ayuda]::after {
  content: '?';
  display: inline-grid;
  place-items: center;
  width: 0.85em; height: 0.85em;
  margin-left: 0.3em;
  border-radius: 50%;
  border: 1px solid var(--muted-2);
  color: var(--muted-2);
  font-family: var(--texto);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(-0.05em);
}
body.con-ayudas [data-ayuda]:hover::after { border-color: var(--lima); color: var(--lima); }

#velo-ayuda {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.6);
  animation: aparece 0.15s ease-out;
}

/* Hoja de abajo y no globo flotante: en un celular un globo anclado a un número
   chico se sale de la pantalla o tapa justo lo que se está explicando. */
#hoja-ayuda {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  max-width: 34rem; margin: 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--line-fuerte);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 0.7rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
  animation: sube 0.2s ease-out;
}
#hoja-ayuda .tirador {
  width: 2.2rem; height: 3px; border-radius: 2px;
  background: var(--line-fuerte); margin: 0 auto 1rem;
}
#hoja-ayuda h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
#hoja-ayuda p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.7rem; }
#hoja-ayuda .que { color: var(--ink); }
#hoja-ayuda .ojo { color: var(--muted); }
#hoja-ayuda .ojo b { color: var(--lima); }
#hoja-ayuda .btn { margin-top: 0.5rem; }

@keyframes sube { from { transform: translateY(100%); } }
@keyframes aparece { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #hoja-ayuda, #velo-ayuda { animation: none; }
}

/* Avatar grande: la foto del analista en su propia pantalla de cuenta, donde
   es el objeto que está editando y no una miniatura de una lista. */
.avatar.grande { width: 3.6rem; height: 3.6rem; font-size: 1.1rem; }

/* ── La guía ────────────────────────────────────────────────────────── */

/* Acordeón con <details> del navegador, sin JavaScript de por medio.
 *
 * Una guía completa de corrido se vuelve un muro de texto en un celular y nadie
 * la lee. Así cada quien abre el pedazo que le hace falta y el resto no estorba.
 * Todo lo de este bloque está acotado a `.guia`: no toca ninguna otra pantalla.
 */

.guia { display: flex; flex-direction: column; gap: 0.6rem; }

.guia .seccion { padding: 0; overflow: hidden; }
.guia .seccion + .seccion { margin-top: 0; }

.guia summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1rem;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.guia summary::-webkit-details-marker { display: none; }

/* La flechita se dibuja aquí y gira al abrir: el triángulo por defecto se ve
   distinto en cada navegador y en iOS queda diminuto. */
.guia summary::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
  transition: transform 0.18s ease;
}
.guia details[open] summary { color: var(--lima); }
.guia details[open] summary::after {
  border-color: var(--lima);
  transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}
.guia summary:active { background: var(--surface-2); }

.guia .cuerpo {
  padding: 0 1rem 1.1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}
.guia .cuerpo p { font-size: 0.9rem; line-height: 1.65; color: var(--muted); }
.guia .cuerpo p + p { margin-top: 0.7rem; }
/* Solo las negritas sin clase: el texto va en gris y la negrita tiene que
   levantarse. Las que ya traen color propio (`lima`, `verde`, `rojo`) se
   respetan — sin el `:not` esta regla les ganaría por especificidad y se
   perdería justo el resalte que se quiso poner a mano. */
.guia .cuerpo b:not([class]) { color: var(--ink); }

/* El renglón que hay que leer aunque se lea en diagonal: la advertencia, el
   "cómo se lee", la regla que protege al usuario. */
.guia .cuerpo .ojo {
  margin-top: 0.9rem;
  padding: 0.7rem 0.8rem;
  border-left: 2px solid var(--lima-borde);
  background: var(--lima-tenue);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.guia .cuerpo .ojo b { color: var(--lima); }

.lista-guia { margin: 0.8rem 0 0; padding: 0; list-style: none; }
.lista-guia li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}
.lista-guia li + li { margin-top: 0.55rem; }
.lista-guia li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--lima);
  opacity: 0.6;
}
.lista-guia b:not([class]) { color: var(--ink); }
.lista-guia .chip { margin-right: 0.35rem; }

/* La tarjeta de ejemplo se dibuja con las piezas de una señal de verdad, para
   que el usuario reconozca en el feed lo que acaba de leer. Se distingue con el
   borde punteado: nadie debe confundirla con una señal real. */
.guia .senal.ejemplo {
  border-style: dashed;
  margin: 0.9rem 0;
  background: var(--surface-2);
}

/* La calculadora empotrada. Va sin la cabecera de su pantalla y con una raya
   arriba que la separa del texto que la explica. */
.guia .empotrada {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .guia summary::after { transition: none; }
}

/* ── Utilidades ─────────────────────────────────────────────────────── */

.sep { height: 1px; background: var(--line); margin: 1.5rem 0; border: 0; }
.pila { display: flex; flex-direction: column; gap: 1rem; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; font-size: var(--s1); }
.datos dt { color: var(--muted); }
.datos dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }