/* ============================================================
 * AndesPool — Hoja de estilos
 * Dirección de arte: "ESTACIÓN ANDES"
 * ------------------------------------------------------------
 * La página no es un folleto con datos adentro: es la carátula
 * de un instrumento instalado en la cordillera. Papel de
 * registro milimetrado al fondo, lecturas en celdas fresadas
 * separadas por filetes de 1 px, estados como LEDs cuadrados.
 *
 * TRES REGLAS DURAS (si las rompes, se cae la dirección):
 *   1. --radio máximo 2 px. Nada de píldoras ni cápsulas.
 *   2. Prohibida la box-shadow difusa. La profundidad se hace
 *      con filetes de 1 px y un inset superior de 4 % de blanco.
 *      (box-shadow 0 0 0 1px SÍ se usa: es un filete, no una sombra.)
 *   3. Cero degradados de relleno y cero color en los títulos.
 *
 * EL COLOR ES UN DATO — regla cromática auditable:
 *   HIELO  = el dato        (cifras y títulos; SIEMPRE)
 *   CENIZA = el rótulo      (serigrafía, unidades, contexto)
 *   CIAN   = lo accionable o lo vivo (enlaces, botón, foco, traza)
 *   SEMÁFORO verde/ámbar/rojo = SOLO los estados que emite app.js
 *   COBRE  = estructura     (filetes, marcas de registro, marca de
 *            agua). PROHIBIDO para texto y PROHIBIDO para estado.
 *   El ámbar y el cobre no se tocan nunca en el mismo componente.
 *
 * GOBIERNO DE TEXTURAS: máximo DOS texturas visibles a la vez y
 * NINGUNA detrás de datos. Hoy son: (a) la retícula milimetrada
 * del fondo y (b) la marca de agua del perfil en .tarjeta-pool.
 * La marca de agua sólo asoma en los márgenes de la tarjeta
 * porque las celdas de .stats-lista son opacas. Si algún día se
 * agrega una tercera trama, hay que apagar una de estas dos.
 *
 * LÍMITE CONOCIDO DE app.js (no lo prometas en el diseño):
 * formatearHashrate() devuelve "420.00 MH/s" como UN solo nodo de
 * texto — la unidad no se puede componer aparte. Y no existe
 * ningún porcentaje de participación, así que no hay micrografías
 * proporcionales posibles. La jerarquía sale del rótulo superior
 * y del tamaño, punto.
 *
 * Móvil primero, probado a 360 px. Sin dependencias externas
 * salvo Google Fonts (Chivo + Chivo Mono, Omnibus-Type, AR).
 * ============================================================ */


/* ============================================================
 * 1. TOKENS
 * ========================================================== */

:root {
    /* --- Superficies minerales --- */
    --andesita:   #0A0D10;   /* fondo global, grafito frío         */
    --basalto:    #12171C;   /* superficie de panel                */
    --esquisto:   #1A2128;   /* superficie-2, campos, thead        */
    --reticula:   #26313A;   /* filete estructural de 1 px         */
    --fila-par:   #161B20;   /* cebra al 2 % ya compuesta (opaca)  */

    /* --- Tintas --- */
    --hielo:      #E8F0F2;   /* 16.9:1 sobre andesita              */
    --ceniza:     #8A98A2;   /*  6.6:1 sobre andesita, 5.5 sobre esquisto */

    /* --- Acento único: cian de sonda (desaturado a propósito:
           el cian neón es el color de medio ecosistema cripto) --- */
    --cian:       #4FB8C9;   /*  8.4:1 sobre andesita              */

    /* --- Semáforo de instrumento (exclusivo de los estados) --- */
    --verde:      #23C07A;   /* 5.82:1 sobre su propio chip        */
    --ambar:      #FFB000;   /* 7.33:1 sobre su propio chip        */
    --rojo:       #FF5747;   /* 4.65:1 sobre su propio chip        */

    /* Fondos semánticos al 10 %, ya compuestos: nada de color-mix
       ni de rgba() sueltos dentro del media query de tema claro. */
    --verde-tenue: rgba(35, 192, 122, .10);
    --ambar-tenue: rgba(255, 176, 0, .10);
    --rojo-tenue:  rgba(255, 87, 71, .10);
    --rojo-trama:  rgba(255, 87, 71, .16);

    /* --- Estructura --- */
    --cobre:      #B4682F;   /* SOLO filetes, registro, marca de agua */

    /* --- Papel de registro --- */
    --reticula-fina: rgba(38, 49, 58, .40);
    --reticula-cota: rgba(38, 49, 58, .80);
    --paso: 8px;             /* línea fina    */
    --cota: 40px;            /* línea de cota */

    /* --- Luz cenital de panel (único recurso de volumen) --- */
    --luz: rgba(255, 255, 255, .04);

    /* --- Marca de agua: perfil de cordillera grabado --- */
    --marca-agua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60'%3E%3Cpolyline points='0,52 25,44 40,50 60,20 78,42 95,36 115,48 130,30 150,12 168,34 185,28 205,44 222,32 240,18 258,38 275,30 300,46' fill='none' stroke='%23B4682F' stroke-opacity='.55' stroke-width='1.5'/%3E%3C/svg%3E");

    /* --- Silueta volteada: estado vacío --- */
    --silueta-vacio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60'%3E%3Cg transform='translate(0,60) scale(1,-1)'%3E%3Cpolyline points='0,52 25,44 40,50 60,20 78,42 95,36 115,48 130,30 150,12 168,34 185,28 205,44 222,32 240,18 258,38 275,30 300,46' fill='none' stroke='%238A98A2' stroke-opacity='.30' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");

    /* --- Geometría --- */
    --radio: 2px;
    --rotulo: 0.72rem;       /* 11.5 px: por debajo se degrada en
                                Android de baja densidad          */
    --tracking-rotulo: .08em;

    /* --- Tipografía --- */
    --fuente: "Chivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    color-scheme: dark light;
}

/* ------------------------------------------------------------
 * Tema claro: el sistema invierte a PAPEL REAL. Sólo se
 * redefinen tokens — ni una sola regla de jerarquía cambia.
 * Los nombres conservan su ROL: --hielo sigue siendo "el dato",
 * aunque en claro sea tinta oscura.
 * ---------------------------------------------------------- */
@media (prefers-color-scheme: light) {
    :root {
        --andesita:   #F2F4F4;
        --basalto:    #FBFCFC;
        --esquisto:   #E6EBED;
        --reticula:   #C4CED3;
        --fila-par:   #F5F6F6;

        --hielo:      #0F1519;   /* 16.7:1 sobre papel */
        --ceniza:     #51606A;   /*  5.9:1 sobre papel */

        --cian:       #0A6273;   /*  6.3:1 sobre papel */

        --verde:      #0A6B3F;   /* 4.76:1 sobre su chip */
        --ambar:      #6F4B00;   /* 5.62:1 sobre su chip */
        --rojo:       #A81F13;   /* 5.18:1 sobre su chip */

        --verde-tenue: rgba(10, 107, 63, .10);
        --ambar-tenue: rgba(111, 75, 0, .10);
        --rojo-tenue:  rgba(168, 31, 19, .10);
        --rojo-trama:  rgba(168, 31, 19, .14);

        --cobre:      #7A400F;

        --reticula-fina: rgba(196, 206, 211, .55);
        --reticula-cota: rgba(196, 206, 211, .95);
        --luz: rgba(15, 21, 25, .05);

        --marca-agua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60'%3E%3Cpolyline points='0,52 25,44 40,50 60,20 78,42 95,36 115,48 130,30 150,12 168,34 185,28 205,44 222,32 240,18 258,38 275,30 300,46' fill='none' stroke='%237A400F' stroke-opacity='.30' stroke-width='1.5'/%3E%3C/svg%3E");
        --silueta-vacio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60'%3E%3Cg transform='translate(0,60) scale(1,-1)'%3E%3Cpolyline points='0,52 25,44 40,50 60,20 78,42 95,36 115,48 130,30 150,12 168,34 185,28 205,44 222,32 240,18 258,38 275,30 300,46' fill='none' stroke='%2351606A' stroke-opacity='.35' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
    }
}


/* ============================================================
 * 2. BASE
 * ========================================================== */

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

html {
    background: var(--andesita);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: transparent;
    color: var(--hielo);
    font-family: var(--fuente);
    font-size: 1rem;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- PAPEL DE REGISTRO -------------------------------------
 * Retícula milimetrada fija: línea fina cada 8 px, cota cada
 * 40 px. Los paneles van opacos encima, así el papel sólo se ve
 * en los márgenes y entre secciones. Si al hacer zoom trama
 * (moiré), SE SUBE EL PASO — nunca se baja la opacidad.
 * --------------------------------------------------------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(to right,  var(--reticula-fina) 0 1px, transparent 1px var(--paso)),
        repeating-linear-gradient(to bottom, var(--reticula-fina) 0 1px, transparent 1px var(--paso)),
        repeating-linear-gradient(to right,  var(--reticula-cota) 0 1px, transparent 1px var(--cota)),
        repeating-linear-gradient(to bottom, var(--reticula-cota) 0 1px, transparent 1px var(--cota));
}

/* padding-inline y no el atajo `padding`: .barra-estacion también
   lleva .contenedor y necesita conservar su padding vertical. */
.contenedor {
    max-width: 1080px;
    margin: 0 auto;
    padding-inline: 1rem;
}

/* Cifras: las columnas no bailan en el refresco de 30 s */
.cifra,
.stat-valor,
.tabla-bloques td,
.lat-cifra,
.cota-alt,
code {
    font-variant-numeric: tabular-nums;
}

a {
    color: var(--cian);
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

code {
    background: var(--esquisto);
    border: 1px solid var(--reticula);
    border-radius: var(--radio);
    padding: .08em .38em;
    font-family: var(--mono);
    font-size: .85em;
    color: var(--hielo);
}

strong { font-weight: 600; }

/* Foco: siempre visible, siempre cian, siempre cuadrado */
:focus-visible {
    outline: 2px solid var(--cian);
    outline-offset: 2px;
    border-radius: 0;
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
 * 3. TIPOGRAFÍA
 * Mnemotecnia para todo el equipo:
 *   si es un DATO, es mono. Si es una EXPLICACIÓN, es Chivo.
 * ========================================================== */

/* Rótulo serigrafiado: el nivel 1 de la jerarquía de lecturas */
.stat-nombre,
.barra-estacion,
.estado-conexion,
.tarjeta-algo,
.estado-chip,
.etiqueta-demo,
.tabla-bloques th,
.placa dt,
.lat-rotulo,
.sello,
.perfil-cotas .cota-nombre,
main h2::before {
    font-family: var(--mono);
    font-size: var(--rotulo);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--tracking-rotulo);
    line-height: 1.3;
}

/* Prosa */
.seccion-intro,
.pie-nota,
.nota-conexion,
.perfil-nota,
.mensaje-error,
.pie-compromisos {
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--ceniza);
    max-width: 68ch;
}

.seccion-intro { margin: 0 0 1rem; }

.seccion-intro strong,
.perfil-nota strong,
.nota-conexion strong { color: var(--hielo); }

/* --- Títulos de sección: rótulo de panel numerado -----------
 * 01  RESUMEN DE LAS POOLS ───────────────────────────────────
 * El número sale de un contador CSS; el filete es cobre porque
 * el cobre es estructura. El título va en HIELO, nunca en color.
 * Es flex, no grid, para que las cadenas portuguesas (más
 * largas) puedan romper sin anchos fijos.
 * --------------------------------------------------------- */
main { counter-reset: seccion; }

main h2 {
    counter-increment: seccion;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 2.75rem 0 1rem;
    font-family: var(--fuente);
    font-weight: 700;
    font-size: clamp(1.05rem, 4.2vw, 1.3rem);
    line-height: 1.25;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hielo);
}

main h2::before {
    content: counter(seccion, decimal-leading-zero);
    color: var(--ceniza);
    flex: none;
}

main h2::after {
    content: "";
    flex: 1 1 2rem;
    min-width: 1rem;
    height: 1px;
    background: var(--cobre);
}

main section:first-of-type h2 { margin-top: 1.75rem; }

h3 {
    font-family: var(--fuente);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
    color: var(--hielo);
}


/* ============================================================
 * 4. CABECERA
 * ========================================================== */

.cabecera {
    background: var(--basalto);
    border-bottom: 1px solid var(--reticula);
    border-top: 2px solid var(--cian);
    box-shadow: inset 0 1px 0 var(--luz);
    padding: 1rem 0 0;
}

.cabecera-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
}

.marca {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

/* Marca de vértice geodésico: el símbolo cartográfico real de un
   punto de triangulación. Cumbre y precisión en un mismo glifo. */
.marca-logo {
    display: inline-flex;
    flex: none;
    line-height: 0;
}

.marca-glifo { width: 26px; height: 26px; }
.marca-glifo .glifo-cumbre   { stroke: var(--hielo); }
.marca-glifo .glifo-registro { stroke: var(--cobre); }
.marca-glifo .glifo-punto    { fill: var(--cobre); }

.marca-nombre {
    margin: 0;
    font-weight: 700;
    font-size: clamp(1.2rem, 5.2vw, 1.55rem);
    line-height: 1.1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hielo);
}

.marca-lema {
    margin: .2rem 0 0;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--ceniza);
}

/* --- Estado de conexión: LED cuadrado con bisel ------------- */
.estado-conexion {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--esquisto);
    border: 1px solid var(--reticula);
    border-radius: var(--radio);
    padding: .4rem .7rem;
    color: var(--ceniza);
}

#estado-texto {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--hielo);
}

.punto {
    width: 9px;
    height: 9px;
    flex: none;
    display: inline-block;
    border-radius: 1px;
    background: currentColor;
    box-shadow: 0 0 0 1px var(--reticula), 0 0 10px currentColor;
}

.punto-neutro  { color: var(--ambar); }
.punto-offline { color: var(--rojo); }
.punto-online  {
    color: var(--verde);
    animation: latido 2.4s ease-in-out infinite;
}

@keyframes latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

/* --- PERFIL COTADO DE LA CORDILLERA ------------------------
 * Micrografía firma nº 1 de las dos que existen en todo el
 * sitio. Instala la lectura visual: perfil = traza = hashrate.
 * NO finge ser un dato en vivo, y el figcaption lo dice.
 * --------------------------------------------------------- */
.perfil {
    margin: 1.1rem 0 0;
}

.perfil-traza {
    display: block;
    width: 100%;
    height: 56px;
}

.perfil-traza .traza      { stroke: var(--cian); }
.perfil-traza .cota-marca { stroke: var(--cobre); }

.perfil-cotas {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
}

.perfil-cotas li {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    align-items: center;
    text-align: center;
    padding: .4rem .3rem;
    background: var(--basalto);
    box-shadow: 0 0 0 1px var(--reticula);
    min-width: 0;
}

.cota-nombre { color: var(--ceniza); }

.cota-alt {
    font-family: var(--mono);
    font-weight: 500;
    font-size: .8rem;
    color: var(--hielo);
}

.perfil-nota {
    margin: .55rem 0 0;
    font-size: .78rem;
    color: var(--ceniza);
}

/* --- BARRA DE ESTACIÓN ------------------------------------
 * Convierte el diferencial de latencia LatAm en instrumentación
 * en vez de en un eslogan. El separador es un punto medio
 * generado por CSS: en Portugués nada se corta porque envuelve.
 * --------------------------------------------------------- */
.barra-estacion {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    margin: 1rem auto 0;
    padding-top: .6rem;
    padding-bottom: .6rem;
    border-top: 1px solid var(--reticula);
    color: var(--ceniza);
}

.barra-estacion span { white-space: nowrap; }

.barra-estacion span:not(:last-child)::after {
    content: "·";
    margin-left: .5rem;
    color: var(--cobre);
}

/* La marcha blanca es la única cadena larga de la barra: tiene que
   poder envolver o se sale del teléfono. */
.barra-estacion .estacion-marcha {
    white-space: normal;
    color: var(--hielo);
}

.barra-estacion #dias-linea { color: var(--ambar); }


/* ============================================================
 * 5. BANNER DEMO — sobreimpresión tramada
 * Se autodiagnostica el riesgo: un panel vacío tiene que
 * leerse como advertencia deliberada del fabricante, no como
 * página rota. Por eso pesa en rojo y va tramado.
 * ========================================================== */

.banner {
    display: block;
    margin-top: 1rem;
    padding: .85rem 1rem;
    background-color: var(--rojo-tenue);
    background-image: repeating-linear-gradient(
        135deg,
        var(--rojo-trama) 0 6px,
        transparent 6px 14px
    );
    border: 1px solid var(--rojo);
    border-left-width: 3px;
    border-radius: var(--radio);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--hielo);
}

.banner strong { color: var(--rojo); font-weight: 700; }

.banner-oculto { display: none; }

.etiqueta-demo {
    display: inline-block;
    padding: .1em .5em;
    color: var(--rojo);
    border: 1px solid var(--rojo);
    border-radius: var(--radio);
    background-image: repeating-linear-gradient(
        135deg,
        var(--rojo-trama) 0 4px,
        transparent 4px 9px
    );
    font-size: .62rem;
    letter-spacing: .16em;
    white-space: nowrap;
    vertical-align: .12em;
}


/* ============================================================
 * 6. TARJETAS DE RESUMEN + PLACA DE LECTURAS
 * ========================================================== */

.rejilla-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
}

.tarjeta-pool {
    background-color: var(--basalto);
    background-image: var(--marca-agua);
    background-repeat: no-repeat;
    background-position: right -20px bottom -8px;
    background-size: 230px auto;
    border: 1px solid var(--reticula);
    border-radius: var(--radio);
    box-shadow: inset 0 1px 0 var(--luz);
    padding: .9rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    min-width: 0;
}

.tarjeta-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem .6rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--reticula);
}

.tarjeta-titulo {
    margin: 0;
    font-family: var(--fuente);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--hielo);
    min-width: 0;
}

.tarjeta-titulo .mensaje-info {
    font-family: var(--mono);
    font-size: .8rem;
    font-weight: 400;
    color: var(--ceniza);
}

.tarjeta-algo {
    flex: none;
    color: var(--cian);
    border: 1px solid var(--cian);
    border-radius: var(--radio);
    padding: .12em .45em;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- PANEL FRESADO DE LECTURAS -----------------------------
 * gap:1px + box-shadow 0 0 0 1px en CADA celda. Los halos se
 * solapan y dan el mismo filete continuo que un `background` en
 * el contenedor, PERO las filas incompletas no dejan bloques
 * sólidos de color retícula. Esto importa: renderMinero() pinta
 * 6 lecturas MÁS un div por cada equipo, así que la última fila
 * casi nunca queda completa.
 *
 * 2 columnas fijas en .tarjeta-pool a TODOS los anchos, y no 3
 * en escritorio, por una medición concreta: con la rejilla de
 * tarjetas a 3 columnas la tarjeta mide ~350 px, y 3 columnas de
 * lecturas dejan ~87 px útiles por celda. "420.00 MH/s" y
 * "1.234,5678 RVN" llegan como un solo nodo de texto (ver el
 * límite de app.js arriba) y necesitan ~130 px para no partirse
 * a la mitad. 2×3 cierra la placa sin huérfanas.
 * --------------------------------------------------------- */
.stats-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
}

.stats-lista > div {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    min-width: 0;
    padding: .7rem .8rem;
    background: var(--basalto);
    box-shadow: 0 0 0 1px var(--reticula), inset 0 1px 0 var(--luz);
}

.stats-lista dd { margin: 0; }

/* Nivel 1: el rótulo */
.stat-nombre { color: var(--ceniza); }

/* Nivel 2: la cifra. Siempre en hielo, nunca en el acento. */
.stat-valor {
    font-family: var(--mono);
    font-weight: 500;
    font-size: clamp(1rem, 4vw, 1.15rem);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--hielo);
    overflow-wrap: break-word;
}

/* Los valores que no son cifra (fechas relativas) bajan a
   contexto: nivel 3 de la jerarquía. */
.stat-valor:not(.cifra) {
    font-family: var(--fuente);
    font-weight: 400;
    font-size: .9rem;
    letter-spacing: 0;
    color: var(--ceniza);
}

.stat-valor:not(.cifra) a { color: var(--cian); }

/* El estado se ve sin tocar app.js: LED de 6 px antes del
   número. El número se queda en hielo (regla cromática). */
.stat-valor.ok::before,
.stat-valor.mal::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    margin-right: .45em;
    vertical-align: .18em;
    box-shadow: 0 0 0 1px var(--reticula), 0 0 6px currentColor;
}

.stat-valor.ok::before  { background: var(--verde); color: var(--verde); }
.stat-valor.mal::before { background: var(--rojo);  color: var(--rojo); }


/* ============================================================
 * 7. CONÉCTATE
 * ========================================================== */

.rejilla-conexion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 1rem;
}

.tarjeta-conexion {
    counter-reset: linea;
    background: var(--basalto);
    border: 1px solid var(--reticula);
    border-radius: var(--radio);
    box-shadow: inset 0 1px 0 var(--luz);
    padding: .9rem;
    min-width: 0;
}

.tarjeta-conexion h3 {
    margin: 0 0 .7rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--reticula);
}

.tarjeta-conexion .stat-nombre {
    display: block;
    margin-top: .7rem;
    color: var(--ceniza);
}

/* --- Línea stratum: renglón de registrador -----------------
 * 0.8 rem y letter-spacing 0 a propósito: Chivo Mono tiene
 * avance ancho y estas líneas ya se desplazan en horizontal.
 * Click/Enter la copia (ver paisaje.js): en la granja, con el
 * teléfono en la mano, seleccionarla a dedo es imposible.
 * --------------------------------------------------------- */
.linea-stratum {
    display: block;
    margin: .3rem 0 0;
    padding: .5rem .7rem;
    background: var(--esquisto);
    border: 1px solid var(--reticula);
    border-left: 2px solid var(--cian);
    border-radius: var(--radio);
    font-family: var(--mono);
    font-size: .8rem;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--cian);
    white-space: nowrap;
    overflow-x: auto;
    cursor: pointer;
}

.linea-stratum::before {
    counter-increment: linea;
    content: counter(linea, decimal-leading-zero);
    position: sticky;
    left: 0;
    display: inline-block;
    padding-right: .8rem;
    background: var(--esquisto);
    color: var(--ceniza);
    font-weight: 400;
    user-select: none;
}

.linea-stratum:hover { border-left-color: var(--hielo); }

.linea-ejemplo { color: var(--hielo); }

.nota-conexion { margin: .7rem 0 0; font-size: .82rem; }

.aviso-copia {
    margin: .75rem 0 0;
    min-height: 1.2em;
    font-family: var(--mono);
    font-size: var(--rotulo);
    letter-spacing: var(--tracking-rotulo);
    text-transform: uppercase;
    color: var(--verde);
}

.aviso-copia.aviso-error { color: var(--rojo); }


/* ============================================================
 * 8. LATENCIA MEDIDA
 * Un instrumento que publica su método es el argumento de
 * confianza más fuerte del sitio: por eso van juntos la barra,
 * la fecha, el origen y el comando exacto para repetirla.
 * Las barras van en HIELO (son un dato) y la de la competencia
 * en CENIZA tramada. Aquí el cian no pinta nada.
 * ========================================================== */

.panel-latencia {
    display: grid;
    gap: 1px;
    border: 1px solid var(--reticula);
    border-radius: var(--radio);
    background: var(--basalto);
    box-shadow: inset 0 1px 0 var(--luz);
    overflow: hidden;
}

.latencias {
    list-style: none;
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
}

.lat-fila {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .45rem .75rem;
    padding: .8rem .9rem;
    background: var(--basalto);
    box-shadow: 0 0 0 1px var(--reticula);
    min-width: 0;
}

.lat-rotulo { color: var(--ceniza); min-width: 0; }

.lat-cifra {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--hielo);
    white-space: nowrap;
}

.lat-barra {
    grid-column: 1 / -1;
    position: relative;
    height: 10px;
    background-color: var(--esquisto);
    background-image: repeating-linear-gradient(
        to right,
        var(--reticula) 0 1px,
        transparent 1px 25%
    );
    box-shadow: inset 0 0 0 1px var(--reticula);
}

.lat-relleno {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--desde, 0%);
    width: var(--pct, 0%);
    background: var(--hielo);
}

/* La competencia: misma escala, trama distinta, cero color */
.lat-rango {
    background-color: transparent;
    background-image: repeating-linear-gradient(
        135deg,
        var(--ceniza) 0 2px,
        transparent 2px 6px
    );
    box-shadow: inset 0 0 0 1px var(--ceniza);
}

.lat-escala {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .9rem;
    margin: 0;
    background: var(--esquisto);
    box-shadow: 0 0 0 1px var(--reticula);
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--ceniza);
}


/* ============================================================
 * 9. PLACA DE ESPECIFICACIÓN (método de medición, soporte)
 * ========================================================== */

.placa {
    counter-reset: linea;
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
}

.placa > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: .25rem .9rem;
    padding: .7rem .9rem;
    background: var(--basalto);
    box-shadow: 0 0 0 1px var(--reticula);
    min-width: 0;
}

.placa dt { color: var(--ceniza); }

.placa dd {
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--hielo);
    min-width: 0;
}

.placa dd .linea-stratum:first-child { margin-top: 0; }

/* El sello, recto a 0 grados: el timbre de goma torcido
   contradice la carátula calibrada. */
.sello {
    display: inline-block;
    margin: 1rem 0 0;
    padding: .55rem .85rem;
    border: 1px solid var(--cobre);
    border-radius: var(--radio);
    box-shadow: inset 0 0 0 3px var(--basalto), inset 0 0 0 4px var(--cobre);
    color: var(--hielo);
    font-weight: 700;
    letter-spacing: .14em;
}


/* ============================================================
 * 10. BUSCADOR Y RESULTADO DEL MINERO
 * ========================================================== */

.buscador {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
}

.buscador select,
.buscador input,
.buscador button {
    font-family: var(--fuente);
    font-size: .9rem;
    border: 1px solid var(--reticula);
    border-radius: var(--radio);
    padding: .6rem .75rem;
    min-width: 0;
}

.buscador select {
    flex: 1 1 9rem;
    background: var(--esquisto);
    color: var(--hielo);
}

.buscador input {
    flex: 1 1 15rem;
    background: var(--esquisto);
    color: var(--hielo);
    font-family: var(--mono);
    font-size: .8rem;
    letter-spacing: 0;   /* carácter a carácter, para cotejar la wallet */
}

.buscador input::placeholder {
    font-family: var(--fuente);
    font-size: .85rem;
    color: var(--ceniza);
    opacity: 1;
}

.buscador button {
    flex: 1 1 auto;
    background: var(--cian);
    border-color: var(--cian);
    color: var(--andesita);
    font-family: var(--mono);
    font-weight: 700;
    font-size: var(--rotulo);
    text-transform: uppercase;
    letter-spacing: var(--tracking-rotulo);
    padding-inline: 1.4rem;
    cursor: pointer;
}

.buscador button:hover { filter: brightness(1.12); }

.resultado-minero { margin-top: .25rem; }

/* LO TUYO SE VE MÁS GRANDE QUE LO DE LA POOL.
   #resultado-minero reutiliza .tarjeta-pool: subir aquí la
   escala (y sólo aquí) le da jerarquía propia a la sección que
   el minero vino a buscar, sin tocar app.js. */
#resultado-minero .tarjeta-pool {
    border-left: 2px solid var(--cian);
}

#resultado-minero .stats-lista {
    /* número variable de celdas: 6 lecturas + 1 por cada equipo.
       190 px es el ancho mínimo que deja respirar una cifra de
       1.55 rem sin partir "420.00 MH/s" a la mitad. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

#resultado-minero .stat-valor {
    font-size: clamp(1.3rem, 6vw, 1.55rem);
}

#resultado-minero .stat-valor:not(.cifra) {
    font-size: .95rem;
}


/* ============================================================
 * 11. TABLA DE BLOQUES
 * ========================================================== */

.tabla-envoltura {
    position: relative;
    overflow-x: auto;
    background: var(--basalto);
    border: 1px solid var(--reticula);
    border-radius: var(--radio);
    box-shadow: inset 0 1px 0 var(--luz);
}

.tabla-bloques {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: .8rem;
    letter-spacing: 0;
}

.tabla-bloques th,
.tabla-bloques td {
    text-align: left;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--reticula);
    white-space: nowrap;
}

.tabla-bloques th {
    color: var(--ceniza);
    background: var(--esquisto);
    font-weight: 400;
}

.tabla-bloques td { color: var(--hielo); }

/* Cebra al 2 %: Estación Andes la prohíbe, pero en 6 columnas
   que se desplazan a mano en un teléfono de 360 px el ojo pierde
   la fila. Ya viene compuesta como color opaco (--fila-par)
   porque la primera celda es sticky y no admite transparencia. */
.tabla-bloques tbody tr:nth-child(even) td { background: var(--fila-par); }

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

/* El hover no cambia el fondo entero: enciende una barra de
   2 px a la izquierda, como el cursor de un registrador. */
.tabla-bloques tbody tr:hover td:first-child {
    box-shadow: inset 2px 0 0 var(--cian), 1px 0 0 var(--reticula);
}

/* Altura, Recompensa y Esfuerzo a la derecha */
.tabla-bloques th:nth-child(2), .tabla-bloques td:nth-child(2),
.tabla-bloques th:nth-child(4), .tabla-bloques td:nth-child(4),
.tabla-bloques th:nth-child(5), .tabla-bloques td:nth-child(5) {
    text-align: right;
}

/* ALTURA DE BLOQUE COMO COTA DE CUMBRE. El dato que prueba la
   honestidad de la pool lleva la firma visual de la marca.
   El separador de miles ya lo entrega app.js con es-CL. */
.tabla-bloques tbody td:nth-child(2)::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: .45em;
    vertical-align: .05em;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid var(--cobre);
}

/* Salvo en las filas de estado (colspan=6), que son la 1.ª celda */
.tabla-bloques tbody td[colspan]::before { content: none; }

/* Etiqueta rectangular con barra semántica de 3 px. Leída en
   diagonal en el teléfono, la columna Estado es una tira de LEDs.
   Contrastes verificados sobre ESQUISTO (el fondo real dentro de
   la tabla), no sobre andesita: verde 5.82 / ámbar 7.33 / rojo 4.65. */
.estado-chip {
    display: inline-block;
    padding: .18em .5em;
    border-radius: var(--radio);
    border-left: 3px solid currentColor;
    color: var(--ceniza);
    background: transparent;
}

.estado-confirmado { color: var(--verde); background: var(--verde-tenue); }
.estado-pendiente  { color: var(--ambar); background: var(--ambar-tenue); }
.estado-huerfano   { color: var(--rojo);  background: var(--rojo-tenue); }

/* Aviso de desplazamiento: el borde derecho se desvanece para
   que en móvil se vea que la tabla sigue. */
@supports (mask-image: linear-gradient(#000, #000)) {
    @media (max-width: 719px) {
        .tabla-envoltura {
            -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
        }
    }
}

/* COLUMNA STICKY EN MÓVIL. En un teléfono el scroll de la tabla
   es horizontal: lo que se pierde al desplazar es la Moneda, no
   el thead. (El thead pegajoso no sirve aquí: .tabla-envoltura
   es su propio contenedor de scroll y top:0 no tiene contra qué
   pegarse.) */
@media (max-width: 719px) {
    .tabla-bloques th:first-child,
    .tabla-bloques td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        box-shadow: 1px 0 0 var(--reticula);
    }
    .tabla-bloques td:first-child { background: var(--basalto); }
    .tabla-bloques tbody tr:nth-child(even) td:first-child { background: var(--fila-par); }
    .tabla-bloques th:first-child { background: var(--esquisto); }
}


/* ============================================================
 * 12. ESTADOS: EN LECTURA, SIN LECTURA, ERROR
 * El instrumento honesto DECLARA que todavía no mide.
 * El instrumento roto no dice nada.
 * ========================================================== */

.cargando {
    margin: 0;
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--ceniza);
}

.cargando::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 1px;
    margin-right: .6em;
    vertical-align: .05em;
    background: var(--ambar);
    box-shadow: 0 0 0 1px var(--reticula);
    animation: latido 1.2s ease-in-out infinite;
}

.mensaje-info { color: var(--ceniza); }

/* Estado vacío de la rejilla de pools */
#tarjetas-pools > .mensaje-info,
.tabla-bloques td.mensaje-info {
    display: block;
    padding: 1.6rem 1rem 2.4rem;
    font-family: var(--fuente);
    font-size: .9375rem;
    white-space: normal;
    text-align: center;
    background-image: var(--silueta-vacio);
    background-repeat: no-repeat;
    background-position: center bottom .5rem;
    background-size: 220px auto;
}

#tarjetas-pools > .mensaje-info::before,
.tabla-bloques td.mensaje-info::before {
    content: "Sin lectura";
    display: block;
    margin-bottom: .5rem;
    font-family: var(--mono);
    font-size: var(--rotulo);
    text-transform: uppercase;
    letter-spacing: var(--tracking-rotulo);
    color: var(--ambar);
}

.mensaje-error {
    margin: 0;
    max-width: 68ch;
    padding: .8rem 1rem;
    color: var(--hielo);
    background: var(--rojo-tenue);
    border: 1px solid var(--rojo);
    border-left-width: 3px;
    border-radius: var(--radio);
}

.mensaje-error::before {
    content: "Sin resultado";
    display: block;
    margin-bottom: .35rem;
    font-family: var(--mono);
    font-size: var(--rotulo);
    text-transform: uppercase;
    letter-spacing: var(--tracking-rotulo);
    color: var(--rojo);
}


/* ============================================================
 * 13. PIE
 * ========================================================== */

.pie {
    margin-top: 3rem;
    padding: 2rem 0 2.5rem;
    background: var(--basalto);
    border-top: 1px solid var(--reticula);
    box-shadow: inset 0 1px 0 var(--luz);
}

.pie-titulo {
    margin: 0 0 1rem;
    font-family: var(--fuente);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hielo);
}

.pie-compromisos {
    list-style: none;
    display: grid;
    gap: 1px;
    margin: 0 0 1.5rem;
    padding: 0;
    max-width: none;
}

.pie-compromisos li {
    padding: .7rem .9rem;
    background: var(--basalto);
    box-shadow: 0 0 0 1px var(--reticula);
    color: var(--ceniza);
}

.pie-compromisos strong { color: var(--hielo); }

.pie-icono {
    color: var(--cobre);
    margin-right: .55rem;
    font-weight: 700;
}

.pie-subtitulo {
    margin: 0 0 .6rem;
    font-family: var(--mono);
    font-size: var(--rotulo);
    text-transform: uppercase;
    letter-spacing: var(--tracking-rotulo);
    color: var(--ceniza);
}

.pie-nota { margin: 1.5rem 0 0; font-size: .85rem; }


/* ============================================================
 * 14. ESCRITORIO
 * ========================================================== */

@media (min-width: 560px) {
    .perfil-cotas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .placa > div  { grid-template-columns: minmax(8rem, auto) 1fr; align-items: baseline; }
}

@media (min-width: 720px) {
    .contenedor { padding-inline: 1.5rem; }
    .perfil-traza { height: 72px; }
    .tarjeta-pool,
    .tarjeta-conexion { padding: 1rem 1.15rem; }
    .buscador button { flex: 0 0 auto; }
    .pie-compromisos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Bajo 480 px la trama sube de paso para no vibrar */
@media (max-width: 479px) {
    :root { --paso: 12px; --cota: 60px; }
}


/* ============================================================
 * 15. MOVIMIENTO E IMPRESIÓN
 * ========================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    body::before,
    .tarjeta-pool { background-image: none; }
    .tabla-envoltura { overflow: visible; }
}

/* ============================================================
   CATÁLOGO DE EQUIPOS — placas de especificación
   Lenguaje "Estación Andes": celdas fresadas, filetes de 1 px,
   cifras en hielo, color solo para estado.
   ============================================================ */

.seccion-catalogo { margin-top: calc(var(--paso) * 6); }

.catalogo-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--paso);
    align-items: end;
    padding: var(--paso) calc(var(--paso) * 1.25);
    margin: calc(var(--paso) * 1.5) 0;
    background: var(--basalto);
    border: 1px solid var(--reticula);
    border-radius: var(--radio);
}

.filtro-campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; }

.filtro-campo input,
.filtro-campo select {
    font: inherit;
    font-size: 0.9rem;
    color: var(--hielo);
    background: var(--andesita);
    border: 1px solid var(--reticula);
    border-radius: 2px;
    padding: 7px 9px;
    min-height: 40px;
}
.filtro-campo input:focus-visible,
.filtro-campo select:focus-visible {
    outline: 2px solid var(--cian);
    outline-offset: 1px;
}

.catalogo-cuenta {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--ceniza);
    white-space: nowrap;
    padding-bottom: 10px;
}

.catalogo-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--paso);
}

.equipo-placa {
    display: flex;
    flex-direction: column;
    background: var(--basalto);
    border: 1px solid var(--reticula);
    border-top: 2px solid var(--cobre);
    border-radius: var(--radio);
    padding: calc(var(--paso) * 1.1);
}

.equipo-cab {
    display: flex;
    gap: 10px;
    align-items: start;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--reticula);
}

.equipo-modelo {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--hielo);
    margin: 0;
    line-height: 1.25;
}

.equipo-marca {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ceniza);
    margin: 3px 0 0;
    letter-spacing: 0.04em;
}

.equipo-specs { display: flex; flex-direction: column; margin: 10px 0 0; }

.espec-fila {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--reticula-fina, var(--reticula));
    font-size: 0.84rem;
}
.espec-fila:last-child { border-bottom: 0; }

.espec-rotulo {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--ceniza);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    flex-shrink: 0;
}

.espec-valor {
    color: var(--hielo);
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.equipo-nota {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ceniza);
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--reticula);
}

.equipo-conexion {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--cobre);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.catalogo-aviso {
    font-size: 0.78rem;
    color: var(--ceniza);
    margin-top: calc(var(--paso) * 1.5);
    padding-top: var(--paso);
    border-top: 1px solid var(--reticula);
    max-width: 62ch;
}

@media (max-width: 480px) {
    .catalogo-rejilla { grid-template-columns: 1fr; }
    .catalogo-filtros { padding: 10px; }
    .filtro-campo { flex: 1 1 100%; }
}