/* ========================================
   CSS CENTRALIZADO - PALETA PERSONALIZADA
   Fortalecimiento Academico
   ======================================== */

/* ==================== VARIABLES CSS ==================== */
:root {
    /* Nueva paleta */
    --color-primario:  #1844d8;
    --color-acento:    #e4fe67;
    --color-suave:     #89bad8;
    --color-oscuro:    #011530;

    /* Modo claro */
    --color-fondo-principal: #f4f7fc;
    --color-cards:           #ffffff;
    --color-fondo-alterno:   #e8eef8;

    --color-texto-principal:     #011530;
    --color-texto-secundario:    #3d5a80;
    --color-texto-deshabilitado: #7a9ab8;

    --color-bordes: #c5d5ea;
    --color-hover:  #dde8f8;

    /* Estados */
    --color-exito:       #22c55e;
    --color-error:       #ef4444;
    --color-advertencia: #f59e0b;
    --color-informacion: #1844d8;

    /* Sombras */
    --shadow-sm: 0 .125rem .25rem rgba(1,21,48,.07);
    --shadow:    0 .5rem 1rem rgba(1,21,48,.12);
    --shadow-lg: 0 1rem 3rem rgba(1,21,48,.15);

    /* Forma */
    --border-radius:    .5rem;
    --border-radius-lg: .75rem;

    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Fuente */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==================== MODO OSCURO ==================== */
[data-theme="dark"] {
    /* Variables propias */
    --color-fondo-principal: #010f22;
    --color-cards:           #011530;
    --color-fondo-alterno:   #0a2040;

    --color-texto-principal:     #e8f4ff;
    --color-texto-secundario:    #89bad8;
    --color-texto-deshabilitado: #4a6a8a;

    --color-bordes: #1a3a6a;
    --color-hover:  #0d2850;

    --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.35);
    --shadow:    0 .5rem 1rem rgba(0,0,0,.45);
    --shadow-lg: 0 1rem 3rem rgba(0,0,0,.55);

    /* Sincronizar variables de Bootstrap 5 con nuestro dark mode */
    --bs-body-color:               #e8f4ff;
    --bs-body-bg:                  #010f22;
    --bs-secondary-color:          #89bad8;
    --bs-tertiary-color:           #4a6a8a;
    --bs-heading-color:            #e8f4ff;
    --bs-link-color:               #89bad8;
    --bs-link-hover-color:         #e4fe67;
    --bs-border-color:             #1a3a6a;
    --bs-border-color-translucent: rgba(26,58,106,.5);
    --bs-card-bg:                  #011530;
    --bs-card-cap-bg:              #0a2040;
    --bs-card-color:               #e8f4ff;
    --bs-card-border-color:        #1a3a6a;
    --bs-modal-bg:                 #011530;
    --bs-modal-color:              #e8f4ff;
    --bs-modal-border-color:       #1a3a6a;
    --bs-modal-header-bg:          #0a2040;
    --bs-modal-footer-bg:          #0a2040;
    --bs-dropdown-bg:              #011530;
    --bs-dropdown-color:           #e8f4ff;
    --bs-dropdown-border-color:    #1a3a6a;
    --bs-dropdown-link-color:      #89bad8;
    --bs-dropdown-link-hover-bg:   #0d2850;
    --bs-dropdown-link-hover-color:#e8f4ff;
    --bs-list-group-bg:            #011530;
    --bs-list-group-color:         #e8f4ff;
    --bs-list-group-border-color:  #1a3a6a;
    --bs-input-bg:                 #0a2040;
    --bs-input-color:              #e8f4ff;
    --bs-input-border-color:       #1a3a6a;
    --bs-table-bg:                 #011530;
    --bs-table-color:              #e8f4ff;
    --bs-table-border-color:       #1a3a6a;
    --bs-table-striped-bg:         #0a2040;
    --bs-table-hover-bg:           #0d2850;
    --bs-pagination-bg:            #0a2040;
    --bs-pagination-border-color:  #1a3a6a;
    --bs-pagination-color:         #89bad8;
}

/* DataTables dark */
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--color-fondo-alterno);
    color: var(--color-texto-principal);
    border-color: var(--color-bordes);
}
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
[data-theme="dark"] .dataTables_wrapper .dataTables_length label {
    color: var(--color-texto-secundario);
}
[data-theme="dark"] .page-link {
    background-color: var(--color-fondo-alterno);
    border-color: var(--color-bordes);
    color: var(--color-texto-principal);
}
[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

/* Modal dark */
[data-theme="dark"] .modal-content  { background-color: var(--color-cards); }
[data-theme="dark"] .modal-header   { background-color: var(--color-fondo-alterno); }
[data-theme="dark"] .modal-footer   { background-color: var(--color-fondo-alterno); }
[data-theme="dark"] .modal-title    { color: var(--color-texto-principal); }
[data-theme="dark"] .btn-close      { filter: invert(1); }

/* Formularios dark */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--color-fondo-alterno);
    color: var(--color-texto-principal);
    border-color: var(--color-bordes);
}
[data-theme="dark"] .form-control::placeholder { color: var(--color-texto-deshabilitado); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--color-fondo-alterno);
    color: var(--color-texto-principal);
}
[data-theme="dark"] .input-group-text {
    background-color: var(--color-fondo-alterno);
    color: var(--color-texto-secundario);
    border-color: var(--color-bordes);
}

/* Dropdown dark */
[data-theme="dark"] .dropdown-menu  { background-color: var(--color-cards); border-color: var(--color-bordes); }
[data-theme="dark"] .dropdown-item  { color: var(--color-texto-principal); }
[data-theme="dark"] .dropdown-item:hover { background-color: var(--color-hover); }
[data-theme="dark"] .dropdown-divider { border-color: var(--color-bordes); }

/* Card header dark */
[data-theme="dark"] .card-header { background-color: var(--color-fondo-alterno); }

/* Alert dark */
[data-theme="dark"] .alert-info { color: var(--color-suave); }

/* ==================== ESTILOS GLOBALES ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-texto-principal);
    background-color: var(--color-fondo-principal);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color .3s, color .3s;
}

.main-content {
    flex: 1 0 auto;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    overflow-y: auto;
}

/* ==================== TIPOGRAFIA ==================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-texto-principal);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-texto-secundario);
}

a {
    color: var(--color-primario);
    text-decoration: none;
    transition: color .3s ease;
}
a:hover { color: var(--color-oscuro); }
[data-theme="dark"] a:hover { color: var(--color-acento); }

/* ==================== CARDS ==================== */
.card {
    border: 1px solid var(--color-bordes);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all .3s ease;
    background-color: var(--color-cards);
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.card-header {
    background-color: var(--color-fondo-alterno);
    border-bottom: 2px solid var(--color-primario);
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-texto-principal);
}
.card-body { padding: var(--spacing-md); }

/* ==================== BOTONES ==================== */
.btn {
    font-weight: 500;
    border-radius: var(--border-radius);
    padding: .625rem 1.25rem;
    transition: all .3s ease;
    border: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn i { margin-right: .5rem; }

.btn-primary { background-color: var(--color-primario); border-color: var(--color-primario); color: white; }
.btn-primary:hover, .btn-primary:focus { background-color: #1238b5; border-color: #1238b5; color: white; }

.btn-outline-primary {
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
    background: transparent;
}
.btn-outline-primary:hover { background-color: var(--color-primario); border-color: var(--color-primario); color: white; }

.btn-secondary { background-color: var(--color-texto-secundario); border-color: var(--color-texto-secundario); color: white; }
.btn-success   { background-color: var(--color-exito);       border-color: var(--color-exito); }
.btn-danger    { background-color: var(--color-error);        border-color: var(--color-error); }
.btn-warning   { background-color: var(--color-advertencia);  border-color: var(--color-advertencia); color: white; }
.btn-info      { background-color: var(--color-informacion);  border-color: var(--color-informacion); color: white; }

/* ==================== FORMULARIOS ==================== */
.form-control,
.form-select {
    border-radius: var(--border-radius);
    border: 1px solid var(--color-bordes);
    padding: .75rem 1rem;
    transition: all .3s ease;
    background-color: var(--color-cards);
    color: var(--color-texto-principal);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 .25rem rgba(24,68,216,.2);
    background-color: var(--color-cards);
    color: var(--color-texto-principal);
}
.form-label { font-weight: 500; margin-bottom: .5rem; color: var(--color-texto-principal); }
.invalid-feedback { font-size: .875rem; color: var(--color-error); }

/* ==================== ALERTAS ==================== */
.alert { border-radius: var(--border-radius); border: none; box-shadow: var(--shadow-sm); padding: 1rem 1.25rem; }
.alert i { margin-right: .5rem; }
.alert-success { background-color: rgba(34,197,94,.12);  color: #166534; border-left: 4px solid var(--color-exito); }
.alert-danger  { background-color: rgba(239,68,68,.12);  color: #991b1b; border-left: 4px solid var(--color-error); }
.alert-warning { background-color: rgba(245,158,11,.12); color: #92400e; border-left: 4px solid var(--color-advertencia); }
.alert-info    { background-color: rgba(24,68,216,.1);   color: var(--color-primario); border-left: 4px solid var(--color-primario); }

[data-theme="dark"] .alert-success { color: #86efac; }
[data-theme="dark"] .alert-danger  { color: #fca5a5; }
[data-theme="dark"] .alert-warning { color: #fde68a; }
[data-theme="dark"] .alert-info    { color: var(--color-suave); }

/* ==================== BADGES ==================== */
.badge { font-weight: 500; padding: .5em .75em; border-radius: var(--border-radius); }
.bg-primary { background-color: var(--color-primario)    !important; }
.bg-success { background-color: var(--color-exito)       !important; }
.bg-danger  { background-color: var(--color-error)       !important; }
.bg-warning { background-color: var(--color-advertencia) !important; }
.bg-info    { background-color: var(--color-informacion) !important; }

/* ==================== TABLAS ==================== */
.table {
    background-color: var(--color-cards);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    --bs-table-bg: var(--color-cards);
    --bs-table-color: var(--color-texto-principal);
    --bs-table-border-color: var(--color-bordes);
    --bs-table-striped-bg: var(--color-fondo-alterno);
    --bs-table-hover-bg: var(--color-hover);
}
.table thead,
.table thead.table-light,
.table thead.table-dark {
    background-color: var(--color-fondo-alterno);
    color: var(--color-texto-principal);
}
.table thead th,
.table thead.table-light th,
.table thead.table-dark th {
    font-weight: 600;
    border: none;
    padding: 1rem;
    border-bottom: 2px solid var(--color-primario);
    color: var(--color-texto-principal);
    background-color: var(--color-fondo-alterno);
}
.table tbody tr { transition: background-color .3s; border-bottom: 1px solid var(--color-bordes); }
.table tbody tr:hover { background-color: var(--color-hover); }
.table tbody td { padding: .875rem 1rem; color: var(--color-texto-secundario); }

/* Neutralizar table-light y table-dark en dark mode */
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light,
[data-theme="dark"] .table thead.table-light,
[data-theme="dark"] tr.table-light {
    --bs-table-color: var(--color-texto-principal);
    --bs-table-bg: var(--color-fondo-alterno);
    --bs-table-border-color: var(--color-bordes);
    background-color: var(--color-fondo-alterno) !important;
    color: var(--color-texto-principal) !important;
}
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td {
    background-color: var(--color-fondo-alterno) !important;
    color: var(--color-texto-principal) !important;
    border-color: var(--color-bordes) !important;
}

/* ==================== MODALES ==================== */
.modal-content {
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-bordes);
    box-shadow: var(--shadow-lg);
    background-color: var(--color-cards);
}
.modal-header {
    background-color: var(--color-fondo-alterno);
    border-bottom: 2px solid var(--color-primario);
    color: var(--color-texto-principal);
}
.modal-title { color: var(--color-texto-principal); }
.modal-footer { border-top: 1px solid var(--color-bordes); background-color: var(--color-fondo-principal); }

/* ==================== BREADCRUMB ==================== */
.breadcrumb { background-color: transparent; padding: 0; margin-bottom: var(--spacing-md); }
.breadcrumb-item { color: var(--color-texto-secundario); }
.breadcrumb-item.active { color: var(--color-primario); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { content: ">"; font-size: 1.1rem; color: var(--color-bordes); }

/* ==================== PROGRESS ==================== */
.progress { height: 1.5rem; border-radius: var(--border-radius); background-color: var(--color-fondo-alterno); }
.progress-bar { border-radius: var(--border-radius); font-weight: 600; background-color: var(--color-primario); }

/* ==================== LISTAS ==================== */
.list-group-item {
    border: 1px solid var(--color-bordes);
    transition: all .3s ease;
    background-color: var(--color-cards);
    color: var(--color-texto-principal);
}
.list-group-item:hover { background-color: var(--color-hover); transform: translateX(4px); }
.list-group-item.active { background-color: var(--color-primario); border-color: var(--color-primario); }

/* ==================== UTILITIES ==================== */
.text-primary  { color: var(--color-primario)            !important; }
.text-muted    { color: var(--color-texto-secundario)    !important; }
.text-disabled { color: var(--color-texto-deshabilitado) !important; }
.bg-light      { background-color: var(--color-fondo-alterno) !important; }

.bg-light-primary { background-color: rgba(24,68,216,.1) !important; }
.bg-light-success { background-color: rgba(34,197,94,.1) !important; }
.bg-light-danger  { background-color: rgba(239,68,68,.1) !important; }
.bg-light-warning { background-color: rgba(245,158,11,.1) !important; }

.border-primary { border-color: var(--color-primario) !important; }
.border-light   { border-color: var(--color-bordes)   !important; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .main-content { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
    .card-body    { padding: var(--spacing-sm); }
    .table        { font-size: .875rem; }
}

/* ==================== ANIMACIONES ==================== */
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse     { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .8; transform: scale(.95); } }
@keyframes spin      { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.fade-in     { animation: fadeIn    .5s ease-in; }
.slide-in-up { animation: slideInUp .5s ease-out; }
.pulse       { animation: pulse 2s infinite; }

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-fondo-alterno); }
::-webkit-scrollbar-thumb { background: var(--color-suave); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primario); }

/* ==================== LOADING ==================== */
.spinner-custom {
    border: 3px solid var(--color-fondo-alterno);
    border-top: 3px solid var(--color-primario);
    border-radius: 50%;
    width: 40px; height: 40px;
    animation: spin 1s linear infinite;
}

/* ==================== PRINT ==================== */
@media print {
    .navbar, .footer, .btn, .no-print { display: none !important; }
    .main-content { padding: 0; }
    .card { box-shadow: none; border: 1px solid var(--color-bordes); }
}

/* ==================== TOOLTIPS ==================== */
.tooltip .tooltip-inner        { background-color: var(--color-oscuro); border-radius: var(--border-radius); }
.tooltip .tooltip-arrow::before { border-top-color: var(--color-oscuro); }

/* ==================== DARK MODE - OVERRIDES GLOBALES ==================== */
/* Fuerza fondo y texto en elementos que usan clases Bootstrap directas */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light  { background-color: var(--color-cards) !important; }

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black { color: var(--color-texto-principal) !important; }

[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top { border-color: var(--color-bordes) !important; }

/* Listas grupo */
[data-theme="dark"] .list-group-item-action:hover { background-color: var(--color-hover); color: var(--color-texto-principal); }
[data-theme="dark"] .list-group-item { color: var(--color-texto-principal); background-color: var(--color-cards); border-color: var(--color-bordes); }

/* Tabs */
[data-theme="dark"] .nav-tabs { border-color: var(--color-bordes); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--color-texto-secundario); border-color: transparent; }
[data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--color-primario); border-color: var(--color-bordes); background: var(--color-hover); }
[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--color-primario); background-color: var(--color-cards); border-color: var(--color-bordes) var(--color-bordes) var(--color-cards); }
[data-theme="dark"] .tab-content { background-color: var(--color-cards); }

/* Badges con clases Bootstrap */
[data-theme="dark"] .badge.bg-light { background-color: var(--color-fondo-alterno) !important; color: var(--color-texto-principal) !important; }
[data-theme="dark"] .badge.text-dark { color: var(--color-texto-principal) !important; }

/* Pre / code blocks */
[data-theme="dark"] pre { background-color: #000d20; color: #e2e8f0; border-color: var(--color-bordes); }

/* Accordion */
[data-theme="dark"] .accordion-item   { background-color: var(--color-cards); border-color: var(--color-bordes); }
[data-theme="dark"] .accordion-button { background-color: var(--color-fondo-alterno); color: var(--color-texto-principal); }
[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(24,68,216,.15); color: var(--color-primario); }
[data-theme="dark"] .accordion-body   { background-color: var(--color-cards); color: var(--color-texto-secundario); }

/* Breadcrumb dark */
[data-theme="dark"] .breadcrumb-item { color: var(--color-texto-secundario); }
[data-theme="dark"] .breadcrumb-item a { color: var(--color-suave); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--color-primario); }
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--color-bordes); }

/* Cards específicas dark */
[data-theme="dark"] .card-footer { background-color: var(--color-fondo-alterno); border-top-color: var(--color-bordes); }

/* Stat icons con rgba - se adaptan solos por usar rgba */
/* Quick action cards */
[data-theme="dark"] .quick-action-card { background-color: var(--color-cards); border-color: var(--color-bordes); }
[data-theme="dark"] .quick-action-card:hover { background-color: rgba(24,68,216,.08); }

/* Activity items */
[data-theme="dark"] .activity-item { border-bottom-color: var(--color-bordes); }
[data-theme="dark"] .activity-item:hover { background-color: var(--color-hover); }