/* =========================================
   MODO OSCURO - UNIFICADO Y OPTIMIZADO
   ========================================= */

/* ------------------------------------------------------------
   1. VARIABLES Y ESTRUCTURA BASE
   ------------------------------------------------------------ */
html[data-theme="dark"],
body.dark-mode {
    --bg-app: #0b1120;
    --card-bg: #162032;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --primary: #3b82f6;
    --primary-light: #1e293b;
    --primary-hover: #2563eb;
    --secondary: #38bdf8;
    --success: #34d399;
    --success-bg: #064e3b;
    --success-text: #6ee7b7;
    --danger: #f87171;
    --danger-bg: #4c0519;
    --danger-text: #fca5a5;
    --warning: #fbbf24;
    --warning-bg: #78350f;
    --warning-text: #fcd34d;
    --info: #67e8f9;
    --info-bg: #164e63;
    --info-text: #a5f3fc;
    --border-color: #2d3b52;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.5);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="dark"] body,
body.dark-mode {
    background-color: var(--bg-app) !important;
    color: var(--text-primary) !important;
}

/* ------------------------------------------------------------
   2. COMPONENTES GLOBALES (menú, tablas, botones, inputs, badges)
   ------------------------------------------------------------ */
html[data-theme="dark"] .container-menu,
body.dark-mode .container-menu,
html[data-theme="dark"] .container-body,
body.dark-mode .container-body,
html[data-theme="dark"] .aviso-user,
body.dark-mode .aviso-user,
html[data-theme="dark"] fieldset,
body.dark-mode fieldset,
html[data-theme="dark"] .profile-card,
body.dark-mode .profile-card,
html[data-theme="dark"] .alert-custom,
body.dark-mode .alert-custom,
html[data-theme="dark"] .card-module,
body.dark-mode .card-module,
html[data-theme="dark"] .card-panel,
body.dark-mode .card-panel,
html[data-theme="dark"] .card-panel-body,
body.dark-mode .card-panel-body,
html[data-theme="dark"] #dialog-message,
body.dark-mode #dialog-message,
html[data-theme="dark"] .responsive-table-wrapper,
body.dark-mode .responsive-table-wrapper,
html[data-theme="dark"] .styled-table,
body.dark-mode .styled-table,
html[data-theme="dark"] .panel-egresados-card,
body.dark-mode .panel-egresados-card,
html[data-theme="dark"] .wrapper-tabla-egresados,
body.dark-mode .wrapper-tabla-egresados,
html[data-theme="dark"] .seccion-enlaces,
body.dark-mode .seccion-enlaces,
html[data-theme="dark"] .columna-formulario,
body.dark-mode .columna-formulario,
html[data-theme="dark"] .columna-visor,
body.dark-mode .columna-visor,
html[data-theme="dark"] .columna-vacia,
body.dark-mode .columna-vacia,
html[data-theme="dark"] .aviso-requisitos-card,
body.dark-mode .aviso-requisitos-card,
html[data-theme="dark"] .info,
body.dark-mode .info,
html[data-theme="dark"] #regster,
body.dark-mode #regster,
html[data-theme="dark"] .reg-performance,
body.dark-mode .reg-performance,
html[data-theme="dark"] .datagrid table,
body.dark-mode .datagrid table {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .info_panel,
body.dark-mode .info_panel,
html[data-theme="dark"] .title-aviso,
body.dark-mode .title-aviso,
html[data-theme="dark"] .aviso-menu,
body.dark-mode .aviso-menu,
html[data-theme="dark"] .profile-card .info-section h2,
body.dark-mode .profile-card .info-section h2,
html[data-theme="dark"] .profile-card h2,
body.dark-mode .profile-card h2,
html[data-theme="dark"] .profile-card p,
body.dark-mode .profile-card p,
html[data-theme="dark"] .profile-card strong,
body.dark-mode .profile-card strong,
html[data-theme="dark"] .aviso-body p,
body.dark-mode .aviso-body p,
html[data-theme="dark"] .fila-input label,
body.dark-mode .fila-input label,
html[data-theme="dark"] .styled-table th,
body.dark-mode .styled-table th,
html[data-theme="dark"] .styled-table td,
body.dark-mode .styled-table td,
html[data-theme="dark"] #tablaEgresados td,
body.dark-mode #tablaEgresados td {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .text-muted,
body.dark-mode .text-muted,
html[data-theme="dark"] .dataTables_info,
body.dark-mode .dataTables_info,
html[data-theme="dark"] .container-footer,
body.dark-mode .container-footer,
html[data-theme="dark"] .columna-vacia,
body.dark-mode .columna-vacia,
html[data-theme="dark"] .columna-vacia p,
body.dark-mode .columna-vacia p,
html[data-theme="dark"] .aviso-footer-text,
body.dark-mode .aviso-footer-text {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .info-intro,
body.dark-mode .info-intro,
html[data-theme="dark"] .card-body,
body.dark-mode .card-body,
html[data-theme="dark"] .card-module .card-body,
body.dark-mode .card-module .card-body,
html[data-theme="dark"] .links-list li a,
body.dark-mode .links-list li a,
html[data-theme="dark"] .responsive-table table td,
body.dark-mode .responsive-table table td,
html[data-theme="dark"] .responsive-table-notif td,
body.dark-mode .responsive-table-notif td,
html[data-theme="dark"] .responsive-table-notif td ul,
body.dark-mode .responsive-table-notif td ul,
html[data-theme="dark"] .responsive-table-notif td ul li,
body.dark-mode .responsive-table-notif td ul li,
html[data-theme="dark"] #dialog-message p,
body.dark-mode #dialog-message p,
html[data-theme="dark"] #regster td,
body.dark-mode #regster td,
html[data-theme="dark"] .reg-performance td,
body.dark-mode .reg-performance td,
html[data-theme="dark"] .reg-saberes td,
body.dark-mode .reg-saberes td,
html[data-theme="dark"] .main-dashboard p,
body.dark-mode .main-dashboard p {
    color: var(--text-secondary) !important;
}

/* --- Tablas --- */
html[data-theme="dark"] table.dataTable,
body.dark-mode table.dataTable,
html[data-theme="dark"] .responsive-table-notif table,
body.dark-mode .responsive-table-notif table {
    border-color: var(--border-color) !important;
    background: transparent !important;
}

html[data-theme="dark"] table.dataTable th,
body.dark-mode table.dataTable th,
html[data-theme="dark"] .responsive-table table th,
body.dark-mode .responsive-table table th,
html[data-theme="dark"] .card-panel-header,
body.dark-mode .card-panel-header,
html[data-theme="dark"] .responsive-table-notif th,
body.dark-mode .responsive-table-notif th,
html[data-theme="dark"] #regster td.title-table,
body.dark-mode #regster td.title-table,
html[data-theme="dark"] .reg-performance .title-table,
body.dark-mode .reg-performance .title-table,
html[data-theme="dark"] fieldset legend,
body.dark-mode fieldset legend {
    background: #1e2a45 !important;
    color: #e2e8f0 !important;
    border-color: var(--border-color) !important;
    font-weight: 700;
}

html[data-theme="dark"] table.dataTable td,
body.dark-mode table.dataTable td {
    color: var(--text-secondary) !important;
    border-bottom-color: #1e293b !important;
}

html[data-theme="dark"] table.dataTable tbody tr:nth-child(even),
body.dark-mode table.dataTable tbody tr:nth-child(even),
html[data-theme="dark"] .responsive-table table tr:nth-child(even) td,
body.dark-mode .responsive-table table tr:nth-child(even) td {
    background-color: #0f172a !important;
}

html[data-theme="dark"] table.dataTable tbody tr:nth-child(odd),
body.dark-mode table.dataTable tbody tr:nth-child(odd),
html[data-theme="dark"] table.dataTable tbody,
body.dark-mode table.dataTable tbody,
html[data-theme="dark"] .responsive-table table,
body.dark-mode .responsive-table table {
    background-color: #1e293b !important;
}

/* --- Botones de acción y enlaces generales --- */
html[data-theme="dark"] .link-accion,
body.dark-mode .link-accion,
html[data-theme="dark"] .btn-accion,
body.dark-mode .btn-accion,
html[data-theme="dark"] a.link-accion,
body.dark-mode a.link-accion,
html[data-theme="dark"] a.btn-accion,
body.dark-mode a.btn-accion,
html[data-theme="dark"] .button:not(.primary),
body.dark-mode .button:not(.primary),
html[data-theme="dark"] input[type="button"]:not([type="submit"]),
body.dark-mode input[type="button"]:not([type="submit"]),
html[data-theme="dark"] .nav-theme-toggle,
body.dark-mode .nav-theme-toggle,
html[data-theme="dark"] .nav-logout-btn,
body.dark-mode .nav-logout-btn,
html[data-theme="dark"] .btn-return,
body.dark-mode .btn-return,
html[data-theme="dark"] .btn-success button,
body.dark-mode .btn-success button,
html[data-theme="dark"] .btn-success button[style*="height: 50px;"],
body.dark-mode .btn-success button[style*="height: 50px;"] {
    background: #1e293b !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    padding: 6px 12px;
    transition: all 0.2s ease;
}

html[data-theme="dark"] .link-accion:hover,
body.dark-mode .link-accion:hover,
html[data-theme="dark"] .btn-accion:hover,
body.dark-mode .btn-accion:hover,
html[data-theme="dark"] .button:not(.primary):hover,
body.dark-mode .button:not(.primary):hover,
html[data-theme="dark"] input[type="button"]:not([type="submit"]):hover,
body.dark-mode input[type="button"]:not([type="submit"]):hover,
html[data-theme="dark"] .nav-theme-toggle:hover,
body.dark-mode .nav-theme-toggle:hover,
html[data-theme="dark"] .nav-logout-btn:hover,
body.dark-mode .nav-logout-btn:hover,
html[data-theme="dark"] .btn-return:hover,
body.dark-mode .btn-return:hover,
html[data-theme="dark"] .btn-success button:hover,
body.dark-mode .btn-success button:hover,
html[data-theme="dark"] .btn-success button[style*="height: 50px;"]:hover,
body.dark-mode .btn-success button[style*="height: 50px;"]:hover {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary-hover) !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
    transform: translateY(-1px);
}

html[data-theme="dark"] .link-accion img,
body.dark-mode .link-accion img,
html[data-theme="dark"] .btn-accion img,
body.dark-mode .btn-accion img,
html[data-theme="dark"] .btn-return img,
body.dark-mode .btn-return img,
html[data-theme="dark"] .dashboard-wrapper h5 img,
body.dark-mode .dashboard-wrapper h5 img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.8;
}

html[data-theme="dark"] .link-accion:hover img,
body.dark-mode .link-accion:hover img,
html[data-theme="dark"] .btn-accion:hover img,
body.dark-mode .btn-accion:hover img,
html[data-theme="dark"] .btn-return:hover img,
body.dark-mode .btn-return:hover img {
    opacity: 1;
}

/* --- Menú lateral --- */
html[data-theme="dark"] #cssmenu>ul>li>a,
body.dark-mode #cssmenu>ul>li>a {
    color: var(--text-secondary) !important;
    border-radius: 6px;
}
html[data-theme="dark"] #cssmenu>ul>li>a:hover,
body.dark-mode #cssmenu>ul>li>a:hover {
    background: var(--primary-light) !important;
    color: #60a5fa !important;
}
html[data-theme="dark"] #cssmenu>ul>li.active>a,
body.dark-mode #cssmenu>ul>li.active>a {
    background: var(--primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}
html[data-theme="dark"] #cssmenu ul ul,
body.dark-mode #cssmenu ul ul {
    background: #0b1120 !important;
}
html[data-theme="dark"] #cssmenu ul ul li a,
body.dark-mode #cssmenu ul ul li a {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] #cssmenu ul ul li a:hover,
body.dark-mode #cssmenu ul ul li a:hover {
    background: var(--primary-light) !important;
    color: #60a5fa !important;
}

/* --- Inputs, selects, textarea --- */
html[data-theme="dark"] input[type="text"],
body.dark-mode input[type="text"],
html[data-theme="dark"] input[type="password"],
body.dark-mode input[type="password"],
html[data-theme="dark"] input[type="email"],
body.dark-mode input[type="email"],
html[data-theme="dark"] input[type="number"],
body.dark-mode input[type="number"],
html[data-theme="dark"] input[type="search"],
body.dark-mode input[type="search"],
html[data-theme="dark"] input[type="date"],
body.dark-mode input[type="date"],
html[data-theme="dark"] select,
body.dark-mode select,
html[data-theme="dark"] textarea,
body.dark-mode textarea,
html[data-theme="dark"] .form-busqueda-grid input,
body.dark-mode .form-busqueda-grid input,
html[data-theme="dark"] .dataTables_wrapper select,
body.dark-mode .dataTables_wrapper select,
html[data-theme="dark"] .dataTables_wrapper input,
body.dark-mode .dataTables_wrapper input,
html[data-theme="dark"] .input-cedula-corto,
body.dark-mode .input-cedula-corto {
    background-color: #0f172a !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] input:focus,
body.dark-mode input:focus,
html[data-theme="dark"] select:focus,
body.dark-mode select:focus,
html[data-theme="dark"] textarea:focus,
body.dark-mode textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.3) !important;
}

/* --- Botones primarios y de envío --- */
html[data-theme="dark"] .button.primary,
body.dark-mode .button.primary,
html[data-theme="dark"] input[type="submit"],
body.dark-mode input[type="submit"],
html[data-theme="dark"] .btn-carnet,
body.dark-mode .btn-carnet {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.2);
}

html[data-theme="dark"] .button.primary:hover,
body.dark-mode .button.primary:hover,
html[data-theme="dark"] input[type="submit"]:hover,
body.dark-mode input[type="submit"]:hover,
html[data-theme="dark"] .btn-carnet:hover,
body.dark-mode .btn-carnet:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.4);
}

/* --- Badges y Alertas Genéricas --- */
html[data-theme="dark"] .info-sucess,
body.dark-mode .info-sucess {
    background: var(--success-bg) !important;
    color: var(--success-text) !important;
}

html[data-theme="dark"] .info-danger,
body.dark-mode .info-danger,
html[data-theme="dark"] .card-module .info-danger,
body.dark-mode .card-module .info-danger {
    background: var(--danger-bg) !important;
    color: var(--danger-text) !important;
    padding: 2px 10px;
    border-radius: 12px;
}

html[data-theme="dark"] .info-good,
body.dark-mode .info-good,
html[data-theme="dark"] .card-module .info-good,
body.dark-mode .card-module .info-good {
    background: var(--info-bg) !important;
    color: var(--info-text) !important;
    padding: 2px 10px;
    border-radius: 12px;
}

html[data-theme="dark"] .info-curso,
body.dark-mode .info-curso,
html[data-theme="dark"] .info-oferta,
body.dark-mode .info-oferta {
    background: var(--warning-bg) !important;
    color: var(--warning-text) !important;
}

html[data-theme="dark"] .badge,
body.dark-mode .badge {
    background: var(--primary-light) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .badge-active,
body.dark-mode .badge-active {
    background: var(--success-bg) !important;
    color: var(--success-text) !important;
}

html[data-theme="dark"] .badge-danger,
body.dark-mode .badge-danger,
html[data-theme="dark"] .profile-card .badge-danger,
body.dark-mode .profile-card .badge-danger {
    background: var(--danger-bg) !important;
    color: var(--danger-text) !important;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    display: inline-block;
}

html[data-theme="dark"] .badge-warning,
body.dark-mode .badge-warning {
    background: var(--warning-bg) !important;
    color: var(--warning-text) !important;
}

/* ------------------------------------------------------------
   3. CLASE .aviso-importante
   ------------------------------------------------------------ */
.aviso-importante {
    color: #000000 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
    background: #f1f5f9 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border-left: 4px solid #000000 !important;
}
html[data-theme="dark"] .aviso-importante,
body.dark-mode .aviso-importante {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.95) !important;
    background: #0f172a !important;
    border-left: 4px solid #3b82f6 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
}

/* ------------------------------------------------------------
   4. MÓDULOS ESPECÍFICOS Y COMPONENTES DE DASHBOARDS
   ------------------------------------------------------------ */
html[data-theme="dark"] .main-dashboard,
body.dark-mode .main-dashboard,
html[data-theme="dark"] .dashboard-wrapper,
body.dark-mode .dashboard-wrapper {
    background: var(--bg-app) !important;
    color: var(--text-primary);
}

html[data-theme="dark"] .welcome-card,
body.dark-mode .welcome-card {
    background: var(--card-bg);
    border-left-color: var(--primary);
    box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .welcome-card h4,
body.dark-mode .welcome-card h4,
html[data-theme="dark"] .columna-formulario h3,
body.dark-mode .columna-formulario h3,
html[data-theme="dark"] .columna-visor h4,
body.dark-mode .columna-visor h4,
html[data-theme="dark"] .columna-vacia h4,
body.dark-mode .columna-vacia h4 {
    color: #60a5fa !important;
}

html[data-theme="dark"] .welcome-card p,
body.dark-mode .welcome-card p {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .intensivos-badge,
body.dark-mode .intensivos-badge {
    background: #4c0519;
    color: #fca5a5;
    border-color: #881337;
}

html[data-theme="dark"] .card-panel .card-panel-header,
body.dark-mode .card-panel .card-panel-header {
    background: #1e3a6f !important;
    color: #ffffff !important;
    font-weight: 700;
}

html[data-theme="dark"] .card-panel .alert-link,
body.dark-mode .card-panel .alert-link {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

html[data-theme="dark"] .card-panel .alert-link:hover,
body.dark-mode .card-panel .alert-link:hover {
    background: #2d3b52 !important;
    border-color: var(--primary) !important;
    transform: translateX(4px);
}

html[data-theme="dark"] .card-panel .val-badge,
body.dark-mode .card-panel .val-badge {
    background: #e11d48 !important;
    color: #ffffff !important;
    font-weight: 800;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
}

html[data-theme="dark"] .card-panel .alert-link.bg-empty,
body.dark-mode .card-panel .alert-link.bg-empty {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #1e293b !important;
    font-style: italic;
}

html[data-theme="dark"] .error-msj,
body.dark-mode .error-msj {
    background: #2d1b2b;
    color: #fca5a5;
    border: 1px solid #4c0519;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}

/* Grids y Tarjetas de Módulos */
html[data-theme="dark"] .grid-container,
body.dark-mode .grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
}

html[data-theme="dark"] .card-module,
body.dark-mode .card-module {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
    transition: all var(--transition-normal) !important;
}

html[data-theme="dark"] .card-module:hover,
body.dark-mode .card-module:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary) !important;
}

html[data-theme="dark"] .card-header,
body.dark-mode .card-header,
html[data-theme="dark"] .card-module .card-header,
body.dark-mode .card-module .card-header {
    background: var(--primary-light) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

html[data-theme="dark"] .card-module .icon-box img,
body.dark-mode .card-module .icon-box img,
html[data-theme="dark"] .card-body .icon-box img,
body.dark-mode .card-body .icon-box img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.8;
}

html[data-theme="dark"] .links-list li a:hover,
body.dark-mode .links-list li a:hover,
html[data-theme="dark"] .grid-container .card-module .links-list li a:hover,
body.dark-mode .grid-container .card-module .links-list li a:hover {
    color: var(--primary) !important;
}

html[data-theme="dark"] .links-list li a i,
body.dark-mode .links-list li a i {
    color: var(--primary) !important;
    margin-right: 6px !important;
}

/* Opciones de Docente (#option-panel) */
html[data-theme="dark"] #option-panel li,
body.dark-mode #option-panel li {
    padding: 4px 0;
    color: var(--text-secondary);
}

html[data-theme="dark"] #option-panel li a,
body.dark-mode #option-panel li a {
    color: #cbd5e1 !important;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-block;
}

html[data-theme="dark"] #option-panel li a:hover,
body.dark-mode #option-panel li a:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}

/* Observaciones */
html[data-theme="dark"] .observacion,
body.dark-mode .observacion {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-left: 4px solid var(--warning) !important;
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 20px;
    font-size: 0.9rem;
    line-height: 1.6;
}

html[data-theme="dark"] .observacion strong,
body.dark-mode .observacion strong,
html[data-theme="dark"] .responsive-table-notif td ul li strong,
body.dark-mode .responsive-table-notif td ul li strong {
    color: #fbbf24 !important;
}

/* Enlaces con color rojo */
html[data-theme="dark"] .responsive-table-notif td a[style*="color:red"],
body.dark-mode .responsive-table-notif td a[style*="color:red"] {
    color: #f87171 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
}

html[data-theme="dark"] .responsive-table-notif td a[style*="color:red"]:hover,
body.dark-mode .responsive-table-notif td a[style*="color:red"]:hover {
    color: #fca5a5 !important;
}

/* Registro Académico (Taquilla) y Saberes */
html[data-theme="dark"] .title-trayecto td,
body.dark-mode .title-trayecto td {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .title-trayecto td font,
body.dark-mode .title-trayecto td font {
    color: #f87171 !important;
}

html[data-theme="dark"] .reg-saberes tr[bgcolor="#E9EBEE"] td,
body.dark-mode .reg-saberes tr[bgcolor="#E9EBEE"] td {
    background: #1e293b !important;
}

html[data-theme="dark"] .reg-saberes tr[bgcolor="#FFFDBC"] td,
body.dark-mode .reg-saberes tr[bgcolor="#FFFDBC"] td,
html[data-theme="dark"] .reg-saberes tr[bgcolor="#F7F9A7"] td,
body.dark-mode .reg-saberes tr[bgcolor="#F7F9A7"] td {
    background: #162032 !important;
}

/* Radio buttons & Labels */
tr[height="30"] td label {
    color: #334155;
    transition: color 0.3s ease;
}

html[data-theme="dark"] tr[height="30"] td label,
body.dark-mode tr[height="30"] td label {
    color: #f1f5f9 !important;
}

/* Egresados & DataTables controles */
html[data-theme="dark"] .alerta-fechas,
body.dark-mode .alerta-fechas {
    background-color: #2b1d1d !important;
    color: #fca5a5 !important;
    border: 1px solid #7f1d1d !important;
}

html[data-theme="dark"] .filtros-cuerpo,
body.dark-mode .filtros-cuerpo {
    background-color: #1e293b !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
}

html[data-theme="dark"] .dataTables_wrapper,
body.dark-mode .dataTables_wrapper,
html[data-theme="dark"] .dataTables_length,
body.dark-mode .dataTables_length,
html[data-theme="dark"] .dataTables_filter,
body.dark-mode .dataTables_filter,
html[data-theme="dark"] .dataTables_paginate,
body.dark-mode .dataTables_paginate {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .dataTables_paginate .paginate_button,
body.dark-mode .dataTables_paginate .paginate_button {
    color: var(--text-primary) !important;
    background-color: #1e293b !important;
    border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_paginate .paginate_button.current {
    background-color: #356AA0 !important;
    color: #fff !important;
    border: 1px solid #356AA0 !important;
}

/* Tarjetas de enlaces y descargas (.link-card) */
html[data-theme="dark"] .link-card,
body.dark-mode .link-card {
    background-color: #1e293b !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .link-card:hover,
body.dark-mode .link-card:hover {
    background-color: #0f172a !important;
    border-color: #356AA0 !important;
    color: #60a5fa !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(53, 106, 160, 0.4) !important;
}

html[data-theme="dark"] .link-card span,
body.dark-mode .link-card span {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .link-card:hover span,
body.dark-mode .link-card:hover span {
    color: #60a5fa !important;
}

html[data-theme="dark"] .link-card img,
body.dark-mode .link-card img {
    filter: brightness(0.9) contrast(1.1);
}

/* ------------------------------------------------------------
   5. AJUSTES RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    html[data-theme="dark"] .card-module table td,
    body.dark-mode .card-module table td {
        display: block;
        width: 100%;
        text-align: center;
    }
    html[data-theme="dark"] .card-module table td ul#option-panel,
    body.dark-mode .card-module table td ul#option-panel {
        text-align: center;
    }
    html[data-theme="dark"] .responsive-table table th,
    html[data-theme="dark"] .responsive-table table td,
    body.dark-mode .responsive-table table th,
    body.dark-mode .responsive-table table td {
        font-size: 0.75rem;
        padding: 4px 2px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    html[data-theme="dark"] .card-module .card-header,
    body.dark-mode .card-module .card-header {
        font-size: 0.85rem;
        padding: 10px 12px;
    }
    html[data-theme="dark"] .card-module table td img,
    body.dark-mode .card-module table td img {
        width: 48px;
        height: 48px;
    }
}

    /* Estilos modernos y profesionales para la tabla de correos */
    .container-login {
        display: flex;
        justify-content: center;
        padding: 30px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .responsive-table-wrapper {
        width: 100%;
        max-width: 1000px;
        background: #ffffff;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid #e1e8ed;
    }

    .info-intro {
        font-size: 15px;
        color: #4a5568;
        margin-bottom: 20px;
        line-height: 1.6;
        text-align: justify;
    }

    .styled-table {
        width: 100%;
        border-collapse: collapse;
        font-family: inherit;
        font-size: 14px;
        color: #2d3748;
        background-color: #ffffff;
    }

    .styled-table th, .styled-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #edf2f7;
    }

    /* Encabezados principales y secciones */
    .table-header-main {
        background-color: #356AA0 !important;
        color: #FFFFFF !important;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 0.5px;
        padding: 14px;
        border-radius: 6px 6px 0 0;
    }

    .table-subheader {
        background-color: #2c5282 !important;
        color: #FFFFFF !important;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    .table-section-title {
        background-color: #ebf8ff !important;
        color: #2b6cb0 !important;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.5px;
        border-top: 2px solid #356AA0;
        border-bottom: 2px solid #356AA0;
    }

    /* Efecto hover suave al pasar el cursor por las filas */
    .styled-table tbody tr:hover {
        background-color: #f7fafc;
    }

    /* Enlaces de correo con estilo interactivo */
    .styled-table a {
        color: #3182ce;
        text-decoration: none;
    }

    .styled-table a:hover {
        text-decoration: underline;
    }

    /* ==========================================================
       ADAPTACIÓN A MODO OSCURO
       ========================================================== */
    html[data-theme="dark"] .responsive-table-wrapper,
    body.dark-mode .responsive-table-wrapper {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    }

    html[data-theme="dark"] .info-intro,
    body.dark-mode .info-intro {
        color: var(--text-secondary) !important;
    }

    html[data-theme="dark"] .styled-table,
    body.dark-mode .styled-table {
        background-color: var(--card-bg) !important;
        color: var(--text-primary) !important;
    }

    html[data-theme="dark"] .styled-table th, 
    html[data-theme="dark"] .styled-table td,
    body.dark-mode .styled-table th, 
    body.dark-mode .styled-table td {
        border-bottom-color: var(--border-color) !important;
        color: var(--text-secondary) !important;
    }

    html[data-theme="dark"] .table-subheader,
    body.dark-mode .table-subheader {
        background-color: #1e2a45 !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .table-section-title,
    body.dark-mode .table-section-title {
        background-color: #0f172a !important;
        color: #60a5fa !important;
        border-top-color: #3b82f6 !important;
        border-bottom-color: #3b82f6 !important;
    }

    html[data-theme="dark"] .styled-table tbody tr:hover,
    body.dark-mode .styled-table tbody tr:hover {
        background-color: #1e293b !important;
    }

    html[data-theme="dark"] .styled-table a,
    body.dark-mode .styled-table a {
        color: #60a5fa !important;
    }

    html[data-theme="dark"] .styled-table a:hover,
    body.dark-mode .styled-table a:hover {
        color: #93c5fd !important;
    }