/**
 * ========================================
 * KIRICHENKO - SISTEMA DE DISENO v2.0
 * ========================================
 *
 * Estilo: Moderno / Minimalista / Profesional
 * Soporte: Modo claro y oscuro
 */

/* ========================================
   1. VARIABLES CSS
   ======================================== */

:root {
    /* Primary - Azules profesionales */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* Warning - Ambar */
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;

    /* Danger - Rojos */
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;

    /* Success - Verdes */
    --success-300: #86efac;
    --success-400: #4ade80;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;

    /* Slate - Grises */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* Transiciones */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease-out;

    /* Bordes */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ========================================
   2. RESET Y BASE
   ======================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

/* ========================================
   3. TIPOGRAFIA
   ======================================== */

.font-sans {
    font-family: 'Inter', system-ui, sans-serif;
}

.font-ubuntu {
    font-family: 'Ubuntu', sans-serif;
}

.font-roboto {
    font-family: 'Roboto', sans-serif;
}

/* ========================================
   4. BOTONES - Sistema Completo
   ======================================== */

/* Estilos base compartidos para todos los botones */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-warning,
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-lg);
    border: none;
    outline: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
    user-select: none;
}

/* Estados deshabilitados */
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-success:disabled,
.btn-warning:disabled,
.btn-outline:disabled,
.btn-outline-primary:disabled,
.btn-outline-secondary:disabled,
.btn-ghost:disabled,
[disabled].btn,
[disabled].btn-primary,
[disabled].btn-secondary,
[disabled].btn-danger,
[disabled].btn-success,
[disabled].btn-warning,
[disabled].btn-ghost {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Boton base (neutral) */
.btn {
    background-color: var(--slate-100);
    color: var(--slate-700);
}

.btn:hover:not(:disabled) {
    background-color: var(--slate-200);
}

.btn:focus {
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.3);
}

/* Boton primario - Accion principal */
.btn-primary {
    background-color: var(--primary-600);
    color: white;
    box-shadow: 0 1px 3px 0 rgb(0 119 182 / 0.3);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-700);
    box-shadow: 0 4px 6px -1px rgb(0 119 182 / 0.3);
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.4);
}

/* Boton secundario - Accion secundaria */
.btn-secondary {
    background-color: var(--primary-800);
    color: white;
    box-shadow: 0 1px 3px 0 rgb(3 4 94 / 0.3);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--primary-900);
    box-shadow: 0 4px 6px -1px rgb(3 4 94 / 0.3);
    transform: translateY(-1px);
}

.btn-secondary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-secondary:focus {
    box-shadow: 0 0 0 3px rgba(2, 62, 138, 0.4);
}

/* Boton peligro - Acciones destructivas */
.btn-danger {
    background-color: var(--danger-500);
    color: white;
    box-shadow: 0 1px 3px 0 rgb(193 18 31 / 0.3);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--danger-600);
    box-shadow: 0 4px 6px -1px rgb(193 18 31 / 0.3);
    transform: translateY(-1px);
}

.btn-danger:active:not(:disabled) {
    transform: translateY(0);
}

.btn-danger:focus {
    box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.4);
}

/* Boton exito - Confirmaciones */
.btn-success {
    background-color: var(--success-500);
    color: white;
    box-shadow: 0 1px 3px 0 rgb(106 153 78 / 0.3);
}

.btn-success:hover:not(:disabled) {
    background-color: var(--success-600);
    box-shadow: 0 4px 6px -1px rgb(106 153 78 / 0.3);
    transform: translateY(-1px);
}

.btn-success:active:not(:disabled) {
    transform: translateY(0);
}

.btn-success:focus {
    box-shadow: 0 0 0 3px rgba(106, 153, 78, 0.4);
}

/* Boton advertencia */
.btn-warning {
    background-color: var(--warning-500);
    color: var(--primary-800);
    box-shadow: 0 1px 3px 0 rgb(255 195 0 / 0.3);
}

.btn-warning:hover:not(:disabled) {
    background-color: var(--warning-600);
    box-shadow: 0 4px 6px -1px rgb(255 195 0 / 0.3);
    transform: translateY(-1px);
}

.btn-warning:active:not(:disabled) {
    transform: translateY(0);
}

.btn-warning:focus {
    box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.4);
}

/* Boton outline - Variante con borde */
.btn-outline,
.btn-outline-primary {
    background-color: transparent;
    border: 2px solid var(--primary-600);
    color: var(--primary-600);
}

.btn-outline:hover:not(:disabled),
.btn-outline-primary:hover:not(:disabled) {
    background-color: var(--primary-600);
    color: white;
}

.btn-outline:focus,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.3);
}

.btn-outline-secondary {
    background-color: transparent;
    border: 2px solid var(--primary-800);
    color: var(--primary-800);
}

.btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--primary-800);
    color: white;
}

/* Boton ghost - Minimo visual, para cancelar */
.btn-ghost {
    background-color: transparent;
    color: var(--slate-600);
    border: 1px solid var(--slate-300);
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--slate-100);
    border-color: var(--slate-400);
    color: var(--slate-700);
}

.btn-ghost:focus {
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2);
}

/* Dark mode ghost */
.dark .btn-ghost {
    color: var(--slate-300);
    border-color: var(--slate-600);
}

.dark .btn-ghost:hover:not(:disabled) {
    background-color: var(--slate-700);
    border-color: var(--slate-500);
    color: var(--slate-200);
}

/* Dark mode warning - texto oscuro para visibilidad */
.dark .btn-warning {
    background-color: var(--warning-400);
    color: var(--slate-900);
}

.dark .btn-warning:hover:not(:disabled) {
    background-color: var(--warning-300);
    color: var(--slate-900);
}

/* Tamanios de botones */
.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
    gap: 0.375rem !important;
}

.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    gap: 0.625rem !important;
}

/* Boton icono solo */
.btn-icon {
    padding: 0.625rem !important;
    min-width: auto !important;
}

/* ========================================
   5. INPUTS Y FORMULARIOS
   ======================================== */

.input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--slate-700);
    background-color: white;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    outline: none;
}

.input:hover {
    border-color: var(--slate-400);
}

.input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(0, 150, 199, 0.15);
}

.input::placeholder {
    color: var(--slate-400);
}

.input:disabled {
    background-color: var(--slate-100);
    color: var(--slate-500);
    cursor: not-allowed;
}

/* Input con error */
.input-error,
.input.is-invalid {
    border-color: var(--danger-500) !important;
}

.input-error:focus,
.input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.15) !important;
}

/* Dark mode inputs */
.dark .input {
    background-color: var(--slate-700);
    border-color: var(--slate-600);
    color: var(--slate-200);
}

/* Dark mode - todos los inputs de texto sin clase .input */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="search"],
.dark input[type="date"],
.dark textarea {
    color: var(--slate-200);
}

.dark .input:hover {
    border-color: var(--slate-500);
}

.dark .input::placeholder {
    color: var(--slate-400);
}

.dark .input:disabled {
    background-color: var(--slate-800);
    color: var(--slate-500);
}

/* Selects nativos */
select.input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
}

.dark select.input,
.dark select {
    background-color: var(--slate-700) !important;
    border-color: var(--slate-600) !important;
    color: var(--slate-200) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em 1.25em !important;
}

.dark select option {
    background-color: var(--slate-700);
    color: var(--slate-200);
}

/* Textarea */
textarea.input {
    min-height: 100px;
    resize: vertical;
}

/* Checkbox y Radio personalizados */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary-600);
}

/* ========================================
   6. CARDS
   ======================================== */

.card {
    background-color: white;
    border-radius: var(--radius-xl);
    border: 1px solid var(--slate-200);
    box-shadow: var(--shadow-sm);
}

.card-header {
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--slate-700);
    background-color: var(--slate-50);
    border-bottom: 1px solid var(--slate-200);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.card-body {
    padding: 1.5rem;
    color: var(--slate-600);
}

.card-footer {
    padding: 1rem 1.5rem;
    background-color: var(--slate-50);
    border-top: 1px solid var(--slate-200);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Card oscuro (login) */
.card-dark {
    background-color: var(--primary-800);
    border-radius: var(--radius-xl);
    border: 1px solid var(--primary-700);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.card-dark .card-body {
    padding: 2rem;
}

/* Dark mode cards */
.dark .card {
    background-color: var(--slate-800);
    border-color: var(--slate-700);
}

.dark .card-header {
    background-color: var(--slate-700);
    border-color: var(--slate-600);
    color: var(--slate-200);
}

.dark .card-body {
    color: var(--slate-300);
}

.dark .card-footer {
    background-color: var(--slate-700);
    border-color: var(--slate-600);
}

/* ========================================
   7. TABLAS - Estilo Profesional Minimalista
   ======================================== */

.table-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
    background-color: white;
    border-radius: var(--radius-xl);
    border: 1px solid var(--slate-200);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
}

.table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table thead {
    background-color: var(--slate-50);
    border-bottom: 2px solid var(--slate-200);
}

.table th {
    padding: 0.875rem 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--slate-100);
    color: var(--slate-700);
    vertical-align: middle;
}

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

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

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Dark mode tables */
.dark .table-container {
    background-color: var(--slate-800);
    border-color: var(--slate-700);
}

.dark .table thead {
    background-color: var(--slate-800);
    border-bottom-color: var(--slate-700);
}

.dark .table th {
    color: var(--slate-400);
}

.dark .table td {
    border-color: var(--slate-700);
    color: var(--slate-300);
}

.dark .table tbody tr:hover {
    background-color: var(--slate-750, rgba(51, 65, 85, 0.5));
}

/* ========================================
   8. DATATABLES - Estilo Profesional
   ======================================== */

/* Wrapper principal */
.table-container .dataTables_wrapper {
    padding: 0 !important;
    font-size: 0.875rem;
}

.table-container table.dataTable,
.table-container .dataTable {
    margin: 0 !important;
    width: 100% !important;
    border-collapse: collapse;
}

/* ===== ENCABEZADOS - Estilo Profesional ===== */
.table-container table.dataTable thead th,
.table-container .dataTable thead th {
    padding: 0.875rem 1rem !important;
    background: var(--slate-100) !important;
    color: var(--slate-600) !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-bottom: 2px solid var(--slate-300) !important;
    border-top: none !important;
    white-space: nowrap;
    text-align: center !important;
}

/* Iconos de ordenamiento */
.table-container table.dataTable thead th.sorting,
.table-container table.dataTable thead th.sorting_asc,
.table-container table.dataTable thead th.sorting_desc {
    cursor: pointer;
    position: relative;
}

.table-container table.dataTable thead th.sorting:after,
.table-container table.dataTable thead th.sorting_asc:after,
.table-container table.dataTable thead th.sorting_desc:after {
    opacity: 0.5;
    font-size: 0.7rem;
}

.table-container table.dataTable thead th.sorting_asc:after,
.table-container table.dataTable thead th.sorting_desc:after {
    opacity: 1;
    color: var(--primary-600);
    font-weight: bold;
}

/* ===== CELDAS ===== */
.table-container table.dataTable tbody td,
.table-container .dataTable tbody td {
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid var(--slate-200) !important;
    vertical-align: middle;
    color: var(--slate-700);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Primera columna ligeramente mas destacada */
.table-container table.dataTable tbody td:first-child {
    font-weight: 500;
    color: var(--slate-800);
}

/* Celdas con badges - espacio adicional */
.table-container table.dataTable tbody td .badge,
.table-container .dataTable tbody td .badge {
    margin: 0.125rem 0;
}

/* ===== FILAS ===== */
.table-container table.dataTable tbody tr,
.table-container .dataTable tbody tr {
    transition: background-color 0.15s ease;
}

/* Rayas alternas sutiles */
.table-container table.dataTable tbody tr:nth-child(even),
.table-container .dataTable tbody tr:nth-child(even) {
    background-color: var(--slate-50) !important;
}

/* Hover más visible */
.table-container table.dataTable tbody tr:hover,
.table-container .dataTable tbody tr:hover {
    background-color: var(--slate-100) !important;
}

/* Fila seleccionada */
.table-container table.dataTable tbody tr.selected {
    background-color: rgba(0, 119, 182, 0.08) !important;
}

/* Ultima fila sin borde */
.table-container table.dataTable tbody tr:last-child td,
.table-container .dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* ===== CONTROLES SUPERIORES ===== */
.table-container .dataTables_length,
.table-container .dataTables_filter {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-container .dataTables_length label,
.table-container .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--slate-500);
    font-weight: 400;
}

.table-container .dataTables_length select {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-md);
    background-color: white;
    color: var(--slate-700);
    cursor: pointer;
    min-width: 70px;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em 1.25em !important;
}

.table-container .dataTables_length select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(0, 150, 199, 0.1);
}

.table-container .dataTables_filter input {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-md);
    background-color: white;
    color: var(--slate-700);
    min-width: 200px;
    transition: all var(--transition-fast);
}

.table-container .dataTables_filter input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(0, 150, 199, 0.1);
}

.table-container .dataTables_filter input::placeholder {
    color: var(--slate-400);
}

/* ===== CONTROLES INFERIORES ===== */
.table-container .dataTables_info,
.table-container .dataTables_paginate {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--slate-100);
}

.table-container .dataTables_info {
    font-size: 0.8125rem;
    color: var(--slate-500);
}

/* ===== PAGINACION ===== */
.table-container .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.table-container .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--slate-600);
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
}

.table-container .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background-color: var(--slate-200);
    border-color: var(--slate-300);
    color: var(--slate-700);
}

.table-container .dataTables_paginate .paginate_button.current {
    background-color: var(--primary-600) !important;
    color: white !important;
    border-color: var(--primary-600) !important;
    font-weight: 500;
}

.table-container .dataTables_paginate .paginate_button.disabled {
    color: var(--slate-300);
    cursor: not-allowed;
}

/* ===== ROW GROUP ===== */
table.dataTable tr.dtrg-group td {
    background-color: var(--slate-100) !important;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--slate-700);
    padding: 0.625rem 1rem !important;
    border-bottom: 1px solid var(--slate-200) !important;
}

table.dataTable tr.dtrg-group:hover td {
    background-color: var(--slate-150, #eef2f6) !important;
}

/* ===== EMPTY TABLE ===== */
.table-container .dataTables_empty {
    padding: 3rem 1rem !important;
    text-align: center;
    color: var(--slate-400);
    font-style: italic;
}

/* ===== RESPONSIVE ===== */
.table-container .dtr-details {
    width: 100%;
}

.table-container .dtr-details li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--slate-100);
    display: flex;
    justify-content: space-between;
}

.table-container .dtr-details li:last-child {
    border-bottom: none;
}

.table-container .dtr-title {
    font-weight: 600;
    color: var(--slate-500);
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* ========================================
   8.1 DATATABLES DARK MODE
   ======================================== */

.dark .table-container table.dataTable thead th,
.dark .table-container .dataTable thead th {
    background: var(--slate-700) !important;
    color: var(--slate-300) !important;
    border-bottom-color: var(--slate-600) !important;
}

.dark .table-container table.dataTable thead th.sorting_asc:after,
.dark .table-container table.dataTable thead th.sorting_desc:after {
    color: var(--primary-400);
}

.dark .table-container table.dataTable tbody td,
.dark .table-container .dataTable tbody td {
    border-bottom-color: var(--slate-600) !important;
    color: var(--slate-200) !important;
}

.dark .table-container table.dataTable tbody td:first-child {
    color: var(--slate-100) !important;
    font-weight: 500;
}

/* Filas alternas en dark mode */
.dark .table-container table.dataTable tbody tr:nth-child(even),
.dark .table-container .dataTable tbody tr:nth-child(even) {
    background-color: var(--slate-800) !important;
}

.dark .table-container table.dataTable tbody tr:nth-child(odd),
.dark .table-container .dataTable tbody tr:nth-child(odd) {
    background-color: var(--slate-850, #131c2e) !important;
}

.dark .table-container table.dataTable tbody tr:hover,
.dark .table-container .dataTable tbody tr:hover {
    background-color: var(--slate-700) !important;
}

.dark .table-container table.dataTable tbody tr.selected {
    background-color: rgba(0, 119, 182, 0.15) !important;
}

.dark .table-container .dataTables_info,
.dark .table-container .dataTables_paginate {
    border-top-color: var(--slate-600) !important;
}

.dark .table-container .dataTables_info {
    color: var(--slate-300) !important;
}

.dark .table-container .dataTables_length label,
.dark .table-container .dataTables_filter label {
    color: var(--slate-300) !important;
}

.dark .table-container .dataTables_length select {
    background-color: var(--slate-700) !important;
    border-color: var(--slate-500) !important;
    color: var(--slate-100) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em 1.25em !important;
    padding-right: 2rem !important;
}

.dark .table-container .dataTables_filter input {
    background-color: var(--slate-700) !important;
    border-color: var(--slate-500) !important;
    color: var(--slate-100) !important;
}

.dark .table-container .dataTables_filter input::placeholder {
    color: var(--slate-400) !important;
}

.dark .table-container .dataTables_paginate .paginate_button {
    color: var(--slate-300) !important;
    background: var(--slate-700) !important;
    border-color: var(--slate-600) !important;
}

.dark .table-container .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background-color: var(--slate-600) !important;
    border-color: var(--slate-500) !important;
    color: var(--slate-100) !important;
}

.dark .table-container .dataTables_paginate .paginate_button.current {
    background-color: var(--primary-500) !important;
    color: white !important;
    border-color: var(--primary-500) !important;
}

.dark .table-container .dataTables_paginate .paginate_button.disabled {
    color: var(--slate-500) !important;
    background: var(--slate-800) !important;
    border-color: var(--slate-700) !important;
}

/* Row Group dark */
.dark table.dataTable tr.dtrg-group td {
    background-color: var(--slate-750, rgba(51, 65, 85, 0.8)) !important;
    color: var(--slate-200);
    border-bottom-color: var(--slate-600) !important;
}

.dark table.dataTable tr.dtrg-group:hover td {
    background-color: var(--slate-700) !important;
}

.dark .table-container .dataTables_empty {
    color: var(--slate-500);
}

.dark .table-container .dtr-details li {
    border-bottom-color: var(--slate-700);
}

.dark .table-container .dtr-title {
    color: var(--slate-400);
}

/* ========================================
   9. SELECT2
   ======================================== */

/* Ancho completo */
.select2-container {
    width: 100% !important;
}

/* Container principal */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-lg);
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    background-color: white;
    transition: all var(--transition-normal);
}

/* Hover */
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--slate-400);
}

/* Focus / Open */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(0, 150, 199, 0.15);
    outline: none;
}

/* Texto seleccionado */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--slate-700);
    line-height: 28px;
    padding-left: 0;
    padding-right: 24px;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--slate-400);
}

/* Flecha */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--slate-500) transparent transparent transparent;
    border-width: 6px 5px 0 5px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--primary-500) transparent;
    border-width: 0 5px 6px 5px;
}

/* Dropdown */
.select2-dropdown {
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
    animation: select2FadeIn 0.15s ease-out;
    z-index: 9999;
}

@keyframes select2FadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Search input */
.select2-container--default .select2-search--dropdown {
    padding: 8px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    outline: none;
    transition: all var(--transition-normal);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(0, 150, 199, 0.15);
}

/* Opciones */
.select2-container--default .select2-results__option {
    padding: 10px 12px;
    font-size: 0.875rem;
    color: var(--slate-700);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-50);
    color: var(--primary-700);
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--slate-100);
    color: var(--slate-800);
}

.select2-container--default .select2-results__option--disabled {
    color: var(--slate-400);
    background-color: var(--slate-50);
}

/* Messages */
.select2-container--default .select2-results__message {
    color: var(--slate-500);
    padding: 12px;
    text-align: center;
}

/* Clear button */
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--slate-400);
    font-size: 1.25rem;
    font-weight: normal;
    margin-right: 8px;
    cursor: pointer;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--danger-500);
}

/* Multiple */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-100);
    border: none;
    border-radius: 9999px;
    padding: 6px 12px 6px 14px;
    margin: 4px 6px 4px 0;
    color: var(--primary-700);
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 8px;
    line-height: 1.4;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0;
    cursor: default;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--primary-400);
    cursor: pointer;
    font-size: 0;
    font-weight: 600;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove::before {
    content: "×";
    font-size: 14px;
    line-height: 1;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: white;
    background-color: var(--danger-500);
}

/* Disabled */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--slate-100);
    cursor: not-allowed;
}

/* Groups */
.select2-container--default .select2-results__group {
    padding: 8px 12px;
    font-weight: 600;
    color: var(--slate-600);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--slate-50);
}

/* Error state */
.select2-container--default.is-invalid .select2-selection--single,
.select2-container--default.is-invalid .select2-selection--multiple {
    border-color: var(--danger-500);
}

.select2-container--default.is-invalid.select2-container--focus .select2-selection--single,
.select2-container--default.is-invalid.select2-container--focus .select2-selection--multiple {
    box-shadow: 0 0 0 2px rgba(193, 18, 31, 0.15);
}

/* ========== SELECT2 DARK MODE ========== */

.dark .select2-container--default .select2-selection--single,
.dark .select2-container--default .select2-selection--multiple {
    background-color: var(--slate-700) !important;
    border-color: var(--slate-600) !important;
}

.dark .select2-container--default .select2-selection--single:hover,
.dark .select2-container--default .select2-selection--multiple:hover {
    border-color: var(--slate-500) !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--slate-200) !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--slate-400) !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--slate-400) transparent transparent transparent !important;
}

.dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--primary-600) transparent !important;
}

/* Dropdown dark */
.dark .select2-dropdown {
    background-color: var(--slate-700) !important;
    border-color: var(--slate-600) !important;
}

.dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--slate-800) !important;
    border-color: var(--slate-600) !important;
    color: var(--slate-200) !important;
}

.dark .select2-container--default .select2-results__option {
    color: var(--slate-300) !important;
}

.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-700) !important;
    color: white !important;
}

.dark .select2-container--default .select2-results__option--selected {
    background-color: var(--slate-600) !important;
    color: var(--slate-200) !important;
}

.dark .select2-container--default .select2-results__message {
    color: var(--slate-400) !important;
}

.dark .select2-container--default .select2-results__group {
    background-color: var(--slate-800) !important;
    color: var(--slate-400) !important;
}

/* Multiple dark */
.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-900) !important;
    border: none !important;
    color: var(--primary-200) !important;
}

.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--primary-400) !important;
}

.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: white !important;
    background-color: var(--danger-500) !important;
}

/* Disabled dark */
.dark .select2-container--default.select2-container--disabled .select2-selection--single,
.dark .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--slate-800) !important;
}

/* ========================================
   10. BADGES
   ======================================== */

/* ===== Tags/Chips - Para valores fijos (Tipo, Modo, Estado) ===== */
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    line-height: 1;
    min-width: 85px;
    text-align: center;
    text-transform: capitalize;
}

.tag-primary {
    background-color: var(--primary-100);
    color: var(--primary-700);
}

.tag-success {
    background-color: #dcfce7;
    color: #166534;
}

.tag-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.tag-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.tag-info {
    background-color: #e0f2fe;
    color: #0369a1;
}

.tag-secondary {
    background-color: var(--slate-200);
    color: var(--slate-700);
}

.tag-cyan {
    background-color: #cffafe;
    color: #0e7490;
}

.tag-amber {
    background-color: #fef3c7;
    color: #b45309;
}

.tag-purple {
    background-color: #f3e8ff;
    color: #7c3aed;
}

.tag-pink {
    background-color: #fce7f3;
    color: #be185d;
}

/* Dark mode tags */
.dark .tag-primary {
    background-color: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.dark .tag-success {
    background-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.dark .tag-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.dark .tag-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.dark .tag-info {
    background-color: rgba(14, 165, 233, 0.2);
    color: #7dd3fc;
}

.dark .tag-secondary {
    background-color: var(--slate-700);
    color: var(--slate-300);
}

.dark .tag-cyan {
    background-color: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
}

.dark .tag-amber {
    background-color: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.dark .tag-purple {
    background-color: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}

.dark .tag-pink {
    background-color: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
}

/* Tag con color personalizado (para estados de BD) */
.tag[style*="background-color"] {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ===== Badges - Estilo Profesional ===== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-full);
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
}

.badge-primary {
    background-color: var(--primary-100);
    color: var(--primary-700);
    border: 1px solid var(--primary-200);
}

.badge-success {
    background-color: #ecfdf5;
    color: var(--success-700);
    border: 1px solid #a7f3d0;
}

.badge-danger {
    background-color: #fef2f2;
    color: var(--danger-600);
    border: 1px solid #fecaca;
}

.badge-warning {
    background-color: #fffbeb;
    color: var(--warning-700);
    border: 1px solid #fde68a;
}

.badge-info {
    background-color: #eff6ff;
    color: var(--primary-700);
    border: 1px solid var(--primary-200);
}

.badge-secondary {
    background-color: var(--slate-100);
    color: var(--slate-600);
    border: 1px solid var(--slate-200);
}

/* Dark mode badges */
.dark .badge-primary {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--primary-400);
    border-color: rgba(59, 130, 246, 0.3);
}

.dark .badge-success {
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

.dark .badge-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.dark .badge-warning {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

.dark .badge-info {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--primary-400);
    border-color: rgba(59, 130, 246, 0.3);
}

.dark .badge-secondary {
    background-color: var(--slate-700);
    color: var(--slate-300);
    border-color: var(--slate-600);
}

/* ===== Etiquetas de datos en tablas ===== */
.data-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate-700);
    background-color: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    white-space: nowrap;
    min-width: 90px;
    text-align: center;
}

.dark .data-label {
    color: var(--slate-300);
    background-color: var(--slate-700);
    border-color: var(--slate-600);
}

/* Etiqueta coloreada */
.data-label.data-label-primary {
    color: var(--primary-700);
    background-color: var(--primary-50);
    border-color: var(--primary-200);
}

.dark .data-label.data-label-primary {
    color: var(--primary-400);
    background-color: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Etiquetas de datos con colores */
.data-label.data-label-success {
    color: var(--success-700);
    background-color: #ecfdf5;
    border-color: #a7f3d0;
}

.data-label.data-label-warning {
    color: var(--warning-700);
    background-color: #fffbeb;
    border-color: #fde68a;
}

.data-label.data-label-danger {
    color: var(--danger-600);
    background-color: #fef2f2;
    border-color: #fecaca;
}

.data-label.data-label-info {
    color: #0369a1;
    background-color: #f0f9ff;
    border-color: #bae6fd;
}

.dark .data-label.data-label-success {
    color: #4ade80;
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.dark .data-label.data-label-warning {
    color: #fbbf24;
    background-color: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.dark .data-label.data-label-danger {
    color: #f87171;
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.dark .data-label.data-label-info {
    color: #38bdf8;
    background-color: rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.3);
}

/* ========================================
   11. TABS
   ======================================== */

.tab-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--slate-500);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.tab-btn:hover {
    color: var(--primary-600);
    border-color: var(--primary-300);
}

.tab-btn.active {
    color: var(--primary-600);
    border-color: var(--primary-600);
}

.tab-content {
    color: var(--slate-700);
}

/* Dark mode tabs */
.dark .tab-btn {
    color: var(--slate-400);
}

.dark .tab-btn:hover {
    color: var(--primary-400);
    border-color: var(--primary-500);
}

.dark .tab-btn.active {
    color: var(--primary-400);
    border-color: var(--primary-400);
}

.dark .tab-content {
    color: var(--slate-300);
}

/* ========================================
   12. ALERTAS
   ======================================== */

.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.alert-success {
    background-color: rgba(167, 201, 87, 0.15);
    border-color: var(--success-400);
    color: var(--success-700);
}

.alert-danger {
    background-color: rgba(193, 18, 31, 0.1);
    border-color: var(--danger-400);
    color: var(--danger-600);
}

.alert-warning {
    background-color: rgba(255, 195, 0, 0.15);
    border-color: var(--warning-500);
    color: var(--warning-700);
}

.alert-info {
    background-color: var(--primary-50);
    border-color: var(--primary-400);
    color: var(--primary-700);
}

/* ========================================
   13. UTILIDADES ADICIONALES
   ======================================== */

/* Link de accion en tablas */
.action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    color: var(--slate-500);
    transition: all var(--transition-fast);
}

.action-link:hover {
    background-color: var(--slate-100);
    color: var(--slate-700);
}

.action-link.view:hover {
    background-color: var(--primary-50);
    color: var(--primary-600);
}

.action-link.edit:hover {
    background-color: rgba(251, 191, 36, 0.15);
    color: var(--warning-600);
}

.action-link.delete:hover {
    background-color: rgba(193, 18, 31, 0.1);
    color: var(--danger-500);
}

.dark .action-link {
    color: var(--slate-400);
}

.dark .action-link:hover {
    background-color: var(--slate-700);
    color: var(--slate-200);
}

/* Loading spinner */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========================================
   14. DARK MODE GLOBAL OVERRIDES
   ======================================== */

/* Textos */
.dark .text-slate-800 {
    color: var(--slate-100) !important;
}

.dark .text-slate-700 {
    color: var(--slate-200) !important;
}

.dark .text-slate-600 {
    color: var(--slate-300) !important;
}

.dark .text-slate-500 {
    color: var(--slate-400) !important;
}

.dark .text-slate-400 {
    color: var(--slate-400) !important;
}

/* Fondos */
.dark .bg-white {
    background-color: var(--slate-800) !important;
}

.dark .bg-slate-100 {
    background-color: var(--slate-700) !important;
}

.dark .bg-slate-50 {
    background-color: var(--slate-800) !important;
}

/* Bordes */
.dark .border-slate-200 {
    border-color: var(--slate-600) !important;
}

.dark .border-slate-300 {
    border-color: var(--slate-600) !important;
}

.dark .border-slate-100 {
    border-color: var(--slate-600) !important;
}

/* Codigo */
.dark code,
.dark .font-mono {
    color: var(--slate-200) !important;
}

/* Hovers */
.dark .hover\:bg-slate-100:hover {
    background-color: var(--slate-700) !important;
}

.dark .hover\:bg-slate-50:hover {
    background-color: var(--slate-800) !important;
}

.dark .hover\:text-slate-800:hover {
    color: var(--slate-100) !important;
}

.dark .hover\:text-slate-900:hover {
    color: var(--slate-50) !important;
}

.dark .hover\:text-blue-800:hover {
    color: #93c5fd !important;
}

.dark .hover\:text-cyan-800:hover,
.dark .hover\:text-primary-800:hover {
    color: var(--primary-300) !important;
}

.dark .hover\:text-orange-800:hover {
    color: #fed7aa !important;
}

.dark .hover\:bg-blue-50:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

.dark .hover\:bg-blue-100:hover {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

/* Fondos de colores */
.dark .bg-cyan-50,
.dark .bg-primary-50 {
    background-color: rgba(0, 119, 182, 0.15) !important;
}

.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

.dark .bg-green-50,
.dark .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.2) !important;
}

.dark .bg-red-50,
.dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.2) !important;
}

.dark .bg-amber-50,
.dark .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

.dark .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.15) !important;
}

.dark .bg-orange-50,
.dark .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.2) !important;
}

.dark .bg-emerald-50,
.dark .bg-emerald-100 {
    background-color: rgba(16, 185, 129, 0.2) !important;
}

/* Textos de colores */
.dark .text-green-800 {
    color: #86efac !important;
}

.dark .text-green-600 {
    color: #4ade80 !important;
}

.dark .text-red-800 {
    color: #fca5a5 !important;
}

.dark .text-red-600 {
    color: #f87171 !important;
}

.dark .text-amber-800 {
    color: #fcd34d !important;
}

.dark .text-yellow-600 {
    color: #fbbf24 !important;
}

.dark .text-cyan-800,
.dark .text-primary-800 {
    color: var(--primary-300) !important;
}

.dark .text-blue-800 {
    color: #93c5fd !important;
}

.dark .text-purple-800 {
    color: #d8b4fe !important;
}

.dark .text-orange-600 {
    color: #fb923c !important;
}

.dark .text-orange-700 {
    color: #fdba74 !important;
}

.dark .text-orange-800 {
    color: #fed7aa !important;
}

.dark .text-emerald-600 {
    color: #34d399 !important;
}

.dark .text-emerald-700 {
    color: #6ee7b7 !important;
}

.dark .text-emerald-800 {
    color: #a7f3d0 !important;
}

.dark .text-blue-600 {
    color: #60a5fa !important;
}

.dark .text-blue-700 {
    color: #93c5fd !important;
}

.dark .text-blue-900 {
    color: #bfdbfe !important;
}

.dark .text-cyan-600,
.dark .text-primary-600 {
    color: var(--primary-400) !important;
}

.dark .text-cyan-700,
.dark .text-primary-700 {
    color: var(--primary-300) !important;
}

.dark .text-cyan-100,
.dark .text-primary-100 {
    color: var(--primary-100) !important;
}

/* ========================================
   15. RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 640px) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-warning,
    .btn-outline,
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-ghost {
        width: 100%;
        justify-content: center;
    }

    /* Excepto cuando tienen clase especifica de ancho */
    .btn.w-auto,
    .btn-primary.w-auto,
    .btn-ghost.w-auto,
    [class*="px-4"],
    [class*="px-3"] {
        width: auto;
    }
}

@media (min-width: 640px) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-warning,
    .btn-outline,
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-ghost {
        width: auto;
    }
}

/* ========================================
   16. LOGIN PAGE DARK MODE
   ======================================== */

.dark .from-primary-50 {
    --tw-gradient-from: rgba(0, 119, 182, 0.15) !important;
}

.dark .to-white {
    --tw-gradient-to: var(--slate-900) !important;
}

/* ========================================
   17. FORM LABELS DARK MODE
   ======================================== */

.dark label {
    color: var(--slate-300);
}

/* ========================================
   18. MODAL & OVERLAY
   ======================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content {
    background-color: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 28rem;
    width: 100%;
    padding: 1.5rem;
}

.dark .modal-content {
    background-color: var(--slate-800);
    border: 1px solid var(--slate-700);
}

/* ========================================
   19. SCROLLBAR STYLING
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--slate-100);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--slate-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--slate-400);
}

.dark ::-webkit-scrollbar-track {
    background: var(--slate-800);
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--slate-600);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--slate-500);
}

/* ========================================
   20. FOCUS VISIBLE
   ======================================== */

:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* ========================================
   21. LINK STYLES
   ======================================== */

a.link,
.link {
    color: #0056b3;
    text-decoration: none;
    transition: color var(--transition-fast);
    font-weight: 600;
}

a.link:hover,
.link:hover {
    color: #004494;
    text-decoration: underline;
}

.dark a.link,
.dark .link {
    color: var(--primary-300);
}

.dark a.link:hover,
.dark .link:hover {
    color: var(--primary-200);
}

/* ========================================
   22. WARNING BACKGROUNDS - DARK MODE TEXT
   ======================================== */

/* Botones y elementos con fondo warning necesitan texto oscuro en dark mode */
.dark .bg-warning-500,
.dark .bg-warning-400,
.dark .bg-warning-600,
.dark [class*="from-warning-"],
.dark [class*="bg-warning-"] {
    color: var(--slate-900) !important;
}

/* Asegurar que el texto dentro de elementos warning sea oscuro */
.dark .bg-warning-500 *,
.dark .bg-warning-400 *,
.dark .bg-warning-600 *,
.dark [class*="from-warning-"] *,
.dark [class*="from-warning-"] span,
.dark [class*="from-warning-"] p,
.dark [class*="from-warning-"] .text-white,
.dark [class*="from-warning-"] [class*="text-white"] {
    color: var(--slate-900) !important;
}

/* Excepto los iconos SVG que deben mantener su color */
.dark [class*="from-warning-"] svg,
.dark .bg-warning-500 svg,
.dark .bg-warning-400 svg {
    color: var(--slate-800) !important;
}

/* El fondo semitransparente blanco debe ser más visible */
.dark [class*="from-warning-"] .bg-white\/20 {
    background-color: rgba(0, 0, 0, 0.15) !important;
}

/* Links en tablas */
.table-container a,
table a {
    color: #0056b3;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.table-container a:hover,
table a:hover {
    color: #004494;
    text-decoration: underline;
}

.dark .table-container a,
.dark table a {
    color: var(--primary-300);
}

.dark .table-container a:hover,
.dark table a:hover {
    color: var(--primary-200);
    text-decoration: underline;
}