/* Estilos Generales */
/* Aplica la fuente a todo el documento */
body, 
.content-wrapper, 
.main-sidebar, 
.main-header, 
.sidebar, 
.sidebar-mini, 
.brand-link,
.navbar,
.nav-link,
.btn, 
.card, 
.breadcrumb,
.table, 
.form-control {
    font-family: 'Andika New Basic', sans-serif !important;
}

:root {
    --color-verde: #28a745;
    --color-rojo: #dc3545;
    --color-amarillo: #ffc107;
    --color-azul: #17a2b8;
}


body.modo-claro {
    --color-primario: #19328c;
    --color-secundario: #ef8e01;
    --color-resaltado: #3a5ba0;
    --color-blanco: #ffffff;
    --color-verde: #075a1b;
    --color-amarillo: #f0ec1d;
    --color-rojo: #fd0404;
    --color-azul: #3a5ba0;
    --color-texto: #333;
    --color-negro: #333;
    --color-gris: #f1f1f1;
    --color-borde: #ddd;
    --color-hover: #ef8e01;
}

body.modo-oscuro {
    --color-primario: #0d1117;
    --color-secundario: #161b22;
    --color-resaltado: #58a6ff;
    --color-blanco: #ffffff;
    --color-texto: #c9d1d9;
    --color-negro: #333;
    --color-borde: #30363d;
    --color-hover: #21262d;
    --color-verde: #075a1b;
    --color-amarillo: #f0ec1d;
    --color-rojo: #fd0404;
    --color-azul: #3a5ba0;
}

.navbar-nav{
    color: var(--color-blanco);
}


/* Fondo y color de texto para el cuerpo */
body.modo-claro {
    background-color: var(--color-blanco);
    color: var(--color-texto);
}

body.modo-oscuro {
    background-color: var(--color-primario);
    color: var(--color-texto);
}

/* AdminLTE Sidebar */
/* Sidebar - Modo Claro */
body.modo-claro .main-sidebar {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

body.modo-claro .main-sidebar .sidebar {
    background-color: var(--color-primario);
}

body.modo-claro .main-sidebar .sidebar .user-panel {
    background-color: var(--color-primario);
    border-bottom: 1px solid var(--color-borde);
}

body.modo-claro .main-sidebar .sidebar .user-panel .info {
    color: var(--color-blanco);
}

body.modo-claro .main-sidebar .sidebar .nav-link {
    color: var(--color-blanco);
    background-color: transparent;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

body.modo-claro .main-sidebar .sidebar .nav-link:hover {
    background-color: var(--color-hover);
    color: var(--color-blanco);
}

body.modo-claro .main-sidebar .sidebar .nav-link.active {
    background-color: var(--color-secundario);
    border-left-color: var(--color-secundario);
    color: var(--color-blanco);
}

/* Sidebar Menu Header */
body.modo-claro .main-sidebar .sidebar .nav-header {
    color: var(--color-gris);
    padding: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Sidebar Submenus */
body.modo-claro .main-sidebar .sidebar .nav-treeview .nav-link {
    background-color: var(--color-gris);
    color: var(--color-texto);
}

body.modo-claro .main-sidebar .sidebar .nav-treeview .nav-link:hover {
    background-color: var(--color-hover);
    color: var(--color-blanco);
}

/* Sidebar - Modo Oscuro */
body.modo-oscuro .main-sidebar {
    background-color: var(--color-secundario);
    color: var(--color-texto);
}

body.modo-oscuro .main-sidebar .sidebar {
    background-color: var(--color-secundario);
}

body.modo-oscuro .main-sidebar .sidebar .user-panel {
    background-color: var(--color-secundario);
    border-bottom: 1px solid var(--color-borde);
}

body.modo-oscuro .main-sidebar .sidebar .user-panel .info {
    color: var(--color-texto);
}

body.modo-oscuro .main-sidebar .sidebar .nav-link {
    color: var(--color-texto);
    background-color: transparent;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

body.modo-oscuro .main-sidebar .sidebar .nav-link:hover {
    background-color: var(--color-hover);
    color: var(--color-blanco);
}

body.modo-oscuro .main-sidebar .sidebar .nav-link.active {
    background-color: var(--color-resaltado);
    border-left-color: var(--color-resaltado);
    color: var(--color-blanco);
}

/* Sidebar Menu Header */
body.modo-oscuro .main-sidebar .sidebar .nav-header {
    color: var(--color-texto);
    padding: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Sidebar Submenus */
body.modo-oscuro .main-sidebar .sidebar .nav-treeview .nav-link {
    background-color: var(--color-secundario);
    color: var(--color-texto);
}

body.modo-oscuro .main-sidebar .sidebar .nav-treeview .nav-link:hover {
    background-color: var(--color-hover);
    color: var(--color-blanco);
}

/* Iconos del Sidebar */
body.modo-claro .main-sidebar .sidebar .nav-icon,
body.modo-oscuro .main-sidebar .sidebar .nav-icon {
    color: var(--color-blanco);
}

body.modo-oscuro .main-sidebar .sidebar .nav-icon {
    color: var(--color-resaltado);
}

/* Content Wrapper - Modo Claro */
body.modo-claro .content-wrapper {
    background-color: var(--color-blanco);
    color: var(--color-texto);
}

body.modo-claro .content-wrapper .content-header {
    background-color: var(--color-gris);
    border-bottom: 1px solid var(--color-borde);
}

body.modo-claro .content-wrapper .content-header h1,
body.modo-claro .content-wrapper .content-header .breadcrumb-item {
    color: var(--color-primario);
}

body.modo-claro .content-wrapper .content {
    background-color: var(--color-blanco);
    color: var(--color-texto);
}

/* Content Wrapper - Modo Oscuro */
body.modo-oscuro .content-wrapper {
    background-color: var(--color-secundario);
    color: var(--color-texto);
}

body.modo-oscuro .content-wrapper .content-header {
    background-color: var(--color-primario);
    border-bottom: 1px solid var(--color-borde);
}

body.modo-oscuro .content-wrapper .content-header h1,
body.modo-oscuro .content-wrapper .content-header .breadcrumb-item {
    color: var(--color-resaltado);
}

body.modo-oscuro .content-wrapper .content {
    background-color: var(--color-secundario);
    color: var(--color-texto);
}

.bg-secundario{
    background-color: var(--color-secundario) !important;
}

/* AdminLTE Navbar */
.navbar {
    background-color: var(--color-primario) !important;
}

.navbar a {
    color: var(--color-blanco) !important;
}

.navbar a:hover {
    color: var(--color-resaltado) !important;
}

/* Tarjetas */
.card {
    background-color: var(--color-gris);
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.modo-oscuro .card {
    background-color: var(--color-secundario);
    border-color: var(--color-borde);
}

/* Botones */
.btn-primary {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border-color: var(--color-primario);
}

.btn-primary:hover {
    background-color: var(--color-hover);
    border-color: var(--color-hover);
}

.btn-secondary {
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border-color: var(--color-secundario);
}

.btn-secondary:hover {
    background-color: var(--color-resaltado);
    border-color: var(--color-resaltado);
}

/* Tablas */
.table {
    color: var(--color-texto);
    background-color: var(--color-blanco);
}

body.modo-oscuro .table {
    background-color: var(--color-primario);
    color: var(--color-texto);
}

.table thead {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

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

/* Formularios */
.form-control {
    background-color: var(--color-blanco);
    color: var(--color-texto);
    border-color: var(--color-borde);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.modo-oscuro .form-control {
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border-color: var(--color-borde);
}

/* Modales */
.modal-content {
    background-color: var(--color-gris);
    color: var(--color-texto);
}

body.modo-oscuro .modal-content {
    background-color: var(--color-secundario);
    color: var(--color-blanco);
}

/* Notificaciones */
.alert {
    color: var(--color-texto);
}

.alert-primary {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

.alert-secondary {
    background-color: var(--color-secundario);
    color: var(--color-blanco);
}

body.modo-oscuro .alert {
    color: var(--color-blanco);
}

/* DataTable - Modo Claro */
body.modo-claro .dataTable {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff; /* Fondo blanco para la tabla */
    color: #333333;              /* Texto oscuro */
}

body.modo-claro .dataTable th,
body.modo-claro .dataTable td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;     /* Borde claro para las celdas */
}

body.modo-claro .dataTable th {
    background-color: #f4f4f4;   /* Fondo claro para los encabezados */
    color: #333333;               /* Texto oscuro */
}

body.modo-claro .dataTable tbody tr:nth-child(even) {
    background-color: #f9f9f9;   /* Fila par con fondo gris claro */
    color: #000000;              /* Texto oscuro */
}

body.modo-claro .dataTable tbody tr:nth-child(odd) {
    background-color: #ffffff;   /* Fila impar con fondo blanco */
    color: #000000;              /* Texto oscuro */
}

body.modo-claro .dataTable tbody tr:hover {
    background-color: #efefef;   /* Fondo resaltado al pasar el mouse */
    color: #000000;              /* Texto oscuro */
}

body.modo-claro .dataTable .paginate_button {
    background-color: #ffffff;   /* Fondo de botones de paginación */
    color: #333333;              /* Texto oscuro */
    border: 1px solid #ddd;     /* Borde gris claro */
}

body.modo-claro .dataTable .paginate_button:hover {
    background-color: #f1f1f1;   /* Fondo de los botones al pasar el mouse */
    color: #333333;              /* Texto oscuro */
}

/* General - Fondo oscuro y texto claro */
body.modo-oscuro .dataTable {
    width: 100%;
    border-collapse: collapse;
    background-color: #161b22 !important; /* Fondo oscuro para la tabla */
    color: #ffffff !important;            /* Texto blanco */
}

/* Celdas - Asegurar el texto blanco */
body.modo-oscuro .dataTable th,
body.modo-oscuro .dataTable td {
    background-color: #161b22 !important; /* Fondo oscuro para todas las celdas */
    color: #ffffff !important;            /* Texto blanco */
    border: 1px solid #30363d;            /* Borde oscuro */
    padding: 10px;
    text-align: left;
}

/* Encabezados */
body.modo-oscuro .dataTable th {
    background-color: #2d333b !important; /* Fondo oscuro para encabezados */
    color: #ffffff !important;            /* Texto blanco */
}

/* Filas pares e impares */
body.modo-oscuro .dataTable tbody tr:nth-child(even) {
    background-color: #21262d !important; /* Fondo gris oscuro */
    color: #ffffff !important;            /* Texto blanco */
}

body.modo-oscuro .dataTable tbody tr:nth-child(odd) {
    background-color: #161b22 !important; /* Fondo negro */
    color: #ffffff !important;            /* Texto blanco */
}

/* Filas al pasar el mouse */
body.modo-oscuro .dataTable tbody tr:hover {
    background-color: #3b444f !important; /* Fondo resaltado */
    color: #ffffff !important;            /* Texto blanco */
}

/* Responsive - Filas desplegables */
body.modo-oscuro .dataTable tbody tr.child {
    background-color: #161b22 !important; /* Fondo oscuro */
    color: #ffffff !important;            /* Texto blanco */
}

/* Íconos de control (flechas para expandir) */
body.modo-oscuro table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before {
    color: #ffffff !important;            /* Flecha de control blanco */
}

/* Botones de paginación */
body.modo-oscuro .dataTable .paginate_button {
    background-color: #161b22 !important; /* Fondo oscuro para los botones */
    color: #ffffff !important;            /* Texto blanco */
    border: 1px solid #30363d !important; /* Borde gris oscuro */
}

body.modo-oscuro .dataTable .paginate_button:hover {
    background-color: #3b444f !important; /* Fondo resaltado */
    color: #ffffff !important;            /* Texto blanco */
}



/* SweetAlert - Modo Claro */
body.modo-claro .swal2-popup {
    background-color: var(--color-blanco);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
}

body.modo-claro .swal2-title {
    color: var(--color-primario);
}

body.modo-claro .swal2-confirm,
body.modo-claro .swal2-cancel {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s;
}

body.modo-claro .swal2-confirm:hover,
body.modo-claro .swal2-cancel:hover {
    background-color: var(--color-hover);
}

/* SweetAlert - Modo Oscuro */
body.modo-oscuro .swal2-popup {
    background-color: var(--color-primario);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
}

body.modo-oscuro .swal2-title {
    color: var(--color-resaltado);
}

body.modo-oscuro .swal2-confirm,
body.modo-oscuro .swal2-cancel {
    background-color: var(--color-resaltado);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s;
}

body.modo-oscuro .swal2-confirm:hover,
body.modo-oscuro .swal2-cancel:hover {
    background-color: var(--color-hover);
}

/* Íconos de SweetAlert */
.swal2-icon {
    border-color: var(--color-secundario);
}

/* Estilos para modo claro y oscuro de SweetAlert */
body.modo-claro .swal2-icon.swal2-success [class^="swal2-success-line"],
body.modo-oscuro .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--color-verde);
}

body.modo-claro .swal2-icon.swal2-error [class^="swal2-error-line"],
body.modo-oscuro .swal2-icon.swal2-error [class^="swal2-error-line"] {
    background-color: var(--color-rojo);
}

body.modo-claro .swal2-icon.swal2-warning,
body.modo-oscuro .swal2-icon.swal2-warning {
    color: var(--color-amarillo);
}

body.modo-claro .swal2-icon.swal2-info,
body.modo-oscuro .swal2-icon.swal2-info {
    color: var(--color-azul);
    border-color: var(--color-azul);
}

body.modo-claro .swal2-icon.swal2-info [class^="swal2-info-line"],
body.modo-oscuro .swal2-icon.swal2-info [class^="swal2-info-line"] {
    background-color: var(--color-azul);
}

.swal2-html-container {
    text-align: center; 
    font-size: 16px;
    word-wrap: break-word; 
    max-width: 100%; 
}

.bg-primario{
    background-color: var(--color-primario)!important;
}