/* ============================================================================
   DESIGN SYSTEM — La Salle · Control Equipos Villavicencio
   FASE 2 — Tokens + componentes base (complementa Bootstrap, no lo reemplaza)

   Se carga DESPUÉS de app.css en los layouts, por lo que sus :root y reglas
   son autoritativas. Objetivo: una única fuente de verdad para color,
   tipografía, espaciado, radio, sombra y componentes.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS GLOBALES
   ---------------------------------------------------------------------------- */
:root {
    /* --- Marca institucional (valores históricos preservados) --- */
    --lasalle-blue-dark:       #0b3c5d;
    --lasalle-blue-light:      #1d5f8a;
    --lasalle-blue-ultra-light:#eef5f9;
    --lasalle-gold:            #f39c12;
    --lasalle-gold-hover:      #e67e22;
    --lasalle-gold-light:      #fef5e7;

    /* --- Override semántico de Bootstrap (btn/bg/text/badge usan marca) --- */
    --bs-primary:        #0b3c5d;
    --bs-primary-rgb:    11, 60, 93;
    --bs-secondary:      #64748b;
    --bs-secondary-rgb:  100, 116, 139;
    --bs-success:        #198754;
    --bs-success-rgb:    25, 135, 84;
    --bs-danger:         #dc3545;
    --bs-danger-rgb:     220, 53, 69;
    --bs-warning:        #f39c12;
    --bs-warning-rgb:    243, 156, 18;
    --bs-info:           #1d5f8a;
    --bs-info-rgb:       29, 95, 138;
    --bs-link-color:     #1d5f8a;
    --bs-link-hover-color:#0b3c5d;

    /* --- Estados semánticos (una sola fuente para badges/alertas) --- */
    --color-success: #198754;
    --color-info:    #1d5f8a;
    --color-warning: #f39c12;
    --color-danger:  #dc3545;
    --color-format:  #ff6600;   /* naranja "formato GFI" (antes var sin definir) */
    --color-format-hover: #e05500;
    /* Alias de compatibilidad: algunas vistas financieras referencian
       var(--format-orange) que nunca se definía (borde de acento roto). */
    --format-orange: #ff6600;
    --format-orange-hover: #e05500;

    /* --- Neutros --- */
    --color-background: #f4f6f9;
    --color-surface:    #ffffff;
    --color-text:       #1e293b;
    --color-text-muted: #64748b;
    --color-border:     #e2e8f0;

    /* --- Radio --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* --- Sombras (sutiles, corporativas) --- */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.08);

    /* --- Espaciado (escala de 4px) --- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* --- Tipografía --- */
    --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ----------------------------------------------------------------------------
   2. BASE Y TIPOGRAFÍA
   ---------------------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: 0.875rem;              /* 14px base uniforme */
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); }

/* Page title unificado */
.app-title {
    font-weight: 700;
    color: var(--lasalle-blue-dark);
    margin-bottom: 0.25rem;
}
.app-subtitle {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ----------------------------------------------------------------------------
   3. BOTONES — altura, radio, tipografía y estados uniformes
   ---------------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .05s ease;
}
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(11, 60, 93, 0.25); }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.625rem 1.25rem; font-size: 0.9375rem; }

/* Botón de marca (dorado) */
.btn-lasalle {
    background-color: var(--lasalle-gold);
    border: 1px solid var(--lasalle-gold);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}
.btn-lasalle:hover {
    background-color: var(--lasalle-gold-hover);
    border-color: var(--lasalle-gold-hover);
    color: #fff;
}
.btn-lasalle:focus-visible { box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.3); }

/* Botón de marca (azul institucional) */
.btn-lasalle-blue {
    background-color: var(--lasalle-blue-dark);
    border: 1px solid var(--lasalle-blue-dark);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}
.btn-lasalle-blue:hover {
    background-color: var(--lasalle-blue-light);
    border-color: var(--lasalle-blue-light);
    color: #fff;
}
.btn-lasalle-blue:focus-visible { box-shadow: 0 0 0 3px rgba(11, 60, 93, 0.3); }

/* Icon button */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------------------------
   4. CARDS — patrón unificado
   ---------------------------------------------------------------------------- */
.app-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.app-card .card-header {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-5);
}
.app-card .card-body { padding: var(--space-5); }
.app-card .card-title {
    font-weight: 700;
    color: var(--lasalle-blue-dark);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

/* El encabezado institucional azul (card-header-lasalle) debe prevalecer
   sobre el fondo blanco de .app-card .card-header. */
.card-header-lasalle {
    background-color: var(--lasalle-blue-dark) !important;
    color: #ffffff !important;
    border-bottom: 3px solid var(--lasalle-gold) !important;
}

/* Asegurar que el encabezado de card sea HORIZONTAL en escritorio
   (título a la izquierda, acción a la derecha), sin depender de las
   utilidades responsive de Bootstrap (flex-sm-row). */
@media (min-width: 576px) {
    .card-header {
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* ----------------------------------------------------------------------------
   5. TABLAS — cabecera de marca única
   ---------------------------------------------------------------------------- */
.table-thead-lasalle {
    background-color: var(--lasalle-blue-dark) !important;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.table-thead-lasalle th {
    padding: 0.75rem 0.9rem;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.table { font-size: 0.875rem; }
.table tbody td { vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: var(--lasalle-blue-ultra-light); }

/* ----------------------------------------------------------------------------
   6. BADGES — estados semánticos
   ---------------------------------------------------------------------------- */
.badge {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.4em 0.7em;
    border-radius: 20px;
}

/* ----------------------------------------------------------------------------
   7. ALERTAS
   ---------------------------------------------------------------------------- */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-size: 0.875rem;
}

/* ----------------------------------------------------------------------------
   8. FORMULARIOS
   ---------------------------------------------------------------------------- */
.form-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}
.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border-color: var(--color-border);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--lasalle-blue-light);
    box-shadow: 0 0 0 3px rgba(29, 95, 138, 0.15);
}

/* ----------------------------------------------------------------------------
   9. EMPTY STATE — estado vacío profesional
   ---------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-muted);
}
.empty-state .empty-icon {
    font-size: 2.5rem;
    color: var(--color-border);
    margin-bottom: var(--space-3);
    display: block;
}
.empty-state .empty-title { font-weight: 600; color: var(--color-text); }
.empty-state .empty-hint { font-size: 0.8125rem; }

/* ----------------------------------------------------------------------------
   10. UTILIDADES DE COLOR DE MARCA
   ---------------------------------------------------------------------------- */
.bg-lasalle-nav { background-color: var(--lasalle-blue-dark) !important; }
.bg-lasalle-footer { background-color: var(--lasalle-blue-dark) !important; }
.text-lasalle-gold { color: var(--lasalle-gold) !important; }
.text-lasalle-blue { color: var(--lasalle-blue-dark) !important; }

/* ----------------------------------------------------------------------------
   11. CONTENEDOR PRINCIPAL — ancho coherente de aplicación administrativa
   ---------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
.content-wrapper {
    padding-bottom: var(--space-8);
}

/* ----------------------------------------------------------------------------
   12. TARJETA KPI — indicador estadístico unificado
   ---------------------------------------------------------------------------- */
.kpi-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    height: 100%;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .05s ease;
}
.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.kpi-card .kpi-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kpi-color, var(--lasalle-blue-dark));
}
.kpi-card .kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
    background: color-mix(in srgb, var(--kpi-color, #0b3c5d) 14%, white);
    color: var(--kpi-color, #0b3c5d);
    font-size: 16px;
    margin-bottom: var(--space-3);
}
.kpi-card .kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}
.kpi-card .kpi-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.kpi-card .kpi-pct {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}
.kpi-card .kpi-bar {
    margin-top: var(--space-2);
    height: 5px;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}
.kpi-card .kpi-bar > span {
    display: block;
    height: 100%;
    background: var(--kpi-color, var(--lasalle-blue-dark));
    border-radius: 999px;
}

/* ----------------------------------------------------------------------------
   13. RESPONSIVE — refinamientos para tablet y móvil
   ---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .kpi-value { font-size: 1.5rem; }
}

@media (max-width: 575.98px) {
    .kpi-card { padding: var(--space-3); }
    .kpi-value { font-size: 1.35rem; }
    .kpi-icon { width: 34px; height: 34px; font-size: 14px; }
    .app-card .card-header { padding: var(--space-3) var(--space-4); }
    .app-card .card-body { padding: var(--space-4); }
    .empty-state { padding: var(--space-8) var(--space-4); }
    .empty-state .empty-icon { font-size: 2rem; }

    /* Evita que menús desplegables desborden el viewport en móvil */
    .dropdown-menu {
        max-width: 92vw;
    }
}