/* =====================================================================================================================
   Gestión Museos (Museo Néstor, #316) · tema visual B «Familia Gestión Patrimonio»
   Calco de la estética de Gestión Subvenciones (subvenciones.entersolo.es/docs/ESTETICA.md, 31/10/2026), con los tokens IC
   de Gestión Patrimonio (gestionv6/assets/css/tokens.css): azul de marca #1C3052 como color de acción, fondo #F5F7FA,
   tarjetas blancas redondeadas y el rojo de marca solo como acento.

   CÓMO SE CARGA: un <link> por página, la ÚLTIMA hoja antes del contenido (docs/ESTETICA.md dice dónde en cada una).
   Las páginas con sesión imprimen dos documentos (la cabecera y el suyo) y el navegador los junta: manda el orden del DOM.
   Los !important son los justos para ganar a naranja.css, epigrafes.css, portfolio.css, gentelella y los <style> en
   línea, que ya los usan. Solo estilo: no depende de cambios de PHP ni de JS.

   Iconos: bootstrap-icons 1.8.3 (lo cargan las cabeceras con sesión); los de font-awesome de los botones se ocultan y
   se pinta el de bootstrap-icons con «/ ""» (decorativo para lectores). Accesibilidad: contrastes en docs/ESTETICA.md,
   :focus-visible y prefers-reduced-motion. La fuente Inter de IC no está servida: cae a Segoe UI / system-ui.
   ===================================================================================================================== */

:root {
    --tm-primario: #1C3052;          /* --brand-blue: acción primaria (blanco encima 13,17:1)       */
    --tm-primario-hover: #2A3F63;
    --tm-marca: #E73C1E;             /* --brand-red: solo acento decorativo (punto del pie)         */
    --tm-tinta: #1C3052;             /* --text-primary                                              */
    --tm-texto-2: #5B6B82;           /* --text-secondary oscurecido: #64748B da 4,43 sobre el fondo  */
    --tm-fondo: #F5F7FA;             /* --ui-bg-light                                               */
    --tm-superficie: #FFFFFF;
    --tm-superficie-2: #FAFBFD;
    --tm-linea: #E3E8EF;
    --tm-borde-campo: #8792A2;       /* 3,15:1 sobre blanco                                         */
    --tm-cabecera: #1C3052;
    --tm-cabecera-texto: #FFFFFF;
    --tm-cabecera-texto-2: #C9D3E3;
    --tm-suave: #EDF0F5;             /* botón suave                                                 */
    --tm-suave-hover: #E1E6EE;
    --tm-peligro: #B42318;           /* acciones que quitan algo                                    */
    --tm-peligro-fondo: #FDECEA;
    --tm-peligro-hover: #FADAD6;
    --tm-exito: #1E5B36;
    --tm-exito-fondo: #E7F3EC;
    --tm-seleccion: #E6EEFC;
    --tm-enlace: #2563EB;
    --tm-foco: #2563EB;              /* --ui-interaction (#3B82F6) oscurecido                       */
    --tm-marcador: #6B7178;          /* texto de ejemplo de los campos                              */
    --tm-radio: 10px;
    --tm-radio-tarjeta: 16px;
    --tm-sombra: 0 1px 3px rgba(28, 48, 82, .06), 0 4px 16px rgba(28, 48, 82, .06);          /* --card-shadow */
    --tm-sombra-alta: 0 8px 24px rgba(28, 48, 82, .12), 0 16px 48px rgba(28, 48, 82, .08);   /* --card-shadow-hover */
    --tm-fuente: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- Base ---------- */
body, body#background {
    background: var(--tm-fondo) !important; color: var(--tm-tinta);
    position: static !important; inset: auto !important;      /* naranja.css y los <style> lo ponían absolute con foto */
}
body, .modal-dialog, .btn, .form-control, .form-select, table.dataTable, .x_panel, .left_col, .DTE { font-family: var(--tm-fuente) !important; }
a { color: var(--tm-enlace); }
.fa, .bi { color: inherit; }                                    /* naranja.css: todos los iconos en naranja */
.fa:hover { color: inherit; }

:focus-visible { outline: 3px solid var(--tm-foco) !important; outline-offset: 2px !important; box-shadow: none !important; }
.btn:focus, .form-control:focus, .form-select:focus { box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: var(--tm-foco) !important; box-shadow: 0 0 0 1px var(--tm-foco) !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    .modal.fade .modal-dialog { transform: none !important; }
}

/* ---------- Cabecera (#navheader: el mismo marcado en headerpanel.php y loginsystem/header.php) ---------- */
#navheader.navbar-expand-lg {
    background: var(--tm-cabecera) !important; border-top: 0 !important; box-shadow: 0 4px 12px rgba(28, 48, 82, .18);
    min-height: 0; padding: 8px 0 !important; margin-bottom: 0 !important;
}
#navheader .navbar-nav { margin-bottom: 0 !important; align-items: center; }
#navheader .nav-link { padding: 0 !important; color: var(--tm-cabecera-texto-2) !important; font-size: 14px !important; }
#navheader .nav-link img { width: 170px !important; height: auto !important; }
#navheader .navbar-text, #navheader .navbar-text i { color: var(--tm-cabecera-texto-2) !important; font-size: 13px !important; padding: 0; }
#navheader .navbar-text strong, #navheader #hola { color: var(--tm-cabecera-texto) !important; }
#navheader .fa-user::before { font-family: bootstrap-icons; font-style: normal; content: "\f4d7"; content: "\f4d7" / ""; }
#navheader .btn-outline-light {
    color: var(--tm-cabecera-texto) !important; background: rgba(255, 255, 255, .10) !important;
    border: 0 !important; border-radius: 999px; font-size: 14px; padding: 7px 14px; box-shadow: none !important;
}
#navheader .btn-outline-light:hover { background: rgba(255, 255, 255, .20) !important; color: var(--tm-cabecera-texto) !important; }
#navheader .btn-outline-light .bi { color: var(--tm-cabecera-texto) !important; }
#navheader :focus-visible { outline-color: #FFFFFF !important; }
#navheader .navbar-toggler { border-color: rgba(255, 255, 255, .55); }
#navheader .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* ---------- Migas de la ficha (ol.breadcrumb con <li> sin .breadcrumb-item) ---------- */
ol.breadcrumb {
    box-shadow: none !important; background: transparent !important; padding: 18px 24px 0 !important; margin: 0 auto 6px !important;
    display: flex; flex-wrap: wrap; gap: 4px; list-style: none; max-width: 1148px;
}
.breadcrumb li { font-size: 14px !important; }
.breadcrumb a { color: var(--tm-enlace) !important; text-decoration: none; }
.breadcrumb a:hover { color: var(--tm-primario-hover) !important; text-decoration: underline !important; }
.breadcrumb > .active { color: var(--tm-texto-2) !important; }
.breadcrumb > li + li:before { content: "\f285" !important; font-family: bootstrap-icons; font-size: 11px; color: var(--tm-texto-2) !important; padding: 0 8px 0 4px !important; }
.breadcrumb .fa { display: none; }

/* ---------- Botones de DataTables (catálogo, gestor documental, configuración) ----------
   Buttons 2.2 pinta <button class="dt-button …">. Suaves sueltos, del mismo tamaño; «Nuevo» primario; «Eliminar» en
   rojo suave; el icono de font-awesome se cambia por el de bootstrap-icons. */
div.dt-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px !important; float: none !important; }
div.dt-buttons button.dt-button, div.dt-buttons a.dt-button {
    float: none !important; margin: 0 !important; background: var(--tm-suave) !important; background-image: none !important;
    color: var(--tm-tinta) !important; border: 0 !important; border-radius: var(--tm-radio) !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 500; padding: 7px 12px !important; line-height: 1.3; display: inline-flex; align-items: center; gap: 6px;
}
div.dt-buttons .dt-button:hover:not(.disabled) { background: var(--tm-suave-hover) !important; border: 0 !important; }
div.dt-buttons .dt-button.disabled { opacity: .5; }
div.dt-buttons .dt-button > span { display: inline-flex; align-items: center; gap: 6px; }
div.dt-buttons .dt-button i.fa { display: none; }
div.dt-buttons .dt-button::before { font-family: bootstrap-icons; font-size: 15px; line-height: 1; font-weight: normal; }
div.dt-buttons .dt-button.buttons-create { background: var(--tm-primario) !important; color: #FFFFFF !important; }
div.dt-buttons .dt-button.buttons-create:hover { background: var(--tm-primario-hover) !important; }
div.dt-buttons .dt-button.buttons-remove { background: var(--tm-peligro-fondo) !important; color: var(--tm-peligro) !important; }
div.dt-buttons .dt-button.buttons-remove:hover:not(.disabled) { background: var(--tm-peligro-hover) !important; }
div.dt-buttons .dt-down-arrow { display: none; }
div.dt-buttons .buttons-create::before { content: "\f64d"; content: "\f64d" / ""; }                     /* plus-lg      */
div.dt-buttons .buttons-edit::before { content: "\f4cb"; content: "\f4cb" / ""; }                       /* pencil       */
div.dt-buttons .buttons-remove::before { content: "\f78b"; content: "\f78b" / ""; }                     /* trash3       */
div.dt-buttons .buttons-colvis::before { content: "\f465"; content: "\f465" / ""; }                     /* columnas     */
div.dt-buttons .csv::before { content: "\f3b7"; content: "\f3b7" / ""; }                                /* file-earmark-spreadsheet */
div.dt-buttons .ficha::before { content: "\f38b"; content: "\f38b" / ""; }                              /* file-earmark-text */
div.dt-buttons .libro::before { content: "\f1c9"; content: "\f1c9" / ""; }                              /* book         */
div.dt-buttons .borrarbusquedas::before { content: "\f331"; content: "\f331" / ""; }                    /* eraser       */
div.dt-buttons .buttons-csv::before, div.dt-buttons .buttons-excel::before { content: "\f30a"; content: "\f30a" / ""; }  /* download */
div.dt-buttons .buttons-print::before { content: "\f501"; content: "\f501" / ""; }                      /* printer      */
/* «Tabla» / «Galería» del catálogo: botones suaves como los demás. No se pintan como control segmentado: el del modo que
   se ve está desactivado (atributo disabled de Buttons), y pintarlo «seleccionado» diría al ojo lo contrario que al
   lector de pantalla. Su icono de font-awesome («fa-picture») no existe: el de bootstrap-icons es el primero que tienen. */
div.dt-buttons .ocultargaleria::before { content: "\f5aa"; content: "\f5aa" / ""; }                     /* table        */
div.dt-buttons .mostrargaleria::before { content: "\f42a"; content: "\f42a" / ""; }                     /* images       */
div.dt-buttons .dt-button.mostrargaleria { margin-right: 8px !important; }

/* Desplegable de Mostrar/Ocultar columnas */
div.dt-button-collection { background: var(--tm-superficie) !important; border: 1px solid var(--tm-linea) !important; border-radius: 12px !important; box-shadow: var(--tm-sombra-alta) !important; padding: 8px !important; }
div.dt-button-collection .dt-button {
    background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important;
    border-radius: 6px !important; color: var(--tm-tinta) !important; font-size: 14px; margin: 1px !important;
}
div.dt-button-collection .dt-button:hover { background: var(--tm-suave) !important; }
div.dt-button-collection .dt-button.active, div.dt-button-collection .dt-button.dt-button-active { background: var(--tm-seleccion) !important; color: var(--tm-tinta) !important; font-weight: 600; }
div.dt-button-collection .dt-button::after { display: none !important; }
div.dt-button-background { background: rgba(28, 48, 82, .12) !important; }

/* ---------- DataTables: envoltorio, longitud, búsqueda, info y paginación ---------- */
.dataTables_wrapper {
    background: var(--tm-superficie); border: 1px solid rgba(28, 48, 82, .10); border-radius: var(--tm-radio-tarjeta);
    padding: 16px 18px 10px; box-shadow: var(--tm-sombra);
}
/* El catálogo tiene 61 columnas y sin scrollX: la tarjeta crece con la tabla (la página se desplaza en horizontal, como
   antes) en vez de dejarla salirse. */
body > .fluid-container > .dataTables_wrapper { width: max-content; min-width: 100%; }
.dataTables_length, .dataTables_filter { margin-bottom: 10px; }
.dataTables_length { border: 0 !important; padding: 0 !important; }
.dataTables_length label, .dataTables_filter label, .dataTables_info { color: var(--tm-texto-2) !important; font-size: 14px !important; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--tm-borde-campo) !important; border-radius: var(--tm-radio) !important; background-color: var(--tm-superficie) !important;
    color: var(--tm-tinta) !important; padding: 5px 8px !important; box-shadow: none !important; font-size: 14px;
}
.dataTables_wrapper .dataTables_filter input { min-width: 220px; margin-left: 8px !important; }
.dataTables_wrapper .dataTables_paginate { padding-top: 10px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 0 !important; border-radius: var(--tm-radio) !important; color: var(--tm-tinta) !important; background: transparent !important;
    padding: 6px 12px !important; margin: 0 2px !important; box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--tm-suave) !important; color: var(--tm-tinta) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--tm-primario) !important; color: #FFFFFF !important; border-radius: 999px !important; min-width: 34px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--tm-marcador) !important; background: transparent !important; }
div.dataTables_processing { background: var(--tm-superficie) !important; border: 1px solid var(--tm-linea); border-radius: 8px; box-shadow: var(--tm-sombra); color: var(--tm-tinta); }

/* ---------- Tabla ---------- */
table.dataTable { color: var(--tm-tinta); font-size: 14px !important; }
table.dataTable thead th, table.dataTable tfoot th {
    background: var(--tm-superficie) !important; color: var(--tm-texto-2) !important; font-weight: 600; font-size: 12px !important;
    text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--tm-linea) !important; border-top: 0 !important;
}
table.dataTable thead th i.fa { display: none; }                  /* cuadraditos de color de las cabeceras de configuración */
table.dataTable thead tr:nth-child(2) th { padding: 6px 8px !important; text-transform: none; letter-spacing: 0; }
/* Filtros de columna. El borde va sin !important: table.log.js marca el filtro activo con un borde rojo en línea y esa
   señal tiene que seguir viéndose. */
table.dataTable thead input, table.dataTable tfoot input {
    border: 1px solid var(--tm-borde-campo); border-radius: 6px; padding: 4px 7px; font-size: 13px; font-weight: 400;
    color: var(--tm-tinta); background: var(--tm-superficie) !important; width: 100%; box-shadow: none !important;
}
table.dataTable thead input::placeholder, table.dataTable tfoot input::placeholder { color: var(--tm-marcador); opacity: 1; }
table.dataTable tbody td, table.dataTable tbody th { border-top: 1px solid var(--tm-linea) !important; vertical-align: middle; }
/* DataTables 1.12 pinta las rayas, la columna ordenada y el paso del ratón con box-shadow inset: se quitan y se pone el
   tinte propio, igual que en Subvenciones. */
html body table.dataTable tbody tr, html body table.dataTable tbody tr > * { background-color: transparent !important; box-shadow: none !important; }
html body table.dataTable tbody tr.odd > td.sorting_1, html body table.dataTable tbody tr.even > td.sorting_1 { background-color: transparent !important; }   /* naranja.css: tr.odd td.sorting_1 gris */
table.dataTable tbody tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(28, 48, 82, .04) !important; }
table.dataTable tbody tr.selected > *, table.dataTable tbody tr.selected:hover > * { box-shadow: inset 0 0 0 9999px var(--tm-seleccion) !important; color: var(--tm-tinta) !important; }
table.dataTable tbody tr.selected > *:first-child { box-shadow: inset 4px 0 0 var(--tm-foco), inset 0 0 0 9999px var(--tm-seleccion) !important; }
table.dataTable tbody tr.selected a { color: var(--tm-enlace) !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--tm-linea) !important; }
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after { opacity: .35; }
table.dataTable tbody td i.fa { color: var(--tm-primario); }
/* Tablas antes de arrancar DataTables: tres filas de cabeceras repetidas (títulos, filtros y pie) con aspecto de
   formulario vacío. DataTables les pone la clase dataTable nada más arrancar. visibility y no display: así guardan su
   sitio y DataTables mide bien las columnas. */
table#epigrafe:not(.dataTable), table#gestordocumental:not(.dataTable), table#users:not(.dataTable), table#roles:not(.dataTable),
table#lp_log:not(.dataTable), table#infocentro:not(.dataTable) { visibility: hidden; }

/* ---------- Catálogo (epigrafe.php) ---------- */
body > .fluid-container { padding: 22px 24px 0; }
.loader { background-color: var(--tm-fondo) !important; }
#alert_busquedas { border: 0; border-radius: 8px; background: var(--tm-peligro-fondo); color: var(--tm-peligro); font-size: 14px; }
/* Galería: tarjetas IC; «Ir a la ficha» como botón suave con icono */
#gallery { gap: 16px; padding: 16px 0 !important; justify-content: flex-start !important; }
#gallery > .card {
    border: 1px solid rgba(28, 48, 82, .10) !important; border-radius: var(--tm-radio-tarjeta) !important; box-shadow: var(--tm-sombra);
    overflow: hidden; margin: 0 !important; background: var(--tm-superficie);
}
#gallery > .card .card-img-top { background: var(--tm-suave); min-height: 160px; object-fit: cover; }
#gallery > .card .card-title { font-size: 17px; font-weight: 600; color: var(--tm-tinta); }
#gallery > .card .card-text { color: var(--tm-texto-2); font-size: 14px; }
#gallery > .card .list-group-item { border-color: var(--tm-linea) !important; border-width: 1px 0 0 !important; color: var(--tm-tinta); font-size: 14px; }
#gallery > .card > a.btn-dark {
    margin: 12px 16px 16px; align-self: flex-end; background: var(--tm-suave); color: var(--tm-tinta); border: 0; border-radius: var(--tm-radio);
    font-size: 14px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px;
}
#gallery > .card > a.btn-dark::before { font-family: bootstrap-icons; content: "\f38b"; content: "\f38b" / ""; }
#gallery > .card > a.btn-dark:hover { background: var(--tm-suave-hover); color: var(--tm-tinta) !important; }
#gallery .modal-content { text-align: left; }

/* ---------- Modales (Bootstrap) ---------- */
.modal-content { border: 0; border-radius: var(--tm-radio-tarjeta); box-shadow: var(--tm-sombra-alta); overflow: hidden; }
.modal-header { background: var(--tm-superficie) !important; color: var(--tm-tinta) !important; border-bottom: 1px solid var(--tm-linea) !important; }
.modal-title { font-weight: 600; }
.modal-footer { border-top: 1px solid var(--tm-linea) !important; background: var(--tm-superficie); }
.modal-footer .btn-light { background: var(--tm-suave); border: 0; color: var(--tm-tinta); }

/* ---------- Formularios de Editor 1.9 (lightbox de editor.dataTables) ---------- */
div.DTED_Lightbox_Wrapper div.DTED_Lightbox_Content { border-radius: var(--tm-radio-tarjeta) !important; box-shadow: var(--tm-sombra-alta) !important; }
div.DTED_Lightbox_Wrapper div.DTED_Lightbox_Content div.DTE { border-radius: var(--tm-radio-tarjeta); }
div.DTE div.DTE_Header {
    background: var(--tm-superficie) !important; color: var(--tm-tinta) !important; border-bottom: 1px solid var(--tm-linea) !important;
    font-size: 18px; font-weight: 600; border-radius: var(--tm-radio-tarjeta) var(--tm-radio-tarjeta) 0 0;
}
div.DTE div.DTE_Footer { background: var(--tm-superficie-2) !important; border-top: 1px solid var(--tm-linea) !important; border-radius: 0 0 var(--tm-radio-tarjeta) var(--tm-radio-tarjeta); }
div.DTE div.DTE_Field > label { color: var(--tm-tinta); font-size: 14px; font-weight: 600; }
div.DTE div.DTE_Field input, div.DTE div.DTE_Field select, div.DTE div.DTE_Field textarea {
    border: 1px solid var(--tm-borde-campo) !important; border-radius: var(--tm-radio) !important; padding: 6px 10px !important;
    font-size: 15px; color: var(--tm-tinta); background: var(--tm-superficie) !important; box-shadow: none !important;
}
div.DTE div.DTE_Field input[type="checkbox"], div.DTE div.DTE_Field input[type="radio"] { padding: 0 !important; width: auto; }
div.DTE div.DTE_Field div.DTE_Field_Info, div.DTE div.DTE_Field div.DTE_Field_Message { color: var(--tm-texto-2); font-size: 13px; }
div.DTE div.DTE_Field div.DTE_Field_Error, div.DTE div.DTE_Form_Error { color: var(--tm-peligro) !important; }
div.DTE div.DTE_Form_Buttons { display: flex; justify-content: flex-end; gap: 8px; }
div.DTE div.DTE_Form_Buttons button, div.DTE div.DTE_Form_Buttons .btn {
    float: none !important; margin: 0 !important; background: var(--tm-primario) !important; background-image: none !important;
    color: #FFFFFF !important; border: 0 !important; border-radius: var(--tm-radio) !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 600; padding: 8px 18px !important;
}
div.DTE div.DTE_Form_Buttons button:hover { background: var(--tm-primario-hover) !important; }
div.DTE_Action_Remove div.DTE_Form_Buttons button { background: var(--tm-peligro) !important; }
div.DTED_Lightbox_Wrapper div.DTED_Lightbox_Close {
    background: var(--tm-suave) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; color: var(--tm-tinta) !important;
}
div.DTED_Lightbox_Background { background: rgba(28, 48, 82, .35) !important; }
div.DTE div.editor_upload button, div.DTE div.editor_upload .btn {
    background: var(--tm-suave) !important; color: var(--tm-tinta) !important; border: 0 !important; border-radius: var(--tm-radio) !important; box-shadow: none !important;
}
div.DTE div.editor_upload div.drop { border: 2px dashed var(--tm-borde-campo) !important; border-radius: 12px; color: var(--tm-texto-2) !important; background: var(--tm-superficie-2); }
div.DTE div.editor_upload div.drop.over { border-color: var(--tm-foco) !important; background: var(--tm-seleccion); }

/* ---------- Ficha del catálogo (verarticulo_portfolio.php) ---------- */
#content > .panel.panel-default {
    max-width: 1100px; margin: 0 auto 24px; background: var(--tm-superficie); border: 1px solid rgba(28, 48, 82, .10);
    border-radius: var(--tm-radio-tarjeta); box-shadow: var(--tm-sombra); padding: 8px 0 18px;
}
#content > .panel > .panel-body { padding: 20px 48px 0 !important; }
.columna_titulo {
    margin: 14px 0 4px !important; font-size: 12px !important; font-weight: 600; color: var(--tm-texto-2) !important;
    text-transform: uppercase; letter-spacing: .05em;
}
.columna_horizontal {
    background: var(--tm-fondo); border: 1px solid var(--tm-linea) !important; border-radius: 8px; padding: 7px 12px !important;
    min-height: 38px; font-size: 15px !important; color: var(--tm-tinta); margin-bottom: 4px !important;
}
/* Valores editables en línea (x-editable): el dato es el enlace; subrayado discontinuo, sin color de aviso */
#content a.editable, #content a.editable-click { color: var(--tm-tinta) !important; border-bottom: 1px dashed var(--tm-borde-campo) !important; text-decoration: none !important; }
#content a.editable:hover { border-bottom-color: var(--tm-foco) !important; }
#content a.editable-empty, #content a.editable-empty:hover { color: var(--tm-texto-2) !important; font-style: italic !important; }
#content a.noeditable { color: var(--tm-tinta) !important; }
/* Campo de edición en línea (las dos llamadas de epigrafes/1/js/epigrafe.js van con showbuttons:false: guarda Intro) */
.editableform .form-control { border: 1px solid var(--tm-borde-campo) !important; border-radius: 8px !important; color: var(--tm-tinta); }
/* Cabecera de la ficha: «Nº DE ORDEN», «ANTIGUO INVENTARIO» y «FECHA DE TOMA DE DATOS» como etiquetas */
#content > .panel > .panel-body > .row:first-child div[style*="font-size:16px"],
#content > .panel > .panel-body > .row:first-child .col-md-5 .col-md-8 {
    font-size: 12px !important; font-weight: 600; color: var(--tm-texto-2); text-transform: uppercase; letter-spacing: .05em;
}
/* Nº de orden */
#content h4[style*="border"] { border: 0 !important; background: var(--tm-seleccion); color: var(--tm-tinta); border-radius: 8px; padding: 4px 0; font-weight: 700; }
#content input.ui-autocomplete-input2 {
    border: 1px solid var(--tm-borde-campo) !important; border-radius: 8px; padding: 5px 10px; color: var(--tm-tinta); background: var(--tm-superficie);
}
#content input.ui-autocomplete-input2:disabled { background: var(--tm-fondo); border-color: var(--tm-linea) !important; }
/* «Imprimir» (ficha en PDF y ficha de depósito): botón suave con icono */
#content a[href*="fpdf17/ficha/"] {
    display: inline-flex; align-items: center; gap: 6px; background: var(--tm-suave); color: var(--tm-tinta) !important;
    border-radius: var(--tm-radio); padding: 6px 12px; font-size: 14px; text-decoration: none !important; margin: 0 !important;
}
#content a[href*="fpdf17/ficha/"]:hover { background: var(--tm-suave-hover); }
#content a[href*="fpdf17/ficha/"] i.fa { display: none; }
#content a[href*="fpdf17/ficha/"]::before { font-family: bootstrap-icons; content: "\f501"; content: "\f501" / ""; }
/* Casillas (Firmado, Fechado, Donación…) */
#content .checkbox label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tm-tinta); cursor: pointer; }
#content .checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--tm-primario); }
/* Depósito */
#content .container.border { background: var(--tm-superficie-2) !important; border: 1px solid var(--tm-linea) !important; border-radius: 12px; padding: 14px 18px !important; font-size: 14px; color: var(--tm-tinta); }
/* Gestor documental */
#content .separador {
    text-align: left !important; font-size: 12px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tm-texto-2) !important; background: transparent !important; border: 0 !important; margin: 28px 0 8px !important; padding: 0 !important;
}
#content #gestordocumental td img { max-height: 40px; border-radius: 6px; }
/* «Cerrar» al pie de la ficha: la secundaria de la pantalla */
.panel-footer { background: transparent !important; border: 0 !important; }
.panel-footer a.btn-inventario {
    background: var(--tm-superficie) !important; color: var(--tm-tinta) !important; border: 1px solid var(--tm-borde-campo) !important;
    border-radius: var(--tm-radio) !important; box-shadow: none !important; font-size: 14px !important; padding: 7px 18px !important;
}
.panel-footer a.btn-inventario:hover { background: var(--tm-suave) !important; }
.panel-footer a.btn-inventario i.fa { display: none; }

/* ---------- Configuración (gentelella: start_dashboard.php) ---------- */
body.nav-md .container.body { max-width: none; width: auto; padding: 0 24px; }
body.nav-md .main_container { display: flex; gap: 20px; align-items: flex-start; padding-top: 22px; }
body.nav-md .col-md-3.left_col {
    background: var(--tm-superficie) !important; width: 240px !important; flex: 0 0 240px; padding: 14px 10px !important; min-height: 0 !important;
    border: 1px solid rgba(28, 48, 82, .10); border-radius: var(--tm-radio-tarjeta); box-shadow: var(--tm-sombra); position: static !important;
}
body.nav-md .left_col.scroll-view { background: transparent !important; border: 0; box-shadow: none; padding: 0 !important; width: auto !important; }
body.nav-md .menu_section { margin-bottom: 0; }
body.nav-md .menu_section > h2 { color: var(--tm-texto-2); font-size: 12px; font-weight: 600; letter-spacing: .06em; padding: 4px 12px 8px; margin: 0; }
body.nav-md .nav.side-menu > li > a {
    color: var(--tm-tinta) !important; font-size: 14px !important; font-weight: 500; padding: 9px 12px !important; border-radius: 8px;
    text-shadow: none !important; display: flex; align-items: center; gap: 10px; margin-bottom: 2px;
}
body.nav-md .nav.side-menu > li > a:hover, body.nav-md .nav.side-menu > li > a:focus { background: var(--tm-suave) !important; color: var(--tm-tinta) !important; }
body.nav-md .nav.side-menu > li.active, body.nav-md .nav.side-menu > li.current-page { border-right: 0 !important; background: transparent !important; }
body.nav-md .nav.side-menu > li.active > a, body.nav-md .nav.side-menu > li.current-page > a { background: var(--tm-seleccion) !important; color: var(--tm-tinta) !important; box-shadow: inset 3px 0 0 var(--tm-foco); }
body.nav-md .nav.side-menu > li > a i.fa, body.nav-md #fa_menu { color: var(--tm-primario) !important; width: 18px; font-size: 15px !important; margin: 0 !important; }
body.nav-md .right_col { background: transparent !important; margin: 0 !important; padding: 0 !important; flex: 1 1 auto; min-height: 0 !important; min-width: 0; }
body.nav-md .x_panel {
    background: var(--tm-superficie); border: 1px solid rgba(28, 48, 82, .10) !important; border-radius: var(--tm-radio-tarjeta);
    box-shadow: var(--tm-sombra); padding: 18px 22px; height: auto !important; min-height: 0;
}
body.nav-md .x_title { border-bottom: 1px solid var(--tm-linea) !important; padding: 0 0 10px; margin-bottom: 14px; }
body.nav-md .x_title h2 { color: var(--tm-tinta); font-size: 20px; font-weight: 600; margin: 0; }
body.nav-md .x_panel .dataTables_wrapper { border: 0; box-shadow: none; padding: 0; }
body.nav-md .panel_toolbox > li > a { color: var(--tm-texto-2) !important; }
/* Plegar y cerrar de gentelella: <a> sin href, solo ratón y sin nombre. Se ocultan (el resto de la caja de herramientas,
   como la llave de «Usuarios», sigue). */
body.nav-md .panel_toolbox > li:has(> a.collapse-link), body.nav-md .panel_toolbox > li:has(> a.close-link) { display: none; }
body.nav-md .dropzone { border: 2px dashed var(--tm-borde-campo) !important; border-radius: 12px; background: var(--tm-superficie-2) !important; color: var(--tm-texto-2); }

/* ---------- Panel (panel.php): accesos como tarjetas; la tarjeta entera es el enlace ---------- */
#features-section .row { margin: 0; }
.panel-accesos {
    list-style: none; margin: 0 auto; padding: 48px 24px 16px; display: grid; gap: 20px; justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
}
.panel-acceso {
    display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 24px 32px; height: 100%;
    background: var(--tm-superficie); border: 1px solid rgba(28, 48, 82, .10); border-radius: var(--tm-radio-tarjeta);
    box-shadow: var(--tm-sombra); color: var(--tm-tinta) !important; text-decoration: none !important;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
a.panel-acceso:hover { box-shadow: var(--tm-sombra-alta); border-color: var(--tm-foco); transform: translateY(-2px); }
.panel-acceso > i.bi {
    display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px;
    background: rgba(28, 48, 82, .08); color: var(--tm-primario); font-size: 30px;
}
.panel-acceso-titulo { font-size: 18px; font-weight: 600; letter-spacing: .01em; }
.panel-acceso-sin-permiso { background: var(--tm-superficie-2); box-shadow: none; color: var(--tm-texto-2) !important; }
.panel-acceso-sin-permiso > i.bi { color: var(--tm-texto-2); background: var(--tm-suave); }
.panel-acceso-nota { font-size: 13px; color: var(--tm-texto-2); }

/* ---------- Pie: «© año Catálogo de Bienes · entersolo.» con el punto rojo ----------
   Marcado propio en footer.php y loginsystem/footer.php (lo que se ve es lo que lee el lector de pantalla). Las dos
   versiones (la de configuración trae su <style> con position:fixed y left:-230px) quedan iguales: en el flujo. */
body footer.footer {
    position: static !important; left: auto !important; height: auto !important; background: transparent !important;
    border-top: 1px solid var(--tm-linea); margin-top: 32px !important; padding: 16px 0 !important; width: 100% !important;
}
body footer.footer .pie-marca { margin: 0; font-size: 13px; color: var(--tm-texto-2); }
.marca-entersolo { font-weight: 700; color: var(--tm-tinta); letter-spacing: -.02em; font-size: 15px; margin-left: 2px; }
.marca-entersolo .marca-punto { color: var(--tm-marca); }

/* ---------- Login (loginsystem/login.php) e índice (index.php): fondo liso y tarjeta ---------- */
.container.login { padding-top: 0 !important; background: transparent !important; height: auto !important; }
.container.login .index-box, .container .login {
    background: var(--tm-superficie) !important; box-shadow: var(--tm-sombra-alta) !important; border-radius: var(--tm-radio-tarjeta) !important;
    padding: 2.2em 2.4em 2em !important; margin-top: 7vh !important; height: auto !important;
}
.container.login .index-box { display: flex; flex-direction: column; }
@media (max-width: 767.98px) {                                                   /* móvil: margen a los lados */
    .container.login .index-box, .container .login { margin-left: 12px !important; margin-right: 12px !important; width: calc(100% - 24px) !important; padding: 1.8em 1.4em !important; }
}
.container.login .index-box > #logo { order: -1; margin-bottom: 14px; }      /* el logo, antes que el aviso */
.container.login #logo img, .container .login #logo img { width: 78% !important; display: block; margin: 0 auto 6px; }
.container.login .navbar-form, .container .login .navbar-form { margin-top: 18px !important; }
.container.login input.form-control, .container .login input.form-control, #recordarpassword input.form-control {
    width: 100% !important; text-align: left !important; color: var(--tm-tinta) !important; background: var(--tm-superficie) !important;
    border: 1px solid var(--tm-borde-campo) !important; border-radius: var(--tm-radio) !important; padding: 10px 12px; margin-bottom: 12px !important; font-size: 15px;
}
.container.login input.form-control::placeholder, .container .login input.form-control::placeholder, #recordarpassword input::placeholder { color: var(--tm-marcador) !important; opacity: 1; }
.container.login .btn-info, .container .login .btn-info, #recordarpassword .btn-info {
    background: var(--tm-primario) !important; border: 0 !important; border-radius: var(--tm-radio) !important; padding: 10px; font-weight: 600; color: #FFFFFF !important; width: 100%;
}
.container.login .btn-info:hover, .container .login .btn-info:hover, #recordarpassword .btn-info:hover { background: var(--tm-primario-hover) !important; }
.container.login .alert { font-family: inherit !important; font-size: 14px !important; border-radius: 8px; box-shadow: none !important; text-align: left; border: 0 !important; }
.container.login .alert-danger { background: var(--tm-peligro-fondo) !important; color: var(--tm-peligro) !important; }
.container.login .alert-success { background: var(--tm-exito-fondo) !important; color: var(--tm-exito) !important; }
.container.login .alert-info { background: var(--tm-seleccion) !important; color: var(--tm-tinta) !important; }   /* «Inicie sesión.» */
.container.login .footer { margin-top: 18px; }
.container.login .footer p, .container.login .footer a, .container .login p.detail { font-size: 14px !important; font-family: inherit !important; }
/* «¿Tiene problemas para iniciar sesión?» abre el modal de recordar: es una acción, botón suave con icono */
.container.login #recordarusuario, .container .login #recordarusuario {
    color: var(--tm-tinta) !important; background: var(--tm-suave) !important; border: 0 !important; border-radius: var(--tm-radio);
    text-decoration: none !important; padding: 7px 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px;
}
.container.login #recordarusuario:hover, .container .login #recordarusuario:hover { background: var(--tm-suave-hover) !important; }
/* El login no carga bootstrap-icons: el icono (círculo con «?») va en SVG propio como máscara, del color del texto */
.container.login #recordarusuario::before, .container .login #recordarusuario::before {
    content: ""; width: 16px; height: 16px; background-color: currentColor; flex: none;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='7' fill='none' stroke='black' stroke-width='1.5'/%3e%3ctext x='8' y='11.6' font-size='10' font-weight='700' font-family='Arial,sans-serif' text-anchor='middle'%3e%3f%3c/text%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='7' fill='none' stroke='black' stroke-width='1.5'/%3e%3ctext x='8' y='11.6' font-size='10' font-weight='700' font-family='Arial,sans-serif' text-anchor='middle'%3e%3f%3c/text%3e%3c/svg%3e") center / contain no-repeat;
}
.container.login .foot, .container .login p.detail { color: var(--tm-texto-2) !important; text-decoration: none; margin: 0 !important; font-weight: 400 !important; }
.container .login p.detail { margin-top: 14px !important; }                    /* índice: aire bajo «Iniciar sesión» */
.container .login hr { display: none; }
#recordarpassword .modal-dialog { width: auto !important; max-width: 440px !important; padding-top: 10vh !important; }
#recordarpassword .modal-header { border: 0 !important; justify-content: flex-end; padding-bottom: 0; }
#recordarpassword h1 { font-size: 22px; font-weight: 600; }
#recordarpassword h4 { font-size: 15px; }
#recordarpassword h1 div, #recordarpassword h4 div { font-family: inherit !important; }
#recordarpassword h4 div { color: var(--tm-texto-2) !important; }

/* ---------- Login e índice: foto de la sala a pantalla completa (maqueta A, elegida por Ancor el 01/11/2026) ----------
   Solo las dos páginas con formulario de entrada (las únicas con la clase «login»; las de sesión comparten
   <body id="background">). La foto es decorativa, el equivalente a alt="": va de fondo y el lector no la anuncia.
   Velo azul de marca al 45 % encima. Nada de texto sobre la foto: el formulario va en el panel blanco opaco, y lo que
   queda fuera del panel en login.php («¿Tiene problemas…?» y el ©) va en píldoras blancas opacas, con los contrastes del
   tema (tinta 13,17:1; texto secundario 5,43:1) sea cual sea la foto debajo. El foco de lo que está sobre la foto lleva
   anillo doble (blanco y azul de marca) para verse sobre cualquier zona. Imágenes: images/login_sala.jpg (1920×1275,
   265 KB) y, en móvil, images/login_sala_movil.jpg (recorte vertical 800×1333, 106 KB), copias reducidas de
   images/portada.jpg. Sin movimiento: nada que respete prefers-reduced-motion. Sin :has() queda el tema sin foto. */
body#background:has(.login) {
    background: linear-gradient(rgba(28, 48, 82, .45), rgba(28, 48, 82, .45)), url('/images/login_sala.jpg') center / cover no-repeat fixed var(--tm-cabecera) !important;
    min-height: 100vh;
}
body#background:has(.login) .index-box, body#background:has(.login) .container .login {
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35) !important; margin-top: 12vh !important;
}
body#background:has(.login) .container.login .footer .col-md-12 { display: flex; flex-direction: column; align-items: center; gap: 10px; }
body#background:has(.container.login) #recordarusuario { background: #FFFFFF !important; }
body#background:has(.container.login) #recordarusuario:hover { background: var(--tm-suave) !important; }
body#background:has(.container.login) .container.login .footer p.detail { margin: 0 !important; }
body#background:has(.container.login) .container.login .foot {
    display: inline-block; background: #FFFFFF; color: var(--tm-texto-2) !important; padding: 4px 12px; border-radius: 999px; font-size: 13px !important;
}
body#background:has(.container.login) .container.login .footer :focus-visible {
    outline: 3px solid #FFFFFF !important; outline-offset: 2px !important; box-shadow: 0 0 0 7px var(--tm-primario) !important;
}
@media (max-width: 767.98px) {                                      /* móvil: recorte vertical, más ligero; sin «fixed» */
    body#background:has(.login) {
        background: linear-gradient(rgba(28, 48, 82, .45), rgba(28, 48, 82, .45)), url('/images/login_sala_movil.jpg') center top / cover no-repeat var(--tm-cabecera) !important;
    }
    body#background:has(.login) .index-box, body#background:has(.login) .container .login { margin-top: 8vh !important; }
}

/* ---------- Cambio de contraseña (cambiar_clave.php) ---------- */
.panel-clave { border-radius: var(--tm-radio-tarjeta) !important; box-shadow: var(--tm-sombra-alta) !important; padding: 2.2rem 2.4rem !important; color: var(--tm-tinta); }
.panel-clave .etiqueta-seccion, .panel-clave .ayuda { color: var(--tm-texto-2) !important; }
.panel-clave .form-label { font-weight: 600; font-size: 14px; }
.panel-clave .form-control { border: 1px solid var(--tm-borde-campo); border-radius: var(--tm-radio); padding: 9px 12px; }
.panel-clave .btn-primary { background: var(--tm-primario); border: 0; border-radius: var(--tm-radio); font-weight: 600; padding: 9px 18px; }
.panel-clave .btn-primary:hover { background: var(--tm-primario-hover); }
.panel-clave .btn-outline-secondary { color: var(--tm-tinta); border: 1px solid var(--tm-borde-campo); border-radius: var(--tm-radio); padding: 9px 16px; background: var(--tm-superficie); }
.panel-clave .btn-outline-secondary:hover { background: var(--tm-suave); color: var(--tm-tinta); }
.panel-clave .alert-danger { background: var(--tm-peligro-fondo); color: var(--tm-peligro); border: 0; border-radius: 8px; font-size: 14px; }