:root{--brand-primary:#ff0000;--brand-primary-text:#FFFFFF;--brand-primary-hover:#dd0000;--brand-primary-dark:#bf0000;--brand-primary-soft:#ff0000;--brand-primary-rgb:255, 0, 0;--brand-secondary:#6c757d;--brand-secondary-text:#FFFFFF;}.btn-primary, .dropdown-item.active, .dropdown-item:active{background-color: #ff0000 !important;border-color: #ff0000 !important;color: #FFFFFF !important;}.btn-primary .badge-primary, .dropdown-item.active .badge-primary, .dropdown-item:active .badge-primary{background-color: #bf0000 !important;border-color: #bf0000 !important;color: #FFFFFF !important;}.btn-primary.hamburger > .hamburger-box > .hamburger-inner,.btn-primary.hamburger > .hamburger-box > .hamburger-inner::before,.btn-primary.hamburger > .hamburger-box > .hamburger-inner::after{background-color: #FFFFFF !important;}.btn-primary:hover{background-color: #dd0000 !important;border-color: #dd0000 !important;}.btn-primary:focus, .btn-primary.focus{box-shadow: 0 0 0 0.2rem rgba(221, 0, 0, 0.5) !important;}.btn-primary.disabled, .btn-primary:disabled{background-color: #ff2222 !important;border-color: #ff2222 !important;}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show > .btn-primary.dropdown-toggle{background-color: #dd0000 !important;border-color: #dd0000 !important;}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show > .btn-primary.dropdown-toggle:focus{background-color: #dd0000 !important;border-color: #dd0000 !important;}.btn-outline-primary{border-color: #ff0000 !important;color: #ff0000 !important;}.btn-outline-primary:hover{background-color: #ff0000 !important;color: #FFFFFF !important;}.badge-primary{background-color: #ff0000 !important;border-color: #ff0000 !important;color: #FFFFFF !important;}.btn-primary .btn-icon{background-color: #8c0000 !important;border: 1px solid #8c0000 !important;color: #FFFFFF !important;border-radius: 100%;display: inline-block;}.breadcrumb-shoppingcart a.active{background-color: #ff0000 !important;color:#FFFFFF !important;}.breadcrumb-shoppingcart a.active:after{background-color: #ff0000 !important;}.btn-secondary{background-color: #6c757d !important;border-color: #6c757d !important;color: #FFFFFF !important;}.btn-secondary.hamburger > .hamburger-box > .hamburger-inner,.btn-secondary.hamburger > .hamburger-box > .hamburger-inner::before,.btn-secondary.hamburger > .hamburger-box > .hamburger-inner::after{background-color: #FFFFFF !important;}.btn-secondary:hover{background-color: #5c646b !important;border-color: #5c646b !important;}.btn-secondary:focus, .btn-secondary.focus{box-shadow: 0 0 0 0.2rem rgba(92, 100, 107, 0.5) !important;}.btn-secondary.disabled, .btn-secondary:disabled{background-color: #7d868e !important;border-color: #7d868e !important;}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show > .btn-secondary.dropdown-toggle{background-color: #5c646b !important;border-color: #5c646b !important;}.btn-secondary:not(:disabled):not(.disabled):active:focus,.btn-secondary:not(:disabled):not(.disabled).active:focus,.show > .btn-secondary.dropdown-toggle:focus{background-color: #5c646b !important;border-color: #5c646b !important;}.btn-outline-secondary{border-color: #6c757d !important;color: #6c757d !important;}.btn-outline-secondary:hover{background-color: #6c757d !important;color: #FFFFFF !important;}.badge-secondary{background-color: #6c757d !important;border-color: #6c757d !important;color: #FFFFFF !important;}.btn-secondary .btn-icon{background-color: #3b4045 !important;border: 1px solid #3b4045 !important;color: #FFFFFF !important;border-radius: 100%;display: inline-block;}ul.menu li.active a, ul.sidr-class-menu li.sidr-class-active > a {background-image: none !important;background-color: rgba(255, 0, 0, 0.45) !important;border-left-color: #ff0000 !important;color: #ffffff !important;border-radius: 10px !important;}ul.menu li.active a i, .sidr > .sidr-inner .sidr-class-active a i{background-color: transparent !important;border-color: transparent !important;color: #ffffff !important;}ul.menu li.active a::after, ul.sidr-class-menu li.sidr-class-active > a::after {content: none !important;display: none !important;}ul.menu ul.submenu, .sidr ul ul.submenu {border-left-color: #ff0000 !important;}ul.menu ul.submenu li.active a, .sidr ul ul.submenu li.active a {background-color: rgba(255, 0, 0, 0.22) !important;color: #ffffff !important;border-left-color: #ffffff !important;border-radius: 8px !important;}ul.menu ul.submenu li.active a::before, .sidr ul ul.submenu li.active a::before {color: #ffffff !important;}.pagination .page-item .page-link{color: #ff0000 !important;}.pagination .page-item.active .page-link{background-color: #ff0000 !important;border-color: #ff0000 !important;color: #FFFFFF !important;}.bg-primary{background-color: #ff0000 !important;}.bg-primary-dark{background-color: #dd0000 !important;}.bg-secondary{background-color: #6c757d !important;}.count-primary{color: #FFFFFF !important;background-color: #ff0000 !important;}i.bubble-primary{background-color: #ff0000 !important;color: #FFFFFF !important;}i.bubble-primary:after{border-color: transparent #ff0000 !important;}.input-group-searchbox {border-radius: 0px;margin-bottom: 0px;}.input-group-searchbox .input-group-text {border-radius: 0px;background-color: #ff0000;border-color: #ff0000;font-size: 14px;color: #FFFFFF;}.input-group-searchbox .form-control {border-radius: 0px;border-color: #ff0000;}:root {--main-card-header-background: #27282A;--brand-card-header-background: #27282A;--brand-card-header-text: #FFFFFF;--brand-card-footer-background: #27282A;--brand-card-footer-text: #FFFFFF;}.accordion .card{border-top: 1px solid #141415 !important;}.card{border-radius: var(--brand-ui-surface-radius, .75rem);border: 1px solid var(--brand-ui-line, #27282A);}.card.border-0{border: 0px solid var(--brand-ui-line, #27282A) !important;}.card .card-header{background-color: #27282A !important;border-radius: calc(var(--brand-ui-surface-radius, .75rem) - 1px) calc(var(--brand-ui-surface-radius, .75rem) - 1px) 0 0;border: 1px solid #27282A !important;color: #FFFFFF;}.card .card-header a.nav-link, .card .card-header .btn-link{color: #FFFFFF !important;text-decoration: none;}.card .card-header a.nav-link:not(.active):hover, .card .card-header a.nav-link:not(.active):focus{background-color: #141415 !important;border-color: #141415 !important;}.card .card-header a.nav-link.active{color: #495057 !important;cursor: default !important;}.card .card-footer{border-top: 1px solid #1d1e20 !important;color: #FFFFFF !important;background-color: #27282A !important;border-radius: 0 0 calc(var(--brand-ui-surface-radius, .75rem) - 1px) calc(var(--brand-ui-surface-radius, .75rem) - 1px);background-color: #27282A !important;border-top: 1px solid #1d1e20 !important;color: #FFFFFF !important;}.dark{background-color: #27282A !important;color:#FFFFFF !important;}.border-dark{border: 1px solid #27282A !important;}.table.table-bordered th,.table.table-bordered td{border: 1px solid var(--brand-ui-line, #27282A) !important;}.table-bordered thead th, .table-bordered thead td, table.bt tbody td::before{background-color: #27282A !important;border-bottom: 2px solid var(--brand-ui-line, #27282A) !important;color:#FFFFFF !important;}.voucher .table td{border: 1px solid #FFF !important;}th.dark,td.dark{background-color: #27282A !important;color:#FFFFFF !important;border: 1px solid #27282A !important;}.table-primary, .table-primary > th, .table-primary > td{background-color: rgba(39, 40, 42, 0.1)}.breadcrumbs li a{background-color: #27282A !important;}.breadcrumbs li a::after{border-left: 15px solid #27282A !important;}.breadcrumbs li a:hover{background-color: #141415 !important;}.breadcrumbs li a:hover:after{border-left: 15px solid #141415 !important;}:root {--main-ui-text: #FFFFFF;--brand-shell-background: #27282a;--brand-shell-text: #FFFFFF;}:root[data-brand-theme="dark"]{--brand-ui-canvas: #343537 !important;--brand-ui-surface: #414244 !important;--brand-ui-raised: #4e4f50 !important;}body.full{background-color:#27282a !important;}body.full>.container-scroller>.container-fluid>.row>.topbar{background:#27282a !important;}.bg-dark{background-color:#27282a !important;} .container-scroller-header{background-color: #27282a !important;border-bottom: 4px solid #ff0000 !important;}.sidebar, .sidr{background-color: #27282a !important;}.sidebar > .sidebar-logo{border-bottom-color: #ff0000 !important;}.sidebar .details, .sidr > .sidr-inner > .sidr-class-details{background-color: #ff0000 !important;color: #FFFFFF !important;border-bottom: 0 !important;border-radius: 14px;margin: 12px 12px 8px;padding: 14px 16px;text-align: left;}.sidebar .details hr, .sidr > .sidr-inner > .sidr-class-details hr{border-top-color: rgba(255, 255, 255, 0.25) !important;}ul.menu .separador{background-color: #1c1d1e !important;}ul.menu li a {border-bottom-color: transparent !important;}.menu .divider{background-color: #1c1d1e !important;}ul.menu ul.submenu, .sidr ul ul.submenu {background-color: #1f2022 !important;}ul.menu ul.submenu li a, .sidr ul ul.submenu li a {border-bottom-color: #141415 !important;color: #ffffff !important;}ul.menu ul.submenu li a::before, .sidr ul ul.submenu li a::before {color: #FFFFFF !important;}ul.menu ul.submenu li:not(.active) a:hover, .sidr ul ul.submenu li:not(.active) a:hover {color: #FFFFFF !important;}ul.menu li.has-submenu > a::after, .sidr ul li.has-submenu > a::after {color: #FFFFFF !important;}body.full > .container-scroller > .container-fluid > .row > .content-wrapper > .submenu{border-bottom: 4px solid #ff0000 !important;}body.full > .container-scroller > .container-fluid > .row > .content-wrapper > .submenu > ul > li.active > a{background-color: #ff0000 !important;color: #FFFFFF !important;}.sidr > .sidr-inner .sidr-class-active{background-color: transparent !important;color: inherit !important;}.sidr > .sidr-inner .sidr-class-active a{box-shadow: none !important;}.sidr > .sidr-inner .sidr-class-active a i {background-color: transparent !important;border-color: transparent !important;color: #ffffff !important;}.container-footer{background-color: #27282a !important;border-top: 4px solid #ff0000 !important;color: #FFFFFF !important;}.inputGroup label:before {background-color: #27282a !important;}.inputGroup input:checked ~ label:after {background-color: #ff0000 !important;border-color:#ff0000 !important;}@media screen {
    :root {
        --brand-ui-canvas: #f6f8fb;
        --brand-ui-surface: #ffffff;
        --brand-ui-raised: #f6f8fb;
        --brand-ui-ink: #202938;
        --brand-ui-muted: #667085;
        --brand-ui-line: #e1e7ef;
        --brand-ui-control-line: #8591a3;
        --brand-ui-link: var(--brand-primary, #013c81);
        --brand-ui-control-radius: .5rem;
        --brand-ui-surface-radius: .75rem;
        --brand-ui-shadow: 0 2px 8px rgba(32, 41, 56, .06);
        --brand-content-background: #eeeeee;
    }
    /* Sidebar menu Nova (desktop + Sidr). Dark shell always; brand only on active pill. */
    body.full > .container-scroller > .container-fluid > .row > .sidebar,
    .sidr {
        overflow-x: hidden !important;
    }
    /* Sidr defaults (borders + inset shadow) fight the Nova rows — reset them. */
    .sidr ul,
    .sidr ul li,
    .sidr ul li:hover,
    .sidr ul li.active,
    .sidr ul li.sidr-class-active {
        border: 0 !important;
        box-shadow: none !important;
        line-height: inherit !important;
    }
    .sidr ul li:hover > a,
    .sidr ul li:hover > span,
    .sidr ul li.active > a,
    .sidr ul li.active > span,
    .sidr ul li.sidr-class-active > a,
    .sidr ul li.sidr-class-active > span {
        box-shadow: none !important;
    }
    .sidebar .details,
    .sidr > .sidr-inner > .sidr-class-details {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.01em;
        line-height: 1.35;
    }
    .sidebar .details .user,
    .sidr > .sidr-inner > .sidr-class-details .sidr-class-user,
    .sidr > .sidr-inner > .sidr-class-details .user {
        display: block;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1.3;
    }
    .sidebar .details .company,
    .sidebar .details .event,
    .sidr > .sidr-inner > .sidr-class-details .sidr-class-company,
    .sidr > .sidr-inner > .sidr-class-details .sidr-class-event,
    .sidr > .sidr-inner > .sidr-class-details .company,
    .sidr > .sidr-inner > .sidr-class-details .event {
        display: block;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.01em;
        opacity: 0.72;
    }
    .sidebar .details hr,
    .sidr > .sidr-inner > .sidr-class-details hr {
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        margin: 8px 0;
        opacity: 1;
    }
    /* Only style the row link — never nested label spans (Sidr treats spans as rows). */
    /* Sidr prefixes every class with sidr-class-, so the real Bootstrap
       .text-center never matches .details there — recreate just this one. */
    .sidr-class-text-center {
        text-align: center !important;
    }
    ul.menu li > a,
    ul.sidr-class-menu li > a {
        /* jquery.sidr.*.css ships `.sidr ul li a, .sidr ul li span { display: block; }`
           at the exact same specificity as the base template's inline-flex — a tie
           broken by load order, and the plugin was winning: icon and label stacked
           into two block rows instead of sitting in one flex row. Force it. */
        display: inline-flex !important;
        /* Va junto al display forzado, no se puede delegar al template del panel:
           solo dashboard, console y skills declaran `display:inline-flex;
           align-items:center` en su template.css. Los otros ~29 paneles (master,
           manager, biocontrol, hub, sst...) declaran `display:block` y nunca
           necesitaron alinear nada en el eje transversal. Al forzarles flex desde
           aqui heredaban align-items:normal -> stretch: el icono (height fija de
           24px) se queda arriba y el rotulo, que es un nodo de texto suelto sin
           caja propia, se pinta en el borde superior de su item estirado, o sea
           por encima del centro del icono. Quien fuerza el display es quien tiene
           que fijar la alineacion. */
        align-items: center;
        border-bottom: 0 !important;
        border-left: 3px solid transparent;
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 13px;
        font-weight: 500;
        gap: 0.55rem;
        letter-spacing: 0.01em;
        line-height: 1.35;
        margin: 2px 8px;
        padding: 0.7rem 0.85rem !important;
        transition: background-color .15s ease, color .15s ease, border-left-color .15s ease;
        width: calc(100% - 16px);
    }
    ul.menu li:not(.active) > a:hover,
    ul.menu li:not(.active) > a:focus,
    ul.sidr-class-menu li:not(.sidr-class-active) > a:hover,
    ul.sidr-class-menu li:not(.sidr-class-active) > a:focus {
        background-color: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
    }
    ul.menu li > a i,
    ul.sidr-class-menu li > a i {
        background-color: transparent !important;
        border-color: transparent !important;
        color: inherit !important;
        flex-shrink: 0;
        font-size: 15px;
        height: 24px;
        line-height: 24px;
        margin-right: 0;
        opacity: 0.9;
        width: 24px;
    }
    /* Long labels ("Pendiente de autorización") must shrink and truncate instead
       of pushing the badge past the sidebar's overflow-x: hidden, where it gets
       clipped and the count becomes unreadable. Sidr renames the badge span's
       own classes too (.badge -> .sidr-class-badge), so :not(.badge) never
       matches it there — exclude the renamed class as well. */
    ul.menu li > a > span:not(.badge),
    ul.sidr-class-menu li > a > span:not(.sidr-class-badge) {
        /* El template base trae `ul.menu li a span { display:inline-flex;
           margin-left:10px; max-width:80% }` y hay que neutralizar las tres:
           - margin-left desanida la etiqueta 10px extra SOLO en los items que
             la envuelven en <span>. Los que llevan el rotulo como texto suelto
             (Inicio) no lo reciben, asi que el borde izquierdo de los rotulos
             queda desparejo contra su icono.
           - display:inline-flex convierte el <span> en contenedor flex: el
             texto pasa a ser un item anonimo con min-width auto, no encoge y
             text-overflow nunca recorta, que es justo lo que este bloque
             pretende evitar (el badge termina empujado fuera del sidebar).
           - max-width:80% pelea con el flex:1 1 auto de abajo.
           La variante Sidr conserva su inline-flex !important mas abajo. */
        display: block;
        margin-left: 0;
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    ul.menu li > a .badge,
    ul.sidr-class-menu li > a .sidr-class-badge {
        border-radius: 999px;
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        margin-left: auto;
        padding: 0.2em 0.55em;
    }
    /* Bootstrap's own .badge-danger/.ml-1 never match here either, since Sidr
       renamed them to .sidr-class-badge-danger/.sidr-class-ml-1 — recreate the
       two variants the mobile menu actually uses. */
    ul.sidr-class-menu li > a .sidr-class-badge-danger {
        color: #fff !important;
        background-color: #dc3545 !important;
        width: auto !important;
    }
    ul.sidr-class-menu li > a .sidr-class-ml-1 {
        margin-left: 0.25rem !important;
    }
    /* Sidr's own CSS treats a bare <li><span> as a row: block display (stacks
       it under the icon instead of beside it) plus a border-bottom. This span
       is nested inside the link, not a row of its own — override both. */
    ul.sidr-class-menu li > a span {
        display: inline-flex !important;
        align-items: center;
        border-bottom: 0 !important;
    }
    ul.menu .divider,
    .menu .divider,
    ul.sidr-class-menu .sidr-class-divider {
        background-color: rgba(255, 255, 255, 0.1) !important;
        height: 1px !important;
        margin: 10px 16px !important;
    }
    ul.menu li.active > a,
    ul.sidr-class-menu li.sidr-class-active > a {
        background-image: none !important;
        box-shadow: none !important;
        color: #ffffff;
        font-weight: 600;
    }
    ul.menu li.active > a::after,
    ul.sidr-class-menu li.sidr-class-active > a::after {
        content: none !important;
        display: none !important;
    }
    /* Deliberadamente SIN overflow:hidden. El clip recortaba cualquier menú
       abierto dentro del card (selectize, typeahead de searcher.php, dropdowns
       de Bootstrap): un menú position:absolute escapa de su campo, nunca del
       clip de un ancestro. Las esquinas se conservan al revés: el card es la
       única superficie que pinta, todo lo que va a sangre dentro de él queda
       transparente (regla .table de abajo y .card-body del tema oscuro), y el
       hijo que quede pegado a un borde hereda el radio. */
    .card:not(.border-0) {
        border: 1px solid var(--brand-ui-line);
        border-radius: var(--brand-ui-surface-radius);
        box-shadow: var(--brand-ui-shadow);
    }
    /* 'inherit' y no el token: .card.border-0 y .accordion > .card tienen radio
       propio (0) y un hijo nunca debe redondear más que su contenedor. Sin
       :not(.border-0) a propósito, para que ese caso herede el 0. */
    .card > :first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }
    .card > :last-child {
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
    }
    .card > table.table:only-child {
        margin-bottom: 0;
    }
    /* Stacked surfaces (card, table, table-responsive) with no wrapping column/gap
       between them otherwise touch borders directly — space first, then border. */
    .card + .card,
    .card + .table-responsive,
    .table-responsive + .card,
    .table-responsive + .table-responsive,
    .table + .table,
    .card + .table,
    .table + .card,
    .table + .table-responsive,
    .table-responsive + .table {
        margin-top: 20px;
    }
    .card > .card-header:first-child {
        border-radius: calc(var(--brand-ui-surface-radius) - 1px) calc(var(--brand-ui-surface-radius) - 1px) 0 0;
    }
    .card > .card-footer:last-child {
        border-radius: 0 0 calc(var(--brand-ui-surface-radius) - 1px) calc(var(--brand-ui-surface-radius) - 1px);
    }
    .accordion > .card {
        border-radius: 0;
        box-shadow: none;
    }
    .accordion > .card > .card-header {
        border-radius: 0;
    }
    /* Tables stay square in Bootstrap because reboot uses border-collapse:collapse
       (radius on <table> is ignored). Clip via .table-responsive; bare bordered
       tables use separate borders + corner cells. Do not edit vendor bootstrap.css.
       overflow-x: auto (no 'overflow: hidden') porque cualquier valor distinto de
       visible ya recorta las esquinas, pero 'hidden' ademas mata el scroll
       horizontal que .table-responsive aporta en Bootstrap: las tablas anchas
       quedaban cortadas sin forma de desplazarlas. */
    .table-responsive {
        border: 1px solid var(--brand-ui-line);
        border-radius: var(--brand-ui-surface-radius);
        overflow-x: auto;
    }
    .table-responsive > .table {
        margin-bottom: 0;
    }
    .table-responsive > .table.table-bordered {
        border: 0;
    }
    .table.table-bordered th,
    .table.table-bordered td {
        border-color: var(--brand-ui-line) !important;
    }
    .table-bordered thead th,
    .table-bordered thead td {
        border-bottom-color: var(--brand-ui-line) !important;
    }
    /* No overflow:hidden here — it would clip any dropdown/typeahead menu
       opened from a cell (position:absolute escapes the cell but not an
       ancestor's overflow clip). Rounding comes only from the corner-cell
       radius rules below; a transparent cell over a table with its own dark
       background can still show a faint square peek at the very corner in
       dark mode, but that's a much smaller defect than a hidden dropdown. */
    table.table.table-bordered {
        border-collapse: separate;
        border-spacing: 0;
        border-radius: var(--brand-ui-surface-radius);
    }
    table.table.table-bordered thead tr:first-child th:first-child,
    table.table.table-bordered thead tr:first-child td:first-child,
    table.table.table-bordered > tbody:first-child > tr:first-child > th:first-child,
    table.table.table-bordered > tbody:first-child > tr:first-child > td:first-child {
        border-top-left-radius: var(--brand-ui-surface-radius);
    }
    table.table.table-bordered thead tr:first-child th:last-child,
    table.table.table-bordered thead tr:first-child td:last-child,
    table.table.table-bordered > tbody:first-child > tr:first-child > th:last-child,
    table.table.table-bordered > tbody:first-child > tr:first-child > td:last-child {
        border-top-right-radius: var(--brand-ui-surface-radius);
    }
    table.table.table-bordered tbody tr:last-child th:first-child,
    table.table.table-bordered tbody tr:last-child td:first-child,
    table.table.table-bordered tfoot tr:last-child th:first-child,
    table.table.table-bordered tfoot tr:last-child td:first-child {
        border-bottom-left-radius: var(--brand-ui-surface-radius);
    }
    table.table.table-bordered tbody tr:last-child th:last-child,
    table.table.table-bordered tbody tr:last-child td:last-child,
    table.table.table-bordered tfoot tr:last-child th:last-child,
    table.table.table-bordered tfoot tr:last-child td:last-child {
        border-bottom-right-radius: var(--brand-ui-surface-radius);
    }
    /* A thead-only table (no tbody/tfoot at all, e.g. a single-row toolbar)
       never matches the tbody/tfoot rules above, so its bottom stayed square
       even standalone. thead:last-child is true only when thead is the sole
       section (no tbody/tfoot after it) — round it too. No exception for a
       following .table sibling: every .table + .table now gets the standard
       20px gap (no template sets .m-0 between two of these any more), so
       each table is always its own fully independent rounded box. */
    table.table.table-bordered thead:last-child tr:last-child th:first-child,
    table.table.table-bordered thead:last-child tr:last-child td:first-child {
        border-bottom-left-radius: var(--brand-ui-surface-radius);
    }
    table.table.table-bordered thead:last-child tr:last-child th:last-child,
    table.table.table-bordered thead:last-child tr:last-child td:last-child {
        border-bottom-right-radius: var(--brand-ui-surface-radius);
    }
    .table-responsive > table.table.table-bordered,
    .table-responsive > table.table.table-bordered thead tr:first-child th:first-child,
    .table-responsive > table.table.table-bordered thead tr:first-child th:last-child,
    .table-responsive > table.table.table-bordered thead tr:first-child td:first-child,
    .table-responsive > table.table.table-bordered thead tr:first-child td:last-child,
    .table-responsive > table.table.table-bordered tbody tr:last-child th:first-child,
    .table-responsive > table.table.table-bordered tbody tr:last-child th:last-child,
    .table-responsive > table.table.table-bordered tbody tr:last-child td:first-child,
    .table-responsive > table.table.table-bordered tbody tr:last-child td:last-child {
        border-radius: 0;
    }
    .btn, .form-control, .custom-select, .input-group-text {
        border-radius: var(--brand-ui-control-radius);
    }
    .btn {
        font-weight: 500;
        transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .form-control, .custom-select {
        border-color: var(--brand-ui-control-line);
    }
    .invalid-feedback { color: #b42318; }
    .valid-feedback { color: #176b3a; }
    .form-control:focus, .custom-select:focus {
        border-color: var(--brand-primary, #013c81);
    }
    .btn:focus-visible, .form-control:focus-visible, .custom-select:focus-visible,
    .custom-control-input:focus-visible ~ .custom-control-label::before,
    .nav-link:focus-visible, .dropdown-item:focus-visible, .page-link:focus-visible,
    .close:focus-visible,
    body.full > .container-scroller > .container-fluid > .row > .content-wrapper > .submenu > ul > li > a:focus-visible {
        outline: 2px solid #202938;
        outline-offset: 2px;
    }
    /* Sidebar/Sidr links sit on the always-dark brand shell regardless of theme;
       the dark outline above would vanish there, so they get their own light ring. */
    ul.menu li > a:focus-visible,
    ul.sidr-class-menu li > a:focus-visible,
    .sidr a:focus-visible {
        outline: 2px solid #bfdbfe;
        outline-offset: 2px;
    }
    .dropdown-menu {
        border-color: var(--brand-ui-line);
        border-radius: var(--brand-ui-control-radius);
        box-shadow: 0 8px 24px rgba(32, 41, 56, .12);
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
    .dropdown-item {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
    .modal-content {
        border-color: var(--brand-ui-line);
        border-radius: var(--brand-ui-surface-radius);
        box-shadow: 0 16px 48px rgba(32, 41, 56, .16);
    }
    /* Legacy Bootstrap also paints .modal-content form white. Inherit the
       dialog surface instead of creating a second, conflicting surface. */
    .modal-content > form {
        background-color: inherit;
        color: inherit;
        border: 0;
        border-radius: inherit;
    }
    .modal-header {
        background-color: var(--brand-card-header-background, #fff);
        color: var(--brand-card-header-text, #202938);
        border-bottom-color: var(--brand-ui-line);
        border-top-left-radius: calc(var(--brand-ui-surface-radius) - 1px);
        border-top-right-radius: calc(var(--brand-ui-surface-radius) - 1px);
    }
    .modal-body small, .modal-body label { color: #667085; }
    .modal-content > .modal-footer:last-child,
    .modal-content > form > .modal-footer:last-child {
        border-bottom-left-radius: calc(var(--brand-ui-surface-radius) - 1px);
        border-bottom-right-radius: calc(var(--brand-ui-surface-radius) - 1px);
    }
    .modal-footer {
        background-color: var(--brand-card-footer-background, #fff);
        color: var(--brand-card-footer-text, #202938);
        border-top-color: var(--brand-ui-line);
    }
    .alert, .list-group {
        border-radius: var(--brand-ui-control-radius);
    }
}
@media screen and (max-width: 575.98px) {
    .btn {
        min-height: 44px;
    }
    .btn-sm, .btn-lg, .input-group-sm > .input-group-append > .btn,
    .input-group-sm > .input-group-prepend > .btn,
    .btn-group-sm > .btn, .btn-group-lg > .btn {
        min-height: 0;
    }
}
@media screen and (prefers-reduced-motion: reduce) {
    .btn,
    ul.menu li > a,
    ul.sidr-class-menu li > a {
        transition: none;
    }
}
@media screen {
    .brand-theme-selector {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin-top: 1.25rem;
    }
    .brand-theme-selector__toggle {
        align-items: center;
        background: var(--brand-ui-surface, #fff);
        border: 1px solid var(--brand-ui-line, #e1e7ef);
        border-radius: 999px;
        box-shadow: var(--brand-ui-shadow);
        color: var(--brand-ui-ink, #202938);
        cursor: pointer;
        display: inline-flex;
        font: inherit;
        font-size: .875rem;
        font-weight: 600;
        gap: .5rem;
        line-height: 1.2;
        min-height: 44px;
        min-width: 44px;
        padding: .5rem .9rem;
    }
    .brand-theme-selector__toggle:hover {
        border-color: var(--brand-ui-control-line, #8591a3);
    }
    .brand-theme-selector__toggle:focus-visible {
        outline: 2px solid var(--brand-ui-link, #013c81);
        outline-offset: 2px;
    }
    .brand-theme-selector__toggle i {
        font-size: 1rem;
        line-height: 1;
    }
    .brand-theme-selector__status {
        color: var(--brand-ui-muted, #667085);
        font-weight: 600;
    }
    [data-brand-theme="dark"] .brand-theme-selector__toggle {
        background: var(--brand-ui-surface);
        border-color: var(--brand-ui-line);
        color: var(--brand-ui-ink);
    }
    [data-brand-theme="dark"] .brand-theme-selector__status {
        color: var(--brand-ui-muted);
    }
    .container-footer #poweredby {
        align-items: center;
        border: 1px solid transparent;
        border-radius: var(--brand-ui-control-radius, 8px);
        display: inline-flex;
        margin-left: .5rem;
        max-width: min(100%, 320px);
        min-height: 44px;
        opacity: 1;
        padding: .25rem .5rem;
        transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
        vertical-align: middle;
    }
    .container-footer #poweredby:hover {
        background-color: var(--brand-ui-raised, rgba(255, 255, 255, .08));
        border-color: var(--brand-ui-line, rgba(255, 255, 255, .24));
        opacity: 1;
    }
    /* --brand-ui-raised/--brand-ui-line are near-white in light mode, so the
       hover above is barely visible there. Give light the same visible chip
       dark gets, using a dark-on-light overlay instead of the pale tokens —
       the footer background is admin-configurable, so a relative overlay
       survives any brand color while a fixed light hex would not. */
    :root[data-brand-theme="light"] .container-footer #poweredby:hover {
        background-color: rgba(0, 0, 0, .06);
        border-color: rgba(0, 0, 0, .16);
    }
    .container-footer #poweredby img {
        display: block;
        height: 38px;
        margin: 0;
        max-height: 38px;
        max-width: min(100%, 280px);
        width: auto;
    }
    @media screen and (max-width: 575.98px) {
        .container-footer #poweredby {
            display: flex;
            margin: .5rem auto 0;
            width: fit-content;
        }
        .container-footer #poweredby img {
            height: 34px;
            max-width: min(100%, 250px);
        }
    }
    :root[data-brand-theme="light"] {
        color-scheme: light;
        /* Stark content-wrapper is #eee; keep the active notch matching that plane. */
        --brand-content-background: #eeeeee;
    }
    :root[data-brand-theme="dark"] {
        color-scheme: dark;
        /* Softer dark so shell/menu and work area stay distinct. */
        --brand-ui-canvas: #2c2c2c;
        --brand-ui-surface: #363636;
        --brand-ui-raised: #414141;
        --brand-ui-ink: #ededed;
        --brand-ui-muted: #bdbdbd;
        --brand-ui-line: #6e6e6e;
        --brand-ui-control-line: #8a8a8a;
        --brand-ui-link: #93c5fd;
        --brand-ui-shadow: 0 2px 8px rgba(0, 0, 0, .18);
        --brand-content-background: var(--brand-ui-canvas);
    }
    /* !important is limited to dark mode where legacy branding/utilities force colors. */
    [data-brand-theme="dark"] body,
    [data-brand-theme="dark"] body.full {
        background-color: var(--brand-ui-canvas) !important;
        color: var(--brand-ui-ink);
    }
    [data-brand-theme="dark"] .sidebar,
    [data-brand-theme="dark"] .sidr,
    [data-brand-theme="dark"] .topbar,
    [data-brand-theme="dark"] .container-scroller-header {
        background-color: var(--brand-shell-background, #1f1f1f) !important;
        color: var(--brand-shell-text, var(--brand-ui-ink));
    }
    [data-brand-theme="dark"] .content-wrapper,
    [data-brand-theme="dark"] .container-scroller {
        background-color: var(--brand-ui-canvas) !important;
        color: var(--brand-ui-ink);
    }
    [data-brand-theme="dark"] .bg-white,
    [data-brand-theme="dark"] .bg-light {
        background-color: var(--brand-ui-canvas) !important;
        color: var(--brand-ui-ink);
    }
    [data-brand-theme="dark"] .card,
    [data-brand-theme="dark"] .modal-content,
    [data-brand-theme="dark"] .dropdown-menu,
    [data-brand-theme="dark"] .list-group-item,
    [data-brand-theme="dark"] .jconfirm .jconfirm-box {
        background-color: var(--brand-ui-surface);
        color: var(--brand-ui-ink);
        border-color: var(--brand-ui-line) !important;
    }
    /* Transparente, no var(--brand-ui-surface) como sus hermanas de arriba:
       .card-body siempre vive dentro de un .card que ya pinta ese mismo color,
       así que un relleno opaco aquí es redundante — y como el card ya no
       recorta (ver .card:not(.border-0) arriba), ese cuadrado opaco taparía la
       esquina redondeada. Transparente deja ver el fondo del propio card.
       Esta es la pieza que sostiene todo el esquema: nada dentro del card
       pinta su propio fondo a sangre. */
    [data-brand-theme="dark"] .card-body {
        background-color: transparent;
        color: var(--brand-ui-ink);
    }
    [data-brand-theme="dark"] .card .card-header,
    [data-brand-theme="dark"] .modal-header {
        background-color: var(--brand-card-header-background, var(--brand-ui-raised)) !important;
        color: var(--brand-card-header-text, var(--brand-ui-ink)) !important;
        border-color: var(--brand-ui-line) !important;
    }
    [data-brand-theme="dark"] .card .card-footer,
    [data-brand-theme="dark"] .modal-footer {
        background-color: var(--brand-card-footer-background, var(--brand-ui-raised)) !important;
        color: var(--brand-card-footer-text, var(--brand-ui-ink)) !important;
        border-color: var(--brand-ui-line) !important;
    }
    [data-brand-theme="dark"] .card .card-header a.nav-link,
    [data-brand-theme="dark"] .card .card-header .btn-link {
        color: var(--brand-card-header-text, var(--brand-ui-ink)) !important;
    }
    [data-brand-theme="dark"] .form-control,
    [data-brand-theme="dark"] .custom-select,
    [data-brand-theme="dark"] .custom-file-label,
    [data-brand-theme="dark"] .input-group-text {
        background-color: var(--brand-ui-surface);
        color: var(--brand-ui-ink);
        border-color: var(--brand-ui-control-line);
    }
    [data-brand-theme="dark"] .form-control:disabled,
    [data-brand-theme="dark"] .form-control[readonly],
    [data-brand-theme="dark"] .custom-select:disabled {
        background-color: var(--brand-ui-raised);
        color: var(--brand-ui-muted);
    }
    [data-brand-theme="dark"] .form-control::placeholder { color: var(--brand-ui-muted); opacity: 1; }
    [data-brand-theme="dark"] .custom-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3E%3Cpath fill='%23e5eaf1' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
    }
    [data-brand-theme="dark"] .text-dark,
    [data-brand-theme="dark"] .text-body,
    [data-brand-theme="dark"] .text-black-50 { color: var(--brand-ui-ink) !important; }
    [data-brand-theme="dark"] .modal-body small,
    [data-brand-theme="dark"] .modal-body label { color: var(--brand-ui-muted); }
    [data-brand-theme="dark"] .text-muted,
    [data-brand-theme="dark"] .text-secondary { color: var(--brand-ui-muted) !important; }
    [data-brand-theme="dark"] .content-wrapper a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.list-group-item),
    [data-brand-theme="dark"] .btn-link { color: var(--brand-ui-link); }
    [data-brand-theme="dark"] .text-primary { color: var(--brand-ui-link) !important; }
    [data-brand-theme="dark"] .btn-outline-primary:not(:hover):not(:active):not(.active) { color: var(--brand-ui-link) !important; border-color: var(--brand-ui-link) !important; }
    [data-brand-theme="dark"] .btn-outline-primary:hover,
    [data-brand-theme="dark"] .btn-outline-primary:active,
    [data-brand-theme="dark"] .btn-outline-primary.active,
    [data-brand-theme="dark"] .show > .btn-outline-primary.dropdown-toggle {
        background-color: var(--brand-primary, #013c81) !important;
        color: var(--brand-primary-text, #fff) !important;
    }
    [data-brand-theme="dark"] .dropdown-item { color: var(--brand-ui-ink); }
    [data-brand-theme="dark"] .dropdown-item:not(.active):not(:active):hover,
    [data-brand-theme="dark"] .dropdown-item:not(.active):not(:active):focus,
    [data-brand-theme="dark"] .list-group-item-action:hover {
        background-color: var(--brand-ui-raised);
        color: var(--brand-ui-ink);
    }
    [data-brand-theme="dark"] .dropdown-item.disabled { color: var(--brand-ui-muted); }
    [data-brand-theme="dark"] .nav-tabs .nav-link.active,
    [data-brand-theme="dark"] .page-link {
        background-color: var(--brand-ui-surface);
        color: var(--brand-ui-link);
        border-color: var(--brand-ui-line);
    }
    [data-brand-theme="dark"] .page-item.active .page-link {
        background-color: var(--brand-primary, #013c81);
        color: var(--brand-primary-text, #fff);
    }
    [data-brand-theme="dark"] .page-item.disabled .page-link { color: var(--brand-ui-muted); }
    [data-brand-theme="dark"] .table {
        background-color: var(--brand-ui-raised);
        color: var(--brand-ui-ink);
        border-color: var(--brand-ui-control-line);
    }
    [data-brand-theme="dark"] .table-responsive {
        background-color: var(--brand-ui-raised);
        border: 1px solid var(--brand-ui-line);
        border-radius: var(--brand-ui-surface-radius);
        /* overflow-x: auto igual que la regla clara: 'overflow: hidden' aquí
           pisaba el scroll horizontal de Bootstrap en tema oscuro. */
        overflow-x: auto;
    }
    [data-brand-theme="dark"] .table-responsive > .table {
        background-color: transparent;
        border: 0;
        margin-bottom: 0;
    }
    /* Misma idea para la tabla a sangre que cuelga directo del card (el patrón
       de las tablas de detalle con xeditable): sin el clip, su fondo propio
       tapaba la esquina redondeada. Transparente deja ver el del card. */
    [data-brand-theme="dark"] .card > .table {
        background-color: transparent;
    }
    [data-brand-theme="dark"] .table th,
    [data-brand-theme="dark"] .table td {
        background-color: transparent;
        border-color: var(--brand-ui-line) !important;
        color: inherit;
    }
    [data-brand-theme="dark"] .table thead th,
    [data-brand-theme="dark"] .table thead td {
        background-color: var(--brand-card-header-background, #333333);
        color: var(--brand-card-header-text, var(--brand-ui-ink));
    }
    [data-brand-theme="dark"] .table-bordered {
        border: 1px solid var(--brand-ui-control-line);
    }
    [data-brand-theme="dark"] .table-bordered thead th,
    [data-brand-theme="dark"] .table-bordered thead td,
    [data-brand-theme="dark"] table.bt tbody td::before {
        background-color: var(--brand-card-header-background, #333333) !important;
        color: var(--brand-card-header-text, var(--brand-ui-ink)) !important;
    }
    /* thead:last-child = thead is the table's only section (no tbody/tfoot) —
       a standalone card/toolbar, not a header row above data rows. Give it
       the same raised tone as everything else instead of the darker "table
       header" tone above, so it doesn't read as a different, darker box next
       to a sibling .table.table-bordered that's really the same surface. */
    [data-brand-theme="dark"] .table-bordered thead:last-child th,
    [data-brand-theme="dark"] .table-bordered thead:last-child td {
        background-color: transparent !important;
        color: inherit !important;
    }
    [data-brand-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .04); }
    [data-brand-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, .07); color: var(--brand-ui-ink); }
    /* Bootstrap's table variants keep their light pastel background as-is; only
       forcing dark ink left links (colored via --brand-ui-link) unreadable on
       top of it. Tint the surface dark instead, like .text-danger/.text-success
       already do, so both body text and links stay legible. */
    [data-brand-theme="dark"] .table-success, [data-brand-theme="dark"] .table-success > th, [data-brand-theme="dark"] .table-success > td {
        background-color: rgba(117, 219, 165, .16) !important;
        color: var(--brand-ui-ink) !important;
    }
    [data-brand-theme="dark"] .table-warning, [data-brand-theme="dark"] .table-warning > th, [data-brand-theme="dark"] .table-warning > td {
        background-color: rgba(255, 203, 116, .16) !important;
        color: var(--brand-ui-ink) !important;
    }
    [data-brand-theme="dark"] .table-danger, [data-brand-theme="dark"] .table-danger > th, [data-brand-theme="dark"] .table-danger > td {
        background-color: rgba(255, 137, 151, .16) !important;
        color: var(--brand-ui-ink) !important;
    }
    [data-brand-theme="dark"] .table-info, [data-brand-theme="dark"] .table-info > th, [data-brand-theme="dark"] .table-info > td {
        background-color: rgba(129, 212, 229, .16) !important;
        color: var(--brand-ui-ink) !important;
    }
    [data-brand-theme="dark"] .table-light, [data-brand-theme="dark"] .table-light > th, [data-brand-theme="dark"] .table-light > td {
        background-color: var(--brand-ui-raised) !important;
        color: var(--brand-ui-ink) !important;
    }
    [data-brand-theme="dark"] .table-success a,
    [data-brand-theme="dark"] .table-warning a,
    [data-brand-theme="dark"] .table-danger a,
    [data-brand-theme="dark"] .table-info a,
    [data-brand-theme="dark"] .table-light a { color: var(--brand-ui-link) !important; }
    [data-brand-theme="dark"] .white,
    [data-brand-theme="dark"] .bg-white {
        background: var(--brand-ui-raised) !important;
        background-color: var(--brand-ui-raised) !important;
        color: var(--brand-ui-ink);
    }
    [data-brand-theme="dark"] .inputGroup {
        background-color: var(--brand-ui-raised);
    }
    [data-brand-theme="dark"] .inputGroup label {
        color: var(--brand-ui-ink);
    }
    [data-brand-theme="dark"] .close { color: inherit; text-shadow: none; }
    [data-brand-theme="dark"] hr,
    [data-brand-theme="dark"] .dropdown-divider,
    [data-brand-theme="dark"] .nav-tabs { border-color: var(--brand-ui-line); }
    [data-brand-theme="dark"] .form-control.is-invalid,
    [data-brand-theme="dark"] .custom-select.is-invalid,
    [data-brand-theme="dark"] .was-validated .form-control:invalid { border-color: #ff8997; }
    [data-brand-theme="dark"] .invalid-feedback { color: #ff8997; }
    [data-brand-theme="dark"] .text-danger { color: #ff8997 !important; }
    [data-brand-theme="dark"] .text-success { color: #75dba5 !important; }
    [data-brand-theme="dark"] .text-info { color: #81d4e5 !important; }
    [data-brand-theme="dark"] .form-control:focus,
    [data-brand-theme="dark"] .custom-select:focus { border-color: var(--brand-ui-link); }
    [data-brand-theme="dark"] .form-control.is-valid,
    [data-brand-theme="dark"] .custom-select.is-valid,
    [data-brand-theme="dark"] .was-validated .form-control:valid { border-color: #75dba5; }
    [data-brand-theme="dark"] .valid-feedback { color: #75dba5; }
    [data-brand-theme="dark"] .btn:focus-visible,
    [data-brand-theme="dark"] .form-control:focus-visible,
    [data-brand-theme="dark"] .custom-select:focus-visible,
    [data-brand-theme="dark"] .custom-control-input:focus-visible ~ .custom-control-label::before,
    [data-brand-theme="dark"] .nav-link:focus-visible,
    [data-brand-theme="dark"] .dropdown-item:focus-visible,
    [data-brand-theme="dark"] .page-link:focus-visible,
    [data-brand-theme="dark"] .close:focus-visible,
    [data-brand-theme="dark"] body.full > .container-scroller > .container-fluid > .row > .content-wrapper > .submenu > ul > li > a:focus-visible { outline-color: #bfdbfe; }
}
@media print { .brand-theme-selector { display: none !important; } }
@media screen {
    /* Evidencias uses its own surfaces, outside Bootstrap's .card contract.
       Keep this adapter in the shared skin; leave document/image pixels intact. */
    :root[data-brand-theme="dark"] :is(
        .evidencias-page, .evidencias-modal, .evidencias-history-dialog .jconfirm-content
    ) { color: var(--brand-ui-ink); }
    :root[data-brand-theme="dark"] :is(
        .evidencias-page__hero, .evidencias-page__surface, .evidencia-card,
        .evidencias-modal, .evidencias-stack__result, .evidencias-history__entry,
        .evidencias-approval-layout__form, .evidencias-approval-preview
    ) {
        background: var(--brand-ui-surface);
        border-color: var(--brand-ui-line);
        color: var(--brand-ui-ink);
    }
    :root[data-brand-theme="dark"] :is(
        .evidencias-page__total, .evidencias-page__live, .evidencias-page__tabs,
        .evidencias-toolbar, .evidencias-view-toggle, .evidencias-loading,
        .evidencia-card__header, .evidencia-card__meta-item, .evidencia-card__file,
        .evidencias-pagination, .evidencias-modal__context, .evidencias-identity-editor,
        .evidencias-stack__summary, .evidencias-history__context, .evidencias-history__stat,
        .evidencias-history__message, .evidencias-history__empty, .evidencias-history__loading,
        .evidencias-history__error, .evidencias-approval-preview__heading
    ) {
        background: var(--brand-ui-raised);
        border-color: var(--brand-ui-line);
        color: var(--brand-ui-ink);
    }
    :root[data-brand-theme="dark"] :is(
        .evidencias-page__hero h3, .evidencias-page__total strong,
        .evidencia-card__identity strong, .evidencia-card__meta-item strong,
        .evidencia-card__file-copy strong, .evidencias-state h5,
        .evidencias-stack__result strong, .evidencias-modal__context strong,
        .evidencias-identity-editor__header h6, .evidencias-approval-preview__heading strong,
        .evidencias-toolbar__field label, .evidencias-modal .form-group label
    ) { color: var(--brand-ui-ink); }
    :root[data-brand-theme="dark"] :is(
        .evidencias-page__eyebrow, .evidencias-page__hero p,
        .evidencias-page__total span, .evidencias-page__live, .evidencias-loading__copy,
        .evidencia-card__identity span, .evidencia-card__waiting, .evidencia-card__label,
        .evidencia-card__meta-item strong.is-empty, .evidencia-document-preview__loading,
        .evidencia-document-preview__empty, .evidencia-document-preview__empty i,
        .evidencias-stack__result small, .evidencias-modal__context span,
        .evidencias-identity-editor__header p, .evidencias-identity-editor__status,
        .evidencias-modal--file .modal-title small, .evidencias-approval-preview__heading span,
        .evidencias-history__subtitle, .evidencias-history__context-label,
        .evidencias-history__context-meta, .evidencias-history__stat span,
        .evidencias-history__meta
    ) { color: var(--brand-ui-muted); }
    :root[data-brand-theme="dark"] :is(
        .evidencia-card__actions, .evidencias-queue-grid--list .evidencia-card__header,
        .evidencia-document-preview, .evidencia-card:hover
    ) { border-color: var(--brand-ui-line); }
    :root[data-brand-theme="dark"] :is(
        .evidencia-document-preview, .evidencia-document-preview__media-wrap,
        .evidencias-loading .progress, .evidencias-stack__progress .progress
    ) { background: var(--brand-ui-canvas); }
    :root[data-brand-theme="dark"] .evidencias-page__tabs .nav-link {
        color: var(--brand-ui-muted);
    }
    :root[data-brand-theme="dark"] .evidencias-page__tabs .nav-link:hover,
    :root[data-brand-theme="dark"] .evidencias-page__tabs .nav-link.active {
        background: var(--brand-ui-surface);
        color: var(--brand-ui-link);
        border-color: var(--brand-ui-line);
    }
    :root[data-brand-theme="dark"] .evidencias-page__tabs .nav-link.active:after {
        background: var(--brand-ui-surface);
    }
    :root[data-brand-theme="dark"] .evidencias-view-toggle .btn { color: var(--brand-ui-muted); }
    :root[data-brand-theme="dark"] .evidencias-view-toggle .btn:hover,
    :root[data-brand-theme="dark"] .evidencias-view-toggle .btn.is-active {
        background: var(--brand-ui-surface);
        color: var(--brand-ui-link);
    }
    :root[data-brand-theme="dark"] .evidencias-modal .modal-header {
        background: var(--brand-card-header-background, var(--brand-ui-raised)) !important;
        color: var(--brand-card-header-text, var(--brand-ui-ink)) !important;
    }
    :root[data-brand-theme="dark"] .evidencias-modal .modal-header .close {
        color: inherit;
    }
    :root[data-brand-theme="dark"] .evidencias-state {
        background: var(--brand-ui-surface);
        border-color: var(--brand-ui-line);
        color: var(--brand-ui-muted);
    }
    :root[data-brand-theme="dark"] .evidencias-state--success { border-color: #75dba5; }
    :root[data-brand-theme="dark"] .evidencias-state--error { border-color: #ff8997; }
    :root[data-brand-theme="dark"] :is(.evidencias-page, .evidencias-modal) .btn-outline-secondary:not(:hover):not(:active):not(.active) {
        color: var(--brand-ui-muted) !important;
        border-color: var(--brand-ui-control-line) !important;
    }
    :root[data-brand-theme="dark"] :is(.evidencias-page, .evidencias-modal) .btn-outline-info:not(:hover):not(:active):not(.active) {
        color: #81d4e5;
        border-color: #81d4e5;
    }
    :root[data-brand-theme="dark"] :is(.evidencias-page, .evidencias-modal) .btn-outline-danger:not(:hover):not(:active):not(.active) {
        color: #ff8997;
        border-color: #ff8997;
    }
    :root[data-brand-theme="dark"] :is(.evidencias-page, .evidencias-modal) :is(.form-control, .input-group-text) {
        background-color: var(--brand-ui-surface);
        border-color: var(--brand-ui-control-line);
        color: var(--brand-ui-ink);
    }
    :root[data-brand-theme="dark"] .evidencias-identity-editor.is-saving .form-control {
        background-color: var(--brand-ui-raised);
    }
    :root[data-brand-theme="dark"] .evidencias-modal .form-control.is-invalid { border-color: #ff8997; }
    :root[data-brand-theme="dark"] :is(.evidencias-page, .evidencias-modal) :focus-visible {
        outline-color: #bfdbfe;
    }
}
@media screen {
    /* Home's custom cards consume semantic tokens as well as legacy literals. */
    :root[data-brand-theme="dark"] :is(.home-dashboard, .home-academic) {
        --home-ink: var(--brand-ui-ink);
        --home-muted: var(--brand-ui-muted);
        --home-line: var(--brand-ui-line);
        --home-surface: var(--brand-ui-raised);
        --academic-ink: var(--brand-ui-ink);
        --academic-muted: var(--brand-ui-muted);
        --academic-line: var(--brand-ui-line);
        /* Dark's hero is a flat surface, not the light-mode gradient — the
           regular reactive muted tone already reads fine there. */
        --home-hero-copy: var(--brand-ui-muted);
        --academic-hero-copy: var(--brand-ui-muted);
    }
    :root[data-brand-theme="dark"] :is(
        .home-dashboard__hero, .home-dashboard__surface, .home-dashboard__toolbar,
        .home-quota-block, .home-dashboard .card,
        .home-dashboard__content--list .table, .home-dashboard__content--badges .table,
        .home-academic__hero, .home-academic__schedule
    ) {
        background: var(--brand-ui-surface);
        border-color: var(--brand-ui-line);
        color: var(--brand-ui-ink);
    }
    :root[data-brand-theme="dark"] :is(
        .home-insights, .home-insights__summary, .home-quota-block__header,
        .home-dashboard__event, .home-dashboard__views .nav-link,
        .home-academic__event, .home-academic__empty
    ) {
        background: var(--brand-ui-raised);
        border-color: var(--brand-ui-line);
        color: var(--brand-ui-ink);
    }
    /* home.css hardcodes rgba(255,255,255,.82) on each metric pill — the dark ink
       we give dt/dd below then sits on a near-white chip, unreadable. */
    :root[data-brand-theme="dark"] .home-insights__summary > div {
        background: var(--brand-ui-surface);
        border-color: var(--brand-ui-line);
    }
    :root[data-brand-theme="dark"] :is(
        .home-insights__copy h3, .home-insights__summary dd, .home-quota-row__name,
        .home-dashboard__hero h2, .home-dashboard__toolbar-copy h3,
        .home-dashboard-search__label, .home-dashboard__empty h3,
        .home-academic__hero h2, .home-academic__empty h3,
        .home-dashboard-scan__heading .modal-title, .home-dashboard-scan__heading label,
        .home-academic-modal .modal-title, .home-academic-modal__field label
    ) { color: var(--brand-ui-ink); }
    :root[data-brand-theme="dark"] :is(
        .home-realtime, .home-insights__copy p, .home-insights__summary dt,
        .home-quota-row__label, .home-dashboard__toolbar-copy p,
        .home-dashboard__view-copy small, .home-dashboard__empty p,
        .home-academic__scroll-hint, .home-academic__no-class, .home-academic__empty p,
        .home-dashboard__content--cards .row > [class*="col-"] > .card > .table td
    ) { color: var(--brand-ui-muted); }
    :root[data-brand-theme="dark"] :is(
        .home-dashboard__eyebrow, .home-academic__eyebrow, .home-insights__eyebrow,
        .home-realtime__retry
    ) { color: var(--brand-ui-link); }
    :root[data-brand-theme="dark"] .home-dashboard__views .nav-link:hover,
    :root[data-brand-theme="dark"] .home-dashboard__views .nav-link.active {
        background: var(--brand-ui-surface);
        border-color: var(--brand-ui-link);
        color: var(--brand-ui-link);
    }
    :root[data-brand-theme="dark"] .home-dashboard .card .card-header {
        background: var(--brand-card-header-background, var(--brand-ui-raised)) !important;
        color: var(--brand-card-header-text, var(--brand-ui-ink)) !important;
        border-color: var(--brand-ui-line);
    }
    :root[data-brand-theme="dark"] .home-dashboard .card .card-header :is(h5, h6) { color: inherit; }
    :root[data-brand-theme="dark"] :is(
        .home-dashboard__content--list .table thead th,
        .home-dashboard__content--badges .table thead th,
        .home-academic__schedule .table thead th
    ) {
        background: var(--brand-ui-raised);
        color: var(--brand-ui-ink);
        border-color: var(--brand-ui-line);
    }
    :root[data-brand-theme="dark"] .home-realtime.is-error { color: #ff8997; }
    :root[data-brand-theme="dark"] :is(.home-dashboard, .home-academic, .home-academic-modal) :focus-visible {
        outline-color: #bfdbfe;
    }
}.table.table-bordered > thead:last-child > tr:last-child > th:first-child, .table.table-bordered > thead:last-child > tr:last-child > td:first-child { border-bottom-left-radius: var(--brand-ui-surface-radius); }.table.table-bordered > thead:last-child > tr:last-child > th:last-child, .table.table-bordered > thead:last-child > tr:last-child > td:last-child { border-bottom-right-radius: var(--brand-ui-surface-radius); }.table.table-bordered > tbody:first-child > tr:first-child > th:first-child, .table.table-bordered > tbody:first-child > tr:first-child > td:first-child { border-top-left-radius: var(--brand-ui-surface-radius); }.table.table-bordered > tbody:first-child > tr:first-child > th:last-child, .table.table-bordered > tbody:first-child > tr:first-child > td:last-child { border-top-right-radius: var(--brand-ui-surface-radius); }.table.table-bordered > thead + tbody > tr:first-child > th:first-child, .table.table-bordered > thead + tbody > tr:first-child > td:first-child, .table.table-bordered > thead + tbody > tr:first-child > th:last-child, .table.table-bordered > thead + tbody > tr:first-child > td:last-child { border-top-left-radius: 0; border-top-right-radius: 0; }