/* ==========================================================================
   SGD - Sistema de Gestion Documentaria
   Hoja de estilos global del sistema de diseno (sgd-ui.css)
   --------------------------------------------------------------------------
   - Cargada una sola vez desde util:load-scripts-ini.tagx (y base/default.jspx)
   - Todos los componentes viven bajo prefijos .sgd- / .recadm- (alias legado):
     NINGUNA regla de elemento suelta ni de id global -> cero impacto en las
     ~353 vistas que aun no migran.
   - Regla de oro no invasiva: el CSS nunca cambia etiquetas, tipos, ids,
     nombres de clases funcionales (ui-*, btn, dropdown-*, progress-bar...)
     ni atributos; solo se suman/reemplazan clases visuales en las vistas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CAPA DE ADOPCION LEGACY
   Da el look del sistema de diseno a las vistas que AUN NO adoptan clases
   sgd-*: fieldsets/leyendas sin clase, titulos de panel ui-panel, readonly
   y foco. Es una capa de transicion: cada vista migrada deja de depender
   de ella al usar sgd-section/sgd-legend. Excepciones conocidas (mantienen
   su look propio por id o por selector mas especifico):
     - #divArchivadoresAdmin (archivadoresListado.jspx)
     - .arch-filter-section  (documentosArchivados.jspx)
     - .adm-descarga-wrap, .anx-carga-panel, .sgd-seg-anexos
       (sus reglas de legend fueron elevadas a > specificity en cada vista)
   -------------------------------------------------------------------------- */

/* Paneles maestros de pagina */
.ui-panel {
    padding: 0;
    background-color: #fff;
    border: 1px solid var(--sgd-section-border);
    border-radius: var(--sgd-radius-section);
}

/* HEADER DE PAGINA: maxima jerarquia, banda azul solida con texto blanco.
   Se distingue claramente de las leyendas de seccion (claras con acento) */
.ui-panel > .ui-panel-titlebar {
    background: var(--sgd-header-bg);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.10));
    border: none;
    box-shadow: inset 0 -2px 0 var(--sgd-accent);
    color: var(--sgd-header-text);
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-title);
    font-weight: 700;
    text-transform: uppercase;
    text-align: end;
    letter-spacing: 0.5px;
    padding: 9px 14px 10px;
    margin: 0;
    border-radius: var(--sgd-radius-section) var(--sgd-radius-section) 0 0;
}

.ui-panel > .ui-panel-titlebar > span {
    color: var(--sgd-header-text);
}

.ui-panel > .ui-panel-titlebar a {
    color: var(--sgd-header-text);
    text-decoration: none;
}

.ui-panel .ui-panel-body {
    padding: 8px 10px;
}

/* Ventanas de dialogo (Pcm/jQuery UI): mismo lenguaje que el header */
.ui-dialog .ui-dialog-titlebar {
    background: var(--sgd-header-bg);
    background-image: none;
    border: none;
    color: var(--sgd-header-text);
    font-family: var(--sgd-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 7px 12px;
    border-radius: var(--sgd-radius-section) var(--sgd-radius-section) 0 0;
}

.ui-dialog .ui-dialog-title {
    color: var(--sgd-header-text);
}

/* Acordeones bootstrap (panel-primary): alineados al color del header */
.panel-primary {
    border-color: var(--sgd-header-bg);
}

.panel-primary > .panel-heading {
    background: var(--sgd-header-bg);
    border-color: var(--sgd-header-bg);
}

/* Datepicker jQuery UI: cabecera y seleccion alineadas al sistema */
.ui-datepicker .ui-datepicker-header {
    background: var(--sgd-header-bg);
    border: none;
    color: var(--sgd-header-text);
    font-family: var(--sgd-font);
    font-weight: 700;
    border-radius: var(--sgd-radius) var(--sgd-radius) 0 0;
}

.ui-datepicker .ui-datepicker-title {
    color: var(--sgd-header-text);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-datepicker-buttonpane .ui-priority-primary {
    background: var(--sgd-accent);
    border-color: var(--sgd-accent);
    color: #fff;
    border-radius: var(--sgd-radius);
}

.ui-datepicker table td a:hover {
    background: var(--sgd-legend-bg);
    border-color: var(--sgd-accent);
    color: var(--sgd-label);
}

/* Fieldsets y leyendas sin clase = patron "seccion" (version chip, sin
   overflow:hidden para no recortar dropdowns bootstrap en vistas no migradas) */
fieldset:not([class]) {
    border: 1px solid var(--sgd-section-border);
    border-radius: var(--sgd-radius-section);
    background: #fff;
    padding: 8px 10px;
    margin: 0 0 var(--sgd-gap) 0;
}

/* LEYENDA DE SECCION (legado): banda clara + barra de acento lateral.
   Familia visual distinta del header oscuro */
fieldset:not([class]) > legend:not([class]) {
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
    font-weight: 700;
    color: var(--sgd-legend-text);
    background: var(--sgd-legend-bg);
    padding: 4px 14px 4px 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-left: 4px solid var(--sgd-accent);
    border-radius: 0 var(--sgd-radius) var(--sgd-radius) 0;
}

/* Solo lectura: misma firma visual del sistema (gris + borde punteado),
   el elemento SIGUE SIENDO INPUT (cero cambio funcional) */
input[readonly],
textarea[readonly] {
    background: var(--sgd-readonly-bg);
    color: var(--sgd-text);
    border: 1px dashed var(--sgd-readonly-border);
    cursor: default;
}

input[readonly]:focus,
textarea[readonly]:focus {
    outline: none;
    border-color: var(--sgd-readonly-border);
    box-shadow: none;
    background: var(--sgd-readonly-bg);
}

/* Foco del sistema en controles sueltos (no toca los que tienen clases
   de bootstrap/form-control con reglas propias mas especificas) */
input[type="text"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--sgd-focus);
    box-shadow: 0 0 0 2px var(--sgd-focus-ring);
    background: #fff;
}

/* --------------------------------------------------------------------------
   0B. BOTONES BOOTSTRAP ARMONIZADOS A LA PALETA DEL SISTEMA
   Mismas variantes semanticas del sistema de badges/estados; no cambia
   markup ni clases, solo su colorimetria y forma.
   -------------------------------------------------------------------------- */
.btn {
    font-family: var(--sgd-font);
    border-radius: var(--sgd-radius);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--sgd-focus-ring);
}

/* Default: gris azulado: claramente boton, no input (input = blanco) */
.btn-default {
    background: #e8edf4;
    border-color: #b7c3d3;
    color: #2f3a48;
}

.btn-default:hover,
.btn-default:active:hover,
.btn-default.active:hover {
    background: #dbe3ee;
    border-color: #9fb0c6;
    color: #2f3a48;
}

/* Primary: azul intermedio reconocible (distinto del navy de headers,
   mismo rango que el resto de colores que el usuario ya conoce) */
.btn-primary {
    background: var(--sgd-btn-primary);
    border-color: var(--sgd-btn-primary-border);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background: var(--sgd-btn-primary-hover);
    border-color: #204d74;
    color: #fff;
}

/* Success: verde clasico bootstrap (reconocido por el usuario) */
.btn-success {
    background: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.open > .dropdown-toggle.btn-success {
    background: #449d44;
    border-color: #398439;
    color: #fff;
}

/* Danger: rojo clasico bootstrap */
.btn-danger {
    background: #d9534f;
    border-color: #d43f3a;
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.open > .dropdown-toggle.btn-danger {
    background: #c9302c;
    border-color: #ac2925;
    color: #fff;
}

/* Warning: ambar clasico bootstrap */
.btn-warning {
    background: #f0ad4e;
    border-color: #eea236;
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.open > .dropdown-toggle.btn-warning {
    background: #ec971f;
    border-color: #d58512;
    color: #fff;
}

/* Info: celeste clasico bootstrap */
.btn-info {
    background: #5bc0de;
    border-color: #46b8da;
    color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.open > .dropdown-toggle.btn-info {
    background: #31b0d5;
    border-color: #269abc;
    color: #fff;
}

/* .btn-link conserva su transparencia */
.btn-link {
    color: var(--sgd-label);
}

/* Toolbars con muchos botones: que cada boton tenga esquinas propias y
   separacion, para que el "wrap" a la siguiente linea no rompa el grupo
   (los selectores espejan a los de bootstrap y ganan por orden de carga) */
.btn-group {
    white-space: normal;
}

.btn-group > .btn,
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child),
.btn-group-lg > .btn,
.btn-group-sm > .btn,
.btn-group-xs > .btn {
    border-top-left-radius: var(--sgd-radius);
    border-top-right-radius: var(--sgd-radius);
    border-bottom-left-radius: var(--sgd-radius);
    border-bottom-right-radius: var(--sgd-radius);
}

.btn-group > .btn,
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    margin-left: 0;
}

.btn-group > .btn + .btn {
    margin-left: 6px;
}

/* Split button (boton + caret de dropdown): se mantiene unido */
.btn-group > .btn + .dropdown-toggle {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Botones grandes de toolbar: texto 16px del sistema
   (bootstrap: 14px/10px 16px -> 16px/8px 16px) */
.btn-group-lg > .btn,
.btn-lg {
    font-size: 16px;
    padding: 8px 16px;
    line-height: 1.4;
}

/* Espaciado uniforme de toolbars: los grupos anidados (split buttons
   boton+caret, toolbars dinamicos) tambien separan 6px; el caret sigue
   pegado a su boton. Con esto ya no hay pares pegados y pares sueltos. */
.btn-group > .btn-group,
.btn-group > .input-group {
    margin-left: 6px;
}

.btn-group > .btn-group:first-child,
.btn-group > .input-group:first-child {
    margin-left: 0;
}

/* Boton que sigue a un grupo anidado: tamben debe separarse
   (los toolbars reales tienen <div class="btn-group"> FIRMAR+caret
   en medio de botones hermanos) */
.btn-group > .btn-group + .btn {
    margin-left: 6px;
}

/* ESPECIFICIDAD: bootstrap tiene ".btn-group .btn + .btn-group" y
   ".btn-group .btn-group + .btn-group" con margin-left:-1px (0,3,0),
   que ganaba sobre las reglas de arriba (0,2,0) y dejaba pegado el lado
   izquierdo del split. Se espeja su estructura de siblings (0,3,0) y se
   gana por orden de carga. */
.btn-group > .btn + .btn-group,
.btn-group > .btn-group + .btn-group,
.btn-group > .btn + .input-group,
.btn-group > .input-group + .btn {
    margin-left: 6px;
}

/* El primer boton de un grupo anidado no hereda margen: el grupo lo da */
.btn-group > .btn-group > .btn:first-child {
    margin-left: 0;
}

.btn-toolbar > .btn,
.btn-toolbar > .btn-group {
    margin-left: 6px;
}

.btn-toolbar > .btn:first-child,
.btn-toolbar > .btn-group:first-child {
    margin-left: 0;
}

/* Botones legacy jQuery UI (toolbars de toolbar.jspx y botones "buscar"
   de input-group): misma piel que .btn-default del sistema */
input.ui-button,
button.ui-button,
span.ui-button {
    font-family: var(--sgd-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    padding: 5px 12px;
    border: 1px solid #b7c3d3;
    border-radius: var(--sgd-radius);
    background: #e8edf4;
    color: #2f3a48;
    cursor: pointer;
}

input.ui-button:hover,
button.ui-button:hover {
    background: #dbe3ee;
    border-color: #9fb0c6;
    color: #2f3a48;
}

input.ui-button:focus,
button.ui-button:focus {
    outline: none;
    border-color: var(--sgd-focus);
    box-shadow: 0 0 0 2px var(--sgd-focus-ring);
}

/* Icon-only (boton buscar pegado a un input): compacto, sin texto */
.input-group-btn > input.ui-button,
.input-group-btn > button.ui-button {
    padding: 5px 8px;
    text-transform: none;
}

/* Elemento activo de dropdowns (etiquetas, estados, archivadores) */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: var(--sgd-btn-primary);
    color: #fff;
}

.dropdown-menu > li > a:hover {
    background: var(--sgd-table-head-bg);
    color: var(--sgd-label);
}

/* Modales bootbox/Pcm: titulo alineado al lenguaje del sistema */
.modal-title {
    font-family: var(--sgd-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--sgd-header-bg);
}

.modal-header {
    border-bottom: 2px solid var(--sgd-accent);
}

/* --------------------------------------------------------------------------
   1. TOKENS DE DISENO
   -------------------------------------------------------------------------- */

/* Fuente del sistema, self-hosted (sin dependencia de internet):
   Public Sans, variable 400-700, subset latin, ~26 KB. Sans-serif
   profesional, abierta y legible: no se ve estrecha ni antiqueda
   como Verdana/Arial. Fallback en cadena para cualquier equipo. */
@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/public-sans-latin.woff2") format("woff2");
}

/* La fuente del sistema tambien para el documento completo y los controles
   (default.css fijaba Arial en body e input/select/textarea; gana el orden) */
body {
    font-family: var(--sgd-font);
}

input,
select,
textarea,
button {
    font-family: var(--sgd-font);
}

:root {
    /* Tipografia (v4: cuerpo 12px para pantallas grandes) */
    --sgd-font: "Public Sans", "Segoe UI", "PT Sans", "Trebuchet MS", system-ui, -apple-system, sans-serif;
    --sgd-fs-base: 12px;
    --sgd-fs-label: 11px;
    --sgd-fs-title: 14px;
    --sgd-lh: 1.45;

    /* Colores base */
    --sgd-text: #333333;
    --sgd-text-muted: #555555;
    --sgd-label: #1e4f90;

    /* Jerarquia visual v3: header oscuro, leyenda clara con acento */
    --sgd-header-bg: #1e4f90;
    --sgd-header-text: #ffffff;
    --sgd-btn-primary: #337ab7;
    --sgd-btn-primary-border: #2e6da4;
    --sgd-btn-primary-hover: #286090;
    --sgd-gold: #c9a227;
    --sgd-gold-soft: #e5c05b;
    --sgd-cream: #f7f2e9;
    --sgd-navy-900: #12274a;
    --sgd-accent: #4a90c2;
    --sgd-table-head-bg: #dbe7f3;
    --sgd-table-head-border: #c3d4e8;
    --sgd-legend-bg: #eef4fb;
    --sgd-legend-text: #1e4f90;
    --sgd-section-border: #cccccc;
    --sgd-input-border: #bbbbbb;
    --sgd-readonly-border: #c0c0c0;
    --sgd-readonly-bg: #f2f2f2;
    --sgd-row-alt-bg: #f5f5f5;
    --sgd-focus: #5a9aaf;
    --sgd-focus-ring: rgba(90, 154, 175, 0.2);

    /* Prioridades */
    --sgd-pri-normal: #000000;
    --sgd-pri-urgente: #b78a00;
    --sgd-pri-muy-urgente: #d00000;

    /* Geometria */
    --sgd-radius: 3px;
    --sgd-radius-section: 4px;
    --sgd-gap: 10px;
    --sgd-field-mb: 6px;

    /* Z-index */
    --sgd-z-dropdown: 1000;
    --sgd-z-dropdown-menu: 1050;
    --sgd-z-modal: 1100;
}

/* --------------------------------------------------------------------------
   2. CONTENEDORES
   -------------------------------------------------------------------------- */
.sgd-container,
.recadm-container {
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
    line-height: var(--sgd-lh);
    color: var(--sgd-text);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 8px;
}

.sgd-container *,
.sgd-container *::before,
.sgd-container *::after,
.recadm-container *,
.recadm-container *::before,
.recadm-container *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   3. SECCIONES (fieldset + leyenda)
   -------------------------------------------------------------------------- */
.sgd-section,
.recadm-section {
    border: 1px solid var(--sgd-section-border);
    background: #fff;
    border-radius: var(--sgd-radius-section);
    margin-bottom: var(--sgd-gap);
    overflow: hidden;
}

.sgd-legend,
.recadm-legend {
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
    font-weight: 700;
    color: var(--sgd-legend-text);
    background: var(--sgd-legend-bg);
    padding: 5px 14px 5px 10px;
    margin: 0 0 6px 0;
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-left: 4px solid var(--sgd-accent);
    border-radius: 0 var(--sgd-radius) var(--sgd-radius) 0;
}

/* Version "banda" SOLO en formularios estilo piloto (.sgd-container/.recadm-container),
   cuyas secciones recortan con overflow:hidden y por tanto admiten 100% sin
   desborde. El <legend> normal resuelve width:100% contra el BORDE del
   fieldset (bloque de referencias especial), no contra su content box: por
   eso en fieldsets sin recorte desbordaba 2-4px. No usar parches (96%).
   La rayita de acento se conserva en ambos modos. */
.sgd-container .sgd-section > .sgd-legend,
.sgd-container .recadm-section > .recadm-legend,
.recadm-container .sgd-section > .sgd-legend,
.recadm-container .recadm-section > .recadm-legend {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 5px 12px 5px 8px;
    border-radius: 0;
}

.sgd-section-body,
.recadm-section-body {
    padding: 8px 10px;
}

/* Fieldsets que contienen dropdowns: no recortarlos */
.sgd-section-dropdown,
.recadm-section-dropdown,
.sgd-section-dropdown .sgd-section-body,
.sgd-section-dropdown .recadm-section-body,
.recadm-section-dropdown .sgd-section-body,
.recadm-section-dropdown .recadm-section-body {
    overflow: visible;
}

/* --------------------------------------------------------------------------
   4. LAYOUT: GRIDS
   -------------------------------------------------------------------------- */
.sgd-grid-2col,
.recadm-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sgd-gap);
}

.sgd-inline-row,
.recadm-inline-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sgd-gap);
    margin-bottom: var(--sgd-field-mb);
}

.sgd-inline-row:last-child,
.recadm-inline-row:last-child {
    margin-bottom: 0;
}

.sgd-inline-row .sgd-field,
.sgd-inline-row .recadm-field,
.recadm-inline-row .sgd-field,
.recadm-inline-row .recadm-field {
    margin-bottom: 0;
}

/* Spans de columna (grid de 4) */
.sgd-col-25, .recadm-col-25 { grid-column: span 1; }
.sgd-col-30, .recadm-col-30 { grid-column: span 1; }
.sgd-col-50, .recadm-col-50 { grid-column: span 2; }
.sgd-col-70, .recadm-col-70 { grid-column: span 3; }

/* --------------------------------------------------------------------------
   5. CAMPOS
   -------------------------------------------------------------------------- */
.sgd-field,
.recadm-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--sgd-field-mb);
}

.sgd-field:last-child,
.recadm-field:last-child {
    margin-bottom: 0;
}

.sgd-label,
.recadm-label {
    font-size: var(--sgd-fs-label);
    font-weight: 700;
    color: var(--sgd-label);
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* Valor de solo lectura en texto plano (span), mismo look que input readonly */
.sgd-value,
.recadm-value {
    font-size: var(--sgd-fs-base);
    color: var(--sgd-text);
    word-wrap: break-word;
    line-height: var(--sgd-lh);
    padding: 4px 8px;
    background: var(--sgd-readonly-bg);
    border: 1px dashed var(--sgd-readonly-border);
    border-radius: var(--sgd-radius);
    display: block;
    min-height: 22px;
}

/* --------------------------------------------------------------------------
   6. INPUTS (siempre siguen siendo inputs: solo cambia su look)
   -------------------------------------------------------------------------- */
.sgd-container input[type="text"],
.sgd-container input[type="input"],
.sgd-container textarea,
.sgd-container select,
.recadm-container input[type="text"],
.recadm-container input[type="input"],
.recadm-container textarea,
.recadm-container select {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--sgd-input-border);
    border-radius: var(--sgd-radius);
    font-size: var(--sgd-fs-base);
    color: var(--sgd-text);
    background: #fff;
}

.sgd-container input[readonly],
.sgd-container textarea[readonly],
.recadm-container input[readonly],
.recadm-container textarea[readonly] {
    background: var(--sgd-readonly-bg);
    color: var(--sgd-text);
    border: 1px dashed var(--sgd-readonly-border);
    cursor: default;
}

.sgd-container input[readonly]:focus,
.sgd-container textarea[readonly]:focus,
.recadm-container input[readonly]:focus,
.recadm-container textarea[readonly]:focus {
    outline: none;
    border-color: var(--sgd-readonly-border);
    box-shadow: none;
}

.sgd-container input:not([readonly]):focus,
.sgd-container textarea:not([readonly]):focus,
.recadm-container input:not([readonly]):focus,
.recadm-container textarea:not([readonly]):focus {
    outline: none;
    border-color: var(--sgd-focus);
    box-shadow: 0 0 0 2px var(--sgd-focus-ring);
    background: #fff;
}

.sgd-container textarea,
.recadm-container textarea {
    resize: vertical;
}

/* Fila de inputs alineados (label arriba, controles abajo) */
.sgd-input-row,
.recadm-input-row {
    display: flex;
    gap: var(--sgd-gap);
    margin-bottom: var(--sgd-field-mb);
    align-items: end;
}

.sgd-input-row .sgd-input-group,
.sgd-input-row .recadm-input-group,
.recadm-input-row .sgd-input-group,
.recadm-input-row .recadm-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sgd-input-row .sgd-input-group .sgd-label,
.sgd-input-row .sgd-input-group .recadm-label,
.sgd-input-row .recadm-input-group .sgd-label,
.sgd-input-row .recadm-input-group .recadm-label,
.recadm-input-row .sgd-input-group .sgd-label,
.recadm-input-row .sgd-input-group .recadm-label,
.recadm-input-row .recadm-input-group .sgd-label,
.recadm-input-row .recadm-input-group .recadm-label {
    min-height: 14px;
}

/* --------------------------------------------------------------------------
   7. ANEXOS, PROGRESO Y ERRORES
   -------------------------------------------------------------------------- */
.sgd-attachments,
.recadm-attachments {
    border: 1px solid #ddd;
    border-radius: var(--sgd-radius);
    padding: 6px;
    min-height: 30px;
    max-height: 120px;
    overflow-y: auto;
    background: #fff;
}

.sgd-attachments-empty,
.recadm-attachments-empty {
    color: #999;
    font-style: italic;
    font-size: var(--sgd-fs-base);
    padding: 6px;
}

/* Mantiene el markup bootstrap de progress-bar intacto; solo el contenedor */
.sgd-progress,
.recadm-progress {
    height: 18px;
    border-radius: var(--sgd-radius);
    overflow: hidden;
    background: #eee;
    margin-bottom: var(--sgd-field-mb);
}

.sgd-error-box,
.recadm-error-box {
    margin-top: var(--sgd-field-mb);
}

/* --------------------------------------------------------------------------
   8. ZONAS DE DROPDOWN
   -------------------------------------------------------------------------- */
.sgd-dropdown-zone,
.recadm-dropdown-zone {
    position: relative;
    z-index: var(--sgd-z-dropdown);
}

.sgd-dropdown-zone .dropdown-menu,
.recadm-dropdown-zone .dropdown-menu {
    z-index: var(--sgd-z-dropdown-menu);
}

/* Dropdown de archivador (vista Recepcion Documentos Administrativos) */
#selArchivadorRecep {
    position: relative;
    z-index: var(--sgd-z-dropdown);
}

#selArchivadorRecep .arch-dropdown-menu,
#selArchivadorRecep .dropdown-menu {
    z-index: var(--sgd-z-dropdown-menu);
}

/* --------------------------------------------------------------------------
   9. BADGES DE ESTADO Y PRIORIDAD
   (las clases recadm-estado-* son aplicadas en runtime por JS ya existente;
    se mantienen como alias para no tocar dicho JS)
   -------------------------------------------------------------------------- */
.sgd-estado-badge,
.recadm-estado-badge {
    display: inline-block;
    width: 100%;
    padding: 3px 10px;
    border-radius: var(--sgd-radius);
    border: 1px solid transparent;
    font-weight: 700;
    text-align: center;
    line-height: var(--sgd-lh);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    font-size: var(--sgd-fs-base);
}

.sgd-estado-emitido,          .recadm-estado-emitido          { background: #5f8fd1; border-color: #4f7fbd; color: #fff; }
.sgd-estado-no-leido,         .recadm-estado-no-leido         { background: #e0b86a; border-color: #cfa556; color: #2f2a20; }
.sgd-estado-recibido,         .recadm-estado-recibido         { background: #6cb7cf; border-color: #5aa5bd; color: #fff; }
.sgd-estado-recibido-parcial, .recadm-estado-recibido-parcial { background: #67b7ad; border-color: #549f95; color: #fff; }
.sgd-estado-en-proyecto,      .recadm-estado-en-proyecto      { background: #8f7ec8; border-color: #7b6ab2; color: #fff; }
.sgd-estado-para-despacho,    .recadm-estado-para-despacho    { background: #7e89c8; border-color: #6a74b2; color: #fff; }
.sgd-estado-atendido,         .recadm-estado-atendido         { background: #69a978; border-color: #579665; color: #fff; }
.sgd-estado-archivado,        .recadm-estado-archivado        { background: #77808d; border-color: #65707f; color: #fff; }
.sgd-estado-anulado,          .recadm-estado-anulado          { background: #c97a7a; border-color: #b66666; color: #fff; }
.sgd-estado-default,          .recadm-estado-default          { background: #6cb7cf; border-color: #5aa5bd; color: #fff; }

.sgd-pri-normal,      .recadm-pri-normal      { color: var(--sgd-pri-normal); }
.sgd-pri-urgente,     .recadm-pri-urgente     { color: var(--sgd-pri-urgente); font-weight: bold; }
.sgd-pri-muy-urgente, .recadm-pri-muy-urgente { color: var(--sgd-pri-muy-urgente); font-weight: bolder; }

/* --------------------------------------------------------------------------
   9B. BADGES DE ESTADO EN TABLAS
    Clases aplicadas en runtime por default.js (fn_sgdPintarBadgesEstado).
    Solo celdas de tablas y campos de valor: los selectores (selects,
    botones, dropdowns) conservan su look y comportamiento originales.
   -------------------------------------------------------------------------- */

/* Badge compacto a sangre en celdas de tabla: las vistas marcan su columna
   con td.colEstado y el patron generico solo pinta textos exactos */
td .estado-badge,
td .sgd-estado-badge,
td .recadm-estado-badge {
    /* display: block; */
    min-width: 0;
    /* width: 100%; */
    box-sizing: border-box;
    padding: 2px 16px;
    margin: 2px 6px;
    font-size: var(--sgd-fs-label);
}

/* Inputs de solo lectura cuyo valor es un estado */
input.sgd-input-estado {
    font-weight: 700;
    text-transform: uppercase;
}

/* Spans de valor (.sgd-value/.recadm-value) con estado: la caja punteada
    desaparece y el badge toma el control */
.sgd-value.sgd-valor-estado,
.recadm-value.sgd-valor-estado {
    background: transparent;
    border: none;
    padding: 0;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   10. CONTENEDOR DE TABLA DE REFERENCIA (ui-datatable legado dentro de formulario)
   -------------------------------------------------------------------------- */
.sgd-ref-container,
.recadm-ref-container {
    width: 100%;
    margin-top: 4px;
}

.sgd-ref-container .ui-datatable,
.sgd-ref-container .ui-datatable-scrollable,
.sgd-ref-container .ui-datatable-scrollable-header,
.sgd-ref-container .ui-datatable-scrollable-body,
.recadm-ref-container .ui-datatable,
.recadm-ref-container .ui-datatable-scrollable,
.recadm-ref-container .ui-datatable-scrollable-header,
.recadm-ref-container .ui-datatable-scrollable-body {
    border: none;
    background: transparent;
    box-shadow: none;
}

.sgd-ref-container .ui-datatable-scrollable-header,
.recadm-ref-container .ui-datatable-scrollable-header {
    display: none;
}

.sgd-ref-container .ui-datatable-scrollable-body,
.recadm-ref-container .ui-datatable-scrollable-body {
    max-height: none;
    overflow: visible;
    height: auto !important;
}

.sgd-ref-container .ui-datatable-data,
.recadm-ref-container .ui-datatable-data {
    width: 100%;
    border-collapse: collapse;
}

.sgd-ref-container .ui-datatable-data td,
.recadm-ref-container .ui-datatable-data td {
    padding: 5px 8px;
    font-size: var(--sgd-fs-base);
    border: 1px solid var(--sgd-section-border);
    background: #fff;
}

.sgd-ref-container .ui-datatable-even td,
.recadm-ref-container .ui-datatable-even td {
    background: var(--sgd-row-alt-bg);
}

.sgd-ref-container .ui-datatable-odd td,
.recadm-ref-container .ui-datatable-odd td {
    background: #fff;
}

/* --------------------------------------------------------------------------
   11. BOTONES DEL SISTEMA DE DISENO (nuevo; no reemplaza bootstrap .btn)
   -------------------------------------------------------------------------- */
.sgd-btn {
    display: inline-block;
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
    font-weight: 700;
    line-height: var(--sgd-lh);
    padding: 4px 12px;
    border: 1px solid var(--sgd-input-border);
    border-radius: var(--sgd-radius);
    background: #fff;
    color: var(--sgd-text);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.sgd-btn:hover { background: var(--sgd-readonly-bg); }

.sgd-btn:focus {
    outline: none;
    border-color: var(--sgd-focus);
    box-shadow: 0 0 0 2px var(--sgd-focus-ring);
}

.sgd-btn-primary {
    background: var(--sgd-btn-primary);
    border-color: var(--sgd-btn-primary-border);
    color: #fff;
}

.sgd-btn-primary:hover { background: var(--sgd-btn-primary-hover); }

.sgd-btn-danger {
    background: var(--sgd-pri-muy-urgente);
    border-color: var(--sgd-pri-muy-urgente);
    color: #fff;
}

.sgd-btn-danger:hover { background: #a30000; }

.sgd-btn[disabled],
.sgd-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Barra de acciones de una seccion/pagina */
.sgd-actions-bar {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 10px;
}

/* --------------------------------------------------------------------------
   12. TABLA DE RESULTADOS / LISTADO (nuevo patron para vistas de busqueda;
   no altera .dataTable existente hasta que la vista adopte la clase)
   -------------------------------------------------------------------------- */
.sgd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sgd-fs-base);
    background: #fff;
}

.sgd-table thead th {
    background: var(--sgd-table-head-bg);
    color: var(--sgd-label);
    font-size: var(--sgd-fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 6px 8px;
    border: 1px solid var(--sgd-section-border);
    text-align: left;
}

.sgd-table tbody td {
    padding: 5px 8px;
    border: 1px solid var(--sgd-section-border);
    color: var(--sgd-text);
    vertical-align: middle;
}

.sgd-table tbody tr:nth-child(even) td { background: var(--sgd-row-alt-bg); }
.sgd-table tbody tr:nth-child(odd) td  { background: #fff; }
/* Hover dorado historico (default.css): se repiten las variantes par/impar
   para que la especificidad le gane a las rayas alternadas */
.sgd-table tbody tr:hover td,
.sgd-table tbody tr:hover th,
.sgd-table tbody tr:nth-child(even):hover td,
.sgd-table tbody tr:nth-child(odd):hover td {
    background: #fdf5ce;
    color: #c77405;
    border-color: #fbcb09;
}

/* Contenedor de listado con scroll horizontal en pantallas pequenas */
.sgd-table-wrap {
    width: 100%;
    overflow-x: auto;
}

/* --------------------------------------------------------------------------
   12B. ARMONIA DE TABLAS EXISTENTES DEL SISTEMA
   Las tablas reales de la app son DataTables (Pcm Grid) y las familias
   legacy .ui-datatable / .tablita / .table de bootstrap. Se armonizan sus
   cabeceras con el lenguaje del sistema SIN romper iconos de ordenamiento
   (solo se pinta background-color; la imagen del icono sigue viva).
   -------------------------------------------------------------------------- */

/* --- DataTables / Pcm Grid --- */
.dataTables_wrapper {
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
    color: var(--sgd-text);
}

table.dataTable {
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
}

/* Fila de cabecera legacy (las vistas marcan <tr class="ui-state-default">
   con el azul con gradiente png del tema jQuery UI): se aplana al color
   solido del sistema. !important quirurgico: garantiza uniformidad sobre
   cualquier regla residual (jquery-ui skin etc.) sin tocar los JS. */
table.dataTable thead tr.ui-state-default,
table thead tr.ui-state-default,
.ui-widget-content table thead tr.ui-state-default,
.ui-widget-header table thead tr.ui-state-default {
    background-color: var(--sgd-table-head-bg) !important;
    background-image: none !important;
    border-color: var(--sgd-table-head-border);
    color: var(--sgd-label) !important;
}

table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--sgd-table-head-bg) !important;
    color: var(--sgd-label);
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--sgd-accent);
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-color: #c9dbef !important;
}

table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background-color: var(--sgd-table-head-bg) !important;
}

/* Hover dorado historico de los grids (mismo lenguaje que default.css:
   #fdf5ce/#c77405/#fbcb09). Abarca dataTables (odd/even pintan el td) y
   familias legacy para que la fila completa responda igual */
table.dataTable tbody tr:hover > td,
table.dataTable tbody tr.odd:hover > td,
table.dataTable tbody tr.even:hover > td,
.ui-datatable-data tr:hover > td,
.ui-datatable-fixed tbody tr:hover td,
.tablita tbody tr:hover td,
.tlbautoc tbody tr:hover td,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: #fdf5ce;
    color: #c77405;
    border-color: #fbcb09;
}

.ui-datatable-data tr:hover,
.ui-datatable-fixed tbody tr:hover,
.tablita tbody tr:hover,
.tlbautoc tbody tr:hover,
.table-hover > tbody > tr:hover {
    color: #c77405;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--sgd-btn-primary);
    border: 1px solid var(--sgd-btn-primary-border);
    color: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--sgd-legend-bg);
    border: 1px solid var(--sgd-accent);
    color: var(--sgd-label);
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--sgd-input-border);
    border-radius: var(--sgd-radius);
    padding: 3px 8px;
    font-size: var(--sgd-fs-base);
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--sgd-focus);
    box-shadow: 0 0 0 2px var(--sgd-focus-ring);
}

.dataTables_wrapper .dataTables_length select {
    border-radius: var(--sgd-radius);
    padding: 2px 6px;
}

.dataTables_wrapper .dataTables_info {
    color: var(--sgd-text-muted);
    padding-top: 6px;
}

/* --- Familia ui-datatable (grids legacy) --- */
.ui-datatable thead th,
.ui-datatable-data th {
    background-color: var(--sgd-table-head-bg) !important;
    color: var(--sgd-label) !important;
    font-size: var(--sgd-fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid #dbe4ef;
    padding: 5px 8px;
}

.ui-datatable-data td {
    border: 1px solid #e3e8ee;
    padding: 4px 8px;
    font-size: var(--sgd-fs-base);
}

/* --- .tablita / .tlbautoc (tablas de referencia y CRUD legacy) --- */
.tablita,
.tlbautoc {
    background-color: #fff;
    border: 1px solid var(--sgd-section-border);
    color: var(--sgd-text);
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
    margin-bottom: 8px;
}

.tablita th,
.tlbautoc th {
    background-color: var(--sgd-table-head-bg) !important;
    color: var(--sgd-label) !important;
    text-transform: uppercase;
    font-size: var(--sgd-fs-label);
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px solid #dbe4ef;
    padding: 5px 8px;
}

.tablita td,
.tlbautoc td {
    border: 1px solid #e3e8ee;
    padding: 4px 8px;
}

/* --- .table de bootstrap (incluye Pcm Grid y archivadores: table-condensed) --- */
.table > thead > tr > th,
.table > thead > tr > td {
    background-color: var(--sgd-table-head-bg) !important;
    color: var(--sgd-label) !important;
    font-size: var(--sgd-fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 6px 8px;
    border-bottom: 2px solid var(--sgd-accent);
}

.table > thead > tr > th.ui-state-default,
.table > thead > tr > td.ui-state-default {
    background-image: none !important;
    border-color: var(--sgd-table-head-border);
}

.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
    border-top: 1px solid #e3e8ee;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td {
    border-color: #e3e8ee;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f5f8fc;
}

/* Fila seleccionada en grids (Grid.js marca tr.selected; el #08C
   de DataTables queda anticuado) */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected > td,
table.dataTable tbody tr.selected > th {
    background-color: #dfeaf7;
}

.table td.selected,
.table tr.selected > td,
.table tr.selected > th {
    background-color: #dfeaf7;
}

/* --------------------------------------------------------------------------
   13. ZONA DE BUSQUEDA (nuevo patron para filtros de listados)
   -------------------------------------------------------------------------- */
.sgd-search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sgd-gap);
    align-items: end;
}

.sgd-search .sgd-search-field {
    flex: 1 1 180px;
    min-width: 150px;
}

.sgd-search .sgd-search-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    align-items: end;
}

/* --------------------------------------------------------------------------
   14. MODALES (clases para contenido dentro de windowmodal/wmodaldefault;
   los templates Tiles no se renombran para no tocar su JS)
   -------------------------------------------------------------------------- */
.sgd-modal-body {
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
    color: var(--sgd-text);
    padding: 8px 10px;
}

.sgd-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 8px 10px;
}

.sgd-modal-section {
    margin-bottom: var(--sgd-gap);
}

/* --------------------------------------------------------------------------
   14B. PATRON MODAL DE DETALLE (promovido desde consultaSeguimientoDetalle /
   consultaCargarAnexosDetalle; los valores son identicos a los originales)
   -------------------------------------------------------------------------- */
.estado-badge {
    display: inline-block;
    min-width: 120px;
    padding: 3px 0px;
    border-radius: 3px;
    border: 1px solid transparent;
    background: #6cb7cf;
    border-color: #5aa5bd;
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    text-transform: uppercase;
}

.estado-emitido          { background: #5f8fd1; border-color: #4f7fbd; color: #fff; }
.estado-no-leido         { background: #e0b86a; border-color: #cfa556; color: #2f2a20; }
.estado-recibido         { background: #6cb7cf; border-color: #5aa5bd; color: #fff; }
.estado-recibido-parcial { background: #67b7ad; border-color: #549f95; color: #fff; }
.estado-en-proyecto      { background: #8f7ec8; border-color: #7b6ab2; color: #fff; }
.estado-para-despacho    { background: #7e89c8; border-color: #6a74b2; color: #fff; }
.estado-atendido         { background: #69a978; border-color: #579665; color: #fff; }
.estado-archivado        { background: #77808d; border-color: #65707f; color: #fff; }
.estado-anulado          { background: #c97a7a; border-color: #b66666; color: #fff; }
.estado-default          { background: #6cb7cf; border-color: #5aa5bd; color: #fff; }
/* Destinatario de documento aun no emitido (EN PROYECTO / PARA DESPACHO):
   doble clase para ganar especificidad sobre estado-default que pinta el JS.
   Mismo color que estado-para-despacho */
.estado-badge.estado-no-llego { background: #7e89c8; border-color: #6a74b2; color: #fff; }

.pri-normal      { color: #000; }
.pri-urgente     { color: #b78a00 !important; font-weight: bold; }
.pri-muy-urgente { color: #d00000 !important; font-weight: bolder; }

.seg-det-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 11px;
    color: #333;
}

.seg-det-cols {
    display: flex;
    gap: 10px;
    width: 100%;
}

.seg-det-fieldset {
    min-width: 0;
    border: 1px solid #ddd;
    background: #fff;
    padding: 10px 10px 0 10px;
    border-radius: 4px;
    position: relative;
    margin: 0;
}

.seg-det-legend {
    font-size: 11px;
    font-weight: 800;
    color: #1e4f90;
    padding: 0 5px;
    width: auto;
    border: none;
    margin-bottom: 5px;
}

.seg-det-field {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
}

.seg-det-label {
    font-size: 10px;
    font-weight: 700;
    color: #1e4f90;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.seg-det-value {
    font-size: 11px;
    color: #000;
    word-wrap: break-word;
}

.expediente-highlight {
    font-size: 12px;
    font-weight: 800;
    color: #12325d;
    background: #f3fdff;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid #dcf5fa;
    display: inline-block;
}

.indica-box {
    background: #fdfae6;
    border: 1px solid #f2e7b8;
    padding: 8px;
    border-radius: 4px;
    font-size: 11px;
    color: #444;
}

/* --------------------------------------------------------------------------
   15. TITULO DE PAGINA
   -------------------------------------------------------------------------- */
.sgd-page-title {
    font-size: var(--sgd-fs-title);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sgd-header-bg);
    padding-bottom: 4px;
    border-bottom: 2px solid var(--sgd-accent);
    margin: 4px 0 8px 0;
}

/* --------------------------------------------------------------------------
   15B. APP SHELL: headPanel, menu principal, bottomPanel, bandeja de
   entrada y lienzo general. Solo capa visual: no se toca geometria del
   menu (depende de menu.css/menu.js) ni el banner institucional (imagen
   inline desde BD). Distribucion v4: header blanco -> barra de menu Clara
   continua -> lienzo azulado -> footer claro (los logos no se opacan).
   -------------------------------------------------------------------------- */

/* Lienzo de la app (fuera del area de contenido): gris -> azul muy claro
   del sistema. Se ve intentional en pantallas grandes */
html,
body {
    background-color: #eef2f7;
}

/* --- Cabecera: texto al lenguaje del sistema, banner intacto --- */
#headPanel {
    border-bottom: 1px solid #e3e8ee;
}

#titulo_interno {
    font-family: var(--sgd-font);
    color: var(--sgd-header-bg);
}

#txt_nav {
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
    color: #55708c;
}

.txt_nav2 {
    font-family: var(--sgd-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--sgd-label);
}

.txt_nav2 > a,
.txt_nav2 > a:link {
    color: var(--sgd-label);
}

.txt_nav2 > a:hover,
.txt_nav2 > a:focus {
    color: var(--sgd-btn-primary);
}

#main_links {
    font-family: var(--sgd-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--sgd-label);
}

#main_links:hover {
    color: var(--sgd-btn-primary);
}

/* --- Menu principal: barra CLARA continua con el header (fuera banda
   navy suelta y pngs 2009). Texto navy uppercase + chevron propio --- */
div#menu {
    background-color: #f4f7fb;
    background-image: none;
    border-bottom: 1px solid #dbe4ef;
}

div#menu li {
    background-image: none;
}

div#menu ul.menu > li + li {
    border-left: 1px solid #e3eaf3;
}

div#menu li.last span {
    background: none;
}

div#menu span {
    font-family: var(--sgd-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--sgd-label);
}

/* chevron de nivel 1 (rota al abrir) */
div#menu a.parent > span::after {
    content: "\25BE";
    display: inline-block;
    font-size: 9px;
    margin-left: 6px;
    color: #7ba3cd;
    transition: transform 0.15s ease;
}

div#menu li:hover > a.parent > span::after {
    transform: rotate(180deg);
    color: var(--sgd-label);
}

div#menu li:hover > a {
    background: rgba(30, 79, 144, 0.07);
}

div#menu ul a:hover span {
    color: var(--sgd-label);
}

/* Submenus: tarjeta blanca con sombra suave del sistema */
div#menu li div {
    background: none;
}

div#menu ul ul {
    background: #ffffff;
    border: 1px solid #cfe0f2;
    border-radius: 0 0 var(--sgd-radius-section) var(--sgd-radius-section);
    box-shadow: 0 8px 20px rgba(23, 55, 94, 0.16);
}

div#menu ul ul li {
    background: none;
    border-bottom: 1px solid #eef1f5;
}

div#menu ul ul a span {
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
    color: #33465c;
}

div#menu ul ul a:hover {
    background: var(--sgd-legend-bg);
}

div#menu ul ul a:hover span {
    background: none;
    color: var(--sgd-label);
}

/* --- Pie de pagina: CLARO (los logos base64 ya no se opacan) --- */
#bottomPanel {
    background-color: #f8fafc;
    background-image: none;
    border-top: 1px solid #e3e8ee;
}

.txt_footer {
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
    color: #55708c;
}

.txt_footer a {
    color: var(--sgd-label);
}

.txt_footer a:hover {
    color: var(--sgd-btn-primary);
}

/* --- Bandeja de entrada (divTablaBandejaEntrada): tarjetas + orden --- */
.bandeja {
    font-family: var(--sgd-font);
    font-size: var(--sgd-fs-base);
    margin-top: 14px;
    max-width: 420px;
}

.bandeja .list-group-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title count"
        "text  text";
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
    border: 1px solid #e3e8ee;
    border-radius: var(--sgd-radius-section);
    margin-bottom: 6px;
    padding: 8px 12px;
    color: #33465c;
    box-shadow: 0 1px 2px rgba(16, 42, 67, 0.05);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.bandeja a.list-group-item:hover {
    background-color: #ffffff;
    border-color: #c3d4e8;
    box-shadow: 0 3px 10px rgba(30, 79, 144, 0.10);
    transform: translateY(-1px);
}

/* Cabecera de la bandeja = nivel header */
#titleBandejaEntrada,
.bandeja .list-group-item.active,
.bandeja .list-group-item.active:hover {
    background-color: var(--sgd-header-bg);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.06));
    border-color: #173d70;
    color: #ffffff;
    border-radius: var(--sgd-radius-section);
    box-shadow: 0 2px 6px rgba(23, 55, 94, 0.28);
}

.bandeja h4,
.bandeja .list-group-item-heading {
    grid-area: title;
    font-family: var(--sgd-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--sgd-label);
    line-height: 1.35;
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#titleBandejaEntrada h4,
.bandeja .list-group-item.active h4 {
    color: #ffffff;
    font-size: 13px;
    text-transform: none;
    margin-right: 0;
    letter-spacing: 0.2px;
}

/* Fila de detalle en flex: texto a la izquierda, badges de prioridad a la
   derecha (float:right inline del JS queda anulado por flexbox sin tocar JS) */
.bandeja .list-group-item-text,
.bandeja div.list-group-item-text {
    grid-area: text;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--sgd-fs-base);
    color: #55708c;
}

.bandeja .list-group-item-text > div {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bandeja .list-group-item-text a,
.bandeja a .list-group-item-text a {
    font-size: var(--sgd-fs-base);
    color: #55708c;
}

.bandeja .list-group-item-text a:hover {
    color: var(--sgd-btn-primary);
}

/* Contador principal: celda derecha arriba, los de prioridad quedan debajo */
.bandeja .list-group-item > .badge {
    grid-area: count;
    justify-self: end;
    float: none;
    margin-top: 1px;
    border-radius: var(--sgd-radius);
    font-size: 13px;
    line-height: 1.35;
}

.bandeja .badge {
    font-family: var(--sgd-font);
    font-weight: 700;
    border-radius: var(--sgd-radius);
}

/* Sub-bandeja delegados: indentacion con acento */
#div_BANDEJADELEGADOS {
    border-left: 3px solid var(--sgd-accent);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* --- Carrusel institucional: tarjeta flotante --- */
#carousel-example-generic {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(23, 55, 94, 0.12);
    margin-top: 14px;
}


/* --------------------------------------------------------------------------
   15C. LOGIN v7 (login.jspx): lienzo teal profundo con acentos azul
   institucional (armonizados con la paleta global tras la gira de vuelta).
   Panel de marca con logo MDI arriba a la izquierda (reemplaza al escudo)
   y la imagen institucional apoyada al pie del panel, sin marcos (sera
   sustituida por arte abstracto con fondo transparente, mismo nombre).
   Cero cambios de JS/ids/names; markup agregado = decorativo.
   -------------------------------------------------------------------------- */

/* --- Lienzo: degradado teal profundo con halos azul institucional --- */
#login_background {
    background:
        radial-gradient(1050px 520px at 8% -12%, rgba(74, 144, 194, 0.24), transparent 60%),
        radial-gradient(800px 600px at 30% 114%, rgba(51, 122, 183, 0.22), transparent 55%),
        linear-gradient(150deg, #0a4257 0%, #062e40 55%, #0b4f68 100%);
}

/* --- Panel de marca (izquierda) --- */
#lgd-brand {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 44%;
    min-width: 430px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 40px 56px 24px;
    color: #ffffff;
    font-family: var(--sgd-font);
    z-index: 1;
}

.lgd-brand-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Logo oficial MDI arriba a la izquierda (dentro de la marca) */
.lgd-logo-entidad {
    height: 58px;
    width: auto;
    max-width: 170px;
    flex: 0 0 auto;
}

.lgd-entidad {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.lgd-entidad-k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #6ca0e5;
}

.lgd-entidad-n {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 2px;
}

.lgd-entidad-c {
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #819fc5;
    margin-top: 3px;
}

.lgd-brand-copy {
    margin-top: 56px;
}

.lgd-brand-copy h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.2px;
    margin: 0;
    color: #ffffff;
}

.lgd-brand-copy h1 em {
    font-style: normal;
    color: #5092e2;
}

.lgd-brand-copy p {
    margin: 16px 0 0;
    max-width: 400px;
    font-size: 13px;
    line-height: 1.7;
    color: #aabeda;
}

.lgd-features {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    max-width: 430px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    font-size: 13px;
    color: #d5e4f6;
}

.lgd-features li {
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
}

.lgd-features li strong {
    color: #ffffff;
    font-weight: 700;
}

.lgd-features .glyphicon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(74, 144, 194, 0.12);
    border: 1px solid rgba(74, 144, 194, 0.32);
    color: #5690d7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 12px;
    margin-top: 2px;
    flex: 0 0 auto;
}

/* Imagen institucional: overlay del panel de marca anclado a la esquina
   INFERIOR DERECHA, escalada al alto total del panel (contain + right
   bottom). Se reemplazara el archivo manteniendo el nombre
   login_background.png (arte abstracto con fondo transparente). */
.lgd-foto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('../images/login_background.png') right bottom / auto 45% no-repeat;
    pointer-events: none;
    animation-delay: 0.38s;
}

.lgd-brand-foot {
    margin-top: auto;
    padding-top: 18px;
    font-size: 11px;
    color: #6d90ba;
}

/* --- Panel de acceso (derecha): hielo claro --- */
#dlglogin_principal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 44%;
    right: 0;
    width: auto;
    height: auto;
    padding: 0;
    box-sizing: border-box;
    background-color: #f5f8fc;
    box-shadow: -24px 0 60px rgba(9, 20, 38, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

#loginMaster {
    width: 100%;
    max-width: 440px;
    min-height: 0;
    display: block;
    padding: 46px 36px;
    box-sizing: border-box;
    font-family: var(--sgd-font);
}

/* Pastilla "acceso al sistema" */
#titulo_servicios {
    display: inline-block;
    margin: 0 0 16px;
    padding: 5px 13px;
    text-align: left;
    background-color: #dbe9f7;
    border: 1px solid #c9dbef;
    border-bottom: 1px solid #c9dbef;
    border-radius: 999px;
}

#titulo_servicios .titulo_texto {
    display: inline;
    font-family: var(--sgd-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    line-height: 1.5;
    color: #1e4f90;
}

#titulo_servicios .titulo_texto + .titulo_texto::before {
    content: " \00B7 ";
}

/* Encabezado del acceso */
.lgd-welcome {
    margin: 0 0 26px;
}

.lgd-welcome h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: 600;
    color: #1e4f90;
    margin: 0;
    letter-spacing: -0.2px;
}

.lgd-welcome p {
    margin: 7px 0 0;
    font-size: 13px;
    color: #55708c;
}

/* Campos */
.login-field {
    margin-bottom: 18px;
}

.login-label {
    font-family: var(--sgd-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #33465c;
    margin-bottom: 7px;
}

.login-input {
    font-family: var(--sgd-font);
    font-size: 14px;
    color: #1f2d3d;
    background-color: #ffffff;
    border: 1px solid #dbe4ef;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(22, 49, 93, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-input:focus {
    outline: none;
    border-color: #337ab7;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.18);
}

.login-input::placeholder {
    color: #94a7bc;
}

.dependencia-container {
    border-radius: 6px;
}

.dependencia-input {
    border-radius: 6px 0 0 6px !important;
}

.btn-dependencia-refresh,
.btn-captcha-refresh {
    font-family: var(--sgd-font);
    background-color: #eef2f7;
    border: 1px solid #dbe4ef;
    border-left: none;
    color: #55708c;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-dependencia-refresh:hover,
.btn-captcha-refresh:hover {
    background-color: #dbe9f7;
    color: #1e4f90;
}

.captcha-container {
    border-radius: 6px;
}

.captcha-img {
    border: 1px solid #dbe4ef;
    border-radius: 6px 0 0 6px;
}

/* Accion principal */
.btn-login {
    font-family: var(--sgd-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #337ab7;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.10));
    border: 1px solid #2e6da4;
    border-radius: 6px;
    box-shadow: 0 10px 22px rgba(23, 55, 94, 0.30);
    transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

/* .btn-login::after {
    content: "\2192";
    display: inline-block;
    margin-left: 10px;
    font-weight: 400;
    transition: transform 0.18s ease;
} */

.btn-login:hover,
.btn-login:focus {
    background-color: #286090;
    outline: none;
    box-shadow: 0 14px 28px rgba(23, 55, 94, 0.38);
}

/* .btn-login:hover::after {
    transform: translateX(5px);
} */

.btn-login:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(23, 55, 94, 0.32);
}

.login-submit {
    margin-top: 24px;
}

/* Opciones: dos columnas, icono azul institucional */
.navbar-login {
    font-family: var(--sgd-font);
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #e3e8ee;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: 12px;
}

.navbar-login > li {
    flex: 0 1 calc(50% - 9px);
    margin-bottom: 0;
}

.navbar-login > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 2px;
    font-size: 12px;
    color: #455e7d;
    background-color: transparent;
    border: none;
    border-radius: 0;
    transition: color 0.15s ease;
}

.navbar-login > li > a .glyphicon {
    color: #337ab7;
    font-size: 13px;
}

.navbar-login > li > a:hover,
.navbar-login > li > a:focus {
    background-color: transparent;
    color: #1e4f90;
    text-decoration: none;
    transform: none;
}

.navbar-login > li > a:hover .glyphicon {
    color: #1e4f90;
}

/* --- Animaciones de entrada (escalonadas) --- */
@keyframes lgdRise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lgdPanelIn {
    from {
        opacity: 0;
        transform: translateX(34px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#dlglogin_principal {
    animation: lgdPanelIn 0.7s cubic-bezier(0.22, 0.75, 0.35, 1) both;
}

#lgd-brand > * {
    animation: lgdRise 0.7s cubic-bezier(0.22, 0.75, 0.35, 1) both;
}

.lgd-brand-copy {
    animation-delay: 0.12s;
}

.lgd-features {
    animation-delay: 0.24s;
}

.lgd-brand-foot {
    animation-delay: 0.5s;
}

#loginMaster > * {
    animation: lgdRise 0.6s ease both;
}

#loginMaster form {
    animation-delay: 0.18s;
}

#loginMaster > ul.navbar-login {
    animation-delay: 0.34s;
}

/* --- Tablet / movil: una sola columna, sin marca ni imagen --- */
@media (max-width: 920px) {
    #lgd-brand {
        display: none;
    }

    #dlglogin_principal {
        left: 0;
        box-shadow: none;
    }
}

@media (max-width: 520px) {
    #loginMaster {
        padding: 30px 20px;
    }

    .navbar-login > li {
        flex: 1 1 100%;
    }
}

/* Accesibilidad: sin animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    #dlglogin_principal,
    #lgd-brand,
    #lgd-brand > *,
    #loginMaster > *,
    .lgd-foto,
    .btn-login,
    .btn-login::after,
    .login-input {
        animation: none !important;
        transition: none !important;
    }
}


/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .sgd-grid-2col,
    .recadm-grid-2col {
        grid-template-columns: 1fr;
    }

    .sgd-inline-row,
    .recadm-inline-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .sgd-input-row,
    .recadm-input-row {
        flex-direction: row;
    }

    .ui-panel > .ui-panel-titlebar {
        font-size: 12px;
        padding: 7px 12px;
    }
}

@media (max-width: 600px) {
    .sgd-grid-2col,
    .recadm-grid-2col {
        grid-template-columns: 1fr;
    }

    .sgd-inline-row,
    .recadm-inline-row {
        grid-template-columns: 1fr;
    }

    .sgd-input-row,
    .recadm-input-row {
        flex-direction: column;
        gap: 0;
    }

    .sgd-input-row .sgd-input-group,
    .sgd-input-row .recadm-input-group,
    .recadm-input-row .sgd-input-group,
    .recadm-input-row .recadm-input-group {
        margin-bottom: var(--sgd-field-mb);
    }

    .sgd-col-25, .sgd-col-30, .sgd-col-50, .sgd-col-70,
    .recadm-col-25, .recadm-col-30, .recadm-col-50, .recadm-col-70 {
        grid-column: span 4;
    }

    /* Toolbars de botones grandes: compactos y con envoltura natural */
    .btn-group-lg > .btn,
    .btn-lg {
        font-size: 12px;
        padding: 5px 10px;
    }

    .ui-panel > .ui-panel-titlebar {
        font-size: 11px;
        padding: 6px 10px;
        letter-spacing: 0.3px;
    }
}