/*
 | EL PANEL SE MIRA DE PIE Y CON PRISA, casi siempre en el móvil. Así que:
 | pocas cosas, grandes, y lo que está mal arriba del todo.
 |
 | EL COLOR NUNCA VA SOLO. Cada tarjeta dice con palabras lo que le pasa; el
 | color solo lo repite. Un panel que solo habla en colores no lo puede leer
 | quien no distingue el rojo del verde, y tampoco se puede leer de un vistazo
 | con el sol dando en la pantalla.
 */

/*
 | CLARO Y OSCURO, Y «LO QUE DIGA EL SISTEMA» COMO PUNTO DE PARTIDA.
 |
 | Los colores se declaran UNA vez como variables y se cambian en bloque. El día
 | que se añada un color nuevo, se añade en los dos sitios o se ve en el acto.
 |
 | LOS TRES ESTADOS SON DE VERDAD TRES: `data-tema="claro"`, `data-tema="oscuro"`
 | y, sin atributo, lo que diga el sistema. Un interruptor de dos posiciones no
 | puede volver a «lo que diga el sistema» una vez tocado, y entonces el panel se
 | queda en claro a las tres de la mañana porque un día se pulsó.
 |
 | LOS COLORES DEL SEMÁFORO CAMBIAN ENTRE UNO Y OTRO, y no por gusto: el verde
 | y el ámbar que se leen sobre fondo oscuro no tienen contraste suficiente
 | sobre blanco. Aquí el color es lo de menos --cada tarjeta dice con palabras
 | lo que le pasa-- pero si se pinta, que se lea.
 */

:root {
    --fondo: #0f172a;
    --papel: #1e293b;
    --papel-borde: #334155;
    --tinta: #e2e8f0;
    --tinta-floja: #94a3b8;

    --bien: #22c55e;
    --ojo: #f59e0b;
    --mal: #ef4444;
    --callado: #64748b;

    color-scheme: dark;
}

/* Lo que diga el sistema, mientras nadie elija. */
@media (prefers-color-scheme: light) {
    :root:not([data-tema="oscuro"]) {
        --fondo: #f6f7f9;
        --papel: #ffffff;
        --papel-borde: #d8dee7;
        --tinta: #16202e;
        --tinta-floja: #5c6b7f;

        --bien: #15803d;
        --ojo: #a16207;
        --mal: #b91c1c;
        --callado: #64748b;

        color-scheme: light;
    }
}

/* Y lo elegido gana en los dos sentidos. */
:root[data-tema="claro"] {
    --fondo: #f6f7f9;
    --papel: #ffffff;
    --papel-borde: #d8dee7;
    --tinta: #16202e;
    --tinta-floja: #5c6b7f;

    --bien: #15803d;
    --ojo: #a16207;
    --mal: #b91c1c;
    --callado: #64748b;

    color-scheme: light;
}

:root[data-tema="oscuro"] {
    --fondo: #0f172a;
    --papel: #1e293b;
    --papel-borde: #334155;
    --tinta: #e2e8f0;
    --tinta-floja: #94a3b8;

    --bien: #22c55e;
    --ojo: #f59e0b;
    --mal: #ef4444;
    --callado: #64748b;

    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 1rem;
    background: var(--fondo);
    color: var(--tinta);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

a { color: inherit; }

/* ------------------------------------------------------------- la cabecera */

.cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.cabecera h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.titular { margin: .15rem 0 0; color: var(--tinta-floja); }
.titular strong { color: var(--ojo); }

body.estado-mal .titular strong { color: var(--mal); }

.cuando { color: var(--tinta-floja); font-size: .85rem; }
.salir { margin-left: .75rem; text-decoration: underline; }

.aviso-gordo {
    color: var(--mal);
    font-weight: 700;
    letter-spacing: .02em;
}

.alarma {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border-radius: .6rem;
    border: 1px solid var(--mal);
    background: color-mix(in srgb, var(--mal) 14%, transparent);
}

/* ------------------------------------------------------------- las tarjetas */

.rejilla {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.tarjeta {
    position: relative;
    padding: .9rem 1rem 1rem;
    border-radius: .8rem;
    border: 1px solid var(--papel-borde);
    background: var(--papel);
    /* La franja de color a la izquierda: se ve antes de leer nada. */
    border-left: 5px solid var(--callado);
}

.tarjeta.bien { border-left-color: var(--bien); }
.tarjeta.ojo { border-left-color: var(--ojo); }
.tarjeta.mal { border-left-color: var(--mal); }
.tarjeta.callado { border-left-color: var(--callado); }

.tarjeta > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.tarjeta h2 { margin: 0; font-size: 1.05rem; }

.chincheta {
    width: .7rem; height: .7rem; border-radius: 50%;
    background: var(--callado); flex: none;
}

.tarjeta.bien .chincheta { background: var(--bien); }
.tarjeta.ojo .chincheta { background: var(--ojo); }
.tarjeta.mal .chincheta { background: var(--mal); }

.que-es { margin: .15rem 0 .6rem; font-size: .78rem; color: var(--tinta-floja); }
.mira { opacity: .8; font-style: italic; }

.veredicto { margin: 0 0 .4rem; font-weight: 700; }

.tarjeta.ojo .veredicto { color: var(--ojo); }
.tarjeta.mal .veredicto { color: var(--mal); }
.tarjeta.callado .veredicto { color: var(--tinta-floja); }

.motivos { margin: 0 0 .7rem; padding-left: 1.05rem; font-size: .87rem; color: var(--tinta); }
.motivos li { margin: .12rem 0; }

/* -------------------------------------------------------------- las cifras */

.cifras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem .75rem;
    margin: 0 0 .6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--papel-borde);
}

.cifras dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-floja); }
.cifras dd { margin: 0; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cifras dd span { font-size: .8rem; font-weight: 400; color: var(--tinta-floja); }
.cifras dd.pequena { font-size: .9rem; font-weight: 600; }

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

.tarjeta > footer { font-size: .75rem; color: var(--tinta-floja); }

.pie {
    margin: 1.5rem 0 0;
    font-size: .78rem;
    color: var(--tinta-floja);
    max-width: 46rem;
}

/* --------------------------------------------------------------- la puerta */

body.entrada {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

body.entrada .tarjeta { width: min(22rem, 100%); border-left-width: 1px; }
body.entrada h1 { margin: 0 0 .1rem; }

body.entrada label {
    display: block;
    margin: .9rem 0 .3rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-floja);
}

body.entrada input {
    width: 100%;
    padding: .6rem .7rem;
    font-size: 1rem;
    border-radius: .5rem;
    border: 1px solid var(--papel-borde);
    background: var(--fondo);
    color: var(--tinta);
}

body.entrada button {
    width: 100%;
    margin-top: .9rem;
    padding: .65rem;
    font-size: 1rem;
    font-weight: 700;
    border: 0;
    border-radius: .5rem;
    background: var(--tinta);
    color: var(--fondo);
    cursor: pointer;
}

/* Quien haya pedido menos movimiento, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 | LO QUE SE AÑADIÓ AL HACERLO DE VERDAD: menú, detalle, comparativa, gráficas.
 |
 | LOS TONOS DE SERIE NO SE ELIGIERON A OJO: salen de una paleta validada contra
 | ESTA superficie (#1e293b) --banda de luminosidad, suelo de croma, separación
 | para daltonismo y contraste-- y pasan las cinco comprobaciones. Son tres y no
 | hay un cuarto a propósito: a partir de ahí dejan de distinguirse.
 |
 | LOS DE ESTADO SON OTROS Y NO SE MEZCLAN. Un color de estado no puede hacer de
 | serie ni al revés: si «rojo» significa a veces «mal» y a veces «InforMálaga»,
 | no significa nada.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;

    --bien: #0ca30c;
    --ojo: #fab219;
    --mal: #d03b3b;
    --callado: #64748b;

    --rejilla: #2c3a4f;
}

/* --------------------------------------------------------------- el menú */

/*
 | LA BARRA DE ARRIBA. Se mira en un iPhone y tiene que caber sin partirse.
 |
 | Tres piezas: la marca, las pestañas y los mandos. En pantalla ancha van en una
 | fila; en el móvil la marca y los mandos comparten la primera y las pestañas
 | bajan a una fila propia, a todo el ancho, como pestañas de verdad. Los mandos
 | de la derecha esconden su texto donde no cabe y se quedan en icono: el título
 | y el `aria-label` siguen llevando la palabra entera.
 |
 | Y SE QUEDA PEGADA ARRIBA al hacer scroll, con el fondo un poco translúcido:
 | en un panel que se recorre con el pulgar, tener siempre a mano cambiar de
 | sección vale más que el centímetro que ocupa.
 */

.barra {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
    margin: -1rem -1rem 1.1rem;
    padding: .55rem 1rem;
    padding-top: max(.55rem, env(safe-area-inset-top));
    border-bottom: 1px solid var(--papel-borde);
    background: color-mix(in srgb, var(--fondo) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

.barra .marca {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--tinta);
}

.barra .marca .icono { width: 22px; height: 22px; }
.barra .marca .i-ojo { fill: var(--ojo); }

.pestanas {
    display: inline-flex;
    gap: .2rem;
    padding: .2rem;
    border-radius: .7rem;
    background: var(--papel);
    border: 1px solid var(--papel-borde);
}

.pestana {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .8rem;
    border-radius: .5rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--tinta-floja);
    text-decoration: none;
    white-space: nowrap;
}

.pestana:hover, .pestana:focus-visible { color: var(--tinta); }

.pestana.aqui {
    color: var(--fondo);
    background: var(--tinta);
}

.mandos {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.tema {
    display: inline-flex;
    gap: 1px;
    padding: 2px;
    border-radius: .6rem;
    border: 1px solid var(--papel-borde);
    background: var(--papel);
}

.tema button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .55rem;
    font: inherit;
    font-size: .8rem;
    line-height: 1.2;
    color: var(--tinta-floja);
    background: none;
    border: 0;
    border-radius: .45rem;
    cursor: pointer;
}

.tema button[aria-pressed="true"] {
    color: var(--fondo);
    background: var(--tinta);
    font-weight: 700;
}

.barra .salir {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .6rem;
    border-radius: .55rem;
    border: 1px solid var(--papel-borde);
    background: var(--papel);
    color: var(--tinta-floja);
    font-size: .85rem;
    text-decoration: none;
}

.barra .salir:hover, .barra .salir:focus-visible { color: var(--tinta); border-color: var(--tinta-floja); }

/* Apuntar es la única acción de la barra, así que va con el color de la marca
   y no en gris como los demás mandos. */
.barra .apuntar {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .7rem;
    border-radius: .55rem;
    border: 1px solid transparent;
    background: var(--tinta);
    color: var(--fondo);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.barra .apuntar:hover, .barra .apuntar:focus-visible { opacity: .88; }

.icono { flex: none; }

/* Sin JavaScript no hay dónde elegir tema, así que no se enseña un mando muerto. */
html:not(.con-js) .tema { display: none; }

/* En el móvil: marca y mandos arriba, pestañas en fila propia a todo el ancho. */
@media (max-width: 640px) {
    .barra { gap: .5rem .6rem; }

    .pestanas {
        order: 3;
        flex: 1 0 100%;
        display: flex;
    }

    .pestana { flex: 1; justify-content: center; padding: .5rem .6rem; }

    /* Los mandos se quedan en icono: el texto va en el título y el aria-label. */
    .tema button span, .barra .salir span, .barra .apuntar span { display: none; }
    .tema button, .barra .salir, .barra .apuntar { padding: .42rem .5rem; }
}

.miga { margin: 0 0 .3rem; font-size: .85rem; }
.miga a { color: var(--tinta-floja); }

/* ------------------------------------------------------- baldosas y cifras */

.franja {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    border: 1px solid var(--papel-borde);
    border-radius: .8rem;
    background: var(--papel);
}

.franja-grafica { flex: 1 1 12rem; max-width: 20rem; }
.franja-grafica small { display: block; color: var(--tinta-floja); font-size: .72rem; }

.baldosas {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
    margin: 0 0 .8rem;
}

.baldosa dt {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-floja);
}

/* Cifras grandes con las figuras normales; tabulares solo donde hay columnas. */
.baldosa dd { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.baldosa small { display: block; font-size: .72rem; color: var(--tinta-floja); }

.baldosa.bien dd { color: var(--bien); }
.baldosa.ojo dd { color: var(--ojo); }
.baldosa.mal dd { color: var(--mal); }

.var { font-weight: 700; font-size: .85rem; }
.var.mejor { color: var(--bien); }
.var.peor { color: var(--mal); }
.var.igual, .var.nada { color: var(--tinta-floja); font-weight: 400; }

/* ------------------------------------------------------------- los bloques */

.bloque {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--papel-borde);
    border-radius: .8rem;
    background: var(--papel);
}

.bloque h2 { margin: 0 0 .7rem; font-size: 1rem; letter-spacing: -.01em; }
.bloque h3 { margin: 1.1rem 0 .5rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-floja); }
.explica { margin: 0 0 .8rem; font-size: .85rem; color: var(--tinta-floja); max-width: 60rem; }

.pastilla {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    background: #334155;
    color: var(--tinta);
    vertical-align: middle;
}

.pastilla.bien { background: color-mix(in srgb, var(--bien) 25%, #1e293b); color: #86efac; }
.pastilla.ojo { background: color-mix(in srgb, var(--ojo) 25%, #1e293b); color: #fde68a; }
.pastilla.mal { background: color-mix(in srgb, var(--mal) 28%, #1e293b); color: #fecaca; }
.pastilla.callado { background: #334155; color: var(--tinta-floja); }

.motivos.grandes {
    margin: 0 0 1rem;
    padding: .8rem 1rem .8rem 2.1rem;
    border-radius: .8rem;
    border: 1px solid var(--papel-borde);
    background: var(--papel);
    font-size: .95rem;
}

.motivos.grandes.mal { border-color: var(--mal); }
.motivos.grandes.ojo { border-color: var(--ojo); }

/* --------------------------------------------------------------- las tablas */

/* Lo ancho se desplaza DENTRO de su caja: la página nunca se mueve de lado. */
.g-desliza { overflow-x: auto; }

table.lista { width: 100%; border-collapse: collapse; font-size: .85rem; }

table.lista th, table.lista td {
    padding: .4rem .6rem;
    text-align: left;
    border-bottom: 1px solid var(--papel-borde);
    vertical-align: top;
}

table.lista thead th {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-floja);
    white-space: nowrap;
}

table.lista .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lista .num.mejor { color: var(--bien); }
table.lista .apretado { font-size: .78rem; color: var(--tinta-floja); max-width: 22rem; }
table.comparativa th[scope="row"] { color: var(--tinta-floja); font-weight: 400; }

/* --------------------------------------------------------------- gráficas */

/*
 | LA GRÁFICA NO SE ESTIRA A LO ANCHO DE LA PANTALLA, Y NO ES UN CAPRICHO.
 |
 | Un SVG con `width:100%` escala TODO lo que lleva dentro, y el texto también:
 | a 1.400 px de ancho, unas etiquetas pensadas para 10 px salían a 19 y la
 | gráfica parecía un cartel. Acotada a 780 px se ve a su tamaño.
 |
 | Y EN EL MÓVIL SE DESPLAZA DENTRO DE SU CAJA en vez de encogerse: encogida a
 | 360 px las fechas quedarían en 5 px, que es no ponerlas. La página nunca se
 | mueve de lado; la gráfica sí, dentro de lo suyo.
 */
.g-caja { position: relative; margin: .2rem 0 .4rem; max-width: 780px; overflow-x: auto; }
.g-caja svg { display: block; width: 100%; min-width: 680px; height: auto; overflow: visible; }
.g-zona { cursor: crosshair; }

.g-globo {
    position: absolute;
    top: -.2rem;
    transform: translateX(-50%);
    padding: .25rem .5rem;
    border-radius: .35rem;
    border: 1px solid var(--papel-borde);
    background: #0b1220;
    color: var(--tinta);
    font-size: .75rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

.g-nada { margin: .4rem 0; font-size: .85rem; color: var(--tinta-floja); font-style: italic; }

.g-barras { display: grid; gap: .3rem; }

.g-fila {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) 1fr auto;
    gap: .6rem;
    align-items: center;
    font-size: .82rem;
}

.g-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-floja); }
.g-barra { display: block; height: .55rem; border-radius: .3rem; background: #2c3a4f; overflow: hidden; }
.g-barra i { display: block; height: 100%; border-radius: .3rem; background: var(--serie-1); }
.g-valor { font-variant-numeric: tabular-nums; font-weight: 600; }

.g-cinta { display: flex; flex-wrap: wrap; gap: 2px; margin: .3rem 0; }

/* 2px de hueco entre cuadritos, que es el separador: nunca un borde dibujado. */
.g-dia { width: 14px; height: 22px; border-radius: 2px; }

.g-leyenda { margin: .3rem 0 0; font-size: .75rem; color: var(--tinta-floja); display: flex; flex-wrap: wrap; gap: .8rem; }
.g-leyenda i { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; margin-right: .3rem; }

.medidores { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.g-medidor-alto { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: .25rem; }
.g-medidor small { display: block; margin-top: .25rem; font-size: .72rem; color: var(--tinta-floja); }

.g-tabla { margin: .5rem 0 0; }
.g-tabla summary { cursor: pointer; font-size: .78rem; color: var(--tinta-floja); }
.g-tabla table { width: 100%; border-collapse: collapse; font-size: .78rem; margin-top: .4rem; }
.g-tabla th, .g-tabla td { padding: .2rem .5rem; border-bottom: 1px solid var(--papel-borde); text-align: right; font-variant-numeric: tabular-nums; }
.g-tabla th:first-child, .g-tabla td:first-child { text-align: left; font-variant-numeric: normal; }

/* --------------------------------------------------- pie de cada tarjeta */

.tarjeta > footer { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; }
.ver-todo { font-weight: 700; color: var(--tinta); text-decoration: none; font-size: .8rem; }
.ver-todo:hover, .ver-todo:focus-visible { text-decoration: underline; }
.fuera { font-size: .78rem; }
.tarjeta .g-chispa { width: 100%; height: 28px; margin: .1rem 0 .5rem; }

/* --------------------------------------------------------------- la puerta */

body.entrada input[inputmode="numeric"] {
    letter-spacing: .35em;
    font-size: 1.2rem;
    text-align: center;
}


/* --------------------------------------------------- «ver todo», que es un botón */

.ver-todo {
    display: inline-block;
    padding: .4rem .8rem;
    border-radius: .5rem;
    border: 1px solid var(--papel-borde);
    background: var(--papel);
    color: var(--tinta);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
}

.ver-todo:hover,
.ver-todo:focus-visible { border-color: var(--tinta-floja); }

/*
 | EL VEREDICTO SE PUEDE PINCHAR CUANDO HAY ALGO QUE MIRAR.
 |
 | Y se nota que se puede: subrayado y con una flecha. Un texto que lleva a otro
 | sitio sin decirlo no lo pincha nadie, y entonces da igual que lleve.
 */
a.veredicto {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    text-decoration: underline;
    text-underline-offset: .18em;
}

a.veredicto::after { content: "→"; text-decoration: none; }

/* ------------------------------------------------------- elegir a quién comparar */

.elegir {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    align-items: center;
    margin: 0 0 1rem;
    padding: .7rem .8rem;
    border-radius: .7rem;
    border: 1px solid var(--papel-borde);
    background: var(--papel);
}

.elegir legend,
.elegir .rotulo {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-floja);
    width: 100%;
    margin-bottom: .1rem;
}

.elegir label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--papel-borde);
    font-size: .85rem;
    cursor: pointer;
}

.elegir label:has(input:checked) {
    border-color: var(--tinta-floja);
    background: color-mix(in srgb, var(--tinta) 12%, transparent);
    font-weight: 600;
}

.elegir label.sin-datos { opacity: .55; }

.elegir input { accent-color: var(--tinta-floja); }

.elegir button {
    padding: .35rem .8rem;
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    color: var(--fondo);
    background: var(--tinta);
    border: 0;
    border-radius: .5rem;
    cursor: pointer;
}

/* El foco tiene que verse: esto se usa con teclado desde el escritorio. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--tinta-floja);
    outline-offset: 2px;
}

/*
 | «POR QUÉ NO HAY VISITAS», que no es un cero.
 |
 | Se pinta apagado y en cursiva a propósito: tiene que leerse como una nota al
 | margen y no como una cifra, porque no lo es.
 */
.sin-medir {
    margin: .5rem 0 .6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--papel-borde);
    font-size: .85rem;
    font-style: italic;
    color: var(--tinta-floja);
}

/* --------------------------------------------------------- elegir el periodo */

.periodos {
    display: inline-flex;
    gap: .2rem;
    margin: 0 0 .9rem;
    padding: .2rem;
    border-radius: .6rem;
    border: 1px solid var(--papel-borde);
    background: var(--papel);
}

.periodos a {
    padding: .3rem .7rem;
    border-radius: .45rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--tinta-floja);
    text-decoration: none;
}

.periodos a.aqui { color: var(--fondo); background: var(--tinta); }

/* Registros y avisos: las dos filas que más se miran, un poco más presentes. */
.lista tr.destacada td { font-weight: 700; }

/* ---------------------------------------------------------------- ajustes */

.ajuste form { display: grid; gap: .6rem; max-width: 28rem; }
.ajuste label { display: grid; gap: .25rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-floja); }
.ajuste input { padding: .55rem .7rem; font: inherit; font-size: 1rem; border-radius: .5rem; border: 1px solid var(--papel-borde); background: var(--fondo); color: var(--tinta); }
.ajuste button { justify-self: start; padding: .55rem .9rem; font: inherit; font-weight: 700; border: 0; border-radius: .5rem; background: var(--tinta); color: var(--fondo); cursor: pointer; }
.ajuste button.peligro { background: var(--mal); color: #fff; }
.clave-totp code { font-size: 1.15rem; letter-spacing: .08em; }
.hecho { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: .6rem; border: 1px solid var(--bien); background: color-mix(in srgb, var(--bien) 14%, transparent); }
.botonera { display: flex; flex-wrap: wrap; gap: .5rem; }
.botonera button { padding: .55rem .9rem; font: inherit; font-weight: 700; border: 0; border-radius: .5rem; background: var(--tinta); color: var(--fondo); cursor: pointer; }
.botonera button.peligro { background: var(--mal); color: #fff; }
.botonera button:disabled { opacity: .5; cursor: default; }

/* ── EL LOGOTIPO ───────────────────────────────────────────────────────────
   Va en línea y no como <img> para que las letras puedan tomar el color de
   aquí; el coral de los dos acentos está escrito dentro del SVG y no cambia.

   EL AZUL DE LA MARCA NO ES EL MISMO EN LOS DOS TEMAS, Y NO ES UNA LICENCIA.
   El #1E4A5B del logotipo original está pensado para papel y para fondo
   claro; sobre el fondo de noche (#0f172a) es un azul oscuro sobre otro azul
   oscuro, o sea un logotipo que no se lee. En el tema oscuro se aclara hasta
   que se lee, que es lo que una marca quiere de verdad cuando se la pone en
   una pantalla. El coral se queda igual en los dos: ahí sí contrasta. */
:root { --marca: #86BACC; }
@media (prefers-color-scheme: light) {
    :root:not([data-tema="oscuro"]) { --marca: #1E4A5B; }
}
:root[data-tema="claro"]  { --marca: #1E4A5B; }
:root[data-tema="oscuro"] { --marca: #86BACC; }

.logotipo { margin: 0 0 .35rem; line-height: 0; color: var(--marca); }
.logotipo svg { display: block; width: min(240px, 68vw); height: auto; }
.solo-lectores {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
/* La «A» de la barra de arriba, que trae sus colores dentro. */
.marca .i-marca { width: 20px; height: 20px; }

/* ── LA BANDA DEL BUZÓN ─────────────────────────────────────────────────────
   Va arriba del todo y ocupa poco: lo normal es que no pase nada y no debe
   robarle sitio a los gastos. Pero cuando el buzón lleva horas sin mirarse,
   se pone roja y se ve desde la otra punta de la habitación. */
.buzon {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    margin: 0 0 1rem; padding: .6rem .85rem;
    border: 1px solid var(--linea); border-radius: .7rem;
    background: var(--tarjeta); font-size: .9rem;
}
.buzon span { color: var(--tinta-floja); }
.buzon.bien { border-left: 4px solid var(--verde, #16a34a); }
.buzon.ojo  { border-left: 4px solid var(--ambar, #d97706); }
.buzon.mal  { border-left: 4px solid var(--rojo, #dc2626); }
.buzon.mal strong { color: var(--rojo, #dc2626); }
.buzon .ahora { margin: 0; }
.buzon .ahora button { margin: 0; padding: .4rem .9rem; font-size: .85rem; width: auto; }

/* ── LOS BUZONES, EN AJUSTES ────────────────────────────────────────────────
   La dirección va en monoespaciada y entera: es lo que hay que copiar, y una
   dirección cortada con puntos suspensivos no sirve para nada. En el móvil se
   parte en dos líneas antes que encogerse. */
.buzones { margin: .75rem 0 0; }
.buzones > div {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem;
    padding: .6rem 0; border-top: 1px solid var(--linea);
}
.buzones dt { font-weight: 600; min-width: 8rem; }
.buzones dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.buzones code {
    font-size: .9rem; word-break: break-all;
    background: var(--fondo); padding: .2rem .45rem; border-radius: .35rem;
}
button.copiar {
    width: auto; margin: 0; padding: .25rem .7rem;
    font-size: .8rem; white-space: nowrap;
}

/* ── Entrar con la cara, y la casilla de no cerrar sesión ─────────────────── */
/*
 | LA CASILLA PELEA CONTRA LAS REGLAS DE LA PANTALLA DE ENTRADA, que ponen toda
 | etiqueta en bloque y en mayúsculas y todo campo al ancho completo. Sin ganar
 | esa pelea, el cuadradito sale centrado encima del texto y el texto sale
 | gritado. Por eso va con el mismo peso de selector --`body.entrada`-- y no
 | con `!important`, que apaga el problema sin resolverlo.
 */
body.entrada label.casilla, .casilla {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .9rem 0 .2rem;
    font-size: .85rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tinta-floja);
    cursor: pointer;
}
body.entrada label.casilla input[type="checkbox"], .casilla input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex: none;
    accent-color: var(--tinta);
}

.con-llave { margin-top: 1rem; }

/* «o bien» con una raya a cada lado: separa dos caminos, no encabeza uno. */
.o-bien {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 .7rem;
    font-size: .8rem;
    color: var(--tinta-floja);
}
.o-bien::before, .o-bien::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--papel-borde);
}

button.llave {
    background: var(--papel);
    color: var(--tinta);
    border: 1px solid var(--papel-borde);
}
button.llave:hover:not(:disabled) { border-color: var(--tinta-floja); }
button.llave:disabled { opacity: .6; cursor: progress; }

/* La contraseña y el botón de quitar, en una línea dentro de la tabla. */
form.en-linea { display: flex; gap: .4rem; align-items: center; margin: 0; }
form.en-linea input { width: 9rem; margin: 0; }
form.en-linea button { margin: 0; white-space: nowrap; }

/* ── El desplegable de «más datos» ───────────────────────────────────────── */
.mas-datos {
    border-top: 1px solid var(--papel-borde);
    padding-top: .8rem;
    margin-top: .3rem;
}
.mas-datos > summary {
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: var(--tinta-floja);
    list-style: none;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem 0 .5rem;
}
.mas-datos > summary::-webkit-details-marker { display: none; }
/* La flechita se dibuja aquí para que gire al abrir sin depender del sistema. */
.mas-datos > summary::before {
    content: "";
    width: .5rem; height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.mas-datos[open] > summary::before { transform: rotate(45deg); }
.mas-datos > summary:hover { color: var(--tinta); }
.ajuste form textarea {
    width: 100%;
    font: inherit;
    padding: .5rem .6rem;
    border-radius: .5rem;
    border: 1px solid var(--papel-borde);
    background: var(--fondo);
    color: var(--tinta);
    resize: vertical;
}
@media (prefers-reduced-motion: reduce) { .mas-datos > summary::before { transition: none; } }