/* Space Grotesk, sólo para las cinco letras del logo.
   Self-hosted y no por CDN: el subset son las tres letras distintas de RADAR
   (A, D, R) y pesa 1 KB, así que no hay nada que ahorrar delegándolo, y el
   elemento más visible de la app deja de depender de que Google responda.
   Ojo: el resto de la tipografía SIGUE viniendo del CDN, así que esto no hace
   a radar independiente de Google — sólo al logo. Self-hostear IBM Plex es
   otra tarea, y vale la pena antes del deploy. */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/space-grotesk-700-radar.woff2') format('woff2');
    unicode-range: U+41, U+44, U+52;
}

/* ============================================================
   LA PALETA

   Todo color de radar sale de acá. Ninguna regla del archivo lleva un
   literal: si lo lleva, el modo oscuro no la alcanza y se descuelga sola.

   Los valores del CLARO son EXACTAMENTE los que radar tenía antes de
   existir el theme. La extracción a variables no corrió ni un color; lo
   único que se unificó a propósito son los tres rojos de fondo de alerta
   (#fdf3f1, #fbeceb, #fdf1ee), que eran el mismo rol escrito tres veces
   con valores que diferían en un punto.
   ============================================================ */
:root {
    /* Superficies */
    --papel: #eceff3;          /* fondo de página */
    --panel: #ffffff;          /* fondo de card, barra, tabla, input */

    /* Texto */
    --tinta: #11161b;          /* el principal */
    --tinta-media: #46525e;    /* fichas: se lee, pero no compite con el título */
    --tenue: #64717e;          /* rótulos, metadatos, lo que acompaña */

    /* Líneas */
    --linea: #d2dae2;          /* bordes de card, input, insignia */

    /* Separadores de tabla. En claro es el mismo que --linea; en oscuro NO,
       y ésa es la razón de que exista como token aparte: radar tiene varias
       tablas densas —accesos, candidatos, mercado— y sobre fondo oscuro un
       borde al tono del resto hay que ir a buscarlo. */
    --linea-tabla: #d2dae2;

    /* Señal: el teal instrumental. Barra de score, foco, acciones, activo. */
    --senal: #0b6b5f;
    --senal-fuerte: #085449;   /* hover de lo accionable */
    --senal-fondo: #eef6f4;    /* relleno suave: la celda ideal de la matriz */

    /* El verde vivo del logo. Es un color NUEVO, no el de --senal: está a 71
       de distancia y es bastante más claro y saturado. Vive sólo en los blips
       del ícono, que es lo que le da el acento de marca al logotipo.
       NO CAMBIA entre claro y oscuro: es identidad, no superficie. */
    --senal-viva: #0daf4b;

    /* Lo que va ENCIMA de un fondo de señal. Era `#fff` repetido dieciséis
       veces; en oscuro deja de ser blanco, porque el teal se aclara y el
       texto blanco sobre teal claro no se lee. */
    --sobre-senal: #ffffff;
    --sobre-senal-tenue: #cfe6e1;   /* el <b> dentro de una pill activa */

    --publicado: #9a5b00;      /* ámbar: estado "ya lo publiqué" */
    --publicado-fondo: #fdf6e9;

    --alerta: #a3341f;
    --alerta-fondo: #fdf1ee;   /* regla de oro, caja de error, fila fallida */

    --tier-medio-fondo: #dfe7ec;
    --tier-medio-texto: #46586a;

    /* Bloque de comandos: ya era oscuro en modo claro, así que en oscuro
       cambia poco. Tiene su propio juego para no atarlo a --tinta, que sí
       se da vuelta. */
    --codigo-fondo: #11161b;
    --codigo-texto: #eaf3f1;
    --codigo-borde: #4a5a57;
    --codigo-tenue: #b9cbc7;

    /* Escala de calor: 6 escalones de teal cada vez más saturado. */
    --calor-1: #e9f2f0;
    --calor-2: #cfe4e0;
    --calor-3: #a6cfc8;
    --calor-4: #63ada2;
    --calor-5: #0b6b5f;
    --sobre-calor: #08221f;    /* texto sobre los escalones llenos */

    /* WhatsApp. Es marca de un tercero y por eso conserva su hue en los dos
       modos: en oscuro sube la luminosidad y nada más, para que siga
       leyéndose como "el verde de WhatsApp" y no como un verde cualquiera. */
    --whatsapp: #128c7e;
    --whatsapp-texto: #0f7568;

    --sombra: rgba(17, 22, 27, 0.12);
    --sombra-alta: rgba(17, 22, 27, 0.18);
    --velo: rgba(17, 22, 27, 0.28);   /* el fondo detrás del panel lateral */

    /* Que los controles NATIVOS sigan el tema: los <input type="date"> del
       panel de publicación, los checkboxes de /importar, las barras de
       scroll. Sin esto quedan dibujados en claro sobre fondo oscuro. */
    color-scheme: light;

    /* Los dos únicos anchos de la app, definidos acá y en ningún otro lado.
       Antes había tres contenedores diciendo lo mismo con distinta unidad
       —.hoja en 68ch, .hoja.ancha en 1040px y .estadistica en 1100px— y
       cambiar "el ancho" obligaba a acordarse de los tres. */
    --ancho-app: 1040px;      /* layout: tablas, formularios, datos */
    --medida-lectura: 68ch;   /* texto corrido: lo que se lee de un renglón */

    --radio: 3px;
    --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   MODO OSCURO

   Redefine los MISMOS tokens y ni una regla más. Si algún día hay que
   tocar una regla para que el oscuro ande, es señal de que a esa regla le
   quedó un literal adentro.

   La paleta es la variante B del preview —fondos con matiz terroso, que le
   dan más presencia al teal y al verde— con una sola cosa tomada de la
   variante C: la VISIBILIDAD del separador de tabla. No su valor: el de C
   (#39434e) es azulado y sobre superficies cálidas se ve como una línea
   fría. --linea-tabla es el hue y la saturación de B a la luminosidad de C,
   y mide 1.73:1 contra el panel, contra 1.80:1 de C y 1.25:1 del borde
   normal de B. Para referencia, el claro de hoy mide 1.41:1.

   Un único bloque y no también un @media (prefers-color-scheme): duplicar
   estos valores es garantizar que un día se desincronicen. La preferencia
   del sistema la resuelve el script del <head>, que la traduce a este mismo
   atributo. Sin JS, radar queda en claro — que es exactamente como estaba.
   ============================================================ */
:root[data-tema="oscuro"] {
    --papel: #171613;
    --panel: #201e1a;

    --tinta: #ece7df;
    --tinta-media: #c6bdb0;
    --tenue: #a09889;

    --linea: #332f29;
    --linea-tabla: #4a443b;

    /* El teal se ACLARA, y no es gusto: #0b6b5f sobre #201e1a da 1.6:1 y es
       ilegible. Conserva el rol y el hue, sube la luminosidad. */
    --senal: #3fb3a0;
    --senal-fuerte: #54c8b5;
    --senal-fondo: #1d2624;

    /* Idéntico al claro. Es identidad. */
    --senal-viva: #0daf4b;

    /* Ya no es blanco: sobre un teal claro, el blanco no contrasta. */
    --sobre-senal: #0f2320;
    --sobre-senal-tenue: #123b35;

    --publicado: #dda13f;
    --publicado-fondo: #2c2415;

    --alerta: #e8785c;
    --alerta-fondo: #2b1d17;

    --tier-medio-fondo: #332f28;
    --tier-medio-texto: #cabfae;

    --codigo-fondo: #100f0d;
    --codigo-texto: #e3ded4;
    --codigo-borde: #423c33;
    --codigo-tenue: #9f9587;

    --calor-1: #1e211d;
    --calor-2: #23342f;
    --calor-3: #2a5048;
    --calor-4: #307a6b;
    --calor-5: #3fb3a0;
    --sobre-calor: #0f2320;

    /* El verde de WhatsApp con el hue INTACTO (173° y 172°) y once puntos
       más de luminosidad, la misma subida para los dos para que conserven su
       relación. Sigue siendo su verde, no un verde genérico: 5.54:1 el texto
       contra el panel, o sea AA. */
    --whatsapp: #18beab;
    --whatsapp-texto: #15a794;

    /* Sobre fondo oscuro una sombra tintada no se ve: van a negro puro. */
    --sombra: rgba(0, 0, 0, 0.55);
    --sombra-alta: rgba(0, 0, 0, 0.6);
    --velo: rgba(0, 0, 0, 0.7);

    color-scheme: dark;
}

* { box-sizing: border-box; }

/* Altura completa: scrollean los filtros y la grilla por dentro, así la
   barra superior no se va nunca de pantalla. */
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Encabezado ---------- */

/* Tres zonas fijas: logo | estado | navegación.
   Con flex, el texto de estado compartía fila con la nav: en / sumaba 10px de
   alto y por debajo de 1280 envolvía y la barra pasaba de 72 a 121px. La misma
   barra medía distinto según la vista. En columnas propias, el estado se
   recorta con puntos suspensivos y nunca mueve nada. */
.barra {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 24px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--linea);
    background: var(--panel);
    flex: none;
}

/* Se achica y se recorta antes que empujar a la nav. */
.barra-estado { min-width: 0; }

.barra-estado .datos {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra h1 { margin: 0; line-height: 1; }

.barra .logo a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--senal);
    text-decoration: none;
}

/* La palabra. Space Grotesk sólo acá: el resto de la app no la usa.
   El letter-spacing es lo que hace respirar a un logotipo de cinco letras. */
/* Carbón neutro, no verde: el color de marca lo pone el ícono, y un logotipo
   verde al lado de una nav con verde de estado competiría con ella.
   --tinta (#11161b) es el gris oscuro que radar ya usa para todo su texto. */
.barra .logo span {
    font-family: 'Space Grotesk', var(--mono);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinta);
}

/* Alto de mayúscula, no del renglón: al lado de una versal de 17px el ícono
   se ve parejo a ~19px, no a 17. */
/* El ícono es de relleno, no de trazo: no hay stroke-width que ajustar, se
   controla nomás por tamaño. Y el dibujo no toca el borde del viewBox, así
   que tampoco hace falta overflow: visible como con el ícono anterior.
   Ojo con el alto: el dibujo ocupa 16 de las 24 unidades de alto (es más
   ancho que alto), así que a 21px mide 14 de alto — apenas por encima de la
   versal de 17px, que es donde se lee parejo al lado de RADAR. */
.barra .logo .logo-icono {
    width: 21px;
    height: 21px;
    flex: none;
}

.logo-ondas { fill: var(--senal); }
.logo-blip { fill: var(--senal-viva); }

.barra .logo a:hover span { color: var(--senal); }

.barra .datos {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--tenue);
}

.barra .datos b { color: var(--tinta); font-weight: 600; }

/* "N pendientes de publicar": es lo único de la franja que es del que mira,
   no del radar. En un día cualquiera va igual que el resto. */
.barra .datos .pendientes { white-space: nowrap; }

/* Los jueves, enfático: el color pasa al verde de la app y el número deja de
   ser tinta para acompañarlo. Se evalúa al renderizar la página, sin cron.
   El color no va solo: el texto suma "hoy es jueves", porque un cambio de
   color es invisible para quien no lo distingue. */
.barra .datos .pendientes.hoy,
.barra .datos .pendientes.hoy b { color: var(--senal); }

.barra h1 a { color: inherit; text-decoration: none; }
.barra h1 a:hover { color: var(--senal); }

.barra .nav { display: flex; align-items: center; }

.barra .nav-links { display: flex; align-items: center; gap: 2px; }

/* La hamburguesa sólo existe en móvil. */
.abrir-menu, .hamburguesa { display: none; }

/* Links de texto y no botones: nueve marcos compitiendo no jerarquizan nada.
   El padding se conserva para que el relleno del activo no corra a los
   vecinos y el espaciado quede parejo. */
.barra .nav a {
    padding: 5px 10px;
    border: 0;
    border-radius: var(--radio);
    color: var(--tinta);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.barra .nav a:hover { color: var(--senal); background: var(--papel); }

/* Un solo elemento con énfasis: dónde estás parado. */
.barra .nav a.actual,
.barra .nav a.actual:hover { background: var(--senal); color: var(--sobre-senal); }

/* La cuenta no es un destino más del recorrido: se separa con una línea. */
.barra .nav a.propio {
    margin-left: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--linea);
    border-radius: 0;
    color: var(--tenue);
    font-weight: 400;
}

.barra .nav a.propio:hover { background: none; color: var(--senal); }

/* Estando en /perfil, ese link lleva las DOS clases: `propio` y `actual`.
   Las reglas de arriba empatan en especificidad (0,3,1), así que gana la que
   va después —`.propio`—, y le devolvía el gris tenue encima del fondo verde
   que ya le había puesto `.actual`: texto oscuro sobre verde, ilegible.
   Acá el caso combinado se resuelve explícito, con más especificidad, en vez
   de depender del orden del archivo, que es invisible al leerlo.

   Estando activo se comporta como cualquier otro link activo —fondo verde,
   texto blanco, mismo peso y mismo redondeo—, que es el patrón de la barra:
   un solo elemento con énfasis, y el énfasis lo lleva el fondo. Lo único que
   conserva de `propio` es la línea que lo separa del resto: eso no es énfasis,
   es que la cuenta no es un destino más del recorrido. */
.barra .nav a.propio.actual,
.barra .nav a.propio.actual:hover {
    background: var(--senal);
    color: var(--sobre-senal);
    font-weight: 600;
    border-radius: var(--radio);
}


/* ---------- Cadencia de export por grupo ---------- */

/* Va arriba del tablero y ocupa poco: es un recordatorio, no una sección.
   Cuando los cinco grupos están al día no se dibuja nada. */
.cadencia {
    flex: none;
    margin: 16px 24px 0;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.cadencia-rotulo {
    margin: 0 0 6px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tenue);
}

.cadencia-lista { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.cadencia-lista li { padding: 3px 0 3px 12px; border-left: 3px solid transparent; }
.cadencia-lista .grupo { font-family: var(--mono); }
.cadencia-lista .tenue { color: var(--tenue); }

/* El color dice cuánto CUESTA postergar, no cuánto te atrasaste. Un quincenal
   vencido hace veinte días sigue siendo ámbar: son datos viejos y se arreglan
   exportando. ruta-1 vencido es rojo desde el primer día, porque a los 7
   WhatsApp borra y lo que cae del otro lado no se recupera. */
.cadencia-critico { border-left-color: var(--alerta) !important; color: var(--alerta); }
.cadencia-vencido,
.cadencia-se-acerca { border-left-color: var(--publicado) !important; }
.cadencia-vencido b:first-child,
.cadencia-se-acerca b:first-child { color: var(--publicado); }

/* La última señal, al costado y en chico: es contexto, no el dato principal. */
.cadencia-senal {
    margin-left: 6px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--tenue);
}

/* La misma paleta en la tabla del runbook, donde sí están siempre los cinco. */
.cadencia-marca { font-family: var(--mono); font-size: 11px; }
.cadencia-tabla .cadencia-critico { color: var(--alerta); font-weight: 600; }
.cadencia-tabla .cadencia-vencido,
.cadencia-tabla .cadencia-se-acerca { color: var(--publicado); }
.cadencia-tabla .cadencia-al-dia { color: var(--senal); }

/* ---------- Avisos ---------- */

.aviso {
    flex: none;
    margin: 16px 24px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--senal);
    background: var(--panel);
    font-size: 13px;
}

.aviso.error { border-left-color: var(--alerta); color: var(--alerta); }
.aviso ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- Tablero: filtros + grilla ---------- */

.tablero {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 20px;
    padding: 16px 24px 24px;
    overflow: hidden;
}

.abrir-filtros { display: none; }

.filtros {
    overflow-y: auto;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.filtros-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.filtros h2 {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tenue);
}

.enlace-reset {
    padding: 0;
    border: 0;
    background: none;
    color: var(--senal);
    font-family: var(--sans);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.conteo {
    margin: 8px 0 16px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

.filtro { margin: 0 0 18px; padding: 0; border: 0; }

.filtro legend {
    padding: 0;
    margin-bottom: 7px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tenue);
}

/* El grupo manda: el score no es comparable entre grupos. */
.filtro.destacado legend { color: var(--senal); font-weight: 600; }

.pills { display: flex; flex-wrap: wrap; gap: 5px; }

.pill { cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }

.pill span {
    display: inline-block;
    padding: 4px 9px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
}

.pill span b { color: var(--tenue); font-weight: 400; font-family: var(--mono); font-size: 11px; }
.pill:hover span { border-color: var(--senal); }
.pill input:checked + span { background: var(--senal); border-color: var(--senal); color: var(--sobre-senal); }
.pill input:checked + span b { color: var(--sobre-senal-tenue); }
.pill input:focus-visible + span { outline: 2px solid var(--senal); outline-offset: 1px; }

.filtro select, .filtro input[type="range"] { width: 100%; }

.filtro select {
    padding: 6px 8px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--panel);
    font-family: var(--sans);
    font-size: 13px;
    color: var(--tinta);
}

.filtro output {
    display: block;
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--tenue);
}

/* ---------- Grilla de tarjetas ---------- */

/* EL PADDING Y EL MARGEN NEGATIVO VAN JUNTOS: no los separes.

   `overflow-y: auto` convierte a la grilla en scroll container, y eso arrastra
   `overflow-x` de `visible` a `auto` —lo dice la spec—, así que recorta lo que
   se pinte fuera de su PADDING BOX. El anillo de foco de una tarjeta se dibuja
   4px POR FUERA de ella (2 de `outline-offset` más 2 de grosor), o sea que sin
   padding cae del otro lado del recorte: la primera columna perdía el tramo
   izquierdo del anillo y la primera fila el de arriba, y salían con tres lados.

   El `padding-right: 4px` ya estaba y es justo eso lo que venía salvando al
   lado derecho: acá se completan los otros dos.

   El margen negativo devuelve exactamente lo que el padding agrega, así que la
   caja de contenido queda DONDE ESTABA —mismas columnas, mismos anchos de
   track, mismo espaciado— y lo único que se corre hacia afuera es el borde de
   recorte. Los 4px de la izquierda salen del gap de 20px que la separa de los
   filtros, así que no se pisa nada. */
.grilla {
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px;
    align-content: start;
    padding: 4px 4px 0;
    margin: -4px 0 0 -4px;
}

/* La grilla de /a-publicar: no vive adentro del tablero —no hay filtros al
   lado— así que toma el ancho entero y hace su propio scroll como hijo flex
   del body. Las tarjetas son las mismas. */
.grilla.suelta {
    flex: 1;
    min-height: 0;
    /* Los 24px de los lados ya dejaban lugar de sobra para el anillo, así que
       acá sólo hace falta el de arriba, con su margen que lo compensa. El
       margen izquierdo se anula: no hay filtros al lado de los que colgarse. */
    padding: 4px 24px 24px;
    margin: -4px 0 0 0;
}

.a-publicar-intro {
    flex: none;
    max-width: 68ch;
    margin: 16px 24px 12px;
    font-size: 13px;
    color: var(--tenue);
}

.seccion-grupo { grid-column: 1 / -1; }

.seccion-titulo {
    margin: 8px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--linea);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tenue);
}

.seccion-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px;
}

.tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 12px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--linea);
    border-radius: var(--radio);
    cursor: pointer;
}

/* EL HOVER GANA POR ESPECIFICIDAD, NO POR ORDEN. No lo simplifiques a
   `.tarjeta:hover` a secas.

   `.tarjeta:hover` y `.tarjeta.marcada-historica` pesan lo MISMO —(0,2,0) las
   dos: una clase más una pseudo-clase contra dos clases—, así que el empate lo
   resolvía el orden del archivo, y las marcas están más abajo. Resultado: al
   pasar el mouse por una tarjeta marcada, los bordes de arriba, derecha y abajo
   se ponían teal y el izquierdo se quedaba con el color de su marca. El hover
   salía dibujado con tres lados.

   Se veía sólo en las marcadas, y `marcada-equipo` lo disimulaba porque su
   color ya ES el teal del hover. Nombrar cada marca sube el hover a (0,3,0) y
   lo deja de atar al orden, que es invisible al leerlo — el mismo criterio que
   `.barra .nav a.propio.actual`.

   `border-color` ya alcanza para los cuatro lados: el `border-left-color` que
   había al lado nunca pudo ganarle a la marca, porque el problema no era que
   faltara declararlo sino que la declaración perdía. */
.tarjeta:hover,
.tarjeta.marcada-propia:hover,
.tarjeta.marcada-equipo:hover,
.tarjeta.marcada-historica:hover { border-color: var(--senal); }
.tarjeta:focus-visible { outline: 2px solid var(--senal); outline-offset: 2px; }

/* Cuatro estados de campaña, de más a menos accionable. Sólo el propio y
   vigente se lleva fondo: los otros dos marcan sin pedir atención. */
.tarjeta.marcada-propia { background: var(--publicado-fondo); border-left-color: var(--publicado); }
.tarjeta.marcada-equipo { border-left-color: var(--senal); }
.tarjeta.marcada-historica { border-left-color: var(--linea); }

.tarjeta-marcas { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* ---------- El ★ de "A publicar" ---------- */

/* El form no tiene que ocupar lugar: el que se ve es el botón. */
.estrella-form { display: contents; }

.estrella {
    padding: 0;
    border: 0;
    background: none;
    /* Sin marcar: el gris de la app bajado, no --linea a secas. Con el color
       de las líneas el ☆ se leía como parte del marco de la tarjeta y no como
       algo que se puede apretar. */
    color: var(--tenue);
    opacity: 0.45;
    /* Un poco más grande que el resto: es un glifo de texto y a 14px se lee
       como un signo de puntuación en vez de como un control. */
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.estrella:hover { color: var(--senal); opacity: 1; }

/* Marcada: el verde de la app, y a plena opacidad. El ★ ya viene relleno del
   glifo, así que el estado se lee por forma y por color, no sólo por color. */
.estrella.marcada { color: var(--senal); opacity: 1; }
.estrella.marcada:hover { color: var(--tenue); opacity: 0.7; }

/* El foco se ve: es el único control de la tarjeta que se llega tabulando. */
.estrella:focus-visible { outline: 2px solid var(--senal); outline-offset: 2px; border-radius: 3px; }

.tarjeta-alto { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* El número que de verdad decide qué publicar. */
.compradores-grande { margin: 0; line-height: 1.1; }
.compradores-grande b { font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.compradores-grande span { display: block; margin-top: 2px; font-size: 12px; color: var(--tenue); }

.tier {
    padding: 3px 8px;
    border-radius: 11px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tier-alto { background: var(--senal); color: var(--sobre-senal); }
.tier-medio { background: var(--tier-medio-fondo); color: var(--tier-medio-texto); }
.tier-bajo { background: transparent; border: 1px solid var(--linea); color: var(--tenue); }

.score-linea { display: flex; align-items: center; gap: 8px; }
.score-valor { font-family: var(--mono); font-size: 12px; color: var(--tenue); min-width: 3.2em; }

.barra-senal { flex: 1; height: 4px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.barra-senal span { display: block; height: 100%; background: var(--senal); }

.tarjeta-titulo { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.tarjeta-que { margin: 0; font-size: 12px; color: var(--tenue); }

.tarjeta-precio { margin: 2px 0 0; font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.tarjeta-precio .inicial { margin-left: 6px; font-size: 11px; color: var(--tenue); text-decoration: line-through; }

.tarjeta-motivacion { margin: 0; font-size: 12px; }
.tarjeta-motivacion.baja-fuerte { color: var(--alerta); font-weight: 600; }
.tarjeta-motivacion.sin-bajas { color: var(--tenue); }

.tarjeta-pie {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--linea);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tarjeta-contacto { font-size: 12px; }
.tarjeta-contacto .pendiente { color: var(--alerta); }

.tarjeta-acciones { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.grupo {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--tenue);
    white-space: nowrap;
}

.ficha { color: var(--senal); font-weight: 600; font-size: 12px; text-decoration: none; white-space: nowrap; }
.ficha:hover { text-decoration: underline; }

.sin-resultados { padding: 32px 24px; text-align: center; color: var(--tenue); }

/* ---------- Panel de campañas ---------- */

.panel-fondo { position: fixed; inset: 0; z-index: 8; background: var(--velo); }

.panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: min(440px, 100%);
    height: 100vh;
    overflow-y: auto;
    background: var(--panel);
    border-left: 1px solid var(--linea);
    box-shadow: -6px 0 24px var(--sombra);
}

.panel-cabecera {
    position: sticky;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--panel);
    border-bottom: 1px solid var(--linea);
}

.panel-cabecera h2 { margin: 0; font-size: 15px; }
.panel-sub { margin: 4px 0 0; font-size: 12px; color: var(--tenue); }

/* El ★ y el ✕ juntos, alineados arriba a la derecha del panel. */
.panel-acciones { display: flex; align-items: center; gap: 8px; flex: none; }

.panel-cerrar {
    padding: 2px 8px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--panel);
    color: var(--tenue);
    font-size: 14px;
    cursor: pointer;
}

.panel-cerrar:hover { border-color: var(--senal); color: var(--senal); }

.panel-cuerpo { padding: 16px 18px 40px; }
.panel-cargando { padding: 24px 18px; color: var(--tenue); }

.panel-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.panel-datos dt {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tenue);
}
.panel-datos dd { margin: 2px 0 0; font-size: 14px; }

.panel-titulo {
    margin: 22px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--linea);
    font-size: 13px;
    font-weight: 600;
}

.panel-vacio { margin: 0 0 12px; font-size: 13px; color: var(--tenue); }

/* ---------- Ficha del inmueble ---------- */

/* La línea de la tarjeta: se lee de un saque, sin frenar en cada dato. Un
   punto más oscura que .tarjeta-que porque acá sí hay que leer. */
.tarjeta-ficha {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tinta-media);
}

/* Rótulo a la izquierda en ancho fijo: los valores arrancan todos en la
   misma columna y el ojo baja en línea recta buscando los que faltan. */
.ficha-completa { margin: 0 0 18px; font-size: 13px; }

.ficha-completa > div {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--linea);
}

.ficha-completa > div:last-child { border-bottom: 0; }

.ficha-completa dt { color: var(--tenue); }
.ficha-completa dd { margin: 0; }

/* El faltante tiene que gritar: es la señal de "andá a mirar la ficha". */
.ficha-completa .sin-dato dd { color: var(--alerta); }
.ficha-completa .verificar { color: var(--tenue); font-size: 12px; }

/* ---------- Antigüedad ---------- */

/* En la tarjeta va tenue y chica: importa, pero no le puede ganar al precio
   ni a los compradores, que son los que deciden primero. */
.tarjeta-antiguedad { margin: 0; font-size: 12px; color: var(--tenue); }

.antiguedad {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.6;
}

.antiguedad b { font-weight: 600; }
.antiguedad .tenue { color: var(--tenue); }

.antiguedad-lectura { margin: 0 0 18px; font-size: 13px; color: var(--tenue); }

/* Alerta suave, no roja: no es un error, es un "fijate antes de publicar".
   El ámbar es el mismo que marca "ya lo publiqué", que también es estado y
   no problema; el rojo queda reservado para el dato que falta. */
.antiguedad-lectura.vigencia-alerta {
    padding: 7px 10px;
    background: var(--publicado-fondo);
    border-left: 3px solid var(--publicado);
    border-radius: var(--radio);
    color: var(--publicado);
}

/* ---------- Plantilla del posteo ---------- */

/* Lo que se pega tal cual en el aviso. Monoespaciada y con los saltos de
   línea respetados: lo que se ve acá es exactamente lo que copia el botón.

   El botón va en el rótulo y no encima del bloque: flotando adentro le comía
   el ancho a todas las líneas y partía "planta baja" al medio, que se lee
   como si la plantilla tuviera un renglón más. */
.plantilla-alto { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plantilla-alto .panel-titulo { flex: 1; }

.plantilla {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--papel);
    border-left: 3px solid var(--senal);
    border-radius: var(--radio);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.plantilla-alto .copiar {
    padding: 3px 9px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--panel);
    color: var(--tenue);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
}

.plantilla-alto .copiar:hover { border-color: var(--senal); color: var(--senal); }

/* ---------- Acciones y formularios ---------- */

details > summary {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--senal);
    border-radius: var(--radio);
    background: var(--panel);
    color: var(--senal);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

details > summary::-webkit-details-marker { display: none; }
details > summary:hover { background: var(--senal); color: var(--sobre-senal); }
details[open] > summary { background: var(--senal); color: var(--sobre-senal); }

.panel-form {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--papel);
}

.campos { display: flex; flex-wrap: wrap; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 3px; }

.campo label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tenue);
}

input[type="text"], input[type="date"], input[type="number"], textarea {
    padding: 6px 8px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--panel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 13px;
}

input[type="number"] { font-family: var(--mono); width: 80px; }
textarea { width: 100%; min-height: 52px; resize: vertical; }

:focus-visible { outline: 2px solid var(--senal); outline-offset: 1px; }

.boton {
    align-self: flex-end;
    padding: 6px 14px;
    border: 1px solid var(--senal);
    border-radius: var(--radio);
    background: var(--senal);
    color: var(--sobre-senal);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.boton:hover { background: var(--senal-fuerte); }
.boton.tenue { background: var(--panel); color: var(--senal); }
.boton.tenue:hover { background: var(--senal); color: var(--sobre-senal); }

.insignia {
    display: inline-block;
    padding: 2px 8px;
    background: var(--publicado);
    color: var(--sobre-senal);
    border-radius: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Publicaciones cargadas ---------- */

.publicaciones { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }

.publicaciones li {
    padding: 8px 10px;
    border-left: 2px solid var(--publicado);
    background: var(--panel);
    font-size: 13px;
}

.publicaciones .cabecera { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.publicaciones .canal { font-weight: 600; }
.publicaciones .fecha { font-family: var(--mono); font-size: 11px; color: var(--tenue); }
.publicaciones .notas { margin: 4px 0 0; color: var(--tenue); font-size: 12px; }

/* Los números crudos y las derivadas van en dos renglones distintos: lo que
   se midió arriba, lo que se calculó abajo y en tono más bajo. */
.publicaciones .conteos,
.publicaciones .derivadas { margin: 5px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }

.publicaciones .conteos { font-size: 12px; }
.publicaciones .conteos b { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.publicaciones .derivadas { font-size: 11px; color: var(--tenue); }
.publicaciones .derivadas b { font-family: var(--mono); color: var(--senal); }

/* Dos filas fijas: los dos números arriba, el fin y el botón abajo. En una
   sola fila el label largo de interacciones empuja el ancho y los tres campos
   terminan apilados de a uno, con el formulario más alto que la campaña. */
.estadisticas-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* stretch + space-between: los rótulos arrancan todos arriba y los inputs
   quedan al ras abajo, aunque un rótulo ocupe dos renglones y el otro uno.
   Con align-items:flex-end el rótulo largo se iba tres líneas para arriba y
   los dos campos parecían de formularios distintos. */
.estadisticas-form .campos { align-items: stretch; gap: 8px; }
.estadisticas-form .campo { max-width: 132px; justify-content: space-between; }

/* El rótulo de interacciones es largo a propósito. Sin el espaciado de letra
   entra en dos renglones en vez de tres, y el formulario no crece. */
.estadisticas-form .campo label { letter-spacing: 0.04em; }
.estadisticas-form .campo.ancho { max-width: none; }
.estadisticas-form .sin-cargar { font-size: 11px; color: var(--tenue); align-self: center; }

.vacio { padding: 48px 24px; text-align: center; color: var(--tenue); }
.vacio code { font-family: var(--mono); background: var(--panel); padding: 2px 6px; border-radius: var(--radio); }

@media (max-width: 900px) {
    body { height: auto; }
    .marco { padding: 12px; }

    /* Los filtros pasan a un cajón que se abre con el botón. */
    .tablero { grid-template-columns: minmax(0, 1fr); padding: 12px; overflow: visible; }

    .abrir-filtros {
        display: block;
        width: 100%;
        padding: 9px 12px;
        border: 1px solid var(--senal);
        border-radius: var(--radio);
        background: var(--panel);
        color: var(--senal);
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .filtros { display: none; }
    .filtros-abiertos .filtros { display: block; }

    .grilla, .seccion-tarjetas { grid-template-columns: minmax(0, 1fr); overflow: visible; }

    /* El panel pasa a hoja inferior. */
    .panel {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 88vh;
        border-left: 0;
        border-top: 1px solid var(--linea);
        border-radius: 10px 10px 0 0;
        box-shadow: 0 -6px 24px var(--sombra-alta);
    }

    body.con-panel { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}


/* ---------- Página de lectura (ayuda) ---------- */

.lectura { flex: 1; min-height: 0; overflow-y: auto; padding: 32px 24px 72px; }

/* El contenedor de layout: la caja blanca que alinea a todas las subpáginas.
   Su ancho es el de la app, no el de un renglón de texto. */
.hoja {
    max-width: var(--ancho-app);
    margin: 0 auto;
    padding: 32px 36px 40px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.hoja h2 {
    margin: 40px 0 12px;
    padding-top: 20px;
    border-top: 1px solid var(--linea);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hoja h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.hoja p { margin: 0 0 14px; }

/* Primer párrafo: entrada de la página, un punto más grande. */
.hoja .entrada { font-size: 16px; line-height: 1.55; }

.hoja b { font-weight: 600; }

.glosario { margin: 0 0 16px; }

.glosario dt {
    margin-top: 18px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--senal);
}

.glosario dd { margin: 4px 0 0; padding-left: 14px; border-left: 1px solid var(--linea); }

.lista { margin: 0 0 14px; padding-left: 20px; }
.lista li { margin-bottom: 4px; }

/* Matriz de decisión: demanda contra motivación. */
.matriz { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; margin: 4px 0 18px; }

.matriz th, .matriz td {
    padding: 10px 12px;
    border: 1px solid var(--linea-tabla);
    text-align: left;
    vertical-align: top;
    font-size: 13px;
}

.matriz thead th { background: var(--papel); font-weight: 600; }
.matriz tbody th { background: var(--papel); font-weight: 600; width: 8.5em; }

.matriz .eje {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tenue);
}

.matriz .ideal { background: var(--senal-fondo); }
.matriz .flojo { color: var(--tenue); }

.comando {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: var(--tinta);
    color: var(--codigo-texto);
    border-radius: var(--radio);
    font-family: var(--mono);
    font-size: 13px;
    overflow-x: auto;
}

.nota {
    padding: 12px 14px;
    border-left: 3px solid var(--publicado);
    background: var(--publicado-fondo);
}

@media (max-width: 700px) {
    .lectura { padding: 16px 12px 48px; }
    .hoja { padding: 20px; }
    .matriz { display: block; overflow-x: auto; }
}


/* ---------- Runbook: fases del flujo ---------- */

.indice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--linea);
}

.indice a {
    padding: 4px 10px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    color: var(--tenue);
    font-size: 12px;
    text-decoration: none;
}

.indice a:hover { border-color: var(--senal); color: var(--senal); }

.hoja a { color: var(--senal); }

.hoja h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
}

/* Las fases SÍ son una secuencia, por eso van numeradas. */
.fase {
    margin: 22px 0;
    padding: 18px 20px;
    border: 1px solid var(--linea);
    border-left: 3px solid var(--senal);
    border-radius: var(--radio);
}

.fase .numero {
    padding: 3px 9px;
    border-radius: 11px;
    background: var(--senal);
    color: var(--sobre-senal);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fase .donde {
    margin: 0 0 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tenue);
}

.fase > :last-child { margin-bottom: 0; }
.fase .glosario { margin-bottom: 16px; }
.fase .glosario dt { margin-top: 14px; text-transform: none; letter-spacing: 0.02em; font-size: 12px; }

ol.lista { padding-left: 22px; }
ol.lista li { margin-bottom: 6px; }

/* La regla de oro: lo único que puede arruinar una corrida entera en silencio. */
.regla {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--alerta);
    border-left: 4px solid var(--alerta);
    border-radius: var(--radio);
    background: var(--alerta-fondo);
}

.regla .rotulo {
    display: block;
    margin-bottom: 4px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--alerta);
}

/* Bloque de comandos con botón de copiar (el botón aparece solo si el navegador lo permite). */
.bloque-comando { position: relative; }

.bloque-comando .copiar {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 9px;
    border: 1px solid var(--codigo-borde);
    border-radius: var(--radio);
    background: transparent;
    color: var(--codigo-tenue);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
}

.bloque-comando .copiar:hover { border-color: var(--codigo-texto); color: var(--codigo-texto); }

.comando { white-space: pre; line-height: 1.6; }

/* ---------- Prompts: cuál usar en cada caso ---------- */

/* No es una fase de la secuencia, es material de referencia: por eso el
   acento cambia de color y el rótulo no lleva número. */
.fase.prompts { border-left-color: var(--publicado); }
.fase.prompts .numero { background: var(--publicado); }


/* ---------- WhatsApp y nota del score ---------- */

.whatsapp {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid var(--whatsapp);
    border-radius: 10px;
    color: var(--whatsapp-texto);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.whatsapp:hover { background: var(--whatsapp); color: var(--sobre-senal); }

.nota {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--papel);
    border-left: 3px solid var(--senal);
    border-radius: var(--radio);
}

.nota p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.nota p:last-child { margin-bottom: 0; }

.nota-rotulo {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tenue);
}

.nota-demanda { font-weight: 600; }
.nota-vendedor { color: var(--tenue); }
.nota-destacar { color: var(--tenue); }

/* El ángulo de negociación es accionable y va en el tono de la señal, para
   que no se lea como una glosa más del consejo. */
.nota-negociacion { color: var(--senal); font-weight: 600; }

.nota-caveat {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--linea);
    color: var(--publicado);
}


/* ---------- Página de estadística ---------- */


.estadistica { max-width: var(--ancho-app); margin: 0 auto; }

.estadistica h2 {
    margin: 32px 0 4px;
    padding-top: 20px;
    border-top: 1px solid var(--linea);
    font-size: 15px;
    font-weight: 600;
}

.estadistica > .filtros-linea + .encuadre + h2 { margin-top: 20px; }

.bajada { margin: 0 0 12px; font-size: 12px; color: var(--tenue); }

.filtros-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.filtros-linea .campo { gap: 4px; }
.filtros-linea select { min-width: 150px; padding: 6px 8px; border: 1px solid var(--linea);
    border-radius: var(--radio); background: var(--panel); font-family: var(--sans); font-size: 13px; }
.filtros-linea .boton { align-self: flex-end; }
.filtros-linea .enlace-reset { align-self: center; }
.filtros-linea .filtros-total { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--tenue); }
.filtros-linea .filtros-total b { color: var(--tinta); }

.encuadre {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: var(--panel);
    border-left: 3px solid var(--senal);
    border-radius: var(--radio);
    font-size: 13px;
    line-height: 1.5;
}

.tabla-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); }

.tabla-datos { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

.tabla-datos thead th {
    padding: 8px 12px;
    background: var(--panel);
    box-shadow: inset 0 -1px 0 var(--linea-tabla);
    text-align: left;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tenue);
    white-space: nowrap;
}

.tabla-datos td, .tabla-datos tbody th {
    padding: 7px 12px;
    box-shadow: inset 0 -1px 0 var(--linea-tabla);
    text-align: left;
    font-weight: 400;
}

.tabla-datos tbody th { font-weight: 600; white-space: nowrap; }
.tabla-datos .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-datos thead .num { text-align: right; }
/* Las filas que abren el panel: hoy la tabla no tenía ningún estado, así que
   nada decía que se pueden apretar. El fondo al pasar y el cursor lo dicen; el
   foco va marcado aparte porque a estas filas se llega tabulando. */
.tabla-datos tr[data-candidato] { cursor: pointer; }
.tabla-datos tr[data-candidato]:hover td { background: var(--papel); }

.tabla-datos tr[data-candidato]:focus-visible {
    outline: 2px solid var(--senal);
    outline-offset: -2px;
}

.tabla-datos .tenue { color: var(--tenue); }
.tabla-datos .mono { font-family: var(--mono); white-space: nowrap; }
.tabla-datos .vacia { color: var(--linea); }

/* Escala de calor: 6 escalones, teal cada vez más saturado. */
.calor-0 { color: var(--tenue); }
.calor-1 { background: var(--calor-1); }
.calor-2 { background: var(--calor-2); }
.calor-3 { background: var(--calor-3); }
.calor-4 { background: var(--calor-4); color: var(--sobre-calor); }
.calor-5 { background: var(--calor-5); color: var(--sobre-senal); font-weight: 600; }

/* Las numéricas se encogen al contenido y la primera columna se queda con
   el resto; la de calor lleva ancho propio para que el color se lea. */
.tabla-datos:not(.mapa) .num { width: 1%; white-space: nowrap; }
.tabla-datos:not(.mapa) .col-calor { width: 130px; }

.mapa td { min-width: 92px; }
.mapa .celda-n { display: block; font-family: var(--mono); font-size: 10px; opacity: 0.75; }

.dos-tablas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.dos-tablas .tabla-datos { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); }

.estadistica .nota { margin-top: 16px; font-size: 13px; }

@media (max-width: 900px) {
    .dos-tablas { grid-template-columns: minmax(0, 1fr); }
    .filtros-linea .filtros-total { margin-left: 0; }
    /* En móvil los links no entran en una línea: apilados ocupaban 178px de
       barra —un quinto de la pantalla— y dejaban "Salir" huérfano en una
       tercera fila. Pasan a un menú que se despliega.

       Logo a la izquierda, hamburguesa a la derecha, estado abajo. */
    /* Tres columnas con las dos de los costados iguales (1fr): así el logo,
       que va en la del medio, queda centrado en la BARRA y no en el espacio
       que sobra. Con `1fr auto` el ancho del botón lo corría a la izquierda. */
    .barra {
        position: relative;
        grid-template-columns: 1fr auto 1fr;
        gap: 6px 12px;
    }

    .barra h1 { grid-area: 1 / 2; }
    .barra .nav { grid-area: 1 / 3; justify-self: end; }
    .barra-estado { grid-area: 2 / 1 / 2 / 4; text-align: center; }

    /* En escritorio la franja comparte renglón con el logo y la nav, y por eso
       se recorta con ellipsis. Acá tiene una fila entera para ella sola, así
       que recortarla sólo esconde datos: el cuarto ítem —los pendientes, que
       es el único accionable— caía justo adentro del "…". Sin nowrap la franja
       usa dos renglones cuando hace falta y no pierde nada. */
    .barra-estado .datos {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .hamburguesa {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 34px;
        height: 30px;
        padding: 0 6px;
        border: 1px solid var(--linea);
        border-radius: var(--radio);
        cursor: pointer;
    }

    .hamburguesa span { display: block; height: 2px; background: var(--senal); border-radius: 1px; }

    /* Abierta: las tres barras se marcan más. */
    .abrir-menu:checked ~ .hamburguesa { border-color: var(--senal); background: var(--senal); }
    .abrir-menu:checked ~ .hamburguesa span { background: var(--sobre-senal); }

    /* Foco visible: el checkbox está oculto, así que el anillo va en el label. */
    .abrir-menu:focus-visible ~ .hamburguesa { outline: 2px solid var(--senal); outline-offset: 2px; }

    /* El panel cuelga de la barra y no la agranda: la altura del encabezado
       queda igual esté abierto o cerrado. */
    .barra .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 20;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px;
        background: var(--panel);
        border-bottom: 1px solid var(--linea);
        box-shadow: 0 6px 18px var(--sombra);
    }

    .abrir-menu:checked ~ .nav-links { display: flex; }

    .barra .nav-links a { padding: 10px 12px; border-radius: var(--radio); }

    /* Apilado, la línea vertical no separa nada: pasa a ser horizontal. */
    .barra .nav-links a.propio {
        margin: 4px 0 0;
        padding-left: 12px;
        border-left: 0;
        border-top: 1px solid var(--linea);
        border-radius: 0;
    }

    .nav .salir { display: block; }
    .nav .salir button { width: 100%; padding: 10px 12px; text-align: left; }
}


/* ---------- Tendencia de precios ---------- */

.tendencia { margin: 0 0 24px; }

.tendencia-selector { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tendencia-selector label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tenue);
}

.grafico {
    display: block;
    width: 100%;
    height: auto;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.grafico .guia { stroke: var(--linea); stroke-width: 1; }
.grafico .curva { fill: none; stroke: var(--senal); stroke-width: 2; stroke-linejoin: round; }

.grafico .rotulo-y,
.grafico .rotulo-x {
    fill: var(--tenue);
    font-family: var(--mono);
    font-size: 10px;
}

.grafico .rotulo-y { text-anchor: end; }

/* Firme: relleno pleno. Flojo: hueco, para que se vea que el punto está pero
   que la N no lo sostiene. Incompleto: contorno punteado, porque el mes no
   terminó y su N no es comparable con la de un mes cerrado. */
.grafico .punto { fill: var(--senal); stroke: var(--panel); stroke-width: 1.5; }

.grafico .punto.flojo {
    fill: var(--panel);
    stroke: var(--senal);
    stroke-width: 2;
    stroke-dasharray: 2 2;
}

.grafico .punto.incompleto {
    fill: var(--panel);
    stroke: var(--publicado);
    stroke-width: 2;
    stroke-dasharray: 2 2;
}

/* ---------- Barras: rendimiento por día de la semana ---------- */

/* Firme: relleno pleno, igual que el punto firme de la tendencia. Flojo:
   hueco y punteado, para que se vea que el día está pero que su N no lo
   sostiene. Mismo vocabulario visual, otra forma de marca. */
.grafico-barras .barra { fill: var(--senal); }

.grafico-barras .barra.flojo {
    fill: var(--panel);
    stroke: var(--senal);
    stroke-width: 2;
    stroke-dasharray: 2 2;
}

.rendimiento { margin-bottom: 8px; }

/* Su h2 cae como :first-child de la <section>, así que la regla de .hoja h2 le
   saca el filete de arriba. Que no lo tenga está bien —es el primer bloque, y
   el filete lo cortaría de la bajada que le corresponde—, pero el aire venía en
   el mismo paquete y sí hace falta. */
.rendimiento h2 { margin-top: 28px; }

/* Los tres avisos del estado escaso. El primero es el que dice el número, y
   por eso es el único que va a tamaño de cuerpo. */
.rendimiento-aviso {
    padding: 12px 14px;
    border-left: 3px solid var(--senal);
    background: var(--papel);
    border-radius: 0 var(--radio) var(--radio) 0;
}

.rendimiento-por-que,
.rendimiento-que-hacer { font-size: 13px; color: var(--tenue); }

/* La N de cada día, escrita: el tooltip no existe con teclado ni impreso. */
.rendimiento-enes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 10px 0 0;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--tenue);
}

.rendimiento-enes b { color: var(--tinta); font-weight: 600; }
.rendimiento-enes .flojo b { color: var(--tenue); }
.rendimiento-enes .sin-datos { opacity: 0.5; }

.rendimiento-caveat { margin-top: 10px; font-size: 12px; color: var(--tenue); }

/* El padding alinea las referencias con el interior del gráfico y no con su
   borde: al ras, la nota de la derecha se leía como recortada contra el filo
   del recuadro. */
.referencias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 8px 0 0;
    padding: 0 10px;
    font-size: 11px;
    color: var(--tenue);
}

.referencias .ref::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: -1px;
}

/* Las referencias del gráfico de barras usan un cuadradito y no un círculo:
   la marca de la referencia tiene que tener la forma de lo que referencia. */
.referencias-barras .ref::before { border-radius: 2px; }

.referencias .firme::before { background: var(--senal); }
.referencias .floja::before { border: 2px dashed var(--senal); }
.referencias .incompleta::before { border: 2px dashed var(--publicado); }
/* Se corre a la derecha cuando hay lugar, pero no se estruja: en pantalla
   angosta baja a su propio renglón en vez de comerse las referencias. */
.referencias .ref-nota { margin-left: auto; font-style: italic; white-space: nowrap; }

/* La lectura. El borde cambia de color con el estado: teal cuando hay una
   dirección para afirmar, gris cuando la data no alcanza. */
.lectura-tendencia {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--papel);
    border-left: 3px solid var(--senal);
    border-radius: var(--radio);
}

.lectura-tendencia.sin-datos,
.lectura-tendencia.contradictorio { border-left-color: var(--tenue); }

.lectura-tendencia .titular { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; }
.lectura-tendencia .detalle { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.lectura-tendencia .demanda { margin: 6px 0 0; font-size: 13px; color: var(--tenue); }

/* El caveat va siempre y se lee: es la diferencia entre precio pedido y precio
   de venta, que es lo que separa este gráfico de un índice de mercado. */
.lectura-tendencia .caveat {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--linea);
    font-size: 12px;
    line-height: 1.45;
    color: var(--alerta);
}


/* ---------- Sesión, login y usuarios ---------- */

.nav .salir { display: inline; }

/* Salir es una ACCIÓN, no un destino: mismo tamaño que los links pero en
   gris tenue y sin negrita, para que se lea como lo que es. Antes era el
   único subrayado suelto de la barra y desentonaba. */
.nav .salir button {
    padding: 5px 8px;
    border: 0;
    border-radius: var(--radio);
    background: none;
    color: var(--tenue);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

.nav .salir button:hover { color: var(--alerta); }

/* La pantalla de entrada: una tarjeta centrada y nada más.
   Va como main.entrada y no .entrada a secas: `.hoja .entrada` ya existía
   para el primer párrafo de una página de lectura, y sin acotar esta regla
   le metía 64px de padding al texto. */
main.entrada { display: flex; align-items: flex-start; justify-content: center; padding: 64px 16px; }

.tarjeta-entrada {
    width: 100%;
    max-width: 340px;
    padding: 24px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.tarjeta-entrada h2 { margin: 0 0 16px; font-size: 16px; }
.tarjeta-entrada .campo { margin-bottom: 12px; }
.tarjeta-entrada input[type="email"],
.tarjeta-entrada input[type="password"] { width: 100%; }
.tarjeta-entrada .boton { width: 100%; margin-top: 4px; }

.recordarme { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 12px; color: var(--tenue); }

.pie-entrada { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--tenue); }

.error-caja {
    margin: 0 0 14px;
    padding: 8px 10px;
    background: var(--alerta-fondo);
    border-left: 3px solid var(--alerta);
    border-radius: var(--radio);
    font-size: 12px;
    color: var(--alerta);
}

.aviso-ok {
    margin: 0 0 14px;
    padding: 8px 10px;
    background: var(--papel);
    border-left: 3px solid var(--senal);
    border-radius: var(--radio);
    font-size: 13px;
    color: var(--senal);
}

/* La fila de un usuario dado de baja se apaga, pero se sigue viendo:
   esconderla haría creer que no existe y llevaría a crearlo de nuevo. */
.tabla-datos tr.de-baja td { opacity: 0.55; }

.estado-activo { color: var(--senal); font-weight: 600; }
.estado-baja { color: var(--alerta); font-weight: 600; }

.insignia-vos {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--papel);
    font-family: var(--mono);
    font-size: 10px;
    color: var(--tenue);
}

.acciones-fila { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.acciones-fila form { display: inline; }

.enlace-accion { color: var(--senal); font-size: 13px; }

.acciones-form { display: flex; align-items: center; gap: 14px; margin-top: 14px; }

/* La hoja de lectura son 68ch, cómodos para texto pero angostos para una
   tabla de seis columnas y para un formulario de dos. Estas dos pantallas
   piden un poco más de aire sin irse al ancho completo de la pantalla. */
/* Queda como alias sin efecto: .hoja ya es el ancho de la app. Si aparece en
   una vista vieja, no rompe nada. */
.hoja.ancha { max-width: var(--ancho-app); }

/* La medida de lectura, ADENTRO del contenedor de layout.
   Alineado por fuera, legible por dentro: 1040px de texto corrido dan
   renglones de ~150 caracteres, que se leen mal. */
.medida { max-width: var(--medida-lectura); margin: 0 auto; }

/* .boton nació para <button>, que no hereda color de los enlaces. Aplicado a
   un <a> ganaba la regla genérica de links y quedaba teal sobre teal: el
   botón se veía como un rectángulo verde vacío. */
a.boton { display: inline-block; color: var(--sobre-senal); text-decoration: none; }
a.boton:hover { color: var(--sobre-senal); }

/* Los campos de texto de los formularios de usuario ocupan lo que haya. */
.campo.crece { flex: 1 1 180px; }
.campo.crece input, .campo.crece select { width: 100%; }


/* ---------- Marcas de campaña y seguimiento ---------- */

/* "Publicado" (mía y abierta) se queda con el ámbar de siempre. "Equipo" y
   "Ya publicado" bajan de contraste: informan, no reclaman. */
.insignia-equipo { background: transparent; border: 1px solid var(--senal); color: var(--senal); }
.insignia-historica { background: transparent; border: 1px solid var(--linea); color: var(--tenue); }

.publicaciones .cabecera .autor { font-size: 11px; color: var(--tenue); }

.conteo-seccion {
    margin-left: 6px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--tenue);
}

.publicaciones-tabla .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.publicaciones-tabla td.sin-asignar { color: var(--tenue); font-style: italic; }


/* ---------- Buscador ---------- */

.buscador .filtro { border: 0; padding: 0; margin: 0 0 12px; }
.buscador .buscador-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.buscador .recordarme { margin: 0; }
.buscador-nota { margin-left: auto; font-size: 11px; color: var(--tenue); }

/* El estado inicial ocupa lugar a propósito: es la respuesta de la página
   mientras no haya criterios, no un mensaje de error. */
.estado-inicial {
    margin: 24px 0 0;
    padding: 20px;
    background: var(--panel);
    border: 1px dashed var(--linea);
    border-radius: var(--radio);
    font-size: 13px;
    line-height: 1.6;
    color: var(--tenue);
}

.estado-inicial b { display: block; margin-bottom: 4px; font-size: 14px; color: var(--tinta); }

.resultados { margin: 0 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }

.resultados li {
    padding: 10px 12px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--senal);
    border-radius: var(--radio);
    font-size: 13px;
}

/* La caída se apaga entera: sigue ahí porque el asesor la pidió, pero no
   compite con las que probablemente sigan en pie. */
.resultados li.caida { border-left-color: var(--alerta); background: var(--papel); }
.resultados li.caida .resultado-alto { opacity: 0.7; }

.resultado-alto { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.resultado-que { font-weight: 600; }
.resultado-precio { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.resultado-ficha { margin: 4px 0 0; font-size: 12px; color: var(--tinta-media); }

.resultado-frescura { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.resultado-frescura .senal { color: var(--tenue); }

.marca-caida {
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--alerta);
    color: var(--sobre-senal);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.resultado-pie {
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--linea);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.resultado-pie .contacto.pendiente { color: var(--alerta); }

/* Qué dato falta. Ámbar y no rojo: no es un problema del inmueble, es un
   hueco de nuestra extracción — el aviso puede servir igual. */
.marca-falta {
    padding: 1px 8px;
    border: 1px solid var(--publicado);
    border-radius: 10px;
    color: var(--publicado);
    font-family: var(--mono);
    font-size: 10px;
}


/* ---------- Guía: dos columnas con índice ---------- */

/* El índice a la izquierda, el texto a la derecha. El ancho del texto lo
   sigue poniendo .hoja: una guía se lee mejor en columna angosta. */
/* El índice y el texto viajan juntos y centrados: sin el max-width acá, la
   hoja se pegaba al índice y quedaba media pantalla vacía a la derecha. */
.guia {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 40px;
    align-items: start;

    /* width:100% además del max-width: .guia es el flex item de <body>, y con
       `margin: 0 auto` a secas las auto-margins lo achican al contenido en vez
       de estirarlo hasta el ancho de la app. Las otras vistas no lo necesitan
       porque su .hoja es un bloque adentro de .lectura, no el flex item. */
    width: 100%;
    max-width: var(--ancho-app);
    margin: 0 auto;
}

/* Pegajoso dentro de .lectura, que es el contenedor que scrollea. */
.guia-nav { position: sticky; top: 0; padding-top: 4px; }

.guia-nav-rotulo {
    margin: 0 0 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tenue);
}

.guia-nav ol { margin: 0; padding: 0; list-style: none; counter-reset: guia; }
.guia-nav li { counter-increment: guia; }

.guia-nav a {
    display: block;
    padding: 5px 10px;
    border-left: 2px solid var(--linea);
    color: var(--tenue);
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
}

.guia-nav a:hover { color: var(--tinta); border-left-color: var(--tenue); }

/* El resaltado del scroll-spy. Sin JS nunca se agrega esta clase y el índice
   sigue funcionando como lista de anclas. */
.guia-nav a.activo {
    border-left-color: var(--senal);
    color: var(--senal);
    font-weight: 600;
}

/* La hoja ya está acotada por la columna del grid. */
.guia-cuerpo { margin: 0; max-width: none; }

.guia-cuerpo h1 { margin: 0 0 12px; }

/* Que el ancla no quede tapada por la barra al saltar. */
.guia-cuerpo section { scroll-margin-top: 16px; }
/* Hijas directas de .medida, que es donde cuelgan las secciones de primer nivel. Sin el `>`
   el runbook se llevaba una línea divisoria por cada <section class="fase"> anidada dentro
   de #flujo; con `.guia-cuerpo >` no matcheaba ninguna y /ayuda perdía TODAS las líneas. */
.guia-cuerpo .medida > section + section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--linea); }

.guia-cuerpo .checklist { padding-left: 20px; }
.guia-cuerpo .checklist li { margin-bottom: 10px; }

/* Un identificador largo —una ruta, un nombre de script— no tiene dónde cortar, y en una
   celda angosta se sale de su columna y se pisa con la de al lado. En prosa no hace falta
   (el renglón es ancho); en tabla sí. */
.matriz code { overflow-wrap: anywhere; }

.guia-cuerpo code {
    padding: 1px 5px;
    background: var(--papel);
    border-radius: var(--radio);
    font-family: var(--mono);
    font-size: 12px;
}

.solo-admin { font-size: 12px; font-weight: 400; color: var(--tenue); }

.guia-cuerpo .aclaracion { margin-top: -4px; font-size: 12px; color: var(--tenue); }

@media (max-width: 900px) {
    /* 📌 Piso de contenido, medido el 2026-08-24 con emulación de dispositivo:
       a 390px entra todo —cero elementos con overflow visible desbordando, el
       body en 390 exacto—, y a 300px empieza a desbordar texto por tokens que
       no se pueden cortar: p.nota (190→217), div.medida (234→243) y
       section.fase.prompts (234→240). No es del layout sino del contenido, y
       390 cubre el parque de teléfonos. Anotado, sin actuar. */

    /* El índice pasa arriba, en una tira que scrollea de costado: mismo corte
       que usa el listado de candidatos. */
    .guia { grid-template-columns: minmax(0, 1fr); gap: 16px; }

    /* En móvil scrollea la ventana, no .lectura. Sin sacarle el overflow, el
       sticky del índice se ancla a un contenedor que no scrollea y la tira se
       va de pantalla al primer scroll. */
    .lectura.guia { overflow: visible; }

    .guia-nav {
        position: sticky;
        top: 0;
        z-index: 3;
        margin: 0 -12px;
        padding: 8px 12px;
        background: var(--papel);
        border-bottom: 1px solid var(--linea);
    }

    .guia-nav-rotulo { display: none; }

    .guia-nav ol { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .guia-nav li { flex: 0 0 auto; }

    .guia-nav a {
        padding: 4px 10px;
        border: 1px solid var(--linea);
        border-radius: 12px;
        white-space: nowrap;
    }

    /* Con el índice pegado arriba, el ancla tiene que caer más abajo. */
    .guia-cuerpo section { scroll-margin-top: 56px; }
}

/* ---------- Paginación ---------- */
/* Propia y no la de Laravel: el paginador default emite markup de Tailwind
   (pagination::tailwind), y radar no carga Tailwind ni tiene paso de build. */

.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    font-size: 13px;
}

.paginacion-link { color: var(--senal); white-space: nowrap; }

/* Los extremos no desaparecen al llegar al borde: que el control cambie de
   lugar en la última página obliga a buscarlo de nuevo. Se apagan y quedan. */
.paginacion-link.inerte { color: var(--linea); cursor: default; }

.paginacion-cuenta { color: var(--tenue); font-variant-numeric: tabular-nums; }

/* ---------- Registro de acceso ---------- */

/* Un intento fallido tiene que saltar sin leer la columna del evento: es lo
   único de esta tabla que se mira con apuro. */
.tabla-datos tr.fallido td { background: var(--alerta-fondo); }

.aviso-fallidos {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 3px solid var(--alerta);
    border-radius: var(--radio);
    background: var(--alerta-fondo);
    font-size: 13px;
    color: var(--alerta);
}

/* El user-agent es largo y no es lo importante de la fila: se corta y el
   título del <td> lo muestra entero al pasar por encima. */
.tabla-datos .navegador {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- El toggle de tema ---------- */
/* Redondo y del tamaño de un glifo: es un control global y permanente, así que
   no compite con los links de la barra. Mismo lenguaje que el resto —borde de
   --linea en reposo, --senal al tocarlo—. */

.tema-toggle {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-left: 10px;
    padding: 0;
    flex: none;
    border: 1px solid var(--linea);
    border-radius: 50%;
    background: transparent;
    color: var(--tenue);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.tema-toggle:hover { border-color: var(--senal); color: var(--senal); }
.tema-toggle:focus-visible { outline: 2px solid var(--senal); outline-offset: 2px; }

/* Los dos glifos están siempre en el HTML y se muestra el que corresponde.
   El ícono dice ADÓNDE TE LLEVA el botón, no en qué modo estás: en claro se ve
   la luna (apretás y oscurece) y en oscuro el sol. Es un botón, no un indicador. */
.tema-sol { display: none; }
:root[data-tema="oscuro"] .tema-sol { display: block; }
:root[data-tema="oscuro"] .tema-luna { display: none; }

/* En móvil la nav se esconde detrás de la hamburguesa, pero el toggle NO:
   queda al lado, a la vista. Esconder un control global adentro de un menú
   obliga a abrirlo para algo que no es navegar. */
@media (max-width: 720px) {
    .tema-toggle { margin-left: 8px; }
}