/*
 * estado.css — estilos de la página de estado.
 *
 * 🔴 Ni un solo #hex ni un solo px propios: TODO sale de tokens.css. Si algo
 * necesita un valor que no existe como token, el arreglo es añadir el token,
 * no escribir el número aquí.
 */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: var(--espacio-5) var(--espacio-3);
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-base);
    font-size: var(--texto-m);
    line-height: 1.5;
}

.contenedor {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
}

.titulo {
    margin: 0 0 var(--espacio-1);
    font-size: var(--texto-l);
}

.descripcion {
    max-width: var(--ancho-texto);
    margin: 0 0 var(--espacio-4);
    color: var(--color-texto-atenuado);
    font-size: var(--texto-s);
}

.panel {
    background: var(--color-superficie);
    border: var(--borde-fino) solid var(--color-borde);
    border-radius: var(--radio);
    /* Con ocho columnas la tabla no cabe en un móvil. Se desplaza DENTRO de su
       panel: la página nunca se desplaza en horizontal. */
    overflow-x: auto;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
}

/* Relleno ajustado: con dieciocho columnas, cada píxel se multiplica por
   treinta y seis y decide si la tabla cabe en pantalla o no. */
.tabla th,
.tabla td {
    padding: var(--espacio-1) var(--espacio-2);
    white-space: nowrap;
    text-align: left;
    border-bottom: var(--borde-fino) solid var(--color-borde);
}

/* Las columnas numéricas se alinean a la derecha y con cifras de ancho fijo:
   así los millares quedan unos debajo de otros y la columna se puede leer en
   vertical de un vistazo. */
.tabla td.numero,
.tabla th:not(:nth-child(2)) .orden {
    text-align: right;
    justify-content: flex-end;
}

.numero {
    font-family: var(--fuente-numeros);
    font-variant-numeric: tabular-nums;
    font-size: var(--texto-s);
}

.tabla tr:last-child td {
    border-bottom: none;
}

/* La cabecera entera es el botón de ordenar: área de pulsación grande y
   accesible con teclado, sin depender de un icono diminuto.
   
   🔴 Las cabeceras SÍ pueden partirse en varias líneas, mientras que las celdas
   no. Sin esto, "Dividendo Aprox." forzaba una columna de 165 px para un
   contenido que necesita 50, y la tabla no cabía en pantalla. */
.orden {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-1);
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-texto-atenuado);
    font: inherit;
    font-size: var(--texto-xxs);
    text-transform: uppercase;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
    cursor: pointer;
}

.tabla th {
    vertical-align: bottom;
}

.orden:hover {
    color: var(--color-acento);
}

/* La flecha ocupa sitio siempre, aunque esté vacía: así las cabeceras no
   bailan al cambiar de columna de ordenación. */
.orden-flecha::before {
    content: "\2195";           /* ↕ sin ordenar */
    color: var(--color-borde);
}

.orden[data-sentido="asc"] .orden-flecha::before {
    content: "\25B2";           /* ▲ ascendente */
    color: var(--color-acento);
}

.orden[data-sentido="desc"] .orden-flecha::before {
    content: "\25BC";           /* ▼ descendente */
    color: var(--color-acento);
}

/* ── La barra de régimen del VIX ─────────────────────────────────────────────

   Sin JavaScript: la posición del marcador la calcula el servidor y llega como
   un porcentaje en línea. Es la única medida en línea de todo el proyecto, y
   está justificada — es un dato, no un estilo: cambia con cada refresco. */
.vix {
    margin-top: var(--espacio-2);
}

.vix-pista {
    position: relative;
    display: flex;
    height: var(--alto-pista-vix);
    border-radius: var(--radio-pequeno);
    overflow: hidden;
}

.vix-tramo {
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
}

/* La rampa: sube en intensidad, no en alarma. */
.vix-tramo[data-tramo="complacencia"] { background: var(--vix-1); }
.vix-tramo[data-tramo="calma"]        { background: var(--vix-2); }
.vix-tramo[data-tramo="tension"]      { background: var(--vix-3); }
.vix-tramo[data-tramo="miedo"]        { background: var(--vix-4); }
.vix-tramo[data-tramo="panico"]       { background: var(--vix-5); }

/* El marcador. Se centra sobre su posición con una traslación, para que en los
   extremos no se salga de la pista. */
.vix-marcador {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--borde-marcador);
    transform: translateX(-50%);
    background: var(--vix-marcador);
}

.vix-escala {
    display: flex;
    margin: var(--espacio-1) 0 0;
    color: var(--color-texto-atenuado);
    font-family: var(--fuente-numeros);
    font-size: var(--texto-xxs);
}

/* Cada número marca el PRINCIPIO de su tramo, así que se alinea a la
   izquierda del hueco que ocupa ese tramo. */
.vix-escala span {
    flex-shrink: 0;
    text-align: left;
}

.vix-escala-fin {
    flex-basis: auto;
}

.vix-estado {
    margin: var(--espacio-1) 0 0;
    font-size: var(--texto-xs);
}

.vix-estado strong {
    text-transform: uppercase;
    letter-spacing: var(--espaciado-letras);
}

.vix-explicacion {
    display: block;
    color: var(--color-texto-atenuado);
    font-size: var(--texto-xxs);
    line-height: 1.35;
}

/* El icono de una cabecera: alineado con el texto, sin empujarlo. */
.icono-cabecera {
    width: var(--alto-icono-cabecera);
    height: var(--alto-icono-cabecera);
}

.orden .icono-cabecera {
    align-self: center;
}

/* 🔴 La columna del MOAT no se parte.

   Lleva el número y hasta DOS marcas —MOAT asumido y revisar tesis—, y cuando
   no cabían todas en el ancho que le tocaba, las marcas caían a una segunda
   línea y esa fila se hacía más alta que las demás. Con un ancho mínimo, los
   tres elementos entran siempre en el mismo renglón. */
.tabla td.moat {
    min-width: var(--ancho-moat);
    white-space: nowrap;
}

/* La cabecera que no ordena. Sin cursor de mano y sin flecha: tiene que
   parecer lo que es, una etiqueta, y no un botón que no responde. */
.tabla th[data-sin-orden] {
    color: var(--color-texto-atenuado);
    font-size: var(--texto-xxs);
    text-transform: uppercase;
    line-height: 1.25;
    cursor: default;
}

/* El enlace al informe: subrayado, porque es lo único de la tabla en lo que se
   puede pulsar para ir a otro sitio. */
.tabla td.informe {
    font-size: var(--texto-xs);
}

.tabla td.informe a {
    color: var(--color-acento);
    text-decoration: underline;
}

.sin-dato {
    color: var(--color-texto-atenuado);
    font-style: italic;
}

.banda {
    display: inline-block;
    padding: var(--espacio-1) var(--espacio-2);
    border-radius: var(--radio-pequeno);
    background: var(--color-banda-fondo);
    font-size: var(--texto-xs);
    font-weight: 600;
}

.banda[data-banda="low"]  { color: var(--color-banda-baja); }
.banda[data-banda="mid"]  { color: var(--color-banda-media); }
.banda[data-banda="high"] { color: var(--color-banda-alta); }

.antiguedad {
    color: var(--color-texto-atenuado);
    font-size: var(--texto-s);
}

.aviso {
    display: inline-block;
    margin-left: var(--espacio-2);
    padding: var(--espacio-1) var(--espacio-2);
    border-radius: var(--radio-pequeno);
    background: var(--color-aviso-fondo);
    color: var(--color-aviso);
    font-size: var(--texto-xs);
    font-weight: 600;
}

.pie {
    max-width: var(--ancho-texto);
    margin-top: var(--espacio-3);
    color: var(--color-texto-atenuado);
    font-size: var(--texto-xs);
}

/* ── Cabecera de mercado: tres índices en fila ──────────────────────────── */

.mercado {
    margin-bottom: var(--espacio-4);
}

.indices {
    display: grid;
    /* Tres en fila cuando caben; se apilan solos en pantallas estrechas sin
       necesidad de una consulta de medios. */
    grid-template-columns: repeat(auto-fit, minmax(var(--ancho-indice), 1fr));
    gap: var(--espacio-3);
}

.indice {
    padding: var(--espacio-3);
    background: var(--color-superficie);
    border: var(--borde-fino) solid var(--color-borde);
    border-radius: var(--radio);
}

.indice-nombre {
    margin: 0;
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--borde-fino);
    color: var(--color-texto-atenuado);
}

.indice-valor {
    margin: var(--espacio-1) 0 0;
    font-size: var(--texto-l);
    font-weight: 700;
    line-height: 1;
}

.indice-datos {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espacio-3);
    margin: var(--espacio-2) 0 0;
    font-size: var(--texto-s);
}

/* Neutro a propósito: el movimiento se indica con signo y flecha, no con
   colores de bueno y malo. En el VIX, subir no es ni una cosa ni otra. */
.indice-variacion,
.indice-drawdown {
    color: var(--color-texto-atenuado);
}

.indice-flecha::before {
    content: "\2014";                                   /* — sin cambio */
}

.indice-variacion[data-sentido="sube"] .indice-flecha::before { content: "\25B2"; }
.indice-variacion[data-sentido="baja"] .indice-flecha::before { content: "\25BC"; }

.indice-etiqueta {
    font-size: var(--texto-xxs);
    text-transform: uppercase;
}

/* El mensaje general de frescura: lo primero que alguien quiere saber al
   abrir la página es de cuándo son estos números. */
.actualizacion {
    max-width: var(--ancho-texto);
    margin: var(--espacio-3) 0 0;
    font-size: var(--texto-xs);
    color: var(--color-texto-atenuado);
}

.actualizacion-nota::before {
    content: " \00B7 ";
}

/* ── Listado de acciones (spec 002) ─────────────────────────────────────── */

.vacio {
    margin: 0;
    padding: var(--espacio-4);
    text-align: center;
}

/* Etiqueta neutra: informa de una condición, no la juzga. */
.etiqueta {
    display: inline-block;
    margin-left: var(--espacio-2);
    padding: var(--espacio-1) var(--espacio-2);
    border-radius: var(--radio-pequeno);
    background: var(--color-banda-fondo);
    color: var(--color-texto-atenuado);
    font-size: var(--texto-xs);
    font-weight: 600;
}

/* El puesto en el ranking de calidad: discreto, es referencia y no protagonista. */
.posicion {
    color: var(--color-texto-atenuado);
    font-size: var(--texto-s);
}


/* ── Marcas compactas ───────────────────────────────────────────────────────
 *
 * Las advertencias en texto —"Faltan datos para puntuar", "con precio del CSV"—
 * ocupaban más ancho que la columna entera y obligaban a desplazar la tabla en
 * horizontal.
 *
 * 🔴 El texto NO se elimina: se oculta a la vista y sigue en el HTML, así que
 * los lectores de pantalla lo leen igual y las pruebas lo siguen comprobando.
 * Lo que se ve es un símbolo, y el texto completo aparece al posar el ratón.
 */

.marca {
    display: inline-block;
    width: var(--espacio-3);
    margin-left: var(--espacio-1);
    color: var(--color-marca);
    font-size: var(--texto-xxs);
    font-weight: 700;
    text-align: center;
    cursor: help;
}

.marca[data-marca="asumido"]::before      { content: "\2248"; }   /* ≈ valor asumido */
.marca[data-marca="revisar"]::before      { content: "\26A0"; }   /* ⚠ revisar tesis */
.marca[data-marca="precio-csv"]::before   { content: "\25F7"; }   /* ◷ dato menos fresco */
.marca[data-marca="incompleta"]::before   { content: "\0021"; }   /* ! faltan datos */
.marca[data-marca="sin-fuente"]::before   { content: "\2014"; }   /* — sin fuente */

/* Visible para lectores de pantalla, invisible en la página. */
.solo-lectores {
    position: absolute;
    width: var(--borde-fino);
    height: var(--borde-fino);
    padding: 0;
    margin: calc(var(--borde-fino) * -1);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Leyenda de las marcas, bajo la tabla. */
.leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-3);
    max-width: var(--ancho-texto);
    margin-top: var(--espacio-3);
    font-size: var(--texto-xs);
    color: var(--color-texto-atenuado);
}

.leyenda span {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
}


/* ── Tonos del listado ──────────────────────────────────────────────────────
 *
 * El color REFUERZA el número, no lo sustituye: la cifra sigue visible y
 * legible en todas las celdas. Quien no distingue estos colores pierde el
 * atajo visual, no la información.
 *
 * Qué valor recibe qué tono se decide en config/smithscore.php, no aquí: son
 * criterios de inversión revisables. Esta hoja sólo sabe pintar.
 */

.tabla td[data-tono] {
    border-radius: var(--radio-pequeno);
}

.tabla td[data-tono="verde"]        { background: var(--tono-verde-fondo);        color: var(--tono-verde-texto); }
.tabla td[data-tono="amarillo"]     { background: var(--tono-amarillo-fondo);     color: var(--tono-amarillo-texto); }
.tabla td[data-tono="naranja"]      { background: var(--tono-naranja-fondo);      color: var(--tono-naranja-texto); }
.tabla td[data-tono="rosa"]         { background: var(--tono-rosa-fondo);         color: var(--tono-rosa-texto); }
.tabla td[data-tono="rojo"]         { background: var(--tono-rojo-fondo);         color: var(--tono-rojo-texto); }
.tabla td[data-tono="rojo-oscuro"]  { background: var(--tono-rojo-oscuro-fondo);  color: var(--tono-rojo-oscuro-texto); font-weight: 700; }

/* Las marcas mantienen su propio color sobre cualquier fondo. */
.tabla td[data-tono] .marca {
    color: inherit;
    opacity: 0.75;
}

/* La columna del Smith Score: es la conclusión de todo lo demás, así que se
   lee con un poco más de peso que el resto de cifras. */
.destacada {
    font-weight: 700;
}

/* La divisa junto al precio: presente y discreta. Es contexto imprescindible
   —conviven cuatro monedas— pero no es el dato. */
.moneda {
    margin-left: var(--espacio-1);
    color: var(--color-texto-atenuado);
    font-size: var(--texto-xxs);
    font-weight: 400;
}

/* ── La gráfica en miniatura ────────────────────────────────────────────────
 *
 * Dibujada en el servidor con SVG. Sin ejes ni etiquetas: no es para leer
 * valores —para eso está la columna del precio— sino para ver la forma.
 */

.grafica {
    width: var(--ancho-chispa);
    padding-top: 0;
    padding-bottom: 0;
}

.chispa {
    display: block;
    width: var(--ancho-chispa);
    height: var(--alto-chispa);
    /* La línea mantiene su grosor aunque el trazado se estire en horizontal. */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--color-texto-atenuado);
}

/* El color indica si la serie acaba por encima o por debajo de donde empezó.
   Aquí sí tiene dirección: el precio de una acción sube o baja, sin ambigüedad
   —a diferencia del VIX, donde subir no es ni bueno ni malo—. */
.chispa[data-sentido="sube"] { stroke: var(--tono-verde-texto); }
.chispa[data-sentido="baja"] { stroke: var(--tono-rojo-texto); }

/* ── Las pantallas de acceso ─────────────────────────────────────────────────

   Una tarjeta centrada y poco más. No hay portada ni argumentario: quien llega
   aquí viene de Skool o de un enlace que ya le ha contado qué es esto, y una
   pantalla más son textos que escribir y mantener. */
/* 🔴 La tarjeta ya NO ocupa toda la altura.

   Con min-height: 100vh, el pie quedaba empujado bajo el pliegue: había que
   bajar para ver los enlaces, y en una pantalla de acceso eso equivale a que no
   existan. Ahora la página es una columna —tarjeta, comunidad, pie— y todo cabe
   sin desplazarse. */
.pagina {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.portada {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-4) var(--espacio-3) var(--espacio-3);
}

/* La marca, encima del título. Centrada con él. */
.marca {
    display: block;
    width: var(--ancho-marca);
    height: auto;
    margin: 0 auto var(--espacio-2);
}

.tarjeta {
    text-align: center;
}

/* Los campos siguen leyéndose de izquierda a derecha: centrar un formulario
   entero obliga al ojo a buscar dónde empieza cada línea. */
.tarjeta .formulario,
.tarjeta .aviso {
    text-align: left;
}

/* Los enlaces secundarios de la tarjeta: son salidas, no la acción principal. */
.tarjeta-pie a {
    color: var(--color-acento);
}

/* La comunidad, separada del pie y por delante: es a donde lleva todo lo demás,
   y el único enlace que convierte a quien mira en suscriptor. */
.comunidad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-3);
    text-align: center;
}

.comunidad-texto {
    margin: 0;
    color: var(--color-texto-atenuado);
    font-size: var(--texto-s);
}

.comunidad .boton {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.tarjeta {
    width: 100%;
    max-width: var(--ancho-tarjeta);
    padding: var(--espacio-4);
    background: var(--color-superficie);
    border: var(--borde-fino) solid var(--color-borde);
    border-radius: var(--radio);
}

.tarjeta-titulo {
    margin: 0 0 var(--espacio-2);
    font-size: var(--texto-l);
}

.tarjeta-entrada {
    margin: 0 0 var(--espacio-3);
    color: var(--color-texto-atenuado);
    font-size: var(--texto-s);
    line-height: 1.45;
}

.tarjeta-nota {
    margin: 0 0 var(--espacio-3);
    color: var(--color-texto-atenuado);
    font-size: var(--texto-xs);
    line-height: 1.4;
}

.tarjeta-pie {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    margin: var(--espacio-3) 0 0;
    font-size: var(--texto-xs);
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.campo-etiqueta {
    color: var(--color-texto-atenuado);
    font-size: var(--texto-xs);
}

/* La caja que envuelve al campo: el botón «Mostrar» va dentro, no al lado. */
.campo-caja {
    position: relative;
    display: block;
}

.campo-caja input {
    width: 100%;
    /* Sitio a la derecha para el botón, o el texto pasaría por debajo. */
    padding-right: var(--espacio-5);
}

.campo-mostrar {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 var(--espacio-2);
    color: var(--color-texto-atenuado);
    background: none;
    border: none;
    font: inherit;
    font-size: var(--texto-xs);
    cursor: pointer;
}

.campo-mostrar:hover {
    color: var(--color-acento);
}

.campo input {
    height: var(--alto-campo);
    padding: 0 var(--espacio-2);
    color: var(--color-texto);
    background: var(--color-fondo);
    border: var(--borde-fino) solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    font: inherit;
    font-size: var(--texto-s);
}

.campo input:focus {
    outline: var(--borde-marcador) solid var(--color-acento);
    outline-offset: 0;
}

.boton {
    display: inline-block;
    height: var(--alto-campo);
    padding: 0 var(--espacio-3);
    color: var(--color-superficie);
    background: var(--color-acento);
    border: none;
    border-radius: var(--radio-pequeno);
    font: inherit;
    font-size: var(--texto-s);
    line-height: var(--alto-campo);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.boton[data-tono="suave"] {
    color: var(--color-acento);
    background: none;
    border: var(--borde-fino) solid var(--color-borde);
}

/* Un botón que parece un enlace: cerrar sesión tiene que ir por POST —un enlace
   se puede disparar desde fuera— pero no merece el peso visual de un botón. */
.enlace-boton {
    padding: 0;
    color: var(--color-texto-atenuado);
    background: none;
    border: none;
    font: inherit;
    font-size: var(--texto-xs);
    text-decoration: underline;
    cursor: pointer;
}

.aviso {
    margin: 0 0 var(--espacio-3);
    padding: var(--espacio-2);
    border-radius: var(--radio-pequeno);
    font-size: var(--texto-xs);
    line-height: 1.4;
}

.aviso[data-tipo="bien"] {
    color: var(--tono-verde-texto);
    background: var(--tono-verde-fondo);
}

.aviso[data-tipo="mal"] {
    color: var(--tono-rojo-texto);
    background: var(--tono-rojo-fondo);
}

/* La barra de cuenta, sobre el título. */
.barra-cuenta {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) 0;
    font-size: var(--texto-xs);
}

.barra-nota {
    color: var(--color-texto-atenuado);
}

/* En los últimos días el aviso deja de ser un dato y pasa a ser un aviso. */
.barra-nota[data-urgente] {
    padding: var(--espacio-1) var(--espacio-2);
    color: var(--color-aviso);
    background: var(--color-aviso-fondo);
    border-radius: var(--radio-pequeno);
}

.barra-enlace {
    color: var(--color-acento);
    font-weight: 600;
}

/* Los cuatro sitios. Discretos: acompañan, no compiten con la tabla. */
.enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-3);
    justify-content: center;
    padding: var(--espacio-2) var(--espacio-3) var(--espacio-4);
    font-size: var(--texto-xs);
}

.enlaces a {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    color: var(--color-texto-atenuado);
    text-decoration: none;
}

.enlaces a:hover {
    color: var(--color-acento);
}

.enlaces a:hover span {
    text-decoration: underline;
}

/* La comunidad es la de pago: se distingue sin gritar. */
.enlaces a[data-destacado] {
    color: var(--color-acento);
    font-weight: 600;
}

.icono {
    width: var(--alto-icono);
    height: var(--alto-icono);
    flex-shrink: 0;
}

/* Arriba: sólo iconos, pegados y sin robar aire a la cabecera. */
.enlaces[data-compacto] {
    gap: var(--espacio-2);
    padding: 0;
}

/* La barra de arriba: los enlaces a la izquierda, la cuenta a la derecha. */
.barra-separador {
    flex: 1;
}