/*
 | 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;
    /*
        NADA DE DESPLAZARSE DE LADO. Un panel que se mueve en horizontal en un
        móvil esconde media pantalla y no avisa: se ve el contenido cortado y
        parece que falta. `clip` en vez de `hidden` porque `hidden` en el body
        rompe el `position: sticky` de la barra de arriba.
    */
    overflow-x: clip;
    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, .tarjeta h3 { 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);
}

/*
    EN EL MAC «NO SE MOVÍA» (9/10/2026). Con dieciséis pestañas la fila medía
    1.760 px: en el iPhone rueda con el dedo, pero en el ordenador se salía
    por la derecha, el `overflow-x: clip` del cuerpo la cortaba y ni la rueda
    ni una barra de desplazamiento llegaban a las de la derecha. Donde hay
    sitio, o donde se maneja con ratón o trackpad, NO RUEDA: se parte en
    dos filas (o las que hagan falta) y se ven todas.
*/
@media (min-width: 641px), (hover: hover) and (pointer: fine) {
    /* En su propia fila, debajo de la marca y los mandos, a todo el ancho. */
    .pestanas { order: 3; flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
}

.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); }

/* Salir es un botón en un formulario (12/10/2026): con el aspecto que tenía el enlace. */
.barra .salir-form { display: inline-flex; margin: 0; }
.barra button.salir { font: inherit; font-size: .85rem; line-height: inherit; cursor: pointer; }
body.entrada button.como-enlace { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

.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; }

    /*
        LA FILA DE PESTAÑAS RUEDA SOLA, Y NO ARRASTRA LA PÁGINA.

        Lo enseñó el usuario el 9/9/2026 con una captura: al añadir «Prensa»
        pasaron a ser seis pestañas, en un móvil no cabían, y como cada una
        pedía su trozo con `flex: 1` la fila se hacía más ancha que la pantalla
        y **se llevaba la página entera con ella**. Al desplazar de lado se veía
        el contenido cortado por la izquierda.

        Con `flex: 0 0 auto` cada pestaña ocupa lo suyo y es la propia fila la
        que rueda. La página deja de moverse de lado, que es lo que rompía todo
        lo demás.

        Y `min-width: 0` hace falta: sin él, un hijo de un flex no se deja
        encoger por debajo de su contenido y el `overflow` no llega a activarse.
    */
    .pestanas {
        order: 3;
        flex: 1 0 100%;
        min-width: 0;
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pestanas::-webkit-scrollbar { display: none; }

    /*
        Y SE VE QUE HAY MÁS (9/10/2026): una sombra en el borde por el que
        quedan pestañas, que se va sola al llegar al final. Son fondos de la
        propia fila --uno que viaja con el contenido y tapa la sombra al
        llegar, otro fijo en el borde--, sin JavaScript. Al cargar, panel.js
        trae a la vista la pestaña en la que se está.
    */
    .pestanas {
        background:
            linear-gradient(to right, var(--papel) 40%, transparent) left / 1.6rem 100% no-repeat local,
            linear-gradient(to left, var(--papel) 40%, transparent) right / 1.6rem 100% no-repeat local,
            linear-gradient(to right, rgba(0, 0, 0, .22), transparent) left / .8rem 100% no-repeat scroll,
            linear-gradient(to left, rgba(0, 0, 0, .22), transparent) right / .8rem 100% no-repeat scroll,
            var(--papel);
    }

    .pestana { flex: 0 0 auto; 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 { display: none; }
    .tema button, .barra .salir { 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); }
/* Hoy, a medias (14/10/2026): la comparación con ayer a la misma hora, en su renglón; sin ella, en cursiva. */
.baldosa.a-medias .contra-ayer { margin-top: .2rem; color: var(--tinta); }
.baldosa.a-medias .contra-ayer.sin-comparar { color: var(--tinta-floja); font-style: italic; }

.baldosa.bien dd { color: var(--bien); }
.baldosa.ojo dd { color: var(--ojo); }
.baldosa.mal dd { color: var(--mal); }
/* La cifra que lleva a lo que cuenta (10/10/2026). Del color de su tono. */
.baldosa dd a { color: inherit; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 2px; }
.baldosa dd a span { font-size: .9rem; }
/* El desglose de «Por revisar». */
.por-revisar { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .7rem; }
.por-revisar li { padding: .6rem .8rem; border: 1px solid var(--linea, #ccc); border-radius: .6rem; }
.por-revisar small { display: block; color: var(--tinta-floja); font-size: .8rem; margin: .15rem 0 .35rem; }
.por-revisar .donde { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .9rem; }
.tarjeta[id] { scroll-margin-top: 7rem; }
#por-revisar { scroll-margin-top: 7rem; }

.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; }
/* Lo que sale al día bajo un total de Estadísticas (30/10/2026). */
.al-dia { color: var(--tinta-floja); font-size: .78rem; white-space: nowrap; }

/* ------------------------------------------------------------- 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; }

/*
 | «CÓMO VA CADA UNO ESTA SEMANA» (9/10/2026): agrupada y ordenable.
 |
 | EN EL MÓVIL SE CORTABA «REGISTROS» y no se notaba que había más: la tabla ya
 | se desplazaba dentro de su caja, pero en el iPhone la barra de desplazamiento
 | no se ve. Ahora el nombre del proyecto se queda quieto a la izquierda
 | mientras las cifras se mueven, y una sombra en el borde derecho dice que hay
 | más (se va sola al llegar al final: es el fondo de la propia caja, sin JS).
 */
.ordenes { margin: 0 0 .4rem; font-size: .85rem; color: var(--tinta-floja); }
.ordenes strong { color: var(--tinta); }

.tabla-semana {
    overscroll-behavior-x: contain;
    background:
        linear-gradient(to left, var(--papel) 30%, transparent) right / 2rem 100% no-repeat local,
        linear-gradient(to left, rgba(0, 0, 0, .28), transparent) right / .9rem 100% no-repeat scroll;
}
.tabla-semana:focus-visible { outline: 2px solid var(--tinta-floja); outline-offset: 2px; }

table.semana th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--papel);
    box-shadow: 1px 0 0 var(--papel-borde);
}

table.semana thead th { padding: 0; vertical-align: bottom; }
table.semana a.ordena {
    display: block;
    padding: .55rem .6rem .45rem;
    color: inherit;
    text-decoration: none;
}
table.semana a.ordena:hover, table.semana a.ordena:focus-visible { color: var(--tinta); text-decoration: underline; }
table.semana th[aria-sort] a.ordena { color: var(--tinta); }
table.semana .flecha { margin-left: .25rem; font-size: .75em; }

table.semana tr.grupo th, table.semana tr.grupo td {
    padding-top: .75rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--tinta) 6%, var(--papel));
}
table.semana tr.grupo th { white-space: nowrap; }
table.semana tr.grupo td .var { font-size: inherit; }

/* Las frases de «contra antes» se parten en dos líneas en vez de ensanchar la tabla. */
table.semana td.contra { white-space: normal; min-width: 6.5rem; max-width: 9rem; }

@media (max-width: 640px) {
    table.semana th, table.semana td { padding-left: .45rem; padding-right: .45rem; }
    table.semana a.ordena { padding-left: .45rem; padding-right: .45rem; }
    table.semana th[scope="row"] a { display: inline-block; max-width: 7.5rem; overflow-wrap: anywhere; }
    table.semana tr.grupo th { white-space: normal; max-width: 8rem; }
}

/* Las tarjetas, por grupos: el mismo título que en la tabla. */
.por-grupos { display: grid; gap: 1.4rem; }
.titulo-de-grupo {
    margin: 0 0 .6rem;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-floja);
}

/* --------------------------------------------------------------- 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.
 */
/*
 | LAS GRÁFICAS CABEN ENTERAS (22/9/2026). Antes medían como mínimo 680 píxeles
 | y en el móvil se salían: había que desplazarlas de lado y abrían por los
 | días más viejos. Ahora cada una viene dibujada dos veces (Grafica::enElTiempo)
 | y aquí se enseña la que toca por el ancho de la pantalla.
 */
.g-caja { position: relative; margin: .2rem 0 .4rem; max-width: 780px; }
.g-caja svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.g-caja svg.g-estrecha { display: none; }
@media (max-width: 640px) {
    .g-caja svg.g-ancha { display: none; }
    .g-caja svg.g-estrecha { display: block; }
}

/* La cifra de lo señalado, encima y a la vista: no un globo que tapa. */
.g-lectura {
    margin: .15rem 0 .35rem;
    padding: .4rem .6rem;
    border-radius: .4rem;
    background: var(--papel-hondo, rgba(148, 163, 184, .12));
    border: 1px solid var(--papel-borde);
    font-size: .88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    /* Dos líneas siempre: si cambia de alto al tocar, la gráfica salta. */
    min-height: calc(2 * 1.35em + .8rem);
}
.g-caja.señalando .g-lectura { border-color: #3987e5; }
.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); }

/* «Los últimos X días» (23/9/2026): una casilla y su botón, con la pinta de los
   periodos de al lado. */
.periodos-x { align-items: center; margin-left: .5rem; }
.periodos-x label { display: inline-flex; align-items: center; gap: .4rem; color: var(--tinta-floja); font-size: .9rem; }
.periodos-x input { width: 4.5em; font: inherit; padding: .2rem .4rem; border: 1px solid var(--papel-borde); border-radius: .4rem; background: var(--papel); color: var(--tinta); }
/* Las fechas de Secciones (13/10/2026): con el ancho de un número no se leía el día. */
.periodos-x input[type="date"] { width: auto; min-width: 8.5em; }
/* Y en el móvil, en dos líneas antes que cortadas por la derecha. */
.periodos.envuelve { flex-wrap: wrap; max-width: 100%; box-sizing: border-box; }
.periodos-x button { font: inherit; font-size: .9rem; padding: .35rem .75rem; border: 1px solid var(--papel-borde); border-radius: 999px; background: none; color: var(--tinta); cursor: pointer; }
.periodos-x button.aqui { color: var(--fondo); background: var(--tinta); border-color: var(--tinta); }

/* ------------------------------------------- lo que viene plegado (el correo) */

/*
 | EL RESUMEN TIENE QUE PARECER UN BOTÓN. Con el triangulito del navegador solo,
 | en un iPhone se lee como un título y nadie lo pulsa. Y la flecha cambia al
 | abrirlo, para que se vea que también se cierra.
 */
details.plegable {
    margin: 0 0 .5rem;
    border: 1px solid var(--papel-borde);
    border-radius: .6rem;
    background: var(--papel);
}

/*
 | EN REJILLA Y NO EN FILA: con un nombre largo, la fila partía y dejaba la
 | flecha sola en una línea encima del título (visto en el móvil el 12/9).
 | Así la flecha tiene su columna y el título y la cuenta van a su lado.
 */
details.plegable > summary {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: .15rem .6rem;
    padding: .7rem .9rem;
    cursor: pointer;
    list-style: none;
}

details.plegable > summary > * { grid-column: 2; }

details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::before { content: "▸"; color: var(--tinta-floja); }
details.plegable[open] > summary::before { content: "▾"; }
details.plegable > summary small { color: var(--tinta-floja); }
details.plegable > .g-desliza { padding: 0 .9rem .7rem; }

/*
 | EN EL MÓVIL, CADA DIRECCIÓN ES UNA FICHA Y NO UNA FILA. En tres columnas
 | la que importa --«lo que le llega»-- quedaba cortada a la derecha y había
 | que deslizar la tabla para leerla (visto el 12/9 a 375 px).
 */
@media (max-width: 40rem) {
    details.plegable table.lista thead { display: none; }
    details.plegable table.lista tr { display: block; padding: .55rem 0; border-bottom: 1px solid var(--papel-borde); }
    details.plegable table.lista tr:last-child { border-bottom: 0; }
    details.plegable table.lista td { display: block; padding: .1rem 0; border: 0; }
    details.plegable table.lista td:first-child { font-weight: 600; }
    details.plegable table.lista td.apretado { max-width: none; }
}

/* 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; }

/* ─────────────────────────────────── Ver una gráfica en grande e imprimirla ── */

/*
    Lo pidió el usuario el 8/9/2026 con una captura: con nueve proyectos, en el
    tamaño de una tarjeta los nombres del final de cada línea se montan unos
    encima de otros.
*/

.g-botones {
    display: flex; gap: .4rem; justify-content: flex-end;
    margin-bottom: .2rem;
}

.g-boton {
    border: 1px solid var(--papel-borde);
    background: transparent;
    color: var(--tinta-floja);
    font: inherit; font-size: .78rem;
    padding: .15rem .55rem;
    border-radius: .3rem;
    cursor: pointer;
}
.g-boton:hover, .g-boton:focus-visible { color: var(--tinta); border-color: var(--tinta-floja); }

.g-grande {
    width: min(96vw, 1400px);
    max-width: none;
    border: 1px solid var(--papel-borde);
    border-radius: .6rem;
    background: var(--papel);
    color: var(--tinta);
    padding: 1rem 1.1rem 1.2rem;
}
.g-grande::backdrop { background: rgba(2, 6, 23, .72); }

.g-grande__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.g-grande__titulo { margin: 0; font-size: 1.05rem; }

/*
    En grande la gráfica NO se estira sin más: se le da alto de verdad. El SVG
    va con `preserveAspectRatio="none"`, así que estirándolo solo a lo ancho las
    líneas se aplanan y con nueve series se pegan unas a otras.
*/
.g-grande__dibujo .g-caja { max-width: none; overflow: visible; }
.g-grande__dibujo .g-caja svg { min-width: 0; height: min(64vh, 560px); }
.g-grande__dibujo .g-caja svg.g-ancha { display: block; }
.g-grande__dibujo .g-caja svg.g-estrecha { display: none; }

/* ─────────────────────────────────────────────────────────── En papel ── */

@media print {
    .no-imprimir, .g-botones, nav, footer, .g-globo, .g-cruz { display: none !important; }

    body { background: #fff; color: #111; }

    /* Solo la gráfica que se ha pedido, con su título y su tabla. */
    body.solo-una-grafica .bloque { display: none; }
    body.solo-una-grafica .bloque.imprimiendo { display: block; break-inside: avoid; }

    .g-caja { max-width: 100%; overflow: visible; }
    .g-caja svg { min-width: 0; width: 100%; height: 9cm; }
    .g-caja svg.g-ancha { display: block !important; }
    .g-caja svg.g-estrecha { display: none !important; }

    /*
        Los ejes y las fechas, en tinta oscura: el panel es oscuro y su gris
        claro sobre blanco no se lee. Los nombres de las series NO se tocan
        --su color es lo que los identifica-- y el azul, el naranja y el verde
        se leen bien sobre papel.
    */
    .g-caja svg .g-eje { fill: #444; }
    .g-caja svg line { stroke: #bbb; }
    .g-caja svg circle { stroke: #fff; }

    table.lista { font-size: .8rem; }
    table.lista th, table.lista td { border-color: #ddd; color: #111; }
}

/* ─────────────────────────────────────────── las puertas de la sala de prensa ─ */

/*
    Lo pidió el usuario el 9/9/2026, después de ver una pantalla que solo
    enseñaba cifras: «no quiero visualizar cuántas notas hay. Lo que quiero es
    poder editar, poner, quitar... hacer la tarea de redacción directamente
    desde un solo lugar para los tres portales».

    Así que aquí el botón manda. Son grandes y se pulsan con el pulgar: esta
    pantalla se abre desde el móvil tanto como desde el ordenador.
*/
.puertas {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    margin: .2rem 0 .7rem;
}

.puerta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 2.6rem;
    padding: .5rem .7rem;
    border: 1px solid var(--papel-borde);
    border-radius: .6rem;
    background: var(--fondo);
    color: var(--tinta);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

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

/* El número, dentro del botón: dice cuánto hay al otro lado antes de pulsar. */
.puerta strong {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    color: var(--tinta-floja);
}

/*
    Y CUANDO HAY ALGO QUE HACER, SE VE. Un botón con 0 al lado y otro con 40 no
    pueden pesar lo mismo en la pantalla: lo que se busca al abrir esto es dónde
    hay trabajo.
*/
.puerta.con-cosas { border-color: var(--ojo); }
.puerta.con-cosas strong { color: var(--tinta); }

.explica .ojo { color: var(--ojo); }

/* Prensa (22/9/2026): los rótulos de las gráficas pequeñas y lo más leído. */
.rotulo-pequeno { margin: .8rem 0 .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-floja); }
.mas-leidas { margin: .2rem 0 .4rem; padding-left: 1.2rem; font-size: .9rem; }
.mas-leidas li { margin: .25rem 0; }
.mas-leidas span { display: block; font-size: .75rem; color: var(--tinta-floja); font-variant-numeric: tabular-nums; }

/* La rayita de las tarjetas, que se lee al tocarla (22/9/2026). */
.g-mini { margin: .3rem 0 0; }
.g-mini .g-lectura { margin: 0 0 .2rem; padding: .2rem .45rem; font-size: .75rem; font-weight: 600; }
.g-mini svg.g-chispa { cursor: crosshair; touch-action: pan-y; }

/* El estado de una fila de las tablas del mantenimiento (25/9/2026): la palabra
   lleva el color, y siempre va escrita, para quien no distingue colores. */
.estado-bien { color: var(--bien); font-weight: 700; }
.estado-ojo { color: var(--ojo); font-weight: 700; }
.estado-mal { color: var(--mal); font-weight: 700; }
.estado-callado { color: var(--tinta-floja); font-weight: 700; }

/* Los avisos del redactor de guardia en la pantalla de prensa (4/10/2026). */
.explica.ojo { color: var(--ojo); font-weight: 600; }
.explica.mal { color: var(--mal); font-weight: 600; }

/* ─────────────────────────────────────── para aprobar (7/10/2026) ─────────── */
/*
 | SE MIRA EN EL IPHONE, de pie, entre dos cosas. Una columna, tarjetas anchas y
 | los botones grandes abajo de cada una, al alcance del pulgar. En el
 | escritorio se ponen dos o tres por fila, nada más.
 |
 | EL NOMBRE DEL PORTAL VA EN UNA PASTILLA Y SIN COLOR PROPIO: el panel no tiene
 | un color por proyecto a propósito --los de estado y los de serie ya
 | significan algo, y un tercer uso los dejaría sin significado--. Se distingue
 | por ir arriba del todo, en negrita y recuadrado.
 */
.numerito {
    min-width: 1.25rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--ojo);
    color: #111827;
    font-size: .72rem;
    line-height: 1.25rem;
    text-align: center;
}

.hecho {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border-radius: .6rem;
    border: 1px solid var(--papel-borde);
    font-weight: 600;
}
.hecho.bien { border-color: var(--bien); background: color-mix(in srgb, var(--bien) 14%, transparent); }
.hecho.ojo { border-color: var(--ojo); background: color-mix(in srgb, var(--ojo) 14%, transparent); }
.hecho.mal { border-color: var(--mal); background: color-mix(in srgb, var(--mal) 14%, transparent); }
.hecho a { margin-left: .3rem; white-space: nowrap; }
/* Lo que no salió al publicar todas de golpe, una línea por propuesta (8/10/2026). */
.hecho-lineas { margin: -.6rem 0 1rem; padding: .5rem .9rem .5rem 2rem; font-size: .9rem; }
.hecho-lineas li { margin: .2rem 0; }
/* El botón de todas de golpe, encima de las tarjetas. */
form.todas:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1.2rem; }
form.todas .explica { margin: 0; }
.todas-abajo:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.4rem 0 2rem; }
/* Apartar del lote (9/10/2026): la marcada se ve apagada y con su casilla bien visible. */
.casilla.apartar { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .6rem; padding: .55rem .8rem; border: 1px dashed var(--linea, #ccc); border-radius: .6rem; font-weight: 600; cursor: pointer; }
.casilla.apartar input { width: 1.25rem; height: 1.25rem; }
form.propuesta.apartada { opacity: .55; }
/* Una tarjeta mandada sola (9/10/2026): queda su aviso en el sitio, sin recargar. */
.propuesta.hecha { padding: .6rem; }
.propuesta.hecha .hecho, .propuesta > .hecho { margin: 0; }
.apartar-explica { margin-top: -.3rem !important; font-size: .9rem; }
form.propuesta.apartada .casilla.apartar { opacity: 1; border-style: solid; border-color: var(--mal, #b42318); color: var(--mal, #b42318); }
.apartadas { font-weight: 600; color: var(--mal, #b42318); }
button[value="todas"]:disabled { opacity: .5; cursor: not-allowed; }
.todas-abajo .publicar { min-height: 2.9rem; padding: .6rem 1.2rem; border: 0; border-radius: .6rem; background: var(--bien); color: var(--fondo); font: inherit; font-weight: 700; cursor: pointer; }
form.todas .publicar { min-height: 2.9rem; padding: .6rem 1.2rem; border: 0; border-radius: .6rem; background: var(--bien); color: var(--fondo); font: inherit; font-weight: 700; cursor: pointer; }
form.todas button[disabled] { opacity: .55; cursor: progress; }

.recuento {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.recuento li {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    padding: .35rem .7rem;
    border-radius: .6rem;
    border: 1px solid var(--papel-borde);
    background: var(--papel);
    font-size: .88rem;
}
.recuento .portal { font-weight: 700; }
.recuento strong { font-variant-numeric: tabular-nums; }
.recuento li.con-cosas { border-color: var(--ojo); }
.recuento li.ojo { border-color: var(--ojo); }
.recuento li.ojo .porque { color: var(--ojo); }
.recuento li.mal { border-color: var(--mal); background: color-mix(in srgb, var(--mal) 12%, var(--papel)); }
.recuento li.mal .porque { color: var(--mal); font-weight: 600; }
.recuento .porque { font-size: .8rem; }

.propuestas {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    margin-bottom: 1rem;
}

.propuesta {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
    padding: .9rem 1rem 1rem;
    border-radius: .8rem;
    border: 1px solid var(--papel-borde);
    background: var(--papel);
}
.propuesta.delicada { border-left: 5px solid var(--ojo); }

.propuesta > header { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.propuesta .portal {
    padding: .1rem .55rem;
    border-radius: .4rem;
    border: 1px solid var(--tinta-floja);
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .01em;
}
.propuesta h2 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.propuesta .entradilla { margin: 0; color: var(--tinta-floja); }
.propuesta .explica { margin: 0; }

.ojo-delicada {
    margin: 0;
    padding: .45rem .65rem;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--ojo) 16%, transparent);
    font-size: .88rem;
}

.propuesta .foto { margin: 0; }
.propuesta .foto img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 16rem;
    object-fit: cover;
    border-radius: .5rem;
    background: var(--papel-borde);
    transition: opacity .15s;
}
.propuesta .foto figcaption { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; margin-top: .35rem; font-size: .8rem; color: var(--tinta-floja); }
.casilla { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 600; color: var(--tinta); cursor: pointer; }
.casilla input { width: 1.15rem; height: 1.15rem; }

/* «Sin foto» marcado: la foto se apaga y el botón lo dice. Solo CSS; sin :has()
   el botón dice «Publicar» y la casilla manda igual. */
.propuesta:has(input[name="sin_foto"]:checked) .foto img { opacity: .2; filter: grayscale(1); }
.propuesta .sin-foto { display: none; }
.propuesta:has(input[name="sin_foto"]:checked) .con-foto { display: none; }
.propuesta:has(input[name="sin_foto"]:checked) .sin-foto { display: inline; }

/* «Usar como cartel» marcado (22/10/2026): el cartel se ve entero, como saldrá
   (en apaisado sobre su fondo), y el botón dice «Publicar con el cartel». Con
   «Sin foto» también marcado gana «Sin foto», como en el portal. */
.propuesta .con-cartel { display: none; }
.propuesta:has(input[name="como_cartel"]:checked):not(:has(input[name="sin_foto"]:checked)) .foto img { object-fit: contain; }
.propuesta:has(input[name="como_cartel"]:checked):not(:has(input[name="sin_foto"]:checked)) .con-foto { display: none; }
.propuesta:has(input[name="como_cartel"]:checked):not(:has(input[name="sin_foto"]:checked)) .con-cartel { display: inline; }
.propuesta:has(input[name="sin_foto"]:checked) .casilla.como-cartel { opacity: .45; }
.propuesta .foto .casilla { white-space: nowrap; }

.propuesta .texto summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--tinta-floja); }
.propuesta .texto div { font-size: .92rem; }
.propuesta .texto h3 { margin: .8rem 0 .2rem; font-size: .95rem; }
.propuesta .texto p { margin: .4rem 0; }

.propuesta .nota { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.propuesta .nota > span { color: var(--tinta-floja); }
.propuesta .nota small { color: var(--tinta-floja); }

.puesto { display: grid; gap: .25rem; font-size: .85rem; }
.puesto > span { font-weight: 700; }
.puesto select {
    width: 100%;
    padding: .55rem .6rem;
    font: inherit;
    font-size: 1rem; /* menos de 16 px y el iPhone hace zoom al tocarlo */
    color: var(--tinta);
    background: var(--fondo);
    border: 1px solid var(--papel-borde);
    border-radius: .5rem;
}
.puesto small { color: var(--tinta-floja); }

.botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.botones button, .botones a {
    flex: 1 1 auto;
    min-height: 2.9rem;
    padding: .6rem .9rem;
    border-radius: .6rem;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.botones .publicar { flex-basis: 100%; border: 0; background: var(--bien); color: var(--fondo); }
.botones .editar { border: 1px solid var(--papel-borde); background: transparent; color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; }
.botones .descartar { border: 1px solid var(--mal); background: transparent; color: var(--mal); }
.botones button[disabled] { opacity: .55; cursor: progress; }
/* Al volver de publicar se cae en #arriba: que no quede debajo de la barra fija. */
#arriba { scroll-margin-top: 8rem; }

/* ─────────────────────────────────────────────── portada (8/10/2026) ─────── */
/*
 | TAMBIÉN SE MIRA EN EL IPHONE: una columna, los desplegables a lo ancho y los
 | botones al alcance del pulgar, como en Aprobar (y con sus mismas piezas:
 | `.hecho`, `.puesto`, `.botones`).
 |
 | «SUBE» Y «BAJA» NO LLEVAN VERDE NI ROJO: subir no es bueno ni bajar malo, y
 | los colores de estado de este panel significan «bien» y «mal». Van con su
 | flecha y en el color de la tinta.
 */
.selector-portal { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.selector-portal a {
    padding: .5rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--papel-borde);
    background: var(--papel);
    color: var(--tinta);
    font-weight: 700;
    text-decoration: none;
}
.selector-portal a.aqui { color: var(--fondo); background: var(--tinta); border-color: var(--tinta); }

.hecho .por-portal { margin: .5rem 0 0; padding-left: 1.1rem; font-weight: 500; }
.hecho .por-portal li.mal { color: var(--mal); font-weight: 700; }
.hecho .por-portal li.ojo { color: var(--ojo); font-weight: 700; }

.lista-directrices { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.lista-directrices li {
    display: grid;
    gap: .3rem;
    padding: .6rem .75rem;
    border-radius: .6rem;
    border: 1px solid var(--papel-borde);
}
.lista-directrices .que { font-weight: 700; overflow-wrap: anywhere; }
.lista-directrices .plazo { font-size: .85rem; color: var(--tinta-floja); }
.lista-directrices li.apagada { opacity: .65; }
.lista-directrices li.caducada .plazo b { color: var(--ojo); }
.lista-directrices .botones { margin-top: 0; }
.lista-directrices .botones form { display: flex; flex: 1 1 8rem; }
.lista-directrices .botones button { flex: 1 1 auto; min-height: 2.6rem; }

.directriz-nueva, .proponer, .propuesta-orden { display: grid; gap: .6rem; }
.directriz-nueva h3 { margin: .4rem 0 0; }
.portada-ahora p { margin: 0 0 .5rem; }
.fila { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.puesto input, .puesto textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .6rem;
    font: inherit;
    font-size: 1rem; /* menos de 16 px y el iPhone hace zoom al tocarlo */
    color: var(--tinta);
    background: var(--fondo);
    border: 1px solid var(--papel-borde);
    border-radius: .5rem;
}

.propuesta-orden .resumen { margin: 0; font-size: 1rem; }
.criterio { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.ultimas { margin: .4rem 0 0; padding-left: 1.4rem; font-size: .9rem; }
.ultimas small { color: var(--tinta-floja); }

.orden { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; counter-reset: puesto; }
.orden li {
    display: grid;
    gap: .3rem;
    padding: .6rem .75rem;
    border-radius: .6rem;
    border: 1px solid var(--papel-borde);
    counter-increment: puesto;
}
.orden .fila-titulo { display: flex; gap: .5rem; align-items: baseline; }
.orden .fila-titulo::before { content: counter(puesto) "."; font-weight: 800; font-variant-numeric: tabular-nums; }
.orden small { color: var(--tinta-floja); font-size: .85rem; }
.movimiento { flex: none; font-size: .78rem; font-weight: 700; white-space: nowrap; color: var(--tinta-floja); }
.movimiento.sube, .movimiento.baja, .movimiento.entra { color: var(--tinta); }
.puesto.en-linea { grid-template-columns: auto 6rem; align-items: center; justify-content: start; gap: .5rem; }
/* Mover de puesto (14/10/2026): el desplegable y su botón, en una fila que cabe en 375 px. */
.mover-fila { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mover-fila select { flex: 1 1 9rem; min-height: 2.6rem; font: inherit; font-size: 1rem; padding: .4rem .5rem;
    color: var(--tinta); background: var(--fondo); border: 1px solid var(--papel-borde); border-radius: .5rem; }
.mover-fila button { min-height: 2.6rem; }

/*
 | EFEMÉRIDES (8/10/2026). El mes en una rejilla de siete columnas que cabe en
 | 375 px: cada día es un número y, debajo, cuántas efemérides tiene, ★ si hay
 | un aniversario redondo y ● si es festivo en algún portal. Los símbolos van
 | siempre con su explicación debajo de la rejilla y en el `aria-label`.
 */
.mes-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.mes-cabecera h2 { margin: 0; }
.mes-paso { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; min-height: 2.6rem;
    border: 1px solid var(--papel-borde); border-radius: .6rem; color: var(--tinta); text-decoration: none; font-size: 1.3rem; }
.rejilla-mes { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.rejilla-mes .dia-semana { text-align: center; font-size: .72rem; color: var(--tinta-floja); font-weight: 600; }
.rejilla-mes li a { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-height: 3.1rem; padding: .3rem .1rem;
    border: 1px solid var(--papel-borde); border-radius: .5rem; color: var(--tinta); text-decoration: none; }
.rejilla-mes li.festivo a { border-color: var(--ojo); }
.rejilla-mes li.hoy a { outline: 2px solid var(--tinta-floja); outline-offset: -2px; }
.rejilla-mes li.elegido a { background: color-mix(in srgb, var(--tinta) 14%, transparent); font-weight: 700; }
.rejilla-mes .numero { font-size: .95rem; }
.rejilla-mes .marcas { display: flex; gap: .15rem; font-size: .7rem; line-height: 1; }
.rejilla-mes .marcas b { font-weight: 600; }
.rejilla-mes .redonda, .efemeride.redonda .cuando { color: var(--ojo); }
.rejilla-mes .punto-festivo { color: var(--ojo); }

.festivos-del-dia { margin: 0 0 1rem; padding-left: 1.1rem; }
.efemeride { border: 1px solid var(--papel-borde); border-left: 4px solid var(--bien); border-radius: .6rem; padding: .7rem .9rem; margin: 0 0 .8rem; }
.efemeride.sin-verificar { border-left-color: var(--ojo); }
.efemeride > header { display: flex; flex-wrap: wrap; gap: .2rem .6rem; font-size: .78rem; color: var(--tinta-floja); }
.efemeride .portal { font-weight: 700; color: var(--tinta); }
.efemeride h3 { margin: .35rem 0; font-size: 1.02rem; text-transform: none; letter-spacing: 0; color: var(--tinta); }
.efemeride h3 a { color: inherit; }
.efemeride p { margin: .3rem 0; }
.etiqueta-ojo, .etiqueta-bien { display: inline-block; padding: 0 .4rem; border-radius: .4rem; font-size: .72rem; font-weight: 700; }
.etiqueta-ojo { color: var(--ojo); border: 1px solid var(--ojo); }
.etiqueta-bien { color: var(--bien); border: 1px solid var(--bien); }
.efemeride-ficha .etiquetas { display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: .8rem; color: var(--tinta-floja); }
.efemeride-ficha .resumen { font-size: 1rem; max-width: 60rem; }
.fuentes { margin: 0 0 .8rem; padding-left: 1.1rem; overflow-wrap: anywhere; }
.lista-redondas { list-style: none; margin: 0; padding: 0; }
.lista-redondas li { display: flex; flex-wrap: wrap; gap: .2rem .6rem; padding: .35rem 0; border-bottom: 1px solid var(--papel-borde); }
.lista-redondas .cuando { min-width: 7.5rem; color: var(--tinta-floja); }
/* «Esta semana» en Efemérides (21/10/2026): un día debajo de otro, lo de cada día en lista. */
.semana-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem .8rem; }
.semana-dias { list-style: none; margin: 0; padding: 0; }
.semana-dias > li { padding: .5rem 0 .2rem; }
.semana-dias h3 { margin: 0 0 .2rem; font-size: .95rem; text-transform: none; letter-spacing: 0; }
.semana-dias h3 a { color: var(--tinta); }
.semana-dias .explica { margin: 0; }
.festivo-semana .cuando { color: var(--ojo); font-weight: 700; }
.semana-dias .lista-redondas li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .1rem .6rem; }
.semana-dias .lista-redondas .cuando { min-width: 0; font-size: .85rem; padding-top: .1rem; }
.semana-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; margin-top: .15rem; color: var(--tinta-floja); }
.formulario-efemeride input[type="text"], .formulario-efemeride textarea, .formulario-efemeride select,
.texto-de-la-noticia input[type="text"], .texto-de-la-noticia textarea { width: 100%; box-sizing: border-box; }
.portales-elegidos { border: 1px solid var(--papel-borde); border-radius: .6rem; padding: .5rem .8rem; margin: 0 0 .8rem; }
.portales-elegidos .casilla { margin-right: 1rem; }
.volver { margin: 0 0 .3rem; font-size: .85rem; }
.quitar-efemeride { margin-top: 1rem; }

/*
 | «ESTO YA LO TIENES» Y TITULARES A PRUEBA, en la tarjeta de Aprobar
 | (8/10/2026). Lo primero va arriba y con borde de «ojo»: no es un error, es
 | algo que hay que saber antes de decidir. «Actualizar esa noticia» toma el
 | sitio del botón principal y «Publicar aparte» pasa a secundario.
 */
.ya-lo-tienes {
    display: grid;
    gap: .35rem;
    padding: .55rem .7rem;
    border-radius: .5rem;
    border: 1px solid var(--ojo);
    background: color-mix(in srgb, var(--ojo) 10%, transparent);
    font-size: .9rem;
    overflow-wrap: anywhere;
}
.ya-lo-tienes p { margin: 0; }
.ya-lo-tienes .actualizacion { padding-left: .6rem; border-left: 3px solid var(--papel-borde); font-size: .9rem; }
.ya-lo-tienes .actualizacion p { margin: .3rem 0; }
.botones .actualizar { flex-basis: 100%; border: 0; background: var(--bien); color: var(--fondo); }
.botones .publicar.aparte { flex-basis: auto; border: 1px solid var(--papel-borde); background: transparent; color: var(--tinta); }

.titulares-a-prueba { display: grid; gap: .4rem; margin: 0; padding: .55rem .7rem .7rem; border: 1px solid var(--papel-borde); border-radius: .5rem; min-width: 0; }
.titulares-a-prueba legend { padding: 0 .3rem; font-size: .85rem; font-weight: 700; }
.titulares-a-prueba .casilla { align-items: flex-start; font-weight: 500; overflow-wrap: anywhere; }
.titulares-a-prueba .casilla input { flex: none; margin-top: .15rem; }

/*
 | ALERTAS (8/10/2026). Una sección por portal; cada alerta, una ficha que
 | cabe en 375 px. «Importante» se dice con su etiqueta y un borde, no solo con
 | el color.
 */
.recuento a.portal { color: inherit; text-decoration: none; }
.alertas-portal { scroll-margin-top: 8rem; }
.alertas-portal.mal { border-left: 4px solid var(--mal); }
.alertas-portal.ojo { border-left: 4px solid var(--ojo); }
.alertas-portal.callado { border-left: 4px solid var(--callado); }
.lista-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-alertas li { display: grid; gap: .2rem; padding: .55rem .75rem; border-radius: .6rem; border: 1px solid var(--papel-borde); overflow-wrap: anywhere; }
.lista-alertas li.importante { border-left: 4px solid var(--ojo); }
.lista-alertas p { margin: 0; }
.cabeza-alerta, .pie-alerta { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; font-size: .78rem; color: var(--tinta-floja); }
.cabeza-alerta .tipo { font-weight: 700; color: var(--tinta); }
.lista-alertas .que { font-weight: 700; }
.lista-alertas .detalle { font-size: .88rem; }

/* Ajustes de las alertas: los desplegables con su nombre normal, no en versalitas. */
.ajuste-alertas label.puesto { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--tinta); }
.ajuste-alertas label.puesto small.ojo { color: var(--ojo); }
.ajuste-alertas .casilla { text-transform: none; letter-spacing: 0; display: flex; align-items: flex-start; font-weight: 500; }
.ajuste-alertas .casilla input { flex: none; padding: 0; }
.ajuste-alertas details.por-portal { display: grid; gap: .5rem; padding: .5rem .7rem; border: 1px solid var(--papel-borde); border-radius: .6rem; }
.ajuste-alertas details.por-portal summary { cursor: pointer; font-weight: 700; }
.ajuste-alertas details.por-portal[open] summary { margin-bottom: .5rem; }
.ajuste-alertas details.por-portal label.puesto { margin-bottom: .45rem; }

/*
 | TITULARES A PRUEBA (8/10/2026). Cada titular es una ficha, no una fila de
 | tabla: el texto es largo y en el iPhone las cifras quedaban cortadas. El
 | ganador va en negrita y con «Gana» escrito; no en verde, que aquí verde
 | quiere decir «bien» y perder una prueba no es estar mal.
 */
.titulares-portal { scroll-margin-top: 8rem; }
.aprendido { margin: 0 0 1rem; padding: .6rem .8rem; border-radius: .6rem; border: 1px solid var(--papel-borde); }
.aprendido h3 { margin-top: 0; }
.aprendido p, .aprendido ul { margin: .3rem 0; }
.aprendido ul { padding-left: 1.1rem; }
.prueba { margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: .6rem; border: 1px solid var(--papel-borde); }
.prueba.en-marcha { border-left: 4px solid var(--tinta-floja); }
.prueba > header { display: flex; flex-wrap: wrap; gap: .2rem .6rem; font-size: .78rem; color: var(--tinta-floja); }
.prueba h3 { margin: .35rem 0; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--tinta); overflow-wrap: anywhere; }
.prueba h3 a { color: inherit; }
.prueba .explica { margin: .3rem 0 0; }
.variantes { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.variantes li { display: grid; gap: .1rem; padding: .35rem .55rem; border-radius: .45rem; border: 1px solid var(--papel-borde); overflow-wrap: anywhere; }
.variantes li.gana { border-color: var(--tinta); }
.variantes li.gana .texto-titular { font-weight: 800; }
.variantes small { color: var(--tinta-floja); font-size: .8rem; font-variant-numeric: tabular-nums; }
/* Lo que hay que arreglar pero no corre prisa (incendios sin la clave de FIRMS): dicho, sin gritar. */
.explica.discreto { font-weight: 400; color: var(--tinta-floja); padding-left: .5rem; border-left: 2px solid var(--ojo); }

/* ─────────────────────────────────────────────── temas (8/10/2026) ───────── */
/*
 | Las piezas de Portada (`.selector-portal`, `.hecho`, `.puesto`, `.botones`)
 | y una ficha por tema, en una columna para el pulgar.
 |
 | «CON PÁGINA» Y «SIN PÁGINA» NO LLEVAN VERDE NI ROJO: no tener página todavía
 | no es estar mal, es tener pocas noticias. Se dice con palabras, en la tinta.
 */
.lista-temas { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.lista-temas li {
    display: grid;
    gap: .3rem;
    padding: .6rem .75rem;
    border-radius: .6rem;
    border: 1px solid var(--papel-borde);
}
.lista-temas .que { font-weight: 700; overflow-wrap: anywhere; }
.lista-temas .que small { font-weight: 500; color: var(--tinta-floja); }
.lista-temas .otros, .lista-temas .cuantas { font-size: .85rem; color: var(--tinta-floja); overflow-wrap: anywhere; }
.lista-temas .cuantas b { color: var(--tinta); }
.lista-temas form { display: grid; gap: .5rem; margin-top: .2rem; }
.lista-temas .botones { margin-top: 0; }
.lista-temas .juntar { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.lista-temas .juntar .botones button { min-height: 2.75rem; }
.lista-temas details p { margin: .3rem 0 0; font-size: .9rem; }

/* ─────────────────────────────────────────────── envíos (9/10/2026) ──────── */
/*
 | Las piezas de Temas (`.selector-portal`, `.hecho`, `.baldosas`, `.botones`)
 | y una ficha por entidad, en una columna para el pulgar.
 |
 | «ENTREGADA A BREVO» NO VA EN VERDE: haber salido no dice que haya llegado
 | bien; lo dicen los rebotes y las quejas que no hay. Va en la tinta, y el
 | verde se queda para «respondió», que sí es una buena noticia.
 */
.envios-estado { border-left: 4px solid var(--callado); }
.envios-estado.bien { border-left-color: var(--bien); }
.envios-estado.ojo { border-left-color: var(--ojo); }
.envios-estado.mal { border-left-color: var(--mal); }
.estado-envios { margin: 0 0 .5rem; font-size: 1.1rem; }
.faltan { margin: 0 0 .8rem; padding-left: 1.1rem; font-size: .9rem; }
.faltan li { margin: .2rem 0; }
.nota-apertura { margin-top: .4rem; }

.escalera { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.escalera li { padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--papel-borde); font-variant-numeric: tabular-nums; }
.escalera li.aqui { color: var(--fondo); background: var(--tinta); border-color: var(--tinta); font-weight: 700; }

.envios-mandos form, .confirmar-envio { margin: 0 0 .7rem; }
.confirmar-envio { padding: .55rem .75rem; border: 1px solid var(--ojo); border-radius: .6rem; }
.confirmar-envio summary { cursor: pointer; font-weight: 700; min-height: 2.2rem; display: flex; align-items: center; }
.confirmar-envio form { display: grid; gap: .5rem; margin: .4rem 0 0; }
.confirmar-envio p { margin: 0; font-size: .9rem; }
.prueba-envio { display: grid; gap: .5rem; }
.prueba-envio input { width: 100%; }

.dias-envio { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.dias-envio li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .15rem .6rem; align-items: center; font-size: .82rem; }
.dias-envio .dia { color: var(--tinta-floja); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dias-envio .cuantas { grid-column: 2; color: var(--tinta-floja); font-variant-numeric: tabular-nums; }
.dias-envio .g-barra i b { display: block; float: right; height: 100%; background: var(--mal); }

.lista-envios { margin: 0 0 .6rem; padding: 0; list-style: none; display: grid; gap: .45rem; }
.lista-envios li { display: grid; gap: .2rem; padding: .5rem .7rem; border-radius: .6rem; border: 1px solid var(--papel-borde); overflow-wrap: anywhere; }
.lista-envios li.rebotada, .lista-envios li.queja, .lista-envios li.error { border-left: 4px solid var(--mal); }
.lista-envios .que { font-weight: 700; }
.lista-envios .cuantas, .lista-envios .correo { font-size: .82rem; color: var(--tinta-floja); }
.lista-envios .cuantas span { margin-right: .3rem; }
.lista-envios .motivo { font-size: .85rem; color: var(--mal); }
.etiqueta-mal, .etiqueta-callado, .etiqueta-tinta { display: inline-block; padding: 0 .4rem; border-radius: .4rem; font-size: .72rem; font-weight: 700; }
.etiqueta-mal { color: var(--mal); border: 1px solid var(--mal); }
.etiqueta-callado { color: var(--tinta-floja); border: 1px solid var(--papel-borde); }
.etiqueta-tinta { color: var(--tinta); border: 1px solid var(--tinta-floja); }

.muestra-correo summary { cursor: pointer; font-weight: 700; overflow-wrap: anywhere; }
.muestra-correo pre { margin: .4rem 0 0; padding: .6rem .7rem; border-radius: .5rem; background: var(--fondo); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; }

/* ------------------------------------------- el orden, en Ajustes (9/10/2026) */

/* Lo que lee un lector de pantalla y no hace falta ver: el nombre de cada desplegable. */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ajuste-orden form { max-width: 34rem; }
.orden-grupos, .orden-proyectos { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.orden-grupo { padding: .55rem .7rem; border: 1px solid var(--papel-borde); border-radius: .6rem; display: grid; gap: .45rem; }
.orden-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.orden-fila .nombre { flex: 1 1 8rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.orden-fila.cabeza-de-grupo strong { flex: 1 1 auto; }
.orden-fila.cabeza-de-grupo small { color: var(--tinta-floja); }
.orden-proyectos .orden-fila { padding: .3rem 0; border-top: 1px solid var(--papel-borde); }
.ajuste-orden label.cambia-grupo { display: block; }
.ajuste-orden select { padding: .4rem .5rem; font: inherit; font-size: .9rem; border-radius: .5rem; border: 1px solid var(--papel-borde); background: var(--fondo); color: var(--tinta); }
.flechas { display: inline-flex; gap: .3rem; }
/* Del tamaño de un dedo: 44 px, lo que pide Apple para lo que se pulsa. */
.ajuste-orden .flechas button { min-width: 2.75rem; min-height: 2.75rem; padding: 0; font-size: 1.1rem; line-height: 1; }
.ajuste-orden .flechas button:disabled { opacity: .3; cursor: default; }
.ajuste-orden .botonera button.secundario { background: none; color: var(--tinta); border: 1px solid var(--papel-borde); }
.ajuste-orden h3 { margin-top: 1.4rem; }
/* Al volver de una flecha se cae en lo movido, sin que lo tape la barra de arriba. */
.ajuste-orden [id], #orden, #semana { scroll-margin-top: 8rem; }

/* Forzar el redactor de guardia (Aprobar, 9/10/2026): una fila por portal, con cómo está a la derecha. */
.forzar-portales { list-style: none; margin: .5rem 0; padding: 0; }
.forzar-portales li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; padding: .3rem 0; border-top: 1px solid var(--papel-borde); }
.forzar-portales li:first-child { border-top: 0; }
.forzar-portales .casilla { min-width: 9rem; }
.forzar-portales .como-esta { font-size: .85rem; color: var(--tinta-floja); overflow-wrap: anywhere; }
.forzar-portales .como-esta.ojo { color: var(--ojo); font-weight: 600; }
.forzar-portales .como-esta.mal { color: var(--mal); font-weight: 600; }
.forzar-tanda .casilla.todos { margin-bottom: .2rem; }

/*
 | ENVÍOS: TODAS LAS INVITACIONES Y LOS AJUSTES (10/10/2026).
 |
 | En el ordenador, una tabla que rueda dentro de su caja (la página nunca se
 | mueve de lado). EN EL MÓVIL, UNA FICHA POR INVITACIÓN: cada celda en su
 | línea y con su nombre delante, sacado de `data-titulo`; la tabla sigue
 | siendo tabla para el lector de pantalla. Los botones, de 44 px o más.
 */
.indice-envios { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
.indice-envios a { color: var(--tinta-floja); min-height: 2.75rem; display: inline-flex; align-items: center; }
.indice-envios a:hover, .indice-envios a:focus-visible { color: var(--tinta); }

.filtros-envios { display: grid; gap: .6rem; margin: 0 0 1rem; }
.filtros-envios .fila { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.filtros-envios .botones a { display: inline-flex; align-items: center; justify-content: center; }
.cuantas-invitaciones { font-weight: 600; color: var(--tinta); }

.tabla-invitaciones:focus-visible { outline: 2px solid var(--tinta-floja); outline-offset: 2px; }
table.invitaciones { min-width: 64rem; }
table.invitaciones th[scope="row"] { font-weight: 400; min-width: 12rem; }
table.invitaciones .que { display: block; font-weight: 700; }
table.invitaciones small { display: block; color: var(--tinta-floja); font-size: .78rem; margin-top: .15rem; }
table.invitaciones td.correo { overflow-wrap: anywhere; min-width: 12rem; }
table.invitaciones .motivo { display: block; margin-top: .2rem; color: var(--mal); font-size: .8rem; overflow-wrap: anywhere; }
table.invitaciones .asunto { overflow-wrap: anywhere; }
table.invitaciones .discreto { color: var(--tinta-floja); }
table.invitaciones .nota-invitacion { display: block; margin-top: .25rem; font-size: .8rem; overflow-wrap: anywhere; }
table.invitaciones tr.rebotada > *:first-child, table.invitaciones tr.queja > *:first-child, table.invitaciones tr.error > *:first-child { box-shadow: inset 4px 0 0 var(--mal); }
table.invitaciones tr.marcada > *:first-child { box-shadow: inset 4px 0 0 var(--tinta-floja); }
table.invitaciones td.que-hacer { min-width: 15rem; }
table.invitaciones .botones { margin-top: 0; }
table.invitaciones .botones button { min-height: 2.75rem; padding: .45rem .7rem; font-size: .85rem; }
.nota-de-invitacion { margin-top: .4rem; }
.nota-de-invitacion summary { cursor: pointer; font-size: .85rem; font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; }
.nota-de-invitacion form { display: grid; gap: .4rem; }

.paginas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .8rem 0 0; font-size: .9rem; }
.paginas a {
    min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 .9rem;
    border: 1px solid var(--papel-borde); border-radius: .6rem; color: var(--tinta); font-weight: 700; text-decoration: none;
}
.paginas span { color: var(--tinta-floja); }

.lista-envios .asunto { font-size: .9rem; overflow-wrap: anywhere; }

.ajustes-envio { display: grid; gap: .8rem; max-width: 44rem; }
.ajustes-envio fieldset.ajuste-envio { margin: 0; padding: .6rem .8rem .7rem; border: 1px solid var(--papel-borde); border-radius: .6rem; display: grid; gap: .45rem; min-width: 0; }
.ajustes-envio legend { padding: 0 .3rem; font-weight: 700; }
.ajustes-envio .explica { margin: 0; }
.ajustes-envio .vigor { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .82rem; color: var(--tinta-floja); }
.ajustes-envio .vigor b { color: var(--tinta); }
.ajustes-envio .vigor .de-cual { flex-basis: 100%; font-weight: 700; color: var(--tinta); }
.ajustes-envio .casilla { min-height: 2.75rem; font-weight: 500; }

@media (max-width: 40rem) {
    table.invitaciones { min-width: 0; }
    table.invitaciones thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    table.invitaciones, table.invitaciones tbody, table.invitaciones tr, table.invitaciones th, table.invitaciones td { display: block; }
    table.invitaciones tr { display: flex; flex-direction: column; margin: 0 0 .6rem; padding: .55rem .75rem; border: 1px solid var(--papel-borde); border-radius: .6rem; }
    table.invitaciones tr.rebotada, table.invitaciones tr.queja, table.invitaciones tr.error { border-left: 4px solid var(--mal); }
    table.invitaciones tr.marcada { border-left: 4px solid var(--tinta-floja); }
    table.invitaciones tr > *:first-child { box-shadow: none !important; }
    table.invitaciones th, table.invitaciones td { padding: .2rem 0; border: 0; min-width: 0; text-align: left; }
    table.invitaciones td::before, table.invitaciones th::before {
        content: attr(data-titulo); display: block;
        font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-floja);
    }
    table.invitaciones th[scope="row"]::before { display: none; }
    table.invitaciones th[scope="row"] { order: -1; font-size: 1rem; }
    table.invitaciones td.num { text-align: left; }
    table.invitaciones .botones button { flex: 1 1 100%; font-size: .95rem; }
    .tabla-invitaciones { overflow: visible; }
}
/* Al volver de marcar o de guardar se cae en su sección: que no la tape la barra de arriba. */
#lista, #respuestas, #ajustes { scroll-margin-top: 8rem; }

/* Pregúntale (11/10/2026): la conversación con DeepSeek. */
.instrucciones summary { font-weight: 700; cursor: pointer; }
.instrucciones ol { padding-left: 1.2rem; display: grid; gap: .35rem; margin: .7rem 0; }
.charla { display: grid; gap: .9rem; }
.turno { border: 1px solid var(--linea, #ccc); border-radius: .7rem; padding: .8rem 1rem; }
.turno.tu { background: color-mix(in srgb, var(--tinta-floja) 8%, transparent); }
.turno .quien { margin: 0 0 .4rem; font-size: .82rem; color: var(--tinta-floja); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.turno .texto { overflow-wrap: anywhere; }
.turno .texto p { margin: 0 0 .6rem; }
.turno .texto h3 { font-size: 1rem; margin: .8rem 0 .4rem; }
.turno .texto ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.turno .pagina { font-size: .82rem; margin: .3rem 0 0; overflow-wrap: anywhere; }
.copiar { margin-left: auto; font: inherit; font-size: .8rem; padding: .2rem .6rem; border: 1px solid var(--linea, #ccc); border-radius: .4rem; background: transparent; color: inherit; cursor: pointer; }
.pregunta { display: grid; gap: .7rem; }
.pregunta .modos { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pregunta .modos legend { font-weight: 700; margin-bottom: .4rem; }
.modo { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border: 1px solid var(--linea, #ccc); border-radius: 999px; cursor: pointer; font-size: .9rem; }
.modo:has(input:checked) { border-color: var(--tinta); font-weight: 700; }
.pregunta textarea { width: 100%; font: inherit; font-size: 1rem; padding: .7rem .8rem; border: 1px solid var(--linea, #ccc); border-radius: .6rem; background: transparent; color: inherit; resize: vertical; }
.pregunta .publicar { min-height: 2.9rem; padding: .6rem 1.4rem; border: 0; border-radius: .6rem; background: var(--bien); color: var(--fondo); font: inherit; font-weight: 700; cursor: pointer; }
.pregunta button[disabled] { opacity: .55; cursor: progress; }
.charlas { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.charlas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; padding: .5rem 0; border-bottom: 1px solid var(--linea, #ccc); }
.charlas li.aqui a { font-weight: 700; }
.charlas small { color: var(--tinta-floja); }
.charlas form.borrar { margin-left: auto; }
.charlas form.borrar button { font: inherit; font-size: .8rem; background: none; border: 0; color: var(--mal); cursor: pointer; text-decoration: underline; }

/* El cuadro de mando y los análisis de la IA (11/10/2026). */
.elegir-portal { display: flex; flex-wrap: wrap; gap: .4rem; }
.elegir-portal a { padding: .45rem .8rem; border: 1px solid var(--papel-borde); border-radius: 999px; color: inherit; text-decoration: none; font-size: .9rem; min-height: 2.2rem; display: inline-flex; align-items: center; }
.elegir-portal a[aria-current="page"] { border-color: var(--tinta); font-weight: 700; }
.analizar { display: grid; gap: .6rem; }
.analizar textarea, #ajustes input[type="text"], #ajustes input[type="url"], .analizar select, #ajustes select { font: inherit; padding: .5rem .7rem; border: 1px solid var(--papel-borde); border-radius: .5rem; background: transparent; color: inherit; max-width: 100%; }
.analizar textarea { width: 100%; resize: vertical; }
.analizar .publicar { min-height: 2.9rem; padding: .6rem 1.4rem; border: 0; border-radius: .6rem; background: var(--bien); color: var(--fondo); font: inherit; font-weight: 700; cursor: pointer; }
.analizar button[disabled] { opacity: .55; cursor: progress; }
.fila-de-campos { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }
#ajustes form { display: grid; gap: .6rem; margin-top: .7rem; }
#ajustes fieldset { border: 1px solid var(--papel-borde); border-radius: .6rem; display: grid; gap: .5rem; }
.anomalias, .fuentes-de-datos, .historial-analisis, .causas, .mas-leidas { padding-left: 1.1rem; display: grid; gap: .45rem; margin: .4rem 0; }
.anomalias, .fuentes-de-datos, .historial-analisis { list-style: none; padding-left: 0; }
.anomalias li { border-left: 3px solid var(--papel-borde); padding-left: .6rem; }
.anomalias li.mal { border-color: var(--mal); }
.anomalias li.bien { border-color: var(--bien); }
.historial-analisis small, .mas-leidas small { color: var(--tinta-floja); }
table.cuadro td small { color: var(--tinta-floja); }
dl.contexto { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .35rem .9rem; margin: .5rem 0; }
dl.contexto dt { color: var(--tinta-floja); font-size: .85rem; }
dl.contexto dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { dl.contexto { grid-template-columns: 1fr; } dl.contexto dd { margin-bottom: .4rem; } }
.analisis ul, .analisis ol { padding-left: 1.2rem; display: grid; gap: .45rem; }
.acciones li small, .causas li small { color: var(--tinta-floja); }
pre.crudo { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .78rem; max-height: 30rem; overflow: auto; border: 1px solid var(--papel-borde); border-radius: .5rem; padding: .7rem; }
/* Los botones «¿Lo hago?» de las acciones del análisis (11/10/2026). */
.boton-accion { display: inline-flex; align-items: center; min-height: 2.4rem; margin-top: .35rem; padding: .3rem .8rem; border-radius: .5rem; background: var(--tinta); color: var(--fondo); font-weight: 700; font-size: .88rem; text-decoration: none; }
.boton-accion.flojo { background: transparent; color: var(--tinta-floja); border: 1px solid var(--papel-borde); font-weight: 400; }
/* El botón de actualizar de la barra (11/10/2026): como «Salir», pero a la izquierda del tema. */
.barra .actualizar { 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: inherit; font-size: .85rem; cursor: pointer; margin-right: .4rem; }
.barra .actualizar:hover, .barra .actualizar:focus-visible { color: var(--tinta); border-color: var(--tinta-floja); }
.barra .actualizar.girando .icono { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .barra .actualizar span { display: none; } .barra .actualizar { padding: .42rem .5rem; } }
html:not(.con-js) .barra .actualizar { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA NAVEGACIÓN EN CINCO (11/10/2026)
   Cinco sitios siempre a mano: arriba en el ordenador, abajo en el móvil (donde
   llega el pulgar). Dentro de cada sitio, sus pantallas en una fila corta.
   Va al final a propósito: manda sobre lo de las diecinueve pestañas de antes.
   ═══════════════════════════════════════════════════════════════════════════ */
.barra { flex-wrap: nowrap; }
.pestanas { order: 0; flex: 0 1 auto; flex-wrap: nowrap; overflow: visible; }
.pestana { position: relative; min-height: 2.5rem; }
.pestana .numerito, .subpestana .numerito { margin-left: .15rem; }
.barra .buscar { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; border-radius: .55rem; border: 1px solid var(--papel-borde); background: var(--papel); color: var(--tinta-floja); }
.barra .buscar:hover, .barra .buscar:focus-visible { color: var(--tinta); border-color: var(--tinta-floja); }
.barra .actualizar, .barra .salir { min-height: 2.5rem; }

.subpestanas { display: flex; gap: .35rem; margin: -.4rem 0 1rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .1rem; }
.subpestanas::-webkit-scrollbar { display: none; }
/* «Poner a cero» (16/10/2026): al final de la fila, más flojo que las pestañas. */
.subpestanas .a-cero { flex: 0 0 auto; margin: 0 0 0 auto; }
.subpestanas .a-cero button { min-height: 2.4rem; padding: .3rem .85rem; border-radius: 999px; border: 1px dashed var(--papel-borde); background: transparent; color: var(--tinta-floja); font: inherit; font-size: .85rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.subpestana { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.4rem; padding: .3rem .85rem; border-radius: 999px; border: 1px solid var(--papel-borde); background: var(--papel); color: var(--tinta-floja); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.subpestana:hover, .subpestana:focus-visible { color: var(--tinta); border-color: var(--tinta-floja); }
.subpestana.aqui { color: var(--fondo); background: var(--tinta); border-color: var(--tinta); }

@media (max-width: 640px) {
    /* Sin desenfoque en la cabecera del móvil: un `backdrop-filter` convierte la
       cabecera en el «marco» de lo fijo, y la barra de abajo se quedaba arriba. */
    .barra { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--fondo); }
    /* La barra de abajo: cinco botones del mismo ancho, con su número. */
    .pestanas {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
        display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
        margin: 0; padding: .3rem .3rem max(.3rem, env(safe-area-inset-bottom));
        border: 0; border-top: 1px solid var(--papel-borde); border-radius: 0;
        background: color-mix(in srgb, var(--fondo) 92%, transparent);
        backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
        overflow: visible; order: 0; flex: none;
        /* Lo que Safari la deja subida tras cerrar el teclado (panel.js). */
        transform: translateY(var(--hundir, 0px));
    }
    /* Mientras se escribe no hay barra: así no se queda enganchada al teclado (panel.js). */
    .escribiendo .pestanas { display: none; }
    .pestana { flex-direction: column; gap: .15rem; padding: .35rem .1rem; min-height: 3.2rem; font-size: .72rem; justify-content: center; }
    .pestana .icono { width: 22px; height: 22px; }
    .pestana.aqui { background: none; color: var(--tinta); }
    .pestana.aqui .icono { stroke-width: 2.4; }
    .pestana .numerito { position: absolute; top: .15rem; left: calc(50% + .45rem); margin: 0; }
    body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
    .barra .marca span { display: inline; }
}

/* ═══ «Hoy», Avisos, Todo el panel, Redacción y Limpiar (11/10/2026) ═══ */
.fecha-hoy { margin: 0 0 .2rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-floja); }
.bandeja { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .6rem; }
.tarea-hoy a { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: .8rem; border: 1px solid var(--papel-borde); border-left-width: 5px; background: var(--papel); color: var(--tinta); text-decoration: none; min-height: 3.2rem; }
.tarea-hoy.mal a { border-left-color: var(--mal); }
.tarea-hoy.ojo a { border-left-color: var(--ojo); }
.tarea-hoy.nada a { border-left-color: var(--papel-borde); }
.tarea-hoy a:hover, .tarea-hoy a:focus-visible { border-color: var(--tinta-floja); }
.tarea-texto { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.tarea-texto strong { font-size: 1rem; }
.tarea-texto small { color: var(--tinta-floja); font-size: .85rem; overflow-wrap: anywhere; }
.tarea-boton { flex: none; font-weight: 700; font-size: .88rem; white-space: nowrap; }
@media (max-width: 560px) { .tarea-hoy a { flex-direction: column; align-items: stretch; gap: .5rem; } .tarea-boton { align-self: flex-end; } }
.atajos { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin-top: .8rem; }
.atajo { display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .6rem .8rem; border-radius: .7rem; border: 1px solid var(--papel-borde); background: var(--fondo); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .9rem; }
.atajo:hover, .atajo:focus-visible { border-color: var(--tinta-floja); }
.filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; }
.filtros a { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.4rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--papel-borde); background: var(--papel); color: var(--tinta-floja); text-decoration: none; font-size: .88rem; }
.filtros a[aria-current="true"] { color: var(--fondo); background: var(--tinta); border-color: var(--tinta); }
.avisos { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.avisos li { border-bottom: 1px solid var(--papel-borde); }
.avisos li > a { display: grid; gap: .15rem; padding: .65rem .2rem; color: var(--tinta); text-decoration: none; }
.avisos li.nuevo > a { border-left: 3px solid var(--ojo); padding-left: .6rem; }
.avisos span { font-size: .9rem; overflow-wrap: anywhere; }
.avisos small { color: var(--tinta-floja); font-size: .78rem; }
.buscador input { width: 100%; font: inherit; font-size: 1.05rem; padding: .75rem .9rem; border-radius: .7rem; border: 1px solid var(--papel-borde); background: var(--fondo); color: var(--tinta); }
.indice-del-panel { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .4rem; }
.indice-del-panel a { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem; border-radius: .7rem; border: 1px solid var(--papel-borde); color: var(--tinta); text-decoration: none; min-height: 3rem; }
.indice-del-panel a:hover, .indice-del-panel a:focus-visible { border-color: var(--tinta-floja); }
.indice-del-panel span { display: grid; gap: .1rem; }
.indice-del-panel small { color: var(--tinta-floja); font-size: .82rem; }
.indice-del-panel li[hidden] { display: none; }
.bloque h2 .icono { vertical-align: -3px; }
.resumen-redaccion { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.resumen-redaccion a { display: grid; gap: .15rem; padding: .75rem .85rem; border-radius: .75rem; border: 1px solid var(--papel-borde); color: var(--tinta); text-decoration: none; min-height: 5rem; }
.resumen-redaccion li.aqui a { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.resumen-redaccion .cifra { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.resumen-redaccion small { color: var(--tinta-floja); font-size: .78rem; }
.lista-redaccion { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
.lista-redaccion > li { padding: .8rem 0; border-bottom: 1px solid var(--papel-borde); }
.lista-redaccion .meta { margin: 0 0 .25rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.lista-redaccion .meta small { color: var(--tinta-floja); }
.titulo-elemento { margin: 0 0 .3rem; }
.titulo-elemento a { color: var(--tinta); }
.botones-redaccion { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; }
.botones-redaccion form { margin: 0; }
.botones-redaccion button { min-height: 2.5rem; padding: .35rem .85rem; border-radius: .55rem; border: 1px solid var(--papel-borde); background: var(--papel); color: var(--tinta); font: inherit; font-size: .88rem; cursor: pointer; }
.botones-redaccion button.principal { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); font-weight: 700; }
.botones-redaccion .en-portal { font-size: .85rem; color: var(--tinta-floja); }
/* Programar (12/10/2026): el día y la hora pegados a su botón. */
.botones-redaccion form.programar { display: flex; gap: .3rem; align-items: center; }
.botones-redaccion .cuando-sale input { min-height: 2.5rem; padding: .3rem .5rem; border-radius: .55rem; border: 1px solid var(--papel-borde); background: var(--papel); color: var(--tinta); font: inherit; font-size: .88rem; max-width: 100%; }
.texto-nota { line-height: 1.6; overflow-wrap: anywhere; margin: .8rem 0; }
.limpieza { padding-left: 1.1rem; display: grid; gap: .5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   DISEÑO (11/10/2026): «quiero utilidad, pero también diseño, visibilidad, que
   sea bonito». Logos en vez de nombres donde no caben, botones que se ven, el
   sol de la familia (#e8a33d) como color de acento, y nada de palabras partidas.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --acento: #e8a33d; --acento-suave: color-mix(in srgb, #e8a33d 16%, transparent); --sombra: 0 1px 2px rgb(0 0 0 / .06), 0 4px 14px rgb(0 0 0 / .06); }

/* Logos */
.logo { flex: none; border-radius: 24%; object-fit: cover; vertical-align: middle; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); background: var(--papel); }
.sin-logo { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tinta-floja); color: var(--fondo); font-weight: 800; font-size: .8rem; }
.con-logo { display: inline-flex; align-items: center; gap: .5rem; }
h1.con-logo, h3.con-logo { display: flex; flex-wrap: wrap; }
h1.con-logo .logo { border-radius: 22%; }

/* La tabla de la semana: logos, sin cortar palabras, grupos como bandas */
table.semana th, table.semana td { overflow-wrap: normal; word-break: normal; hyphens: none; white-space: nowrap; }
table.semana th[scope="row"] a { text-decoration: none; color: var(--tinta); }
table.semana th[scope="row"] .nombre { font-weight: 600; }
table.semana tr.titulo-grupo th { padding: .7rem .6rem .35rem; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-floja); background: none; border-bottom: 2px solid var(--papel-borde); }
table.semana tr.grupo th, table.semana tr.grupo td { background: var(--acento-suave); font-weight: 700; }
.etiqueta-corta { display: inline-block; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--papel-borde); font-size: .75rem; }
@media (max-width: 640px) {
    table.semana th[scope="row"] .nombre { display: none; }
    table.semana th[scope="row"] .logo { width: 34px; height: 34px; }
}
table.cuadro thead .logo { width: 30px; height: 30px; }

/* «Hoy»: tarjetas con icono, número de portales con su logo y botón que se ve */
.cabecera.hoy h1 { font-size: 1.7rem; letter-spacing: -.02em; }
.tarea-hoy a { box-shadow: var(--sombra); transition: transform .12s ease, box-shadow .12s ease; align-items: center; }
.tarea-hoy a:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgb(0 0 0 / .08), 0 10px 24px rgb(0 0 0 / .08); }
.tarea-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.7rem; height: 2.7rem; border-radius: .8rem; background: var(--acento-suave); color: var(--tinta); }
.tarea-icono .icono { width: 22px; height: 22px; }
.tarea-hoy.mal .tarea-icono { background: color-mix(in srgb, var(--mal) 16%, transparent); color: var(--mal); }
.tarea-hoy.ojo .tarea-icono { background: var(--acento-suave); color: color-mix(in srgb, var(--acento) 70%, var(--tinta)); }
.tarea-hoy.nada .tarea-icono { background: color-mix(in srgb, var(--tinta-floja) 14%, transparent); color: var(--tinta-floja); }
.tarea-boton { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .95rem; border-radius: 999px; background: var(--tinta); color: var(--fondo); font-size: .85rem; }
.tarea-hoy.mal .tarea-boton { background: var(--mal); color: #fff; }
.tarea-hoy.ojo .tarea-boton { background: var(--acento); color: #1a1203; }
.donde { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.donde-uno { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem .15rem .2rem; border-radius: 999px; background: var(--fondo); border: 1px solid var(--papel-borde); font-size: .82rem; }
.donde-uno .logo { width: 20px; height: 20px; }
.donde-uno[data-ir] { cursor: pointer; }
.donde-uno[data-ir]:hover { border-color: currentColor; }
@media (max-width: 560px) { .tarea-hoy a { display: grid; grid-template-columns: auto 1fr; } .tarea-boton { grid-column: 1 / -1; justify-self: end; } }

/* Atajos con su icono en color */
.atajo .icono { padding: .35rem; width: 32px; height: 32px; border-radius: .6rem; background: var(--acento-suave); box-sizing: border-box; }

/* Botones de acción: más presentes */
.boton-accion { border-radius: 999px; padding: .45rem 1rem; background: var(--acento); color: #1a1203; box-shadow: var(--sombra); }
.boton-accion::after { content: " →"; }
.boton-accion.flojo { box-shadow: none; }
.boton-accion.flojo::after { content: ""; }
.botones-redaccion button.principal { background: var(--acento); color: #1a1203; border-color: var(--acento); }
.analizar .publicar, .pregunta .publicar { box-shadow: var(--sombra); border-radius: 999px; }

/* Chips con logo (Cuadro, Redacción) */
.elegir-portal a.con-logo, .filtros a.con-logo { padding-left: .35rem; }
.elegir-portal .logo, .filtros .logo { width: 22px; height: 22px; }
@media (max-width: 640px) { .elegir-portal a.con-logo span:not(.sin-logo), .filtros a.con-logo span:not(.sin-logo) { display: none; } .elegir-portal a.con-logo, .filtros a.con-logo { padding: .3rem; } }

/* Tarjetas de proyectos y la lista de Redacción */
.tarjeta h3.con-logo { align-items: center; gap: .55rem; }
.lista-redaccion .meta .logo { width: 22px; height: 22px; }
.resumen-redaccion a { box-shadow: var(--sombra); background: var(--papel); }
.resumen-redaccion .cifra { color: var(--tinta); }
.bloque { box-shadow: var(--sombra); }

/* «Ojo: puede que ya esté hecho» (LoQueYaExiste, 11/10/2026). */
.ya-existe { margin: .4rem 0 .2rem; padding: .45rem .7rem; border-left: 3px solid var(--ojo); border-radius: .4rem; background: color-mix(in srgb, var(--ojo) 12%, transparent); font-size: .88rem; }

/* Entrar con Face ID (Llave, 11/10/2026): el botón grande y primero; la contraseña, debajo y de reserva. */
.con-llave { margin: .4rem 0 .2rem; }
body.entrada button.llave { width: 100%; min-height: 3.2rem; font-size: 1.05rem; background: var(--acento, var(--tinta)); color: #1a1203; border: 0; }
body.entrada button.llave:disabled { opacity: .6; cursor: progress; }
.o-bien { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 .2rem; color: var(--tinta-floja); font-size: .85rem; }
.o-bien::before, .o-bien::after { content: ""; flex: 1; height: 1px; background: var(--papel-borde); }
.llaves-dadas { list-style: none; padding: 0; margin: .5rem 0; }
.llaves-dadas li { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; justify-content: space-between; padding: .5rem 0; border-top: 1px solid var(--papel-borde); }
section[data-llave="alta"] button.llave { min-height: 2.8rem; padding: .5rem 1.1rem; border-radius: 999px; background: var(--acento, var(--tinta)); color: #1a1203; font-weight: 700; border: 0; }
form.en-linea { display: flex; gap: .4rem; align-items: center; margin: 0; flex-wrap: wrap; }
form.en-linea input { width: 11rem; }

/* Que nada empuje la pantalla del móvil hacia fuera (11/10/2026): una rejilla de
   una columna crece hasta lo que mida su palabra más larga --una dirección web de
   200 letras en una nota-- si no se le dice que puede encoger. */
.analizar, .lista-redaccion { grid-template-columns: minmax(0, 1fr); }
.analizar > *, .lista-redaccion > li { min-width: 0; }
.lista-redaccion, .analizar p, .acciones li { overflow-wrap: anywhere; }
.lista-redaccion img { max-width: 100%; height: auto; }
.resumen-redaccion small[class^="etiqueta-"] { justify-self: start; margin-top: .2rem; }
/* «Crear borrador» en los avisos del radar (11/10/2026). */
.aviso-borrador, .aviso-hecho { margin: 0 0 .7rem .2rem; }
.avisos li.nuevo .aviso-borrador, .avisos li.nuevo .aviso-hecho { margin-left: .9rem; }
.aviso-borrador .boton-accion { border: 0; cursor: pointer; font: inherit; font-weight: 700; }

/* Envíos: marcar varias de una vez (11/10/2026). */
table.invitaciones .elegir { width: 2.5rem; text-align: center; }
table.invitaciones .elegir input { width: 1.2rem; height: 1.2rem; }
table.invitaciones .elegir .casilla { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .7rem; }
table.invitaciones tr.elegida { outline: 2px solid var(--tinta-floja); outline-offset: -2px; }
.barra-varias { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .8rem; padding: .7rem .9rem; background: var(--papel); border: 1px solid var(--papel-borde); border-radius: .8rem; box-shadow: 0 -4px 16px rgba(0,0,0,.15); }
.barra-varias .cuantas-marcadas { font-weight: 700; flex: 1 1 10rem; }
.barra-varias select { max-width: 100%; }
.barra-varias button[disabled] { opacity: .5; cursor: not-allowed; }
/* Las marcadas sin tope (13/10/2026): marcar rápido, y cómo va el lote. */
.barra-varias .elegir-rapido { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.barra-varias .explica { flex: 1 1 100%; margin: 0; }
.lote-en-marcha { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.lote-en-marcha progress { flex: 0 1 12rem; height: .8rem; }
.lote-en-marcha .texto-lote { flex: 1 1 14rem; }
.lote-en-marcha form { margin: 0; }
.lista-redaccion .estado-lote:empty { display: none; }
/* Envíos (13/10/2026): lo que se está haciendo con cada fila del lote, debajo de su marca. */
table.invitaciones .estado-lote { display: inline-block; margin-top: .3rem; }
table.invitaciones .estado-lote[hidden] { display: none; }
/* Redacción: contestar una consulta (12/10/2026). La respuesta, a todo el ancho. */
.botones-redaccion details.contestar { flex: 1 1 100%; }
.botones-redaccion details.contestar summary { cursor: pointer; font-weight: 700; padding: .35rem 0; }
.botones-redaccion form.respuesta { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; }
.botones-redaccion form.respuesta textarea { width: 100%; box-sizing: border-box; padding: .6rem; border-radius: .55rem; border: 1px solid var(--papel-borde); background: var(--papel); color: var(--tinta); font: inherit; font-size: .95rem; }
.botones-redaccion form.respuesta button { align-self: flex-start; }
/* Redacción: publicar varias (12/10/2026). La casilla, arriba a la derecha de cada tarjeta. */
.lista-redaccion > li { position: relative; }
.lista-redaccion .elegir { position: absolute; top: .55rem; right: .55rem; }
.lista-redaccion .elegir input, .marcar-todas input { width: 1.35rem; height: 1.35rem; }
.lista-redaccion > li.elegida { outline: 2px solid var(--acento); outline-offset: -2px; }
.lista-redaccion .meta { padding-right: 2.2rem; }
.marcar-titulares { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin: .2rem 0 1rem; }
.marcar-titulares .boton-accion { border: 0; cursor: pointer; font: inherit; font-weight: 700; }

/* Las opciones de cada acción de «Qué haría» (LasOpcionesDeLaAccion, 12/10/2026). */
.opciones-accion { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .35rem; }
.opciones-accion .boton-accion { margin-top: 0; }
.opciones-accion form.en-linea { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.opciones-accion form.en-linea button { cursor: pointer; font: inherit; font-size: .88rem; }
.opciones-accion .otras-formas { flex-basis: 100%; order: 2; }
.opciones-accion .otras-formas summary { cursor: pointer; color: var(--tinta-floja); font-size: .9rem; padding: .25rem 0; }
.opciones-accion .otras-formas ul { margin: .2rem 0 .3rem; padding-left: 1.1rem; }
.opciones-accion .otras-formas li { margin: .3rem 0; }
.opciones-accion.decidida { gap: .3rem .5rem; }
details.decididas { margin-top: .8rem; }
details.decididas summary { cursor: pointer; color: var(--tinta-floja); }
details.decididas .acciones li { opacity: .75; }

/* «Deshacer» junto al aviso de programada (12/10/2026). */
.hecho .deshacer { display: inline; margin-left: .6rem; }
.hecho .deshacer button { font: inherit; font-size: .9em; padding: .25rem .7rem; }
/* «Publicar igual» (16/10/2026): en el aviso, en la tarjeta del lote y junto a la noticia parecida. */
.hecho .publicar-igual { display: inline; margin-left: .6rem; }
.publicar-igual button { font: inherit; font-size: .9em; padding: .25rem .7rem; }
.lista-redaccion .publicar-igual { margin: .3rem 0; }
.parecida { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .3rem 0; }
.parecida .publicar-igual { display: inline; margin: 0; }

/* Junto a «Programar», cuando la fecha propuesta es la de la efeméride (12/10/2026). */
.botones-redaccion .su-dia { align-self: center; color: var(--suave, #64748b); font-size: .8rem; }

/* Programar todos (12/10/2026): encima de la lista de borradores. */
.programar-todos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .25rem 0 1rem; }
.programar-todos .explica { margin: 0; }

/* La propuesta de objetivos (12/10/2026): marcada hasta que se guarda. */
.objetivos fieldset.propuesta { border: 1px dashed #e8a33d; border-radius: .6rem; background: color-mix(in srgb, #e8a33d 7%, transparent); }
.objetivos fieldset.propuesta input { border-color: #e8a33d; }

/* ── Estadísticas: el vistazo desde el móvil (13/10/2026) ──────────────── */
.indice-estadisticas { position: sticky; top: 0; z-index: 5; display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 0; margin: 0 0 .5rem; background: var(--fondo); scrollbar-width: none; }
.indice-estadisticas a { flex: none; padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--tinta); border: 2px solid var(--color-grupo, var(--papel-borde)); }
.estadisticas, .indice-estadisticas a { --color-grupo: #3987e5; }
.grupo-audiencia { --color-grupo: #3987e5; }
.grupo-google { --color-grupo: #22a06b; }
.grupo-dinero { --color-grupo: #e0a100; }
.grupo-produccion { --color-grupo: #a855f7; }
.grupo-distribucion { --color-grupo: #ec4899; }
.grupo-coste { --color-grupo: #ef4444; }
.estadisticas { border-top: 4px solid var(--color-grupo); scroll-margin-top: 3.5rem; }
.estadisticas .titulo-grupo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-size: 1.35rem; color: var(--color-grupo); }
.estadisticas .titulo-grupo small { font-size: .8rem; font-weight: 500; color: var(--tinta-floja); }
.metrica-evolucion { margin: 1rem 0 0; padding: .9rem 1rem 1rem; border: 1px solid var(--papel-borde); border-left: 5px solid var(--color-grupo); border-radius: .7rem; background: var(--papel); }
.metrica-evolucion .titulo-metrica { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--tinta); }
.metrica-evolucion .cifra-periodo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; margin: 0; }
.metrica-evolucion .cifra-periodo b { font-size: 1.6rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.metrica-evolucion .cifra-que-es { margin: .15rem 0 .6rem; font-size: .82rem; }

.metrica-evolucion .cambio-de-medida { margin: 0 0 .6rem; padding: .45rem .6rem; border-radius: .5rem; font-size: .82rem; color: var(--tinta); background: color-mix(in srgb, var(--ojo) 14%, transparent); border-left: 3px solid var(--ojo); }

/* ── Pídele a la IA que la mejore (13/10/2026) ─────────────────────────── */
/* «Pídele a la IA» (13/10/2026): las acciones a la vista, en Aprobar y en «Se quedaron en borrador». */
.pidele-titulo { margin: 0 0 .2rem; font-weight: 700; }
.pidele-accion { font: inherit; font-size: .82rem; padding: .3rem .65rem; border: 1px solid var(--papel-borde); border-radius: 999px; background: none; color: var(--tinta); cursor: pointer; }
.pidele-accion.destacada { border-color: currentColor; font-weight: 700; }
.quedadas .pidele-rapidas { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.propuesta .pidele { margin: .6rem 0; padding: .5rem .7rem; border: 1px dashed var(--papel-borde); border-radius: .6rem; }
.propuesta .pidele summary { cursor: pointer; font-weight: 700; }
.propuesta .pidele textarea { width: 100%; margin: .4rem 0; font: inherit; padding: .5rem; border: 1px solid var(--papel-borde); border-radius: .5rem; background: var(--papel); color: var(--tinta); }
.propuesta .pidele-rapidas { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.propuesta .pidele-rapida { font: inherit; font-size: .82rem; padding: .3rem .65rem; border: 1px solid var(--papel-borde); border-radius: 999px; background: none; color: var(--tinta); cursor: pointer; }
.propuesta .rehaciendo { margin: .5rem 0; font-size: .88rem; }

/* ── Aprobar: las que piden atención, juntas (13/10/2026) ─────────────── */
.filtro-atencion a b { margin-left: .25rem; font-variant-numeric: tabular-nums; }
.filtro-atencion a.filtro-ojo:not(.aqui) { border-color: var(--ojo); }
.propuesta .dudas-propuesta { margin: .5rem 0; padding: .45rem .65rem; border-radius: .5rem; border-left: 3px solid var(--ojo); background: color-mix(in srgb, var(--ojo) 10%, transparent); font-size: .88rem; }
.propuesta .dudas-propuesta summary { cursor: pointer; font-weight: 700; }
.propuesta .dudas-propuesta ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* Se quedaron en borrador (13/10/2026): las aprobadas que no salieron, con su salida. */
.quedadas { border-left: 4px solid var(--ojo); }
.quedadas-lista { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.quedadas-lista li { display: grid; gap: .25rem; padding: .6rem 0; border-top: 1px solid var(--papel-borde); }
.quedadas-lista .porque { color: var(--tinta-floja); font-size: .9em; }

/* «Pídele a la IA» en los borradores de Redacción (13/10/2026). */
.pidele-redaccion { margin: .4rem 0; }
/* Editar a mano el titular y la entradilla (30/10/2026). */
.editar-a-mano { margin: .4rem 0; flex-basis: 100%; }
.editar-a-mano summary { cursor: pointer; font-weight: 700; }
.editar-a-mano label { display: block; margin: .4rem 0; }
.editar-a-mano label span { display: block; font-size: .85rem; opacity: .8; }
.editar-a-mano textarea { width: 100%; font: inherit; padding: .4rem; border: 1px solid var(--papel-borde); border-radius: .5rem; background: var(--papel); color: var(--tinta); }
.pidele-redaccion summary { cursor: pointer; font-weight: 700; }
.pidele-redaccion textarea { width: 100%; margin: .4rem 0; font: inherit; padding: .4rem; border: 1px solid var(--papel-borde); border-radius: .5rem; background: var(--papel); color: var(--tinta); }
.pidele-redaccion .pidele-rapidas { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }

/* Las publicaciones de redes en Redacción (14/10/2026): traer a la cola y añadir a una nota abierta. */
.enlace-de-red, .traer-de-redes form { display: grid; gap: .45rem; margin: .8rem 0; padding: .75rem; border: 1px solid var(--papel-borde); border-radius: .55rem; }
.enlace-de-red input[type="url"], .traer-de-redes input[type="url"], .traer-de-redes select { width: 100%; box-sizing: border-box; }
.traer-de-redes label > span { display: block; font-size: .85rem; }
.traer-de-redes summary { cursor: pointer; font-weight: 600; margin: .5rem 0; }
.enlace-de-red button, .traer-de-redes button { justify-self: start; }

/* COMPARTIR (15/10/2026): el mensaje como llegará, su tarjeta y tres botones. */
.mensaje-para-compartir h2 { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.mensaje-para-compartir h2 .web { margin-left: auto; font-size: .85rem; font-weight: 600; color: inherit; opacity: .7; }
.mensaje-para-compartir .dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 1rem; align-items: start; }
.texto-del-mensaje { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; padding: .8rem 1rem; border-radius: .2rem .9rem .9rem .9rem; background: color-mix(in srgb, #25d366 12%, transparent); border: 1px solid color-mix(in srgb, #25d366 30%, transparent); }
.tarjeta-del-enlace img { display: block; width: 100%; height: auto; border-radius: .7rem; border: 1px solid var(--linea, #ccc); }
.botones-del-mensaje { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; }
.boton-compartir { font: inherit; font-weight: 700; font-size: .95rem; padding: .6rem 1.1rem; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; background: var(--acento); color: #1b1b1b; }
.boton-compartir.whatsapp { background: #25d366; color: #0b2e17; }
.boton-compartir.secundario { background: transparent; color: inherit; border: 1px solid var(--linea, #ccc); }
.boton-compartir.hecho { background: #1f9d55; color: #fff; }
@media (max-width: 700px) {
    .mensaje-para-compartir .dos-columnas { grid-template-columns: 1fr; }
    .boton-compartir { flex: 1 1 auto; text-align: center; }
}

/* ── Estadísticas rehecha (20/10/2026): periodos, los portales y qué es cada cifra ── */
.elegir-periodo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .5rem; }
.elegir-periodo .periodos { margin: 0; }
.elegir-periodo .a-medida { margin-left: 0; gap: .4rem; padding: .25rem .5rem; }
.elegir-periodo .a-medida.aqui { border-color: var(--tinta); }
.grupo-portales { --color-grupo: #0ea5e9; }
.grupo-procedencia { --color-grupo: #6366f1; }
.grupo-analytics { --color-grupo: #f97316; }
.grupo-que-es { --color-grupo: var(--tinta-floja); }
.que-es { margin: 0 0 .4rem; font-size: .82rem; }
.fuente { color: var(--tinta-floja); font-style: italic; }
table.portales-periodo th[scope="row"] a { color: inherit; }
table.portales-periodo td.num { vertical-align: top; }
table.portales-periodo thead th[title] { cursor: help; }
.leyenda-columnas, .glosario dl { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: .35rem 1rem; margin: .8rem 0 0; font-size: .85rem; }
.leyenda-columnas dt, .glosario dt { font-weight: 700; }
.leyenda-columnas dd, .glosario dd { margin: 0; color: var(--tinta); }
.glosario h3 { margin: 1.2rem 0 .2rem; font-size: 1rem; }
@media (max-width: 640px) {
    .leyenda-columnas, .glosario dl { grid-template-columns: 1fr; gap: .1rem; }
    .leyenda-columnas dd, .glosario dd { margin-bottom: .5rem; }
}

/* Las listas de Matomo en Estadísticas (21/10/2026): dos columnas en el ordenador, una en el móvil. */
.listas-matomo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 1rem; }

/* Efemérides: la que ya se pidió a la IA (21/10/2026), para no pedirla dos veces. */
.etiqueta-redactada { display: inline-block; padding: 0 .4rem; border-radius: .4rem; font-size: .72rem; font-weight: 700; color: var(--tinta); background: color-mix(in srgb, #6366f1 18%, transparent); border: 1px solid color-mix(in srgb, #6366f1 55%, transparent); }

/* La bandeja de redacción (21/10/2026): hilos de correo de todos los portales. */
.lista-de-correo { list-style: none; margin: 0; padding: 0; }
.lista-de-correo li { border-bottom: 1px solid var(--papel-borde); }
.lista-de-correo li.abierto { background: color-mix(in srgb, var(--ojo) 8%, transparent); }
.lista-de-correo a { display: grid; gap: .15rem; padding: .7rem .2rem; color: var(--tinta); text-decoration: none; }
.lista-de-correo .correo-cabeza { font-size: .82rem; color: var(--tinta-floja); }
.lista-de-correo .correo-cabeza b { color: var(--tinta); }
.lista-de-correo .correo-asunto { font-weight: 700; text-decoration: underline; text-decoration-color: var(--papel-borde); }
.lista-de-correo .correo-resumen { font-size: .9rem; color: var(--tinta-floja); overflow-wrap: anywhere; }
.lista-de-correo .correo-pie { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; color: var(--tinta-floja); }
/* La estrella de «importante» (28/10/2026): al lado de cada hilo, del tamaño del pulgar. */
.lista-de-correo li { display: flex; align-items: flex-start; gap: .3rem; }
.lista-de-correo li > a { flex: 1; min-width: 0; }
.lista-de-correo li.importante { box-shadow: inset 3px 0 0 var(--ojo); }
.estrella { margin: 0; }
.estrella button { min-width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; background: none; font-size: 1.35rem; line-height: 1; color: var(--tinta-floja); cursor: pointer; }
.estrella button.marcada { color: var(--ojo); }
.hilo-titulo { display: flex; align-items: flex-start; gap: .3rem; }
.hilo-titulo h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.orden-de-la-bandeja { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; margin: -.4rem 0 1rem; font-size: .88rem; color: var(--tinta-floja); }
.orden-de-la-bandeja a { padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--papel-borde); color: var(--tinta); text-decoration: none; }
.orden-de-la-bandeja a.aqui { color: var(--fondo); background: var(--tinta); border-color: var(--tinta); }
.hilo-datos { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; margin: 0 0 1rem; }
.mensajes-del-hilo { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .8rem; }
.mensaje { border: 1px solid var(--papel-borde); border-radius: .6rem; padding: .7rem .9rem; }
.mensaje.nuestro { border-left: 4px solid var(--bien); margin-left: 1.2rem; }
.mensaje.suyo { border-left: 4px solid var(--ojo); }
.mensaje-quien { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; margin: 0 0 .4rem; font-size: .88rem; overflow-wrap: anywhere; }
.mensaje-texto { overflow-wrap: anywhere; }
.responder textarea, .responder input[type="text"] { width: 100%; box-sizing: border-box; margin: .2rem 0 .7rem; }
.vista-previa-correo { width: 100%; min-height: 32rem; border: 1px solid var(--papel-borde); border-radius: .6rem; background: #fff; }

/* Aprobar: cada portal del recuento filtra sus propuestas (21/10/2026). */
.recuento li .filtro-portal { display: flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.recuento li.aqui { outline: 2px solid var(--tinta); outline-offset: 1px; }

/* ───────────────────────────────── carrusel de Instagram (22/10/2026) ──────
 | Cada carrusel en su caja, con su color (ámbar el del finde, azul el de la
 | semana) y su estado en una etiqueta. Al volver de un botón se cae en su caja,
 | que se marca un momento: el aviso va dentro, no arriba del todo.
 */
.uno-de-los-carruseles {
    margin: 1rem 0;
    padding: .75rem 1rem;
    border-left: 6px solid #b45309;
    border-radius: 6px;
    background: rgba(180, 83, 9, .06);
    scroll-margin-top: 8rem;
}
.uno-de-los-carruseles.de-la-semana { border-left-color: #0369a1; background: rgba(3, 105, 161, .06); }
.uno-de-los-carruseles:target { outline: 3px solid var(--bien); outline-offset: 2px; }
.uno-de-los-carruseles h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 0 0 .4rem; font-size: 1.15rem; color: #b45309; }
.uno-de-los-carruseles.de-la-semana h3 { color: #0369a1; }
.uno-de-los-carruseles h3 small { font-size: .9rem; font-weight: 500; color: var(--tinta-floja); }
.uno-de-los-carruseles h3 [class^="etiqueta-"] { font-size: .8rem; padding: .05rem .5rem; }
.uno-de-los-carruseles .que-se-puede { margin: 0 0 .7rem; }
.uno-de-los-carruseles .hecho { margin: 0 0 .7rem; font-weight: 600; }
.uno-de-los-carruseles .espera { margin: .6rem 0 0; }
.uno-de-los-carruseles .laminas { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; }
.uno-de-los-carruseles .laminas img { flex: none; border-radius: 4px; }
.uno-de-los-carruseles .planes li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.uno-de-los-carruseles .planes li .cuantas { grid-column: 1; }
.uno-de-los-carruseles .planes li form { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.uno-de-los-carruseles .planes .quitar { min-height: 2.4rem; padding: .3rem .7rem; font-size: .85rem; }
.uno-de-los-carruseles .acciones-carrusel { margin-top: .8rem; }
.uno-de-los-carruseles .acciones-carrusel textarea { width: 100%; }
.uno-de-los-carruseles.a-medida { border-left-color: #7c3aed; background: rgba(124, 58, 237, .06); }
.uno-de-los-carruseles.a-medida h3 { color: #6d28d9; }
.uno-de-los-carruseles .puntos-a-medida { padding-left: 1.2rem; margin: .6rem 0; }
.uno-de-los-carruseles .puntos-a-medida li { margin-bottom: .8rem; }
.uno-de-los-carruseles .puntos-a-medida input, .uno-de-los-carruseles .puntos-a-medida textarea { width: 100%; }
.hacer-a-medida { margin-top: 1rem; border: 1px dashed #7c3aed; border-radius: 8px; padding: .6rem .9rem; }
.hacer-a-medida summary { cursor: pointer; font-weight: 700; color: #6d28d9; }
.hacer-a-medida form { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid rgba(124, 58, 237, .2); }
.hacer-a-medida input[type="url"], .hacer-a-medida input[type="text"], .hacer-a-medida select { width: 100%; }
.hacer-a-medida .fechas-a-medida { display: flex; gap: .8rem; flex-wrap: wrap; }
.uno-de-los-carruseles details { margin: .4rem 0; }
.uno-de-los-carruseles > form { margin-top: .6rem; }
.espera[hidden] { display: none; }
.uno-de-los-carruseles .antes { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .85rem; color: var(--tinta-floja); }
.uno-de-los-carruseles .hacer-otro { margin-top: .9rem; padding: .7rem .8rem; border: 1px dashed var(--papel-borde); border-radius: .6rem; }
.uno-de-los-carruseles .hacer-otro p { margin: 0 0 .5rem; }
.uno-de-los-carruseles .hacer-otro .explica { margin: .5rem 0 0; font-size: .85rem; }

/* Las páginas de otras webs que nos mandan visitas (26/10/2026): direcciones largas, en el móvil también. */
table.webs-paginas td a { overflow-wrap: anywhere; }

/* ═══ El menú (28/10/2026): todo el panel encima de la pantalla, a un toque ═══ */
.menu-del-panel {
    width: min(46rem, calc(100% - 2rem)); max-height: min(88vh, 52rem);
    margin: 5vh auto auto; padding: 0 1rem 1rem; border: 1px solid var(--papel-borde); border-radius: 1rem;
    background: var(--fondo); color: var(--tinta); overflow-y: auto; overscroll-behavior: contain;
}
.menu-del-panel::backdrop { background: rgb(0 0 0 / .55); }
.menu-cabeza { position: sticky; top: 0; z-index: 1; display: flex; gap: .5rem; padding: 1rem 0 .6rem; background: var(--fondo); }
.menu-cabeza input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: .7rem .9rem; border-radius: .7rem; border: 1px solid var(--papel-borde); background: var(--papel); color: var(--tinta); }
.menu-cerrar { flex: none; min-height: 2.9rem; padding: .4rem .9rem; border-radius: .7rem; border: 1px solid var(--papel-borde); background: transparent; color: var(--tinta-floja); font: inherit; font-weight: 600; cursor: pointer; }
.menu-del-panel h3 { margin: .9rem 0 .4rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-floja); }
.menu-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .4rem; }
.menu-lista a { display: flex; align-items: center; gap: .55rem; min-height: 2.9rem; padding: .5rem .7rem; border-radius: .7rem; border: 1px solid var(--papel-borde); background: var(--papel); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .92rem; }
.menu-lista a:hover, .menu-lista a:focus-visible { border-color: var(--tinta-floja); }
.menu-lista .icono, .menu-lista .logo { flex: none; }
.menu-lista .logo { border-radius: .3rem; }
.menu-lista li[hidden], .menu-del-panel section[hidden] { display: none; }
/* Lo más usado, en el color de la casa: es lo primero que se busca con el dedo. */
.menu-usadas .menu-lista a { border-color: color-mix(in srgb, #e8a33d 55%, var(--papel-borde)); }
.menu-usadas .menu-lista .icono { color: #e8a33d; }
@media (max-width: 640px) {
    /* En el móvil, a toda la pantalla, y dos por fila. */
    .menu-del-panel { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0;
        padding: 0 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
    .menu-cabeza { padding-top: max(1rem, env(safe-area-inset-top)); }
    .menu-lista { grid-template-columns: 1fr 1fr; }
}

/* Contratos de Melilla (28/10/2026): cuánto encaja, en una píldora de color; el plazo abierto, en verde. */
.encaje { display: inline-block; padding: 0 .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.encaje-3 { background: var(--bien); color: #fff; }
.encaje-2 { background: var(--ojo); color: #fff; }
.encaje-1, .encaje-0 { border: 1px solid var(--papel-borde); color: var(--tinta-floja); }
.lista-contratos .plazo-abierto { color: var(--bien); font-weight: 700; }
.marcas-contrato { display: flex; flex-wrap: wrap; gap: .4rem; }
.marcas-contrato .boton-accion { border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .85rem; }
.fuentes-contratos { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .35rem; }
.fuentes-contratos li { padding-left: .6rem; border-left: 3px solid var(--bien); font-size: .9rem; overflow-wrap: anywhere; }
.fuentes-contratos li.mal { border-left-color: var(--mal); }
.fuentes-contratos li > a { font-weight: 700; }
.fuentes-contratos .porque { display: block; font-size: .8rem; color: var(--tinta-floja); }
.fuentes-contratos li.mal .porque { color: var(--mal); }

/* Contratos (28/10/2026, tarde): ciudades, buscador, estrella, importes y vistas por organismo y empresa. */
.ciudades-contratos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .6rem; }
.ciudades-contratos a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--papel-borde); text-decoration: none; color: var(--tinta); font-weight: 700; font-size: .88rem; }
.ciudades-contratos a.aqui { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.ciudades-contratos .numero, .subpestanas .numero { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 999px; background: var(--ojo); color: #fff; font-size: .72rem; text-align: center; }
.buscador-contratos .fila-busca { display: flex; gap: .5rem; }
.buscador-contratos input[type=search] { flex: 1; min-width: 0; padding: .55rem .7rem; font: inherit; border: 1px solid var(--papel-borde); border-radius: .5rem; background: var(--fondo); color: var(--tinta); }
.buscador-contratos .fila-busca .boton-accion { margin-top: 0; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.buscador-contratos details { margin-top: .5rem; }
.buscador-contratos summary { cursor: pointer; font-size: .9rem; color: var(--tinta-floja); }
.filtros-contratos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; margin-top: .5rem; }
.filtros-contratos label { display: grid; gap: .2rem; font-size: .8rem; color: var(--tinta-floja); }
.filtros-contratos select, .filtros-contratos input { padding: .45rem; font: inherit; font-size: .9rem; border: 1px solid var(--papel-borde); border-radius: .45rem; background: var(--fondo); color: var(--tinta); min-width: 0; }
.lista-contratos li { position: relative; }
.lista-contratos .cabeza-alerta { padding-right: 2.6rem; }
.lista-contratos li.destacado { background: color-mix(in srgb, var(--ojo) 8%, transparent); }
.lista-contratos .ciudad { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.lista-contratos .estrella { position: absolute; top: .35rem; right: .4rem; margin: 0; }
.lista-contratos .estrella button { width: 2.4rem; height: 2.4rem; border: 0; background: transparent; font-size: 1.45rem; line-height: 1; cursor: pointer; color: var(--ojo); }
.lista-contratos .importes { display: flex; flex-wrap: wrap; gap: .1rem .8rem; }
.lista-contratos a.filtra { color: inherit; text-decoration: underline dotted; }
.grupos-contratos { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.grupos-contratos li { display: grid; grid-template-columns: 1fr auto; gap: 0 .6rem; padding: .45rem .2rem; border-bottom: 1px solid var(--papel-borde); overflow-wrap: anywhere; }
.grupos-contratos li > a { font-weight: 700; }
.grupos-contratos .porque { grid-column: 1; font-size: .8rem; color: var(--tinta-floja); }
.grupos-contratos strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }

/* Fotos de lectores (28/10/2026): la foto a la izquierda y lo suyo a la derecha; en el móvil, una encima de otra. */
.foto-de-lector-cuerpo { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.foto-de-lector-imagen img { display: block; width: 100%; height: auto; border-radius: .6rem; border: 1px solid var(--papel-borde); background: var(--papel); }
.foto-de-lector-imagen p { margin: .4rem 0 0; }
.foto-de-lector-datos form { display: grid; gap: .6rem; }
@media (max-width: 40rem) {
    .foto-de-lector-cuerpo { grid-template-columns: 1fr; }
}

/* Carnés de prensa (29/10/2026): acreditaciones.php */
.persona-carnes { display: flex; gap: .8rem; align-items: flex-start; }
.persona-carnes img { border-radius: .4rem; object-fit: cover; flex: none; border: 1px solid var(--papel-borde); }
.persona-carnes p { margin: 0; }
.carnes-chips, .mis-carnes { list-style: none; margin: .6rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.carnes-chips li, .mis-carnes li { display: flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--papel-borde); font-size: .82rem; }
.mis-carnes { flex-direction: column; }
.mis-carnes li { border-radius: .6rem; flex-wrap: wrap; }
.mis-carnes li a { margin-left: .4rem; font-weight: 600; }
.carnes-chips li.bien, .mis-carnes li.bien { border-color: var(--bien); }
.carnes-chips li.ojo, .mis-carnes li.ojo { border-color: var(--ojo); }
.carnes-chips li.mal, .mis-carnes li.mal { border-color: var(--mal); opacity: .75; }
.tarjeta.persona .acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.en-linea { display: inline; margin: 0; }
.formulario { display: grid; gap: .6rem; max-width: 34rem; margin: .8rem 0; }
.formulario label { display: grid; gap: .2rem; font-size: .85rem; }
.formulario label.casilla, .portales-casillas label { display: flex; align-items: center; gap: .4rem; }
.portales-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .3rem .8rem; border: 1px solid var(--papel-borde); border-radius: .6rem; padding: .6rem .8rem; }
.portales-casillas legend { font-size: .85rem; padding: 0 .3rem; }
button.peligro { color: var(--mal); }

/* Ordenar las listas de Redacción (30/10/2026). */
.ordenar-lista { margin: .5rem 0; }
.ordenar-lista label { display: flex; align-items: center; gap: .5rem; }
.ordenar-lista select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--papel-borde); border-radius: .5rem; background: var(--papel); color: var(--tinta); }

/*
 | EL SEGUIMIENTO DEL CARRUSEL (1/11/2026): el resumen de /carrusel.php. Cada
 | fila lleva al carrusel en la vista de su portal: el portal y el tipo arriba,
 | el título debajo, y la fecha y las redes al lado.
 */
.lista-seguimiento li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.lista-seguimiento li > a { flex: 1 1 18rem; min-width: 0; display: grid; gap: .1rem; color: var(--tinta); text-decoration: none; }
.lista-seguimiento li > a:hover .titulo-carrusel, .lista-seguimiento li > a:focus-visible .titulo-carrusel { text-decoration: underline; }
.lista-seguimiento .que { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-floja); }
.lista-seguimiento .titulo-carrusel { font-weight: 600; overflow-wrap: anywhere; }
.lista-seguimiento .cuantas { font-size: .85rem; color: var(--tinta-floja); }
.lista-seguimiento .red-carrusel { font-size: .75rem; }
.lista-seguimiento .detalle-seguimiento { flex: 1 1 100%; font-size: .82rem; color: var(--tinta-floja); overflow-wrap: anywhere; }
.lista-seguimiento .detalle-seguimiento.etiqueta-ojo { flex: 0 1 auto; }
.seguimiento-carrusel h3 { margin: 1rem 0 .5rem; font-size: 1rem; }
/* El menú de la pantalla del carrusel (1/11/2026): una tarjeta aparte, para no confundirlo con las subpestañas del grupo. */
.menu-carrusel { display: grid; gap: .6rem; margin: 0 0 1rem; padding: .6rem; border: 1px solid var(--papel-borde); border-radius: .8rem; background: var(--papel); }
.vistas-carrusel { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .2rem; border-radius: .65rem; background: var(--fondo); }
.vistas-carrusel a { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.6rem; border-radius: .5rem; font-weight: 700; text-decoration: none; color: var(--tinta-floja); }
.vistas-carrusel a.aqui { background: var(--tinta); color: var(--fondo); }
.vistas-carrusel .numero { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 999px; background: var(--ojo); color: #fff; font-size: .72rem; text-align: center; }
.portales-carrusel { margin: 0; }
.portales-carrusel a.sin-contestar { color: var(--tinta-floja); border-style: dashed; }
.indice-carrusel { margin: 0; flex-wrap: nowrap; gap: .35rem; overflow-x: auto; scrollbar-width: none; }
.indice-carrusel::-webkit-scrollbar { display: none; }
.indice-carrusel a { flex: 0 0 auto; min-height: 2.2rem; padding: 0 .7rem; border-radius: 999px; background: var(--fondo); font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.seguimiento-carrusel h3 { text-transform: none; letter-spacing: 0; color: var(--tinta-floja); }
.cada-portal-carrusel a.que { color: var(--tinta); }
.datos-portal-carrusel { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: 0; font-size: .85rem; }
.datos-portal-carrusel dt { color: var(--tinta-floja); }
.datos-portal-carrusel dd { margin: 0; overflow-wrap: anywhere; }

/* Fototeca (2/11/2026): subir fotos y vídeos del iPhone. Ver public/fototeca.php. */
.subir-a-la-fototeca form { display: grid; gap: .8rem; max-width: 40rem; }
.elegir-archivos { display: grid; place-items: center; gap: .4rem; padding: 1.4rem 1rem; border: 2px dashed var(--papel-borde); border-radius: .8rem; text-align: center; cursor: pointer; }
.elegir-archivos span { font-weight: 700; font-size: 1.05rem; }
.elegir-archivos input { max-width: 100%; font: inherit; font-size: .85rem; }
.cola-de-subida { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cola-de-subida:empty { display: none; }
.subida { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .7rem; align-items: start; padding: .55rem; border: 1px solid var(--papel-borde); border-left-width: 4px; border-radius: .6rem; }
.subida.bien { border-left-color: var(--bien); }
.subida.mal { border-left-color: var(--mal); }
.subida-vista { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; font-size: 1.8rem; border-radius: .4rem; overflow: hidden; background: var(--papel); }
.subida-vista img { width: 100%; height: 100%; object-fit: cover; }
.subida-datos p { margin: 0 0 .2rem; overflow-wrap: anywhere; }
.subida-datos progress { width: 100%; height: .5rem; }
.subida-ficha p { margin: .2rem 0 0; }
.foto-de-lector-datos details summary { cursor: pointer; font-weight: 700; margin-top: .4rem; }

/*
 | EFEMÉRIDES POR ESTADO Y POR MES (3/11/2026): los botones de estado, con su
 | cuenta, y el mes que se quiera ver.
 */
.filtro-estado { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.filtro-estado a { padding: .25rem .7rem; border: 1px solid var(--papel-borde); border-radius: 999px; color: var(--tinta); text-decoration: none; font-size: .85rem; }
.filtro-estado a b { font-weight: 700; opacity: .7; margin-left: .2rem; }
.filtro-estado a.aqui { color: var(--fondo); background: var(--tinta); border-color: var(--tinta); }
.elegir-mes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0; font-size: .85rem; }
.elegir-mes input[type="month"] { font: inherit; padding: .2rem .4rem; }
.etiqueta-programada { display: inline-block; padding: 0 .4rem; border-radius: .4rem; font-size: .72rem; font-weight: 700; color: var(--tinta); background: color-mix(in srgb, #0ea5e9 18%, transparent); border: 1px solid color-mix(in srgb, #0ea5e9 55%, transparent); }

/* Avisos: todas las opciones en cada uno (4/11/2026). */
.avisos-dia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.avisos-dia form { margin: 0; }
.avisos-dia .boton-accion, .avisos-quitar-lista .boton-accion, .aviso-opciones .boton-accion { margin-top: 0; border: 0; cursor: pointer; font: inherit; font-size: .82rem; min-height: 2.2rem; padding: .3rem .8rem; }
.avisos-dia .boton-accion.flojo, .avisos-quitar-lista .boton-accion.flojo, .aviso-opciones .boton-accion.flojo { border: 1px solid var(--papel-borde); }
.avisos-quitar-lista { margin: .2rem 0 .8rem; }
.aviso-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .7rem .2rem; }
.avisos li.nuevo .aviso-opciones { margin-left: .9rem; }
.aviso-opciones .otro-portal { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--tinta-floja); }
.aviso-opciones select { min-height: 2.2rem; border-radius: 999px; padding: 0 .6rem; background: transparent; color: var(--tinta); border: 1px solid var(--papel-borde); font: inherit; font-size: .82rem; }