/* ============================================================
   Fuentes (autohospedadas: sin llamadas a servicios externos)
   ============================================================ */
@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/estatico/fuentes/AtkinsonHyperlegible-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/estatico/fuentes/AtkinsonHyperlegible-Bold.woff2") format("woff2");
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/estatico/fuentes/AtkinsonHyperlegible-Italic.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/estatico/fuentes/JetBrainsMono-Variable.woff2") format("woff2");
}

/* ============================================================
   Tokens de diseño — tema claro por defecto, oscuro automático
   según las preferencias del sistema (prefers-color-scheme).
   ============================================================ */
:root {
    --fuente-principal: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --fuente-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Identidad: verde (#1E4C3A) y ámbar. Sin ningún tono azul, ni
       siquiera en los grises: los neutros llevan un sesgo verde para que
       se lean como elegidos y no como un gris de fábrica. */
    --color-fondo: #edf2ef;
    --color-superficie: #ffffff;
    --color-superficie-hundida: #f4f8f5;
    --color-borde: #d6e0da;
    --color-borde-fuerte: #b3c2b9;
    --color-texto: #0f1a15;
    --color-texto-suave: #4a5952;
    --color-texto-tenue: #85958c;

    --color-primario: #1e4c3a;
    --color-primario-hover: #15382a;
    --color-primario-suave: #e2ede7;
    --color-acento: #9c6316;
    --color-acento-suave: #faf0df;

    /* Colores de estado: el rojo del error se mantiene a propósito
       aunque la identidad sea verde/ámbar. Un error pintado de verde
       deja de leerse como un error, y el éxito ya usa un verde más
       saturado y claro que el verde de marca para no confundirse. */
    --color-exito: #0f7a54;
    --color-exito-fondo: #e4f4ec;
    --color-error: #b42318;
    --color-error-fondo: #fef3f2;
    --color-aviso: #8a5a0b;
    --color-aviso-fondo: #fbf1dd;

    --radio: 10px;
    --radio-pequeno: 6px;
    --sombra: 0 1px 2px rgba(15, 26, 21, .06), 0 1px 3px rgba(15, 26, 21, .08);
    --sombra-flotante: 0 12px 32px rgba(15, 26, 21, .22);

    /* A diferencia del diseño anterior, la barra lateral ya NO mantiene un
       fondo oscuro fijo en los dos temas: sigue al tema como el resto de
       la interfaz. Es la única forma de que el logo pedido en modo día
       (#1E4C3A, verde oscuro) se vea — sobre el azul marino de antes
       habría quedado invisible. */
    --barra-fondo: #f2f7f4;
    --barra-fondo-hover: #e3ede7;
    --barra-fondo-activo: #d7e7de;
    --barra-texto: #3c4b44;
    --barra-texto-suave: #7b8c83;
    --barra-texto-activo: #1e4c3a;
    --barra-borde: #d6e0da;
    --barra-acento: #9c6316;

    /* Color del logotipo y de las letras "FENOLL". */
    --logo-color: #1e4c3a;

    /* Fronteras del mapa: oscuras sobre los rellenos claros del tema día. */
    --mapa-linea-ccaa: rgba(15, 26, 21, .50);
    --mapa-linea-provincia: rgba(15, 26, 21, .34);
    --mapa-linea-municipio: rgba(15, 26, 21, .26);

    --ancho-barra-colapsada: 4.25rem;
    --ancho-barra-expandida: 15.5rem;
}

/* Modo noche. Se define dos veces a propósito, con los MISMOS valores:
   - dentro del @media, para quien no ha elegido tema y lo hereda del
     sistema (excluyendo a quien sí eligió "claro" a mano);
   - en [data-tema="oscuro"], para que el botón de la barra lateral gane
     también cuando el sistema está en claro.
   Si se toca un valor aquí, hay que tocarlo en los dos bloques. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --color-fondo: #0e1512;
        --color-superficie: #19221e;
        --color-superficie-hundida: #131b17;
        --color-borde: #2a3831;
        --color-borde-fuerte: #3c4e44;
        --color-texto: #e6ede9;
        --color-texto-suave: #a7b5ad;
        --color-texto-tenue: #74857b;

        --color-primario: #6fbf97;
        --color-primario-hover: #92d3b1;
        --color-primario-suave: #1b3227;
        --color-acento: #e0a867;
        --color-acento-suave: #33260f;

        --color-exito: #52c791;
        --color-exito-fondo: #12301f;
        --color-error: #f0897d;
        --color-error-fondo: #3a1613;
        --color-aviso: #e2b04d;
        --color-aviso-fondo: #33280c;

        --barra-fondo: #131b17;
        --barra-fondo-hover: #1e2a23;
        --barra-fondo-activo: #26362d;
        --barra-texto: #c2d0c8;
        --barra-texto-suave: #7e9187;
        --barra-texto-activo: #ffffff;
        --barra-borde: #253129;
        --barra-acento: #c7853f;

        --logo-color: #f2f7f4;

        /* Aclaradas respecto al tema día: sobre rellenos oscuros una
           frontera negra desaparece. */
        --mapa-linea-ccaa: rgba(230, 237, 233, .42);
        --mapa-linea-provincia: rgba(230, 237, 233, .28);
        --mapa-linea-municipio: rgba(230, 237, 233, .20);

        --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .6);
        --sombra-flotante: 0 16px 40px rgba(0, 0, 0, .55);
    }
}

:root[data-tema="oscuro"] {
    --color-fondo: #0e1512;
    --color-superficie: #19221e;
    --color-superficie-hundida: #131b17;
    --color-borde: #2a3831;
    --color-borde-fuerte: #3c4e44;
    --color-texto: #e6ede9;
    --color-texto-suave: #a7b5ad;
    --color-texto-tenue: #74857b;

    --color-primario: #6fbf97;
    --color-primario-hover: #92d3b1;
    --color-primario-suave: #1b3227;
    --color-acento: #e0a867;
    --color-acento-suave: #33260f;

    --color-exito: #52c791;
    --color-exito-fondo: #12301f;
    --color-error: #f0897d;
    --color-error-fondo: #3a1613;
    --color-aviso: #e2b04d;
    --color-aviso-fondo: #33280c;

    --barra-fondo: #131b17;
    --barra-fondo-hover: #1e2a23;
    --barra-fondo-activo: #26362d;
    --barra-texto: #c2d0c8;
    --barra-texto-suave: #7e9187;
    --barra-texto-activo: #ffffff;
    --barra-borde: #253129;
    --barra-acento: #c7853f;

    --logo-color: #f2f7f4;

    --mapa-linea-ccaa: rgba(230, 237, 233, .42);
    --mapa-linea-provincia: rgba(230, 237, 233, .28);
    --mapa-linea-municipio: rgba(230, 237, 233, .20);

    --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .6);
    --sombra-flotante: 0 16px 40px rgba(0, 0, 0, .55);
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: light dark;
    /* Los enlaces del panel de marcadores saltan a anclas "#p-N" nativas
       del navegador (ver marcadores_web.py): con esto el salto queda
       animado en vez de un corte brusco. */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--fuente-principal);
    background: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.5;
    font-size: 15px;
}

a {
    color: var(--color-primario);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
}
code {
    font-family: var(--fuente-mono);
}

/* ============================================================
   Estructura general: barra lateral + contenido
   ============================================================ */
.app {
    display: flex;
    min-height: 100vh;
}
.app.app-sin-sesion {
    display: block;
}

.contenido {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.75rem 2rem 3rem;
}
.contenido-ancho {
    max-width: 1440px;
}
.contenido-sin-sesion {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   Barra lateral
   ============================================================ */
.barra-lateral {
    flex: 0 0 auto;
    width: var(--ancho-barra-colapsada);
    background: var(--barra-fondo);
    color: var(--barra-texto);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    transition: width 0.16s ease;
    font-family: var(--fuente-principal);
    z-index: 20;
}
.barra-lateral.expandida {
    width: var(--ancho-barra-expandida);
}

.bl-logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    height: 3.75rem;
    flex: 0 0 auto;
    padding: 0 1.15rem;
    color: var(--barra-texto-activo);
    border-bottom: 1px solid var(--barra-borde);
}
.bl-logo:hover {
    text-decoration: none;
    background: var(--barra-fondo-hover);
}
.bl-logo-icono {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    color: var(--logo-color);
}
.bl-logo-completo {
    display: none;
    font-family: var(--fuente-mono);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.09em;
    color: var(--logo-color);
}
.barra-lateral.expandida .bl-logo-completo {
    display: inline;
}

.bl-reloj {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--barra-borde);
    flex: 0 0 auto;
    font-family: var(--fuente-principal);
    color: var(--barra-texto);
}
.bl-hora {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.bl-fecha {
    display: none;
    font-size: 0.7rem;
    color: var(--barra-texto-suave);
    white-space: nowrap;
}
.barra-lateral.expandida .bl-reloj {
    align-items: flex-start;
    padding: 0.75rem 1.15rem;
}
.barra-lateral.expandida .bl-fecha {
    display: inline;
}

.bl-nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0.6rem 0;
    overflow-y: auto;
}
/* Vale tanto para los <a> de navegación como para los <button> del pie
   (usuario y tema), de ahí los reinicios de botón. */
.bl-enlace {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 2.75rem;
    padding: 0 1.28rem;
    color: var(--barra-texto);
    white-space: nowrap;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--fuente-principal);
    cursor: pointer;
}
.bl-enlace:hover {
    background: var(--barra-fondo-hover);
    text-decoration: none;
    color: var(--barra-texto-activo);
}
.bl-enlace.activo {
    background: var(--barra-fondo-activo);
    color: var(--barra-texto-activo);
    border-left-color: var(--barra-acento);
}
.bl-icono {
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 auto;
}
.bl-etiqueta {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.1s ease;
}
.barra-lateral.expandida .bl-etiqueta {
    opacity: 1;
    width: auto;
    overflow: visible;
}

.bl-pie {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    border-top: 1px solid var(--barra-borde);
    padding: 0.4rem 0;
}
/* Botón de usuario: el propio nombre es el botón, y al pulsarlo despliega
   el menú con "Cerrar sesión" (punto 53). El menú se ancla al envoltorio,
   no a la barra, para que salga a la altura del botón esté esta expandida
   o contraída. */
.bl-usuario-envoltorio {
    position: relative;
}
.bl-usuario-boton .bl-etiqueta {
    overflow: hidden;
    text-overflow: ellipsis;
}
.bl-usuario-menu {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 0.5rem;
    min-width: 12rem;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-flotante);
    padding: 0.4rem;
    z-index: 40;
}
.bl-usuario-menu[hidden] {
    display: none;
}
.bl-usuario-menu-nombre {
    margin: 0 0 0.3rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    color: var(--color-texto-tenue);
    border-bottom: 1px solid var(--color-borde);
    overflow: hidden;
    text-overflow: ellipsis;
}
.bl-usuario-menu-salir {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: none;
    border-radius: var(--radio-pequeno);
    color: var(--color-texto);
    font-family: var(--fuente-principal);
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}
.bl-usuario-menu-salir:hover {
    background: var(--color-superficie-hundida);
    color: var(--color-error);
}
.bl-usuario-menu-salir svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

/* Botón de tema: se ve el sol cuando estás de noche (te lleva al día) y
   la luna cuando estás de día. Solo uno de los dos iconos está presente. */
.bl-tema .bl-icono-dia {
    display: none;
}
.bl-tema.en-noche .bl-icono-dia {
    display: block;
}
.bl-tema.en-noche .bl-icono-noche {
    display: none;
}

.bl-colapsar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 2.5rem;
    padding: 0 1.28rem;
    background: none;
    border: none;
    color: var(--barra-texto);
    font-family: var(--fuente-principal);
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.bl-colapsar:hover {
    background: var(--barra-fondo-hover);
    color: var(--barra-texto-activo);
}
.bl-colapsar .bl-icono {
    transition: transform 0.16s ease;
}
.barra-lateral.expandida .bl-colapsar .bl-icono {
    transform: rotate(180deg);
}

/* ============================================================
   Componentes comunes
   ============================================================ */
.pantalla-centrada {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fondo);
}

.tarjeta {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
}

.formulario-login {
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.formulario-login-icono {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.5rem;
    color: var(--color-primario);
}
.formulario-login h1 {
    font-family: var(--fuente-mono);
    letter-spacing: 0.09em;
    font-size: 1.3rem;
    margin: 0 0 0.25rem;
    text-align: center;
    color: var(--color-primario);
}
.formulario-login .subtitulo {
    font-size: 0.85rem;
    text-align: center;
    color: var(--color-texto-suave);
    margin: 0 0 1rem;
}
.formulario-login label {
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    margin-top: 0.5rem;
}
.formulario-login input {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    font-size: 0.95rem;
    background: var(--color-superficie);
    color: var(--color-texto);
    font-family: var(--fuente-principal);
}
.formulario-login .boton {
    margin-top: 1rem;
}

.boton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    font-size: 0.88rem;
    font-family: var(--fuente-principal);
    cursor: pointer;
    background: var(--color-superficie);
    color: var(--color-texto);
}
.boton:hover {
    background: var(--color-superficie-hundida);
    text-decoration: none;
}
.boton-primario {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: white;
}
.boton-primario:hover {
    background: var(--color-primario-hover);
    border-color: var(--color-primario-hover);
}

.enlace-boton {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primario);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
}
.enlace-boton:hover {
    text-decoration: underline;
}
.form-en-linea {
    display: inline;
}

.aviso-error {
    background: var(--color-error-fondo);
    color: var(--color-error);
    border-radius: var(--radio-pequeno);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    margin: 0 0 1rem;
}
.aviso-ok {
    background: var(--color-exito-fondo);
    color: var(--color-exito);
    border-radius: var(--radio-pequeno);
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    margin: 0 0 1rem;
}

/* Interruptor on/off */
.interruptor {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.6rem;
    height: 1.5rem;
    flex: 0 0 auto;
}
.interruptor input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.interruptor .pista {
    position: absolute;
    inset: 0;
    background: var(--color-borde-fuerte);
    border-radius: 999px;
    transition: background 0.15s ease;
}
.interruptor .bola {
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform 0.15s ease;
}
.interruptor input:checked ~ .pista {
    background: var(--color-exito);
}
.interruptor input:checked ~ .bola {
    transform: translateX(1.1rem);
}

/* Filtros */
.filtros {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}
.filtros .campo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.filtros label {
    font-size: 0.78rem;
    color: var(--color-texto-suave);
}
.filtros input, .filtros select {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    font-size: 0.88rem;
    background: var(--color-superficie);
    color: var(--color-texto);
    font-family: var(--fuente-principal);
}

/* Listado de anuncios (plano — se sigue usando en mapa/buscador) */
.lista-anuncios {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.anuncio-fila {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 0.9rem 1.1rem;
    box-shadow: var(--sombra);
}
.anuncio-fila .meta {
    font-size: 0.8rem;
    color: var(--color-texto-suave);
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}
.anuncio-fila .titulo {
    font-size: 1rem;
    font-weight: 600;
}
.anuncio-fila .titulo a {
    color: var(--color-texto);
}
.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}
.etiqueta {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    color: white;
    font-weight: 600;
}

.paginacion {
    display: flex;
    justify-content: space-between;
    margin-top: 1.25rem;
    font-size: 0.9rem;
}

.sin-resultados {
    text-align: center;
    color: var(--color-texto-suave);
    padding: 3rem 1rem;
}

/* ============================================================
   Lista (3 niveles: boletín > sección > anuncio)
   ============================================================ */
.lista-jerarquica {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.nivel-boletin {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
}
.nivel-boletin > summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1.1rem;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}
.nivel-boletin > summary::-webkit-details-marker {
    display: none;
}
.nivel-boletin > summary::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--color-texto-suave);
    border-bottom: 2px solid var(--color-texto-suave);
    transform: rotate(-45deg);
    transition: transform 0.12s ease;
    flex: 0 0 auto;
}
.nivel-boletin[open] > summary::before {
    transform: rotate(45deg);
}
.nivel-boletin > summary .codigo-boletin {
    font-family: var(--fuente-mono);
    color: var(--color-primario);
}
.nivel-boletin > summary .conteo {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--color-texto-suave);
}
.nivel-boletin-cuerpo {
    border-top: 1px solid var(--color-borde);
    padding: 0.35rem 1.1rem 0.6rem 1.85rem;
}
.nivel-seccion {
    border-bottom: 1px solid var(--color-borde);
}
.nivel-seccion:last-child {
    border-bottom: none;
}
.nivel-seccion > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-texto-suave);
    list-style: none;
}
.nivel-seccion > summary::-webkit-details-marker {
    display: none;
}
.nivel-seccion > summary::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--color-texto-tenue);
    border-bottom: 2px solid var(--color-texto-tenue);
    transform: rotate(-45deg);
    transition: transform 0.12s ease;
    flex: 0 0 auto;
}
.nivel-seccion[open] > summary::before {
    transform: rotate(45deg);
}
.nivel-anuncio {
    padding: 0.5rem 0 0.5rem 1.1rem;
    border-left: 2px solid var(--color-borde);
    margin: 0 0 0.35rem;
}
.nivel-anuncio:last-child {
    margin-bottom: 0.4rem;
}
.nivel-anuncio a {
    color: var(--color-texto);
    font-size: 0.92rem;
}
.nivel-anuncio .meta {
    display: block;
    font-size: 0.74rem;
    color: var(--color-texto-tenue);
    margin-top: 0.15rem;
}

/* Detalle de anuncio */
.encabezado-resumen {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--sombra);
}
.encabezado-resumen h1 {
    font-size: 1.3rem;
    margin: 0 0 0.5rem;
}
.encabezado-resumen dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    font-size: 0.88rem;
    margin: 0.75rem 0 0;
}
.encabezado-resumen dt {
    color: var(--color-texto-suave);
}
.encabezado-resumen dd {
    margin: 0;
}
.texto-anuncio {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.5rem;
    box-shadow: var(--sombra);
}
.texto-anuncio :first-child {
    margin-top: 0;
}
.enlace-mencion {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.fecha-citada {
    text-decoration: underline;
    text-decoration-color: var(--color-texto-tenue);
    text-underline-offset: 2px;
}
.enlace-ubicacion {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    color: var(--color-acento);
}
.enlace-mencion-editar {
    border: none;
    background: none;
    padding: 0 0.15rem;
    font-size: 0.75rem;
    color: var(--color-texto-tenue);
    cursor: pointer;
    vertical-align: super;
}
.enlace-mencion-editar:hover {
    color: var(--color-primario);
}

/* Miniatura de mapa flotante al pasar el ratón por una dirección (ver
   estatico/hipervinculos.js) */
.mapa-flotante {
    position: fixed;
    z-index: 300;
    width: 280px;
    height: 200px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-flotante);
    overflow: hidden;
    pointer-events: none;
}
.mapa-flotante iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.enlace-volver {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

/* Perfiles */
.perfil-desgloses {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.desglose {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem 1.25rem;
    min-width: 200px;
    flex: 1 1 220px;
}
.desglose h3 {
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    margin: 0 0 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.desglose ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}
.desglose li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.2rem 0;
}
.desglose .valor {
    color: var(--color-texto-suave);
    font-variant-numeric: tabular-nums;
}
.desglose-ancho {
    flex-basis: 100%;
    margin-bottom: 1.5rem;
}
.desglose-ancho ul {
    columns: 2;
    column-gap: 2rem;
}
.desglose-ancho li {
    break-inside: avoid;
}
.cifra-grande {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}
.cifra-grande .unidad {
    font-family: var(--fuente-principal);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-texto-suave);
}
.rol-badge {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    color: var(--color-primario);
    font-weight: 700;
}

/* ============================================================
   Mapa
   ============================================================ */
.mapa-split {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}
.mapa-panel-svg {
    flex: 0 0 auto;
    width: 800px;
    max-width: 62vw;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 0.5rem;
    position: relative;
    overflow: hidden;
}
.mapa-panel-svg svg {
    display: block;
    width: 100%;
    height: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.mapa-panel-svg svg.arrastrando {
    cursor: grabbing;
}
.mapa-controles-zoom {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.mapa-controles-zoom button {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radio-pequeno);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    box-shadow: var(--sombra);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-texto);
}
.mapa-controles-zoom button:hover {
    background: var(--color-superficie-hundida);
}
.mapa-atribucion {
    font-size: 0.7rem;
    color: var(--color-texto-suave);
    text-align: right;
    margin: 0.4rem 0.2rem 0;
}
.mapa-panel-lista {
    flex: 1 1 320px;
    min-width: 280px;
    max-height: 85vh;
    overflow-y: auto;
}
.mapa-panel-lista h1 {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}
.mapa-quitar-filtro {
    color: var(--color-texto-suave);
    text-decoration: none;
    font-size: 0.9rem;
}

.mapa-costa {
    fill: none;
    stroke: var(--color-borde-fuerte);
    stroke-width: 1;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}
.territorio {
    stroke: var(--mapa-linea-ccaa);
    stroke-width: 0.6;
    cursor: pointer;
    vector-effect: non-scaling-stroke;
}
.territorio:hover {
    opacity: 0.8;
}
.territorio-linea {
    stroke: var(--mapa-linea-provincia);
    stroke-width: 0.5;
    pointer-events: all;
}
.territorio-municipio {
    stroke: var(--mapa-linea-municipio);
    stroke-width: 0.35;
    pointer-events: all;
}
.territorio.seleccionado {
    stroke: var(--color-texto);
    stroke-width: 2;
}

.circulo-actividad {
    r: calc(var(--radio-base, 6px) * var(--escala, 1));
    fill: var(--color-primario);
    opacity: 0.78;
    stroke: var(--color-superficie);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}
.circulo-actividad:hover {
    opacity: 1;
}
.circulo-actividad.seleccionado {
    stroke: var(--color-texto);
    stroke-width: 2.5;
}

.etiqueta-mapa {
    pointer-events: none;
    fill: var(--color-texto);
    font-family: var(--fuente-principal);
    font-weight: 600;
    paint-order: stroke;
    stroke: var(--color-superficie);
    stroke-width: calc(2.5px * var(--escala, 1));
    stroke-linejoin: round;
}
/* Tamaños subidos respecto al diseño anterior: en pantalla resultaban
   demasiado pequeños para leerse de un vistazo. La opacidad también sube,
   porque el texto lleva un halo del color del fondo que ya lo separa del
   relleno sin necesidad de dejarlo pálido. */
.etiqueta-ccaa {
    font-size: calc(20px * var(--escala, 1));
    font-weight: 700;
    opacity: 0.82;
}
.etiqueta-provincia {
    font-size: calc(14px * var(--escala, 1));
    font-weight: 600;
    opacity: 0.85;
}
.etiqueta-municipio {
    font-size: calc(10px * var(--escala, 1));
    font-weight: 500;
    opacity: 0.9;
}

svg.mapa-svg[data-nivel="ccaa"] .territorio-linea,
svg.mapa-svg[data-nivel="ccaa"] .territorio-municipio,
svg.mapa-svg[data-nivel="ccaa"] .etiqueta-provincia,
svg.mapa-svg[data-nivel="ccaa"] .etiqueta-municipio,
svg.mapa-svg[data-nivel="ccaa"] .circulo-provincia,
svg.mapa-svg[data-nivel="ccaa"] .circulo-municipio {
    display: none;
}
svg.mapa-svg[data-nivel="provincia"] .territorio-municipio,
svg.mapa-svg[data-nivel="provincia"] .etiqueta-ccaa,
svg.mapa-svg[data-nivel="provincia"] .etiqueta-municipio,
svg.mapa-svg[data-nivel="provincia"] .circulo-ccaa,
svg.mapa-svg[data-nivel="provincia"] .circulo-municipio {
    display: none;
}
svg.mapa-svg[data-nivel="municipio"] .etiqueta-ccaa,
svg.mapa-svg[data-nivel="municipio"] .etiqueta-provincia,
svg.mapa-svg[data-nivel="municipio"] .circulo-ccaa,
svg.mapa-svg[data-nivel="municipio"] .circulo-provincia {
    display: none;
}

/* ============================================================
   Monitor: grid de 3 columnas
   ============================================================ */
.grid-monitor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.tarjeta-monitor {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem 1.1rem;
}
.tarjeta-monitor.pausado {
    opacity: 0.6;
}
.tm-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.tm-interruptor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.tm-etiqueta-pausado {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-error);
}
.tm-etiqueta-ambito {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--color-primario-suave);
    color: var(--color-primario);
}
.tm-nombre {
    margin: 0.5rem 0 0.15rem;
    font-size: 1.02rem;
    font-weight: 700;
}
.tm-nombre a {
    color: var(--color-texto);
}
.tm-codigo {
    font-family: var(--fuente-mono);
    font-size: 0.76rem;
    color: var(--color-texto-suave);
}
.tm-datos {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-borde);
    font-size: 0.78rem;
    color: var(--color-texto-suave);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.tm-datos .num {
    color: var(--color-texto);
    font-weight: 600;
}
.tm-detalle {
    margin-top: 0.6rem;
}
.tm-detalle > summary {
    font-size: 0.78rem;
    color: var(--color-primario);
    cursor: pointer;
    list-style: none;
}
.tm-detalle > summary::-webkit-details-marker {
    display: none;
}
.tm-detalle-cuerpo {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--color-borde);
}

/* Programación (dentro de la tarjeta de Monitor) */
.form-programacion {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    margin: 0.5rem 0;
}
.campo-dias label {
    display: block;
    font-size: 0.78rem;
    color: var(--color-texto-suave);
    margin-bottom: 0.25rem;
}
.dias-semana {
    display: flex;
    gap: 0.35rem;
}
.dia-checkbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.72rem;
    color: var(--color-texto-suave);
    gap: 0.15rem;
    cursor: pointer;
}
.boton-pausar {
    background: var(--color-error-fondo);
    color: var(--color-error);
    border-color: var(--color-error-fondo);
}

/* Cobertura */
.calendario-anual {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.calendario-mes {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 0.6rem;
    border-collapse: collapse;
    width: 100%;
}
.calendario-mes caption {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    text-align: left;
}
.calendario-mes th {
    font-size: 0.65rem;
    color: var(--color-texto-suave);
    font-weight: 400;
    padding: 1px;
}
.calendario-mes td {
    text-align: center;
    font-size: 0.72rem;
    padding: 3px 1px;
    border-radius: 3px;
    color: var(--color-texto-suave);
}
.calendario-mes td.dia-cubierto {
    background: var(--color-exito);
    color: white;
    font-weight: 600;
}
.calendario-mes td.dia-pendiente {
    background: var(--color-aviso);
    color: white;
    font-weight: 600;
}
.calendario-mes td.dia-cubierto a, .calendario-mes td.dia-pendiente a {
    color: inherit;
    text-decoration: none;
    display: block;
}
.calendario-mes td.dia-vacio {
    background: none;
}

/* ============================================================
   Importar
   ============================================================ */
/* Dos tarjetas iguales: pegar enlaces y subir archivos. Los pendientes
   ya no son una tarjeta más, sino la subsección de abajo. */
.panel-importar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}
.subseccion-importar {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-borde);
}
.subseccion-importar > h2 {
    font-size: 1.15rem;
    margin: 0 0 0.3rem;
}
.cabecera-pendientes {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 0.75rem;
}
.resumen-pendientes {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: var(--color-texto-suave);
}
.dato-pendientes strong {
    color: var(--color-texto);
    font-size: 1.1rem;
    margin-right: 0.25rem;
}
.filtro-anio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}
.leyenda-calendario {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--color-texto-suave);
    margin: 0 0 0.75rem;
}
.muestra-dia {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 3px;
    display: inline-block;
}
.leyenda-calendario .muestra-dia:not(:first-child) {
    margin-left: 0.9rem;
}
.muestra-dia.dia-cubierto {
    background: var(--color-exito);
}
.muestra-dia.dia-pendiente {
    background: var(--color-aviso);
}
/* El día abierto se resalta con un anillo para no perderlo de vista al
   volver del listado de abajo. */
.calendario-mes td.dia-elegido {
    outline: 2px solid var(--color-texto);
    outline-offset: 1px;
}
.caja-enlace textarea {
    width: 100%;
    min-height: 6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    font-family: var(--fuente-mono);
    font-size: 0.85rem;
    resize: vertical;
    background: var(--color-superficie);
    color: var(--color-texto);
}
.zona-importar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 2px dashed var(--color-borde-fuerte);
    border-radius: var(--radio);
    background: var(--color-superficie-hundida);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--color-texto-suave);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.zona-importar:hover, .zona-importar.sobre-zona {
    border-color: var(--color-primario);
    background: var(--color-primario-suave);
}
.zona-importar svg {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.5rem;
    color: var(--color-texto-tenue);
}
.zona-importar input[type="file"] {
    display: none;
}
.lista-importados {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.item-importado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}
.item-importado .num {
    color: var(--color-texto-suave);
    font-size: 0.75rem;
}

.cola-cendoj {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
}
.item-cendoj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--color-superficie-hundida);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    padding: 0.65rem 0.85rem;
}
.item-cendoj-datos {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.item-cendoj-datos .meta {
    margin: 0;
}
.form-cendoj-subida {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.form-cendoj-subida input[type="file"] {
    max-width: 180px;
    font-size: 0.78rem;
}
.etiqueta-estado {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-top: 0.2rem;
    text-decoration: none;
}
.etiqueta-estado:hover {
    text-decoration: underline;
}
.etiqueta-completo {
    background: var(--color-exito-fondo);
    color: var(--color-exito);
}

.texto-sentencia {
    font-size: 0.95rem;
    line-height: 1.7;
}
.texto-sentencia p {
    margin: 0 0 0.75rem;
}
.cita-sentencia {
    background: var(--color-primario-suave);
    border-bottom: 2px solid var(--color-primario);
    border-radius: 2px;
    padding: 0 0.1rem;
}

/* ============================================================
   Inicio (home)
   ============================================================ */
.saludo-inicio {
    margin-bottom: 1.5rem;
}
.saludo-inicio h1 {
    font-size: 1.5rem;
    margin: 0 0 0.15rem;
}
.saludo-inicio p {
    color: var(--color-texto-suave);
    margin: 0;
}
.metricas-inicio {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}
/* Columna flexible para que el pie quede pegado abajo en las cuatro
   tarjetas por igual, aunque una tenga el título en dos líneas. */
.metrica {
    display: flex;
    flex-direction: column;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem 1.15rem;
}
.metrica h3 {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-texto-suave);
    font-weight: 600;
}
.metrica .cifra-grande {
    margin-top: auto;
}
.metrica-pie {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: var(--color-texto-tenue);
}
.cifra-hora {
    font-family: var(--fuente-mono);
    letter-spacing: -0.02em;
}

/* "stretch" y no "start": con "start" cada columna se quedaba con su
   altura natural y la de Actividad reciente sobresalía por debajo de la
   de Accesos rápidos. */
.inicio-columnas {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}
.inicio-columnas .panel-inicio {
    display: flex;
    flex-direction: column;
}
.panel-inicio {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
}
.panel-inicio h2 {
    font-size: 1rem;
    margin: 0 0 0.9rem;
}
.accesos-rapidos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.acceso-rapido {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radio-pequeno);
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
}
.acceso-rapido:hover {
    background: var(--color-superficie-hundida);
    text-decoration: none;
}
.acceso-rapido svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-primario);
    flex: 0 0 auto;
}

@media (max-width: 1100px) {
    .calendario-anual {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-monitor {
        grid-template-columns: repeat(2, 1fr);
    }
    .metricas-inicio {
        grid-template-columns: repeat(2, 1fr);
    }
    .inicio-columnas {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .panel-importar {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Panel de marcadores del margen derecho (sentencias del CENDOJ y
   anuncios): pestaña fija siempre visible, panel oculto hasta que se
   pulsa (ver marcadores.js y la macro panel_marcadores en _macros.html).
   ============================================================ */
.marcadores-pestana {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
    background: var(--color-superficie);
    color: var(--color-texto-suave);
    border: 1px solid var(--color-borde);
    border-right: none;
    border-radius: var(--radio-pequeno) 0 0 var(--radio-pequeno);
    box-shadow: var(--sombra);
    cursor: pointer;
    font-family: var(--fuente-principal);
    font-size: 0.8rem;
    z-index: 25;
}
.marcadores-pestana:hover, .marcadores-pestana.activa {
    color: var(--color-primario);
    border-color: var(--color-borde-fuerte);
}
.marcadores-pestana svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    transform: rotate(180deg);
}

.panel-marcadores {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 280px;
    background: var(--color-superficie);
    border-left: 1px solid var(--color-borde);
    box-shadow: var(--sombra-flotante);
    padding: 1rem;
    overflow-y: auto;
    z-index: 26;
}
.panel-marcadores[hidden] {
    display: none;
}
.panel-marcadores-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.panel-marcadores-cabecera h2 {
    font-size: 1rem;
    margin: 0;
}
.panel-marcadores-cerrar {
    background: none;
    border: none;
    color: var(--color-texto-suave);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
}
.panel-marcadores-cerrar:hover {
    color: var(--color-texto);
}
#marcadores-boton-anadir {
    width: 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
}
#marcadores-boton-anadir.activa {
    background: var(--color-primario-suave);
    border-color: var(--color-primario);
    color: var(--color-primario);
}
.marcadores-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.marcador-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    border-radius: var(--radio-pequeno);
}
.marcador-item a {
    flex: 1 1 auto;
    padding: 0.4rem 0.5rem;
    color: var(--color-texto);
    font-size: 0.88rem;
    border-radius: var(--radio-pequeno);
}
.marcador-item a:hover {
    background: var(--color-superficie-hundida);
    text-decoration: none;
    color: var(--color-primario);
}
/* Sangría del árbol del índice: libro > título > capítulo > sección >
   artículo en una norma; sección > punto numerado en una resolución. Los
   niveles altos van además más discretos, para que la vista rápida se
   quede con la estructura y no con el detalle. */
.marcador-nivel-1 a { padding-left: 1.1rem; }
.marcador-nivel-2 a { padding-left: 1.8rem; font-size: 0.84rem; }
.marcador-nivel-3 a { padding-left: 2.5rem; font-size: 0.82rem; }
.marcador-nivel-4 a { padding-left: 3.2rem; font-size: 0.8rem; color: var(--color-texto-suave); }
.marcador-nivel-0 a { font-weight: 600; }
.marcador-borrar {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--color-texto-tenue);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}
.marcador-borrar:hover {
    color: var(--color-error);
}

/* Al añadir un marcador a mano, cada párrafo del texto se resalta al
   pasar el ratón por encima para dejar claro dónde va a anclar. */
.contenedor-marcable.marcadores-modo-anadir p {
    cursor: pointer;
    border-radius: 2px;
}
.contenedor-marcable.marcadores-modo-anadir p:hover {
    background: var(--color-primario-suave);
    outline: 2px dashed var(--color-primario);
    outline-offset: 2px;
}

/* ============================================================
   Buscador: macro secciones, barra de filtros y buscador booleano.
   La estructura la genera la taxonomía (busqueda/taxonomia.py), así que
   estos estilos valen para cualquier filtro que se añada allí.
   ============================================================ */
.cabecera-pantalla {
    margin-bottom: 1.25rem;
}
.cabecera-pantalla h1 {
    font-size: 1.5rem;
    margin: 0 0 0.3rem;
}
/* Sin max-width: el párrafo acompaña al ancho de la página y termina a
   la altura de las tarjetas, no a media pantalla. */
.cabecera-pantalla p {
    margin: 0;
    color: var(--color-texto-suave);
    font-size: 0.92rem;
}

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

.macro-secciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: 1rem;
}
.macro-seccion {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-texto-suave);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.macro-seccion:hover {
    color: var(--color-texto);
    text-decoration: none;
    background: var(--color-superficie-hundida);
}
.macro-seccion.activa {
    color: var(--color-primario);
    border-bottom-color: var(--color-primario);
}

.panel-buscador {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
}

.buscador-booleano {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}
.buscador-lupa {
    position: absolute;
    left: 0.7rem;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-texto-tenue);
    pointer-events: none;
}
.buscador-booleano input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.7rem 0.6rem 2.3rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-family: var(--fuente-principal);
    font-size: 0.92rem;
}
.ayuda-booleana-boton {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto-suave);
    cursor: pointer;
    font-weight: 700;
}
.ayuda-booleana-boton:hover {
    color: var(--color-primario);
    border-color: var(--color-primario);
}
.ayuda-booleana {
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: var(--color-primario-suave);
    border-radius: var(--radio-pequeno);
    font-size: 0.85rem;
}
.ayuda-booleana[hidden] { display: none; }
.ayuda-booleana p { margin: 0 0 0.4rem; }
.ayuda-booleana ul { margin: 0; padding-left: 1.1rem; }
.ayuda-booleana li { margin-bottom: 0.2rem; }
.ayuda-booleana code {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
}

.filtros-seccion {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}
.campo-filtro {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.campo-filtro[hidden] { display: none; }
.campo-filtro-etiqueta {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
    color: var(--color-texto-suave);
}
.campo-filtro-ayuda {
    font-size: 0.74rem;
    color: var(--color-texto-tenue);
    line-height: 1.35;
}

.entrada-texto,
.rango-fecha input,
.rango-importe input {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-family: var(--fuente-principal);
    font-size: 0.88rem;
}
.rango-fecha, .rango-importe {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.rango-fecha input { font-family: var(--fuente-mono); font-size: 0.82rem; }
.rango-fecha-separador { color: var(--color-texto-tenue); flex: 0 0 auto; }

/* Barra de dos extremos: dos <input range> superpuestos, con el carril
   dibujado una sola vez debajo. */
.barra-rango {
    position: relative;
    height: 1.4rem;
    margin-top: 0.15rem;
}
.barra-rango::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    transform: translateY(-50%);
    background: var(--color-borde);
    border-radius: 3px;
}
.barra-rango input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    height: 1.4rem;
}
.barra-rango input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--color-primario);
    border: 2px solid var(--color-superficie);
    cursor: grab;
}
.barra-rango input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--color-primario);
    border: 2px solid var(--color-superficie);
    cursor: grab;
}

.desplegable { position: relative; }
.desplegable-boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-family: var(--fuente-principal);
    font-size: 0.88rem;
    cursor: pointer;
    text-align: left;
}
.desplegable-boton:hover:not(:disabled) { border-color: var(--color-borde-fuerte); }
.desplegable-boton:disabled { opacity: 0.55; cursor: not-allowed; }
.desplegable-boton svg { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; color: var(--color-texto-tenue); }
.desplegable-resumen {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-texto-tenue);
}
.desplegable-resumen.con-seleccion {
    color: var(--color-primario);
    font-weight: 600;
}
.desplegable-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 100%;
    max-width: 22rem;
    max-height: 20rem;
    overflow-y: auto;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    box-shadow: var(--sombra-flotante);
    padding: 0.4rem;
    z-index: 30;
}
.desplegable-panel[hidden] { display: none; }
.desplegable-buscar {
    width: 100%;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.35rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    background: var(--color-superficie-hundida);
    color: var(--color-texto);
    font-family: var(--fuente-principal);
    font-size: 0.82rem;
}
.opcion-filtro {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.28rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}
.opcion-filtro:hover { background: var(--color-superficie-hundida); }
.opcion-filtro[hidden] { display: none; }
.opcion-filtro input { margin-top: 0.18rem; flex: 0 0 auto; accent-color: var(--color-primario); }
.opcion-filtro.nivel-1 { padding-left: 1.4rem; font-size: 0.82rem; color: var(--color-texto-suave); }
.opcion-filtro.nivel-2 { padding-left: 2.4rem; font-size: 0.8rem; color: var(--color-texto-suave); }

.cascada-territorio {
    margin-top: 0.35rem;
    border-top: 1px solid var(--color-borde);
    padding-top: 0.35rem;
}
.cascada-territorio[hidden] { display: none; }
.cascada-nivel summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
}
.cascada-nivel summary::-webkit-details-marker { display: none; }
.cascada-nivel > details, .cascada-nivel .cascada-municipios { padding-left: 0.9rem; }
.cascada-municipios { max-height: 12rem; overflow-y: auto; }

.acciones-buscador {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-borde);
}
.resumen-resultados { margin-bottom: 0.75rem; }

.seccion-sin-datos {
    background: var(--color-superficie);
    border: 1px dashed var(--color-borde-fuerte);
    border-radius: var(--radio);
    padding: 2rem 1.5rem;
    text-align: center;
}
.seccion-sin-datos h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.seccion-sin-datos p { margin: 0 auto 0.4rem; max-width: 54ch; color: var(--color-texto-suave); }

/* Árbol CPV dentro del filtro de contratación. */
.cpv-arbol, .cpv-resultados { max-height: 16rem; overflow-y: auto; }
.cpv-arbol[hidden], .cpv-resultados[hidden] { display: none; }
.cpv-fila { display: flex; align-items: flex-start; gap: 0.1rem; }
.cpv-fila .opcion-filtro { flex: 1 1 auto; min-width: 0; }
.cpv-desplegar {
    flex: 0 0 auto;
    width: 1.1rem;
    padding: 0.28rem 0;
    background: none;
    border: none;
    color: var(--color-texto-tenue);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1.4;
}
.cpv-desplegar:hover { color: var(--color-primario); }
.cpv-hueco { cursor: default; }
.cpv-codigo {
    font-family: var(--fuente-mono);
    font-size: 0.76rem;
    background: var(--color-superficie-hundida);
    border-radius: 3px;
    padding: 0 0.25rem;
    margin-right: 0.25rem;
}
.cpv-fila.nivel-division > .opcion-filtro { font-weight: 700; }
.cpv-fila.nivel-grupo > .opcion-filtro { font-weight: 600; }
.cpv-ruta {
    display: block;
    font-size: 0.72rem;
    color: var(--color-texto-tenue);
    margin-top: 0.1rem;
}
.cpv-cargando {
    margin: 0;
    padding: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-texto-tenue);
}
.cpv-resultado { align-items: flex-start; }

/* ============================================================
   Monitores: tarjetas de formato idéntico agrupadas por jerarquía.
   ============================================================ */
.filtros-monitor {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
}

.grupo-monitor { margin-bottom: 1.75rem; }
.grupo-monitor h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-texto-suave);
    margin-bottom: 0.7rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-borde);
}

.rejilla-monitores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 0.85rem;
}
/* Columna flexible y altura común: todas las tarjetas se ven iguales
   aunque el nombre de una ocupe dos líneas y el de otra una. */
.tarjeta-monitor {
    display: flex;
    flex-direction: column;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 0.9rem 1rem;
}
.tarjeta-monitor.sin-construir {
    border-style: dashed;
    background: var(--color-superficie-hundida);
}
.tarjeta-monitor-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.etiqueta-grupo {
    font-family: var(--fuente-mono);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-texto-tenue);
}
.tarjeta-monitor-nombre {
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.3;
}
.tarjeta-monitor-siglas {
    margin: 0.15rem 0 0;
    font-family: var(--fuente-mono);
    font-size: 0.74rem;
    color: var(--color-texto-tenue);
}
.tarjeta-monitor-datos {
    display: flex;
    gap: 1rem;
    margin: 0.75rem 0 0;
    flex-wrap: wrap;
}
.tarjeta-monitor-datos dt {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-texto-tenue);
}
.tarjeta-monitor-datos dd {
    margin: 0.1rem 0 0;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}
.tarjeta-monitor-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.85rem;
}
.boton-horario { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
.boton-horario.activo {
    background: var(--color-primario-suave);
    border-color: var(--color-primario);
    color: var(--color-primario);
}

.interruptor-monitor {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
}
.interruptor-pista {
    display: block;
    width: 2.15rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--color-borde-fuerte);
    position: relative;
    transition: background 0.15s ease;
}
.interruptor-pista::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--color-superficie);
    transition: transform 0.15s ease;
}
.interruptor-monitor.encendido .interruptor-pista { background: var(--color-exito); }
.interruptor-monitor.encendido .interruptor-pista::after { transform: translateX(0.9rem); }

.panel-horario {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-borde);
}
.panel-horario[hidden] { display: none; }
.dias-semana {
    border: none;
    padding: 0;
    margin: 0 0 0.6rem;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.dias-semana legend {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-texto-tenue);
    margin-bottom: 0.3rem;
}
.dia { cursor: pointer; }
.dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dia span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    border: 1px solid var(--color-borde);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-texto-tenue);
}
.dia input:checked + span {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: white;
}
.dia input:focus-visible + span { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.campos-horario {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    font-size: 0.78rem;
    color: var(--color-texto-suave);
}
.campos-horario input {
    display: block;
    margin-top: 0.15rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-family: var(--fuente-principal);
    font-size: 0.82rem;
}
.campos-horario input[type="number"] { width: 4.5rem; }

/* Distintivos de estado, compartidos por Monitores y otras pantallas. */
.insignia {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--fuente-mono);
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
}
.insignia-activo { background: var(--color-exito-fondo); color: var(--color-exito); }
.insignia-pendiente { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.insignia-info { background: var(--color-primario-suave); color: var(--color-primario); }

/* Recuadros de Canarias, Ceuta y Melilla: van a otra escala que la
   península, así que se enmarcan para que se lea que son insets. */
.marco-inset {
    fill: none;
    stroke: var(--color-borde-fuerte);
    stroke-width: 1;
    stroke-dasharray: 3 2;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}
.etiqueta-inset {
    fill: var(--color-texto-tenue);
    font-family: var(--fuente-principal);
    font-size: calc(9px * var(--escala, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    pointer-events: none;
}
.aviso-sin-construir {
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.6rem;
    background: var(--color-aviso-fondo);
    color: var(--color-aviso);
    border-radius: var(--radio-pequeno);
    font-size: 0.76rem;
    line-height: 1.35;
}
.organos-arbol, .organos-resultados { max-height: 18rem; overflow-y: auto; }
.organos-arbol[hidden], .organos-resultados[hidden] { display: none; }

/* ============================================================
   Mandos: tabla de usuarios y log de operaciones
   ============================================================ */
.tabla-usuarios, .tabla-log {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    /* Con muchas columnas la tabla puede no caber: que se desplace ella,
       nunca la página entera. */
    overflow-x: auto;
    margin-top: 0.75rem;
}
.tabla-usuarios table, .tabla-log table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.tabla-usuarios th, .tabla-log th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-texto-suave);
    font-weight: 600;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-borde);
    white-space: nowrap;
}
.tabla-usuarios td, .tabla-log td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-borde);
    vertical-align: middle;
}
.tabla-usuarios tr:last-child td, .tabla-log tr:last-child td {
    border-bottom: none;
}
.tabla-log td code {
    font-family: var(--fuente-mono);
    font-size: 0.78rem;
    color: var(--color-primario);
    white-space: nowrap;
}
.tabla-usuarios .form-en-linea {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.tabla-usuarios .form-en-linea input {
    width: 12rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-size: 0.82rem;
}
.acciones-usuario {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.campo-casilla {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    align-self: flex-end;
    padding-bottom: 0.35rem;
}

/* ============================================================
   Mapa: barra de filtros y marcadores de sede
   ============================================================ */
.filtros-mapa {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.grupo-filtro-mapa {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.grupo-filtro-ancho {
    flex: 1 1 20rem;
}
.grupo-filtro-titulo {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-texto-suave);
    font-weight: 600;
}
.opciones-en-linea {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.filtros-mapa .campo-casilla {
    align-self: flex-start;
    padding-bottom: 0;
    font-size: 0.85rem;
}
.filtros-mapa .rango-fecha {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.filtros-mapa input[type="date"] {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-size: 0.82rem;
    font-family: inherit;
}

/* Marcadores de sede: un pin por organismo, en el centroide de su
   municipio. Se multiplican por --escala igual que las etiquetas y los
   círculos: el pin señala un punto, así que tiene que verse del mismo
   tamaño en pantalla acerques lo que acerques. El factor es pequeño a
   propósito -en la vista de toda España hay más de 400 pines y con un
   tamaño mayor taparían el mapa entero-. */
.marcador-sede {
    cursor: pointer;
}
.marcador-sede > * {
    transform: scale(calc(var(--escala, 1) * 0.55));
    transform-origin: 0 0;
    transform-box: view-box;
}
.marcador-gota {
    fill: var(--color-primario);
    stroke: white;
    stroke-width: 0.8;
}
.marcador-punto {
    fill: white;
}
.marcador-sede:hover .marcador-gota {
    fill: var(--color-acento);
}
/* Un color por grupo para distinguirlos de un vistazo sin leyenda. */
.marcador-empresas .marcador-gota { fill: var(--color-acento); }
.marcador-juzgados .marcador-gota { fill: #6d28d9; }
.marcador-otros_entes .marcador-gota { fill: #0f766e; }

/* ============================================================
   Fichas: pestañas y lista de documentos que citan
   ============================================================ */
.pestanas-ficha {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-borde);
    margin: 1.25rem 0 1rem;
}
.pestana-ficha {
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    color: var(--color-texto-suave);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    /* El borde inferior se solapa con el de la barra, para que la pestaña
       activa parezca continuar con el contenido de debajo. */
    margin-bottom: -1px;
}
.pestana-ficha:hover {
    color: var(--color-texto);
    text-decoration: none;
}
.pestana-ficha.activa {
    color: var(--color-primario);
    border-bottom-color: var(--color-primario);
    font-weight: 600;
}
.pestana-ficha .conteo {
    font-family: var(--fuente-mono);
    font-size: 0.72rem;
    background: var(--color-superficie-hundida);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    margin-left: 0.2rem;
}

.filtros-citas {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.filtros-citas input[type="date"],
.filtros-citas select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-size: 0.82rem;
    font-family: inherit;
}
.lista-citas {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.item-cita {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 0.75rem 1rem;
}
.item-cita-datos {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.item-cita-datos > a {
    font-weight: 600;
}
.contexto-cita {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    font-style: italic;
    /* El contexto es una pista, no el documento: dos líneas bastan. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aviso de correcciones/modificaciones posteriores en la ficha de un
   anuncio (punto 54). Va en ámbar, no en rojo: no es un error, es una
   advertencia de que el texto de abajo no está consolidado. */
.aviso-correcciones {
    background: var(--color-aviso-fondo);
    border: 1px solid var(--color-aviso);
    border-radius: var(--radio);
    padding: 0.9rem 1.1rem;
    margin: 1.25rem 0;
}
.aviso-correcciones h2 {
    font-size: 0.95rem;
    margin: 0 0 0.3rem;
    color: var(--color-aviso);
}
.aviso-correcciones ul {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.aviso-correcciones li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

/* Índice por artículos de una norma (pestaña "Índice" de su ficha). */
.indice-norma {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem 1.25rem;
}
.indice-norma h3 {
    font-size: 0.9rem;
    margin: 1rem 0 0.4rem;
    color: var(--color-primario);
}
.indice-norma h3:first-child {
    margin-top: 0;
}
.indice-articulo {
    display: flex;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-borde);
}
.indice-articulo:last-child {
    border-bottom: none;
}
.indice-articulo span {
    color: var(--color-texto-suave);
}

/* Edición de hipervínculos por el administrador (punto 68): quitar un
   enlace mal detectado y crear el que falte. */
.enlace-mencion-quitar {
    border: none;
    background: none;
    color: var(--color-error);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0 0.15rem;
    opacity: 0.45;
}
.enlace-mencion-quitar:hover {
    opacity: 1;
}
.panel-enlace-manual {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 60;
    width: min(26rem, calc(100vw - 3rem));
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: 0 8px 30px rgba(15, 26, 21, 0.18);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.panel-enlace-manual h3 {
    margin: 0;
    font-size: 0.95rem;
}
.panel-enlace-manual input[type="search"] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-size: 0.88rem;
    font-family: inherit;
}
.resultados-enlace {
    max-height: 16rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.resultado-enlace {
    text-align: left;
    border: none;
    background: none;
    color: var(--color-texto);
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radio-pequeno);
    cursor: pointer;
}
.resultado-enlace:hover {
    background: var(--color-superficie-hundida);
}

/* Demarcaciones judiciales (punto 42): se ven sobre el relleno de la
   comunidad, con su propio borde marcado, para leer de un vistazo dónde
   empieza y acaba cada partido sin perder de vista en qué provincia cae. */
.partido-judicial {
    /* Sin `stroke`: ver el comentario de `geo.render`. El color de relleno
       lo pone cada partido, derivado del de su provincia. */
    stroke: none;
    pointer-events: all;
    cursor: pointer;
}
.partido-judicial:hover {
    opacity: 0.75;
}
/* El nombre del partido solo cabe cuando ya se ha acercado: en la vista
   de toda España, 431 etiquetas taparían el mapa. */
.etiqueta-partido {
    font-size: calc(13px * var(--escala, 1));
    display: none;
}
.mapa-svg[data-nivel="provincia"] .etiqueta-partido,
.mapa-svg[data-nivel="municipio"] .etiqueta-partido {
    display: block;
}

/* Texto consolidado de una norma, bloque a bloque (punto 55). */
.bloque-norma {
    scroll-margin-top: 1rem;
}
.bloque-encabezado {
    margin-top: 1.5rem;
}
.texto-norma .encabezado-norma,
.texto-norma p.centro_negrita,
.texto-norma p.articulo {
    font-weight: 600;
}
/* Aviso bajo el artículo de qué reforma dejó su redacción actual: en
   ámbar y en cuerpo pequeño, para que se lea como una nota al pie y no
   compita con el articulado. */
.reformas-articulo {
    margin: 0.35rem 0 1rem;
    padding-left: 0.7rem;
    border-left: 3px solid var(--color-aviso);
    font-size: 0.82rem;
    color: var(--color-texto-suave);
}
.indice-articulo .insignia {
    margin-left: auto;
}

/* ============================================================
   Ficha de contrato: la línea de fases (punto 59)
   ============================================================
   Es el recorrido del portal de contratación resumido a cinco pasos. La
   fase alcanzada se distingue por relleno del punto y grosor del texto,
   no solo por color, para que se lea igual sin distinguir tonos. */
.fases-contrato {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.15rem 1rem 1rem;
    margin: 1.25rem 0;
    overflow-x: auto;
}
.fases-contrato ol {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 34rem;
}
.fases-contrato .fase {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    padding: 0 0.4rem;
}
/* La línea que une un paso con el siguiente se dibuja detrás del punto,
   no como borde de la lista, para que el último paso no arrastre una
   línea que no lleva a ninguna parte. */
.fases-contrato .fase::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--color-borde);
}
.fases-contrato .fase:first-child::before { display: none; }
.fases-contrato .fase-punto {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--color-borde-fuerte);
    background: var(--color-superficie);
    position: relative;
    z-index: 1;
}
.fases-contrato .fase-etiqueta {
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}
.fases-contrato .fase-fecha,
.fases-contrato .fase-nota {
    font-size: 0.74rem;
    color: var(--color-texto-tenue);
}
.fases-contrato .fase-fecha { font-family: var(--fuente-mono); }

.fases-contrato .fase-hecha .fase-punto {
    background: var(--color-primario);
    border-color: var(--color-primario);
}
.fases-contrato .fase-hecha ~ .fase::before,
.fases-contrato .fase-actual::before { background: var(--color-primario); }
.fases-contrato .fase-hecha .fase-etiqueta { color: var(--color-texto); }

/* La fase actual es el dato que se busca al abrir la ficha, así que es
   la única que va en ámbar y en negrita. */
.fases-contrato .fase-actual .fase-punto {
    background: var(--color-acento);
    border-color: var(--color-acento);
    box-shadow: 0 0 0 4px var(--color-acento-suave);
}
.fases-contrato .fase-actual .fase-etiqueta {
    color: var(--color-acento);
    font-weight: 700;
}
.fases-contrato .fase-actual ~ .fase::before { background: var(--color-borde); }

.fases-contrato .fase-cancelada .fase-punto {
    border-style: dashed;
    border-color: var(--color-texto-tenue);
}
.fases-contrato .fase-cancelada .fase-etiqueta {
    color: var(--color-texto-tenue);
    text-decoration: line-through;
}
/* Va después de la regla de ".fase-hecha ~ .fase" a propósito: un
   expediente desistido o anulado se publicó, pero de ahí no pasó, y la
   línea no debe seguir pintada como recorrida. */
.fases-contrato .fase-cancelada::before { background: var(--color-borde); }

/* ============================================================
   Ficha de edición: el cuerpo con la tipografía de la web (punto 60)
   ============================================================
   Lo que llega pegado de un procesador de textos trae su propia
   tipografía; `ediciones.adaptar_formato` la quita y deja solo lo que
   significa algo (negritas, subrayados, listas, numeración). Aquí se
   pone la de la web, que es la misma para todas las ediciones. */
.texto-edicion {
    display: block;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 2rem 2.25rem;
    margin-top: 1.25rem;
    font-family: var(--fuente-principal);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-texto);
}
.texto-edicion > *:first-child { margin-top: 0; }
.texto-edicion > *:last-child { margin-bottom: 0; }

.texto-edicion p {
    margin: 0 0 1.1rem;
    text-align: justify;
    /* Un texto justificado sin partición deja ríos de espacio; el
       navegador parte las palabras según el idioma de la página. */
    hyphens: auto;
}
.texto-edicion h2,
.texto-edicion h3,
.texto-edicion h4 {
    margin: 2rem 0 0.75rem;
    line-height: 1.3;
    color: var(--color-texto);
}
.texto-edicion h2 { font-size: 1.3rem; }
.texto-edicion h3 { font-size: 1.12rem; }
.texto-edicion h4 { font-size: 1rem; }

/* Lo que el punto 60 pide conservar. */
.texto-edicion strong { font-weight: 700; }
.texto-edicion em { font-style: italic; }
.texto-edicion u { text-decoration: underline; text-underline-offset: 0.15em; }
.texto-edicion s { text-decoration: line-through; }

.texto-edicion ul,
.texto-edicion ol {
    margin: 0 0 1.1rem;
    padding-left: 1.6rem;
}
.texto-edicion li { margin-bottom: 0.4rem; }
.texto-edicion li::marker { color: var(--color-texto-suave); }

.texto-edicion blockquote {
    margin: 1.25rem 0;
    padding: 0.25rem 0 0.25rem 1.1rem;
    border-left: 3px solid var(--color-primario-suave);
    color: var(--color-texto-suave);
}
.texto-edicion hr {
    border: 0;
    border-top: 1px solid var(--color-borde);
    margin: 2rem 0;
}
.texto-edicion img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radio-pequeno);
}
.texto-edicion figcaption {
    font-size: 0.85rem;
    color: var(--color-texto-tenue);
    margin-top: 0.35rem;
}
/* Una tabla ancha se desplaza dentro de su caja: la página nunca. */
.texto-edicion table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.1rem;
    font-size: 0.92rem;
}
.texto-edicion th,
.texto-edicion td {
    border: 1px solid var(--color-borde);
    padding: 0.45rem 0.6rem;
    text-align: left;
    vertical-align: top;
}
.texto-edicion th { background: var(--color-superficie-hundida); font-weight: 600; }

@media (max-width: 720px) {
    .texto-edicion { padding: 1.25rem 1.15rem; }
    .texto-edicion p { text-align: left; }
}

/* ============================================================
   Casilla de edición manual dentro de una ficha (punto 65)
   ============================================================
   Para los datos que ninguna fuente publica y tiene que escribir el
   administrador. Va dentro del encabezado de la ficha, en línea, para
   que se lea como una fila más y no como un formulario aparte. */
.formulario-en-linea {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--color-borde);
}
.formulario-en-linea label {
    font-size: 0.82rem;
    color: var(--color-texto-suave);
}
.formulario-en-linea input[type="text"] {
    width: 9rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-family: var(--fuente-mono);
    font-size: 0.85rem;
}
.formulario-en-linea .campo-filtro-ayuda {
    flex-basis: 100%;
}