/* Ajustes propios sobre Bootstrap 5.
   Todo lo que se pueda resolver con clases de Bootstrap se resuelve con clases
   de Bootstrap. Aquí solo va lo que Bootstrap no cubre.

   El sistema anterior tenía los estilos escritos dentro de cada página, en
   atributos style= de cada celda de tabla. Cambiar un color significaba tocar
   cientos de archivos. */

/* --- Tipografía ---------------------------------------------------------- */

html {
    font-size: 15px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Plus Jakarta Sans para todo y IBM Plex Mono para cifras y códigos: las de
   la marca DEMMA (ADR-109). Van servidas por el propio sistema y no desde
   Google Fonts: el servidor de un cliente puede no tener salida a internet. */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../lib/fuentes/plus-jakarta-sans/files/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("../lib/fuentes/plus-jakarta-sans/files/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../lib/fuentes/ibm-plex-mono/files/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../lib/fuentes/ibm-plex-mono/files/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root {
    --bs-font-sans-serif: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --bs-font-monospace: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-border-radius: 0.625rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 0.875rem;
}

body {
    font-family: var(--bs-font-sans-serif);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

h5, .h5, h6, .h6 {
    font-weight: 700;
}

/* Una cifra que se compara —un total, un indicador— va en la monoespaciada
   de la marca: los dígitos quedan alineados y se leen como dato. */
.numero-destacado {
    font-family: var(--bs-font-monospace);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* --- Foco visible -------------------------------------------------------- */
/* Se mantiene el anillo de foco en su lugar: hay personal que trabaja con el
   teclado y sin él no se sabe dónde se está parado.

   Va con el color de énfasis y no con el principal: el principal es el color
   tal cual lo eligió el hospital, y uno claro —un celeste, un amarillo— deja el
   anillo invisible sobre el fondo. El de énfasis está calculado justamente para
   leerse sobre el fondo, en los dos temas. */

:focus-visible {
    outline: 2px solid var(--bs-primary-text-emphasis);
    outline-offset: 2px;
}

/* --- Armazón de la página ------------------------------------------------ */
/* Dos columnas: la barra lateral fija a la izquierda y el contenido a la
   derecha. Por debajo de 992 px la barra desaparece y se abre por encima.

   El fondo de las páginas es gris y las tarjetas son blancas. Con todo blanco
   una tarjeta no se distingue del papel sobre el que está y la pantalla se lee
   como una sola mancha; el gris de fondo es lo que hace que cada bloque de
   información se vea como un bloque. */

:root {
    --sistema-ancho-de-la-barra: 16rem;
}

body {
    background-color: var(--bs-body-bg);
    min-height: 100vh;
}

.armazon {
    display: flex;
    min-height: 100vh;
}

.columna-principal {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0; /* sin esto una tabla ancha estira la columna y rompe el ancho */
}

/* Sin relleno propio: cada pantalla trae su container-fluid con el suyo, y
   sumar los dos deja el contenido flotando en medio de la nada. */
.contenido {
    flex: 1 1 auto;
}

.pie {
    padding: 1rem;
    border-top: 1px solid var(--sistema-borde);
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

@media (min-width: 992px) {
    .pie {
        padding: 1rem 1.75rem;
    }
}

/* --- Barra superior ------------------------------------------------------ */

.barra-superior {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;

    /* La lavanda de la página, un poco transparente y desenfocada detrás: la
       barra se lee como parte de la página y no como una franja blanca. */
    background-color: rgba(var(--bs-body-bg-rgb), 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sistema-borde);

    /* Se queda arriba al desplazar: en un listado largo, el nombre de la
       pantalla y el menú de la persona tienen que seguir a la vista. */
    position: sticky;
    top: 0;
    z-index: 1020;
}

@media (min-width: 992px) {
    .barra-superior {
        padding: 0.75rem 1.75rem;
    }
}

.barra-superior-titulo {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Barra lateral ------------------------------------------------------- */
/* Es oscura en los dos temas, teñida con el color del hospital. Los tonos los
   calcula PaletaDelSistema y llegan como variables. */

.barra-lateral {
    display: flex;
    flex-direction: column;
    background-color: var(--sistema-barra-fondo);
    color: var(--sistema-barra-texto);
}

@media (min-width: 992px) {
    .barra-lateral {
        width: var(--sistema-ancho-de-la-barra);
        flex: 0 0 var(--sistema-ancho-de-la-barra);

        /* Fija: el menú no se va hacia arriba al desplazar un listado largo. */
        position: sticky;
        top: 0;
        height: 100vh;
    }

    /* Por encima de 992 px, Bootstrap le pone «background-color: transparent
       !important» a .offcanvas-lg —da por hecho que a ese ancho el panel deja
       de ser un panel y se funde con la página—. Sin este !important la barra
       lateral queda transparente y el texto claro sobre fondo claro:
       invisible. Es la única forma de ganarle a un !important de la
       biblioteca. */
    .barra-lateral.offcanvas-lg {
        background-color: var(--sistema-barra-fondo) !important;
    }
}

.barra-lateral-marca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--sistema-barra-borde);
    min-height: 3.5rem;
}

.barra-lateral-marca-enlace {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: inherit;
    text-decoration: none;
    min-width: 0;
    flex: 1 1 auto;
}

.barra-lateral-marca-enlace:hover {
    color: inherit;
}

.barra-lateral-logo {
    height: 1.75rem;
    width: auto;
    max-width: 2.5rem;
    object-fit: contain;
}

.barra-lateral-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.5rem;
    background-color: var(--sistema-barra-seleccionada);
    color: var(--sistema-barra-texto-seleccionado);
    flex-shrink: 0;
}

.barra-lateral-nombre {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-lateral-cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.75rem 0.625rem;
}

.barra-lateral-pie {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--sistema-barra-borde);
    color: var(--sistema-barra-texto-apagado);
    font-size: 0.75rem;
}

/* --- Que el menú no se achique al abrir un módulo (ADR-107) --------------
   Al abrir un módulo largo aparecía la barra de desplazamiento y le quitaba
   su ancho al menú: los nombres se volvían a partir y todo se corría de lado
   justo en el momento de ir a apretar algo. Con el espacio reservado desde el
   principio, aparezca o no la barra, nada se mueve. */

.barra-lateral-cuerpo {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--sistema-barra-borde) transparent;
}

.barra-lateral-tirador {
    display: none;
}

@media (min-width: 992px) {
    :root {
        --sistema-ancho-recogido: 4.25rem;
    }

    .barra-lateral {
        /* Por encima del contenido: recogida, al asomarse se abre por encima
           de la página en vez de empujarla. */
        z-index: 1030;
        overflow-x: hidden;
        transition: flex-basis 0.15s ease-in-out, width 0.15s ease-in-out,
                    margin-right 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    /* El borde que se arrastra. Seis píxeles adentro del menú y no afuera: lo
       de afuera lo cortaría el «overflow» de la propia barra. */
    .barra-lateral-tirador {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 6px;
        height: 100%;
        cursor: col-resize;
        z-index: 2;
        touch-action: none;
    }

    .barra-lateral-tirador:hover,
    .barra-lateral-tirador:focus-visible,
    .arrastrando-el-menu .barra-lateral-tirador {
        background-color: var(--sistema-barra-seleccionada);
        outline: none;
    }

    /* Mientras se arrastra: sin animación —el borde tiene que seguir al mouse,
       no perseguirlo— y sin seleccionar texto de la página por accidente. */
    .arrastrando-el-menu,
    .arrastrando-el-menu * {
        cursor: col-resize !important;
        user-select: none;
    }

    .arrastrando-el-menu .barra-lateral {
        transition: none;
    }

    /* --- Recogido a íconos --- */

    .menu-recogido .barra-lateral {
        flex-basis: var(--sistema-ancho-recogido);
        width: var(--sistema-ancho-recogido);
    }

    .menu-recogido .barra-lateral-tirador {
        display: none;
    }

    /* Asomarse: al dejar el mouse encima un momento (lo pone menu-lateral.js)
       o al llegar con el teclado, el menú se abre entero por encima de la
       página. El margen negativo hace que para la página siga midiendo lo
       mismo que la franja: el contenido no se mueve. */
    .menu-recogido .barra-lateral.asomada,
    .menu-recogido .barra-lateral:focus-within {
        flex-basis: var(--sistema-ancho-de-la-barra);
        width: var(--sistema-ancho-de-la-barra);
        margin-right: calc(var(--sistema-ancho-recogido) - var(--sistema-ancho-de-la-barra));
        box-shadow: 0.5rem 0 1.5rem rgba(0, 0, 0, 0.25);
    }

    /* Los nombres se esconden a la vista pero no al lector de pantalla: con
       «display: none» los íconos quedaban como botones sin nombre. */
    .menu-recogido .barra-lateral:not(.asomada):not(:focus-within) :is(
        .barra-lateral-nombre,
        .menu-lateral-titulo > span) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .menu-recogido .barra-lateral:not(.asomada):not(:focus-within) :is(
        .barra-lateral-adorno,
        .menu-lateral-flecha,
        .menu-lateral-candado,
        .menu-lateral-grupo > .collapse,
        .barra-lateral-pie) {
        display: none;
    }

    .menu-recogido .barra-lateral:not(.asomada):not(:focus-within) :is(
        .menu-lateral-titulo,
        .barra-lateral-marca,
        .barra-lateral-marca-enlace) {
        justify-content: center;
    }

    .menu-recogido .barra-lateral:not(.asomada):not(:focus-within) .menu-lateral-titulo i {
        font-size: 1.125rem;
    }

    /* Recogido, el módulo de la pantalla en la que se está se marca: sin los
       nombres, es la única forma de saber dónde se está parado. */
    .menu-recogido .barra-lateral:not(.asomada):not(:focus-within)
        .menu-lateral-grupo:has(.activa) > .menu-lateral-titulo {
        background-color: var(--sistema-barra-seleccionada);
        color: var(--sistema-barra-texto-seleccionado);
    }
}

@media (prefers-reduced-motion: reduce) {
    .barra-lateral {
        transition: none !important;
    }
}

/* --- Opciones del menú --------------------------------------------------- */

.menu-lateral-titulo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--sistema-barra-texto);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    text-align: left;
}

.menu-lateral-titulo:hover,
.menu-lateral-titulo:focus-visible {
    background-color: var(--sistema-barra-al-pasar-por-encima);
    color: var(--sistema-barra-texto);
}

.menu-lateral-titulo-apagado {
    color: var(--sistema-barra-texto-apagado);
    cursor: default;
}

.menu-lateral-titulo-apagado:hover {
    background: transparent;
    color: var(--sistema-barra-texto-apagado);
}

.menu-lateral-candado {
    font-size: 0.6875rem;
    opacity: 0.7;
}

/* La flecha apunta hacia abajo cuando el grupo está abierto. */
.menu-lateral-flecha {
    font-size: 0.6875rem;
    transition: transform 0.15s ease-in-out;
}

.menu-lateral-titulo.collapsed .menu-lateral-flecha {
    transform: rotate(-90deg);
}

.menu-lateral-lista {
    list-style: none;
    margin: 0.125rem 0 0.25rem;
    padding: 0 0 0 1.75rem;

    /* La línea vertical hace que se vea de un golpe qué pantallas pertenecen a
       qué módulo, sin tener que seguir la sangría con la vista. */
    border-left: 1px solid var(--sistema-barra-borde);
    margin-left: 1.1875rem;
}

.menu-lateral-opcion {
    display: block;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    color: var(--sistema-barra-texto-apagado);
    font-size: 0.875rem;
    text-decoration: none;
}

.menu-lateral-opcion:hover,
.menu-lateral-opcion:focus-visible {
    background-color: var(--sistema-barra-al-pasar-por-encima);
    color: var(--sistema-barra-texto);
}

.menu-lateral-opcion.activa,
.menu-lateral-titulo-enlace.activa {
    background-color: var(--sistema-barra-seleccionada);
    color: var(--sistema-barra-texto-seleccionado);
    font-weight: 600;
}

/* Una opción que agrupa a otras dentro de un módulo: «Artículos». Se ve igual
   que una pantalla, con la flecha del grupo al final, porque está en el mismo
   nivel del menú y darle otra forma haría creer que es otra cosa. */
.menu-lateral-opcion-grupo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    background: none;
}

.menu-lateral-opcion-grupo.collapsed .menu-lateral-flecha {
    transform: rotate(-90deg);
}

/* Menos sangría que la del módulo: con la misma, el tercer nivel se iba tan a
   la derecha que los nombres largos no entraban. */
.menu-lateral-lista-anidada {
    padding-left: 1rem;
    margin-left: 0.5rem;
}

.menu-lateral-subtitulo {
    display: block;
    padding: 0.5rem 0.625rem 0.25rem;
    color: var(--sistema-barra-texto-apagado);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.barra-lateral .btn-close {
    flex-shrink: 0;
}

/* --- Pantalla de acceso -------------------------------------------------- */
/* Fondo oscuro con el color del hospital, para que se reconozca de qué
   hospital es el sistema antes de escribir la contraseña. */

.pantalla-de-acceso {
    background-color: var(--sistema-barra-fondo);
    color: var(--sistema-barra-texto);
    min-height: 100vh;
}

.pantalla-de-acceso-logo {
    height: 3.5rem;
    width: auto;
    max-width: 12rem;
    object-fit: contain;
}

.pantalla-de-acceso-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.875rem;
    background-color: var(--sistema-barra-seleccionada);
    color: var(--sistema-barra-texto-seleccionado);
    font-size: 1.5rem;
}

.pantalla-de-acceso-nombre {
    margin-top: 0.75rem;
    font-weight: 600;
    color: var(--sistema-barra-texto);
}

.pantalla-de-acceso-pie {
    color: var(--sistema-barra-texto-apagado);
}

.pantalla-de-acceso-boton-del-tema {
    color: var(--sistema-barra-texto-apagado);
    border-color: var(--sistema-barra-borde);
}

.pantalla-de-acceso-boton-del-tema:hover {
    color: var(--sistema-barra-texto);
    background-color: var(--sistema-barra-al-pasar-por-encima);
    border-color: var(--sistema-barra-borde);
}

/* La tarjeta del formulario sí es clara —o la superficie del tema oscuro—:
   es donde va la atención y donde se escribe. */
.pantalla-de-acceso .card {
    color: var(--bs-body-color);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
}

/* --- Tarjetas y superficies ---------------------------------------------- */
/* Las tarjetas van sobre el fondo gris, así que se dibujan con el color de
   superficie y un borde: la sombra sola no basta en el tema oscuro, donde una
   sombra sobre fondo oscuro no se ve. */

.card {
    --bs-card-bg: var(--sistema-superficie);
    --bs-card-border-color: var(--sistema-borde);
    --bs-card-border-radius: 0.875rem;
    --bs-card-inner-border-radius: calc(0.875rem - 1px);
    border-radius: 0.875rem;
}

/* «border-0 shadow-sm» es como vienen casi todas las tarjetas del sistema: en
   la lavanda se ven mejor con el borde fino de la marca que solo con sombra. */
.card.border-0 {
    border: 1px solid var(--sistema-borde) !important;
    box-shadow: 0 1px 2px rgba(31, 27, 54, 0.04) !important;
}

/* Lo que se puede apretar se levanta un poco al pasar el mouse. */
.card[href],
.tarjeta-de-acceso {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card[href]:hover,
.tarjeta-de-acceso:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.25rem rgba(43, 22, 104, 0.12) !important;
}

@media (prefers-reduced-motion: reduce) {
    .card[href],
    .tarjeta-de-acceso {
        transition: none;
    }

    .card[href]:hover,
    .tarjeta-de-acceso:hover {
        transform: none;
    }
}

.card-header {
    background-color: transparent;
    border-bottom-color: var(--sistema-borde);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--sistema-superficie);
    --bs-dropdown-border-color: var(--sistema-borde);
    border-radius: 0.5rem;
}

.table {
    --bs-table-bg: transparent;
}

/* --- Formularios --------------------------------------------------------- */

/* Se reserva siempre la línea del mensaje de error de cada campo, esté o no
   esté el mensaje.

   Sin esto pasa algo que se siente como que el sistema está roto: la persona
   escribe un dato inválido, aprieta «Guardar», aparece el mensaje bajo el
   campo y todo lo de abajo baja una línea. Corrige el dato, aprieta «Guardar»
   otra vez, y en ese preciso momento el mensaje desaparece, el botón sube una
   línea y el clic queda en el aire: no pasa nada. Hay que apretar dos veces.

   Es el clásico «tuve que hacer clic dos veces» que nadie logra explicar,
   porque solo ocurre después de un error de validación. Reservando la línea,
   el formulario deja de moverse y el botón está donde la persona lo apuntó. */
[data-valmsg-for] {
    display: block;
    min-height: 1.25rem;
    line-height: 1.25rem;
}

/* --- Tablas de datos ----------------------------------------------------- */
/* Las pantallas de listado son la mayor parte del sistema. Estas reglas las
   dejan legibles cuando tienen muchas columnas. */

.tabla-de-datos {
    font-size: 0.925rem;
}

/* El buscador y la tabla se dibujan como una sola pieza: el buscador arriba,
   con las esquinas de abajo rectas, y la tabla pegada debajo. Sueltos sobre el
   fondo gris parecían dos cosas que no tienen que ver entre sí. */
.barra-de-filtros {
    background-color: var(--sistema-superficie);
    border: 1px solid var(--sistema-borde);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
    margin-left: 0; /* .row trae márgenes negativos que se salen del panel */
    margin-right: 0;
}

.barra-de-filtros > * {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* La tabla vive sobre el fondo gris de la página, así que se dibuja como una
   superficie propia. Se hace acá y no tarjeta por tarjeta en cada vista: son
   seis pantallas hoy y unas ciento cincuenta cuando el sistema esté completo. */
.contenido .table-responsive {
    background-color: var(--sistema-superficie);
    border: 1px solid var(--sistema-borde);
    border-radius: 0.875rem;
}

.contenido .table-responsive > .table {
    margin-bottom: 0;
}

.tabla-de-datos thead th {
    white-space: nowrap;

    /* El encabezado se queda a la vista al desplazar un listado largo.
       El desplazamiento que importa es el de la página, no el del contenedor:
       .table-responsive solo se desplaza de lado. Con un top distinto de cero
       el encabezado se despegaba hacia abajo dentro del contenedor y tapaba la
       primera fila. */
    position: sticky;
    top: 0;
    z-index: 1;

    background-color: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--sistema-borde);
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Un código dentro de una tabla es un dato, no un fragmento de programa: el
   rojo que Bootstrap le da a <code> lo hace parecer un error. */
.tabla-de-datos code {
    color: inherit;
}

/* En el teléfono el nombre no debería partirse en tres líneas por una columna
   estrecha: la tabla se desplaza de lado dentro de su contenedor. */
@media (max-width: 575.98px) {
    .tabla-de-datos td,
    .tabla-de-datos th {
        white-space: nowrap;
    }
}

.tabla-de-datos td.numero,
.tabla-de-datos th.numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Botones secundarios -------------------------------------------------- */
/* Bootstrap escribe el gris de «btn-outline-secondary» directo en su hoja de
   estilos (#6c757d), así que no alcanza con cambiar una variable del tema.
   Sobre el gris de fondo de la página ese tono da 4,21 de contraste y las
   pautas piden 4,5: lo encontró una auditoría con axe, no se ve a ojo. El tono
   nuevo llega a 6,3 y sigue leyéndose como un botón secundario. */

.btn-outline-secondary {
    /* Tinta morada en vez del gris de Bootstrap (ADR-109): 7,3 de contraste
       sobre la lavanda de la página. */
    --bs-btn-color: #4b4664;
    --bs-btn-border-color: #a49dbd;
    --bs-btn-hover-bg: #4b4664;
    --bs-btn-hover-border-color: #4b4664;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #3a3552;
    --bs-btn-active-border-color: #3a3552;
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: #6e6888;
    --bs-btn-disabled-border-color: #a49dbd;
}

/* En el tema oscuro hay que ir al revés: aclarar, no oscurecer. */
:root[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #c9c3de;
    --bs-btn-border-color: #6e6790;
    --bs-btn-hover-bg: #c9c3de;
    --bs-btn-hover-border-color: #c9c3de;
    --bs-btn-hover-color: #0d0a1c;
    --bs-btn-active-bg: #dcd7ec;
    --bs-btn-active-border-color: #dcd7ec;
    --bs-btn-active-color: #0d0a1c;
    --bs-btn-disabled-color: #8a84a6;
    --bs-btn-disabled-border-color: #6e6790;
}

/* --- Buscador de la barra superior ---------------------------------------- */
/* Es la vía principal de navegación para quien ya sabe lo que busca, así que
   ocupa el centro de la barra y no un rincón. */

.buscador-global {
    position: relative;
    flex: 1 1 auto;
    max-width: 32rem;
    margin-inline: 0.5rem;
}

.buscador-global-caja {
    position: relative;
    display: flex;
    align-items: center;
}

.buscador-global-lupa {
    position: absolute;
    left: 0.625rem;
    color: var(--bs-secondary-color);
    pointer-events: none;
    font-size: 0.875rem;
}

.buscador-global-campo {
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: var(--bs-body-bg);
}

/* El atajo se muestra dentro del campo: un atajo que nadie conoce no existe. */
.buscador-global-atajo {
    position: absolute;
    right: 0.5rem;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--sistema-borde);
    border-radius: 0.25rem;
    background-color: var(--sistema-superficie);
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    line-height: 1.2;
    pointer-events: none;
}

/* La lista cuelga del campo y se dibuja por encima de todo lo demás: si
   quedara debajo de la tabla, medio resultado se vería tapado. */
.buscador-global-resultados {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 1080;
    max-height: 60vh;
    overflow-y: auto;
    background-color: var(--sistema-superficie);
    border: 1px solid var(--sistema-borde);
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.buscador-global-fila {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.buscador-global-fila:hover,
.buscador-global-fila-elegida {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.buscador-global-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.buscador-global-titulo {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buscador-global-detalle,
.buscador-global-tipo,
.buscador-global-baja {
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

.buscador-global-tipo {
    flex-shrink: 0;
}

.buscador-global-vacio {
    margin: 0;
    padding: 0.75rem 0.625rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* Bajo 768 px el campo compite con el botón del menú y el de la persona. Se
   queda, pero angosto: escribir sigue siendo más rápido que abrir el menú. */
@media (max-width: 767.98px) {
    .buscador-global {
        max-width: none;
        margin-inline: 0.25rem;
    }
}

/* --- Portada -------------------------------------------------------------- */

/* Las tarjetas de acceso son la vía principal de navegación de la portada, así
   que tienen que responder al puntero y al teclado igual que un botón. Sin
   esto se ven como un recuadro muerto y nadie las usa. */
.tarjeta-de-acceso {
    transition: border-color .12s ease-in-out, background-color .12s ease-in-out;
}

.tarjeta-de-acceso:hover,
.tarjeta-de-acceso:focus-visible {
    border-color: var(--bs-primary);
    background-color: var(--bs-tertiary-bg);
}

/* El foco del teclado tiene que verse en la tarjeta entera, no solo en el
   texto: es lo que le dice a quien navega sin ratón dónde está parado. */
.tarjeta-de-acceso:focus-visible,
.card[href]:focus-visible {
    outline: 2px solid var(--bs-primary-text-emphasis);
    outline-offset: 2px;
}

.card[href]:hover {
    border-color: var(--bs-primary);
}

/* --- Impresión ----------------------------------------------------------- */

@media print {
    header,
    footer,
    .no-imprimir {
        display: none !important;
    }
}

/* --- El rojo de los avisos ------------------------------------------------ */
/* El rojo que trae Bootstrap (#dc3545) no llega al contraste que piden las
   pautas cuando es texto: 4,07 sobre el gris de fondo de la página y 3,93 sobre
   el fondo del tema oscuro, contra los 4,5 exigidos. Lo encontró la auditoría
   con axe al abrir la ventana de confirmación; a ojo se ve perfectamente rojo y
   perfectamente legible, que es lo que hace que estas cosas duren años.

   Importa más de lo que parece: «text-danger» es el color de todos los mensajes
   de validación, o sea del texto que alguien lee justo cuando algo le salió mal.

   Los dos tonos nuevos son los de la propia paleta de Bootstrap (rojo 700 para
   el claro, rojo 300 para el oscuro), no colores inventados. El fondo de
   «btn-danger» no se toca: el blanco sobre él ya cumple. */

:root {
    --bs-danger-rgb: 176, 42, 55;    /* #b02a37 — 5,84 sobre el fondo de la página */
}

:root[data-bs-theme="dark"] {
    --bs-danger-rgb: 234, 134, 143;  /* #ea868f — 6,40 sobre el fondo oscuro */
}

.btn-outline-danger {
    --bs-btn-color: #b02a37;
    --bs-btn-border-color: #b02a37;
    --bs-btn-hover-bg: #b02a37;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-active-bg: #93222d;
    --bs-btn-active-border-color: #93222d;
    --bs-btn-disabled-color: #b02a37;
    --bs-btn-disabled-border-color: #b02a37;
}

/* En el tema oscuro hay que aclarar, no oscurecer. */
:root[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #ea868f;
    --bs-btn-border-color: #ea868f;
    --bs-btn-hover-bg: #ea868f;
    --bs-btn-hover-border-color: #ea868f;
    --bs-btn-hover-color: #15181c;
    --bs-btn-active-bg: #f1959c;
    --bs-btn-active-border-color: #f1959c;
    --bs-btn-active-color: #15181c;
    --bs-btn-disabled-color: #ea868f;
    --bs-btn-disabled-border-color: #ea868f;
}

/* --- La lista con buscador (F1-NUC-066) ----------------------------------- */
/* Las opciones se muestran sobre lo que sigue, no empujándolo: si el
   formulario se moviera cada vez que alguien escribe una letra, el campo de
   abajo se correría justo cuando lo va a usar. */

.lista-con-buscador-opciones {
    z-index: 5;
    max-height: 16rem;
}

/* La opción resaltada con las flechas se ve igual que la que está bajo el
   ratón: quien usa el teclado tiene que ver lo mismo que quien usa el ratón. */
.lista-con-buscador-opciones .list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* --- El crédito de DEMMA Solutions ---------------------------------------- */
/* Aparece en el pie de la barra lateral, en el pie de la página y en la
   pantalla de acceso. Siempre abajo, siempre chico: el logo grande de la
   barra lateral es el del hospital, y este es el de quien hizo el sistema. */

.marca-de-demma {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    /* Alineado a la izquierda del texto que lo acompaña, no centrado: el pie
       de la barra lateral dice «versión 0.1.0» en esa misma línea. */
    vertical-align: middle;
}

/* Sin «opacity». La primera versión llevaba 0.75 para que el crédito no
   compitiera con nada, y la revisión de accesibilidad la rechazó en las 28
   pantallas: el color del pie de la barra lateral ya viene apagado a
   propósito, y bajarle la opacidad encima lo dejaba bajo 4.5:1. Apagar algo
   dos veces es cómo se rompe el contraste sin darse cuenta. El tamaño es el
   mismo del «versión 0.1.0» de al lado, que pasa. */
.marca-de-demma-texto {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.marca-de-demma-logo {
    /* La altura manda y el ancho se calcula solo. Los atributos width/height
       del HTML están para que el navegador reserve el espacio antes de bajar
       el archivo y la línea no salte; acá se corrigen a la medida real. */
    height: 1.5rem;
    width: auto;
}

/* En la pantalla de acceso hay sitio de sobra y es la primera impresión, así
   que ahí va algo más grande. Más abajo de 1.5 rem la palabra SOLUTIONS deja
   de leerse y queda una mancha: el logotipo tiene dos líneas de texto, y eso
   le pone un piso al tamaño que no tiene un logo de una sola palabra. */
.pantalla-de-acceso-pie .marca-de-demma-logo {
    height: 1.9rem;
}

/* Cuál de las dos se ve. Sin tema elegido, el script del encabezado ya dejó
   escrito «data-bs-theme» antes de que el navegador pinte, así que uno de los
   dos selectores siempre acierta y nunca se ven las dos juntas. */
.marca-de-demma-logo-oscuro {
    display: none;
}

[data-bs-theme="dark"] .marca-de-demma-logo-claro {
    display: none;
}

[data-bs-theme="dark"] .marca-de-demma-logo-oscuro {
    display: inline;
}

/* La barra lateral y la pantalla de acceso son oscuras en los dos temas, así
   que ahí manda la versión oscura pase lo que pase. */
.barra-lateral-pie .marca-de-demma-logo-claro,
.pantalla-de-acceso-pie .marca-de-demma-logo-claro {
    display: none;
}

.barra-lateral-pie .marca-de-demma-logo-oscuro,
.pantalla-de-acceso-pie .marca-de-demma-logo-oscuro {
    display: inline;
}

/* En el pie de la barra lateral la versión y el crédito van uno debajo del
   otro: a 15 rem de ancho, en una sola línea el logo quedaría cortado. */
.barra-lateral-pie {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}

.pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Una sola vez en pantalla, no dos. El pie de la barra lateral y el de la
   página se ven juntos en el escritorio, y ahí el crédito aparecía repetido:
   se lee como descuido. Manda el de la barra lateral, que está siempre a la
   vista sin bajar la página; el del pie queda para el teléfono, donde la
   barra lateral está escondida. */
@media (min-width: 992px) {
    .pie .marca-de-demma {
        display: none;
    }
}

/* --- Por qué la tabla desplazable lleva «position: relative» ---------------
   El texto que solo leen los lectores de pantalla —«.visually-hidden», el que
   nombra a un botón que es puro icono— va posicionado en absoluto. Sin un
   ancestro posicionado, su bloque contenedor es la página entera, y entonces
   ESCAPA de la caja que desplaza la tabla: la página gana desplazamiento
   horizontal por un texto de un píxel que nadie ve.

   Lo encontró el recorrido de accesibilidad en la tabla de asignación
   familiar, a 360 px: 118 px de más en una pantalla donde nada se salía a la
   vista. Con «relative» cada uno de esos textos queda dentro de su tabla, que
   es donde corresponde, y el arreglo vale para todas las tablas del sistema y
   no solo para la que lo destapó. */

.contenido .table-responsive {
    position: relative;
}

/* --- Por qué «hidden» necesita ayuda --------------------------------------
   Un elemento con el atributo «hidden» tiene que estar oculto, y en Bootstrap
   no siempre lo está. El motivo es una carrera empatada en el cascade:

       [hidden] { display: none !important; }   ← reboot, viene ANTES
       .d-flex  { display: flex !important; }   ← utilidades, vienen DESPUÉS

   Misma especificidad, los dos con «!important»: gana el que viene después, o
   sea la utilidad. Un «<div class="alert d-flex" hidden>» se ve igual que si
   no llevara «hidden».

   Lo encontró Dariel mirando el sistema: una caja roja vacía encima de casi
   todos los formularios —el resumen de validación sin nada que resumir— que
   llevaba «hidden» puesto y se mostraba igual. Estaba en 39 pantallas.

   Esta regla va al final de la hoja propia, después de Bootstrap, y devuelve
   «hidden» a lo que significa. */

[hidden] {
    display: none !important;
}

/* --- El resumen de validación vacío ---------------------------------------
   Además de lo de arriba, el resumen se esconde solo cuando no tiene nada que
   decir, y eso no es lo mismo que «no hay errores»:

   · «validation-summary-valid» es la clase que pone el ayudante cuando el
     modelo está completo. Cubre el caso normal, y también el del lado del
     navegador: jQuery cambia esta clase por «validation-summary-errors» al
     encontrar el primer error, así que la caja aparece sola.

   · La segunda regla cubre el caso que la primera no ve: un resumen
     «ModelOnly» con errores SOLO de campos. Ahí el modelo es inválido —la
     clase dice «errors»— pero la lista sale vacía, porque los errores de campo
     van al lado de su campo. El marcador de una lista vacía es su único «li»
     con «display:none»; uno de verdad no lleva estilo.

   Dicho corto: no se esconde «cuando no hay errores», se esconde CUANDO NO HAY
   NADA ESCRITO. Que es lo que uno quiere decir. */

.validation-summary-valid,
[data-valmsg-summary]:not(:has(li:not([style]))) {
    display: none !important;
}

/* --- Los avisos flotantes -------------------------------------------------
   «Guardado», «no se pudo», «entró pero le falta algo». Antes salían empujando
   el contenido de la página hacia abajo, lo que movía de lugar lo que la
   persona estaba a punto de tocar.

   Van ABAJO a la derecha y no arriba, y es una decisión: arriba a la derecha
   es donde este sistema pone los botones de acción de cada pantalla —«Agregar»,
   «Exportar»—, y un aviso encima de ellos tapa justo lo que alguien va a
   apretar después de leerlo.

   Y no atrapan el ratón: el contenedor y el cuerpo del aviso dejan pasar el
   clic, y lo único que se puede apretar es su botón de cerrar. Un aviso nunca
   puede impedir que alguien trabaje. */

.avisos-flotantes {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(24rem, calc(100vw - 2rem));

    /* Deja pasar el clic: ver el comentario de arriba. */
    pointer-events: none;
}

.aviso-flotante {
    pointer-events: none;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
    animation: aviso-entra-desde-la-derecha .28s ease-out both;
}

/* Lo único que atrapa el ratón. */
.aviso-flotante .btn-close {
    pointer-events: auto;
}

.aviso-flotante.se-va {
    animation: aviso-sale-hacia-la-derecha .22s ease-in both;
}

@keyframes aviso-entra-desde-la-derecha {
    from {
        transform: translateX(110%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes aviso-sale-hacia-la-derecha {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(110%);
        opacity: 0;
    }
}

/* Hay gente a la que el movimiento le hace mal, y el navegador lo sabe: el
   aviso aparece igual, sin deslizarse. */
@media (prefers-reduced-motion: reduce) {
    .aviso-flotante,
    .aviso-flotante.se-va {
        animation: none;
    }
}

/* En un teléfono ocupan el ancho: una caja de 24 rem a la derecha de una
   pantalla de 360 px se sale de la vista. */
@media (max-width: 575.98px) {
    .avisos-flotantes {
        left: 1rem;
        right: 1rem;
        width: auto;
    }
}

/* --- El inicio como tablero (ADR-108) ------------------------------------- */

/* El saludo de una festividad: una tarjeta con una franja de color arriba y
   el ícono del adorno. La franja y el ícono son decoración (el ícono va con
   aria-hidden); el texto es el de siempre, así que se lee igual en los dos
   temas sin depender de los colores de la fiesta. */
.saludo-de-festividad {
    --festividad-franja: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    --festividad-icono: var(--bs-primary-text-emphasis);

    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.saludo-de-festividad::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 0.375rem;
    background: var(--festividad-franja);
}

.saludo-de-festividad-icono {
    font-size: 2rem;
    color: var(--festividad-icono);
    flex-shrink: 0;
}

.saludo-de-festividad-nombre {
    color: var(--bs-secondary-color);
}

/* Los colores de cada adorno. La bandera, con su blanco entre el azul y el
   rojo; en la franja del menú, que es oscura, el blanco sí se ve. */
.festividad-bandera {
    --festividad-franja: linear-gradient(90deg, #0039a6 0 33%, #ffffff 33% 66%, #d52b1e 66% 100%);
    --festividad-icono: #d52b1e;
}

.festividad-navidad {
    --festividad-franja: repeating-linear-gradient(90deg, #1f7a3a 0 1.5rem, #c0392b 1.5rem 3rem);
    --festividad-icono: #1f7a3a;
}

.festividad-ano-nuevo {
    --festividad-franja: linear-gradient(90deg, #b8860b, #f5d76e, #b8860b);
    --festividad-icono: #b8860b;
}

.festividad-halloween {
    --festividad-franja: repeating-linear-gradient(90deg, #e67e22 0 1.5rem, #5b2c6f 1.5rem 3rem);
    --festividad-icono: #e67e22;
}

.festividad-corazones {
    --festividad-franja: linear-gradient(90deg, #c2185b, #f06292, #c2185b);
    --festividad-icono: #c2185b;
}

.festividad-flores {
    --festividad-franja: linear-gradient(90deg, #ec407a, #ffb74d, #66bb6a);
    --festividad-icono: #d81b60;
}

.festividad-confeti {
    --festividad-franja: linear-gradient(90deg, #e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa);
    --festividad-icono: #8e24aa;
}

/* En el tema oscuro, los íconos más claros: el verde y el morado sobre fondo
   oscuro se pierden. */
[data-bs-theme="dark"] .festividad-navidad { --festividad-icono: #4caf50; }
[data-bs-theme="dark"] .festividad-halloween { --festividad-icono: #f39c12; }
[data-bs-theme="dark"] .festividad-ano-nuevo { --festividad-icono: #f5d76e; }
[data-bs-theme="dark"] .festividad-corazones { --festividad-icono: #f06292; }
[data-bs-theme="dark"] .festividad-flores { --festividad-icono: #f48fb1; }
[data-bs-theme="dark"] .festividad-confeti { --festividad-icono: #ce93d8; }
[data-bs-theme="dark"] .festividad-bandera { --festividad-icono: #ef5350; }

/* El detalle en el menú: la misma franja, delgada, arriba de todo, y el ícono
   junto al nombre. Sutil a propósito: se ve en cada pantalla del día. */
.barra-lateral.con-festividad::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 0.25rem;
    background: var(--festividad-franja);
    z-index: 3;
}

.barra-lateral-adorno {
    color: var(--festividad-icono);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* --- Los cumpleaños y los feriados --- */

.cumpleanos-de-hoy {
    background-color: var(--bs-danger-bg-subtle);
}

.fecha-del-feriado {
    min-width: 2.75rem;
    padding: 0.25rem 0;
    border-radius: 0.5rem;
    background-color: var(--bs-tertiary-bg);
}

/* --- Personalizar el inicio --- */

.panel-para-ordenar[draggable="true"] .tirador-del-panel {
    cursor: grab;
}

.panel-para-ordenar.arrastrandose {
    opacity: 0.6;
    outline: 2px dashed var(--bs-primary-text-emphasis);
    outline-offset: -2px;
}

.muestra-del-adorno {
    color: var(--festividad-icono);
}

.texto-del-panel {
    flex: 1 1 16rem;
    min-width: 0;
}

.controles-del-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
}


/* --- El diseño de DEMMA (ADR-109) -------------------------------------------
   Lavanda de fondo, tarjetas casi blancas con borde fino, tinta morada en el
   texto y el morado del establecimiento en lo que se aprieta. Los colores los
   pone PaletaDelSistema; acá va la forma. */

.form-control,
.form-select {
    background-color: var(--sistema-superficie);
    border-color: var(--sistema-borde);
}

.form-control::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.85;
}

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 0.625rem;
}

.btn-sm {
    --bs-btn-border-radius: 0.5rem;
}

.badge {
    font-weight: 700;
    border-radius: 0.5rem;
}

.alert {
    border-radius: 0.875rem;
}

.modal-content {
    --bs-modal-bg: var(--sistema-superficie);
    --bs-modal-border-radius: 1rem;
}

.list-group {
    --bs-list-group-bg: var(--sistema-superficie);
    --bs-list-group-border-color: var(--sistema-borde);
}

.font-monospace,
code,
kbd {
    font-family: var(--bs-font-monospace) !important;
}

/* --- El tablero profesional del inicio (ADR-110) -----------------------------
   Cada panel es una tarjeta con su cabecera (ícono, título y un enlace a la
   pantalla de detalle). Los colores de los gráficos son la paleta categórica
   validada para daltonismo contra la superficie de cada tema: morado, verde,
   rosado y dorado, siempre en ese orden y nunca para el texto. */

:root,
[data-bs-theme="light"] {
    --grafico-1: #6B3FD9;
    --grafico-2: #3C8A2E;
    --grafico-3: #C24C8E;
    --grafico-4: #B8860B;
    --grafico-otras: #8F89A6;
    --grafico-cuadricula: rgba(31, 27, 54, 0.08);
    --grafico-base: rgba(31, 27, 54, 0.28);
}

[data-bs-theme="dark"] {
    --grafico-1: #9370F2;
    --grafico-2: #55A840;
    --grafico-3: #D2649F;
    --grafico-4: #B08A1C;
    --grafico-otras: #6E688A;
    --grafico-cuadricula: rgba(243, 241, 250, 0.08);
    --grafico-base: rgba(243, 241, 250, 0.3);
}

.panel-del-tablero {
    overflow: hidden;
}

.cabecera-del-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.875rem 1rem 0.25rem;
}

.panel-sin-marco > .cabecera-del-panel {
    padding: 0 0 0.75rem;
}

.titulo-del-panel {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
    color: var(--bs-emphasis-color);
}

.titulo-del-panel .bi {
    color: var(--bs-primary-text-emphasis);
}

.enlace-del-panel {
    text-decoration: none;
}

.enlace-del-panel:hover,
.enlace-del-panel:focus-visible {
    text-decoration: underline;
}

/* Fuera del modo de edición, el título de un panel sin marco solo lo leen
   los lectores de pantalla: las tarjetas de cifras se explican solas. */
body:not(.editando-el-inicio) .cabecera-del-panel.solo-al-editar {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.min-w-0 {
    min-width: 0;
}

/* --- El cuadro del ícono: pendientes, accesos y catálogo --- */

.cuadro-del-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    font-size: 1.0625rem;
}

.cuadro-marca { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.cuadro-mal { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.cuadro-atencion { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.cuadro-bien { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.cuadro-neutro { background-color: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }

.fila-del-pendiente:hover,
.fila-del-pendiente:focus-visible {
    background-color: var(--bs-tertiary-bg);
}

.cuadro-de-acceso {
    padding: 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid transparent;
}

.cuadro-de-acceso:hover,
.cuadro-de-acceso:focus-visible {
    border-color: var(--bs-primary-border-subtle);
    background-color: var(--sistema-superficie);
}

.cuadro-del-indicador {
    padding: 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--bs-tertiary-bg);
}

/* --- Las tarjetas de cifras --- */

.tarjeta-de-cifra .numero-de-la-cifra {
    font-size: 1.875rem;
    line-height: 1;
}

.tendencia-de-la-cifra polyline {
    stroke: var(--grafico-1);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Los tonos de una comparación. Son los colores de estado, distintos de los
   de los gráficos, y siempre van con palabras: nunca dicen algo solo con el
   color. */
.tono-bien { color: var(--bs-success-text-emphasis); }
.tono-atencion { color: var(--bs-warning-text-emphasis); }
.tono-mal { color: var(--bs-danger-text-emphasis); }

/* --- Los gráficos --- */

.serie-1 { fill: var(--grafico-1); background-color: var(--grafico-1); }
.serie-2 { fill: var(--grafico-2); background-color: var(--grafico-2); }
.serie-3 { fill: var(--grafico-3); background-color: var(--grafico-3); }
.serie-4 { fill: var(--grafico-4); background-color: var(--grafico-4); }
.serie-5 { fill: var(--grafico-otras); background-color: var(--grafico-otras); }

.trazo-serie-1 { stroke: var(--grafico-1); }
.trazo-serie-2 { stroke: var(--grafico-2); }
.trazo-serie-3 { stroke: var(--grafico-3); }
.trazo-serie-4 { stroke: var(--grafico-4); }
.trazo-serie-5 { stroke: var(--grafico-otras); }

.muestra-de-serie {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 0.1875rem;
    margin-right: 0.375rem;
    vertical-align: baseline;
}

.leyenda-del-grafico li {
    color: var(--bs-secondary-color);
}

.cuadricula-del-grafico {
    stroke: var(--grafico-cuadricula);
    stroke-width: 1;
}

.base-del-grafico {
    stroke: var(--grafico-base);
    stroke-width: 1;
}

.rotulo-del-eje {
    fill: var(--bs-secondary-color);
    font-size: 11px;
    font-family: var(--bs-font-sans-serif);
}

.blanco-del-puntero {
    fill: transparent;
}

.marca-del-grafico {
    outline: none;
}

.marca-del-grafico.marca-activa .blanco-del-puntero,
.marca-del-grafico:focus-visible .blanco-del-puntero {
    fill: var(--grafico-cuadricula);
}

.marca-del-grafico:focus-visible .blanco-del-puntero {
    stroke: var(--bs-primary-text-emphasis);
    stroke-width: 2;
}

circle.marca-del-grafico.marca-activa {
    stroke-width: 15;
}

.anillo-del-grafico circle {
    transition: stroke-width 0.12s ease;
}

.centro-del-anillo {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.leyenda-en-tabla {
    --bs-table-bg: transparent;
    min-width: 12rem;
}

.tabla-del-grafico summary {
    cursor: pointer;
    width: fit-content;
}

.detalle-del-grafico {
    position: fixed;
    z-index: 1080;
    max-width: 18rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    background-color: var(--bs-emphasis-color);
    color: var(--bs-body-bg);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 0.5rem 1.5rem rgba(13, 10, 28, 0.25);
    pointer-events: none;
}

/* --- Su actividad --- */

.linea-de-actividad li {
    position: relative;
}

.punto-de-actividad {
    position: relative;
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.375rem;
    border-radius: 50%;
    background-color: var(--grafico-1);
    box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle);
}

.linea-de-actividad li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(0.3125rem - 1px);
    top: 1.25rem;
    bottom: 0.125rem;
    width: 2px;
    background-color: var(--sistema-borde);
}

/* --- El modo de edición --- */

.barra-de-edicion {
    position: sticky;
    top: 4.5rem;
    z-index: 1010;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    background-color: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
}

.editando-el-inicio .panel-del-inicio > .panel-del-tablero,
.editando-el-inicio .panel-del-inicio > .panel-sin-marco {
    outline: 2px dashed var(--bs-primary-border-subtle);
    outline-offset: 4px;
    border-radius: 0.875rem;
}

.editando-el-inicio .panel-del-inicio[draggable="true"] .tirador-del-tablero {
    cursor: grab;
    color: var(--bs-secondary-color);
}

.editando-el-inicio .panel-del-inicio a:not(.enlace-del-panel) {
    pointer-events: none;
}

.editando-el-inicio .controles-de-edicion {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.controles-de-edicion .btn[aria-pressed="true"] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--sistema-texto-encima-del-principal);
}

.panel-del-inicio.arrastrandose {
    opacity: 0.55;
}

.panel-del-catalogo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--sistema-borde);
    background-color: var(--sistema-superficie);
}

@media (prefers-reduced-motion: reduce) {
    .anillo-del-grafico circle {
        transition: none;
    }
}

@media (forced-colors: active) {
    .serie-1, .serie-2, .serie-3, .serie-4, .serie-5 { fill: CanvasText; }
    .muestra-de-serie { forced-color-adjust: none; border: 1px solid CanvasText; }
}

/* El código en línea, en el rosado de la marca y oscurecido para leerse sobre
   la lavanda: el rosado de Bootstrap (#D63384) quedaba en 3,7:1 sobre el
   fondo de la página (ADR-109). En oscuro, el de Bootstrap ya contrasta. */
:root,
[data-bs-theme="light"] {
    --bs-code-color: #A8326F;
}

[data-bs-theme="dark"] {
    --bs-code-color: #E685B5;
}

/* El «info» de Bootstrap es celeste, y la marca no lleva celeste ni cian
   (marca/paleta-demma.md). Los avisos informativos pasan a una lavanda
   violeta, distinta del morado de los botones para que un aviso no parezca
   algo que se aprieta. Contrastes: el texto sobre su fondo, 9,4:1 en claro y
   9,3:1 en oscuro (ADR-109). */
:root,
[data-bs-theme="light"] {
    --bs-info: #A08CF0;
    --bs-info-rgb: 160, 140, 240;
    --bs-info-text-emphasis: #3E2A86;
    --bs-info-bg-subtle: #EEE9FB;
    --bs-info-border-subtle: #D3C8F5;
}

[data-bs-theme="dark"] {
    --bs-info: #A08CF0;
    --bs-info-rgb: 160, 140, 240;
    --bs-info-text-emphasis: #C9BCFB;
    --bs-info-bg-subtle: #221A45;
    --bs-info-border-subtle: #3D3170;
}

/* El título de una sección de menú desplegable: Bootstrap lo trae en un gris
   fijo (#6C757D) que sobre la superficie lavanda queda en 4,37:1. Con el
   secundario de la paleta pasa en los dos temas (ADR-109). */
.dropdown-menu {
    --bs-dropdown-header-color: var(--bs-secondary-color);
}

/* --- El editor y la lectura de los documentos (ADR-116) ---------------------
   El área editable se ve como una hoja: fondo del tema, alto mínimo de media
   pantalla y la tipografía del cuerpo. Las tablas que la persona inserta
   llevan borde para que se vean mientras se escriben. */
.area-del-editor {
    min-height: 24rem;
    overflow-y: auto;
    line-height: 1.55;
}

.area-del-editor:focus {
    outline: 0;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.area-del-editor h2, .texto-del-documento h2 { font-size: 1.15rem; font-weight: 600; margin: 1rem 0 .4rem; }
.area-del-editor h3, .texto-del-documento h3 { font-size: 1.02rem; font-weight: 600; margin: .8rem 0 .3rem; }
.area-del-editor p, .texto-del-documento p { margin: 0 0 .6rem; }

/* La guía al escribir un documento (ADR-120): los pasos numerados y la
   tarjeta de cada tipo, que se elige leyendo para qué sirve. */
.paso-del-formulario {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; margin-right: .35rem; border-radius: 50%;
    background: var(--bs-primary); color: var(--bs-body-bg); font-size: .8rem; font-weight: 700;
}
.tarjeta-del-tipo { white-space: normal; border-color: var(--bs-border-color); }
.btn-check:checked + .tarjeta-del-tipo .text-body-secondary { color: inherit !important; opacity: .9; }
.plantilla-para-elegir { cursor: pointer; }
.area-del-editor table, .texto-del-documento table {
    border-collapse: collapse;
    width: 100%;
    margin: .5rem 0 .8rem;
}
.area-del-editor th, .area-del-editor td, .texto-del-documento th, .texto-del-documento td {
    border: 1px solid var(--bs-border-color);
    padding: .25rem .5rem;
}
.area-del-editor th, .texto-del-documento th { background: var(--bs-tertiary-bg); text-align: left; }

/* La lectura: la hoja tal como se emitió, con la tipografía de lectura. */
.texto-del-documento {
    max-width: 52rem;
    line-height: 1.6;
}

/* --- El resumen de un informe (ADR-152) ---------------------------------------
   Una barra por categoría, de un solo color —es magnitud, no identidad—, con la
   etiqueta y el valor escritos en texto: el color no dice nada que el texto no
   diga. La tabla de abajo es la vista accesible de los mismos números. */

.etiqueta-de-la-barra {
    flex: 0 0 12rem;
    max-width: 40%;
}

.riel-de-la-barra {
    display: block;
    height: 0.75rem;
}

.barra-del-resumen {
    display: block;
    height: 100%;
    min-width: 2px;
    background-color: var(--grafico-1);
    border-radius: 0 0.25rem 0.25rem 0;
}

.valor-de-la-barra {
    flex: 0 0 8.5rem;
    font-variant-numeric: tabular-nums;
}

.resumen-del-informe li:hover .barra-del-resumen {
    filter: brightness(1.15);
}

/* --- El detalle de un indicador (ADR-154) --------------------------------------
   Barras de un solo color y la meta como línea punteada: la meta es una
   referencia, no una serie más. */

.barra-del-indicador {
    fill: var(--grafico-1);
}

.barra-del-indicador:hover {
    filter: brightness(1.15);
}

.meta-del-indicador {
    stroke: var(--bs-body-color);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    opacity: 0.7;
}

.tarjeta-del-indicador {
    transition: box-shadow 0.15s ease-in-out;
}

.tarjeta-del-indicador:hover,
.tarjeta-del-indicador:focus-visible {
    box-shadow: var(--bs-box-shadow) !important;
}