/* ============================================================
   SISTEMA DE DISEÑO DEL COCKPIT

   Un solo sitio para lo que comparten las tres páginas —análisis de mercado,
   operativa y entrar—. Todo vive bajo `.ui`, que es su clase raíz.

   REGLA DE ORO: si una pieza aparece en más de una pantalla, se define AQUÍ una
   vez y sin prefijo (`.card`, `.cell`, `.pill`). Lo que solo existe en una lleva
   su prefijo y vive en su fichero: `op-` en operativa.css, `mk-` en mercado.css.

   Los componentes definen a sus hijos POR CONTEXTO —`.cells > .cell`, no `.cell`
   a secas—. Así una clase corta que ya existía en el HTML generado no se
   convierte de golpe en un componente sin querer.
   ============================================================ */
.ui {
    --font: 'IBM Plex Sans', system-ui, Helvetica, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* ── SUPERFICIES ──
       Gris muy oscuro con un punto de azul, no azul marino: el tinte queda como
       temperatura del gris y no como color propio. */
    --bg:     #0a0b0e;   /* página */
    --nav:    #0e1014;   /* barra de navegación */
    --card:   #12141a;   /* tarjeta */
    --cab:    #161920;   /* cabecera de tarjeta */
    --sub:    #101217;   /* subpanel hundido */
    --hueco:  #0c0e12;   /* fondo de campo */
    --pie:    #0e1014;   /* pie de lista */
    --banda:  #121620;   /* banda destacada: aquí el azul SÍ significa algo */
    --hover:  #15181f;   /* fila o botón bajo el ratón */
    --pista:  #171a22;   /* canal vacío de una barra de progreso */
    --chapa:  #171b25;   /* fondo de píldora neutra */

    /* ── TRAZOS, de más tenue a más marcado ── */
    --fila:   #171921;   /* separador entre filas de lista */
    --line:   #1b1e26;   /* divisor dentro de tarjeta */
    --line-2: #1d212a;   /* borde de tarjeta */
    --line-3: #242936;   /* borde de control y de píldora */
    --line-4: #313a4d;   /* borde de control bajo el ratón */

    /* ── COLORES DE TEXTO ──
       Ocho escalones y NINGUNO más. Antes convivían siete grises fuera de esta
       lista —#cfd4de, #d7dde9, #cdd5e3, #6c7280…— que eran variaciones de estos
       de dos o tres unidades: invisibles por separado y un desbarajuste juntas.
       Si hace falta un gris nuevo, se cambia un escalón, no se añade uno. */
       Septiembre 2026: del t2 al t7 suben UN escalón. La pantalla se leía
       apagada, sobre todo las tablas, donde casi todo el texto vivía entre el t4
       y el t7. El salto es +0,055 de luminosidad en OKLCH manteniendo tono y
       croma, que es el mismo paso que ya separaba dos escalones, así que la
       rampa sigue siendo la misma escalera y no se solapa ninguno. En contraste
       sobre la tarjeta: el t7 pasa de 2,66:1 a 3,39:1 y el t5 de 4,27:1 a
       5,32:1. */
    --t0: #ffffff;   /* sobre relleno de color: pestaña activa, botón */
    --t1: #eef0f5;   /* la cifra que manda */
    --t2: #d8dce6;   /* titular, valor de tabla, texto bajo el ratón */
    --t3: #bfc4d2;   /* texto corrido */
    --t4: #a0a6b4;   /* texto secundario */
    --t5: #838a9a;   /* rótulo en versalitas */
    --t6: #737a89;   /* matiz */
    --t7: #636a78;   /* apenas visible: unidades, marcas de eje, apuntes */

    /* ── COLORES CON SIGNIFICADO ──
       Cada uno dice UNA cosa: verde gana, rojo pierde, ámbar está en curso,
       azul es la acción, lila es el instrumento derivado. Tres tonos por color y
       ni uno más: el vivo para texto, el macizo para rellenos y trazos, y el
       claro para cuando va sobre su propio fondo teñido. */
    --up:     #4fd18b;  --up-solid:   #2ea968;  --up-claro:    #6ee7a8;
    --down:   #f2707a;  --down-solid: #d9505c;  --down-claro:  #ff8a92;
    --amber:  #e0a341;  --amber-solid:#c88a2c;  --amber-claro: #f5c96a;
    --blue:   #7ea3f5;  --blue-solid: #4f83ff;  --blue-claro:  #a9c2ff;
    --lila:   #a48df0;  --lila-solid: #8b6ef0;
    --btn:    #2f6df0;  --btn-hover:  #3d7bfd;

    /* Fondos y bordes teñidos. Una pareja por color, usada por igual en
       píldoras, avisos y chapas: antes cada sitio se inventaba su tono. */
    --up-bg:    #0e2118;  --up-line:    #1c412e;
    --down-bg:  #201115;  --down-line:  #451f26;
    --amber-bg: #221a0e;  --amber-line: #46381b;
    --blue-bg:  #141d2e;  --blue-line:  #223049;
    --lila-bg:  #191631;  --lila-line:  #2f2952;

    /* ── ESCALA TIPOGRÁFICA ──
       CINCO estilos para toda la web. Antes cada componente elegía su tamaño y
       su peso, y acabaron conviviendo nueve cuerpos distintos entre 9 y 22 px:
       por separado ninguno chirría, juntos se ve desordenado.

       Los tamaños viven aquí y los componentes los REFERENCIAN. Aplicar la
       escala por variable y no por una clase suelta es más fuerte: un componente
       no puede saltársela en silencio, y cambiar un cuerpo lo cambia en las tres
       páginas a la vez.

         titulo  cabecera de tarjeta, en versalitas
         rot     rótulo micro sobre una cifra
         cifra   la cifra grande y destacada
         base    texto corrido y valores de tabla (en mono cuando son cifras)
         menor   matiz pequeño que acompaña

       Lo único que cambia de un sitio a otro es el COLOR. */
    --tx-titulo: 11px;    --tx-titulo-peso: 700;
    --tx-rot:    9.5px;   --tx-rot-peso:    600;
    --tx-cifra:  19px;    --tx-cifra-peso:  600;
    /* 13 px, no 11,5: a la densidad de esta pantalla el cuerpo base se leía
       pequeño en las tablas, que es donde más texto hay. */
    --tx-base:   13px;    --tx-base-peso:   400;
    --tx-menor:  10.5px;  --tx-menor-peso:  500;
    /* La UNICA excepcion a la escala: el resultado abierto de una posicion,
       que se mira cada pocos segundos mientras hay dinero fuera. Tiene token
       propio para que siga siendo un valor del sistema y no un numero suelto. */
    --tx-hero:   30px;
    /* Un escalon por debajo de la cifra, para bloques de resultado dentro de
       un formulario, donde la cifra grande competiria con los campos. */
    --tx-cifra-menor: 15px;

    --gap: 12px;
    /* Sin tope de ancho: en un monitor de 1920 un límite dejaba dos franjas de
       fondo a los lados y encogía el gráfico, que es lo que más se mira. */
    --ancho: 100%;

    background: var(--bg);
    color: var(--t3);
    font-family: var(--font);
    font-size: var(--tx-base);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
.ui * { font-family: inherit; }
.ui ::-webkit-scrollbar { width: 10px; height: 10px; }
.ui ::-webkit-scrollbar-thumb { background: #23262f; border-radius: 6px;
                                border: 3px solid var(--bg); }

/* ── Utilidades de significado ── */
.ui .up    { color: var(--up); }
.ui .down  { color: var(--down); }
.ui .flat  { color: var(--amber); }
.ui .dim   { color: var(--t6); }
.ui .dimmer{ color: var(--t7); }
.ui .mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ui .oculto { display: none !important; }
/* La unidad, en gris y un cuerpo menor, junto a cualquier cifra. Separarlas es
   lo que hace que una columna de números parezca compuesta. */
.ui .uni { font-family: var(--mono); font-size: var(--tx-base); color: var(--t7);
           flex: none; }

/* ── Estructura de página ── */
.wrap { max-width: var(--ancho); margin: 0 auto; padding: var(--gap) var(--gap) 0;
        display: flex; flex-direction: column; gap: var(--gap); }
.col  { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--gap); align-items: start; }

/* ── Navegación ── */
.nav { display: flex; align-items: center; height: 44px; padding: 0 18px; gap: 4px;
       background: var(--nav); border-bottom: 1px solid var(--line);
       position: sticky; top: 0; z-index: 30; }
.nav::before {
    content: '₿'; flex: none;
    width: 20px; height: 20px; border-radius: 5px;
    background: linear-gradient(180deg, var(--blue-solid), #2f5bd0);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--tx-menor); font-weight: 700; color: var(--t0);
    margin-right: 14px; box-shadow: 14px 0 0 -13px var(--line);
}
.nav a { padding: 5px 11px; border-radius: 6px;
         font-size: var(--tx-base); font-weight: var(--tx-base-peso);
         color: var(--t4); text-decoration: none; }
.nav a:hover { background: var(--hover); color: var(--t2); }
.nav a.on { font-weight: 600; color: var(--t1); background: #171d2c;
            box-shadow: inset 0 0 0 1px #253148; }
.nav .hueco { flex: 1 1 auto; }
.nav a.lejos { color: var(--t6); }

/* ── Tarjeta: la única superficie del sistema ──
   Compacta y poco redondeada. La cabecera comparte fondo con el cuerpo y solo
   la separa una línea: un escalón de color entre las dos partes de la misma
   tarjeta las hacía parecer dos cosas pegadas. */
/* SIN borde. La tarjeta ya se separa del fondo por su propio color —#12141a
   sobre #0a0b0e— y el trazo solo anadia ruido alrededor de cada bloque. Lo que
   delimita es el escalon de fondo, que es la regla de la casa. */
.card { background: var(--card); border-radius: 4px; overflow: hidden; }
/* Una tarjeta que no necesita toda la pantalla. Estirar una lista estrecha solo
   separa sus columnas hasta que dejan de leerse como una fila. */
.card.estrecha { max-width: 930px; }
.card-cab { display: flex; align-items: center; justify-content: space-between;
            gap: 12px; padding: 0 12px; min-height: 34px;
            border-bottom: 1px solid var(--line); }
/* El título va en letra normal, clara y de peso medio. En versalitas diminutas
   costaba leerlo y competía con los rótulos de las celdas, que SÍ son
   versalitas porque van pegados a una cifra. */
.card-cab h2, .card-cab .titulo {
    font-size: var(--tx-base); font-weight: 500; letter-spacing: .01em;
    color: var(--t2); white-space: nowrap; }
.card-cab .izq { display: flex; align-items: center; gap: 9px; min-width: 0; }
.card-cab .apunte { font-family: var(--mono); font-size: var(--tx-menor);
                    font-weight: var(--tx-menor-peso); color: var(--t7); }
.card-cab .nota { font-size: var(--tx-menor); font-weight: var(--tx-menor-peso);
                  color: var(--t6); letter-spacing: 0; text-transform: none; }
.card-cab.solo-tabs { padding: 0 8px; }

/* ── El menú DENTRO del título ──
   Cada opción se lee como el título de la tarjeta, y la activa se marca con un
   relleno tenue. Es la barra de pestañas y el titular a la vez, así que ahorra
   una fila entera por panel sin esconder nada. */
.card-cab .tabs-tit { display: flex; align-items: stretch; gap: 2px;
                      margin: 0 -12px 0 -4px; }
.card-cab.solo-tabs .tabs-tit { margin: 0 -4px; }
.tabs-tit button { border: 0; background: none; cursor: pointer;
                   padding: 9px 12px; border-radius: 3px;
                   font-family: var(--font); font-size: var(--tx-base);
                   font-weight: 500; letter-spacing: .01em; color: var(--t5);
                   white-space: nowrap; }
.tabs-tit button:hover { color: var(--t2); background: var(--hover); }
.tabs-tit button.on { color: var(--t1); background: var(--hover);
                      box-shadow: inset 0 0 0 1px var(--line-3); }

/* ── Sección dentro de una tarjeta ──
   Para cuando dos listas que antes eran dos tarjetas viven ahora en una: las
   separa una banda con su nombre, no un borde y un hueco. */
.seccion { display: flex; align-items: center; justify-content: space-between;
           gap: 12px; padding: 7px 12px; background: var(--sub);
           border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.seccion:first-child { border-top: 0; }
.seccion > span:first-child { font-size: var(--tx-rot); font-weight: var(--tx-rot-peso);
                              letter-spacing: .11em; text-transform: uppercase;
                              color: var(--t5); }

/* ── Píldora: un dato de contexto en chapa ──
   Se lee de reojo; el mismo dato en texto corrido hay que leerlo. */
.pill { display: inline-block; padding: 3px 8px; border-radius: 5px;
        font-size: var(--tx-menor); font-weight: var(--tx-menor-peso);
        white-space: nowrap;
        background: var(--chapa); border: 1px solid var(--line-3); color: var(--t4); }
.pill.azul  { background: var(--blue-bg);  border-color: var(--blue-line);  color: var(--blue); font-family: var(--mono); }
.pill.lila  { background: var(--lila-bg);  border-color: var(--lila-line);  color: var(--lila); font-family: var(--mono); }
.pill.verde { background: var(--up-bg);    border-color: var(--up-line);    color: var(--up);   letter-spacing: .06em; }
.pill.rojo  { background: var(--down-bg);  border-color: var(--down-line);  color: var(--down); letter-spacing: .06em; }
/* Ámbar: hay algo puesto, en curso o pendiente. No es error ni ganancia. */
.pill.ambar { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.pill.boton { cursor: pointer; }
.pill.boton:hover { border-color: var(--line-4); color: var(--t2); }
.pill.ambar.boton:hover { border-color: var(--amber); color: var(--amber-claro); }

/* Chapa numérica: enterarse de que hay algo esperando no puede depender de que
   se te ocurra abrir la pestaña donde está. */
.chapa { display: inline-block; min-width: 15px; margin-left: 5px; padding: 0 5px;
         border-radius: 999px; background: var(--amber); color: #17120a;
         font-family: var(--mono); font-size: var(--tx-rot); font-weight: 700;
         line-height: 15px; text-align: center; vertical-align: 1px; }
.tabs button.on .chapa { background: var(--t0); color: var(--btn); }

/* ── Chip: punto de color, rótulo y cifra ──
   Para estados que se vigilan de reojo: cortacircuitos, salud del motor. */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px;
        border-radius: 999px; background: var(--card);
        font-size: var(--tx-menor); font-weight: var(--tx-menor-peso);
        color: var(--t4); white-space: nowrap; }
.chip b { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums;
          color: var(--t2); }
.chip s { text-decoration: none; font-family: var(--mono); color: var(--t7); }
.chip i.punto { width: 5px; height: 5px; border-radius: 50%; flex: none;
                background: var(--t5); }
.chip.ok     i.punto { background: var(--up-solid); }
.chip.ok     b { color: var(--up); }
.chip.cerca  i.punto { background: var(--amber); }
.chip.cerca  b { color: var(--amber); }
.chip.cerca  { background: var(--amber-bg); }
.chip.pasado i.punto { background: var(--down-solid); box-shadow: 0 0 8px var(--down-solid); }
.chip.pasado b { color: var(--down); }
.chip.pasado { background: var(--down-bg); }
.chip[title] { cursor: help; }

/* ── Pestañas ──
   Grupo segmentado: la activa se rellena de azul. Un subrayado fino se pierde
   en una pantalla de esta densidad. */
.tabs { display: flex; gap: 2px; padding: 2px; width: fit-content;
        background: var(--sub); border-radius: 5px; }
.tabs button { border: 0; background: none; cursor: pointer;
               padding: 5px 14px; border-radius: 3px;
               font-size: var(--tx-base); font-weight: 500; color: var(--t4); }
.tabs button:hover { color: var(--t2); }
.tabs button.on { font-weight: 600; color: var(--t0); background: var(--btn); }
.tabs.menor button { padding: 4px 11px; font-size: var(--tx-menor);
                     font-weight: var(--tx-menor-peso); }

/* ── Rejilla de celdas dentro de tarjeta ──
   El separador es el fondo asomando: un gap de 1 px sobre el color de línea. */
.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 1px; background: var(--line); }
.cells.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cells > .cell { background: var(--card); padding: 11px 12px 12px; min-width: 0; }
.cells > .cell .rot { font-size: var(--tx-rot); font-weight: var(--tx-rot-peso);
                      letter-spacing: .11em; text-transform: uppercase; color: var(--t5); }
.cells > .cell .cif { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; }
.cells > .cell .val { font-family: var(--mono); font-variant-numeric: tabular-nums;
                      font-size: var(--tx-cifra); font-weight: 500; color: var(--t1);
                      letter-spacing: -.01em;
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cells > .cell .val.up { color: var(--up); }
.cells > .cell .val.down { color: var(--down); }
.cells > .cell .val.azul { color: var(--blue); }
.cells > .cell .val.suave { color: var(--t3); }
.cells > .cell .sub { display: block; margin-top: 7px;
                      font-size: var(--tx-menor); font-weight: var(--tx-menor-peso);
                      color: var(--t6); }
/* Sobre fondo hundido: se lee como resultado y no como otro campo del formulario. */
.cells.hundida > .cell { background: var(--sub); padding: 10px 12px; }
.cells.hundida .val { font-size: var(--tx-cifra-menor); }
.cells.hundida .sub { margin-top: 5px; line-height: 1.45; }

/* ── Tira de KPI ── */
/* Las tarjetas se reparten la fila sean las que sean: en perpetuos hay tres y en
   spot cuatro, y con un número fijo de columnas las de perpetuos dejaban huecos
   de fondo a la derecha. */
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        gap: var(--gap); }
.kpi { background: var(--card); border-radius: 4px;
       padding: 10px 12px 12px; min-width: 0; overflow: hidden; }
/* Un solo color para todos los rótulos. Con uno distinto por tarjeta el color
   dejaba de significar algo y pasaba a ser decoración. */
.kpi .rot { font-size: var(--tx-rot); font-weight: 700; letter-spacing: .11em;
            text-transform: uppercase; color: var(--blue-solid); }
.kpi .cif { display: flex; align-items: baseline; gap: 5px; margin-top: 9px; }
.kpi .val { font-family: var(--mono); font-variant-numeric: tabular-nums;
            font-size: var(--tx-cifra); font-weight: var(--tx-cifra-peso);
            letter-spacing: -.01em; color: var(--t1);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .val.up { color: var(--up); } .kpi .val.down { color: var(--down); }
.kpi .val.neutro { color: var(--t3); }
.kpi .sub { margin-top: 7px; font-size: var(--tx-menor); font-weight: var(--tx-menor-peso);
            color: var(--t6);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El importe en la otra moneda, al lado de la cifra y un escalon por debajo:
   la cuenta se lleva en bitcoin y los dolares son la referencia, no al reves. */
.kpi .uni.segundo { color: var(--t6); }
/* Las dos variaciones del precio, una por linea. */
.kpi-var { margin-top: 5px; font-family: var(--mono); font-variant-numeric: tabular-nums;
           font-size: var(--tx-menor); font-weight: var(--tx-menor-peso); color: var(--t6); }
.kpi-var span { font-weight: 600; }
/* La chispa se pega al filo de la tarjeta: es un dibujo de fondo, no un dato
   mas, y con margenes propios parecia otra cosa dentro del bloque. */
.kpi-chispa { display: block; width: calc(100% + 24px); height: 34px;
              margin: 8px -12px -12px; }

/* ── Medidor de reparto ──
   Para un reparto entre dos partes de un total. Era una tarjeta con cuatro
   cifras —bitcoin, efectivo, un porcentaje y el valor— y de un vistazo no decía
   lo único que se mira: en qué lado estás. Los dos tramos se separan con un
   hueco del color de la tarjeta, como todo lo que se toca en este sistema; un
   trazo alrededor añadiría tinta que no es dato. Las dos cifras de debajo van a
   los extremos, cada una con el color de su tramo: son la leyenda y el valor a
   la vez, así que el color nunca es lo único que identifica. */
.kpi-medidor { display: flex; gap: 2px; height: 6px; margin-top: 11px; }
.kpi-medidor i { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.kpi-extremos { display: flex; align-items: center; justify-content: space-between;
                gap: 8px; margin-top: 9px;
                font-family: var(--mono); font-variant-numeric: tabular-nums;
                font-size: var(--tx-menor); font-weight: var(--tx-menor-peso);
                color: var(--t6); white-space: nowrap; }
.kpi-extremos span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.kpi-extremos i { width: 6px; height: 6px; border-radius: 2px; flex: none; }
.kpi-medidor .dentro, .kpi-extremos .dentro { background: var(--blue-solid); }
.kpi-medidor .fuera,  .kpi-extremos .fuera  { background: var(--t7); }

/* Barrita de reparto dentro de una celda. */
.barra { margin-top: 9px; height: 3px; border-radius: 999px;
         background: var(--pista); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 999px;
             background: var(--blue-solid); }

/* ── Tablas ── */
.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-family: var(--mono);
         font-variant-numeric: tabular-nums;
         font-size: var(--tx-base); font-weight: var(--tx-base-peso); }
.tabla th { position: sticky; top: 0; z-index: 1; text-align: right;
            padding: 7px 12px; background: var(--cab);
            border-bottom: 1px solid var(--line);
            font-family: var(--font); font-size: var(--tx-rot);
            font-weight: var(--tx-rot-peso); letter-spacing: .11em;
            text-transform: uppercase; color: var(--t5); white-space: nowrap; }
.tabla th:first-child, .tabla th:nth-child(2) { text-align: left; }
.tabla td { text-align: right; padding: 6px 12px; border-bottom: 1px solid var(--fila);
            color: var(--t4); white-space: nowrap; }
.tabla td:first-child, .tabla td:nth-child(2) { text-align: left; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--hover); }
.tabla td.up { color: var(--up); } .tabla td.down { color: var(--down); }
.tabla td.fuerte { color: var(--t2); }
.tabla td b { font-weight: 600; }
.tabla.densa th, .tabla.densa td { padding: 5px 10px; font-size: var(--tx-menor); }

/* ── Avisos ── */
.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px;
         border-radius: 4px; font-size: var(--tx-base); line-height: 1.65;
         background: var(--card); color: var(--t3); }
.aviso b { font-weight: 600; font-family: var(--mono); color: var(--t2); }

.aviso.verde b { color: var(--up-claro); }
.aviso.ambar { background: var(--amber-bg); }
.aviso.ambar b { color: var(--amber-claro); }
.aviso.rojo  { background: var(--down-bg); }
.aviso.rojo b { color: var(--down-claro); }

/* ── Prosa y vacíos ──
   La prosa explica lo que la cifra no dice sola. Va al pie de la tarjeta, para
   que se lea DESPUÉS del dato y no antes. */
.prosa { padding: 10px 12px; font-size: var(--tx-base); font-weight: var(--tx-base-peso);
         line-height: 1.65; color: var(--t5); border-top: 1px solid var(--line); }
.prosa:first-child { border-top: 0; border-bottom: 1px solid var(--line); }
.prosa b { color: var(--t3); font-weight: 600; }
.vacio { padding: 28px 12px; display: flex; flex-direction: column;
         align-items: center; gap: 6px; text-align: center; }
.vacio b { font-size: var(--tx-base); font-weight: 400; color: var(--t3); }
.vacio span { font-size: var(--tx-menor); font-weight: var(--tx-menor-peso);
              color: var(--t6); max-width: 380px; line-height: 1.6; }

/* ── Selector ──
   El desplegable del navegador vestido como un control más. Por dentro se queda
   nativo: la lista que se abre la pinta el sistema, y rehacerla a mano sería
   perder el teclado y la accesibilidad por un color de fondo. */
.selector { -webkit-appearance: none; appearance: none; max-width: 100%;
            padding: 4px 26px 4px 9px; border-radius: 5px; cursor: pointer;
            background: var(--hueco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23737a89'/%3E%3C/svg%3E") no-repeat right 9px center;
            border: 1px solid var(--line-3); color: var(--t2);
            font-family: var(--mono); font-size: var(--tx-menor);
            font-weight: var(--tx-menor-peso);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selector:hover { border-color: var(--line-4); }
.selector:focus { outline: none; border-color: #3a5896;
                  box-shadow: 0 0 0 3px rgba(79,131,255,.10); }
.selector option { background: var(--card); color: var(--t2); }

/* ── Formularios ── */
.form { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.campo { min-width: 0; }
.campo > span { display: flex; align-items: center; justify-content: space-between;
                gap: 8px; margin-bottom: 6px;
                font-size: var(--tx-rot); font-weight: var(--tx-rot-peso);
                letter-spacing: .11em; text-transform: uppercase; color: var(--t5); }
.campo > span b { font-family: var(--mono); font-weight: 500;
                  font-size: var(--tx-menor); letter-spacing: 0;
                  text-transform: none; color: var(--t2); white-space: nowrap; }
.campo > span b.up { color: var(--up); }
.campo > span b.down { color: var(--down); }
.campo input[type=text], .campo input[type=password], .campo input[type=number] {
    width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px;
    background: var(--hueco); border: 1px solid var(--line-3); color: var(--t1);
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: var(--tx-base); outline: none;
}
.campo input:focus { border-color: #3a5896; box-shadow: 0 0 0 3px rgba(79,131,255,.10); }
.campo input::placeholder { color: var(--t7); font-family: var(--font);
                            font-size: var(--tx-menor); }
.campo input[type=range] { -webkit-appearance: none; appearance: none; width: 100%;
                           height: 4px; border-radius: 999px; outline: none; }
.campo input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: var(--blue-solid); border: 2px solid #0d1119;
    box-shadow: 0 0 0 3px rgba(79,131,255,.18); cursor: pointer; }
.campo input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%; background: var(--blue-solid);
    border: 2px solid #0d1119; cursor: pointer; }
/* El matiz bajo un campo: convierte «79.880» en algo que dice cuánto duele. */
.hint { margin-top: 5px; font-size: var(--tx-menor); font-weight: var(--tx-menor-peso);
        line-height: 1.5; color: var(--t6); }
.hint b { font-family: var(--mono); font-weight: 500; color: var(--t3); }
.hint .up, .hint .down { font-family: var(--mono); font-weight: 600; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Casilla propia: la del sistema no acepta el radio ni el azul del sistema. */
.check { display: flex; align-items: center; gap: 8px; cursor: pointer;
         font-size: var(--tx-base); color: var(--t3); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check i { width: 14px; height: 14px; border-radius: 4px; flex: none;
           border: 1px solid var(--line-3); background: var(--hueco);
           display: flex; align-items: center; justify-content: center;
           font-style: normal; font-size: var(--tx-rot); color: var(--t0); }
.check input:checked + i { background: var(--btn); border-color: var(--btn); }
.check input:checked + i::after { content: '✓'; }

/* ── Botones ──
   UN solo botón para toda la web, en dos tamaños. Antes había cuatro estilos
   —el de mandar, el de preguntar al analista, el de lado y el de nivel— con
   cuatro rellenos y tres pesos, y todos se veían grandes al lado de una
   pantalla tan compacta. El texto usa el cuerpo estándar, no uno propio. */
.btn { width: 100%; padding: 9px 0; border: 0; border-radius: 6px; cursor: pointer;
       background: var(--btn); color: var(--t0);
       font-family: var(--font); font-size: var(--tx-base); font-weight: 600;
       letter-spacing: .05em; }
.btn:hover:not(:disabled) { background: var(--btn-hover); }
.btn:disabled { background: var(--hover); color: var(--t7); cursor: default; }
.btn.auto { width: auto; padding: 8px 16px; }
/* De fila, no de pantalla: por eso pequeño y sin relleno de color. */
.btn-mini { padding: 4px 10px; border-radius: 5px; cursor: pointer;
            background: var(--hover); border: 1px solid var(--line-3); color: var(--t4);
            font-family: var(--font); font-size: var(--tx-menor);
            font-weight: var(--tx-menor-peso); }
.btn-mini:hover { color: var(--t2); border-color: var(--line-4); }
.btn-mini.peligro:hover { color: var(--down-claro); border-color: #8d3a44;
                          background: rgba(217,80,92,.14); }
.btn-mini:disabled { opacity: .45; cursor: default; }

/* ── Estrecho ── */
@media (max-width: 1180px) {
    .g2 { grid-template-columns: 1fr; }
}
@media (max-width: 1400px) {
    .kpis { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .ui { --gap: 8px; }
    .wrap { padding: var(--gap) 10px 0; }
    .kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cells, .cells.c3, .cells.c4 { grid-template-columns: 1fr 1fr; }
    .f2 { grid-template-columns: 1fr; }
    .nav { padding: 0 10px; gap: 2px; }
    .nav a { padding: 5px 8px; }
}