/* Panel Gretan — hoja única.
   El sistema es una RESTA: cero radios, cero sombras, cero gradientes, un solo
   peso tipográfico. La jerarquía sale de tamaño y valor; el interletraje es
   función del tamaño. El color está reservado a una sola cosa: la anomalía. */

:root {
    --papel:   #ffffff;
    --banda:   #efefef;   /* 6% de luminancia: se lee como impresión, no como UI */
    --tinta:   #1e2124;
    --tenue:   #6b6b6b;   /* pasa 4.5:1 sobre papel Y sobre banda */
    --filete:  rgba(30, 33, 36, .14);
    /* Los filetes decorativos pueden ser tenues; el borde de un CONTROL no:
       necesita 3:1 contra el papel o no se ve dónde empieza el campo. */
    --borde:   #8b8f92;
    --pluma:   rgba(30, 33, 36, .10);
    --capa:    rgba(30, 33, 36, .045);
    --capa-2:  rgba(30, 33, 36, .09);
    /* ÚNICA excepción cromática de la hoja: la anomalía. Un solo rojo, no dos.
       Es «actionCritical» de GoDaddy —su rojo de acción crítica en reposo—,
       tomado de su mapa de tokens, no de una captura. En su sistema
       ae1302 / db1802 / 850f01 son reposo / puntero encima / pulsado del MISMO
       control: una escala de estado, no tres significados. Tenerlos en dos
       variables importaba una escala como si fuera una taxonomía.
       Antes había una variable aparte para la insignia, con un comentario que
       decía haberla medido de la barra de GoDaddy. Esa medición NO se sostiene:
       la hoja de su barra de utilidades no tiene un solo rojo —sus únicos
       colores son d3d3d3 y ff8c00— y su indicador de no leídos sólo declara
       filete blanco y medidas. Se retiró.
       Su rojo de TEXTO no sirve aquí: da 4.41:1 sobre la banda efefef, por
       debajo del 4.5 exigido, y la franja de aviso ES banda. Así que se toma su
       rojo de RELLENO y se usa también como texto, a sabiendas: pasa en las
       cinco superficies del panel —7.26 sobre papel, 6.31 en la peor—. Se ceden
       1.4 puntos contra el rojo anterior de la hoja. */
    --mal:      #ae1302;
    /* El velo del sello grave, a plano. Iba escrito a mano con los canales del
       rojo viejo, así que cambiar la variable sin tocar esa línea dejaba el
       sello con el tinte anterior. Era el único sitio donde el rojo vivía fuera
       de la variable. */
    --mal-velo: #f9eeed;
    /* Los dos grises de GoDaddy, medidos de su panel el 2026-08-11: el fondo
       de sus fichas y el gris de la flecha de orden en reposo. Son neutros,
       no marca: lo suyo es el turquesa, y ese no entra aquí. */
    --capa-ficha:  #f5f7f8;
    --gris-flecha: #afafaf;
    /* Dos anillos: uno de papel y otro de tinta. Así el foco se ve tanto sobre
       fondo claro como encima de un botón que YA es de tinta. */
    --foco:    0 0 0 2px var(--papel), 0 0 0 4px var(--tinta);
    --curva:   cubic-bezier(.16, 1, .3, 1);
    --barra:   56px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    /* La barra es sticky: sin esto, todo salto o ancla deja el destino debajo. */
    scroll-padding-top: 68px;
}

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; }
/* Un solo peso en todo el panel: la jerarquía sale de tamaño y valor.
   Sin esto el navegador pone los encabezados en negrita y se cae el sistema. */
h1, h2, h3, h4, th, b, strong { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 0; box-shadow: var(--foco); }

/* ------------------------------------------------------------ tipografía */

.t-pantalla { font-size: 34px; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
.t-seccion  { font-size: 20px; letter-spacing: -.02em; line-height: 1.3; text-wrap: balance; }
.t-cifra    { font-size: 40px; letter-spacing: -.03em; line-height: 1; }
.t-cifra-s  { font-size: 26px; letter-spacing: -.02em; line-height: 1.1; }

/* Ni líneas cojas ni palabras solas al final de un párrafo. */
p, dd, .pie { text-wrap: pretty; }

.rotulo {
    font-size: 11px;
    letter-spacing: .05em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--tenue);
}

.tenue { color: var(--tenue); }
.mal   { color: var(--mal); }

/* ------------------------------------------------------------- estructura */

.barra {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    padding-top: 11px;
    gap: 28px;
    height: var(--barra);
    padding: 0 24px;
    background: var(--papel);
    border-bottom: 1px solid var(--filete);
}

.marca { font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.marca span { color: var(--tenue); }

/* overflow-x:auto convierte el overflow-y en auto y recorta el ::after:
   por eso el indicador de sección se veía en móvil y no en escritorio. */
.nav { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; padding-bottom: 11px; }
.nav::-webkit-scrollbar { display: none; }

.nav a {
    position: relative;
    padding: 4px 0;
    color: var(--tenue);
    white-space: nowrap;
    transition: color .12s var(--curva);
}
.nav a:hover { color: var(--tinta); }
.nav a[aria-current] { color: var(--tinta); }
.nav a[aria-current]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    border-bottom: 1px solid var(--tinta);
}

.yo { margin-left: auto; display: flex; align-items: center; gap: 16px; white-space: nowrap; }

.lienzo { padding: 32px 24px 96px; }
.lienzo--medio { max-width: 900px; }

.encabezado { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.encabezado .rotulo { margin-left: auto; }

/* ------------------------------------------------------------------ tira */

.tira {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border-top: 1px solid var(--filete);
    border-left: 1px solid var(--filete);
    margin-bottom: 40px;
}

.tira > div {
    padding: 18px 20px 20px;
    border-right: 1px solid var(--filete);
    border-bottom: 1px solid var(--filete);
}

.tira .rotulo { display: block; margin-bottom: 10px; }
.tira .pie { display: block; margin-top: 6px; font-size: 13px; color: var(--tenue); }

/* toda tasa imprime numerador y denominador */
.nd { font-size: 15px; color: var(--tenue); letter-spacing: 0; }

/* ------------------------------------------------------------- ayuda */
/* Subrayado punteado = «pasa el cursor y te explico este dato». NUNCA significa
   que se pueda ordenar por ahí: para eso está la flecha. Mezclar las dos señales
   deja al usuario sin saber qué hace cada cosa.
   Va en los términos que son de oficio —certificado, respuesta, copia oculta—:
   el cliente no tiene por qué saber qué es un certificado, y la columna sin
   explicar no le sirve de nada. */
.pista {
    border-bottom: 1px dotted var(--gris-flecha);
    padding-bottom: 1px;
    cursor: help;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.pista:hover, .pista[aria-describedby] { border-bottom-color: var(--tinta); }
.th-b .pista { cursor: pointer; }
.th-b:hover .pista { border-bottom-color: var(--tinta); }

/* El globo cuelga del <body> con position:fixed a propósito: dentro de la
   tabla lo recortaría su `overflow-x: auto` y saldría cortado por la mitad. */
/* Medido en su panel: fondo #111, texto blanco, radio 6, sin sombra. El suyo
   va a 16/24 con sangrado 16 porque sus globos son párrafos; para una etiqueta
   corta eso queda enorme, así que baja a 14/20 con sangrado 10/12. Lo que se
   copia es la caja —color, radio, ausencia de sombra—, no el tamaño de un
   texto que aquí dice otra cosa. */
#ayuda {
    position: fixed;
    z-index: 60;
    max-width: 280px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--tinta);
    color: var(--papel);
    font-size: 14px;
    line-height: 20px;
    pointer-events: none;
}
#ayuda[hidden] { display: none; }
/* El pico, con su técnica exacta: un cuadrado de 16 girado 45°, del MISMO color
   que la caja, asomando la mitad —`top: -8px`, que es 16/2—. Medido en su panel
   el 2026-08-12. La posición horizontal la calcula el JS y la deja en
   `--pico`: el globo se recoloca para no salirse de la pantalla, así que un
   pico centrado a ciegas acabaría apuntando a otra cosa. */
#ayuda::after {
    content: "";
    position: absolute;
    left: var(--pico, 50%);
    width: 16px;
    height: 16px;
    margin-left: -8px;
    background: inherit;
    transform: rotate(45deg);
}
#ayuda::after { bottom: -8px; }          /* globo ARRIBA: el pico mira hacia abajo */
#ayuda.abajo::after { bottom: auto; top: -8px; }

/* ----------------------------------------------------------------- tabla */

.marco-tabla { overflow-x: auto; }

/* ------------------------------------------------------------- iconos */
/* El sprite se emite una vez y cada icono es un <use>. Va oculto con tamaño
   cero y NO con display:none: Safari deja de resolver los <use> de un sprite
   escondido así, y el panel se queda sin un solo icono. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { flex: none; display: inline-block; vertical-align: middle; fill: currentColor; }

/* Las flechas de columna, suyas: cuando la tabla es más ancha que la pantalla
   aparecen pegadas al borde derecho del encabezado y la corren de columna en
   columna. Arrastrar la barra horizontal con trece columnas es un ejercicio
   de puntería; esto es un botón. */
.tabla-zona { position: relative; }
/* En su renglón, pegadas a la derecha. Flotando sobre el encabezado tapaban
   siempre el título de la última columna visible: son opacas y se quedan
   quietas mientras la tabla se corre por debajo. */
.corre-mando { display: flex; margin-left: auto; }
.corre-mando[hidden] { display: none; }
.corre-col {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 45px;
    background: var(--capa-ficha);
    color: var(--tinta);
    box-shadow: 0 0 0 1px var(--filete);
    cursor: pointer;
}
/* OPACO, no `--capa-2`: esa capa es translúcida y al pasar por encima dejaba
   verse el encabezado que hay DEBAJO del botón —salía «traseña» asomando por
   detrás de la flecha—. Un botón que flota sobre la tabla tiene que taparla. */
.corre-col:hover { background: var(--banda); }
.corre-col:disabled { color: var(--gris-flecha); cursor: default; background: var(--capa-ficha); }
/* Las dos JUNTAS y a la derecha, como en el suyo. Una a cada extremo obliga a
   cruzar la pantalla para ir y volver. Comparten filete: la de la izquierda no
   dibuja el suyo por ese lado o queda una raya de 2px entre las dos. */
.corre-col--izq { margin-right: -1px; }

/* separate + border-spacing 0, NO collapse: con el encabezado fijo (sticky) y
   los bordes colapsados, el navegador deja los bordes atrás y aparecen rayitas
   sueltas flotando sobre la tabla. Los filetes se dibujan con box-shadow. */
/* La tabla se dimensiona por su CONTENIDO y se desborda a lo ancho, como la
   suya: con trece columnas, obligarlas a caber en 1440 aplasta los nombres
   hasta «C…» y «R.». Antes cabían porque el encabezado iba en versalitas de
   11; a 14 ya no, y encoger la letra para que quepa es resolver al revés.
   Para eso están las dos flechas del encabezado. */
table.t { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; }

table.t th, table.t td {
    padding: 11px 14px 11px 0;
    text-align: left;
    vertical-align: top;
    box-shadow: inset 0 -1px 0 var(--pluma);
}
table.t th:first-child, table.t td:first-child { padding-left: 14px; }

/* Sin encabezado fijo: con position:sticky sobre celdas de tabla el navegador
   deja atrás fragmentos de borde que aparecen como rayitas sueltas flotando
   sobre el contenido. Con buscador, filtros y orden no compensa el defecto. */
/* Encabezado, medido del suyo el 2026-08-11: renglón de 45, texto de 14 en
   peso medio y caja de sangrado de 16. Antes iba en versalitas de 11: se leía
   como etiqueta de formulario y no como algo en lo que se puede hacer clic.
   Ellos resolvieron eso hace años; se copia. */
table.t thead th {
    height: 45px;
    padding: 0;
    background: var(--papel);
    box-shadow: inset 0 -1px 0 var(--filete);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tinta);
    white-space: nowrap;
    vertical-align: middle;
}
/* El sangrado del encabezado tiene que ser EL MISMO de la celda o el nombre
   de la columna no cae sobre su dato: la celda lleva 14 a la derecha y nada a
   la izquierda salvo la primera. */
table.t thead th > .th-b,
table.t thead th > .th-fijo { padding: 0 14px 0 0; }
table.t thead th:first-child > .th-b,
table.t thead th:first-child > .th-fijo { padding-left: 14px; }

/* La retícula del encabezado es la suya: el nombre ocupa lo que puede y la
   flecha vive en un carril fijo de 23. Sin ese carril, la flecha empuja el
   texto al aparecer y la fila entera se recorre un pixel. */
/* Tres carriles: el nombre, la flecha (23) y el asa (14). El asa tenía su
   propio carril en NINGUNO de los dos y se colocaba absoluta sobre el
   contenido: en una columna estrecha aterrizaba encima del nombre —«Copia
   oculta» con los seis puntos dentro de la palabra— y en las anchas caía sobre
   la flecha. Reservarle un carril cuesta 14 píxeles por columna y quita la
   familia entera de encimes, que es el mismo trato que ya hace la flecha. */
.th-b {
    display: grid;
    /* El tercer carril es ELÁSTICO, no de 14 fijo: con los tres al tamaño del
       contenido, el grupo entero se apelotona a la izquierda y el asa acababa
       pegada a la flecha con media columna vacía a su derecha. Elástico empuja
       el asa al filo, que es donde va. El mínimo de 23 le garantiza aire aunque
       la columna venga justa. */
    grid-template-columns: minmax(0, max-content) 23px minmax(23px, 1fr);
    align-items: center;
    width: 100%;
    height: 45px;
    position: relative;
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: inherit;
    cursor: pointer;
}
/* El fijo no lleva flecha, pero su carril mide 23 igual que el de las que sí:
   medido en render, con un carril de 14 el asa arrancaba a CERO píxeles del
   nombre —pegada, aunque sin encimarse— mientras que en las ordenables queda a
   23. Mismo carril, mismo aire, y las dos clases de encabezado se leen igual.
   Antes era `flex` sin carril ninguno: por eso era el peor de los dos. */
.th-fijo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(23px, 1fr);
    align-items: center;
    height: 45px;
    color: var(--tenue);
    cursor: grab;
}
/* NO hay caso especial para las columnas de cifras. Medido en su panel el
   2026-08-11: TODAS sus columnas van a `text-align: start` y la flecha SIEMPRE
   detrás del nombre, en el mismo carril de 23. Ninguna alineada a la derecha,
   ni las fechas ni los importes. Yo había inventado un caso aparte para las
   cifras y de ahí salieron tres defectos encadenados —el rótulo a la derecha
   sobre el dato a la izquierda, el sangrado duplicado y la flecha al revés—.
   Las cifras siguen leyéndose en columna por `tabular-nums`, no por la
   alineación. Una regla menos y una familia entera de fallos menos. */
.th-txt { overflow: hidden; text-overflow: ellipsis; }

/* La flecha SIEMPRE está: gris cuando la columna no ordena, tinta cuando sí.
   Esconderla hasta que ordenas —como estaba— deja la tabla sin decir que se
   puede ordenar, que es justo lo que hay que decir. */
.th-f {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    color: var(--gris-flecha);
}
.th-b:hover .th-f { background: var(--capa-ficha); color: var(--tinta); }
th[aria-sort] .th-f { color: var(--tinta); }
th[aria-sort="ascending"] .th-f svg { transform: rotate(180deg); }

/* El asa de arrastre, suya también: seis puntos en la esquina superior
   derecha que sólo aparecen al pasar por encima. Es lo que anuncia que la
   columna se puede mover sin gastar un pixel mientras no hace falta. */
/* Centrada en su renglón y con holgura a la derecha, NO pegada al filo
   superior como en el suyo. Dos razones medidas: arriba el borde del bloque
   anterior cae en la MISMA y —los puntos se leían como parte de él—, y como
   cada asa vive en el borde derecho de SU columna, a ras quedaba pegada al
   rótulo de la siguiente y parecía suya. */
/* `visibility`, no `display`: así el asa ocupa su carril esté visible o no. Con
   `display:none` el carril se encogía al no haber nada dentro y el nombre se
   corría 14 píxeles al pasar el cursor por encima. */
.asa {
    display: block;
    visibility: hidden;
    justify-self: end;
    cursor: grab;
}
.th-b:hover .asa,
.th-fijo:hover .asa { visibility: visible; }
.th-b:active .asa,
.th-fijo:active .asa { cursor: grabbing; }
th.arrastrando { opacity: .5; background: var(--capa-2); }
th.blanco-arrastre { box-shadow: inset 0 -1px 0 var(--filete), inset 2px 0 0 var(--tinta); }

table.t tbody tr { transition: background-color .1s var(--curva); }
table.t tbody tr:hover { background: var(--capa); }
table.t tbody tr:hover td:first-child { box-shadow: inset 0 -1px 0 var(--pluma), inset 3px 0 0 var(--tinta); }

td.dom { color: var(--tinta); }
td.sec { color: var(--tenue); }
/* `num` ya no toca la alineación: sólo le dice al orden que compare como
   número y no como texto. La pinta la fija la misma regla que a las demás. */

.enlace { border-bottom: 1px solid transparent; transition: border-color .12s var(--curva); }
.enlace:hover { border-bottom-color: currentColor; }

/* sólo la anomalía gana caja */
.marca-mal {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid var(--mal);
    color: var(--mal);
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}

.marca-neutra {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid var(--filete);
    font-size: 12px;
    line-height: 1.5;
    color: var(--tenue);
    white-space: nowrap;
}

/* ------------------------------------------------- campana y menú propio */
/* Dos desplegables con el mismo cuerpo: caja de filete de 1px sobre papel.
   Sin sombra ni radio: en este sistema la elevación se dibuja, no se simula. */

.pop { position: relative; }

.pop__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 9px;
    color: var(--tenue);
    border: 1px solid transparent;
    transition: color .12s var(--curva), border-color .12s var(--curva);
}
.pop__btn:hover { color: var(--tinta); }
/* Abierto NO dibuja un recuadro: en el suyo el botón se vuelve un círculo con
   fondo. El rectángulo alrededor de la campana al pulsarla era esto. */
.pop__btn[aria-expanded="true"] { color: var(--tinta); border-color: transparent; }
.pop__btn--nombre { max-width: 210px; }
.pop__btn--nombre .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* En escritorio manda el nombre; las iniciales sólo aparecen cuando no cabe. */
.iniciales { display: none; }

.campana { position: relative; }
/* El ancla de la insignia: una caja del tamaño exacto del icono. */
.campana__icono { position: relative; display: inline-flex; }
/* La insignia es un CÍRCULO, como la suya. No tenía radio ninguno, así que
   salía un cuadradito rojo colgado de la campana —de lo primero que delata un
   panel hecho a ojo—. Con dos cifras se estira a pastilla, que es lo correcto:
   un círculo obligado recortaría el número.
   Se ancla a la esquina superior DERECHA de la campana, no a un `left` fijo:
   con `left: 20px` la insignia no sabe dónde acaba el icono y se descoloca en
   cuanto el icono cambia de tamaño —que es justo lo que acaba de pasar. */
.campana__n {
    position: absolute;
    /* DENTRO del botón, no colgando de él. Medido: con -5/-7 la insignia se
       salía 4 px por arriba y 6 por la derecha, y en la barra real eso es
       chocar con lo que tenga al lado o quedar recortada por un contenedor.
       Con 0/4 pisa la esquina del icono —que es lo que se busca— sin asomar
       fuera del área pulsable. */
    /* 20 px a −6/−6. ELEGIDA POR ÉL entre cuatro variantes que se le
       enseñaron ampliadas. No se toca sin preguntarle: cuando una medida es
       una decisión suya, deja de ser un parámetro que se pueda afinar por
       cuenta propia, por buenos que sean los argumentos. */
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mal);
    color: var(--papel);
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.cajon {
    /* La barra usa nowrap para que no se parta; el cajón NO puede heredarlo o
       el texto de cada alerta se corta en seco al llegar al borde. */
    white-space: normal;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 232px;
    max-width: calc(100vw - 32px);
    background: var(--papel);
    border: 1px solid var(--tinta);
}
.cajon--ancho { width: 400px; }
/* Los cajones de la barra superior cuelgan a la derecha porque su botón vive
   pegado a ese borde. Los de las FICHAS no: nacen a la izquierda de la
   pantalla, y anclados a la derecha se abrían hacia afuera, saliéndose por
   debajo del lateral. Cada uno cae del lado en que está su botón. */
.pop--ficha .cajon { right: auto; left: 0; }
.cajon[hidden] { display: none; }

.cajon__quien { padding: 14px 16px 12px; border-bottom: 1px solid var(--filete); }
.cajon__nombre { display: block; }
.cajon__correo { display: block; color: var(--tenue); font-size: 13px; margin-bottom: 6px;
                 overflow: hidden; text-overflow: ellipsis; }

.cajon__op {
    display: block;
    width: 100%;
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--pluma);
    transition: background-color .1s var(--curva);
}
.cajon__op:last-child, .cajon form:last-child .cajon__op { border-bottom: 0; }
.cajon__op:hover { background: var(--capa); }
.cajon__op--boton { color: inherit; }

.cajon__cab {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 13px 16px 11px;
    border-bottom: 1px solid var(--filete);
}
.cajon__cab .enlace { margin-left: auto; font-size: 13px; }
.cajon__vacio { padding: 22px 16px 24px; color: var(--tenue); font-size: 14px; }

.avisos { max-height: min(64vh, 520px); overflow-y: auto; }

/* Cada grupo con su encabezado y su acción de conjunto: la campana deja de ser
   una lista plana y dice de un vistazo cuántos hay de cada cosa. */
.grupo-aviso { border-bottom: 1px solid var(--filete); }
.grupo-aviso:last-child { border-bottom: 0; }
.grupo-aviso__cab {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 16px 10px;
    font-size: 13px;
}
.grupo-aviso__cab .enlace { margin-left: auto; color: var(--tenue); font-size: 13px; }
.grupo-aviso__cab .enlace:hover { color: var(--tinta); }

.aviso-tarjeta {
    position: relative;
    padding: 12px 16px 13px 26px;
    border-top: 1px solid var(--pluma);
}
/* El punto marca lo que aún no se ha visto. */
.aviso-tarjeta::before {
    content: "";
    position: absolute;
    left: 14px; top: 18px;
    width: 5px; height: 5px;
    background: var(--tinta);
}
.aviso-tarjeta.es-visto::before { background: none; }
.aviso-tarjeta.es-visto { color: var(--tenue); }

/* El sello dice la urgencia con PALABRA y con caja; el color sólo la refuerza. */
.sello {
    display: inline-block;
    margin-bottom: 5px;
    padding: 1px 7px;
    border: 1px solid var(--filete);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tenue);
}
.sello--grave { border-color: var(--mal); background: var(--mal-velo); color: var(--mal); }

.aviso-tarjeta__t { display: block; }
.aviso-tarjeta__d { display: block; margin-top: 1px; font-size: 13px; color: var(--tenue); }
.aviso-tarjeta__a { display: inline-block; margin-top: 7px; font-size: 13px; }

.franja-aviso--mirando { border-bottom: 1px solid var(--tinta); background: var(--papel); }
.franja-aviso--mal { border-bottom-color: var(--mal); color: var(--mal); background: var(--papel); }
.orden-movil { display: none; }
@media (max-width: 860px) { .orden-movil { display: block; } }

.franja-aviso {
    padding: 10px 24px;
    border-bottom: 1px solid var(--filete);
    background: var(--banda);
    font-size: 14px;
}

.casilla { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.casilla input {
    width: 17px; height: 17px;
    margin: 0;
    accent-color: var(--tinta);
    border-radius: 0;
}

/* ---------------------------------------------------------------- filtros */

.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 4px;
}

/* El buscador, como el suyo: campo de 52 y a su derecha, pegado, el botón
   macizo con la lupa. El botón no es adorno —da el punto de clic a quien
   escribe y luego busca el gesto de confirmar en vez de pulsar Intro. */
/* El filete va en el ENVOLTORIO, como en el suyo: su campo no lleva borde
   propio. Con el filete en el campo Y el aro global de `:focus-visible`
   encima salían DOS marcos —uno negro grueso por fuera y otro por dentro—,
   que es lo que se veía al pulsar el buscador. Un control, un indicador. */
.buscador {
    position: relative;
    display: flex;
    flex: 0 1 340px;
    min-width: 240px;
    border: 1px solid var(--borde);
}
.buscador:focus-within { border-color: var(--tinta); }
/* El aro global se calla aquí dentro: ya lo dice el envoltorio. */
.buscador input:focus-visible, .buscador .lupa:focus-visible { box-shadow: none; }

.buscador input {
    width: 100%;
    height: 52px;
    padding: 0 38px 0 16px;
    background: var(--papel);
    border: 0;
    border-radius: 0;
    font-size: 14px;
    -webkit-appearance: none;
}
.buscador .lupa {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--tinta);
    color: var(--papel);
    cursor: pointer;
}
.buscador .lupa:hover { opacity: .86; }
.buscador input::placeholder { color: var(--tenue); }
.buscador input:focus { outline: 0; }

.buscador .limpiar {
    position: absolute;
    right: 58px; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--tenue);
}
.buscador.tiene .limpiar { display: flex; }
.buscador .limpiar:hover { color: var(--tinta); }

select.filtro {
    padding: 9px 30px 9px 11px;
    background: var(--papel) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5Z' fill='%236b6b6b'/%3E%3C/svg%3E") no-repeat right 10px center/11px;
    border: 1px solid var(--borde);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    color: var(--tinta);
}
select.filtro:focus { outline: 0; border-color: var(--tinta); }
select.filtro.activo { border-color: var(--tinta); }
/* El primer valor («Todo tipo») es el que se lee como marcador, no el control entero. */
.filtros select.filtro:not(.activo) { color: var(--tenue); }

.cuenta { margin-left: auto; color: var(--tenue); font-size: 13px; white-space: nowrap; }

/* ---------------------------------------------------------------- botones */

.boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--tinta);
    background: var(--tinta);
    color: var(--papel);
    transition: opacity .12s var(--curva);
}
.boton:hover { opacity: .82; }

.boton--linea { background: none; color: var(--tinta); border-color: var(--borde); }
.boton--linea:hover { opacity: 1; border-color: var(--tinta); background: var(--capa); }

/* --------------------------------------------------------------- entrada */

.puerta {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.puerta form, .puerta .centrada { width: 100%; max-width: 360px; }

/* La puerta va centrada de arriba abajo: el logotipo, la bajada y el pie de
   ayuda comparten eje. Los campos siguen alineados a la izquierda, que es como
   se leen los formularios. */
.centrada { text-align: center; }
.centrada .campo, .centrada .aviso { text-align: left; }

.marca-logo {
    display: block;
    width: 180px;
    height: auto;
    margin: 0 auto 22px;
}

.puerta .intro { color: var(--tenue); margin-bottom: 34px; }
.boton--ancho { width: 100%; justify-content: center; }

.pie-puerta { margin-top: 26px; font-size: 14px; color: var(--tenue); }
.pie-puerta a { color: var(--tenue); }
.pie-puerta a:hover { color: var(--tinta); }

.nota-ok {
    padding: 10px 12px;
    border: 1px solid var(--filete);
    margin-bottom: 16px;
    font-size: 14px;
    text-align: left;
}

/* Para lectores de pantalla: existe en el árbol aunque no se dibuje.
   OJO: el atributo hidden NO sirve para esto — saca al elemento del árbol
   de accesibilidad y el campo se queda sin nombre. */
.oculto-visual {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Marca en la barra superior */
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca img { display: block; width: auto; height: 21px; }

.campo { position: relative; margin-bottom: 16px; }
.campo input {
    width: 100%;
    padding: 22px 12px 9px;
    background: none;
    border: 1px solid var(--borde);
    border-radius: 0;
    -webkit-appearance: none;
}
.campo input:focus { outline: 0; border-color: var(--tinta); }
.campo label {
    position: absolute;
    left: 12px; top: 7px;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tenue);
    pointer-events: none;
}
.campo .ojo {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    color: var(--tenue);
}
.campo .ojo:hover { color: var(--tinta); }
/* El atributo hidden no oculta un <svg> por hoja de agente: hay que decirlo. */
.ojo svg[hidden] { display: none; }

.aviso {
    padding: 10px 12px;
    border: 1px solid var(--mal);
    color: var(--mal);
    margin-bottom: 16px;
    font-size: 14px;
}

/* ----------------------------------------------------------------- ficha */

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0;
           border-top: 1px solid var(--filete); border-left: 1px solid var(--filete); }
.rejilla > div { padding: 14px 18px 16px; border-right: 1px solid var(--filete); border-bottom: 1px solid var(--filete); }
.rejilla .rotulo { display: block; margin-bottom: 4px; }

.bloque { margin: 44px 0 0; }
/* El filete de la sección NO puede tocar el buscador: pegados se leen como
   una sola pieza y la línea parece el borde superior del campo. */
.bloque > .t-seccion { padding-bottom: 12px; border-bottom: 1px solid var(--filete); margin-bottom: 24px; }

.lista-def { display: grid; grid-template-columns: max-content 1fr; gap: 0 24px; }
.lista-def dt { padding: 9px 0; color: var(--tenue); font-size: 13px; border-bottom: 1px solid var(--pluma); }
.lista-def dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--pluma); }

/* barras de la analítica: sin librería, sin animación */
.serie { display: flex; align-items: flex-end; gap: 2px; height: 96px; margin-top: 18px; }
.serie i { flex: 1; background: var(--tinta); min-height: 1px; display: block; }
.serie i.cero { background: var(--pluma); }
.serie-pie { display: flex; justify-content: space-between; margin-top: 8px; }

/* La barra va DEBAJO del texto, nunca detrás: superpuesta se leía como si la
   etiqueta estuviera tachada. */
.barra-h { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end;
           padding: 8px 0 7px; border-bottom: 1px solid var(--pluma); }
.barra-h .riel { min-width: 0; }
.barra-h .txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h .riel i { display: block; margin-top: 5px; height: 2px; background: var(--tinta); min-width: 1px; }

/* cinta de disponibilidad: un trazo por día */
.cinta { display: flex; gap: 2px; margin-top: 14px; }
.cinta i { flex: 1; height: 30px; }
/* Tres estados que se distinguen SIN color: lleno, vacío con filete, y rojo. */
.cinta i.ok   { background: var(--tinta); opacity: .55; }
.cinta i.roto { background: var(--mal); opacity: 1; }
.cinta i.nada { background: none; border: 1px solid var(--filete); border-top: 0; border-bottom: 0; }

/* --------------------------------------------------------------- revelar */

.secreto { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* La fecha de captura es contexto: baja de renglón y no aprieta la acción. */
.secreto__pie { flex-basis: 100%; font-size: 12px; color: var(--tenue); }
.secreto code { font-family: inherit; letter-spacing: .02em; }

dialog.caja {
    padding: 0;
    border: 1px solid var(--tinta);
    border-radius: 0;
    max-width: 420px;
    width: calc(100% - 32px);
    background: var(--papel);
    color: var(--tinta);
}
dialog.caja::backdrop { background: rgba(30, 33, 36, .28); }
dialog.caja .cuerpo { padding: 24px; }
dialog.caja .pie { display: flex; gap: 10px; justify-content: flex-end; padding: 0 24px 24px; }

/* ------------------------------------------------------------------ vacío */

.vacio { padding: 56px 0; color: var(--tenue); text-align: center; }

/* ---------------------------------------------------------------- reveal */


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

/* ----------------------------------------------------------------- móvil */

@media (max-width: 860px) {
    .lienzo { padding: 24px 16px 80px; }
    .t-pantalla { font-size: 27px; letter-spacing: -.025em; }
    .t-cifra { font-size: 32px; }
    /* La barra pasa a dos renglones: si no, la navegación se come el «Salir». */
    .barra {
        height: auto;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 16px;
        padding: 12px 16px 0;
    }
    .marca span { display: none; }
    .yo { margin-left: auto; gap: 4px; }
    .pop__btn--nombre .nombre { display: none; }
    .pop__btn--nombre { max-width: none; padding: 0 7px; }
    /* Una flecha suelta no dice de quién es el menú: se muestran las iniciales. */
    .iniciales {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px; height: 26px;
        border: 1px solid var(--filete);
        font-size: 11px;
        letter-spacing: .02em;
        color: var(--tinta);
    }
    .pop__btn[aria-expanded="true"] .iniciales { border-color: var(--tinta); }
    /* Los cajones se anclan al borde de la pantalla, no al botón. */
    .cajon { right: -8px; }
    /* El cajón ancho se ancla a la PANTALLA: medido contra su .pop se salía por
       la izquierda y el texto quedaba cortado sin forma de recuperarlo. */
    /* El cajón de columnas se mide contra su .pop y a 375 px se salía por la
       derecha: se ancla a la PANTALLA, igual que el de avisos. Sólo el anclaje:
       el ancho lo fija la regla base, que va después en el archivo y gana. */
    .cajon--cols { position: fixed; left: 12px; }
    /* Las fichas se reparten en varios renglones, y la que queda a la derecha
       abría su cajón fuera de la pantalla por la izquierda. Se ancla a la
       pantalla. Dos clases para ganarle a la regla base, que va después en el
       archivo: aquí la especificidad decide, no el orden. */
    .cajon.cajon--ficha {
        position: fixed;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
    .cajon--ancho {
        position: fixed;
        left: 12px; right: 12px;
        top: 58px;
        width: auto;
        max-width: none;
    }

    /* Safari en iOS acerca la pantalla al enfocar un campo de menos de 16px,
       y con initial-scale=1 se queda acercada: la barra fija sale de cuadro. */
    input, select, textarea { font-size: 16px; }

    /* Nada tocable por debajo de 44px. */
    html { scroll-padding-top: 112px; }
    .pop__btn { min-height: 44px; }
    .nav a { padding: 12px 0; }
    .buscador .limpiar { width: 44px; height: 44px; right: 0; }
    .campo .ojo { width: 44px; height: 44px; }
    .boton { padding: 12px 16px; }
    table.t td .enlace,
    table.t td button.enlace { display: inline-flex; align-items: center; min-height: 44px; }
    .casilla { min-height: 44px; }
    .casilla input { width: 20px; height: 20px; }
    .franja-aviso--mirando { border-bottom: 1px solid var(--tinta); background: var(--papel); }
.franja-aviso--mal { border-bottom-color: var(--mal); color: var(--mal); background: var(--papel); }
.orden-movil { display: none; }
@media (max-width: 860px) { .orden-movil { display: block; } }

.franja-aviso { padding: 10px 16px; }
    .nav {
        order: 3;
        width: 100%;
        margin-top: 12px;
        gap: 20px;
        padding-bottom: 11px;
        -webkit-overflow-scrolling: touch;
    }
    .nav a[aria-current]::after { bottom: -11px; }

    /* la fila se vuelve ficha: el rayado se apaga o se leería como selección */
    table.t, table.t tbody, table.t tr, table.t td { display: block; width: 100%; }
    table.t thead { display: none; }
    table.t tbody tr {
        padding: 14px 0 16px;
        border-bottom: 1px solid var(--filete);
    }
    table.t tbody tr:hover { background: none; }
    table.t tbody tr:hover td:first-child { box-shadow: none; }
    /* El rótulo va posicionado, no en rejilla: con rejilla, un valor formado por
       texto + <span> se parte en dos celdas y la segunda cae al renglón de abajo
       («22 sep 2026» arriba y «· en 43 días» suelto). */
    table.t td {
        display: block;
        position: relative;
        border: 0;
        padding: 3px 0 3px 116px;
        min-height: 22px;
    }
    table.t td::before {
        content: attr(data-rotulo);
        position: absolute;
        left: 0;
        top: 4px;
        width: 104px;
        font-size: 11px;
        letter-spacing: .05em;
        line-height: 1.5;
        text-transform: uppercase;
        color: var(--tenue);
    }
    table.t td.dom {
        padding: 0 0 8px;
        font-size: 17px;
        letter-spacing: -.01em;
    }
    table.t td.dom::before { content: none; }
    table.t td.num, table.t th.num { text-align: left; padding-right: 0; }
    table.t td:first-child { padding-left: 0; }
    .cuenta { margin-left: 0; width: 100%; }
    .lista-def { grid-template-columns: 1fr; gap: 0; }
    .lista-def dt { border-bottom: 0; padding-bottom: 0; }
}

/* ------------------------------------------------------------- impresión */
/* El reporte de tráfico se entrega al agregador: tiene que salir limpio en
   papel y en PDF, sin la barra de navegación ni los controles. */
@media print {
    .barra, .no-imprime, .filtros { display: none !important; }
    .lienzo { padding: 0; }
    .membrete { display: block !important; margin-bottom: 18px; }
    .membrete[hidden] { display: block !important; }
    .bloque { break-inside: avoid; margin-top: 26px; }
    .serie i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .barra-h .riel i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    table.t thead th { position: static; }
    a[href]::after { content: none; }
    body { font-size: 12px; }
    .t-cifra { font-size: 30px; }
}

/* Selector de columnas. Se ancla a la derecha del botón y crece hacia abajo;
   con trece columnas la lista pide su propio desplazamiento. */
.cajon--cols { width: 232px; max-height: 60vh; overflow-y: auto; }
.cajon__op--casilla {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 14px;
}
.cajon__op--casilla input { accent-color: var(--tinta); margin: 0; }
.cajon__op--casilla input:disabled { opacity: .45; cursor: default; }
.cajon__cab .enlace { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }

/* Menú del renglón. El botón vive dentro de la celda del dominio, no en una
   columna propia: una columna entera para tres puntos es ancho regalado.
   La caja flexible se acota a las celdas QUE LLEVAN menú: en Correos esa misma
   clase envuelve dos renglones separados por <br>, y en una caja flexible el
   salto no vale nada y el segundo renglón se iría al lado del primero. */
/* La celda del dominio se queda como CELDA. Estuvo un tiempo con `display:flex`
   para alinear la casilla, el nombre y el botón, y eso la sacaba de la retícula
   de la tabla: dejaba de estirarse al alto de la fila y su filete quedaba 23 px
   más arriba que el de las otras cinco columnas. Se ve en cuanto una fila lleva
   dos renglones. La caja flexible va DENTRO, en un envoltorio. */
.dom--menu > .dom-flex {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dom--menu > .dom-flex > :first-child { min-width: 0; }
.mas {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 22px;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    color: var(--tenue);
    cursor: pointer;
}
.mas:hover, .mas[aria-expanded="true"] { color: var(--tinta); border-color: var(--borde); }
.mas:focus-visible { outline: 0; box-shadow: var(--foco); }

.menu-fila {
    position: absolute;
    z-index: 60;
    min-width: 188px;
    background: var(--papel);
    border: 1px solid var(--borde);
}
.menu-fila[hidden] { display: none; }
.menu-fila__op {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border: 0;
    border-bottom: 1px solid var(--filete);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.menu-fila__op:last-child { border-bottom: 0; }
.menu-fila__op:hover, .menu-fila__op:focus { background: var(--capa); }

/* Barra de páginas: el conteo vive arriba con los filtros, así que aquí abajo
   sólo van los saltos y el tamaño. */
.barra-paginas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
}
.paginas { display: flex; gap: 4px; }
.paginas[hidden] { display: none; }
.pagina {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: 1px solid var(--filete);
    background: none;
    color: var(--tenue);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.pagina:hover:not(:disabled) { color: var(--tinta); border-color: var(--borde); }
.pagina--aqui { color: var(--tinta); border-color: var(--tinta); }
.pagina:disabled { opacity: .4; cursor: default; }
.por-pagina {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--tenue);
    font-size: 13px;
}

/* Fichas de filtro — las suyas, medidas: caja de 32, relleno #f5f7f8, radio
   de 12 y separación de 8. Antes iban rectas y con filete de un pixel; sobre
   un renglón de siete filtros eso son siete rectángulos que compiten con la
   tabla. Rellenas y sin filete se leen como un grupo y sueltan la mirada. */
.pop--ficha { position: relative; }
.fichas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ficha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--capa-ficha);
    border-radius: 12px;
    background: var(--capa-ficha);
    color: var(--tinta);
    font: inherit;
    font-size: 14px;
    line-height: 21px;
    cursor: pointer;
    white-space: nowrap;
}
.ficha:hover { border-color: var(--borde); }
/* Puesta: filete de tinta. El color solo no basta —hay quien no lo ve— así
   que además la ficha cambia de texto y dice el valor que está filtrando.
   Va doblada —.ficha.ficha--puesta— a propósito: con una sola clase perdía
   contra el `border: 1px solid var(--capa-ficha)` de arriba pese a ir después.
   El atajo con var() se resuelve tarde y no cede ante el longhand. */
.ficha.ficha--puesta { border-color: var(--tinta); }
.ficha__v { display: inline-flex; align-items: center; color: var(--tenue); }
.ficha--puesta .ficha__v { color: var(--tinta); }
.ficha[aria-expanded="true"] .ficha__v svg { transform: rotate(180deg); }
.ficha__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: -4px;
    border-radius: 50%;
    color: var(--tenue);
}
.ficha__x:hover { background: var(--capa-2); color: var(--tinta); }
.ficha__x[hidden] { display: none; }

/* La fila de acciones va ARRIBA de las fichas, como en el suyo: lo que
   configura la tabla —columnas, vistas, exportar— no es un filtro y no debe
   confundirse con uno. Caja de 56 con icono de 24, medida de su panel. */
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--tinta);
    font: inherit;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
    white-space: nowrap;
}
.accion:hover { background: var(--capa-ficha); }
.accion[aria-expanded="true"] { background: var(--capa-2); }
.accion .ic { flex: none; }
/* Aquí vivía una regla para el botón de Columnas. Sobra desde que el botón
   lleva .accion, y hacía daño: `.pop[data-pop=columnas] .pop__btn` pesa más
   que `.accion`, así que en móvil se quedaba con los 56 de escritorio mientras
   los otros dos bajaban a 44 y el renglón salía escalonado. */

/* El conteo, en su sitio: renglón propio entre los filtros y la tabla. Antes
   colgaba al final de la fila de filtros, donde nadie lo iba a leer. */
.cuenta-tabla {
    /* 14 abajo, no 8: el encabezado empezaba a CERO píxeles del conteo. */
    padding: 16px 0 14px;
    color: var(--tenue);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    /* El conteo a la izquierda y las flechas de columna a la derecha, en el
       mismo renglón. Sin `min-height`: cuando no hay flechas —la tabla cabe
       entera— un renglón de 45 para un texto de 14 deja el conteo colgado en
       medio de un claro, que es como se veía. Con flechas, ellas fijan el alto. */
    display: flex;
    align-items: center;
    gap: 16px;
}
/* El conteo arrastraba el `margin-left:auto` de cuando vivía al final de la
   fila de filtros: aquí lo empujaba al otro extremo del renglón y quedaba
   volando a la derecha, lejos de todo. En su renglón va a la IZQUIERDA. */
.cuenta--linea { margin-left: 0; margin-right: auto; }

/* En una pantalla de 375, la caja de 56 con sangrado de 24 le come tres
   renglones a las tres acciones. Se aprieta hasta que caben en uno: son las
   medidas de un panel de escritorio, y ahí no estamos. */
@media (max-width: 860px) {
    /* align-items:center o los dos envoltorios de desplegable caen a alturas
       distintas y el renglón queda escalonado. */
    .acciones { gap: 0; margin-left: 0; width: 100%; align-items: center; justify-content: space-between; }
    .accion { height: 44px; padding: 0 8px; gap: 6px; font-size: 15px; }
    .accion .ic { width: 20px; height: 20px; }
    .buscador { flex: 1 1 100%; }
}

.cajon--ficha { width: max-content; min-width: 172px; max-width: 280px; max-height: 58vh; overflow-y: auto; }
.cajon__op--aqui { color: var(--tinta); }
.cajon__op--aqui::before { content: '· '; }
.quitar-filtros {
    height: 32px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--tenue);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.quitar-filtros:hover { color: var(--tinta); }
.quitar-filtros[hidden] { display: none; }

/* Selección en lote. La barra sólo existe cuando hay algo seleccionado: una
   barra vacía permanente es ruido que no dice nada. */
.marca-fila { flex: none; margin: 0; accent-color: var(--tinta); cursor: pointer; }
.fila--marcada > td { background: var(--capa); }
.lote {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 12px;
    padding: 9px 12px;
    border: 1px solid var(--tinta);
}
.lote[hidden] { display: none; }
.lote__cuenta { font-variant-numeric: tabular-nums; }
.lote__op {
    border: 0;
    background: none;
    color: var(--tinta);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.lote__op[hidden] { display: none; }
.lote__op:disabled { color: var(--tenue); text-decoration: none; cursor: default; }
.lote__op--tenue { color: var(--tenue); }
.lote__op--tenue:hover { color: var(--tinta); }
.lote__op--tenue:last-of-type { margin-left: auto; }

/* ══════════════════════════════════════════ navegación lateral (GoDaddy)
   La estructura es la suya, medida de sus capturas: columna fija de 232 px,
   secciones con encabezado en versalitas, renglón con icono y nombre, y el
   activo con fondo lleno. El acabado es el de este panel: un peso, filete de
   un pixel, cero radios. Se copia lo que funciona, no lo que decora. */

/* La retícula de dos columnas SÓLO donde hay lateral.
   Sin acotarla, la pantalla de entrada —que no pasa por el marco y por tanto
   no tiene lateral— metía su formulario en la columna de 232 px del lateral
   que no existe, y salía encogido contra el borde izquierdo. */
body.con-lado {
    display: grid;
    grid-template-columns: var(--lado, 232px) minmax(0, 1fr);
    min-height: 100vh;
}
body.con-lado.lado-plegado { --lado: 60px; }

.saltar {
    position: absolute;
    left: -9999px;
}
.saltar:focus {
    left: 8px; top: 8px; z-index: 90;
    padding: 8px 12px;
    background: var(--papel);
    border: 1px solid var(--tinta);
}

.lado {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--filete);
    background: var(--papel);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lado__cab {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--filete);
}
.lado__cab .marca { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--tinta); min-width: 0; }
.marca__t { font-size: 13px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.plegar {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    color: var(--tenue);
    cursor: pointer;
}
.plegar:hover { color: var(--tinta); border-color: var(--borde); }
.plegar:focus-visible { outline: 0; box-shadow: var(--foco); }

.lado__nav { padding: 12px 0 24px; }
.lado__grupo {
    margin: 14px 0 4px;
    padding: 0 16px;
    color: var(--tenue);
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.lado__grupo:first-child { margin-top: 4px; }

.lado__op {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 16px;
    color: var(--tenue);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.lado__op svg { flex: none; }
.lado__op:hover { color: var(--tinta); background: var(--capa); }
/* El activo se dice con fondo Y con peso de tinta, no sólo con color: sobre
   una lista larga el color solo no basta para encontrarse. */
.lado__op.es-aqui { color: var(--tinta); background: var(--capa-2); }
.lado__op:focus-visible { outline: 0; box-shadow: var(--foco); }

/* Plegada: sólo iconos, y el nombre se sigue anunciando al lector de pantalla. */
body.lado-plegado .marca__t,
body.lado-plegado .lado__op span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.lado-plegado .lado__cab { justify-content: center; padding: 0 8px; }
body.lado-plegado .lado__cab .marca { gap: 0; }

/* ─────────────────────────────────────────────────── la columna derecha */
.col { display: flex; flex-direction: column; min-width: 0; }

.barra {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 60px;
    padding: 0 24px;
    border-bottom: 1px solid var(--filete);
    background: var(--papel);
}
.barra__aqui { color: var(--tenue); font-size: 14px; }
.barra .yo { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.abrir-lado { display: none; }

/* ───────────────────────────────────────────────────────────── en móvil */
@media (max-width: 860px) {
    /* `body.con-lado` (0,1,1) le gana a `body` (0,0,1): con la regla escrita
       como `body` a secas, en el móvil seguían reservándose los 232 px del
       lateral y el contenido se metía en ellos —en una pantalla de 375 quedaba
       en 232 y sobraban 143 vacíos a la derecha, con la barra partida encima
       del aviso—. El lateral en móvil es un cajón `fixed` que se superpone: no
       le toca una columna de la retícula. Tercera vez hoy con el mismo tropiezo
       de especificidad, y la primera que salía a un ancho que no miro a diario. */
    body.con-lado { grid-template-columns: minmax(0, 1fr); }
    .lado {
        position: fixed;
        z-index: 70;
        top: 0; bottom: 0; left: 0;
        width: 268px;
        transform: translateX(-100%);
        border-right: 1px solid var(--borde);
    }
    body.lado-abierto .lado { transform: none; }
    body.lado-plegado { --lado: 232px; }
    body.lado-plegado .marca__t,
    body.lado-plegado .lado__grupo,
    body.lado-plegado .lado__op span { position: static; width: auto; height: auto; clip: auto; }
    body.lado-plegado .lado__op { justify-content: flex-start; padding: 9px 16px; }
    .plegar { display: none; }

    .abrir-lado {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px; height: 32px;
        padding: 0;
        border: 1px solid var(--filete);
        background: none;
        color: var(--tinta);
        cursor: pointer;
    }
    .velo {
        position: fixed;
        inset: 0;
        z-index: 60;
        background: rgba(30, 33, 36, .32);
    }
    .velo[hidden] { display: none; }
    .barra { padding: 0 16px; }
}

/* Densidad de la tabla, como la referencia: UN renglón por registro. Antes el
   texto se partía en dos y tres líneas y una pantalla mostraba doce dominios
   donde caben veinte. Lo que no cabe a lo ancho se desplaza —es lo que hace
   GoDaddy, que por eso pone las flechas en su cabecera—, no se apila. */
table.t td, table.t th { white-space: nowrap; }
table.t td.dom { white-space: nowrap; }
/* La única que sí puede partirse es la del dominio si el nombre es larguísimo. */
table.t td.dom > a { overflow: hidden; text-overflow: ellipsis; }

/* Aviso de que hay más columnas a la derecha: sin esto, el que no arrastra
   nunca se entera de que existen. */
.marco-tabla { position: relative; }
.marco-tabla::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), var(--papel));
    opacity: 0;
    transition: opacity .12s;
}
.marco-tabla.hay-mas::after { opacity: 1; }

/* ═══════════════ el plegado, con el comportamiento de GoDaddy
   Plegado deja un riel de iconos y el botón de plegar DESAPARECE. Al asomarse
   con el ratón, el riel se abre ENCIMA del contenido —sin empujarlo— y ahí sí
   sale el botón de volver, que lo deja abierto de plano. Es lo que hacen ellos
   y funciona: se navega sin perder ancho de tabla y sin comprometerse. */
.desplegar { display: none; }

body.lado-plegado .plegar { display: none; }

body.lado-plegado .lado {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 60px;
    z-index: 50;
    transition: width .12s ease-out;
}
body.lado-plegado:not(.sin-asomo) .lado:hover,
body.lado-plegado .lado:focus-within {
    width: 232px;
    border-right: 1px solid var(--borde);
}
/* Asomado: vuelven los nombres y aparece el botón de volver. */
body.lado-plegado:not(.sin-asomo) .lado:hover .marca__t,
body.lado-plegado .lado:focus-within .marca__t,
body.lado-plegado:not(.sin-asomo) .lado:hover .lado__op span,
body.lado-plegado .lado:focus-within .lado__op span {
    position: static; width: auto; height: auto; clip: auto;
}
body.lado-plegado:not(.sin-asomo) .lado:hover .lado__cab,
body.lado-plegado .lado:focus-within .lado__cab { justify-content: flex-start; padding: 0 12px 0 16px; }
body.lado-plegado:not(.sin-asomo) .lado:hover .lado__cab .marca,
body.lado-plegado .lado:focus-within .lado__cab .marca { gap: 9px; }
body.lado-plegado:not(.sin-asomo) .lado:hover .desplegar,
body.lado-plegado .lado:focus-within .desplegar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    margin-left: auto;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    color: var(--tenue);
    cursor: pointer;
}
body.lado-plegado:not(.sin-asomo) .lado:hover .desplegar:hover,
body.lado-plegado .lado:focus-within .desplegar:hover { color: var(--tinta); border-color: var(--borde); }

/* Los iconos del riel, centrados y del mismo tamaño que en la referencia. */
.lado__op svg, .plegar svg, .desplegar svg { flex: none; }

@media (max-width: 860px) {
    /* En móvil no hay riel: el lateral es cajón, y ahí ninguno de los dos
       botones tiene sentido. */
    body.lado-plegado .lado { position: fixed; width: 268px; transition: none; }
    body.lado-plegado:not(.sin-asomo) .lado:hover { width: 268px; }
    .desplegar, body.lado-plegado:not(.sin-asomo) .lado:hover .desplegar { display: none; }
}

/* Al plegar, el lateral pasa a posición fija y SALE de la retícula: sin fijar
   la columna, el contenido se metía en la primera y la tabla quedaba en 12 px.
   Cada uno declara la suya y el plegado deja de moverlas. */
.lado { grid-column: 1; }
.col  { grid-column: 2; }
@media (max-width: 860px) { .col { grid-column: 1; } }

/* ───────────────── el plegado NO mueve nada en vertical
   Antes, al plegar, los encabezados de sección pasaban de su alto normal a
   1 px y el relleno del renglón de 9 a 10: ocho renglones multiplicando esa
   diferencia hacían que el menú entero saltara al abrir y cerrar. Ahora la
   caja vertical es la MISMA en los tres estados —abierto, plegado y asomado—
   y lo único que cambia es lo horizontal. El texto se oculta sin salirse del
   flujo, así que cada renglón se queda clavado en su altura. */
.lado__grupo {
    height: 16px;
    margin: 14px 0 4px;
    padding: 0 16px;
    line-height: 16px;
    overflow: hidden;
}
.lado__op { padding: 9px 16px; }

body.lado-plegado .lado__grupo { padding: 0 8px; color: transparent; }
body.lado-plegado .lado__op    { padding: 9px 0; justify-content: center; }

body.lado-plegado:not(.sin-asomo) .lado:hover .lado__grupo,
body.lado-plegado .lado:focus-within .lado__grupo { padding: 0 16px; color: var(--tenue); }
body.lado-plegado:not(.sin-asomo) .lado:hover .lado__op,
body.lado-plegado .lado:focus-within .lado__op { padding: 9px 16px; justify-content: flex-start; }

/* Los dos botones ocupan exactamente la misma caja: al relevarse uno al otro
   la cabecera no cambia de alto ni un pixel. */
.plegar, .desplegar,
body.lado-plegado:not(.sin-asomo) .lado:hover .desplegar,
body.lado-plegado .lado:focus-within .desplegar {
    width: 28px;
    height: 28px;
    padding: 0;
    flex: none;
}

/* El último resto del salto: plegado, el alto del renglón lo fijaba el icono
   (20 px); abierto, lo fijaba la línea de texto (22). Dos pixeles por renglón
   que se acumulaban por la lista. Con altura fija, los tres estados dan la
   misma Y en todos los renglones. */
.lado__op {
    height: 38px;
    box-sizing: border-box;
    padding: 0 16px;
}
body.lado-plegado .lado__op { padding: 0; }
body.lado-plegado:not(.sin-asomo) .lado:hover .lado__op,
body.lado-plegado .lado:focus-within .lado__op { padding: 0 16px; }

/* ── Botones de icono redondos, como los suyos ──────────────────────────────
   Medido en su panel el 2026-08-12: sus botones de icono llevan
   `border-radius: 50%`. Los míos se marcaban con un FILETE cuadrado al pasar
   por encima —el recuadro que salía en la campana y en el de plegar—, que es
   la señal equivocada: un filete dice «esto es un campo», un redondel dice
   «esto se pulsa». */
.campana,
.plegar,
.desplegar,
.abrir-lado {
    border-radius: 50%;
    border-color: transparent;
    transition: background-color .12s var(--curva), color .12s var(--curva);
}
/* El redondel tiene que ser CUADRADO de lado para no salir ovalado: el botón
   de la campana mide 44 de alto y su ancho lo fija el contenido. */
/* La campana va en TINTA, no en gris. Era `--tenue` y ése era el desajuste
   real de la insignia: con la campana borrada, una insignia de color pleno al
   lado parece un globo pegado, y por eso se leía «mal posicionada» por más que
   se moviera. La de GoDaddy es negra —su hoja la declara `color:#000`— y por
   eso allí las dos piezas pesan lo mismo. Se movió tres veces la insignia
   buscando el problema donde no estaba: lo que fallaba era el contraste entre
   las dos, no la geometría de una. */
.campana { width: 44px; padding: 0; justify-content: center; color: var(--tinta); }
.plegar, .desplegar { width: 32px; height: 32px; }

/* SIN fondo al pasar por encima. Medido en su campana el 2026-08-12: el fondo
   sigue siendo transparente con el ratón encima —sólo cambia el color del
   trazo—. El óvalo gris que había puesto era invención mía, y en una barra
   limpia una mancha que aparece y desaparece pesa más que lo que informa.
   El radio del 50% se queda: es lo que le da forma al aro de foco. */
.campana:hover,
.plegar:hover,
.desplegar:hover,
.abrir-lado:hover,
.campana[aria-expanded="true"] {
    background: none;
    border-color: transparent;
    color: var(--tinta);
}
/* El foco SÓLO con teclado. `:focus` a secas dispara también al pulsar con el
   ratón, y por eso quedaba un marco pegado a la campana después del clic. */
.campana:focus:not(:focus-visible),
.plegar:focus:not(:focus-visible),
.desplegar:focus:not(:focus-visible),
.abrir-lado:focus:not(:focus-visible) { box-shadow: none; outline: 0; }


/* ── El pico del cajón, la misma técnica que el globo ──────────────────────
   En el suyo el panel de notificaciones sale con un pico que lo ata a la
   campana. Sin él, el cajón parece caído del techo y no se sabe de qué botón
   salió —con tres botones en la barra, eso importa—.
   Va DOBLE: uno del color del filete y otro del papel medio pixel más abajo,
   porque el cajón tiene borde y un solo cuadrado giraría con el filete
   partido por la mitad. */
/* SÓLO en los dos de la barra —alertas y cuenta—, que cuelgan de un botón
   redondo y necesitan decir de cuál salieron. Los desplegables de filtro y el
   de columnas nacen pegados a su ficha, que ya es su ancla: ponerles pico sería
   señalar lo obvio y meter un triángulo en medio de la fila de filtros. */
.pop[data-pop="avisos"] .cajon::before,
.pop[data-pop="avisos"] .cajon::after,
.pop[data-pop="cuenta"] .cajon::before,
.pop[data-pop="cuenta"] .cajon::after {
    content: "";
    position: absolute;
    top: -8px;
    right: 14px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
}
.pop[data-pop="avisos"] .cajon::before,
.pop[data-pop="cuenta"] .cajon::before { background: var(--tinta); }
.pop[data-pop="avisos"] .cajon::after,
.pop[data-pop="cuenta"] .cajon::after  { background: var(--papel); margin-top: 1px; }


/* ══════════════════════════════════════════════ pantalla de mano y tableta
   Medido con el banco de pruebas a 375, 768 y 1024: NO había desbordes
   horizontales —el fallo grave— pero sí objetivos de dedo por debajo de 40 px
   y rótulos a 11. En escritorio ninguna de las dos cosas molesta; con el dedo
   y a un brazo de distancia, las dos. */
@media (max-width: 860px) {

    /* ── lo que se toca ──────────────────────────────────────────────────
       44 es la medida de un dedo. Debajo de eso se falla el objetivo y se
       pulsa el de al lado, que en una tabla es abrir el sitio equivocado. */
    .lado__op    { height: auto; min-height: 44px; }
    .abrir-lado  { width: 44px; height: 44px; }
    .lado__cab .marca { min-height: 44px; }

    /* El «…» de cada fila es la puerta a todo lo que se puede hacer con ese
       renglón: a 22 px es el peor sitio donde ahorrar espacio. Se agranda la
       zona de toque sin agrandar los tres puntos, que se ven igual. */
    .mas {
        width: 44px;
        height: 44px;
        margin: -11px -12px -11px 0;   /* la caja crece hacia fuera: la fila no */
    }

    /* La casilla de fila pasa de 13 a 24. No llega a 44 a propósito: una
       casilla de 44 en la primera columna se come el nombre del dominio, que
       es lo que se viene a leer. 24 es el tamaño cómodo de siempre y casi
       duplica el blanco de acierto. */
    .marca-fila,
    input[type="checkbox"] { width: 24px; height: 24px; }

    /* ── lo que se lee ───────────────────────────────────────────────────
       De 11 a 12. Once píxeles en versalitas y con interletraje se lee como
       letra pequeña de contrato; es la misma corrección que ya se hizo en el
       encabezado de la tabla, que pasó de 11 en versalitas a 14 en caja baja. */
    .lado__grupo,
    .rotulo,
    .sello,
    .iniciales,
    .cuenta-tabla,
    /* `.campo label` a secas NO gana: la regla de arriba es `.campo label`
       (0,1,1) y un `label` pelón es (0,0,1). Hay que igualar la especificidad o
       la etiqueta se queda en 11 aunque la regla exista. Es el mismo tropiezo
       del `td.num` contra `table.t td`. */
    .campo label { font-size: 12px; }

    /* El campo de fecha se queda en 31 porque el navegador le pone su propia
       altura; hay que decírselo. Una fecha se pulsa igual que un botón. */
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"] { min-height: 44px; }
}


/* El título de la puerta. Antes iba oculto porque encima estaba el logotipo del
   cliente; ahora la puerta la usan todos los clientes, así que el logotipo de
   uno no puede estar ahí y el nombre del panel pasa a ser lo que se lee. */
.t-puerta {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -.02em;
    color: var(--tinta);
}

/* El encabezado ya es flex; su formulario alinea con el rótulo en vez de
   romper la línea de base. */
.encabezado form { display: flex; align-items: baseline; gap: 10px; }

/* `td.sec` es (0,1,1) y `.mal` a secas (0,1,0): un importe vencido con las dos
   clases se quedaba GRIS, y el código parecía correcto. Se iguala el peso en
   vez de fiarlo al orden del archivo. Es la cuarta vez que muerde lo mismo:
   `td.num` contra `table.t td`, `body.con-lado` contra `body`, `.campo label`
   contra `label`. */
td.num.mal { color: var(--mal); }

/* La moneda no se queda huérfana en su propia línea.
   Un importe con su MXN pide 169 px a 26 px de cuerpo. Las tarjetas del resumen
   son de ancho variable (auto-fit): a 1440 dejan 192 px de contenido y cabe; a
   1280 dejan 160 y el «MXN» caía solo al renglón siguiente.
   Se encoge SOLO la tarjeta que se queda corta, no la tipografía entera: en
   Facturación la misma clase vive en tarjetas anchas donde 26 px cabe de sobra.
   El umbral es medido, no elegido: 168 px es justo donde deja de caber.
   OJO al medir: `@container` compara contra la CAJA DE CONTENIDO del contenedor,
   no contra su ancho exterior. Son los 40 px de relleno de diferencia, y creerse
   el ancho exterior manda el umbral 40 px arriba. */
.tira > div { container-type: inline-size; }
@container (max-width: 168px) {
    .tira .t-cifra-s { font-size: 21px; }
}

/* ── Rangos de fecha ──────────────────────────────────────────────────────
   Los tres de siempre a un clic, y el libre al lado. Un selector de fechas
   solo obliga a teclear dos veces para la consulta que se hace el 90% de las
   veces; tres atajos sin el rango libre dejan tirado al que necesita un mes
   cerrado. Van juntos. */
.rangos { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -8px 0 30px; }
.rangos__op {
    display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
    border: 1px solid var(--filete); border-radius: 999px;
    color: var(--tenue); text-decoration: none; font-size: 13px; white-space: nowrap;
}
.rangos__op:hover { color: var(--tinta); border-color: var(--gris-flecha); }
.rangos__op.es-aqui { color: var(--tinta); border-color: var(--tinta); }
.rangos__libre { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.rangos__libre label { font-size: 13px; color: var(--tenue); }
.rangos__libre input { height: 32px; }

/* ── Gráfica ──────────────────────────────────────────────────────────────
   Dibujada en SVG desde PHP. No es una preferencia estética: la política de
   seguridad del panel no deja cargar código de fuera, y ésa es la regla que
   impide que una inyección se ejecute con las contraseñas de ochenta buzones
   dentro. Una barra por día, sin retícula ni leyenda: lo que se mira aquí es
   la forma, y los números exactos están en la tabla de abajo. */
.grafica { width: 100%; }
.grafica svg { display: block; width: 100%; height: 190px; }
.grafica__b { fill: var(--tinta); }
.grafica__b:hover { fill: var(--mal); }
.grafica__eje { stroke: var(--filete); stroke-width: 1; }
.grafica__pie {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: 10px; font-size: 12px; color: var(--tenue);
}
@media (max-width: 860px) {
    .rangos__libre { margin-left: 0; width: 100%; }
    .grafica svg { height: 150px; }
}