: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;
}