/* ==========================================================================
   css/theme.css — la capa de COMPONENTES del tema  (MODO-OSCURO, 18 sep 2026)

   Aqui NO se define ningun color: todos salen de css/tokens.css. Esta hoja dice
   que componente usa que variable. Tiene tres partes:
     1. Piezas comunes que valen para los dos temas (logotipo, estados, avisos, firmas).
     2. Bootstrap 3 (y las librerias de fuera) en OSCURO: no saben de temas y no se tocan; se
        les pone encima solo lo que la aplicacion usa.
     3. EL PUENTE, solo para las pantallas que siguen ocupadas por otra tarea (Facturas, la
        entrada, Informes y la hoja de Gastos). Pase 4 (19-sep-2026): Presupuestos, Estadisticas
        y Series ya van por los colores centrales y han salido de aqui.
   Los PDF y los correos no cargan esta hoja: siguen en claro SIEMPRE.
   ========================================================================== */

/* ---------- 1. PIEZAS COMUNES ---------- */

/* Logotipo de la cabecera: llama + "FireSecure", sin recuadro, legible en los dos temas. */
.main-header-well-top-left.fs-logo-well { background: var(--fs-logo-well); }
.fs-logo { display: flex; align-items: center; height: 39.4375px; overflow: hidden; white-space: nowrap; text-decoration: none; }
.fs-logo img { height: 39.4375px; width: auto; flex: none; margin-right: 12px; }  /* margen y no gap: iPad antiguo */
.fs-logo-text { font-family: 'Lato', sans-serif; font-size: 25px; line-height: 1; letter-spacing: 0.5px; }
.fs-logo-fire { color: var(--fs-logo-fire); font-weight: 400; }
.fs-logo-secure { color: var(--fs-logo-secure); font-weight: 300; }
@media (max-width: 1199px) { .fs-logo-text { font-size: 20px; } .fs-logo img { margin-right: 8px; } }
@media (max-width: 767px) { .fs-logo-text { display: none; } }
/* FICHA-CLIENTE pase 3 (21 sep 2026): fuera de Inicio el logo es un ENLACE a Inicio (header-area.php). Al pasar por
   encima se aclara y sale la mano; con el teclado, su marco. En Inicio sigue siendo un dibujo y no hace nada. */
a.fs-logo { cursor: pointer; border-radius: 4px; transition: opacity .15s ease-in-out; }
a.fs-logo:hover { opacity: .7; }
a.fs-logo:hover, a.fs-logo:focus { text-decoration: none; }   /* Bootstrap subraya los enlaces al pasar */
a.fs-logo:focus { outline: none; }
a.fs-logo:focus-visible { outline: 2px solid var(--fs-brand-line); outline-offset: 4px; }

/* El rotulo en imagen (pantalla de entrada y pie): en oscuro se cambia por su version para fondo oscuro.
   Asi no hace falta tocar esas pantallas. El fondo gris que la entrada lleva escrito se iguala al del tema. */
html[data-theme="dark"] img[src$="img/logo-firesecure.png"], html[data-theme="dark"] img[src$="img/logo-firesecure-imp.png"] {
    /* La imagen propia se saca del recuadro y en su sitio se pinta, de fondo, la version para oscuro. Vale en todos
       los navegadores (content:url() sobre <img> no lo aplica Firefox). */
    object-fit: none; object-position: -9999px -9999px;
    background: url(../img/logo-firesecure-oscuro.png) no-repeat left center; background-size: contain;
}
html[data-theme="dark"] body[style*="c0c0c0"] { background: var(--fs-bg) !important; }

/* Interruptor del tema (menu del usuario). */
.dropdown-menu > li > a.fs-theme-option { padding-left: 32px; position: relative; }
.dropdown-menu > li > a.fs-theme-option.is-active { font-weight: 700; color: var(--fs-brand-text); }
.dropdown-menu > li > a.fs-theme-option.is-active::before { content: "\2713"; position: absolute; left: 14px; }

/* ESTADOS del acta y del certificado: un color por estado, el mismo en todas las pantallas.
   Punto unico de que estado lleva que clase: lib/status_colors.php. */
.fs-st { font-weight: 700; }
.fs-st-pendiente { color: var(--fs-st-pendiente) !important; }
.fs-st-desfavorable { color: var(--fs-st-desfavorable) !important; }
.fs-st-favorable { color: var(--fs-st-favorable) !important; }
.fs-st-aprobada { color: var(--fs-st-aprobada) !important; }
.fs-st-cert-vigente { color: var(--fs-st-cert-vigente) !important; }
.fs-st-cert-anulado { color: var(--fs-st-cert-anulado) !important; }
.fs-st-cert-neutro { color: var(--fs-st-cert-neutro) !important; }

/* Recuadros de aviso. */
.fs-box { margin: 16px 0; padding: 14px; border: 1px solid var(--fs-line); border-radius: 3px; }
.fs-box-danger { border-color: var(--fs-danger-line); background: var(--fs-danger-bg); color: var(--fs-danger-ink); }
.fs-box-warn { border-color: var(--fs-warn-line); background: var(--fs-warn-bg); color: var(--fs-warn-ink); }
.fs-box-ok { border-color: var(--fs-ok-line); background: var(--fs-ok-bg); color: var(--fs-ok-ink); }
.fs-box-info { border-color: var(--fs-info-line); background: var(--fs-info-bg); color: var(--fs-info-ink); }

/* Pagina suelta de aviso (borrados, formulario caducado...): antes llevaban su estilo dentro. */
body.fs-plain { font-family: Arial, Helvetica, sans-serif; margin: 40px; max-width: 640px; background: var(--fs-bg); color: var(--fs-text-body); }
body.fs-plain a { color: var(--fs-link); }
body.fs-plain h1 { font-size: 22px; }

/* FIRMAS: son tinta oscura sobre fondo transparente. Se ensenan SIEMPRE sobre papel blanco, y el
   lienzo donde se firma es blanco en los dos temas. La imagen que se guarda NO cambia. */
canvas#blackboard, canvas#blackboard2 { background-color: var(--fs-paper); }
img#imageview, img#imageview2, img#engineerSignView, img#companySignView, img#imageSignCustomer, img.fs-paper {
    background-color: var(--fs-paper);
}
html[data-theme="dark"] img#imageview, html[data-theme="dark"] img#imageview2,
html[data-theme="dark"] img#engineerSignView, html[data-theme="dark"] img#companySignView,
html[data-theme="dark"] img.fs-paper { border-radius: 3px; }

/* Impresion de una pantalla con el navegador: SIEMPRE en claro. */
@media print {
    html[data-theme="dark"] { color-scheme: light; }
    html[data-theme="dark"] body, html[data-theme="dark"] body * { background-color: transparent !important; color: var(--fs-print-ink) !important; border-color: var(--fs-print-line) !important; box-shadow: none !important; }
}

/* ---------- 2. BOOTSTRAP 3 EN OSCURO ---------- */

html[data-theme="dark"] body { color: var(--fs-text-body); background-color: var(--fs-bg); }
/* Los enlaces: con el MISMO peso que la regla de Bootstrap (:where no suma), para ganarle a la libreria
   pero NO a las reglas propias de la aplicacion, que ya usan variables (iconos de listas, menus...). */
:where(html[data-theme="dark"]) a { color: var(--fs-link); }
:where(html[data-theme="dark"]) a:hover, :where(html[data-theme="dark"]) a:focus { color: var(--fs-link-hover); }
html[data-theme="dark"] hr { border-top-color: var(--fs-line); }
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .help-block { color: var(--fs-text-muted); }
html[data-theme="dark"] small, html[data-theme="dark"] .small { color: inherit; }
html[data-theme="dark"] h1 small, html[data-theme="dark"] h2 small, html[data-theme="dark"] h3 small, html[data-theme="dark"] h4 small { color: var(--fs-text-muted); }
html[data-theme="dark"] legend { color: var(--fs-text); border-bottom-color: var(--fs-line); }
html[data-theme="dark"] blockquote { border-left-color: var(--fs-line); }
html[data-theme="dark"] code, html[data-theme="dark"] kbd, html[data-theme="dark"] pre { background-color: var(--fs-panel-3); color: var(--fs-text); border-color: var(--fs-line); }
html[data-theme="dark"] .text-danger { color: var(--fs-danger-text); }
html[data-theme="dark"] .text-success { color: var(--fs-ok-text); }
html[data-theme="dark"] .text-warning { color: var(--fs-warn-ink); }
html[data-theme="dark"] .text-info { color: var(--fs-info-ink); }
html[data-theme="dark"] .text-primary { color: var(--fs-link); }

/* recuadros y paneles */
html[data-theme="dark"] .well { background-color: var(--fs-panel-3); border-color: var(--fs-line); box-shadow: none; }
/* FICHA-CLIENTE pase 3 (21 sep 2026): EL MARCO DE LA PAGINA (cabecera, barra lateral y cuerpo), con las MISMAS rayas que
   en claro. La regla de arriba pintaba en oscuro todos los bordes que css/style.css deja transparentes a proposito: bajo
   el titulo salian dos rayas con un hueco (el recuadro del titulo mide 1 px menos que el del logo), bajo el logo una
   gruesa, y la barra lateral salia en su propio recuadro redondeado, con un hueco y otra raya antes de la seccion.
   Aqui se repite, en oscuro, lo que style.css dice para cada pieza del marco; nada mas cambia. */
html[data-theme="dark"] .main-header-well-top-left { border-color: transparent; border-right-color: var(--fs-line); }
html[data-theme="dark"] .main-header-well-top-right { border-color: transparent; }
html[data-theme="dark"] .main-header-well-bottom-left { border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
html[data-theme="dark"] .main-header-well-bottom-right { border-bottom-color: transparent; border-right-color: transparent; }
/* La barra y cada icono de sus entradas (que tambien llevan la clase navbar-default): sin recuadro ni fondo propios. */
html[data-theme="dark"] nav.sidebar.navbar-default, html[data-theme="dark"] nav.sidebar .navbar-default { border-color: transparent; background-color: transparent; }
/* En el movil (hasta 768 px) style.css vuelve a pintar algunas rayas del marco: las mismas en oscuro. */
@media (max-width: 768px) {
    html[data-theme="dark"] .main-header-well-top-left { border-left-color: var(--fs-line); border-right-color: transparent; }
    html[data-theme="dark"] .main-header-well-top-right { border-left-color: var(--fs-line); }
    html[data-theme="dark"] .main-header-well-bottom-left { border-left-color: var(--fs-line); }
    html[data-theme="dark"] .main-header-well-bottom-right { border-bottom-color: var(--fs-line); border-right-color: var(--fs-line); }
}
html[data-theme="dark"] .panel { background-color: var(--fs-panel); border-color: var(--fs-line); }
html[data-theme="dark"] .panel-default { border-color: var(--fs-line); }
html[data-theme="dark"] .panel-default > .panel-heading { background-color: var(--fs-panel-2); color: var(--fs-text); border-color: var(--fs-line); }
html[data-theme="dark"] .panel-footer { background-color: var(--fs-panel-2); border-top-color: var(--fs-line); }
html[data-theme="dark"] .panel-body { color: var(--fs-text-body); }
html[data-theme="dark"] .jumbotron, html[data-theme="dark"] .breadcrumb { background-color: var(--fs-panel-2); color: var(--fs-text-body); }
html[data-theme="dark"] .thumbnail, html[data-theme="dark"] .img-thumbnail { background-color: var(--fs-panel); border-color: var(--fs-line); }
html[data-theme="dark"] .list-group-item { background-color: var(--fs-panel); border-color: var(--fs-line); color: var(--fs-text-body); }
html[data-theme="dark"] a.list-group-item:hover, html[data-theme="dark"] a.list-group-item:focus { background-color: var(--fs-hover); color: var(--fs-text); }
html[data-theme="dark"] .page-header { border-bottom-color: var(--fs-line); }
html[data-theme="dark"] .progress { background-color: var(--fs-panel-3); }

/* tablas */
html[data-theme="dark"] table { background-color: transparent; }
html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > th, html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table > thead > tr > td, html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] .table > tfoot > tr > td { border-top-color: var(--fs-line); }
html[data-theme="dark"] .table > thead > tr > th { border-bottom-color: var(--fs-line-2); }
html[data-theme="dark"] .table > tbody + tbody { border-top-color: var(--fs-line-2); }
html[data-theme="dark"] .table .table { background-color: var(--fs-panel); }
html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered > thead > tr > th, html[data-theme="dark"] .table-bordered > tbody > tr > th,
html[data-theme="dark"] .table-bordered > thead > tr > td, html[data-theme="dark"] .table-bordered > tbody > tr > td, html[data-theme="dark"] .table-bordered > tfoot > tr > td { border-color: var(--fs-line); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--fs-panel-2); }
html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: var(--fs-hover); }
html[data-theme="dark"] .table > tbody > tr.active > td, html[data-theme="dark"] .table > tbody > tr > td.active, html[data-theme="dark"] .table > thead > tr > th.active { background-color: var(--fs-hover); }
html[data-theme="dark"] .table > tbody > tr.success > td, html[data-theme="dark"] .table > tbody > tr > td.success { background-color: var(--fs-ok-bg); color: var(--fs-ok-ink); }
html[data-theme="dark"] .table > tbody > tr.info > td, html[data-theme="dark"] .table > tbody > tr > td.info { background-color: var(--fs-info-bg); color: var(--fs-info-ink); }
html[data-theme="dark"] .table > tbody > tr.warning > td, html[data-theme="dark"] .table > tbody > tr > td.warning { background-color: var(--fs-warn-bg); color: var(--fs-warn-ink); }
html[data-theme="dark"] .table > tbody > tr.danger > td, html[data-theme="dark"] .table > tbody > tr > td.danger { background-color: var(--fs-danger-bg); color: var(--fs-danger-ink); }
html[data-theme="dark"] .table-responsive { border-color: var(--fs-line); }

/* formularios */
html[data-theme="dark"] .form-control { background-color: var(--fs-panel); color: var(--fs-text); border-color: var(--fs-field-line); box-shadow: none; }
html[data-theme="dark"] .form-control:focus { border-color: var(--fs-link); box-shadow: 0 0 0 2px var(--fs-shadow-2); }
html[data-theme="dark"] .form-control::placeholder { color: var(--fs-placeholder); }
html[data-theme="dark"] .form-control::-webkit-input-placeholder { color: var(--fs-placeholder); }
html[data-theme="dark"] .form-control[disabled], html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] fieldset[disabled] .form-control { background-color: var(--fs-panel-3); color: var(--fs-text-2); }
html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="month"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"] { background-color: var(--fs-panel); color: var(--fs-text); border-color: var(--fs-field-line); }
html[data-theme="dark"] select option, html[data-theme="dark"] select optgroup { background-color: var(--fs-panel); color: var(--fs-text); }
html[data-theme="dark"] .input-group-addon { background-color: var(--fs-panel-2); border-color: var(--fs-field-line); color: var(--fs-text-2); }
html[data-theme="dark"] label, html[data-theme="dark"] .control-label { color: inherit; }
html[data-theme="dark"] .has-error .form-control { border-color: var(--fs-danger-line); }
html[data-theme="dark"] .has-error .help-block, html[data-theme="dark"] .has-error .control-label, html[data-theme="dark"] .has-error .checkbox, html[data-theme="dark"] .has-error .radio { color: var(--fs-danger-text); }
html[data-theme="dark"] .has-success .form-control { border-color: var(--fs-ok-line); }
html[data-theme="dark"] .has-success .help-block, html[data-theme="dark"] .has-success .control-label { color: var(--fs-ok-text); }
html[data-theme="dark"] .has-warning .form-control { border-color: var(--fs-warn-line); }
html[data-theme="dark"] .has-warning .help-block, html[data-theme="dark"] .has-warning .control-label { color: var(--fs-warn-ink); }
html[data-theme="dark"] input[type="checkbox"], html[data-theme="dark"] input[type="radio"] { accent-color: var(--fs-brand); }

/* botones */
html[data-theme="dark"] .btn-default { background-color: var(--fs-panel); color: var(--fs-text); border-color: var(--fs-field-line); text-shadow: none; }
html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-default:focus, html[data-theme="dark"] .btn-default:active, html[data-theme="dark"] .btn-default.active,
html[data-theme="dark"] .open > .dropdown-toggle.btn-default { background-color: var(--fs-hover); color: var(--fs-text-strong); border-color: var(--fs-line-strong); }
html[data-theme="dark"] .btn-default.disabled, html[data-theme="dark"] .btn-default[disabled] { background-color: var(--fs-panel-3); color: var(--fs-text-disabled); }
html[data-theme="dark"] .btn-link { color: var(--fs-link); }
html[data-theme="dark"] .btn-link:hover { color: var(--fs-link-hover); }
html[data-theme="dark"] .btn-danger { background-color: var(--fs-danger-fill); border-color: var(--fs-danger-line); color: var(--fs-on-brand); }
html[data-theme="dark"] .btn-success { background-color: var(--fs-ok-fill); border-color: var(--fs-ok-line); color: var(--fs-on-brand); }
/* Botones desactivados (pase 3): Bootstrap los deja medio transparentes y en oscuro la letra casi desaparece. Aqui van
   opacos y se distinguen por el fondo gris y la letra apagada (el principal: letra roja sobre gris, como ya hacia). */
html[data-theme="dark"] .btn.disabled, html[data-theme="dark"] .btn[disabled], html[data-theme="dark"] fieldset[disabled] .btn { opacity: 1; box-shadow: none; }
html[data-theme="dark"] .btn-danger.disabled, html[data-theme="dark"] .btn-danger[disabled], html[data-theme="dark"] .btn-success.disabled,
html[data-theme="dark"] .btn-success[disabled], html[data-theme="dark"] .btn-info.disabled, html[data-theme="dark"] .btn-info[disabled],
html[data-theme="dark"] .btn-warning.disabled, html[data-theme="dark"] .btn-warning[disabled] { background-color: var(--fs-hover); border-color: var(--fs-line-2); color: var(--fs-text-disabled); }

/* menus desplegables y selector */
html[data-theme="dark"] .dropdown-menu { background-color: var(--fs-panel); border-color: var(--fs-line-2); box-shadow: 0 6px 12px var(--fs-shadow-pop); }
html[data-theme="dark"] .dropdown-menu > li > a { color: var(--fs-text); }
html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dropdown-menu > li > a:focus { background-color: var(--fs-hover); color: var(--fs-text-strong); }
html[data-theme="dark"] .dropdown-menu > .active > a, html[data-theme="dark"] .dropdown-menu > .active > a:hover { background-color: var(--fs-select); color: var(--fs-text-strong); }
html[data-theme="dark"] .dropdown-menu > .disabled > a { color: var(--fs-text-disabled); }
html[data-theme="dark"] .dropdown-menu .divider { background-color: var(--fs-line); }
html[data-theme="dark"] .dropdown-header { color: var(--fs-text-muted); }
html[data-theme="dark"] .bootstrap-select .dropdown-menu li a { color: var(--fs-text); }
html[data-theme="dark"] .bootstrap-select .bs-searchbox .form-control { background-color: var(--fs-panel-2); }
html[data-theme="dark"] .bootstrap-select.btn-group .dropdown-toggle .filter-option { color: inherit; }
html[data-theme="dark"] .bootstrap-select .no-results { background-color: var(--fs-panel-2); color: var(--fs-text-2); }

/* ventanas emergentes */
html[data-theme="dark"] .modal-content { background-color: var(--fs-panel); border-color: var(--fs-line-2); color: var(--fs-text-body); box-shadow: 0 5px 15px var(--fs-shadow-pop); }
html[data-theme="dark"] .modal-header { border-bottom-color: var(--fs-line); }
html[data-theme="dark"] .modal-footer { border-top-color: var(--fs-line); }
html[data-theme="dark"] .modal-backdrop { background-color: var(--fs-backdrop); }
html[data-theme="dark"] .close { color: var(--fs-text); text-shadow: none; opacity: 0.6; }
html[data-theme="dark"] .close:hover, html[data-theme="dark"] .close:focus { color: var(--fs-text-strong); opacity: 0.9; }
html[data-theme="dark"] .popover { background-color: var(--fs-panel); border-color: var(--fs-line-2); color: var(--fs-text-body); }
html[data-theme="dark"] .popover-title { background-color: var(--fs-panel-2); border-bottom-color: var(--fs-line); }
html[data-theme="dark"] .popover.top > .arrow::after { border-top-color: var(--fs-panel); }
html[data-theme="dark"] .popover.bottom > .arrow::after { border-bottom-color: var(--fs-panel); }
html[data-theme="dark"] .popover.left > .arrow::after { border-left-color: var(--fs-panel); }
html[data-theme="dark"] .popover.right > .arrow::after { border-right-color: var(--fs-panel); }

/* avisos y etiquetas */
html[data-theme="dark"] .alert-success { background-color: var(--fs-ok-bg); border-color: var(--fs-ok-line); color: var(--fs-ok-ink); }
html[data-theme="dark"] .alert-info { background-color: var(--fs-info-bg); border-color: var(--fs-info-line); color: var(--fs-info-ink); }
html[data-theme="dark"] .alert-warning { background-color: var(--fs-warn-bg); border-color: var(--fs-warn-line); color: var(--fs-warn-ink); }
html[data-theme="dark"] .alert-danger { background-color: var(--fs-danger-bg); border-color: var(--fs-danger-line); color: var(--fs-danger-ink); }
html[data-theme="dark"] .alert .alert-link, html[data-theme="dark"] .alert a { color: inherit; text-decoration: underline; }
html[data-theme="dark"] .label-default, html[data-theme="dark"] .badge { background-color: var(--fs-grey-fill); color: var(--fs-on-brand); }
html[data-theme="dark"] .label-danger { background-color: var(--fs-danger-fill); }
html[data-theme="dark"] .label-success { background-color: var(--fs-ok-fill); }
html[data-theme="dark"] .label-warning { background-color: var(--fs-warn-fill); }
html[data-theme="dark"] .label-info { background-color: var(--fs-info-fill); }

/* paginacion y pestanas */
html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { background-color: var(--fs-panel); border-color: var(--fs-line); color: var(--fs-text); }
html[data-theme="dark"] .pagination > li > a:hover, html[data-theme="dark"] .pagination > li > a:focus { background-color: var(--fs-hover); border-color: var(--fs-line-2); color: var(--fs-text-strong); }
html[data-theme="dark"] .pagination > .active > a, html[data-theme="dark"] .pagination > .active > span,
html[data-theme="dark"] .pagination > .active > a:hover, html[data-theme="dark"] .pagination > .active > span:hover { background-color: var(--fs-brand); border-color: var(--fs-brand-line); color: var(--fs-on-brand); }
html[data-theme="dark"] .pagination > .disabled > a, html[data-theme="dark"] .pagination > .disabled > span { background-color: var(--fs-panel-3); border-color: var(--fs-line); color: var(--fs-text-disabled); }
html[data-theme="dark"] .pager li > a { background-color: var(--fs-panel); border-color: var(--fs-line); }
html[data-theme="dark"] .nav > li > a:hover, html[data-theme="dark"] .nav > li > a:focus { background-color: var(--fs-hover); }
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--fs-line); }
html[data-theme="dark"] .nav-tabs > li > a:hover { border-color: var(--fs-line) var(--fs-line) var(--fs-line); }
html[data-theme="dark"] .nav-tabs > li.active > a, html[data-theme="dark"] .nav-tabs > li.active > a:hover, html[data-theme="dark"] .nav-tabs > li.active > a:focus { background-color: var(--fs-panel); border-color: var(--fs-line) var(--fs-line) transparent; color: var(--fs-text); }
html[data-theme="dark"] .navbar-default { background-color: var(--fs-panel); border-color: var(--fs-line); }
html[data-theme="dark"] .navbar-default .navbar-toggle { border-color: var(--fs-line-2); }
html[data-theme="dark"] .navbar-default .navbar-toggle:hover, html[data-theme="dark"] .navbar-default .navbar-toggle:focus { background-color: var(--fs-hover); }
html[data-theme="dark"] .navbar-default .navbar-collapse, html[data-theme="dark"] .navbar-default .navbar-form { border-color: var(--fs-line); }

/* 2 bis. LOS GRISES QUE BOOTSTRAP ESCRIBE POR SU CUENTA (pase 3). Estaban pensados para fondo blanco y sobre
   oscuro no se leian: barra lateral (texto e iconos), migas, paginacion y pestanas desactivadas, pie de tabla,
   citas, cabeceras de desplegable. En oscuro, blanco apagado; lo desactivado, mas apagado pero legible.
   Con :where() pesan lo MISMO que la regla de Bootstrap: le ganan a ella, pero no a las reglas propias de la
   aplicacion (la entrada activa y el raton encima de la barra lateral siguen en rojo). */
:where(html[data-theme="dark"]) .navbar-default .navbar-nav > li > a, :where(html[data-theme="dark"]) .navbar-default .navbar-brand,
:where(html[data-theme="dark"]) .navbar-default .navbar-text, :where(html[data-theme="dark"]) .navbar-default .navbar-link,
:where(html[data-theme="dark"]) .navbar-default .btn-link, :where(html[data-theme="dark"]) .navbar-default .navbar-nav > li,
:where(html[data-theme="dark"]) .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: var(--fs-text-2); }
:where(html[data-theme="dark"]) .navbar-default .navbar-nav > li > a:focus, :where(html[data-theme="dark"]) .navbar-default .navbar-link:hover,
:where(html[data-theme="dark"]) .navbar-default .btn-link:hover, :where(html[data-theme="dark"]) .navbar-default .btn-link:focus,
:where(html[data-theme="dark"]) .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
:where(html[data-theme="dark"]) .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
:where(html[data-theme="dark"]) .navbar-default .navbar-nav .open .dropdown-menu > .active > a { color: var(--fs-text-strong); }
:where(html[data-theme="dark"]) .navbar-default .navbar-nav > .open > a, :where(html[data-theme="dark"]) .navbar-default .navbar-nav > .open > a:hover,
:where(html[data-theme="dark"]) .navbar-default .navbar-nav > .open > a:focus { color: var(--fs-text-strong); background-color: var(--fs-hover); }
:where(html[data-theme="dark"]) .navbar-default .navbar-nav > .disabled > a, :where(html[data-theme="dark"]) .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
:where(html[data-theme="dark"]) .nav > li.disabled > a, :where(html[data-theme="dark"]) .nav > li.disabled > a:hover, :where(html[data-theme="dark"]) .nav > li.disabled > a:focus,
:where(html[data-theme="dark"]) .pager .disabled > a, :where(html[data-theme="dark"]) .pager .disabled > span,
:where(html[data-theme="dark"]) .list-group-item.disabled, :where(html[data-theme="dark"]) .list-group-item.disabled .list-group-item-text,
:where(html[data-theme="dark"]) .btn-link[disabled], :where(html[data-theme="dark"]) fieldset[disabled] .btn-link,
:where(html[data-theme="dark"]) .dropdown-menu > .disabled > a:hover, :where(html[data-theme="dark"]) .dropdown-menu > .disabled > a:focus { color: var(--fs-text-disabled); }
html[data-theme="dark"] [style*="color: #999"], html[data-theme="dark"] [style*="color: gray"], html[data-theme="dark"] [style*="color: grey"] { color: var(--fs-text-muted) !important; }  /* editor de texto y mascara de campos (librerias de fuera) */
:where(html[data-theme="dark"]) .navbar-default .navbar-toggle .icon-bar { background-color: var(--fs-text-2); }
:where(html[data-theme="dark"]) .breadcrumb > .active, :where(html[data-theme="dark"]) caption,
:where(html[data-theme="dark"]) blockquote footer, :where(html[data-theme="dark"]) blockquote small, :where(html[data-theme="dark"]) blockquote .small,
:where(html[data-theme="dark"]) .h1 small, :where(html[data-theme="dark"]) .h2 small, :where(html[data-theme="dark"]) .h3 small, :where(html[data-theme="dark"]) .h4 small,
:where(html[data-theme="dark"]) h5 small, :where(html[data-theme="dark"]) h6 small, :where(html[data-theme="dark"]) h1 .small, :where(html[data-theme="dark"]) h2 .small,
:where(html[data-theme="dark"]) h3 .small, :where(html[data-theme="dark"]) h4 .small { color: var(--fs-text-muted); }
:where(html[data-theme="dark"]) .breadcrumb > li + li::before { color: var(--fs-text-faint); }
:where(html[data-theme="dark"]) output, :where(html[data-theme="dark"]) .form-control-static { color: var(--fs-text); }
:where(html[data-theme="dark"]) a.list-group-item, :where(html[data-theme="dark"]) .thumbnail .caption { color: var(--fs-text-body); }
:where(html[data-theme="dark"]) a.list-group-item .list-group-item-heading { color: var(--fs-text-strong); }
:where(html[data-theme="dark"]) .form-control::-moz-placeholder { color: var(--fs-placeholder); opacity: 1; }
:where(html[data-theme="dark"]) .form-control:-ms-input-placeholder { color: var(--fs-placeholder); }
:where(html[data-theme="dark"]) input::placeholder, :where(html[data-theme="dark"]) textarea::placeholder { color: var(--fs-placeholder); opacity: 1; }
:where(html[data-theme="dark"]) .close { opacity: 0.85; }

/* ---------- 3. PUENTE para los colores que otras tareas llevan escritos DENTRO de sus pantallas ----------
   SOLO lo que sigue ocupado (pase 4, 19-sep-2026): Facturas (VERIFACTU: invoice-create, -rectify, -report, -list y
   -view), Informes y la entrada (USUARIOS-PERMISOS: report-list.php e index.php). No se tocan esos ficheros: aqui se
   reconoce ese texto tal cual lo escribieron y, SOLO en oscuro, se le pone la variable que le toca. Lo que va entre
   comillas no es un color de esta hoja: es el texto que se busca. El dia que esas tareas pasen sus pantallas a
   variables, se borra la linea que les toca. */
html[data-theme="dark"] [style*="background:#fafafa"] { background: var(--fs-panel-2) !important; }
html[data-theme="dark"] [style*="background:#fff;"] { background: var(--fs-panel) !important; color: var(--fs-text-body); }
html[data-theme="dark"] [style*="solid #e5e5e5"] { border-color: var(--fs-line) !important; }
html[data-theme="dark"] [style*="solid #333"] { border-color: var(--fs-line-strong) !important; }
html[data-theme="dark"] [style*="color:#3c763d"] { color: var(--fs-ok-text) !important; }
html[data-theme="dark"] [style*="color:#e3000f"] { color: var(--fs-brand-text) !important; }
/* (pase 3) iconos de Facturas que no se leian sobre oscuro */
html[data-theme="dark"] [style*="color:#d9534f"] { color: var(--fs-danger-text) !important; }
html[data-theme="dark"] [style*="color:darkorange"], html[data-theme="dark"] [style*="color:#f0ad4e"] { color: var(--fs-st-pendiente) !important; }
/* Una fila anulada se ve apagada a proposito; en oscuro, apagada pero legible (sigue tachada). */
html[data-theme="dark"] tr[style*="opacity:.6"] { opacity: 0.85 !important; }

/* Hoja de Gastos (GASTOS, pase 8 en marcha): bloque generado (ver la marca). */
/* === MODULOS AJENOS: INICIO (generado por scripts/modo_oscuro_capa_modulos.py; no editar a mano) === */
/* --- expenses.css --- */
html[data-theme="dark"] .exp-page .exp-dim { color: var(--fs-text-muted); }
html[data-theme="dark"] .exp-page .exp-subtitle { color: var(--fs-text-body); }
html[data-theme="dark"] .exp-page .exp-period { color: var(--fs-text-2); }
html[data-theme="dark"] .exp-page .exp-table { background: var(--fs-panel); }
html[data-theme="dark"] .exp-page .exp-table > thead > tr > th { color: var(--fs-text-body); border-bottom: 2px solid var(--fs-brand-line); }
html[data-theme="dark"] .exp-page .exp-table .exp-desc { color: var(--fs-text-2); }
html[data-theme="dark"] .exp-page .exp-row-off > td { color: var(--fs-text-muted); }
html[data-theme="dark"] .exp-page .exp-total > td { border-top: 2px solid var(--fs-line-strong); background: var(--fs-bg); }
html[data-theme="dark"] .exp-page .exp-field > label { color: var(--fs-text-2); }
html[data-theme="dark"] .exp-page .exp-checkline label { color: var(--fs-text-2); }
html[data-theme="dark"] .exp-page .exp-totals { border-top: 1px solid var(--fs-line); }
html[data-theme="dark"] .exp-page .exp-totals span { color: var(--fs-text-2); }
html[data-theme="dark"] .exp-page .exp-totals-main strong { color: var(--fs-brand-text); }
html[data-theme="dark"] .exp-page .exp-l-vat.exp-touched { background: var(--fs-warn-bg); }
@media (max-width: 767px) { html[data-theme="dark"] .exp-page .exp-lines tr.exp-line { border: 1px solid var(--fs-line); background: var(--fs-panel); } }
@media (max-width: 767px) { html[data-theme="dark"] .exp-page .exp-lines td[data-label]::before { color: var(--fs-text-2); } }
html[data-theme="dark"] .exp-page .exp-kind { border: 1px solid var(--fs-line); background: var(--fs-panel); color: var(--fs-text-body); }
html[data-theme="dark"] .exp-page .exp-kind:hover, html[data-theme="dark"] .exp-page .exp-kind:focus { border-color: var(--fs-brand-line); color: var(--fs-brand-text); }
html[data-theme="dark"] .exp-page .exp-kind i { color: var(--fs-brand-text); }
html[data-theme="dark"] .exp-page .exp-withholding > label { color: var(--fs-text-2); }
html[data-theme="dark"] .exp-page .exp-warn { color: var(--fs-warn-ink); }
html[data-theme="dark"] .exp-page .exp-row-payment > td { color: var(--fs-info-ink); }
html[data-theme="dark"] .exp-page .exp-sspanel { border: 1px solid var(--fs-line); background: var(--fs-panel-2); }
html[data-theme="dark"] .exp-page .exp-p.exp-touched { background: var(--fs-warn-bg); }
html[data-theme="dark"] .exp-page .exp-settings { color: var(--fs-text-muted-2); }
html[data-theme="dark"] .exp-page .exp-settings:hover, html[data-theme="dark"] .exp-page .exp-settings:focus, html[data-theme="dark"] .exp-page .exp-settings.active { color: var(--fs-brand-text); }
html[data-theme="dark"] .exp-page .exp-check { color: var(--fs-text-2); }
html[data-theme="dark"] .exp-page .exp-empcard { border: 1px solid var(--fs-line); border-left: 3px solid var(--fs-brand-line); background: var(--fs-panel); }
html[data-theme="dark"] .exp-page .exp-row-open > td { background: var(--fs-danger-bg) !important; }
html[data-theme="dark"] .exp-page .pi-pending { color: var(--fs-warn-ink); }
html[data-theme="dark"] .exp-page .pi-page { border: 1px solid var(--fs-line); border-left: 3px solid var(--fs-info-line); background: var(--fs-panel); }
html[data-theme="dark"] .exp-page .pi-page.pi-has-warn.pi-st-pendiente { border-left-color: var(--fs-warn-line); }
html[data-theme="dark"] .exp-page .pi-page.pi-st-guardada { border-left-color: var(--fs-ok-line); background: var(--fs-panel-2); }
html[data-theme="dark"] .exp-page .pi-page.pi-st-descartada { border-left-color: var(--fs-line-strong); background: var(--fs-panel-2); }
html[data-theme="dark"] .exp-page .pi-warn { background: var(--fs-warn-bg); color: var(--fs-warn-ink); }
html[data-theme="dark"] .exp-page .pi-f > label { color: var(--fs-text-2); }
html[data-theme="dark"] .exp-page .pi-yellow { background: var(--fs-warn-bg) !important; }
html[data-theme="dark"] .exp-page .pi-balance.pi-bad { color: var(--fs-warn-ink); }
html[data-theme="dark"] .exp-page .pi-exists { background: var(--fs-danger-bg); color: var(--fs-danger-text); }
html[data-theme="dark"] .exp-page .pi-fromdoc { color: var(--fs-info-ink); }
html[data-theme="dark"] .exp-page .pi-said { color: var(--fs-warn-ink); }
/* === MODULOS AJENOS: FIN === */