/* ═══════════════════════════════════════════════════════════════════
   Aura Theme — Variables de personalización corporativa
   ───────────────────────────────────────────────────────────────────
   ÚNICO archivo a modificar para adaptar la aplicación a los colores
   corporativos del cliente. El resto del sistema lee desde aquí.

   INSTRUCCIONES DE PERSONALIZACIÓN:
   Reemplazar únicamente los valores HEX/RGB en el bloque :root.
   Los canales RGB (--brand-*-rgb) deben coincidir con su variable HEX.
   ═══════════════════════════════════════════════════════════════════ */

:root {

    /* ──────────────────────────────────────────────────────────────
       COLOR DE MARCA PRINCIPAL
       Ejemplo teal corporativo (por defecto)
    ────────────────────────────────────────────────────────────────*/
    --brand-primary:            #1abc9c;   /* Color principal         */
    --brand-primary-dark:       #0f7f6f;   /* Variante oscura          */
    --brand-primary-light:      #2dd4bf;   /* Variante clara / glow    */
    --brand-primary-darker:     #0a6557;   /* Hover sobre oscuro       */
    --brand-primary-mid:        #149e83;   /* Hover sobre primario     */
    --brand-primary-deepest:    #0a3d2e;   /* Tono muy oscuro (headers)*/

    /* Canales RGB separados por comas (para uso en rgba())
       Deben coincidir exactamente con los valores HEX anteriores     */
    --brand-primary-rgb:         26, 188, 156;
    --brand-primary-dark-rgb:    15, 127, 111;
    --brand-primary-light-rgb:   45, 212, 191;
    --brand-primary-deepest-rgb: 10, 61, 46;

    /* ──────────────────────────────────────────────────────────────
       NAVBAR SUPERIOR
       Gradiente del header / barra de navegación
    ────────────────────────────────────────────────────────────────*/
    --brand-navbar-from:        #22d4ad;   /* Color inicio gradiente   */
    --brand-navbar-to:          #16a085;   /* Color fin gradiente      */
    --brand-navbar-border:      #13907a;   /* Borde inferior           */

    /* ──────────────────────────────────────────────────────────────
       SUPERFICIES TINTADAS
       Fondos suaves, íconos y acentos secundarios
    ────────────────────────────────────────────────────────────────*/
    --brand-surface-bg:         #e6f9f4;   /* Fondo tintado claro      */
    --brand-surface-text:       #0f7f6f;   /* Texto sobre fondo claro  */

    /* ──────────────────────────────────────────────────────────────
       BACKDROP DE MODALES
       Tono de fondo semitransparente al abrir modales
    ────────────────────────────────────────────────────────────────*/
    --brand-backdrop:           rgba(10, 30, 22, 0.50);

}

.vencimiento-fila-vencida {
   background-color: rgba(220, 53, 69, 0.06);
   box-shadow: inset 4px 0 0 #dc3545;
}

.vencimiento-fila-vencida td {
   border-top-color: rgba(220, 53, 69, 0.18) !important;
   border-bottom-color: rgba(220, 53, 69, 0.18) !important;
}

.input-vencimiento-vencido {
   border-color: #dc3545 !important;
   color: #842029;
   background-color: #fff5f5 !important;
}

/*
 ═══════════════════════════════════════════════════════════════════
   EJEMPLOS DE PERSONALIZACIÓN CORPORATIVA
   ─────────────────────────────────────────────────────────────────
   Para aplicar los colores de un cliente, copiar el bloque :root
   deseado en el PHP del layout (o en un aura-theme-cliente.css).
   Recordar descomentar antes de usar.
   ═══════════════════════════════════════════════════════════════════

   ── Ejemplo 1: Azul corporativo (#3580BB) ─────────────────────────
   :root {
    --brand-primary:             #3580BB;
    --brand-primary-dark:        #255B83;
    --brand-primary-light:       #68A5D4;
    --brand-primary-darker:      #1D4767;
    --brand-primary-mid:         #2F73A7;
    --brand-primary-deepest:     #0F293D;

    --brand-primary-rgb:          53, 128, 187;
    --brand-primary-dark-rgb:     37,  91, 131;
    --brand-primary-light-rgb:   104, 165, 212;
    --brand-primary-deepest-rgb:  15,  41,  61;

    --brand-navbar-from:         #4A8FCC;
    --brand-navbar-to:           #1E5A93;
    --brand-navbar-border:       #1A5087;

    --brand-surface-bg:          #E8F2FA;
    --brand-surface-text:        #255B83;

    --brand-backdrop:            rgba(10, 25, 40, 0.50);
} 

   ── Ejemplo 2: Rojo corporativo (#C32906) ─────────────────────────
   :root {
       --brand-primary:             #C32906;
       --brand-primary-dark:        #9C2105;
       --brand-primary-light:       #D94520;
       --brand-primary-darker:      #841A04;
       --brand-primary-mid:         #B02505;
       --brand-primary-deepest:     #3D0D01;
       --brand-primary-rgb:         195, 41, 6;
       --brand-primary-dark-rgb:    156, 33, 5;
       --brand-primary-light-rgb:   217, 69, 32;
       --brand-primary-deepest-rgb: 61, 13, 1;

       --brand-navbar-from:         #D63510;
       --brand-navbar-to:           #9C2105;
       --brand-navbar-border:       #8A1C04;

       --brand-surface-bg:          #FEF0EC;
       --brand-surface-text:        #9C2105;
       --brand-backdrop:            rgba(38, 8, 1, 0.50);
   }

   ── Ejemplo 3: Azul corporativo oscuro (#3580BB) ─────────────────────────
    :root {
    --brand-primary:             #16417C;  
    --brand-primary-dark:        #0F2D57;   
    --brand-primary-light:       #2265C3;  
    --brand-primary-darker:      #0B2241;   
    --brand-primary-mid:         #13386C;   
    --brand-primary-deepest:     #08172B;  

    --brand-primary-rgb:          22,  65, 124;
    --brand-primary-dark-rgb:     15,  45,  87;
    --brand-primary-light-rgb:    34, 101, 195;
    --brand-primary-deepest-rgb:   8,  23,  43;

    --brand-navbar-from:         #1D52A0;
    --brand-navbar-to:           #0F2D57;
    --brand-navbar-border:       #0C2850;

    --brand-surface-bg:          #E6EEF7;
    --brand-surface-text:        #0F2D57;

    --brand-backdrop:            rgba(5, 12, 28, 0.50);
} 
   */
   
:root {
    --brand-primary:             #3580BB;
    --brand-primary-dark:        #255B83;
    --brand-primary-light:       #68A5D4;
    --brand-primary-darker:      #1D4767;
    --brand-primary-mid:         #2F73A7;
    --brand-primary-deepest:     #0F293D;

    --brand-primary-rgb:          53, 128, 187;
    --brand-primary-dark-rgb:     37,  91, 131;
    --brand-primary-light-rgb:   104, 165, 212;
    --brand-primary-deepest-rgb:  15,  41,  61;

    --brand-navbar-from:         #4A8FCC;
    --brand-navbar-to:           #1E5A93;
    --brand-navbar-border:       #1A5087;

    --brand-surface-bg:          #E8F2FA;
    --brand-surface-text:        #255B83;

    --brand-backdrop:            rgba(10, 25, 40, 0.50);
}