:root {
    --primary-color: #0056b3; /* Color primario */
    --body-color: #FFFFFF; /* Color de fondo contenedor principal */
    --background-color: #ffffff; /* Color de fondo de los contenedores hijos */
    --border-color: #D1D8E0; /* Color de los bordes */
    /* ===== Colors ===== */
    --sidebar-primary-color: #34495e; /* Color de la barra lateral */
    --sidebar-secundary-color: #243B51; /* Color primario claro */
    --sidebar-tercero-color: #004585; /* Color primario claro */
    --sidebar-text-color-primary: #FFFFFF; /*Color principal del sidebar*/
    --sidebar-text-color-secundario: #B4B4B4; /*Color principal del sidebar*/
    --sidebar-hover-color: #29435B;
    --secondary-color: #6c757d; /* Color secundario */
    --accent-color: #ffc107; /* Color de acento */
    --text-color: #343a40; /* Color del texto más oscuro */
    --text-color2: #5a5a5a; /* Color del texto intermedio */
    --text-color3: #7a7a7a; /* Color del texto más claro */
    --muted-text-color: #6c757d; /* Color del texto atenuado */
    --hover-color: #e9ecef; /* Color de fondo al pasar el ratón */
    --focus-color: #3481F4; /* Color de enfoque */
    --toggle-color: #ddd; /* Color del toggle */
    --form-select-option: #f0f0f0; /* Color del fondo de lista de select */
    --img-fondo-color: #EBEBEB; /*fondo de imagen*/
    --placeholder-color: #888888;
    /* ====== Transition ====== */
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
    /*EGRESOS*/
    --egresos-primary-color: gold;
    --egresos-text-title: #A95C00;
    --egresos-borde: #EFCC8A;
}

body.dark {
    /*Colores principales*/
    --primary-color: #007bff; /* Color primario en modo oscuro */
    --body-color: #2c2c2c; /* Color de fondo oscuro */
    --background-color: #343a40; /* Color de fondo de los elementos en modo oscuro */

    --primary-color-light: #495057; /* Color primario claro en modo oscuro */
    --secondary-color: #adb5bd; /* Color secundario en modo oscuro */
    --accent-color: #ffc107; /* Color de acento */
    --text-color: white; /* Color del texto más claro en modo oscuro */
    --text-color2: #d1d1d1; /* Color del texto intermedio en modo oscuro */
    --text-color3: #f8f9fa; /* Color del texto más oscuro en modo oscuro */
    --muted-text-color: #ced4da; /* Color del texto atenuado en modo oscuro */
    --border-color: #495057; /* Color de los bordes en modo oscuro */
    --hover-color: #495057; /* Color de fondo al pasar el ratón en modo oscuro */
    --focus-color: #80bdff; /* Color de enfoque */
    --toggle-color: #fff; /* Color del toggle en modo oscuro */
    --form-select-option: #1D1D1D; /* Color del toggle */
    --img-fondo-color: #262626; /*fondo de imagen*/
    /*EGRESOS*/
    --egresos-primary-color: rgba(255, 165, 0, 0.25);
    --egresos-text-title: #ffa500;
    --egresos-borde: rgba(255, 165, 0, 0.2);
    --placeholder-color: #b0b0b0;
}



/* ======================
    🎨 ESCALA DE GRISES 
  ====================== */
.bg-gris-1 {
    background-color: #F9FAFB;
}

.bg-gris-2 {
    background-color: #F3F4F6;
}

.bg-gris-3 {
    background-color: #E5E7EB;
}

.bg-gris-4 {
    background-color: #D1D5DB;
}

.bg-gris-5 {
    background-color: #9CA3AF;
}

.bg-gris-6 {
    background-color: #6B7280;
}

.bg-gris-7 {
    background-color: #4B5563;
}

.bg-gris-8 {
    background-color: #374151;
}

.bg-gris-9 {
    background-color: #1F2937;
}

.bg-gris-10 {
    background-color: #111827;
}

/* ======================
       💙 AZULES
====================== */
.bg-azul-1 {
    background-color: #EFF6FF;
}

.bg-azul-2 {
    background-color: #DBEAFE;
}

.bg-azul-3 {
    background-color: #BFDBFE;
}

.bg-azul-4 {
    background-color: #93C5FD;
}

.bg-azul-5 {
    background-color: #60A5FA;
}

.bg-azul-6 {
    background-color: #3B82F6;
}

.bg-azul-7 {
    background-color: #2563EB;
}

.bg-azul-8 {
    background-color: #1D4ED8;
}

.bg-azul-9 {
    background-color: #1E40AF;
}

.bg-azul-10 {
    background-color: #1E3A8A;
}

/* ======================
        💚 VERDES
 ====================== */
.bg-verde-1 {
    background-color: #ECFDF5;
}

.bg-verde-2 {
    background-color: #D1FAE5;
}

.bg-verde-3 {
    background-color: #A7F3D0;
}

.bg-verde-4 {
    background-color: #6EE7B7;
}

.bg-verde-5 {
    background-color: #34D399;
}

.bg-verde-6 {
    background-color: #10B981;
}

.bg-verde-7 {
    background-color: #059669;
}

.bg-verde-8 {
    background-color: #047857;
}

.bg-verde-9 {
    background-color: #065F46;
}

.bg-verde-10 {
    background-color: #064E3B;
}

/* ======================
        💚 ROJOS
 ====================== */
.bg-rojo-1 {
    background-color: #FEF2F2;
}

.bg-rojo-2 {
    background-color: #FEE2E2;
}

.bg-rojo-3 {
    background-color: #FECACA;
}

.bg-rojo-4 {
    background-color: #FCA5A5;
}

.bg-rojo-5 {
    background-color: #F87171;
}

.bg-rojo-6 {
    background-color: #EF4444;
}

.bg-rojo-7 {
    background-color: #DC2626;
}

.bg-rojo-8 {
    background-color: #B91C1C;
}

.bg-rojo-9 {
    background-color: #991B1B;
}

.bg-rojo-10 {
    background-color: #7F1D1D;
}

/* ======================
      💛 AMARILLOS
====================== */
.bg-amarillo-1 {
    background-color: #FEFCE8;
}

.bg-amarillo-2 {
    background-color: #FEF9C3;
}

.bg-amarillo-3 {
    background-color: #FEF08A;
}

.bg-amarillo-4 {
    background-color: #FDE047;
}

.bg-amarillo-5 {
    background-color: #FACC15;
}

.bg-amarillo-6 {
    background-color: #EAB308;
}

.bg-amarillo-7 {
    background-color: #CA8A04;
}

.bg-amarillo-8 {
    background-color: #A16207;
}

.bg-amarillo-9 {
    background-color: #854D0E;
}

.bg-amarillo-10 {
    background-color: #713F12;
}

/* ======================
      🧡 NARANJAS
====================== */
.bg-naranja-1 {
    background-color: #FFF7ED;
}

.bg-naranja-2 {
    background-color: #FFEDD5;
}

.bg-naranja-3 {
    background-color: #FED7AA;
}

.bg-naranja-4 {
    background-color: #FDBA74;
}

.bg-naranja-5 {
    background-color: #FB923C;
}

.bg-naranja-6 {
    background-color: #F97316;
}

.bg-naranja-7 {
    background-color: #EA580C;
}

.bg-naranja-8 {
    background-color: #C2410C;
}

.bg-naranja-9 {
    background-color: #9A3412;
}

.bg-naranja-10 {
    background-color: #7C2D12;
}

/* ======================
        💜 VIOLETAS
 ====================== */
.bg-violeta-1 {
    background-color: #F5F3FF;
}

.bg-violeta-2 {
    background-color: #EDE9FE;
}

.bg-violeta-3 {
    background-color: #DDD6FE;
}

.bg-violeta-4 {
    background-color: #C4B5FD;
}

.bg-violeta-5 {
    background-color: #A78BFA;
}

.bg-violeta-6 {
    background-color: #8B5CF6;
}

.bg-violeta-7 {
    background-color: #7C3AED;
}

.bg-violeta-8 {
    background-color: #6D28D9;
}

.bg-violeta-9 {
    background-color: #5B21B6;
}

.bg-violeta-10 {
    background-color: #4C1D95;
}

/* ======================
        💖 ROSADOS
   ====================== */
.bg-rosado-1 {
    background-color: #FDF2F8;
}

.bg-rosado-2 {
    background-color: #FCE7F3;
}

.bg-rosado-3 {
    background-color: #FBCFE8;
}

.bg-rosado-4 {
    background-color: #F9A8D4;
}

.bg-rosado-5 {
    background-color: #F472B6;
}

.bg-rosado-6 {
    background-color: #EC4899;
}

.bg-rosado-7 {
    background-color: #DB2777;
}

.bg-rosado-8 {
    background-color: #BE185D;
}

.bg-rosado-9 {
    background-color: #9D174D;
}

.bg-rosado-10 {
    background-color: #831843;
}

/* ======================
        💧 CELESTES 
   ====================== */
.bg-celeste-1 {
    background-color: #ECFEFF;
}

.bg-celeste-2 {
    background-color: #CFFAFE;
}

.bg-celeste-3 {
    background-color: #A5F3FC;
}

.bg-celeste-4 {
    background-color: #67E8F9;
}

.bg-celeste-5 {
    background-color: #22D3EE;
}

.bg-celeste-6 {
    background-color: #06B6D4;
}

.bg-celeste-7 {
    background-color: #0891B2;
}

.bg-celeste-8 {
    background-color: #0E7490;
}

.bg-celeste-9 {
    background-color: #155E75;
}

.bg-celeste-10 {
    background-color: #164E63;
}

/* ======================
        🤎 MARRONES
   ====================== */
.bg-marron-1 {
    background-color: #EFEBE9;
}

.bg-marron-2 {
    background-color: #D7CCC8;
}

.bg-marron-3 {
    background-color: #BCAAA4;
}

.bg-marron-4 {
    background-color: #A1887F;
}

.bg-marron-5 {
    background-color: #8D6E63;
}

.bg-marron-6 {
    background-color: #795548;
}

.bg-marron-7 {
    background-color: #6D4C41;
}

.bg-marron-8 {
    background-color: #5D4037;
}

.bg-marron-9 {
    background-color: #4E342E;
}

.bg-marron-10 {
    background-color: #3E2723;
}