/* ===================================================================
   SISTEMA DE IDENTIDAD VISUAL INSTITUCIONAL
   Normativa gráfica oficial para aplicaciones web (Compras, Sorteos, etc.)
   Basado en docs/reglas_identidad_visual.md
   =================================================================== */

:root {
    /* 1. COLORES INSTITUCIONALES PRIMARIOS */
    --inter-blue-primary:          #2D5593; /* Azul institucional primario */
    --inter-blue-primary-hover:    #436498; /* Hover de botón y enlaces */
    --inter-blue-primary-dark:     #24457A; /* Estado activo / pulsado */
    --inter-blue-dark:             #1F3668; /* Azul corporativo intermedio */
    --inter-blue-darker:           #0D1A33; /* Azul profundo / overlays */

    /* 2. COLOR DE ACCIÓN Y SELECCIÓN (NARANJA) */
    --inter-orange:                #FF7A00; /* Naranja institucional brillante */
    --inter-orange-hover:          #E8753A; /* Hover naranja */
    --inter-orange-dark:           #C9571C; /* Naranja oscuro / click */

    /* 3. NAVEGACIÓN LATERAL (SIDEBAR) */
    --sidebar-bg:                  #071A36; /* Azul petróleo oscuro */
    --sidebar-header-bg:           #05132A; /* Cabecera del sidebar (logo) */
    --sidebar-width:               250px;
    --sidebar-collapsed-width:     72px;
    --sidebar-active-color:        #FF7A00; /* Acento activo en menú */
    --sidebar-text:                #8A9AB5; /* Texto normal inactivo */
    --sidebar-text-hover:          #FFFFFF; /* Texto en hover */
    --sidebar-section-color:       #4A5A7A; /* Títulos de sección */
    --sidebar-flyout-bg:           #0A1E3D; /* Submenús flotantes */

    /* 4. SUPERFICIES, CONTENEDORES Y BORDES */
    --inter-navbar-bg:             #FFFFFF; /* Barra superior */
    --inter-bg-content:            #F8FAFC; /* Fondo general de la app */
    --inter-card-bg:               #FFFFFF; /* Fondo de tarjetas/paneles */
    --inter-border-color:          #E2E8F0; /* Bordes suaves */
    --border-radius-base:          8px;     /* Inputs y botones */
    --card-radius:                 10px;    /* Tarjetas y contenedores */
    --badge-radius:                6px;     /* Badges y chips */

    /* 5. TEXTO Y TIPOGRAFÍA */
    --text-body:                   #0F172A; /* Texto principal (alto contraste) */
    --text-muted:                  #64748B; /* Textos secundarios y leyendas */
    --text-table:                  #334155; /* Texto dentro de celdas */

    /* 6. TABLAS Y DATAGRIDS */
    --table-header-bg:             #F8FAFC; /* Fondo cabecera de tabla */
    --table-header-color:          #64748B; /* Color cabecera (mayúsculas) */
    --table-row-hover:             #F1F5F9; /* Hover en fila */
    --table-border:                #E2E8F0; /* Líneas separadoras */

    /* 7. COLORES SEMÁNTICOS (FEEDBACK / ESTADOS) */
    --color-success-bg:            #DCFCE7;
    --color-success-text:          #15803D;
    --color-warning-bg:            #FEF3C7;
    --color-warning-text:          #B45309;
    --color-danger-bg:             #FEE2E2;
    --color-danger-text:           #B91C1C;
    --color-info-bg:               #E0F2FE;
    --color-info-text:             #0369A1;

    /* 8. SOMBRAS Y ELEVACIÓN */
    --shadow-sm:                   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-card:                 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    --shadow-md:                   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:                   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);

    /* 9. LOGIN GLASSMORPHISM */
    --login-bg-overlay:            rgba(7, 26, 54, 0.88);
    --glass-bg:                    rgba(255, 255, 255, 0.08);
    --glass-border:                rgba(255, 255, 255, 0.16);
    --glass-blur:                  blur(16px);
}

/* ===================================================================
   RESET Y ESTILOS BASE
   =================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background-color: var(--inter-bg-content);
    color: var(--text-body);
    font-size: 14.5px;
    line-height: 1.6;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--inter-blue-primary);
    text-decoration: none;
    transition: color 150ms ease;
}

a:hover {
    color: var(--inter-blue-primary-hover);
}

/* ===================================================================
   LAYOUT / APP SHELL (ARQUITECTURA DE 3 CAPAS)
   =================================================================== */
#app-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* --- SIDEBAR IZQUIERDO --- */
.app-sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.12);
}

.sidebar-header {
    background-color: var(--sidebar-header-bg);
    padding: 1.25rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--inter-blue-primary) 0%, var(--inter-orange) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sidebar-brand-title {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.sidebar-brand-subtitle {
    color: var(--sidebar-text);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-menu {
    padding: 1rem 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sidebar-section-title {
    color: var(--sidebar-section-color);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1rem 1.25rem 0.4rem 1.25rem;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 1.25rem;
    color: var(--sidebar-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 150ms ease;
}

.sidebar-item i {
    font-size: 1.15rem;
    width: 20px;
    text-align: center;
    color: var(--sidebar-text);
    transition: color 150ms ease;
}

.sidebar-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--sidebar-text-hover);
}

.sidebar-item:hover i {
    color: #ffffff;
}

/* Indicador Activo Normativo (Línea naranja izquierda + texto naranja) */
.sidebar-item.active {
    border-left-color: var(--inter-orange);
    color: var(--inter-orange);
    background-color: rgba(255, 122, 0, 0.06);
    font-weight: 600;
}

.sidebar-item.active i {
    color: var(--inter-orange);
}

.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background-color: var(--sidebar-header-bg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--inter-blue-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.sidebar-user-info {
    overflow: hidden;
    line-height: 1.2;
}

.sidebar-user-name {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    color: var(--sidebar-text);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- ÁREA PRINCIPAL DE CONTENIDO --- */
.app-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Previene desbordamiento horizontal flex */
    background-color: var(--inter-bg-content);
}

/* --- NAVBAR SUPERIOR --- */
.navbar-top {
    background-color: var(--inter-navbar-bg);
    height: 60px;
    border-bottom: 1px solid var(--inter-border-color);
    padding: 0 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 90;
}

.navbar-brand-area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar-page-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-body);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* Contenedor scrolleable del contenido */
.app-content {
    padding: 1.75rem;
    flex-grow: 1;
}

/* ===================================================================
   TIPOGRAFÍA Y ENCABEZADOS
   =================================================================== */
h1, .h1 {
    font-size: 1.5rem;   /* 24px */
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-body);
    margin-bottom: 0.5rem;
}

h2, .h2 {
    font-size: 1.25rem;  /* 20px */
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-body);
    margin-bottom: 0.5rem;
}

h3, .h3 {
    font-size: 1.0rem;   /* 16px */
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-body);
    margin-bottom: 0.4rem;
}

.text-muted {
    color: var(--text-muted) !important;
}

.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.fw-medium { font-weight: 500; }

/* ===================================================================
   COMPONENTES: BOTONES
   =================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-base);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    transition: all 150ms ease-in-out;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    border-radius: 6px;
}

.btn-lg {
    padding: 0.65rem 1.25rem;
    font-size: 1rem;
    border-radius: 8px;
}

/* Botón Primario (Azul Institucional) */
.btn-primary {
    background-color: var(--inter-blue-primary);
    border-color: var(--inter-blue-primary);
    color: #ffffff !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--inter-blue-primary-hover);
    border-color: var(--inter-blue-primary-hover);
    box-shadow: 0 2px 5px rgba(45, 85, 147, 0.25);
}

.btn-primary:active {
    background-color: var(--inter-blue-primary-dark);
}

/* Botón de Acción Destacada (Naranja) */
.btn-action-orange {
    background-color: var(--inter-orange);
    border-color: var(--inter-orange);
    color: #ffffff !important;
    font-weight: 600;
}

.btn-action-orange:hover, .btn-action-orange:focus {
    background-color: var(--inter-orange-hover);
    border-color: var(--inter-orange-hover);
    box-shadow: 0 2px 5px rgba(255, 122, 0, 0.3);
}

.btn-action-orange:active {
    background-color: var(--inter-orange-dark);
}

/* Botón Secundario / Outline */
.btn-outline-secondary {
    background-color: #ffffff;
    border-color: var(--inter-border-color);
    color: var(--text-table) !important;
}

.btn-outline-secondary:hover {
    background-color: #F1F5F9;
    border-color: #CBD5E1;
    color: var(--text-body) !important;
}

/* Botón Outline Primario */
.btn-outline-primary {
    background-color: #ffffff;
    border-color: var(--inter-blue-primary);
    color: var(--inter-blue-primary) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--inter-blue-primary);
    border-color: var(--inter-blue-primary);
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(45, 85, 147, 0.2);
}

/* Botón Danger / Rechazo */
.btn-danger {
    background-color: var(--color-danger-bg);
    border-color: #FCA5A5;
    color: var(--color-danger-text) !important;
    font-weight: 600;
}

.btn-danger:hover {
    background-color: #FEE2E2;
    border-color: #F87171;
}

/* Botón Success / Aprobación */
.btn-success {
    background-color: var(--color-success-bg);
    border-color: #86EFAC;
    color: var(--color-success-text) !important;
    font-weight: 600;
}

.btn-success:hover {
    background-color: #BBF7D0;
    border-color: #4ADE80;
}

/* Encabezado compartido de páginas operativas y reportes. */
.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.page-heading h1 { margin: 0; font-size: 1.4rem; }
.page-heading p { margin: 0.2rem 0 0; font-size: 0.85rem; }
.page-heading-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ===================================================================
   COMPONENTES: TARJETAS (CARDS)
   =================================================================== */
.card {
    background-color: var(--inter-card-bg);
    border: 1px solid var(--inter-border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.65rem;
    overflow: hidden;
}

.card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--inter-border-color);
    padding: 1.1rem 1.4rem;
    font-weight: 600;
    font-size: 0.96rem;
    color: var(--text-body);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-body {
    padding: 1.35rem 1.5rem;
}

.card-footer {
    background-color: #F8FAFC;
    border-top: 1px solid var(--inter-border-color);
    padding: 0.85rem 1.25rem;
}

/* ===================================================================
   COMPONENTES: TARJETAS KPI / MÉTRICAS
   =================================================================== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-card {
    background: #ffffff;
    border: 1px solid var(--inter-border-color);
    border-radius: var(--card-radius);
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-card);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.kpi-icon-blue   { background-color: #E8EEF8; color: var(--inter-blue-primary); }
.kpi-icon-green  { background-color: var(--color-success-bg); color: var(--color-success-text); }
.kpi-icon-orange { background-color: #FFF0E6; color: var(--inter-orange); }
.kpi-icon-red    { background-color: var(--color-danger-bg); color: var(--color-danger-text); }
.kpi-icon-purple { background-color: #F3E8FF; color: #7E22CE; }

.kpi-content {
    display: flex;
    flex-direction: column;
}

.kpi-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-body);
    margin: 0.15rem 0 0 0;
    line-height: 1.1;
}

/* ===================================================================
   COMPONENTES: TABLAS (DATAGRIDS)
   =================================================================== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-custom {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #ffffff;
}

.table-custom th {
    background-color: var(--table-header-bg);
    color: var(--table-header-color);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--table-border);
    white-space: nowrap;
    text-align: left;
}

.table-custom td {
    padding: 0.85rem 1.15rem;
    color: var(--text-table);
    font-size: 0.875rem;
    line-height: 1.55;
    border-bottom: 1px solid var(--table-border);
    vertical-align: middle;
}

.table-custom tbody tr:hover {
    background-color: var(--table-row-hover);
}

.table-custom tbody tr:last-child td {
    border-bottom: none;
}

/* Celdas monetarias alineadas a la derecha con cifras tabulares */
.table-custom th.text-end,
.table-custom td.text-end,
.text-end {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.font-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* ===================================================================
   COMPONENTES: BADGES Y ESTADOS (CHIPS)
   =================================================================== */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--badge-radius);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.badge-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.badge-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.badge-danger {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.badge-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
}

.badge-neutral {
    background-color: #F1F5F9;
    color: #475569;
}

/* ===================================================================
   COMPONENTES: FORMULARIOS
   =================================================================== */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-body);
}

.form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
    width: 100%;
    border: 1px solid #CBD5E1;
    border-radius: var(--border-radius-base);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-body);
    background-color: #ffffff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    font-family: inherit;
}

.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--inter-blue-primary);
    box-shadow: 0 0 0 3px rgba(45, 85, 147, 0.15);
    outline: none;
}

.form-control[disabled], .form-control[readonly], input[disabled], select[disabled], textarea[disabled] {
    background-color: #F8FAFC;
    color: #94A3B8;
    cursor: not-allowed;
}

/* ===================================================================
   MENSAJES DE ALERTA (DJANGO MESSAGES)
   =================================================================== */
.messages-container {
    list-style: none;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.alert {
    padding: 0.85rem 1.15rem;
    border-radius: var(--border-radius-base);
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid transparent;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: opacity 200ms ease, transform 200ms ease;
}

.alert.is-hiding {
    opacity: 0;
    transform: translateY(-4px);
}

.alert-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-title {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
    display: block;
}

.alert-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
}

.alert-list {
    margin: 0.35rem 0 0 0;
    padding-left: 1.25rem;
    font-size: 0.825rem;
}

.alert-close {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
    transition: opacity 150ms ease;
    flex-shrink: 0;
}

.alert-close:hover {
    opacity: 1;
}

.alert-success, .success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: #86EFAC;
}

.alert-error, .alert-danger, .error, .danger {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
    border-color: #FCA5A5;
}

.alert-warning, .warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-color: #FDE68A;
}

.alert-info, .info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
    border-color: #BAE6FD;
}

/* ===================================================================
   SISTEMA DE RETROALIMENTACIÓN DE FORMULARIOS (INVALID FEEDBACK)
   =================================================================== */
.form-control.is-invalid,
.form-select.is-invalid,
textarea.form-control.is-invalid {
    border-color: #DC2626 !important;
    background-color: #FFF5F5 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
textarea.form-control.is-invalid:focus {
    border-color: #B91C1C !important;
    box-shadow: 0 0 0 3.5px rgba(220, 38, 38, 0.2) !important;
}

.invalid-feedback {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #DC2626;
    margin-top: 0.35rem;
    line-height: 1.35;
}

.invalid-feedback::before {
    content: "\F33A"; /* bi-exclamation-circle-fill en Bootstrap Icons */
    font-family: "bootstrap-icons" !important;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Si ya contiene un icono interno, no duplicar el pseudo-elemento */
.invalid-feedback:has(i)::before {
    display: none;
}

.form-errors-summary {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-left: 4px solid #DC2626;
    border-radius: var(--border-radius-base);
    padding: 0.85rem 1.15rem;
    margin-bottom: 1.25rem;
    color: #991B1B;
    font-size: 0.85rem;
}

.form-errors-summary-title {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.form-errors-summary-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.825rem;
}

/* ===================================================================
   PANTALLA DE LOGIN (GLASSMORPHISM INSTITUCIONAL)
   =================================================================== */
.login-body {
    background: radial-gradient(circle at 80% 20%, #1F3668 0%, #071A36 60%, #05132A 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 2.25rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

.login-brand-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--inter-blue-primary) 0%, var(--inter-orange) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #ffffff;
    margin: 0 auto 1.25rem auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.login-title {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

.login-subtitle {
    font-size: 0.8rem;
    color: var(--sidebar-text);
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-card .form-control {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.login-card .form-control:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--inter-orange);
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.25);
}

.login-card .form-label {
    color: #E2E8F0;
}

/* ===================================================================
   COMPONENTES: MÓDULO CATÁLOGOS (ALTA DENSIDAD Y ESPACIO OPTIMIZADO)
   =================================================================== */
.catalogos-subnav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: #ffffff;
    border: 1px solid var(--inter-border-color);
    border-radius: var(--border-radius-base);
    padding: 0.35rem 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    white-space: nowrap;
}

.catalogos-subnav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 6px;
    text-decoration: none;
    transition: all 120ms ease-in-out;
}

.catalogos-subnav-item:hover {
    color: var(--inter-blue-primary);
    background-color: #F1F5F9;
}

.catalogos-subnav-item.active {
    background-color: #EFF6FF;
    color: var(--inter-blue-primary);
    font-weight: 600;
}

.catalogos-subnav-item .badge-count {
    font-size: 0.7rem;
    background: #E2E8F0;
    color: var(--text-table);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
}

.catalogos-subnav-item.active .badge-count {
    background: var(--inter-blue-primary);
    color: #ffffff;
}

/* ===================================================================
   SUBNAVEGACIÓN / SEGMENTED CONTROL INSTITUCIONAL PARA EVALUACIONES
   =================================================================== */
.evaluaciones-subnav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #ffffff;
    border: 1px solid var(--inter-border-color);
    border-radius: var(--border-radius-base);
    padding: 0.35rem 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    max-width: 100%;
    flex-wrap: wrap;
}

.evaluaciones-subnav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 6px;
    text-decoration: none;
    transition: all 140ms ease-in-out;
    border: 1px solid transparent;
}

.evaluaciones-subnav-item:hover {
    color: var(--inter-blue-primary);
    background-color: #F8FAFC;
}

.evaluaciones-subnav-item.active {
    background-color: #EFF6FF;
    color: var(--inter-blue-primary);
    border-color: #BFDBFE;
    font-weight: 600;
}

.evaluaciones-subnav-item .badge-count {
    font-size: 0.72rem;
    background: #E2E8F0;
    color: var(--text-table);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    transition: all 140ms ease-in-out;
}

.evaluaciones-subnav-item.active .badge-count {
    background: var(--inter-blue-primary);
    color: #ffffff;
}

/* Barra compacta de Métricas de Catálogo */
.catalog-metrics-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.catalog-metric-pill {
    background: #ffffff;
    border: 1px solid var(--inter-border-color);
    border-radius: var(--border-radius-base);
    padding: 0.65rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
}

.catalog-metric-pill .pill-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.catalog-metric-pill .pill-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #EFF6FF;
    color: var(--inter-blue-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.catalog-metric-pill .pill-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    line-height: 1.1;
}

.catalog-metric-pill .pill-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--inter-blue-dark);
    font-family: var(--font-mono, monospace);
}

/* Tarjeta compacta de Catálogo */
.catalog-item-card {
    background: #ffffff;
    border: 1px solid var(--inter-border-color);
    border-radius: var(--card-radius);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-shadow: var(--shadow-card);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.catalog-item-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: #CBD5E1;
}

.catalog-item-card .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.catalog-item-card .icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #EFF6FF;
    color: var(--inter-blue-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.catalog-item-card .catalog-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--inter-blue-dark);
    margin: 0 0 0.25rem 0;
}

.catalog-item-card .catalog-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.35;
    flex-grow: 1;
}

.catalog-item-card .card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--inter-border-color);
}

/* Barra de filtros integrada en cabecera de tabla */
.table-toolbar-integrated {
    background: #ffffff;
    border-bottom: 1px solid var(--inter-border-color);
    padding: 0.6rem 1rem;
}

/* ===================================================================
   CUADRÍCULA LIGERA DE CATÁLOGOS (APP TILES)
   =================================================================== */
.catalog-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
}

@media (max-width: 992px) {
    .catalog-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .catalog-tiles-grid {
        grid-template-columns: 1fr;
    }
}

.catalog-tile {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--inter-border-color);
    border-radius: 12px;
    padding: 1.35rem 1.25rem 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    overflow: hidden;
}

.catalog-tile:hover {
    border-color: #94A3B8;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(7, 26, 54, 0.07);
}

.catalog-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.catalog-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #EFF6FF;
    color: var(--inter-blue-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: all 180ms ease;
}

.catalog-tile:hover .catalog-tile-icon {
    background: var(--inter-blue-primary);
    color: #ffffff;
}

.catalog-tile-badge {
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    color: var(--inter-blue-primary);
    background: #EFF6FF;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    border: 1px solid #DBEAFE;
}

.catalog-tile-body {
    flex-grow: 1;
}

.catalog-tile-title {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--inter-blue-dark);
    margin: 0 0 0.2rem 0;
    transition: color 150ms ease;
}

.catalog-tile:hover .catalog-tile-title {
    color: var(--inter-blue-primary);
}

.catalog-tile-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.35;
}

.catalog-tile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #F1F5F9;
}

.catalog-tile-action-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--inter-blue-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

.catalog-tile-action-link i {
    transition: transform 150ms ease;
}

.catalog-tile:hover .catalog-tile-action-link i {
    transform: translateX(4px);
}

.catalog-tile-btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    background: #FFF7ED;
    color: var(--inter-orange);
    border: 1px solid #FFEDD5;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 140ms ease;
    text-decoration: none;
}

.catalog-tile-btn-add:hover {
    background: var(--inter-orange);
    color: #ffffff;
    border-color: var(--inter-orange);
}

/* ===================================================================
   DETALLE DE REQUISICIÓN: STEPPER DE FLUJO INSTITUCIONAL
   =================================================================== */
.req-hero-card {
    background: #ffffff;
    border: 1px solid var(--inter-border-color);
    border-radius: var(--card-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.req-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0.85rem 0 0.25rem 0;
    margin-top: 1.1rem;
    border-top: 1px solid #F1F5F9;
}

.req-stepper-progress-bg {
    position: absolute;
    top: 27px;
    left: 45px;
    right: 45px;
    height: 3px;
    background: #E2E8F0;
    z-index: 1;
    border-radius: 2px;
    overflow: hidden;
}

.req-stepper-progress-bar {
    position: absolute;
    top: 27px;
    left: 45px;
    max-width: calc(100% - 90px);
    height: 3px;
    background: linear-gradient(90deg, var(--inter-blue-primary), var(--inter-orange));
    z-index: 2;
    transition: width 300ms ease;
    border-radius: 2px;
}

.req-stepper-progress-bg .req-stepper-progress-bar {
    top: 0;
    left: 0;
    max-width: 100%;
    height: 100%;
}

.req-step-item {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent;
    cursor: default;
    min-width: 80px;
}

.req-step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #CBD5E1;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 200ms ease;
    box-shadow: 0 0 0 4px #ffffff;
}

.req-step-item.is-completed .req-step-icon {
    background: var(--inter-blue-primary);
    border-color: var(--inter-blue-primary);
    color: #ffffff;
}

.req-step-item.is-active .req-step-icon {
    background: #ffffff;
    border-color: var(--inter-orange);
    color: var(--inter-orange);
    box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.18);
    font-weight: 800;
}

.req-step-item.is-rejected .req-step-icon {
    background: var(--color-danger-text);
    border-color: var(--color-danger-text);
    color: #ffffff;
}

.req-step-label {
    margin-top: 0.45rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
}

.req-step-item.is-active .req-step-label {
    color: var(--inter-orange-dark);
    font-weight: 700;
}

.req-step-item.is-completed .req-step-label {
    color: var(--inter-blue-primary);
}

/* ===================================================================
   DETALLE DE REQUISICIÓN: GRID PRINCIPAL (2 COLUMNAS)
   =================================================================== */
.req-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 991px) {
    .req-layout-grid {
        grid-template-columns: 1fr;
    }
}

.req-main-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.req-sidebar-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ===================================================================
   SISTEMA DE FIRMA DIGITAL INSTITUCIONAL (COP-FOR-02)
   =================================================================== */
.signature-card-box {
    background: #F8FAFC;
    border: 1px solid var(--inter-border-color);
    border-radius: var(--border-radius-base);
    padding: 1.1rem;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.signature-card-box.is-focused {
    border-color: var(--inter-blue-primary);
    box-shadow: 0 0 0 3px rgba(45, 85, 147, 0.12);
}

.signature-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.65rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.signature-card-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--inter-blue-dark);
}

.signature-card-title i {
    color: var(--inter-blue-primary);
    font-size: 0.95rem;
}

.sig-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    transition: all 200ms ease;
}

.sig-status-badge.status-pending {
    background: #F1F5F9;
    color: #64748B;
    border: 1px solid #CBD5E1;
}

.sig-status-badge.status-signed {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid #BBF7D0;
}

.signature-canvas-wrapper {
    position: relative;
    width: 100%;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 6px;
    overflow: hidden;
    touch-action: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.signature-canvas-wrapper:hover {
    border-color: #94A3B8;
}

.signature-canvas {
    display: block;
    width: 100%;
    height: 125px;
    cursor: crosshair;
    background: transparent;
    position: relative;
    z-index: 2;
}

.signature-baseline-guide {
    position: absolute;
    bottom: 24px;
    left: 20px;
    right: 20px;
    border-bottom: 1.5px dashed #CBD5E1;
    pointer-events: none;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 2px;
}

.signature-baseline-mark {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94A3B8;
    user-select: none;
}

.signature-baseline-hint {
    font-size: 0.68rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    user-select: none;
    font-weight: 600;
}

.signature-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.55rem;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.btn-sig-clear {
    background: #FFFFFF;
    border: 1px solid var(--inter-border-color);
    color: #475569;
    padding: 0.25rem 0.65rem;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 140ms ease;
}

.btn-sig-clear:hover {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: var(--color-danger-text);
}

/* ===================================================================
   WIDGET LATERAL: CONTROL DE FIRMAS INSTITUCIONALES (COP-FOR-02)
   =================================================================== */
.cop-signatures-card {
    background: #ffffff;
    border: 1px solid var(--inter-border-color);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.cop-signatures-header {
    background: #071A36;
    color: #ffffff;
    padding: 0.85rem 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cop-signatures-header h3 {
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.cop-signatures-progress {
    height: 4px;
    background: #1E293B;
    width: 100%;
}

.cop-signatures-progress-fill {
    height: 100%;
    background: var(--inter-orange);
    transition: width 300ms ease;
}

.cop-signatures-body {
    padding: 0.5rem 1.1rem 1rem 1.1rem;
}

.cop-sig-item {
    padding: 0.7rem 0;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cop-sig-item:last-child {
    border-bottom: none;
}

.cop-sig-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.cop-sig-item.is-signed .cop-sig-num {
    background: #DCFCE7;
    color: #15803D;
}

.cop-sig-info {
    flex-grow: 1;
    min-width: 0;
}

.cop-sig-role {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
}

.cop-sig-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.cop-sig-date {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.cop-sig-thumb {
    width: 58px;
    height: 28px;
    object-fit: contain;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    background: #ffffff;
    padding: 2px;
}

/* ===================================================================
   TIMELINE VERTICAL DE AUTORIZACIÓN
   =================================================================== */
.auth-timeline {
    position: relative;
    padding-left: 1.5rem;
    margin: 0.5rem 0 0 0;
}

.auth-timeline::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 8px;
    width: 2px;
    background: #E2E8F0;
}

.auth-timeline-item {
    position: relative;
    padding-bottom: 0.9rem;
}

.auth-timeline-item:last-child {
    padding-bottom: 0;
}

.auth-timeline-dot {
    position: absolute;
    left: -1.5rem;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    z-index: 2;
}

.auth-timeline-item.is-approved .auth-timeline-dot {
    background: #15803D;
    border-color: #15803D;
    color: #ffffff;
}

.auth-timeline-item.is-rejected .auth-timeline-dot {
    background: #B91C1C;
    border-color: #B91C1C;
    color: #ffffff;
}

.auth-timeline-item.is-pending .auth-timeline-dot {
    background: #ffffff;
    border-color: var(--inter-orange);
    color: var(--inter-orange);
}

/* ===================================================================
   MODALES INSTITUCIONALES (LIGHTWEIGHT VANILLA)
   =================================================================== */
.inter-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 26, 54, 0.68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1050;
    display: none;
    opacity: 0;
    transition: opacity 180ms ease;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.inter-modal-backdrop.is-open {
    display: flex;
    opacity: 1;
}

.inter-modal-dialog {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    z-index: 1051;
    transform: scale(0.96);
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inter-modal-dialog.modal-sm {
    max-width: 440px;
}

.inter-modal-dialog.modal-lg {
    max-width: 780px;
}

.inter-modal-dialog.modal-xl {
    max-width: 980px;
}

.inter-modal-backdrop.is-open .inter-modal-dialog {
    transform: scale(1);
}

.inter-modal-header {
    background: #071A36;
    color: #ffffff;
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.inter-modal-header.is-danger {
    background: #991B1B !important;
}

.inter-modal-header.is-warning {
    background: #B45309 !important;
}

.inter-modal-header.is-success {
    background: #166534 !important;
}

.inter-modal-header.is-clean {
    background: #ffffff;
    color: var(--text-body);
    border-bottom: 1px solid var(--inter-border-color);
}

.inter-modal-header.is-clean .inter-modal-title {
    color: var(--text-body);
}

.inter-modal-header.is-clean .inter-modal-close {
    color: #94A3B8;
}

.inter-modal-header.is-clean .inter-modal-close:hover {
    color: #0F172A;
}

.inter-modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inter-modal-close {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 1.35rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem;
    border-radius: 4px;
    transition: color 150ms ease;
}

.inter-modal-close:hover {
    color: #ffffff;
}

.inter-modal-body {
    padding: 1.35rem;
}

.inter-modal-footer {
    padding: 0.9rem 1.4rem;
    background: #F8FAFC;
    border-top: 1px solid var(--inter-border-color);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Modales de Confirmación y Alerta Institucional */
.modal-confirm-layout {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.modal-confirm-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.modal-confirm-icon.danger {
    background: #FEE2E2;
    color: #DC2626;
}

.modal-confirm-icon.warning {
    background: #FEF3C7;
    color: #D97706;
}

.modal-confirm-icon.success {
    background: #DCFCE7;
    color: #16A34A;
}

.modal-confirm-icon.primary {
    background: #E8EEF8;
    color: var(--inter-blue-primary);
}

.modal-confirm-content {
    flex: 1;
}

.modal-confirm-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-body);
    margin: 0 0 0.35rem 0;
}

.modal-confirm-message {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
}

/* ===================================================================
   PESTAÑAS (TABS) INSTITUCIONALES
   =================================================================== */
.inter-tabs-nav {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #E2E8F0;
    margin-bottom: 1.25rem;
}

.inter-tab-btn {
    background: transparent;
    border: none;
    padding: 0.65rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 150ms ease;
    border-radius: 6px 6px 0 0;
}

.inter-tab-btn:hover {
    color: var(--inter-blue-primary);
    background: #F8FAFC;
}

.inter-tab-btn.is-active {
    color: var(--inter-blue-primary);
    font-weight: 700;
}

.inter-tab-btn.is-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--inter-blue-primary);
    border-radius: 3px 3px 0 0;
}

.inter-tab-pane {
    display: none;
}

.inter-tab-pane.is-active {
    display: block;
}

/* ===================================================================
   UTILIDADES INSTITUCIONALES DE DISEÑO: FLEXBOX, GRID Y ESPACIADO
   =================================================================== */
.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.d-grid {
    display: grid !important;
}

.d-block {
    display: block !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-none {
    display: none !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.align-items-baseline {
    align-items: baseline !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 2rem !important; }

.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-auto { margin-left: auto !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-auto { margin-right: auto !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }

.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-normal { font-weight: 400 !important; }

/* Contenedor oficial para vistas del Portal de Proveedores */
.portal-container {
    max-width: 1320px;
    width: 100%;
    margin: 1.75rem auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* Grid de métricas en fila horizontal para portal */
.portal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

@media (max-width: 1024px) {
    .portal-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .portal-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   SISTEMA RESPONSIVE INSTITUCIONAL (MÓVILES, TABLETS Y DESKTOP)
   =================================================================== */

/* Botón Hamburguesa en Navbar */
.btn-sidebar-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-body);
    font-size: 1.5rem;
    padding: 0.25rem 0.4rem;
    margin-right: 0.5rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 6px;
    transition: background 150ms ease;
}

.btn-sidebar-toggle:hover {
    background-color: #F1F5F9;
    color: var(--inter-blue-primary);
}

/* Botón de cierre en header del sidebar en móvil */
.sidebar-close-mobile {
    display: none;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 4px;
    transition: background 150ms ease;
}

.sidebar-close-mobile:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Backdrop oscuro para móvil */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(7, 26, 54, 0.65);
    backdrop-filter: blur(2px);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

/* --- ADAPTACIÓN TABLET Y PANTALLAS MEDIANAS (<= 992px) --- */
@media (max-width: 992px) {
    .btn-sidebar-toggle {
        display: inline-flex !important;
    }

    .sidebar-close-mobile {
        display: inline-flex !important;
    }

    .app-sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        width: 270px !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }

    .app-sidebar.show-mobile {
        transform: translateX(0) !important;
    }

    .navbar-top {
        padding: 0 1rem;
    }

    .app-content {
        padding: 1.25rem 1rem;
    }

    .kpi-grid, .portal-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dash-hero-card {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .dash-hero-actions {
        justify-content: flex-start;
    }
}

/* --- ADAPTACIÓN MÓVIL ESTRICTA (<= 768px) --- */
@media (max-width: 768px) {
    .navbar-top {
        padding: 0 0.75rem;
        height: 54px;
    }

    .navbar-brand-area {
        gap: 0.5rem;
    }

    .navbar-page-title {
        font-size: 0.95rem;
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar-actions {
        gap: 0.35rem;
    }

    .navbar-actions .btn {
        padding: 0.3rem 0.55rem;
        font-size: 0.775rem;
    }

    .navbar-actions .btn span {
        display: none; /* Solo icono en barra superior móvil */
    }

    .app-content {
        padding: 0.85rem 0.65rem;
    }

    /* Títulos y cabeceras de vistas */
    h1, .h1 {
        font-size: 1.3rem !important;
    }

    /* Grids a 1 sola columna en pantallas móviles */
    .kpi-grid, .portal-kpi-grid, .dash-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .dash-grid-2col, .dash-grid-bottom {
        grid-template-columns: 1fr !important;
    }

    .dash-header-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.85rem;
    }

    .dash-top-controls {
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    .dash-periodo-inline {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .dash-btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Tablas responsivas con scroll táctil suave */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--inter-border-color);
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .table-custom th,
    .table-custom td {
        padding: 0.65rem 0.75rem;
        font-size: 0.8rem;
    }

    /* Modales institucionales centrados y adaptados a viewport móvil */
    .inter-modal-dialog,
    .modal-dialog {
        width: 94% !important;
        max-width: 94vw !important;
        margin: 1rem auto !important;
        max-height: calc(100vh - 2rem) !important;
        overflow-y: auto !important;
        border-radius: 10px !important;
    }

    .inter-modal-header {
        padding: 0.85rem 1rem !important;
    }

    .inter-modal-body {
        padding: 1rem !important;
    }

    .inter-modal-footer {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Firma digital responsiva (nunca desborda pantalla) */
    .signature-canvas,
    .signature-pad-canvas,
    canvas.signature-pad,
    canvas#signature-pad {
        width: 100% !important;
        max-width: 100% !important;
        height: 130px !important;
        touch-action: none !important;
    }

    /* Stepper de flujo de requisición scrollable en móvil */
    .req-stepper {
        overflow-x: auto;
        justify-content: flex-start;
        gap: 1.25rem;
        padding-bottom: 0.75rem;
        -webkit-overflow-scrolling: touch;
    }

    .req-stepper-progress-bg,
    .req-stepper-progress-bar {
        display: none;
    }

    .req-step-item {
        min-width: 68px;
        flex-shrink: 0;
    }

    .req-step-label {
        font-size: 0.72rem;
    }

    /* Tarjetas y formularios */
    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
        padding: 0.85rem 1rem;
    }

    .card-body {
        padding: 1rem 0.85rem;
    }
}

/* --- REGLAS RESPONSIVAS PARA REPORTES Y DESGLOSE --- */
.reporte-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.reporte-filtros-grid-1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.reporte-filtros-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr auto;
    gap: 1rem;
    align-items: flex-end;
}

@media (max-width: 992px) {
    .reporte-filtros-grid-1 {
        grid-template-columns: repeat(2, 1fr);
    }
    .reporte-filtros-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .reporte-kpi-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .reporte-filtros-grid-1 {
        grid-template-columns: 1fr;
    }
    .reporte-filtros-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   SISTEMA DE GRID, COLUMNAS E INPUT-GROUPS INSTITUCIONALES
   =================================================================== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.row.g-1 {
    margin-right: -0.25rem;
    margin-left: -0.25rem;
    row-gap: 0.25rem;
}
.row.g-1 > [class*="col-"] {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
}

.row.g-2 {
    margin-right: -0.375rem;
    margin-left: -0.375rem;
    row-gap: 0.5rem;
}
.row.g-2 > [class*="col-"] {
    padding-right: 0.375rem;
    padding-left: 0.375rem;
}

.row.g-3 {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
    row-gap: 0.75rem;
}
.row.g-3 > [class*="col-"] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
    .col-sm-3  { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-6  { flex: 0 0 50%; max-width: 50%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
    .col-md-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3  { flex: 0 0 25%; max-width: 25%; }
    .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6  { flex: 0 0 50%; max-width: 50%; }
    .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9  { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Input Groups */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > input {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > input,
.input-group-sm > .btn,
.input-group-sm > .input-group-text {
    padding: 0.3rem 0.6rem;
    font-size: 0.8125rem;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #64748B;
    text-align: center;
    white-space: nowrap;
    background-color: #F8FAFC;
    border: 1px solid #CBD5E1;
    border-radius: var(--border-radius-base);
}

.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > :not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px;
}

/* ===================================================================
   DROPDOWN INSTITUCIONAL (INTER-DROPDOWN)
   =================================================================== */
.inter-dropdown {
    position: relative;
    display: inline-block;
}

.inter-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #FFFFFF;
    min-width: 320px;
    border-radius: var(--border-radius-base, 8px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--inter-border-color, #E2E8F0);
    z-index: 1060;
    padding: 0.5rem 0;
    overflow: hidden;
    animation: interDropdownFadeIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes interDropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inter-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    color: var(--text-dark, #1E293B);
    text-decoration: none;
    font-size: 0.8rem;
    transition: background-color 140ms ease, color 140ms ease;
    cursor: pointer;
}

.inter-dropdown-item:hover {
    background-color: #F1F5F9;
    color: var(--inter-blue-dark, #002B7F);
    text-decoration: none;
}