/* ============================================================
   SOPORTE TI - Sistema de Tickets
   ============================================================ */

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== BARRAS DE DESPLAZAMIENTO =====
   Las de Windows son anchas, grises y con una flecha en cada punta: se veían
   pesadas y se comían la esquina redondeada de los paneles. Estas son delgadas,
   redondeadas, sin flechas y semitransparentes, para que se noten solo cuando
   de verdad hacen falta.
   scrollbar-width/-color es el estándar; ::-webkit-scrollbar es lo que entienden
   Chrome y Edge, que es con lo que se usa el sistema. Van los dos. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100,116,139,0.35) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(100,116,139,0.3);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.55); }
/* Las flechas de las puntas y el cuadrito de la esquina, fuera. */
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }

body.dark-mode * { scrollbar-color: rgba(123,207,255,0.3) transparent; }
body.dark-mode *::-webkit-scrollbar-thumb { background: rgba(123,207,255,0.22); }
body.dark-mode *::-webkit-scrollbar-thumb:hover { background: rgba(123,207,255,0.5); }

html {
    min-height: 100%;
    background: #f4f6f9;
}

body {
    font-family: 'Segoe UI', 'Montserrat', Tahoma, Geneva, Verdana, sans-serif;
    background: #f4f6f9;
    min-height: 100vh;
    margin: 0;
    display: block;
    padding: 0;
    color: #1e293b;
}

body.login-page {
    background: linear-gradient(135deg, #1a1230 0%, #110c1d 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 0;
}

body.login-page .input-group input,
body.login-page .input-group select {
    color: #1e293b;
    background: #fff;
}

body.login-page .input-group input:-webkit-autofill,
body.login-page .input-group input:-webkit-autofill:hover,
body.login-page .input-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1e293b;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

*:focus-visible {
    outline: 2px solid #00369a;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== LAYOUT ===== */
.container {
    padding: 20px;
    width: 100%;
    max-width: 420px;
}

.main-content {
    padding: 30px 32px;
    max-width: 1600px;
    margin: 0 auto;
}

.dash-container,
.dashboard-container {
    padding: 30px 32px;
    max-width: 1600px;
    margin: 0 auto;
}

/* ===== LOGIN PAGE ===== */
.login-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 35px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.login-card:hover {
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
}

.logo {
    text-align: center;
    margin-bottom: 30px;
}

.logo-icon {
    font-size: 48px;
    color: #00369a;
    margin-bottom: 10px;
}

.logo h1 {
    color: #1e293b;
    font-size: 26px;
    font-weight: 700;
}

.logo p {
    color: #666;
    font-size: 14px;
    margin-top: 4px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #D1D5DB;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s ease;
    outline: none;
    background: #fff;
}

.input-group input:focus,
.input-group select:focus {
    border-color: #00369a;
}

.btn-login {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #00369a, #002060);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-login::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: width 0.5s ease, height 0.5s ease;
    transform: translate(-50%, -50%);
}

.btn-login:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 54, 154, 0.45);
}

.btn-login:active {
    transform: translateY(-1px);
    transition-duration: 0.05s;
}

.btn-login:active::after {
    width: 300px;
    height: 300px;
}

.error-msg {
    color: #fd0000;
    font-size: 13px;
    text-align: center;
    margin-top: 12px;
    min-height: 20px;
}
.error-msg.success { color:#27ae60; }
body.dark-mode .error-msg.success { color:#44ee99; }
.login-links { text-align:center;margin-top:12px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap; }
.link-btn { background:none;border:none;color:#00369a;font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline; }
body.dark-mode .link-btn { color:#00d4ff; }
.login-sub-form { margin-top:16px;padding-top:16px;border-top:1px solid #D1D5DB; }
body.dark-mode .login-sub-form { border-top-color:rgba(0,200,255,0.15); }
.login-sub-form h3 { font-size:16px;color:#1e293b;margin-bottom:12px;text-align:center; }
body.dark-mode .login-sub-form h3 { color:#7bcfff; }
.sub-form-footer { text-align:center;margin-top:8px; }
.btn-reset-pass { background:linear-gradient(135deg,#e67e22,#d35400) !important; }
.btn-registrar { background:linear-gradient(135deg,#27ae60,#1e8449) !important; }
.password-wrapper { position:relative; }
.password-wrapper input { padding-right:40px; }
.password-toggle { position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:18px;user-select:none; }

/* ===== TOP NAVIGATION ===== */
.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.85);
    padding: 0 28px;
    height: 64px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.topnav .logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topnav .logo-area .icono {
    font-size: 24px;
    line-height: 0;
}

.topnav .logo-area h2 {
    margin: 0;
    font-size: 18px;
    color: #1e293b;
}

.topnav .nav-links {
    display: flex;
    gap: 4px;
}

.topnav .nav-links a {
    padding: 8px 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    color: #1e293b;
    transition: all 0.25s ease;
    position: relative;
}

body:not(.nav-ready) .topnav .nav-links a[data-panel] {
    visibility: hidden;
    pointer-events: none;
}

body.nav-ready .topnav .nav-links a[data-panel] {
    visibility: visible;
    pointer-events: auto;
}

.topnav .nav-links a:hover {
    background: #f0f5fa;
    transform: translateY(-1px);
}

.topnav .nav-links a.activo {
    background: linear-gradient(135deg, #00369a, #4361ee);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,54,154,0.2);
}

.topnav .user-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topnav .user-area .nombre {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.topnav .user-area .cerrar {
    padding: 7px 16px;
    background: linear-gradient(135deg, #fd0000, #e74c3c);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.topnav .user-area .cerrar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(253,0,0,0.25);
}

.topnav .user-area .cerrar:active {
    transform: translateY(0);
}

.topnav .user-area #btnCambiarPass {
    background: linear-gradient(135deg, #f97316, #ea580c);
}
.topnav .user-area #btnCambiarPass:hover {
    box-shadow: 0 6px 20px rgba(249,115,22,0.25);
}

#btnVolver {
    background: linear-gradient(135deg, #6c757d, #5a6268);
}
#btnVolver:hover {
    box-shadow: 0 6px 20px rgba(108,117,125,0.25);
}
#btnConocimiento:hover, #btnFirma:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,54,154,0.25);
}

.btn-sound-select {
    background: none;
    border: 2px solid #D1D5DB;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 10px;
    line-height: 1;
    transition: all 0.2s;
}
.btn-sound-select:hover {
    border-color: #00369a;
    background: #f0f5fa;
}
/* ===== SHARED CARDS ===== */
.card,
.card-blanca {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.06);
}
.card:hover,
.card-blanca:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);
    transform: translateY(-1px);
}

.card h2,
.card-blanca h3 {
    font-size: 15px;
    color: #0f172a;
    margin: 0 0 14px;
}

.card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
    margin-top: 12px;
}

.card label:first-of-type {
    margin-top: 0;
}

.card input,
.card select,
.card textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    background: #fafbfc;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.card input:focus,
.card select:focus,
.card textarea:focus {
    border-color: #00369a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,54,154,0.08);
}

.card textarea {
    resize: vertical;
    min-height: 80px;
}

.card input::placeholder,
.card textarea::placeholder {
    color: #94a3b8;
}

/* ===== MODAL FORM FIELDS ===== */
.modal-field-group {
    margin-bottom: 10px;
}
.modal-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 3px;
    color: #1e293b;
}
body.dark-mode .modal-field-label {
    color: #d0d0e0;
}
.modal-field {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.modal-field:focus {
    border-color: #00369a;
    box-shadow: 0 0 0 3px rgba(0,54,154,0.08);
}
.modal-field-textarea {
    resize: vertical;
    min-height: 60px;
}
select.modal-field {
    cursor: pointer;
}

body.dark-mode .modal-field {
    background: #1e1e38;
    border-color: #3a3a55;
    color: #d0d0e0;
}
body.dark-mode .modal-field:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
}

.modal-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.modal-btn-primary {
    background: linear-gradient(135deg, #00369a, #4361ee);
    color: #fff;
}
.modal-btn-primary:hover {
    opacity: 0.9;
}
body.dark-mode .modal-btn-primary {
    background: linear-gradient(135deg, #1a3a7a, #4361ee);
}

/* ===== SHARED BADGES ===== */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.badge.Abierto {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc10730;
}

.badge.En-Progreso {
    background: #d1f2eb;
    color: #006266;
    border: 1px solid #00cec930;
}

.badge.Cerrado {
    background: #d4edda;
    color: #006644;
    border: 1px solid #27ae6030;
}

.badge.Pendiente-de-Proveedor {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b30;
}

.badge.Crítica {
    background: #fd0000;
    color: #fff;
}

.badge.Alta {
    background: #ff6b6b;
    color: #fff;
}

.badge.Media {
    background: #f0ad4e;
    color: #fff;
}

.badge.Baja {
    background: #5bc0de;
    color: #fff;
}

/* Badge colors for dark mode are in the dark mode section */

/* ===== SHARED TABLES ===== */
#tablaContainer {
    contain: layout style;
    /* El scroll horizontal de la tabla vive aca y no en .table-wrap, para que
       el panel de notificaciones no quede recortado por el contenedor. */
    overflow-x: auto;
}
table {
    border-collapse: collapse;
    width: 100%;
}

table th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    text-align: left;
    padding: 5px 6px;
    border-bottom: 1px solid #eef2f6;
}

table td {
    padding: 5px 6px;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 13px;
}

table tbody tr {
    transition: background 0.2s ease;
}

table tbody tr:hover {
    background: #f8fafc;
}

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

/* ===== SHARED BUTTONS ===== */
.btn-primary {
    margin-top: 16px;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #00369a, #002060);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 54, 154, 0.4);
}

.btn-enviar {
    margin-top: 10px;
    padding: 10px 28px;
    background: linear-gradient(135deg, #00369a, #002060);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-enviar:hover {
    box-shadow: 0 6px 20px rgba(0, 54, 154, 0.4);
}

.success-msg {
    color: #27ae60;
    font-size: 13px;
    text-align: center;
    margin-top: 10px;
    min-height: 20px;
}

.sin-resultados {
    text-align: center;
    color: #999;
    padding: 30px;
    font-size: 14px;
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #fff;
    color: #1e293b;
    border-radius: 14px;
    padding: 20px 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 1000;
    max-width: 400px;
    min-width: 280px;
    border-left: 4px solid #00369a;
    animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    word-break: break-word;
    line-height: 1.5;
    backdrop-filter: blur(20px);
}

@keyframes slideIn {
    from { transform: translateY(20px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.toast h4 {
    color: #1e293b;
    font-size: 14px;
    margin-bottom: 8px;
    padding-right: 20px;
}

.toast .cambios-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.toast .cambios-lista li {
    padding: 4px 0 4px 20px;
    position: relative;
    font-size: 13px;
    color: #1e293b;
    border-bottom: 1px solid #f0f0f0;
}

.toast .cambios-lista li:last-child {
    border-bottom: none;
}

.toast .cambios-lista li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.toast .cambios-lista li.estado::before { background: #3498db; }
.toast .cambios-lista li.asignado::before { background: #27ae60; }
.toast .cambios-lista li.categoria::before { background: #9b59b6; }
.toast .cambios-lista li.prioridad::before { background: #e67e22; }
.toast .cambios-lista li.tipo::before { background: #9b59b6; }

.toast a {
    color: #00369a;
    font-size: 12px;
    font-weight: 600;
}

.toast .cerrar-toast {
    position: absolute;
    top: 8px;
    right: 12px;
    cursor: pointer;
    font-size: 18px;
    color: #999;
    background: none;
    border: none;
}

.toast .cerrar-toast:hover { color: #333; }

/* ===== DARK TOGGLE ===== */
.dark-toggle {
    background: none;
    border: 2px solid #D1D5DB;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 10px;
    line-height: 1;
    transition: all 0.2s;
}

.dark-toggle:hover {
    border-color: #00369a;
    background: #f0f5fa;
}

.dark-toggle-float {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9999;
    background: #fff;
    border: 2px solid #D1D5DB;
    border-radius: 10px;
    cursor: pointer;
    font-size: 20px;
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.stat-card .num {
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
}

.stat-card h3 {
    font-size: 13px;
    color: #666;
    margin: 4px 0 0;
    font-weight: 600;
    text-transform: uppercase;
}

.stat-card .sub {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

/* ===== Carreras del dashboard (atenciones y calificaciones) ===== */
/* La carrera usa los emojis de Google y no los de Windows: el de Windows dibuja
   la moto distinta y además cambia entre versiones del sistema, que fue justo lo
   que hizo que un día apareciera sin conductor. La fuente se sirve desde el propio
   servidor, recortada a los cinco glifos que usa la carrera: pesa 4.6 KB y no
   depende de internet ni de ningún CDN. */
@font-face {
    font-family: 'Emoji Carrera';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fuentes/noto-color-emoji-carrera.woff2') format('woff2');
    /* Cubre los dos temas de la carrera y algo de margen: jinete (1f3c7), caballo
       suelto (1f40e), moto de carreras (1f3cd), scooter (1f6f5), la bandera de
       meta y las tres medallas. Cualquier otro carácter cae en la fuente normal.
       OJO: lo que no esté en esta lista lo dibuja Windows. La scooter se veía fea
       justamente por eso, porque faltaba aquí. */
    unicode-range: U+fe0f, U+1f3c1, U+1f3c7, U+1f3cd, U+1f40e, U+1f6f5,
                   U+1f947-1f949;
}
.carrera-puesto, .carrera-moto, .carrera-meta {
    font-family: 'Emoji Carrera', 'Segoe UI', 'Montserrat', Tahoma, Geneva, Verdana, sans-serif;
}
.carrera-sub { font-weight: 400; font-size: 11px; color: #64748b; margin-left: 6px; }
.carrera-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.carrera-puesto { flex: 0 0 26px; font-size: 13px; text-align: center; color: #64748b; font-weight: 700; }
.carrera-nombre { flex: 0 0 118px; font-size: 12px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrera-pista {
    flex: 1 1 auto; min-width: 60px; position: relative; height: 42px;
    /* Misma pista para TODOS los corredores: lo único que cambia es la posición de la
       moto y su color. */
    background-color: #fffbeb; border-radius: 21px;
    box-shadow: inset 0 0 0 1px #fcd34d;
    /* Línea discontinua central, como el asfalto */
    background-image: repeating-linear-gradient(to right, transparent 0 10px, rgba(148,163,184,0.45) 10px 20px);
    background-size: 100% 2px; background-position: 0 center; background-repeat: no-repeat;
}
.carrera-moto {
    /* La caja ocupa todo el alto de la pista y el glifo se centra con flex.
       Con top:50% quedaba bajo, porque el dibujo del emoji no está centrado en
       su caja de texto: se apoya en la línea base. */
    position: absolute; left: 0; top: 0; height: 100%;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* El tamaño, la subida y el espejado del corredor NO están aquí: salen de
   CARRERA_TEMAS, en panel-principal.js, porque los tres valores dependen del
   emoji que se esté usando y solo tienen sentido juntos. Aquí queda lo que no
   cambia entre temas. */
/* La bandera tiene el mismo problema que las motos: su dibujo cae 0.169 em por
   debajo del centro de la caja de línea. */
.carrera-meta { position: absolute; right: 8px; top: 50%; transform: translateY(calc(-50% - 0.169em)); font-size: 20px; opacity: 0.8; }
.carrera-valor { flex: 0 0 auto; min-width: 74px; text-align: right; font-size: 12px; font-weight: 700; color: #1e293b; white-space: nowrap; }
.carrera-detalle { font-weight: 400; font-size: 10px; color: #64748b; }
/* La pista es IGUAL para todos: lo único que distingue a cada corredor es la posición
   de su moto y su color. El líder se marca con la medalla y el nombre, no con la pista. */
.carrera-fila.lider .carrera-nombre { color: #b45309; }
.carrera-vacia { text-align: center; color: #64748b; font-size: 12px; padding: 22px 10px; }


body.dark-mode .carrera-nombre, body.dark-mode .carrera-valor { color: #d6e2f0; }
body.dark-mode .carrera-pista { background-color: rgba(58,42,0,0.55); box-shadow: inset 0 0 0 1px #b8860b; }
body.dark-mode .carrera-fila.lider .carrera-nombre { color: #fcd34d; }
body.dark-mode .carrera-sub, body.dark-mode .carrera-detalle, body.dark-mode .carrera-vacia { color: #8899bb; }

/* #94a3b8 como texto sobre blanco da 2.56:1 y el mínimo WCAG es 4.5:1. En los paneles
   nuevos ese gris llega por estilos inline desde el JS, así que en tema CLARO se baja a
   #64748b (4.76:1). En oscuro no se toca: ahí #94a3b8 rinde 6.64:1 y ya hay overrides. */
body:not(.dark-mode) #tareasPanel [style*="color:#94a3b8"],
body:not(.dark-mode) #selDevOverlay [style*="color:#94a3b8"],
body:not(.dark-mode) #tablaAsignacionesInv [style*="color:#94a3b8"] { color: #64748b !important; }

/* Los textos largos sin espacios (nombres pegados, series) tienen que cortar en su celda
   en vez de derramarse sobre las columnas vecinas. */
.tareas-table td { overflow-wrap: anywhere; }
/* Mismo motivo que .mensaje .burbuja: como flex item, min-width:auto equivale al ancho del
   contenido, así que una etiqueta de activo larga (serie pegada) se salía del modal. Se
   aplica a todo el contenido del modal porque las filas se generan en JS con varios niveles
   de flex anidados. */
#selDevOverlay .custom-modal *:not(input):not(select):not(button) { min-width: 0; }
/* El checkbox no debe encogerse por culpa de una etiqueta larga al lado. */
#selDevOverlay .custom-modal input[type="checkbox"] { flex: 0 0 auto; }
#selDevOverlay .custom-modal span,
#selDevOverlay .custom-modal label { overflow-wrap: anywhere; }
body.dark-mode .carrera-puesto { color: #94a3b8; }

.agente-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.agente-card:last-child {
    border-bottom: none;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.avatar.ag1 { background: #00369a; }
.avatar.ag2 { background: #fd0000; }
.avatar.ag3 { background: #f39c12; }

.rating {
    color: #f39c12;
    font-size: 14px;
}

.tabla-wrap {
    max-height: 300px;
    overflow-y: auto;
}

.acceso-rapido {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.btn-acceso {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
}
/* Dashboard General - Charts */


.recientes {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.recientes h2 {
    font-size: 15px;
    color: #1e293b;
    margin-bottom: 12px;
}
/* Card ticket detallada (Dashboard General) */

/* ============================================================
   AGENT PANEL
   ============================================================ */


.user-info {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1e293b;
    font-size: 14.5px;
    margin: 0 0 22px 0;
    text-align: left;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.1px;
}
body.dark-mode .user-info { color:#cbd5e1; }
body.dark-mode #opcionesEnvio label { color:#cbd5e1; }
#opcionesEnvio label { display:inline-flex; align-items:center; }
#opcionesEnvio label input[type="checkbox"] { margin-right:8px; }
body.dark-mode #inputNotificarCorreo { background:rgba(15,25,50,0.7); border-color:rgba(0,200,255,0.2); color:#bfe8ff; }
body.dark-mode #inputNotificarCorreo::placeholder { color:#6b86a8; }

/* Botones de acción del ticket (escalar / pedir ayuda / volver) */
.btn-ticket-accion {
    display:inline-flex; align-items:center; gap:6px;
    border:none; border-radius:9999px;
    font-size:12px; font-weight:600; padding:7px 16px;
    cursor:pointer; color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-ticket-accion:hover { transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 4px 14px rgba(0,0,0,.22); }
.btn-ticket-accion:active { transform:translateY(0); }
.btn-ayuda   { background:linear-gradient(135deg,#6366f1,#4f46e5); }
.btn-escalar { background:linear-gradient(135deg,#f59e0b,#d97706); }
.btn-volver  { background:linear-gradient(135deg,#0ea5e9,#0284c7); }

.user-info strong {
    color: #00369a;
}

.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #D1D5DB;
    background: #fff;
}

.tab {
    flex: 1;
    padding: 12px 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-right: 1px solid #D1D5DB;
    transition: all 0.2s;
    color: #334155;
    background: #F0F5FA;
}

.tab:last-child {
    border-right: none;
}

.tab:hover {
    background: #e2e8f0;
}

.tab.activo {
    background: #00369a;
    color: #fff;
    border-color: #00369a;
}

.tab .tab-count {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 4px;
}

.tab.activo .tab-count {
    opacity: 0.9;
}

.filtros {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.filtros select,
.filtros input[type="text"],
.filtros input[type="date"] {
    padding: 8px 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
    background: #fff;
    color: #1e293b;
    min-height: 36px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filtros select:focus,
.filtros input:focus {
    border-color: #00369a;
    box-shadow: 0 0 0 3px rgba(0,54,154,0.08);
}

/* flex:0 1 auto = no crecen (en monitores anchos conservan el tamaño de siempre) pero sí
   se encogen, para que toda la barra entre en UNA sola fila también en pantallas de
   1366px. El min-width es el piso: por debajo de eso vuelve a partirse en dos filas
   antes que dejar los controles ilegibles. */
.filtros select { min-width: 130px; cursor: pointer; }
.filtros input[type="date"] { min-width: 125px; }

/* Sólo la barra del panel de agente se encoge para entrar en una fila. Reportería usa
   la misma clase .filtros pero con labels arriba, y achicarle los selects los dejaba
   más chicos que el resto del sistema. */
.filtros-agente select { min-width: 100px; flex: 0 1 auto; }
.filtros-agente input[type="date"] { min-width: 112px; flex: 0 1 auto; }
/* El buscador absorbe el espacio sobrante y es el primero en encogerse. Con
   ancho fijo, la suma de los minimos superaba el ancho de la barra y el grupo
   de botones -- con la campanita -- se iba a una segunda fila, dejando un hueco
   vacio al final de la primera. */
.filtros-agente .filtro-search { min-width: 90px; flex: 1 1 90px; }
/* El grupo de botones va PEGADO a los filtros, no al borde derecho. Antes tenía
   margin-left:auto, que lo empujaba al extremo y dejaba un hueco vacío en el medio. */
.filtros-agente .notif-wrapper { margin-left: 0; flex: 0 0 auto; }

.filtro-search { width: 130px !important; }
.filtro-date { width: auto !important; }

body.dark-mode .filtros { background: rgba(10,18,40,0.6); border-color: rgba(0,200,255,0.12); }
body.dark-mode .filtros select,
body.dark-mode .filtros input { background: rgba(15,25,50,0.7); border-color: rgba(0,200,255,0.2); color: #bfe8ff; }
body.dark-mode .filtros select:focus,
body.dark-mode .filtros input:focus { border-color: #00d4ff; box-shadow: 0 0 0 3px rgba(0,200,255,0.08); }

.table-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    /* NADA de overflow aca. Este contenedor aloja tambien la barra de filtros,
       y con ella el panel de notificaciones: con overflow-x:auto el navegador
       deja de tratar el eje vertical como 'visible' (asi lo define la
       especificacion) y recorta el panel, que quedaba metido dentro de la tabla.
       El scroll horizontal se movio a #tablaContainer, que es el unico que lo
       necesita: ahi vive la tabla ancha. */
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.table-wrap h2 {
    font-size: 16px;
    color: #1e293b;
    margin-bottom: 12px;
}

.table-wrap h2 span {
    font-weight: 400;
    font-size: 13px;
    color: #888;
}

.filtros th,
.filtros td,
.table-wrap th,
.table-wrap td {
    padding: 4px 4px;
    text-align: left;
    border-bottom: 1px solid #D1D5DB;
}
.table-wrap th {
    white-space: nowrap;
}

.table-wrap th {
    color: #1e293b;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #f1f5f9;
    border-bottom: 2px solid #cbd5e1;
}

.table-wrap table {
    table-layout: auto;
    width: 100%;
}

.table-wrap table {
    table-layout: auto;
    width: 100%;
}

.table-wrap table tbody tr:hover {
    background: #eef2ff;
}

body.dark-mode .table-wrap th { background:rgba(0,30,60,0.5);color:#7bcfff;border-bottom:2px solid rgba(0,200,255,0.2); }
body.dark-mode .table-wrap table tbody tr:hover { background:rgba(0,100,255,0.06); }
body.dark-mode .table-wrap td { border-bottom-color:rgba(0,200,255,0.08);color:#bfe8ff; }

/* Agent Panel - Select styles */
select.estado-select,
select.asignar-select,
select.prioridad-select,
select.categoria-select,
select.tipo-select {
    padding: 5px 8px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
    cursor: pointer;
    background: #fff;
    color: #1e293b;
    min-height: 30px;
    max-width: 100%;
    transition: border-color 0.2s;
}
select.estado-select:focus { border-color:#00369a; }
body.dark-mode select.estado-select,
body.dark-mode select.asignar-select,
body.dark-mode select.prioridad-select,
body.dark-mode select.categoria-select,
body.dark-mode select.tipo-select { background:rgba(15,25,50,0.7);border-color:rgba(0,200,255,0.2);color:#bfe8ff; }
body.dark-mode select.estado-select:focus,
body.dark-mode select.asignar-select:focus,
body.dark-mode select.prioridad-select:focus,
body.dark-mode select.categoria-select:focus,
body.dark-mode select.tipo-select:focus { border-color:#00d4ff; }

select.estado-select:focus,
select.asignar-select:focus,
select.prioridad-select:focus,
select.categoria-select:focus,
select.tipo-select:focus {
    border-color: #00369a;
}

/* Agent Panel - Buttons */
.btn-small {
    padding: 5px 12px;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
}

.btn-small::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: width 0.5s ease, height 0.5s ease;
    transform: translate(-50%, -50%);
}

.btn-small:active::after {
    width: 200px;
    height: 200px;
}

.btn-asignar {
    background: linear-gradient(135deg, #00369a, #4361ee);
    box-shadow: 0 2px 8px rgba(0,54,154,0.2);
}

.btn-asignar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,54,154,0.35);
}

.btn-asignar:active {
    transform: translateY(0);
}

.btn-ver-detalle {
    background: linear-gradient(135deg, #1e293b, #334155);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.btn-ver-detalle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.btn-ver-detalle:active {
    transform: translateY(0);
}

@keyframes btnPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.acciones-cell {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.acciones-cell .btn-small {
    margin: 2px;
}

.ticket-creado {
    color: #888;
    font-size: 11px;
    white-space: normal;
    padding-left: 1.1em;
}

.celda-titulo {
    padding-left: 1.1em;
    text-indent: -1.1em;
    line-height: 1.4;
    white-space: normal;
}

/* Paginación */
.paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.btn-pag {
    padding: 6px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 36px;
    text-align: center;
}

.btn-pag:hover:not(:disabled):not(.activo) {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn-pag.activo {
    background: #00369a;
    color: #fff;
    border-color: #00369a;
    font-weight: 700;
}

.btn-pag:disabled {
    opacity: 0.4;
    cursor: default;
}

.pag-info {
    font-size: 12px;
    color: #888;
    margin-left: 12px;
}

body.dark-mode .btn-pag {
    background: rgba(15,25,50,0.7);
    border-color: rgba(0,200,255,0.2);
    color: #bfe8ff;
}

body.dark-mode .btn-pag:hover:not(:disabled):not(.activo) {
    background: rgba(0,100,255,0.15);
    border-color: rgba(0,200,255,0.3);
}

body.dark-mode .btn-pag.activo {
    background: linear-gradient(90deg, #007bff, #00d4ff);
    border-color: #00d4ff;
    color: #fff;
}

body.dark-mode .pag-info {
    color: #5a8aaa;
}


.btn-aplicar-todo {
    padding: 8px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #00369a, #4361ee);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,54,154,0.2);
}

.btn-aplicar-todo:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,54,154,0.35);
}

.btn-aplicar-todo:active {
    transform: translateY(0);
}

/* Sin filas que guardar el botón queda inactivo pero SIGUE en la barra, para que se vea
   igual en Abiertos, En Progreso y Cerrados. Misma convención que .btn-pag:disabled. */
.btn-aplicar-todo:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ===== Notifications ===== */
@keyframes notifFlash {
    0%,100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(231,76,60,0); }
}

@keyframes notifSlideIn {
    from { opacity:0; transform:translateX(-20px); }
    to { opacity:1; transform:translateX(0); }
}

@keyframes pulseNotif {
    0%,100% { opacity:1; }
    50% { opacity:0.4; }
}

.btn-notif {
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #00369a, #4361ee);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    min-height: 36px;
    box-shadow: 0 2px 6px rgba(0,54,154,0.15);
}

.btn-notif:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,54,154,0.3);
}

.notif-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(231,76,60,0.4);
    border: 2px solid #fff;
    line-height: 1;
    animation: pulseNotif 1.5s infinite;
}

.btn-marcar-leidas {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    white-space: nowrap;
}
.btn-marcar-leidas:hover { background: rgba(37, 99, 235, 0.1); }
.btn-marcar-leidas[disabled] { color: #94a3b8; cursor: default; background: none; }
body.dark-mode .btn-marcar-leidas { color: #7cc5ff; }
body.dark-mode .btn-marcar-leidas:hover { background: rgba(124, 197, 255, 0.12); }
body.dark-mode .btn-marcar-leidas[disabled] { color: #5a5a78; background: none; }

.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    z-index: 1000;
    max-height: 360px;
    overflow-y: auto;
    /* Explicito: sin esto el navegador pone `auto` tambien en horizontal y
       aparecia una barra de sobra abajo del panel. */
    overflow-x: hidden;
    border: 1px solid #eef2f6;
}

.notif-header {
    /* Flex para que el titulo quede a la izquierda y "Marcar todas como leidas"
       a la derecha, en la misma linea. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    border-bottom: 1px solid #eef2f6;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.notif-lista {
    padding: 8px;
}

.notif-item {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background: #f8fafc;
}

.notif-item.no-leida {
    background: #eef4ff;
}

.notif-item .notif-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.notif-item .notif-texto {
    flex: 1;
    line-height: 1.4;
}

.notif-item .notif-fecha {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 2px;
}

.notif-empty {
    text-align: center;
    padding: 30px 16px;
    color: #94a3b8;
    font-size: 13px;
}

/* ============================================================
   TICKET DETAIL
   ============================================================ */

.ticket-header {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ticket-header .t-id {
    font-size: 24px;
    font-weight: 700;
    color: #00369a;
}

.btn-entrega-header {
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #e67e22, #f39c12);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-entrega-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(230, 126, 34, 0.3);
}

.ticket-header .t-titulo {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-top: 4px;
}

.ticket-header .t-meta {
    color: #334155;
    font-size: 13px;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ticket-header .t-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.conversacion {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    max-height: 500px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.conversacion h2 {
    font-size: 16px;
    color: #1e293b;
    margin-bottom: 15px;
}

.mensaje {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.mensaje .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}

.mensaje .avatar.usuario { background: #00369a; }
.mensaje .avatar.agente { background: #fd0000; }

.mensaje .burbuja {
    background: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    max-width: 80%;
    /* Sin esto el max-width no se respeta: como flex item, min-width:auto equivale al
       ancho del contenido, y una cadena larga sin espacios desborda la burbuja. */
    min-width: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.mensaje.agente {
    flex-direction: row-reverse;
}

.mensaje.agente .burbuja {
    background: #e8f0fe;
}

.mensaje .burbuja .autor {
    font-size: 12px;
    font-weight: 700;
    color: #00369a;
    margin-bottom: 4px;
}

.mensaje.agente .burbuja .autor {
    color: #fd0000;
}

/* Bloque de firma dentro de la burbuja del mensaje. Deliberadamente neutro:
   lo usan tanto los agentes como los usuarios finales, asi que no debe heredar
   el color de .mensaje.agente. La clase se llama 'firma-agente' por historia. */
.firma-agente {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #d1d5db;
    font-size: 11px;
    color: #64748b;
    line-height: 1.6;
    background: #f8fafc;
}
body.dark-mode .firma-agente {
    border-top-color: #4a4a6a;
    color: #94a3b8;
    background: rgba(10, 18, 40, 0.6);
}
.firma-agente .firma-nombre {
    color: #1e293b;
}
.firma-agente .firma-info {
    color: #475569;
}
body.dark-mode .firma-agente .firma-nombre {
    color: #bfe8ff;
}
body.dark-mode .firma-agente .firma-info {
    color: #94a3b8;
}

.mensaje .burbuja .texto {
    font-size: 14px;
    color: #1e293b;
    line-height: 1.5;
    /* Corta cadenas largas sin espacios (pegados, hashes, URLs) en vez de desbordar.
       NO usar white-space:pre-wrap: los mensajes se guardan como HTML con <br>, y
       preservar el espaciado del fuente descolocaría los que ya existen. */
    overflow-wrap: anywhere;
    word-break: break-word;
}
.mensaje .burbuja .autor,
.mensaje .burbuja .fecha { overflow-wrap: anywhere; }

.mensaje .burbuja .fecha {
    font-size: 11px;
    color: #999;
    margin-top: 6px;
    text-align: right;
}

/* Nota interna: mismo fondo/tema que un mensaje normal; se distingue solo por la
   etiqueta 🔒 "Nota interna". Así respeta modo claro/oscuro del sistema y siempre se lee. */

.mensaje .burbuja .adjuntos {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
}

.mensaje .burbuja .adjunto-item {
    display: inline-block;
    margin: 3px;
}

.mensaje .burbuja .adjunto-item img {
    max-width: 180px;
    max-height: 120px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s;
    border: 1px solid #e0e0e0;
}

.mensaje .burbuja .adjunto-item img:hover {
    transform: scale(1.05);
}

.mensaje .burbuja .adjunto-item a {
    display: inline-block;
    padding: 4px 10px;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 11px;
    color: #00369a;
    text-decoration: none;
}

.mensaje .burbuja .adjunto-item a:hover {
    background: #e0e0e0;
}

/* ===== Mensajes de asignación (dentro de conversación) ===== */
.mensaje-asignacion {
    margin-top: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.mensaje-asignacion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.folio-label {
    font-size: 11px;
    color: #64748b;
}

.mensaje-asignacion-link {
    margin-top: 8px;
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #021b5b, #1a3a7a);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.mensaje-asignacion-link:hover {
    background: linear-gradient(135deg, #1a3a7a, #2a5aaa);
}

.mensaje-asignacion-aprobado {
    margin-top: 8px;
    padding: 12px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}
.mensaje-asignacion-aprobado label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
}
.mensaje-asignacion-aprobado label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #059669;
}
.mensaje-asignacion-aprobado button {
    margin-top: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.mensaje-asignacion-aprobado button:hover {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.mensaje-asig-eliminar {
    margin-top: 8px;
    margin-left: 8px;
    padding: 8px 16px;
    background: #fff;
    color: #dc2626;
    border: 1.5px solid #fca5a5;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.mensaje-asig-eliminar:hover {
    background: #fee2e2;
    border-color: #dc2626;
}
body.dark-mode .mensaje-asig-eliminar {
    background: transparent;
    color: #f87171;
    border-color: #7f1d1d;
}
body.dark-mode .mensaje-asig-eliminar:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: #f87171;
}

body.dark-mode .mensaje-asignacion {
    background: #1e1e38;
    border-color: #3a3a55;
    color: #bfe8ff;
}
body.dark-mode .mensaje-asignacion-header strong {
    color: #7bcfff;
}
body.dark-mode .folio-label {
    color: #5a8aaa;
}
body.dark-mode .mensaje-asignacion-link {
    background: linear-gradient(135deg, #1a3a7a, #2a5aaa);
}
body.dark-mode .mensaje-asignacion-aprobado {
    background: #0a2a1a;
    border-color: #1a5a3a;
}
body.dark-mode .mensaje-asignacion-aprobado label {
    color: #bfe8ff;
}
body.dark-mode .mensaje-asignacion-aprobado button {
    background: linear-gradient(135deg, #047857, #059669);
}

body.dark-mode .activo-badge.pendiente { background:#3a2a00; color:#fbbf24; border-color:#b8860b; }
body.dark-mode .activo-badge.aprobado { background:#0a2a1a; color:#34d399; border-color:#059669; }
body.dark-mode .activo-badge.rechazado { background:#3a0a0a; color:#fca5a5; border-color:#dc2626; }
body.dark-mode .activo-badge.enviado { background:#0a1a3a; color:#60a5fa; border-color:#2563eb; }
body.dark-mode .activo-badge.devuelto { background:#241a3a; color:#c4b5fd; border-color:#7c3aed; }
body.dark-mode .activo-badge.parcial { background:#3a1f0a; color:#fdba74; border-color:#ea580c; }
body.dark-mode .activo-badge.temporal { background:#082f36; color:#67e8f9; border-color:#0e7490; }
body.dark-mode .tarea-btn.tarea-proceso { background:#0a1a3a; color:#60a5fa; border-color:#2563eb; }
body.dark-mode .tarea-btn.tarea-resuelto { background:#0a2a1a; color:#34d399; border-color:#059669; }
body.dark-mode .tarea-btn.tarea-rechazado { background:#3a0a0a; color:#fca5a5; border-color:#dc2626; }
/* Barra de filtro del panel de tareas */
.tareas-filtro-bar { margin-bottom:10px; display:flex; gap:10px; align-items:center; }
.tareas-filtro-bar input[type="text"] { flex:1 1 auto; min-width:120px; padding:6px 10px; border:1.5px solid #d1d5db; border-radius:8px; font-size:12px; outline:none; background:#fff; color:#1e293b; }
.tareas-chk { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:12px; color:#64748b; cursor:pointer; }
.tareas-chk input[type="checkbox"] { width:15px; height:15px; margin:0; accent-color:#2563eb; cursor:pointer; }
body.dark-mode .tareas-filtro-bar input[type="text"] { background:rgba(15,25,50,0.7); border-color:rgba(0,200,255,0.2); color:#bfe8ff; }
body.dark-mode .tareas-chk { color:#94a3b8; }

/* Anchos fijos: un motivo largo no debe estirar la tabla ni descolocar las acciones. */
.tareas-table { width:100%; table-layout:fixed; }
.tareas-table td, .tareas-table th { vertical-align:middle; }
/* El motivo se recorta a 2 líneas para que la fila no crezca. Doble clic lo despliega. */
.tareas-table td.tarea-motivo { white-space:normal; overflow-wrap:anywhere; word-break:break-word; cursor:pointer; }
.tareas-table td.tarea-motivo .motivo-txt { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tareas-table td.tarea-motivo.expandido .motivo-txt { display:block; -webkit-line-clamp:unset; overflow:visible; }
.tareas-table td.tarea-motivo .motivo-mas { display:block; font-size:10px; color:#2563eb; margin-top:2px; white-space:nowrap; }
.tareas-table td.tarea-motivo.expandido .motivo-mas::after { content:'\25B2 ver menos'; }
.tareas-table td.tarea-motivo .motivo-mas::after { content:'\25BC ver todo'; }
body.dark-mode .tareas-table td.tarea-motivo .motivo-mas { color:#60a5fa; }
.tareas-table td.tarea-acciones { white-space:normal; }
.tareas-table .tarea-btn { white-space:nowrap; }
body.dark-mode #tareasPanel .admin-table tbody td { color:#d6e2f0 !important; }
body.dark-mode #tareasPanel [style*="color:#dc2626"],
body.dark-mode #tareasPanel [style*="color: #dc2626"] { color:#f87171 !important; }
body.dark-mode #tareasPanel [style*="color:#059669"],
body.dark-mode #tareasPanel [style*="color: #059669"] { color:#6ee7b7 !important; }

.responder {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.responder h2 {
    font-size: 16px;
    color: #1e293b;
    margin-bottom: 12px;
}

.responder textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}

.responder textarea:focus {
    border-color: #00369a;
}

.responder .file-upload {
    margin-top: 10px;
}

.responder .file-upload input[type="file"] {
    font-size: 13px;
}

.modal-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    cursor: pointer;
}

.modal-img img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
}

.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}
.dropdown-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent;
    z-index: 3000;
}
.dropdown-contenido {
    position: fixed;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    z-index: 3001;
    color: #0f172a;
}
body.dark-mode .dropdown-contenido {
    background: #1e293b;
    color: #e2e8f0;
}
.modal-contenido {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    color: #0f172a;
}
.modal-contenido input {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
body.dark-mode .modal-contenido {
    background: #1e293b;
    color: #e2e8f0;
}
body.dark-mode .modal-content {
    background: #1e293b;
}
body.dark-mode .modal-content [style*="color:#0f172a"],
body.dark-mode .modal-content [style*="color: #0f172a"] {
    color: #e2e8f0 !important;
}
body.dark-mode .modal-content [style*="color:#475569"],
body.dark-mode .modal-content [style*="color: #475569"] {
    color: #94a3b8 !important;
}
body.dark-mode .modal-content [style*="color:#64748b"],
body.dark-mode .modal-content [style*="color: #64748b"] {
    color: #94a3b8 !important;
}
body.dark-mode .modal-content [style*="background:#f8fafc"],
body.dark-mode .modal-content [style*="background: #f8fafc"] {
    background: #0f172a !important;
    border-color: #334155 !important;
}
body.dark-mode .modal-content [style*="border:1px solid #e2e8f0"],
body.dark-mode .modal-content [style*="border: 1px solid #e2e8f0"] {
    border-color: #334155 !important;
}
body.dark-mode .modal-content .btn-primary {
    background: #2563eb;
    color: #fff;
}
body.dark-mode .modal-content .btn-cancel {
    background: #334155;
    color: #cbd5e1;
}
body.dark-mode .modal-content .btn-cancel:hover {
    background: #475569;
}
body.dark-mode .modal-contenido input,
body.dark-mode .modal-contenido select,
body.dark-mode .modal-contenido textarea {
    background: #1a2332;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .dropdown-contenido input,
body.dark-mode .dropdown-contenido select,
body.dark-mode .dropdown-contenido textarea {
    background: #1a2332;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .modal-contenido input {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

.no-responder {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 10px;
}

body.dark-mode .modal-contenido .chat-msg .chat-burbuja {
    background: #334155;
    color: #e2e8f0;
}
.chat-msg {
    display: flex;
}
.chat-msg.user {
    justify-content: flex-end;
}
.chat-burbuja {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    background: #f1f5f9;
    color: #1e293b;
    word-break: break-word;
}
.chat-msg.user .chat-burbuja {
    background: #00369a;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg.bot .chat-burbuja {
    background: #f1f5f9;
    color: #1e293b;
    border-bottom-left-radius: 4px;
}
body.dark-mode .chat-msg.bot .chat-burbuja {
    background: #334155;
    color: #e2e8f0;
}
body.dark-mode #chatInput,
body.dark-mode #chatInputAgente {
    background: #0f172a;
    border-color: #334155 !important;
    color: #e2e8f0;
}
body.dark-mode #chatInput::placeholder,
body.dark-mode #chatInputAgente::placeholder {
    color: #5a8aaa;
}
body.dark-mode #btnEnviarChat,
body.dark-mode #btnEnviarChatAgente {
    background: linear-gradient(135deg,#00369a,#0055cc) !important;
}

/* ============================================================
   ADMIN - GESTOR USUARIOS
   ============================================================ */

.info-admin {
    background: #eef2ff;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 18px;
    border-left: 4px solid #00369a;
    font-weight: 500;
}

.badge-rol {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.badge-rol.usuario { background: #81ecec; color: #006266; }
.badge-rol.agente { background: #00369a; color: #fff; }
.badge-rol.supervisor { background: #9b59b6; color: #fff; }
.badge-rol.admin { background: #fd0000; color: #fff; }

.badge-estado {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.badge-estado.activo { background: #55efc4; color: #006644; border: 1px solid #27ae6030; }
.badge-estado.inactivo { background: #fd0000; color: #fff; border: 1px solid #fd000030; }
body.dark-mode .badge-rol.usuario { background: #005f5f; color: #a8f0f0; }
body.dark-mode .badge-estado.activo { background: #005f3f; color: #55efc4; }
.badge-categoria { display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;background:#e0e7ff;color:#3730a3;text-transform:uppercase; }
body.dark-mode .badge-categoria { background:#1e3a5f; color:#93c5fd; }

.user-list {
    max-height: 450px;
    overflow-y: auto;
}

.admin-table th,
.admin-table td {
    padding: 8px 7px;
    text-align: left;
    border-bottom: 1px solid #D1D5DB;
}

.btn-peligro,
.btn-editar,
.btn-activar,
.btn-desactivar {
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
    vertical-align: middle;
    min-width: 80px;
    white-space: nowrap;
}

.btn-peligro { background: #f0ad4e; color: #fff; }
.btn-peligro:hover { background: #ec971f; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(240,173,78,0.3); }

.btn-editar { background: #1796DB; color: #fff; }
.btn-editar:hover { background: #0B5BA8; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(23,150,219,0.3); }

.btn-activar { background: #27ae60; color: #fff; }
.btn-activar:hover { background: #1e8449; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(39,174,96,0.25); }

.btn-desactivar { background: #fd0000; color: #fff; }
.btn-desactivar:hover { background: #cc0000; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(253,0,0,0.25); }

/* Card desc styling */
.admin-panel .card .desc { font-size:13px;color:#64748b;margin:-6px 0 16px 0;line-height:1.5; }
body.dark-mode .admin-panel .card .desc { color:#94a3b8; }

/* Admin table refinements */
.admin-panel .card { border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.05);overflow:hidden; }
.admin-panel table { width:100%;border-collapse:collapse;font-size:13px; }
.admin-panel table thead th { padding:8px 6px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:#475569;background:#f1f5f9;border-bottom:2px solid #cbd5e1; }
.admin-panel table tbody td { padding:7px 6px;border-bottom:1px solid #e2e8f0;vertical-align:middle; }
.admin-panel table tbody tr:nth-child(even) td { background:#fafbfc; }
.admin-panel table tbody tr:last-child td { border-bottom:none; }
.admin-panel table tbody tr:hover td { background:#eef2ff; }
body.dark-mode .admin-panel table thead th { background:rgba(0,30,60,0.5);color:#7bcfff;border-bottom-color:rgba(0,200,255,0.2); }
body.dark-mode .admin-panel table tbody td { border-bottom-color:rgba(0,200,255,0.06);color:#bfe8ff; }
body.dark-mode .admin-panel td[style*="color:#999"], body.dark-mode .admin-panel td[style*="color: #999"] { color:#94a3b8 !important; }
body.dark-mode .admin-panel table tbody tr:nth-child(even) td { background:rgba(0,20,50,0.3); }
body.dark-mode .admin-panel table tbody tr:hover td { background:rgba(0,100,255,0.08); }

/* Admin action buttons */
.btn-admin-editar,.btn-admin-guardar,.btn-admin-eliminar { padding:4px 9px;border:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.2s;letter-spacing:0.3px;display:inline-flex;align-items:center;gap:3px; }
.btn-admin-editar { background:#00369a;color:#fff; }
.btn-admin-editar:hover { background:#002060;transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,54,154,0.3); }
.btn-admin-guardar { background:#27ae60;color:#fff; }
.btn-admin-guardar:hover { background:#1e8449;transform:translateY(-1px);box-shadow:0 3px 10px rgba(39,174,96,0.3); }
.btn-admin-eliminar { background:#e74c3c;color:#fff; }
.btn-admin-eliminar:hover { background:#c0392b;transform:translateY(-1px);box-shadow:0 3px 10px rgba(231,76,60,0.3); }
body.dark-mode .btn-admin-editar { background:#0a4da6; }
body.dark-mode .btn-admin-editar:hover { background:#00369a; }
body.dark-mode .btn-admin-guardar { background:#1e8c4e; }
body.dark-mode .btn-admin-guardar:hover { background:#27ae60; }
body.dark-mode .btn-admin-eliminar { background:#c0392b; }
body.dark-mode .btn-admin-eliminar:hover { background:#e74c3c; }

/* Admin inline edit inputs */
.admin-edit-input { padding:6px 8px;border:2px solid #cbd5e1;border-radius:6px;font-size:12px;outline:none;transition:border-color 0.2s;width:100%;box-sizing:border-box; }
.admin-edit-input:focus { border-color:#00369a;box-shadow:0 0 0 3px rgba(0,54,154,0.1); }
body.dark-mode .admin-edit-input { background:rgba(15,25,50,0.7);border-color:rgba(0,200,255,0.3);color:#bfe8ff; }
body.dark-mode .admin-edit-input:focus { border-color:#00d4ff;box-shadow:0 0 0 3px rgba(0,200,255,0.15); }

.admin-select-input { padding:6px 8px;border:2px solid #cbd5e1;border-radius:6px;font-size:12px;outline:none;cursor:pointer; }
body.dark-mode .admin-select-input { background:rgba(15,25,50,0.7);border-color:rgba(0,200,255,0.3);color:#bfe8ff; }

/* ===== Clasificación – dark theme ===== */
#panelClasificacion { font-family:'Inter','Segoe UI',system-ui,sans-serif; }
#panelClasificacion .clasif-container {
  background:linear-gradient(145deg,#0a1628 0%, #070f1e 100%);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.filter-bar { display:flex;gap:10px;align-items:center;margin-bottom:10px; }
.filter-input { padding:6px 10px;border:1.5px solid #d1d5db;border-radius:8px;font-size:12px;outline:none; }
.filter-input:focus { border-color:#00369a;box-shadow:0 0 0 3px rgba(0,54,154,0.1); }
.filter-input-flex { padding:6px 10px;border:1.5px solid #d1d5db;border-radius:8px;font-size:12px;outline:none;flex:1;min-width:150px; }
.filter-select { padding:6px 10px;border:1.5px solid #d1d5db;border-radius:8px;font-size:12px;outline:none;cursor:pointer; }
body.dark-mode .filter-input,
body.dark-mode .filter-input-flex,
body.dark-mode .filter-select { background:rgba(15,25,50,0.7);border-color:rgba(0,200,255,0.3);color:#bfe8ff; }
body.dark-mode .filter-input:focus { border-color:#00d4ff;box-shadow:0 0 0 3px rgba(0,200,255,0.15); }
/* header */
#panelClasificacion .clasif-header {
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 28px;border-bottom:1px solid rgba(255,255,255,0.06);
}
#panelClasificacion .clasif-title-box h1 {
  font-size:28px;font-weight:700;margin-bottom:6px;color:#ffffff;
  letter-spacing:-0.3px;
}
#panelClasificacion .clasif-title-box p {
  color:#8899bb;font-size:14px;
}
#panelClasificacion .clasif-actions {
  display:flex;gap:12px;align-items:center;
}
#panelClasificacion .clasif-search { position:relative; }
#panelClasificacion .clasif-search input {
  width:320px;height:44px;background:rgba(13,25,50,0.7);
  border:1px solid rgba(255,255,255,0.08);border-radius:10px;
  padding:0 42px 0 16px;color:#e0e8f0;outline:none;font-size:14px;
  transition:border-color 0.25s,box-shadow 0.25s;
}
#panelClasificacion .clasif-search input:focus {
  border-color:#2d7aff;box-shadow:0 0 0 3px rgba(45,122,255,0.12);
}
#panelClasificacion .clasif-search input::placeholder { color:#5a7294; }
#panelClasificacion .clasif-search svg {
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  opacity:0.5;
}
#panelClasificacion .clasif-btn {
  height:44px;border:none;border-radius:10px;padding:0 20px;
  font-weight:600;cursor:pointer;transition:all 0.25s;font-size:14px;white-space:nowrap;
}
#panelClasificacion .clasif-btn-primary {
  background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;
}
#panelClasificacion .clasif-btn-primary:hover {
  background:linear-gradient(135deg,#1d4ed8,#2563eb);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(37,99,235,0.35);
}
#panelClasificacion .clasif-btn-secondary {
  background:rgba(255,255,255,0.06);color:#b0c4e8;
  border:1px solid rgba(255,255,255,0.08);
}
#panelClasificacion .clasif-btn-secondary:hover {
  background:rgba(255,255,255,0.10);transform:translateY(-1px);
}
/* table */
#panelClasificacion .clasif-table-wrap { overflow:auto; }
#panelClasificacion table { width:100%;border-collapse:collapse; }
#panelClasificacion thead { background:rgba(11,22,44,0.7); }
#panelClasificacion thead th {
  text-align:left;padding:16px 20px;color:#5d8fcc;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
#panelClasificacion tbody tr { transition:background 0.2s; }
#panelClasificacion tbody tr:hover { background:rgba(255,255,255,0.03); }
#panelClasificacion tbody td {
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.04);
  vertical-align:middle;color:#d6e2f0;font-size:13px;
}
/* ID */
#panelClasificacion tbody td:nth-child(1) { font-weight:600;color:#99b8e6;min-width:100px;font-size:12px; }
/* keywords tags */
#panelClasificacion .clasif-tags { display:flex;flex-wrap:wrap;gap:6px;max-width:600px; }
#panelClasificacion .clasif-tag {
  background:rgba(30,58,100,0.5);color:#c8daf0;padding:5px 11px;
  border-radius:6px;font-size:12px;font-weight:500;
  transition:background 0.2s;
}
#panelClasificacion .clasif-tag:hover { background:rgba(40,75,130,0.6); }
/* category */
#panelClasificacion .clasif-category { display:flex;align-items:center;gap:10px;min-width:180px; }
#panelClasificacion .clasif-icon {
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
#panelClasificacion .clasif-icon.red { background:linear-gradient(135deg,#2563eb,#3b82f6); }
#panelClasificacion .clasif-icon.software { background:linear-gradient(135deg,#7c3aed,#a855f7); }
#panelClasificacion .clasif-icon.hardware { background:linear-gradient(135deg,#059669,#10b981); }
#panelClasificacion .clasif-icon.otro { background:linear-gradient(135deg,#6b7280,#9ca3af); }
#panelClasificacion .clasif-category span { font-weight:600;font-size:14px;color:#dce8f5;letter-spacing:0.3px; }
/* type */
#panelClasificacion tbody td:nth-child(4) { color:#94b4dd;font-weight:500;font-size:13px; }
/* priority */
#panelClasificacion .clasif-priority {
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:8px;font-weight:600;font-size:12px;
}
#panelClasificacion .clasif-priority::before {
  content:'';width:8px;height:8px;border-radius:50%;
}
#panelClasificacion .clasif-priority.critical { background:rgba(239,68,68,0.12);color:#f87171; }
#panelClasificacion .clasif-priority.critical::before { background:#ef4444; }
#panelClasificacion .clasif-priority.high { background:rgba(234,179,8,0.12);color:#fbbf24; }
#panelClasificacion .clasif-priority.high::before { background:#eab308; }
#panelClasificacion .clasif-priority.medium { background:rgba(59,130,246,0.12);color:#60a5fa; }
#panelClasificacion .clasif-priority.medium::before { background:#3b82f6; }
#panelClasificacion .clasif-priority.low { background:rgba(16,185,129,0.12);color:#34d399; }
#panelClasificacion .clasif-priority.low::before { background:#10b981; }
/* action buttons */
#panelClasificacion .clasif-actions-row { display:flex;gap:8px; }
#panelClasificacion .clasif-icon-btn {
  width:36px;height:36px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.04);
  color:#c0d4ec;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;font-size:15px;
}
#panelClasificacion .clasif-icon-btn:hover {
  background:rgba(255,255,255,0.10);transform:translateY(-1px);color:#fff;
}
#panelClasificacion .clasif-icon-btn.delete { color:#f87171; }
#panelClasificacion .clasif-icon-btn.delete:hover { background:rgba(239,68,68,0.15);color:#ef4444; }
/* add form */
#panelClasificacion .clasif-add-form {
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:18px 28px;border-top:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
}
#panelClasificacion .clasif-add-form select,
#panelClasificacion .clasif-add-form input {
  height:40px;background:rgba(13,25,50,0.6);color:#e0eaf5;
  border:1px solid rgba(255,255,255,0.08);border-radius:8px;
  padding:0 12px;outline:none;font-size:13px;
  transition:border-color 0.25s,box-shadow 0.25s;
}
#panelClasificacion .clasif-add-form input { width:240px; }
#panelClasificacion .clasif-add-form select:focus,
#panelClasificacion .clasif-add-form input:focus {
  border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.10);
}
#panelClasificacion .clasif-add-form .clasif-btn { height:40px; }
/* msg */
#panelClasificacion .clasif-msg { font-size:13px;font-weight:500;margin-left:8px;color:#60a5fa; }
/* footer */
#panelClasificacion .clasif-footer {
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 28px;border-top:1px solid rgba(255,255,255,0.06);
}
#panelClasificacion .clasif-footer p { color:#6d8bb5;font-size:13px; }
/* ID & tipo (no inline styles) */
#panelClasificacion tbody td.clasif-id { font-weight:600;color:#99b8e6;min-width:100px;font-size:12px; }
#panelClasificacion tbody td.clasif-tipo { color:#94b4dd;font-weight:500;font-size:13px; }

/* ===== LIGHT MODE ===== */
body:not(.dark-mode) #panelClasificacion .clasif-container {
  background:#ffffff;border:1px solid #e2e8f0;box-shadow:0 2px 12px rgba(0,0,0,0.05);
}
body:not(.dark-mode) #panelClasificacion .clasif-header {
  border-bottom:1px solid #eef2f6;
}
body:not(.dark-mode) #panelClasificacion .clasif-title-box h1 { color:#0f172a; }
body:not(.dark-mode) #panelClasificacion .clasif-title-box p { color:#64748b; }
body:not(.dark-mode) #panelClasificacion .clasif-search input {
  background:#f8fafc;border:1.5px solid #e2e8f0;color:#1e293b;
}
body:not(.dark-mode) #panelClasificacion .clasif-search input:focus {
  border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.08);
}
body:not(.dark-mode) #panelClasificacion .clasif-search input::placeholder { color:#94a3b8; }
body:not(.dark-mode) #panelClasificacion .clasif-search svg { fill:#94a3b8;opacity:1; }
body:not(.dark-mode) #panelClasificacion .clasif-btn-secondary {
  background:#f1f5f9;color:#475569;border:1.5px solid #e2e8f0;
}
body:not(.dark-mode) #panelClasificacion .clasif-btn-secondary:hover { background:#e2e8f0; }
body:not(.dark-mode) #panelClasificacion thead { background:#f8fafc; }
body:not(.dark-mode) #panelClasificacion thead th { color:#64748b;border-bottom:1px solid #eef2f6; }
body:not(.dark-mode) #panelClasificacion tbody tr:hover { background:#f8fafc; }
body:not(.dark-mode) #panelClasificacion tbody td { color:#334155;border-bottom:1px solid #f1f5f9; }
body:not(.dark-mode) #panelClasificacion tbody td.clasif-id { color:#64748b; }
body:not(.dark-mode) #panelClasificacion tbody td.clasif-tipo { color:#64748b; }
body:not(.dark-mode) #panelClasificacion .clasif-tag {
  background:#f1f5f9;color:#475569;
}
body:not(.dark-mode) #panelClasificacion .clasif-tag:hover { background:#e2e8f0; }
body:not(.dark-mode) #panelClasificacion .clasif-category span { color:#334155; }
body:not(.dark-mode) #panelClasificacion .clasif-icon { box-shadow:0 1px 4px rgba(0,0,0,0.08); }
body:not(.dark-mode) #panelClasificacion .clasif-priority.critical { background:#fef2f2;color:#dc2626; }
body:not(.dark-mode) #panelClasificacion .clasif-priority.high { background:#fffbeb;color:#d97706; }
body:not(.dark-mode) #panelClasificacion .clasif-priority.medium { background:#eff6ff;color:#2563eb; }
body:not(.dark-mode) #panelClasificacion .clasif-priority.low { background:#ecfdf5;color:#059669; }
body:not(.dark-mode) #panelClasificacion .clasif-icon-btn {
  border:1.5px solid #e2e8f0;background:#ffffff;color:#64748b;
}
body:not(.dark-mode) #panelClasificacion .clasif-icon-btn:hover {
  background:#f8fafc;color:#0f172a;border-color:#cbd5e1;
}
body:not(.dark-mode) #panelClasificacion .clasif-icon-btn.delete { color:#ef4444; }
body:not(.dark-mode) #panelClasificacion .clasif-icon-btn.delete:hover { background:#fef2f2;color:#dc2626;border-color:#fecaca; }
body:not(.dark-mode) #panelClasificacion .clasif-add-form {
  border-top:1px solid #eef2f6;background:#fafbfc;
}
body:not(.dark-mode) #panelClasificacion .clasif-add-form select,
body:not(.dark-mode) #panelClasificacion .clasif-add-form input {
  background:#ffffff;color:#1e293b;border:1.5px solid #e2e8f0;
}
body:not(.dark-mode) #panelClasificacion .clasif-add-form select:focus,
body:not(.dark-mode) #panelClasificacion .clasif-add-form input:focus {
  border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.08);
}
body:not(.dark-mode) #panelClasificacion .clasif-msg { color:#2563eb; }
body:not(.dark-mode) #panelClasificacion .clasif-footer { border-top:1px solid #eef2f6; }
body:not(.dark-mode) #panelClasificacion .clasif-footer p { color:#94a3b8; }

/* responsive */
@media (max-width:900px) {
  #panelClasificacion .clasif-header { flex-direction:column;gap:14px;align-items:flex-start; }
  #panelClasificacion .clasif-actions { width:100%;flex-wrap:wrap; }
  #panelClasificacion .clasif-search input { width:100%; }
}

/* ===== Admin table column layouts ===== */
#panelSla .admin-table { table-layout:fixed; }
#panelSla .admin-table thead th { padding:10px 12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;background:#f8fafc;color:#475569;border-bottom:2px solid #e2e8f0; }
body.dark-mode #panelSla .admin-table thead th { background:rgba(15,25,50,0.6);color:#7bcfff;border-bottom-color:rgba(0,200,255,0.12); }
#panelSla .admin-table tbody td { padding:10px 12px;font-size:13px;vertical-align:middle;color:#334155;border-bottom:1px solid #f1f5f9; }
body.dark-mode #panelSla .admin-table tbody td { color:#d6e2f0;border-bottom-color:rgba(255,255,255,0.04); }
#panelSla .admin-table tbody tr:hover { background:#f8fafc; }
body.dark-mode #panelSla .admin-table tbody tr:hover { background:rgba(255,255,255,0.03); }
#panelSla .admin-table tbody td:first-child { font-weight:600; }
body.dark-mode #panelSla .admin-table tbody td:first-child { color:#dbe7ff; }
#panelSla .admin-table thead th:nth-child(1) { width:14%; }
#panelSla .admin-table thead th:nth-child(2),
#panelSla .admin-table thead th:nth-child(3) { width:18%; }
#panelSla .admin-table thead th:nth-child(4) { width:20%; }
#panelSla .admin-table thead th:nth-child(5) { width:16%;text-align:center; }
#panelSla .admin-table thead th:nth-child(6) { width:14%;text-align:center; }
#panelSla .admin-table tbody td:nth-child(2),
#panelSla .admin-table tbody td:nth-child(3) { vertical-align:middle; }
#panelSla .admin-table tbody td:nth-child(5),
#panelSla .admin-table tbody td:nth-child(6) { text-align:center;vertical-align:middle; }

#panelServicios .admin-table { table-layout:fixed; }
#panelServicios .admin-table thead th { padding:10px 12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;background:#f8fafc;color:#475569;border-bottom:2px solid #e2e8f0; }
body.dark-mode #panelServicios .admin-table thead th { background:rgba(15,25,50,0.6);color:#7bcfff;border-bottom-color:rgba(0,200,255,0.12); }
#panelServicios .admin-table tbody td { padding:10px 12px;font-size:13px;vertical-align:middle;color:#334155;border-bottom:1px solid #f1f5f9; }
body.dark-mode #panelServicios .admin-table tbody td { color:#d6e2f0;border-bottom-color:rgba(255,255,255,0.04); }
#panelServicios .admin-table tbody tr:hover { background:#f8fafc; }
body.dark-mode #panelServicios .admin-table tbody tr:hover { background:rgba(255,255,255,0.03); }
#panelServicios .admin-table thead th:nth-child(1) { width:65%; }
#panelServicios .admin-table thead th:nth-child(2) { width:35%;text-align:center; }
#panelServicios .admin-table tbody td:nth-child(2) { text-align:center;white-space:nowrap; }

#panelConocimiento .admin-table thead th:nth-child(1) { width:24%; }
#panelConocimiento .admin-table thead th:nth-child(2) { width:14%;text-align:center; }
#panelConocimiento .admin-table thead th:nth-child(3) { width:38%; }
#panelConocimiento .admin-table thead th:nth-child(4) { width:16%; }
#panelConocimiento .admin-table thead th:nth-child(5) { width:14%;text-align:center; }
#panelConocimiento .admin-table tbody td:nth-child(2) { text-align:center; }
#panelConocimiento .admin-table tbody td:nth-child(3) { font-size:12px; }
#panelConocimiento .admin-table tbody td:nth-child(5) { text-align:center;white-space:nowrap; }

#panelAutoasign .admin-table thead th:nth-child(1) { width:30%;text-align:center; }
#panelAutoasign .admin-table thead th:nth-child(2) { width:42%; }
#panelAutoasign .admin-table thead th:nth-child(3) { width:28%;text-align:center; }
#panelAutoasign .admin-table tbody td:nth-child(1) { text-align:center; }
#panelAutoasign .admin-table tbody td:nth-child(3) { text-align:center;white-space:nowrap; }

/* ============================================================
   PORTAL USUARIO
   ============================================================ */

.ticket-item {
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-left: 4px solid #00369a;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.ticket-item:hover {
    box-shadow: 0 3px 10px rgba(0, 54, 154, 0.15);
    transform: translateX(2px);
}

/* --- Horas Extras --- */
#panelHorasextras .admin-table thead th:nth-child(1) { width:8%;text-align:center; }
#panelHorasextras .admin-table thead th:nth-child(2) { width:18%; }
#panelHorasextras .admin-table thead th:nth-child(3) { width:8%;text-align:center; }
#panelHorasextras .admin-table thead th:nth-child(4) { width:45%; }
#panelHorasextras .admin-table thead th:nth-child(5) { width:21%;text-align:center; }
#panelHorasextras .admin-table tbody td:nth-child(1) { text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums; }
#panelHorasextras .admin-table tbody td:nth-child(2) { white-space:nowrap; }
#panelHorasextras .admin-table tbody td:nth-child(3) { text-align:center;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums; }
#panelHorasextras .admin-table tbody td:nth-child(4) { word-break:break-word;line-height:1.5; }
#panelHorasextras .admin-table tbody td:nth-child(5) { white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums;font-size:12px;color:#64748b; }
body.dark-mode #panelHorasextras .admin-table tbody td:nth-child(5) { color:#94a3b8; }
#panelHorasextras .btn-primary,
#panelAccesos .btn-primary { margin-top:0;width:auto;padding:6px 20px;border-radius:8px;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;flex-shrink:0; }
/* --- Accesos --- */
#panelAccesos .admin-table thead th:nth-child(1) { width:18%; }
#panelAccesos .admin-table thead th:nth-child(2) { width:18%; }
#panelAccesos .admin-table thead th:nth-child(3) { width:10%;text-align:center; }
#panelAccesos .admin-table thead th:nth-child(4) { width:13%;text-align:center; }
#panelAccesos .admin-table thead th:nth-child(5) { width:17%; }
#panelAccesos .admin-table thead th:nth-child(6) { width:12%;text-align:center; }
#panelAccesos .admin-table thead th:nth-child(7) { width:12%;text-align:center; }
#panelAccesos .admin-table tbody td:nth-child(1) { font-weight:600;white-space:nowrap; }
#panelAccesos .admin-table tbody td:nth-child(2) { white-space:nowrap; }
#panelAccesos .admin-table tbody td:nth-child(3) { text-align:center;font-size:12px;color:#64748b;white-space:nowrap; }
#panelAccesos .admin-table tbody td:nth-child(4) { text-align:center;white-space:nowrap;font-size:12px;color:#64748b;font-variant-numeric:tabular-nums; }
#panelAccesos .admin-table tbody td:nth-child(5) { font-size:12px;color:#64748b;white-space:nowrap; }
#panelAccesos .admin-table tbody td:nth-child(6) { text-align:center;font-size:12px;white-space:nowrap; }
#panelAccesos .admin-table tbody td:nth-child(7) { text-align:center;white-space:nowrap; }
body.dark-mode #panelAccesos .admin-table tbody td:nth-child(3),
body.dark-mode #panelAccesos .admin-table tbody td:nth-child(4),
body.dark-mode #panelAccesos .admin-table tbody td:nth-child(5) { color:#94a3b8; }

.ticket-item .t-id {
    font-weight: 700;
    color: #00369a;
}

.ticket-item .t-titulo {
    font-weight: 600;
    font-size: 14px;
    color: #0f172a;
}

.ticket-item .t-meta {
    color: #334155;
    font-size: 12px;
    margin-top: 4px;
}

.ticket-item .t-asignado {
    color: #555;
    font-size: 12px;
}

.ticket-item .t-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.btn-ver-ticket {
    padding: 3px 12px;
    background: #00369a;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.btn-ver-ticket:hover {
    background: #002060;
}

.ticket-list {
    max-height: 450px;
    overflow-y: auto;
}

.empty-msg {
    color: #999;
    text-align: center;
    padding: 20px;
    font-size: 14px;
}

.encuesta-pendiente {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 15px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.encuesta-pendiente span {
    color: #856404;
}

.btn-encuesta {
    padding: 5px 14px;
    background: #ffc107;
    color: #856404;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.btn-encuesta:hover {
    background: #e0a800;
}

.portal-filtros {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.pf-btn {
    padding: 5px 14px;
    border: 2px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s;
}

.pf-btn:hover {
    border-color: #00369a;
    color: #00369a;
}

.pf-btn.activo {
    background: #00369a;
    color: #fff;
    border-color: #00369a;
}

.btn-refresh {
    padding: 5px 12px;
    border: 2px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
    color: #334155;
}

.btn-refresh:hover {
    border-color: #00369a;
    color: #00369a;
    background: #eef4ff;
}

.btn-refresh:active {
    transform: rotate(180deg);
}

.file-upload { margin-top: 12px;padding:12px 14px;border:2px dashed #d1d5db;border-radius:10px;background:#fafbfc;transition:all 0.2s; }

.file-upload.file-upload-dragover { border-color:#00369a;background:#eef4ff;box-shadow:0 0 0 4px rgba(0,54,154,0.08); }

.file-upload-label { display:block;font-size:13px;font-weight:600;color:#1e293b;margin-bottom:8px; }

.file-upload-btn-wrapper { display:flex;align-items:center;gap:10px; }

.file-upload-btn { padding:7px 16px;background:#00369a;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.15s;white-space:nowrap; }

.file-upload-btn:hover { background:#002a7a;transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,54,154,0.2); }

.file-upload-btn:active { transform:translateY(0); }

.file-upload-btn-wrapper input[type="file"] { display:none; }

.file-upload-hint { font-size:11px;color:#94a3b8; }

.file-upload input[type="file"] { font-size:13px;padding:6px 0;color:#475569; }
.file-upload input[type="file"]::file-selector-button { padding:6px 14px;background:#00369a;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;margin-right:10px;transition:background 0.2s; }
.file-upload input[type="file"]::file-selector-button:hover { background:#002a7a; }
body.dark-mode .file-upload input[type="file"] { color:#94a3b8; }
body.dark-mode .file-upload input[type="file"]::file-selector-button { background:linear-gradient(135deg,#00369a,#0055cc); }
body.dark-mode .file-upload { background:rgba(15,25,50,0.35);border-color:rgba(0,200,255,0.2); }
body.dark-mode .file-upload.file-upload-dragover { border-color:#00d4ff;background:rgba(0,200,255,0.08);box-shadow:0 0 0 4px rgba(0,200,255,0.1); }
body.dark-mode .file-upload-label { color:#bfe8ff; }
body.dark-mode .file-upload-btn { background:linear-gradient(135deg,#00369a,#0055cc); }
body.dark-mode .file-upload-btn:hover { background:linear-gradient(135deg,#002a7a,#0044aa);box-shadow:0 2px 8px rgba(0,200,255,0.25); }
body.dark-mode .file-upload-hint { color:#5a8aaa; }

.file-nombres { display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:12px;color:#334155; }
.file-nombres span { font-size:11px;background:#f1f5f9;padding:3px 8px;border-radius:4px;color:#475569; }
body.dark-mode .file-nombres span { background:rgba(0,200,255,0.1);color:#bfe8ff; }

/* ============================================================
   ENCUESTA
   ============================================================ */

.estrellas {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 25px;
}

.estrella {
    font-size: 42px;
    cursor: pointer;
    color: #D1D5DB;
    transition: color 0.2s;
    user-select: none;
    line-height: 1;
}

.estrella.activa,
.estrella:hover {
    color: #f5b342;
}

.gracias {
    display: none;
}

.gracias .icono {
    font-size: 64px;
    margin-bottom: 15px;
}

.gracias h2 {
    color: #27ae60;
}

.gracias p {
    color: #666;
    font-size: 14px;
}

.ticket-info {
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 13px;
}

.ticket-info strong {
    color: #00369a;
}

.calificacion-texto {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 5px;
}

/* ============================================================
   REPORTERIA
   ============================================================ */

.filtros .campo {
    display: flex;
    flex-direction: column;
}

.filtros .campo label {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.filtros .campo button {
    padding: 8px 24px;
    background: #00369a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

.filtros .campo button:hover {
    box-shadow: 0 4px 12px rgba(0,54,154,0.3);
}

.export-btn {
    margin-top: 10px;
    padding: 8px 20px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

.export-btn:hover {
    box-shadow: 0 4px 12px rgba(39,174,96,0.3);
}

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

body.dark-mode {
    background: #0d1224;
}

body.dark-mode .topnav {
    background: rgba(10, 20, 40, 0.5);
    border-bottom: 1px solid rgba(0, 200, 255, 0.25);
    backdrop-filter: blur(15px);
    box-shadow: 0 0 25px rgba(0, 150, 255, 0.1);
}

body.dark-mode .topnav .logo-area h2 { color: #7bcfff; }
body.dark-mode .topnav .nav-links a { color: #bfe8ff; }
body.dark-mode .topnav .nav-links a:hover { background: rgba(0, 60, 255, 0.2); }
body.dark-mode .topnav .nav-links a.activo {
    background: linear-gradient(90deg, #007bff, #00d4ff);
    box-shadow: 0 0 15px rgba(0, 160, 255, 0.5);
    color: #fff;
}
body.dark-mode .topnav .user-area .nombre { color: #e0e8f0; }

body.dark-mode .dash-container,
body.dark-mode .main-content { background: transparent; }
body.dark-mode .info-admin { background:rgba(0,30,60,0.6);border-left-color:#00d4ff;color:#bfe8ff; }

body.dark-mode .card-admin-form h2 { color:#e2e8f0;border-bottom-color:rgba(0,200,255,0.15); }
body.dark-mode .card-admin-list h2 { color:#e2e8f0; }
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .logo h1,
body.dark-mode .card h2,
body.dark-mode .card-blanca h3,
body.dark-mode .stat-card .num,
body.dark-mode .table-wrap h2,
body.dark-mode .user-info strong,
body.dark-mode .conversacion h2,
body.dark-mode .responder h2,
body.dark-mode .recientes h2 { color: #7bcfff; }

body.dark-mode p, body.dark-mode .user-info,
body.dark-mode .logo p, body.dark-mode .card label,
body.dark-mode .input-group label { color: #bfe8ff; }
body.dark-mode .card,
body.dark-mode .card-blanca,
body.dark-mode .login-card,
body.dark-mode .table-wrap,
body.dark-mode .stat-card,
body.dark-mode .recientes,
body.dark-mode .ticket-header,
body.dark-mode .conversacion,
body.dark-mode .responder {
    background: rgba(20, 30, 60, 0.55);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 200, 255, 0.25);
    box-shadow: 0 0 25px rgba(0, 150, 255, 0.2), inset 0 0 20px rgba(0, 80, 140, 0.25);
}

body.dark-mode .stat-card h3 { color: #8fa4c4; }
body.dark-mode .card-blanca p { color: #b0c4d8; }
body.dark-mode .card input,
body.dark-mode .card select,
body.dark-mode .card textarea {
    background: rgba(15,25,50,0.7);
    color: #bfe8ff;
    border-color: rgba(0,200,255,0.3);
}

body.dark-mode .agente-card strong { color: #e0e8f0; }

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: rgba(15, 25, 50, 0.7);
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: #bfe8ff;
}

body.dark-mode input:hover,
body.dark-mode select:hover,
body.dark-mode textarea:hover {
    border-color: #44d9ff;
    box-shadow: 0 0 10px rgba(0, 153, 255, 0.5);
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.6);
}

body.dark-mode .input-group input,
body.dark-mode .input-group select {
    background: rgba(15, 25, 50, 0.7);
    color: #bfe8ff;
}

body.dark-mode table th,
body.dark-mode table td {
    color: #bfe8ff;
    border-bottom-color: rgba(0, 255, 255, 0.1);
}

body.dark-mode table th {
    color: #78aaff;
}

body.dark-mode .badge.Abierto {
    background: rgba(0, 160, 255, 0.15);
    color: #36c3ff;
    border: 1px solid rgba(0, 180, 255, 0.3);
}

body.dark-mode .badge.En-Progreso {
    background: rgba(255, 180, 0, 0.15);
    color: #ffdd7a;
    border: 1px solid rgba(255, 200, 0, 0.3);
}

body.dark-mode .badge.Cerrado {
    background: rgba(0, 200, 100, 0.15);
    color: #44ee99;
    border: 1px solid rgba(0, 200, 100, 0.3);
}

body.dark-mode .badge.Crítica {
    background: rgba(255, 0, 51, 0.2);
    color: #ff0033;
    border: 1px solid rgba(255, 0, 51, 0.3);
}

body.dark-mode .badge.Alta {
    background: rgba(255, 140, 0, 0.2);
    color: #ff8c00;
    border: 1px solid rgba(255, 140, 0, 0.3);
}

body.dark-mode .badge.Media {
    background: rgba(0, 160, 255, 0.2);
    color: #36c3ff;
    border: 1px solid rgba(0, 180, 255, 0.3);
}

body.dark-mode .badge.Baja {
    background: rgba(0, 200, 100, 0.2);
    color: #44ee99;
    border: 1px solid rgba(0, 200, 100, 0.3);
}

/* Dark mode - Agent Panel special */
body.dark-mode .btn-asignar {
    background: linear-gradient(90deg, #0A6EDB, #19C3FF);
    box-shadow: 0 0 12px rgba(0,180,255,0.3);
}

body.dark-mode .btn-asignar:hover {
    box-shadow: 0 0 20px rgba(0,200,255,0.6);
}

body.dark-mode select.categoria-select {
    background: rgba(15,25,50,0.7);
    border-color: rgba(0,200,255,0.3);
    color: #bfe8ff;
}

body.dark-mode select.categoria-select:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 20px rgba(0,200,255,0.6);
}

body.dark-mode .btn-ver-detalle {
    background: linear-gradient(135deg, #1a2d50, #2a4a70);
    box-shadow: 0 0 8px rgba(0,180,255,0.15);
}

body.dark-mode .btn-ver-detalle:hover {
    box-shadow: 0 0 16px rgba(0,200,255,0.3);
}

body.dark-mode .btn-aplicar-todo {
    background: linear-gradient(90deg, #0A6EDB, #19C3FF);
    box-shadow: 0 0 12px rgba(0,180,255,0.3);
}

body.dark-mode .btn-aplicar-todo:hover {
    box-shadow: 0 0 20px rgba(0,200,255,0.6);
}

body.dark-mode .btn-notif {
    background: linear-gradient(90deg, #0A6EDB, #19C3FF);
    box-shadow: 0 0 12px rgba(0,180,255,0.3);
}

body.dark-mode .btn-notif:hover {
    box-shadow: 0 0 20px rgba(0,200,255,0.6);
}

body.dark-mode .notif-count {
    border-color: #0d1224;
}

body.dark-mode .notif-panel {
    background: #1e3a5f;
    border-color: #2a4a70;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

body.dark-mode .notif-header {
    color: #e0e8f0;
    background: #1e3a5f;
    border-bottom-color: #2a4a70;
}

body.dark-mode .notif-item {
    color: #c8d4e4;
    border-bottom-color: #2a4a70;
}

body.dark-mode .notif-item:hover {
    background: rgba(255,255,255,0.04);
}

body.dark-mode .notif-item.no-leida {
    background: rgba(74,125,255,0.1);
}

body.dark-mode .notif-item .notif-fecha {
    color: #5a8aaa;
}

body.dark-mode .notif-empty {
    color: #5a8aaa;
}

body.dark-mode .tabs {
    border-color: rgba(0,200,255,0.25);
    background: transparent;
}

body.dark-mode .tab {
    background: rgba(20,30,60,0.55);
    color: #bfe8ff;
    border-color: rgba(0,200,255,0.15);
}

body.dark-mode .tab:hover {
    background: rgba(0,60,255,0.2);
    border-color: #44d9ff;
}

body.dark-mode .tab.activo {
    background: linear-gradient(90deg, #007bff, #00d4ff);
    box-shadow: 0 0 15px rgba(0,160,255,0.5);
    color: #fff;
    border-color: transparent;
}


body.dark-mode .dark-toggle {
    border-color: rgba(0,200,255,0.3);
}

body.dark-mode .dark-toggle:hover {
    border-color: #00d4ff;
    background: rgba(0,60,255,0.2);
    box-shadow: 0 0 10px rgba(0,153,255,0.3);
}

body.dark-mode .dark-toggle-float {
    background: rgba(20,30,60,0.55);
    border-color: rgba(0,200,255,0.3);
    backdrop-filter: blur(15px);
}

body.dark-mode #togglePass { color: #bfe8ff; }

body.dark-mode .error-msg { color: #dc143c; }
body.dark-mode .success-msg { color: #44ee99; }

body.dark-mode .btn-enviar {
    background: linear-gradient(90deg, #007bff, #00d4ff);
    box-shadow: 0 0 15px rgba(0,160,255,0.3);
}

body.dark-mode .btn-enviar:hover {
    transform: scale(1.03);
    box-shadow: 0 0 25px rgba(0,200,255,0.8);
}

body.dark-mode .btn-enviar:active {
    transform: scale(0.98);
}

body.dark-mode .btn-login {
    background: linear-gradient(90deg, #007bff, #00d4ff);
    box-shadow: 0 0 15px rgba(0,160,255,0.3);
}

body.dark-mode .btn-login:hover {
    box-shadow: 0 0 25px rgba(0,200,255,0.8);
    transform: translateY(-3px) scale(1.01);
}

body.dark-mode .btn-primary {
    background: linear-gradient(90deg, #007bff, #00d4ff) !important;
    box-shadow: 0 0 15px rgba(0,160,255,0.3) !important;
}

body.dark-mode .btn-primary:hover {
    box-shadow: 0 0 25px rgba(0,200,255,0.8) !important;
}

body.dark-mode .no-responder { color: #5a8aaa; }
body.dark-mode .btn-peligro { background: #e67e22; }
body.dark-mode .btn-peligro:hover { box-shadow: 0 0 12px rgba(230,126,34,0.3); }
body.dark-mode .btn-editar { background: #1796DB; }
body.dark-mode .btn-editar:hover { box-shadow: 0 0 12px rgba(23,150,219,0.4); }
body.dark-mode .btn-activar { background: #00e676; color: #0a1225; }
body.dark-mode .btn-activar:hover { box-shadow: 0 0 12px rgba(0,230,118,0.4); }
body.dark-mode .btn-desactivar { background: #e74c3c; }
body.dark-mode .btn-desactivar:hover { box-shadow: 0 0 12px rgba(255,45,85,0.3); }

/* Dark mode - Portal */
body.dark-mode .pf-btn {
    background: #1f3455;
    border-color: #2a4a70;
    color: #b0c4d8;
}

body.dark-mode .pf-btn:hover {
    border-color: #5a8dff;
    color: #e0e8f0;
}

body.dark-mode .pf-btn.activo {
    background: #4a7dff;
    color: #fff;
    border-color: #4a7dff;
}

body.dark-mode .btn-refresh {
    background: #1f3455;
    border-color: #2a4a70;
    color: #b0c4d8;
}

body.dark-mode .btn-refresh:hover {
    border-color: #5a8dff;
    color: #e0e8f0;
    background: #2a4a70;
}

body.dark-mode .ticket-item {
    background: rgba(20,30,60,0.55);
    border-left-color: #00d4ff;
    border: 1px solid rgba(0,200,255,0.2);
}

body.dark-mode .ticket-item:hover {
    box-shadow: 0 0 25px rgba(0,150,255,0.2);
}

body.dark-mode .ticket-item .t-id { color: #00d4ff; }
body.dark-mode .ticket-item .t-titulo { color: #7bcfff; }
body.dark-mode .ticket-item .t-meta { color: #bfe8ff; }
body.dark-mode .ticket-item .t-asignado { color: #78aaff; }
body.dark-mode #camposParaOtro { background: rgba(20,30,60,0.55) !important; border-color: rgba(0,200,255,0.2) !important; }
body.dark-mode #camposParaOtro input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
body.dark-mode #camposParaOtro label { color: #bfe8ff; }
.req-asterisco { color: #e74c3c; }
.req-opcional { color: #999; font-weight:400; }
body.dark-mode .req-opcional { color: #5a8aaa; }

.card-header-row { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px; }
.card-header-row h2 { margin:0;flex-shrink:0; }
body.dark-mode .encuesta-pendiente { background: rgba(255,180,0,0.1); border-color: rgba(255,200,0,0.3); }
body.dark-mode .encuesta-pendiente span { color: #ffdd7a; }
body.dark-mode .empty-msg { color: #5a8aaa; }
body.dark-mode .file-nombres span { background: rgba(15,25,50,0.7); color: #bfe8ff; }
body.dark-mode .agente-card { border-bottom-color: rgba(0,255,255,0.1); }

/* Dark mode - Ticket Detail */
body.dark-mode .ticket-header .t-id { color: #00d4ff; }
body.dark-mode .btn-entrega-header {
    background: linear-gradient(135deg, #d35400, #e67e22);
}
body.dark-mode .ticket-header .t-titulo { color: #7bcfff; }
body.dark-mode .ticket-header .t-meta { color: #bfe8ff; }
body.dark-mode .conversacion h2 { color: #7bcfff; }
body.dark-mode .mensaje .burbuja {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
body.dark-mode .mensaje .burbuja .texto { color: #bfe8ff; }
body.dark-mode .mensaje .burbuja .fecha { color: #5a8aaa; }
body.dark-mode .mensaje.agente .burbuja { background: rgba(0,60,255,0.15); border-color: rgba(0,200,255,0.15); }
body.dark-mode .mensaje .avatar.usuario { background: linear-gradient(135deg, #007bff, #00d4ff); }
body.dark-mode .mensaje .burbuja .adjunto-item a { background: rgba(15,25,50,0.7); color: #00d4ff; border: 1px solid rgba(0,200,255,0.15); }
body.dark-mode .mensaje .burbuja .adjunto-item a:hover { background: rgba(0,200,255,0.15); }
body.dark-mode .mensaje .burbuja .adjunto-item img { border-color: rgba(0,200,255,0.2); }
body.dark-mode .mensaje .burbuja .adjuntos { border-top-color: rgba(0,200,255,0.15); }
body.dark-mode .responder h2 { color: #7bcfff; }
body.dark-mode .responder textarea { background: rgba(15,25,50,0.7); border: 1px solid rgba(0,200,255,0.3); color: #bfe8ff; }
body.dark-mode .responder textarea::placeholder { color: #5a8aaa; }
body.dark-mode .responder textarea:focus { border-color: #00d4ff; box-shadow: 0 0 20px rgba(0,200,255,0.6); }

body.dark-mode .mensaje .autor { color: #bfe8ff; }
body.dark-mode .mensaje .fecha { color: #5a8aaa; }
body.dark-mode #labelCerrar { color: #bfe8ff; }
body:not(.dark-mode) #labelCerrar { color: #1e293b; }

/* Dark mode - Encuesta */
body.dark-mode .card p { color: #bfe8ff; }
body.dark-mode .calificacion-texto { color: #bfe8ff; }
body.dark-mode .ticket-info strong { color: #00d4ff; }

/* Dark mode - Reporteria */
body.dark-mode .filtros .campo input,
body.dark-mode .filtros .campo select {
    border-color: #4a4a6a;
}

body.dark-mode .filtros .campo input:focus,
body.dark-mode .filtros .campo select:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 20px rgba(0,200,255,0.6);
}

body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
}

body.dark-mode input[type="date"] {
    color-scheme: dark;
}
/* Dark mode - Dashboard General agentes */

/* Dark mode - Admin SLA table */


body.dark-mode .sla-input {
    background: rgba(15,25,50,0.7) !important;
    border-color: rgba(0,200,255,0.3) !important;
    color: #bfe8ff !important;
}

body.dark-mode .sla-input:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 20px rgba(0,200,255,0.6) !important;
}

/* Dark mode - Toast adjustments */
body.dark-mode .toast {
    background: rgba(20,30,60,0.55);
    backdrop-filter: blur(20px);
    color: #bfe8ff;
    border-left-color: #00d4ff;
    border: 1px solid rgba(0,200,255,0.25);
}

body.dark-mode .toast h4 { color: #7bcfff; }
body.dark-mode .toast .cambios-lista li { color: #bfe8ff; border-bottom-color: rgba(0,255,255,0.1); }
body.dark-mode .toast .cerrar-toast { color: #78aaff; }
body.dark-mode .toast .cerrar-toast:hover { color: #fff; }
body.dark-mode .toast a { color: #00d4ff; }

/* ===== GENERAL KEYFRAMES ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .topnav { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 6px; }
    .topnav .nav-links { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; }
    .topnav .nav-links a { padding: 6px 12px; font-size: 12px; }
    .topnav .user-area { flex-wrap: wrap; justify-content: center; }
    .main-content { padding: 16px; }
    .dash-container, .dashboard-container { padding: 16px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
.grid-2 { grid-template-columns: 1fr; }
    .table-wrap { padding: 14px; }
    .table-wrap table { font-size: 12px; }
    .table-wrap th,
    .table-wrap td {
        padding: 4px 4px;
        font-size: 11px;
    }
    select.estado-select,
    select.asignar-select,
    select.prioridad-select,
    select.categoria-select,
    select.tipo-select {
        padding: 3px 4px;
        font-size: 11px;
        min-height: 26px;
        max-width: 90px;
    }
    .table-wrap .btn-small {
        padding: 3px 6px;
        font-size: 10px;
    }
    .tabs .tab {
        font-size: 11px;
        padding: 10px 6px;
    }
    .filtros {
        padding: 10px;
        gap: 4px;
    }
    .filtros select { min-width: 100px; }
    .filtro-search { width: 100px !important; }
    .filtros input[type="date"] { min-width: 100px; }
}

@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .table-wrap th,
    .table-wrap td {
        padding: 6px 4px;
        font-size: 11px;
    }
    .modal-contenido {
        margin: 20px;
        max-width: 100% !important;
    }
    .filtros { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .filtros select { min-width: 90px; }
    .filtro-search { width: 120px !important; }
    .notif-wrapper { align-self: flex-end; }
    select.estado-select,
    select.asignar-select,
    select.prioridad-select,
    select.categoria-select,
    select.tipo-select {
        padding: 2px 4px;
        font-size: 10px;
        min-height: 24px;
        max-width: 80px;
    }
    .tabs .tab { font-size: 11px; padding: 8px 6px; }
}

@media (max-width: 700px) {
    table th, table td { white-space: normal; }
    .grid-2 { grid-template-columns: 1fr; }
    .filtros { flex-direction: column; align-items: stretch; }
    .filtros select,
    .filtros input[type="text"],
    .filtros input[type="date"] {
        width: 100% !important;
        min-width: 0;
    }
    .filtro-search { width: 100% !important; }
    .tabs { flex-wrap: wrap; border-radius: 8px; }
    .tabs .tab { flex: 1 0 auto; font-size: 10px; padding: 8px 4px; min-width: 80px; }
}

@media (max-width: 600px) {
    .topnav .logo-area h2 { font-size: 13px; }
    .topnav .user-area .nombre { font-size: 11px; }
    .topnav .user-area .cerrar { font-size: 10px; padding: 4px 8px; }
    .topnav { padding: 8px 10px; }
    .topnav .user-area { gap: 6px; }
    .topnav .nav-links { gap: 2px; }
    .topnav .nav-links a { font-size: 10px; padding: 4px 6px; border-radius: 6px; }
    .dash-container, .dashboard-container { padding: 10px; }
    .table-wrap { padding: 10px; border-radius: 8px; }
    .table-wrap th,
    .table-wrap td {
        padding: 6px 4px;
        font-size: 10px;
    }
    .user-info { font-size: 11px; }
    .tabs .tab { font-size: 9px; padding: 6px 3px; min-width: 60px; }
    .tab-count { font-size: 8px; padding: 1px 4px; }
    .acciones-cell .btn-small {
        padding: 2px 4px;
        font-size: 8px;
    }
    select.estado-select,
    select.asignar-select,
    select.prioridad-select,
    select.categoria-select,
    select.tipo-select {
        padding: 2px 2px;
        font-size: 9px;
        min-height: 20px;
        max-width: 65px;
    }
}

@media (max-width: 500px) {
    .stats-grid { grid-template-columns: 1fr; }
    .toast { left: 10px; right: 10px; bottom: 10px; max-width: none; min-width: 0; }
    .topnav { padding: 6px 8px; gap: 4px; }
    .topnav .logo-area { gap: 4px; }
    .topnav .logo-area .icono img { height: 20px; }
    .topnav .logo-area h2 { font-size: 11px; }
    .topnav .user-area button { font-size: 10px !important; padding: 2px 4px !important; }
    .topnav .user-area .nombre { font-size: 10px; }
    .topnav .nav-links a { font-size: 9px; padding: 3px 5px; }
    .table-wrap th,
    .table-wrap td { padding: 4px 3px; font-size: 9px; }
    .tabs .tab { font-size: 8px; padding: 5px 2px; min-width: 50px; }
    .filtros { padding: 8px; }
    .filtros select,
    .filtros input { font-size: 10px; padding: 5px 6px; }
    .stats-grid { grid-template-columns: 1fr; }
    .toast { left: 10px; right: 10px; bottom: 10px; max-width: none; min-width: 0; }
    .topnav .user-area #btnCambiarPass,
    .topnav .user-area .btn-conocimiento-nav,
    .topnav .user-area .btn-sound-select,
    .topnav .user-area .dark-toggle {
        padding: 3px 5px !important;
        font-size: 14px !important;
    }
}

.admin-tabs { display:flex;gap:2px;margin-bottom:18px;border-bottom:2px solid #e2e8f0;padding:0 4px;overflow-x:auto; }
.admin-tab { padding:9px 18px;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;background:transparent;cursor:pointer;font-size:13px;font-weight:600;color:#64748b;white-space:nowrap;transition:all 0.2s;margin-bottom:-2px; }
.admin-tab:hover { background:#f1f5f9;color:#334155; }
.admin-tab.activo { background:#fff;color:#00369a;border-color:#e2e8f0;border-bottom:2px solid #fff;font-weight:700; }
body.dark-mode .admin-tabs { border-bottom-color: rgba(0,200,255,0.15); }
body.dark-mode .admin-tab { color:#5a8aaa; }
body.dark-mode .admin-tab:hover { background:rgba(0,200,255,0.06);color:#bfe8ff; }
body.dark-mode .admin-tab.activo { background:rgba(10,18,40,0.9);color:#00d4ff;border-color:rgba(0,200,255,0.2);border-bottom-color:rgba(10,18,40,0.9); }



/* ===== AGENT PANEL - RIPPLE EFFECT for table rows ===== */
body:not(.dark-mode) table tbody tr:hover { background: #f1f5f9; }
body.dark-mode table tbody tr:hover { background: rgba(0,60,255,0.08); }

/* Glow on hover for inputs */
body.dark-mode select.categoria-select:hover {
    border-color: #44d9ff;
    box-shadow: 0 0 10px rgba(0,153,255,0.4);
}

/* Acceso rápido buttons */
.btn-acceso.azul { background: #00369a; }
.btn-acceso.azul:hover { background: #002060; }
.btn-acceso.rojo { background: #fd0000; }
.btn-acceso.rojo:hover { background: #cc0000; }

/* ===== GLASS DESIGN (Legacy support) ===== */
body.dark-mode .dashboard,
body.dark-mode .topbar,
body.dark-mode .topbar .user-area .user {
    color: #e0e8f0;
}

body.dark-mode .topbar {
    background: rgba(10, 20, 40, 0.5);
    border-bottom: 1px solid rgba(0, 200, 255, 0.25);
    box-shadow: 0 0 25px rgba(0, 150, 255, 0.1);
}



/* Editor toolbar */
.editor-toolbar { display:flex;gap:4px;align-items:center;padding:6px 8px;background:#f8fafc;border:2px solid #d1d5db;border-bottom:none;border-radius:8px 8px 0 0;flex-wrap:wrap; }
.editor-btn { width:32px;height:30px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;font-size:13px;color:#475569;transition:all 0.15s; }
.editor-btn:hover { background:#e2e8f0;border-color:#cbd5e1; }
.editor-sep { width:1px;height:20px;background:#e2e8f0;margin:0 4px; }
body.dark-mode .editor-sep { background:rgba(0,200,255,0.15); }
body.dark-mode .editor-toolbar { background:rgba(10,18,40,0.5);border-color:rgba(0,200,255,0.2);border-width:2px 2px 0 2px; }
body.dark-mode .editor-btn { background:rgba(15,25,50,0.6);border-color:rgba(0,200,255,0.15);color:#bfe8ff; }
body.dark-mode .editor-btn:hover { background:rgba(0,200,255,0.15);border-color:#00d4ff; }

/* Portal-specific editor styling to blend with card */
.dash-container .editor-toolbar { background:transparent; }
.dash-container .editor-rich { background:transparent; }
body.dark-mode .dash-container .editor-toolbar { background:transparent; }
body.dark-mode .dash-container .editor-rich { background:transparent; }

/* Rich editor */
.editor-rich { min-height:80px;padding:10px 12px;border:2px solid #d1d5db;border-top:none;border-radius:0 0 8px 8px;font-size:13px;outline:none;background:#f8fafc;color:#1e293b;line-height:1.5;overflow-y:auto;transition:border-color 0.2s,box-shadow 0.2s; }
.editor-rich:focus { border-color:#00369a;box-shadow:0 0 0 3px rgba(0,54,154,0.08); }
.editor-rich[contenteditable=true]:empty:before { content:attr(data-placeholder);color:#94a3b8;pointer-events:none; }
body.dark-mode .editor-rich { background:rgba(15,25,50,0.7);border-color:rgba(0,200,255,0.3);color:#bfe8ff; }
body.dark-mode .editor-rich:focus { border-color:#00d4ff;box-shadow:0 0 0 3px rgba(0,200,255,0.1); }

/* Emoji panel */
.emoji-panel { position:absolute;bottom:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:8px;width:320px;max-height:220px;overflow-y:auto;box-shadow:0 8px 30px rgba(0,0,0,0.12);z-index:100;display:flex;flex-wrap:wrap;gap:2px; }
.emoji-panel span { cursor:pointer;font-size:22px;padding:4px;display:inline-block;transition:transform 0.15s;border-radius:4px; }
.emoji-panel span:hover { transform:scale(1.3);background:#f1f5f9; }
body.dark-mode .emoji-panel { background:rgba(20,30,60,0.95);border-color:rgba(0,200,255,0.25); }
body.dark-mode .emoji-panel span:hover { background:rgba(0,200,255,0.15); }

/* Firma preview in detail */
.firma-preview { font-size:12px;color:#64748b;padding:10px 14px;background:#f8fafc;border-radius:8px;margin-top:8px;margin-bottom:8px;border-left:3px solid #00369a;font-family:'Segoe UI',system-ui,sans-serif; }
body.dark-mode .firma-preview { background:rgba(10,18,40,0.6);border-left-color:#00d4ff;color:#bfe8ff; }
.firma-preview .firma-nombre { color:#1e293b; }
.firma-preview .firma-info { color:#475569; }
body.dark-mode .firma-preview .firma-nombre { color:#bfe8ff; }
body.dark-mode .firma-preview .firma-info { color:#94a3b8; }

.firma-sep { color:#94a3b8; }
body.dark-mode .firma-sep { color:#4a4a6a; }

/* Firma edit panel */
.firma-panel { background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.dark-mode .firma-panel { background:rgba(10,18,40,0.7);border-color:rgba(0,200,255,0.15);box-shadow:0 2px 12px rgba(0,0,0,0.3); }
.firma-panel h4 { margin:0 0 4px 0;font-size:14px;color:#1e293b; }
body.dark-mode .firma-panel h4 { color:#e2e8f0; }
.firma-panel p.desc { font-size:12px;color:#64748b;margin:0 0 12px 0; }
body.dark-mode .firma-panel p.desc { color:#94a3b8; }
.firma-panel .firma-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.firma-panel .firma-grid label { font-size:11px;color:#64748b;display:block;margin-bottom:2px;font-weight:500; }
body.dark-mode .firma-panel .firma-grid label { color:#94a3b8; }
.firma-panel .firma-grid input { width:100%;padding:7px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;box-sizing:border-box;outline:none;transition:border-color 0.2s;background:#fff;color:#1e293b; }
.firma-panel .firma-grid input:focus { border-color:#00369a;box-shadow:0 0 0 2px rgba(0,54,154,0.12); }
body.dark-mode .firma-panel .firma-grid input { background:rgba(15,25,50,0.8);border-color:rgba(0,200,255,0.2);color:#e2e8f0; }
body.dark-mode .firma-panel .firma-grid input:focus { border-color:#00d4ff;box-shadow:0 0 0 2px rgba(0,212,255,0.15); }

/* Firma preview inside edit panel */
.firma-preview-edit { display:none;margin-top:10px;padding:14px 18px;background:#f1f5f9;border-radius:10px;border-left:4px solid #00369a;font-size:13px;color:#1e293b;font-family:'Segoe UI',system-ui,sans-serif;box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.firma-preview-edit #firmaAdminLinea1 { color:#1e293b; }
.firma-preview-edit #firmaAdminLinea2 { color:#475569; }
body.dark-mode .firma-preview-edit { background:rgba(10,18,40,0.5);border-left-color:#00d4ff;color:#bfe8ff; }
body.dark-mode .firma-preview-edit #firmaAdminLinea1,
body.dark-mode .firma-preview-edit #firmaAdminLinea2 { color:#bfe8ff; }
.firma-preview-edit img { max-width:100%;height:auto; }

/* Firma guardar button */
.btn-firma-guardar { margin-top:8px;background:linear-gradient(135deg,#00369a,#0055cc);color:#fff;border:none;border-radius:6px;padding:6px 18px;cursor:pointer;font-size:12px;font-weight:600;transition:opacity 0.2s; }
.btn-firma-guardar:hover { opacity:0.9; }
body.dark-mode .btn-firma-guardar { background:linear-gradient(135deg,#00369a,#0077aa); }
#firmaMsgDetalle { margin-left:10px;font-size:12px;color:#27ae60; }
/* Firma button in topnav */


/* ===== FILE REMOVE BUTTON ===== */
.file-item { display:inline-flex;align-items:center;gap:4px;background:#e8f0fe;padding:3px 8px;border-radius:4px;margin:2px;font-size:11px; }
.file-item .remove-file { cursor:pointer;color:#e74c3c;font-weight:700;font-size:14px;line-height:1;padding:0 2px; }
.file-item .remove-file:hover { color:#c0392b; }
body.dark-mode .file-item { background:rgba(0,200,255,0.1);color:#bfe8ff; }

/* ===== FONT SELECTOR ===== */
.font-select { padding:4px 6px;border:1px solid #d1d5db;border-radius:6px;font-size:12px;background:#fff;color:#1e293b;cursor:pointer;outline:none;height:30px; }
.font-select:hover { border-color:#00369a; }
.font-select:focus { border-color:#00369a;box-shadow:0 0 0 2px rgba(0,54,154,0.08); }
body.dark-mode .font-select { background:rgba(15,25,50,0.6);border-color:rgba(0,200,255,0.2);color:#bfe8ff; }
body.dark-mode .font-select:hover, body.dark-mode .font-select:focus { border-color:#00d4ff; }

.font-group { display:inline-flex;align-items:center;gap:2px;padding:0;background:transparent;border:none; }
.font-group .font-select { padding:2px 4px;font-size:11px;height:28px;min-width:70px;border-radius:6px; }
.editor-toolbar .font-group input[type="color"] { width:32px;height:30px;padding:1px;border-radius:6px;border:1px solid #e2e8f0;cursor:pointer;background:#fff;box-sizing:border-box;flex-shrink:0; }

#fontSelectorDesc { min-width:110px; }

/* Font size override for execCommand */
font[size="1"] { font-size:10px !important; }
font[size="2"] { font-size:12px !important; }
font[size="3"] { font-size:14px !important; }
font[size="4"] { font-size:16px !important; }
font[size="5"] { font-size:20px !important; }
font[size="6"] { font-size:24px !important; }
font[size="7"] { font-size:28px !important; }

/* Color picker in toolbar */
.editor-toolbar input[type="color"] { width:32px;height:30px;padding:1px;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;background:#fff;vertical-align:middle;box-sizing:border-box; }
.editor-toolbar input[type="color"]:hover { border-color:#cbd5e1; }
body.dark-mode .editor-toolbar input[type="color"] { background:rgba(15,25,50,0.6);border-color:rgba(0,200,255,0.15); }

/* ===== HISTORIAL ===== */
.historial { background:#fff;border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.historial h2 { font-size:15px;color:#1e293b;margin-bottom:12px; }
#opcionesEnvio { display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px; }
#labelCerrar { font-size:13px;font-weight:600;cursor:pointer;align-items:center;gap:6px; }
.historial-toggle { cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px; }
.historial-toggle:hover { opacity:0.7; }
body.dark-mode .historial-toggle:hover { opacity:0.85; }
.toggle-icon { font-size:12px;color:#94a3b8;transition:transform 0.2s; }
body.dark-mode .toggle-icon { color:#5a8aaa; }
.historial-item { padding:8px 12px;border-left:3px solid #00369a;margin-bottom:8px;background:#f8fafc;border-radius:0 6px 6px 0;font-size:12px; }
.historial-item .h-fecha { font-size:10px;color:#94a3b8; }
.historial-item .h-usuario { font-weight:600;color:#00369a; }
.historial-item .h-accion { display:inline-block;padding:1px 8px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;margin:0 4px; }
.historial-item .h-accion.creado { background:#dbeafe;color:#1e40af; }
.historial-item .h-accion.asignado { background:#d1fae5;color:#065f46; }
.historial-item .h-accion.cerrado { background:#fce7f3;color:#9d174d; }
.historial-item .h-accion.cambio { background:#fef3c7;color:#92400e; }
body.dark-mode .historial { background:rgba(20,30,60,0.55);backdrop-filter:blur(20px);border:1px solid rgba(0,200,255,0.25); }
body.dark-mode .historial h2 { color:#7bcfff; }
body.dark-mode .historial-item { background:rgba(10,18,40,0.5);border-left-color:#00d4ff;color:#bfe8ff; }
body.dark-mode .historial-item .h-fecha { color:#5a8aaa; }
body.dark-mode .historial-item .h-usuario { color:#00d4ff; }
body.dark-mode .historial-item .h-accion.creado { background:rgba(30,64,175,0.3);color:#93c5fd; }
body.dark-mode .historial-item .h-accion.asignado { background:rgba(6,95,70,0.3);color:#6ee7b7; }
body.dark-mode .historial-item .h-accion.cerrado { background:rgba(157,23,77,0.3);color:#f9a8d4; }
body.dark-mode .historial-item .h-accion.cambio { background:rgba(146,64,14,0.3);color:#fcd34d; }

/* ===== SOLICITANTE INFO ===== */
.solicitante-info { background:#f0f5fa;border-radius:8px;padding:10px 14px;margin-top:8px;font-size:12px;color:#475569;display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
body.dark-mode .solicitante-info { background:rgba(10,18,40,0.5);color:#bfe8ff; }

/* ===== SAD FACE UNRATED ===== */
.sad-unrated { display:inline-flex;align-items:center;gap:4px;color:#e74c3c;font-weight:700;font-size:13px;text-decoration:none;padding:3px 10px;border-radius:6px;background:#fce7f3;white-space:nowrap;border:1px solid #f9a8d4; }
.sad-unrated:hover { background:#fbcfe8; }
body.dark-mode .sad-unrated { background:rgba(231,76,60,0.15);color:#ff6b81; }

/* ===== ADMIN COLUMNAS ===== */
.admin-columns { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.admin-columns .card { margin-bottom:0; }
.admin-columns-usuarios { min-height:420px;grid-template-columns:minmax(340px,480px) 1fr; }
.admin-columns-2 { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.admin-columns-2 .card { margin-bottom:0; }
.servicios-add-card { background:#f8fafc;border-radius:10px;padding:14px;border:1px solid #e2e8f0; }
body.dark-mode .servicios-add-card { background:rgba(10,18,40,0.4);border-color:rgba(0,200,255,0.15); }
.clasif-grid-cols { display:grid;grid-template-columns:1fr; }
.admin-user-form { display:grid;grid-template-columns:1fr 1fr;gap:6px 12px; }
.admin-user-form > div { display:flex;flex-direction:column; }
.admin-user-form .form-full { grid-column:1 / -1; }
.admin-user-form .form-actions { grid-column:1 / -1;display:flex;gap:8px;align-items:center;margin-top:4px; }
.admin-user-form label { font-size:11px;margin-bottom:2px;color:#1e293b;font-weight:600; }
.admin-user-form input,.admin-user-form select { padding:6px 8px;font-size:12px;border:1.5px solid #e2e8f0;border-radius:6px;background:#fafbfc;transition:border-color 0.2s,box-shadow 0.2s,background 0.2s; }
.admin-user-form input:focus,.admin-user-form select:focus { border-color:#00369a;background:#fff;box-shadow:0 0 0 3px rgba(0,54,154,0.08); }
body.dark-mode .admin-user-form input,body.dark-mode .admin-user-form select { background:rgba(15,25,50,0.7);border-color:rgba(0,200,255,0.2);color:#bfe8ff; }
body.dark-mode .admin-user-form input:focus,body.dark-mode .admin-user-form select:focus { border-color:#00d4ff;box-shadow:0 0 0 3px rgba(0,200,255,0.1); }
.card-admin-form { padding:14px; }
.card-admin-form h2 { font-size:14px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #e2e8f0;color:#0f172a; }
.card-admin-list h2 { font-size:15px;margin-bottom:10px;color:#0f172a; }
.firma-admin-section { margin-top:6px;padding:10px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0;box-sizing:border-box; }
body.dark-mode .firma-admin-section { background:rgba(10,18,40,0.5);border-color:rgba(0,200,255,0.15); }
.firma-admin-toggle { font-weight:600;font-size:12px;cursor:pointer;display:block; }
.firma-admin-hint { font-size:10px;color:#64748b; }
body.dark-mode .firma-admin-hint { color:#5a8aaa; }
.firma-admin-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px;width:100%;box-sizing:border-box; }
.firma-admin-grid label { font-size:10px;color:#64748b;display:block; }
body.dark-mode .firma-admin-grid label { color:#5a8aaa; }
.firma-admin-grid input { width:100%;padding:5px 6px;font-size:11px;box-sizing:border-box; }
.btn-cancel {
    padding: 10px 24px;
    background: #e2e8f0;
    color: #475569;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-cancel:hover {
    background: #cbd5e1;
    transform: translateY(-1px);
}
.btn-cancel-edit { padding:8px;font-size:13px;margin-top:6px;background:#6c757d !important; }
body.dark-mode .btn-cancel-edit { background:#4a5568 !important; }
.admin-search-input { width:100%;padding:9px 12px;border:2px solid #e2e8f0;border-radius:8px;font-size:13px;outline:none;margin-bottom:10px;box-sizing:border-box;background:#fafbfc;transition:border-color 0.2s,box-shadow 0.2s,background 0.2s; }
.admin-table-wrap { overflow-x:auto; }
.admin-table-wrap table { width:100%; }
.admin-search-input:focus { border-color:#00369a;background:#fff;box-shadow:0 0 0 3px rgba(0,54,154,0.08); }
body.dark-mode .admin-search-input { border-color:rgba(0,200,255,0.2);background:rgba(15,25,50,0.7);color:#bfe8ff; }
body.dark-mode .admin-search-input:focus { border-color:#00d4ff;box-shadow:0 0 0 3px rgba(0,200,255,0.1); }
.form-full { grid-column:1/-1; }
.form-actions { display:flex;gap:8px;margin-top:10px; }
.form-actions .btn-primary { margin-top:0;padding:10px;font-size:13px; }
.card-admin-list { display:flex;flex-direction:column; }
.card-admin-list h2 { flex-shrink:0; }
.card-admin-list table { table-layout:fixed; }
.card-admin-list table thead th:nth-child(1),
.card-admin-list table tbody td:nth-child(1) { width:14%; }
.card-admin-list table thead th:nth-child(2),
.card-admin-list table tbody td:nth-child(2) { width:20%; }
.card-admin-list table thead th:nth-child(3),
.card-admin-list table tbody td:nth-child(3) { width:15%;text-align:center; }
.card-admin-list table thead th:nth-child(4),
.card-admin-list table tbody td:nth-child(4) { width:11%;text-align:center; }
.card-admin-list table thead th:nth-child(5),
.card-admin-list table tbody td:nth-child(5) { width:10%;text-align:center; }
.card-admin-list table thead th:nth-child(6),
.card-admin-list table tbody td:nth-child(6) { width:30%;text-align:center; }
.user-list-large { max-height:500px !important;overflow-y:auto;flex:1; }
.user-list-large table { min-width:500px; }
.user-list-total { text-align:center;margin-top:8px;font-size:12px;color:#888;flex-shrink:0;padding:8px 0 0;border-top:1px solid #eef2f6; }
body.dark-mode .user-list-total { color:#5a8aaa;border-top-color:rgba(0,200,255,0.08); }
@media (max-width:750px) { .admin-columns { grid-template-columns:1fr; } }
/* ===== ADMIN UNIFIED FORM SECTIONS ===== */


/* ===== PANEL CHECKBOXES ===== */
.panel-check { font-size:13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;color:#334155;white-space:nowrap; }
.panel-check input[type="checkbox"] { width:16px;height:16px;accent-color:#00369a;margin:0;cursor:pointer; }
body.dark-mode .panel-check { color:#bfe8ff; }
body.dark-mode .panel-check input[type="checkbox"] { accent-color:#00d4ff; }
.panels-row { display:grid;grid-template-columns:repeat(3,auto);gap:10px 20px;padding-top:4px; }
.panels-label { font-size:13px;font-weight:600;color:#1e293b;display:block;margin-bottom:3px; }
body.dark-mode .panels-label { color:#bfe8ff; }

/* ===== CANCEL BUTTON ORANGE ===== */
.btn-cancel-servicio { padding:8px 20px;background:linear-gradient(135deg,#e67e22,#d35400);color:#fff;border:none;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.25s ease; }
.btn-cancel-servicio:hover { box-shadow:0 4px 12px rgba(230,126,34,0.4);transform:translateY(-1px); }
/* ===== PDF EXPORT BUTTON ===== */

/* ===== BUTTON MOTION CONSISTENCY ===== */
button,
[class^="btn-"],
[class*=" btn-"],
.link-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
button:hover:not(:disabled),
[class^="btn-"]:hover:not(:disabled),
[class*=" btn-"]:hover:not(:disabled),
.link-btn:hover {
    transform: translateY(-1px);
}
button:active:not(:disabled),
[class^="btn-"]:active:not(:disabled),
[class*=" btn-"]:active:not(:disabled),
.link-btn:active {
    transform: translateY(0);
}

/* ===== PRINT STYLES ===== */
@media print {
    body * { visibility:hidden; }
    #printArea, #printArea * { visibility:visible; }
    #printArea { position:absolute;left:0;top:0;width:100%;background:#fff;color:#000;padding:20px; }
.topnav,
.responder,
#btnVolver,
#btnCerrar,
#btnDarkMode,
#btnFirmaDetalle,
.btn-enviar { display:none !important; }
}

/* ===== EMAIL LOG PANEL ===== */
.email-log-item { padding:8px 12px;border-bottom:1px solid #eef2f6;font-size:12px;color:#475569; }
.email-log-item:last-child { border-bottom:none; }
.email-log-item .el-fecha { font-size:10px;color:#94a3b8; }
.email-log-item .el-asunto { font-weight:600;color:#1e293b; }
.email-log-item .el-dest { color:#00369a; }
body.dark-mode .email-log-item { border-bottom-color:rgba(0,200,255,0.1);color:#bfe8ff; }
body.dark-mode .email-log-item .el-fecha { color:#5a8aaa; }
body.dark-mode .email-log-item .el-asunto { color:#7bcfff; }
body.dark-mode .email-log-item .el-dest { color:#00d4ff; }
/* ===== KNOWLEDGE BASE ARTICLES IN MODAL ===== */


/* ===== AGENTE FILTERS ===== */
.notif-wrapper { position:relative;display:inline-flex;gap:6px;align-items:center;flex-shrink:0;white-space:nowrap; }
.notif-wrapper .btn-notif { white-space:nowrap; }
.btn-conocimiento-nav { padding:5px 12px;background:linear-gradient(135deg,#00369a,#0055cc);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap; }
.btn-conocimiento-nav:hover { background:linear-gradient(135deg,#002a7a,#0044aa); }
body.dark-mode .btn-conocimiento-nav { background:linear-gradient(135deg,#00369a,#0055cc); }

/* Chat modal */
.chat-modal { max-width:600px;height:500px;display:flex;flex-direction:column;padding:0;overflow:hidden; }
.chat-mensajes { flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px; }
.ticket-list,
.user-list-large,
.admin-table-wrap,
.modal-body,
.activo-body,
.asig-body,
#misTickets {
    scrollbar-gutter: stable both-edges;
}
.ticket-list {
    overscroll-behavior: contain;
}
.chat-footer { display:flex;gap:8px;padding:12px 20px;border-top:1px solid #e2e8f0;flex-shrink:0; }
body.dark-mode .chat-footer { border-top-color:rgba(0,200,255,0.15); }
.chat-input { flex:1;padding:10px 12px;border:2px solid #D1D5DB;border-radius:8px;font-size:13px;outline:none; }
body.dark-mode .chat-input { border-color:rgba(0,200,255,0.2);background:rgba(15,25,50,0.7);color:#bfe8ff; }
.btn-chat-enviar { background:#00369a;color:#fff;border:none;border-radius:8px;padding:10px 18px;cursor:pointer;font-size:13px;font-weight:600; }
.btn-chat-enviar:hover { background:#002a7a; }
body.dark-mode .btn-chat-enviar { background:#0055cc; }
body.dark-mode .btn-chat-enviar:hover { background:#0044aa; }

/* ===== FIRMA BUTTON NAV ===== */
.btn-firma-nav { padding:5px 12px;background:linear-gradient(135deg,#00369a,#0055cc);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600; }
.btn-firma-nav:hover { background:linear-gradient(135deg,#002a7a,#0044aa); }
body.dark-mode .btn-firma-nav { background:linear-gradient(135deg,#00369a,#0055cc); }
body.dark-mode .btn-firma-nav:hover { background:linear-gradient(135deg,#002a7a,#0044aa); }

/* Color picker class */
.editor-color-picker { width:32px;height:30px;padding:1px;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;background:#fff;vertical-align:middle;box-sizing:border-box; }
.editor-color-picker:hover { border-color:#cbd5e1; }
body.dark-mode .editor-color-picker { background:rgba(15,25,50,0.6);border-color:rgba(0,200,255,0.15); }

/* Modal header/body */
.modal-header { display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #e2e8f0;flex-shrink:0; }
body.dark-mode .modal-header { border-bottom-color:rgba(0,200,255,0.15); }
.modal-close-btn { background:none;border:none;font-size:22px;cursor:pointer;color:#999;padding:0 4px; }
.modal-close-btn:hover { color:#475569; }
body.dark-mode .modal-close-btn { color:#5a8aaa; }
body.dark-mode .modal-close-btn:hover { color:#bfe8ff; }
.modal-body { flex:1;overflow-y:auto;padding:12px 16px; }
.modal-loading { text-align:center;color:#999;padding:30px; }
body.dark-mode .modal-loading { color:#5a8aaa; }
body.dark-mode #cambiarPassDropdownAgente { background:#1e293b; border-color:#334155; }
body.dark-mode #cambiarPassDropdownAgente input { background:#0f172a; border-color:#334155; color:#e2e8f0; }
body.dark-mode #cambiarPassDropdownAgente label { color:#bfe8ff !important; }
body.dark-mode #cambiarPassDropdownAgente h3 { color:#e2e8f0; }
body.dark-mode #cambiarPassDropdownAgente .btn-cerrar { color:#5a8aaa; }

/* ===== SAVING OVERLAY ===== */
.saving-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  cursor: wait;
}
.saving-content {
  background: #fff; border-radius: 12px; padding: 30px 40px;
  text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.saving-spinner {
  width: 40px; height: 40px; border: 4px solid #e0e0e0;
  border-top-color: #2979ff; border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto 12px;
}
.saving-text { font-size: 16px; color: #333; font-weight: 500; }
/* Overlay captura clics al estar sobre todo el viewport */
.saving-overlay.modal-active { pointer-events: auto; }
body.modal-active { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Dark mode support */
.dark-mode .saving-content { background: #2a2a45; }
.dark-mode .saving-text { color: #e0e0f0; }
.dark-mode .saving-spinner { border-color: #3a3a55; border-top-color: #5b8def; }

/* ===== ASIGNACIÓN DE ACTIVOS — FORMULARIO PROFESIONAL ===== */
.activo-modal { max-width:960px !important; padding:0 !important; overflow:hidden !important; border-radius:24px !important; }
.activo-header { background:linear-gradient(135deg,#021b5b,#1a3a7a); padding:24px 32px; text-align:center; }
.activo-header h2 { color:#fff; font-size:20px; font-weight:700; margin:0; }
.activo-header p { color:#8ba4d4; font-size:12px; margin:4px 0 0; }
.activo-body { padding:28px 32px; max-height:75vh; overflow-y:auto; }
.activo-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.activo-col { display:flex; flex-direction:column; gap:8px; }
.activo-col h4 { font-size:13px; color:#1e293b; margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; gap:6px; }
.activo-col label { font-size:11px; font-weight:600; color:#475569; display:block; margin-bottom:1px; }
.activo-col input, .activo-col textarea, .activo-col select {
    width:100%; padding:7px 9px; border:1.5px solid #d1d5db; border-radius:6px; font-size:12px;
    outline:none; box-sizing:border-box; background:#f1f5f9; color:#1e293b; cursor:default; resize:none;
}
.activo-col input[readonly] { background:#f1f5f9; color:#475569; }
.activo-col input:not([readonly]), .activo-col textarea:not([readonly]) { background:#fff; cursor:text; }
.activo-col input:focus, .activo-col textarea:not([readonly]):focus { border-color:#4361ee; box-shadow:0 0 0 2px rgba(67,97,238,0.1); }
.activo-full { grid-column:1/-1; }
.activo-item-inline { display:flex; flex-wrap:wrap; gap:6px; padding:8px; background:#f8fafc; border-radius:6px; border:1px solid #eef2f6; margin-bottom:6px; align-items:center; }
.activo-item-inline select { flex:2; min-width:80px; height:30px; padding:2px 6px; }
.activo-item-inline input { flex:1; min-width:80px; height:30px; padding:2px 6px; background:#f1f5f9; }

/* Status badges */
.activo-badge { padding:6px 12px; border-radius:8px; font-size:12px; font-weight:700; text-align:center; display:inline-block; }
.activo-badge.pendiente { background:#fffbeb; color:#92400e; border:2px solid #fbbf24; }
.activo-badge.aprobado { background:#ecfdf5; color:#065f46; border:2px solid #34d399; }
.activo-badge.rechazado { background:#fef2f2; color:#991b1b; border:2px solid #fca5a5; }
.activo-badge.enviado { background:#eff6ff; color:#1e40af; border:2px solid #60a5fa; }
.activo-badge.devuelto { background:#f5f3ff; color:#5b21b6; border:2px solid #c4b5fd; }
.activo-badge.parcial { background:#fff7ed; color:#9a3412; border:2px solid #fdba74; }
.activo-badge.temporal { background:#ecfeff; color:#155e75; border:2px solid #67e8f9; }

/* Mis tareas: contador en el botón de la barra y acciones de la tabla */
.tareas-count { display:inline-block; min-width:16px; padding:1px 5px; margin-left:5px; border-radius:9999px; background:#dc2626; color:#fff; font-size:10px; font-weight:700; line-height:14px; text-align:center; }
.tarea-btn { cursor:pointer; border-radius:9999px; font-size:11px; font-weight:600; padding:3px 9px; white-space:nowrap; }
.tarea-btn.tarea-proceso { background:#eff6ff; color:#1e40af; border:1px solid #93c5fd; }
.tarea-btn.tarea-resuelto { background:#ecfdf5; color:#065f46; border:1px solid #6ee7b7; }
.tarea-btn.tarea-rechazado { background:#fef2f2; color:#991b1b; border:1px solid #fca5a5; }

/* Signature section */
.activo-sig-section { border:1.5px solid #e2e8f0; border-radius:12px; padding:20px; background:#fafcff; margin-top:4px; }
.activo-sig-section h4 { font-size:13px; color:#021b5b; margin:0 0 16px; padding-bottom:8px; border-bottom:2px solid #eef2ff; display:flex; align-items:center; gap:6px; }
.activo-sig-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.activo-sig-preview { border:1px solid #e2e8f0; border-radius:6px; padding:8px; background:#fff; min-height:40px; display:flex; align-items:center; justify-content:center; }
.activo-sig-preview img { max-width:100%; max-height:40px; object-fit:contain; display:block; }
.activo-sig-label { font-size:11px; font-weight:600; color:#475569; display:block; margin-bottom:3px; }
/* View mode fields (Ver detalle PDF preview) */


/* Validation box (policy acceptance) */
.activo-val-box { background:#fff; border:2px solid #e2e8f0; border-radius:10px; padding:16px; margin-top:12px; }
.activo-val-box h5 { font-size:12px; font-weight:700; color:#021b5b; margin:0 0 12px; display:flex; align-items:center; gap:6px; }
.activo-val-check { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#f8fafc; border-radius:8px; border:1px solid #eef2f6; cursor:pointer; transition:all 0.2s; }
.activo-val-check:hover { border-color:#cbd5e1; background:#f1f5f9; }
.activo-val-check input[type="checkbox"] { width:18px; height:18px; accent-color:#021b5b; cursor:pointer; flex-shrink:0; }
.activo-val-check label { font-size:13px; color:#1e293b; cursor:pointer; user-select:none; font-weight:500; flex:1; }
.activo-val-divider { display:flex; align-items:center; gap:12px; margin:12px 0; color:#94a3b8; font-size:11px; font-weight:500; }
.activo-val-divider::before, .activo-val-divider::after { content:''; flex:1; height:1px; background:#dce3ef; }
.activo-val-canvas-wrap { border:2px dashed #dce3ef; border-radius:10px; padding:4px; background:#fff; transition:border-color 0.2s; }
.activo-val-canvas-wrap:focus-within { border-color:#021b5b; }
.activo-val-canvas-wrap canvas { display:block; width:100%; height:100px; cursor:crosshair; touch-action:none; border-radius:6px; }
.activo-val-actions { display:flex; gap:8px; align-items:center; margin-top:8px; }
.activo-btn-limpiar { background:transparent; border:1px solid #dce3ef; border-radius:6px; padding:6px 14px; font-size:11px; font-weight:600; color:#64748b; cursor:pointer; transition:all 0.2s; }
.activo-btn-limpiar:hover { background:#f1f5f9; border-color:#cbd5e1; }
.activo-val-status { font-size:11px; color:#94a3b8; font-style:italic; margin-left:auto; }

/* Crear asignación — secciones limpias */
.crear-section { margin-bottom:18px; }
.crear-section-title { font-size:14px; font-weight:700; color:#021b5b; margin:0 0 12px; padding-bottom:6px; border-bottom:2px solid #eef2ff; display:flex; align-items:center; gap:6px; }
.crear-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.crear-grid-2 label { font-size:11px; font-weight:600; color:#475569; display:block; margin-bottom:2px; }
.crear-grid-2 input { width:100%; padding:7px 10px; border:1.5px solid #d1d5db; border-radius:8px; font-size:13px; outline:none; box-sizing:border-box; background:#fff; color:#1e293b; }
.crear-grid-2 input:focus { border-color:#4361ee; box-shadow:0 0 0 2px rgba(67,97,238,0.1); }
.crear-section textarea { width:100%; padding:8px 10px; border:1.5px solid #d1d5db; border-radius:8px; font-size:13px; outline:none; box-sizing:border-box; background:#fff; color:#1e293b; resize:vertical; font-family:inherit; }
.crear-section textarea:focus { border-color:#4361ee; box-shadow:0 0 0 2px rgba(67,97,238,0.1); }
.crear-activo-row { display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px; background:#f8fafc; border:1px solid #eef2f6; border-radius:10px; margin-bottom:6px; align-items:center; }
.crear-activo-row select { flex:2; min-width:90px; height:32px; padding:2px 6px; border:1.5px solid #d1d5db; border-radius:6px; font-size:12px; background:#fff; outline:none; }
.crear-activo-row input { flex:1; min-width:80px; height:32px; padding:2px 8px; border:1.5px solid #d1d5db; border-radius:6px; font-size:12px; background:#fff; outline:none; }
.crear-activo-row input:focus, .crear-activo-row select:focus { border-color:#4361ee; }
.crear-activo-remove { width:28px; height:28px; border:none; border-radius:6px; background:#fee2e2; color:#dc2626; font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.15s; }
.crear-activo-remove:hover { background:#fecaca; transform:scale(1.1); }
.crear-btn-add { padding:7px 16px; border:1.5px dashed #cbd5e1; border-radius:8px; background:transparent; color:#4361ee; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; margin-top:6px; width:100%; }
.crear-btn-add:hover { background:#f0f4ff; border-color:#4361ee; }
.crear-confirm-box { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#ecfdf5; border:1.5px solid #bbf7d0; border-radius:10px; }
.crear-confirm-box input[type="checkbox"] { width:18px; height:18px; accent-color:#059669; cursor:pointer; flex-shrink:0; }
.crear-confirm-box label { font-size:13px; color:#065f46; cursor:pointer; user-select:none; font-weight:500; }
.crear-acciones { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; padding-top:16px; border-top:1px solid #e2e8f0; }

/* Actions row */
.activo-acciones { display:flex; gap:10px; margin-top:16px; }
.activo-btn { padding:12px 24px; border:none; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.activo-btn-primary { background:linear-gradient(135deg,#021b5b,#1a3a7a); color:#fff; flex:1; }
.activo-btn-primary:hover { box-shadow:0 4px 16px rgba(2,27,91,0.3); }
.activo-btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.activo-btn-danger { background:#fff; color:#dc2626; border:2px solid #fee2e2; }
.activo-btn-danger:hover { background:#fef2f2; }
.activo-btn-secondary { background:#f1f5f9; color:#475569; border:1px solid #d1d5db; }
.activo-btn-secondary:hover { background:#e2e8f0; }
.activo-btn-success { background:linear-gradient(135deg,#059669,#10b981); color:#fff; }
.activo-btn-success:hover { box-shadow:0 4px 16px rgba(5,150,105,0.3); }

/* Mensaje */
.activo-msg { text-align:center; padding:14px; border-radius:10px; font-size:13px; font-weight:600; display:none; margin-bottom:16px; }
.activo-msg.exito { display:block; background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.activo-msg.error { display:block; background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.activo-msg.info { display:block; background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
/* Ver Asignación (agent read-only) */


/* PDF options */
.activo-pdf-options { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#f0fdf4; border:2px solid #bbf7d0; border-radius:10px; margin-top:12px; }
.activo-pdf-options input[type="checkbox"] { width:20px; height:20px; accent-color:#059669; cursor:pointer; flex-shrink:0; }
.activo-pdf-options label { font-size:13px; color:#065f46; font-weight:600; cursor:pointer; flex:1; }

/* PDF Template hidden */
#pdfTemplateActivo { display:none; }

/* INV modal tabs */
.inv-tabs { display:flex; gap:4px; margin-bottom:16px; background:#f1f5f9; border-radius:10px; padding:4px; }
.inv-tab { flex:1; padding:8px; text-align:center; font-size:12px; font-weight:600; color:#64748b; border-radius:8px; cursor:pointer; transition:all 0.2s; background:transparent; border:none; }
.inv-tab.activo { background:#fff; color:#021b5b; box-shadow:0 1px 6px rgba(0,0,0,0.08); }
.inv-tab:hover:not(.activo) { background:#e2e8f0; }
.inv-panel { display:none; }
.inv-panel.activo { display:block; }

/* Asignaciones tables */
.asig-folio { font-family:'Courier New',monospace; font-size:11px; color:#64748b; }
body.dark-mode .asig-folio { color:#94a3b8; }
body.dark-mode #filtroAsigAdmin, body.dark-mode #filtroAsigAdminEstado { background:rgba(15,25,50,0.7); border-color:rgba(0,200,255,0.2) !important; color:#bfe8ff; }
body.dark-mode #filtroAsigAdmin:focus, body.dark-mode #filtroAsigAdminEstado:focus { border-color:#00d4ff !important; }
body.dark-mode .admin-panel label[style*="color:#475569"], body.dark-mode .admin-panel label[style*="color: #475569"] { color:#bfe8ff !important; }
.asig-download-btn { padding:4px 10px; border:none; border-radius:6px; background:linear-gradient(135deg,#021b5b,#1a3a7a); color:#fff; font-size:11px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.asig-download-btn:hover { box-shadow:0 2px 8px rgba(2,27,91,0.3); }
.asig-download-btn:disabled { opacity:0.4; cursor:not-allowed; }
.asig-view-btn, .asig-rh-btn { padding:4px 8px; border:none; border-radius:6px; font-size:13px; cursor:pointer; transition:all 0.2s; line-height:1; }
.asig-view-btn { background:#eef2ff; color:#4f46e5; }
.asig-view-btn:hover { background:#4f46e5; color:#fff; }
.asig-rh-btn { background:#ecfdf5; color:#059669; }
.asig-rh-btn:hover { background:#059669; color:#fff; }
body.dark-mode .asig-view-btn { background:rgba(79,70,229,0.2); color:#a5b4fc; }
body.dark-mode .asig-view-btn:hover { background:#4f46e5; color:#fff; }
body.dark-mode .asig-rh-btn { background:rgba(5,150,105,0.2); color:#6ee7b7; }
body.dark-mode .asig-rh-btn:hover { background:#059669; color:#fff; }
.asig-admin-chk { width:16px; height:16px; cursor:pointer; accent-color:#2563eb; }
.asig-admin-chk:disabled { opacity:0.3; cursor:not-allowed; }

/* Asignaciones detail modal dark mode */
body.dark-mode #verAsigAdminModal [style*="color:#0f172a"],
body.dark-mode #verAsigAdminModal [style*="color: #0f172a"] { color:#e2e8f0 !important; }
body.dark-mode #verAsigAdminModal [style*="color:#475569"],
body.dark-mode #verAsigAdminModal [style*="color: #475569"] { color:#94a3b8 !important; }
body.dark-mode #verAsigAdminModal [style*="color:#64748b"],
body.dark-mode #verAsigAdminModal [style*="color: #64748b"] { color:#94a3b8 !important; }
body.dark-mode #verAsigAdminModal [style*="color:#1e293b"],
body.dark-mode #verAsigAdminModal [style*="color: #1e293b"] { color:#e2e8f0 !important; }
body.dark-mode #verAsigAdminModal [style*="color:#94a3b8"],
body.dark-mode #verAsigAdminModal [style*="color: #94a3b8"] { color:#7bcfff !important; }
body.dark-mode #verAsigAdminModal [style*="background:#f1f5f9"],
body.dark-mode #verAsigAdminModal [style*="background: #f1f5f9"] { background:rgba(15,25,50,0.7) !important; }
body.dark-mode #verAsigAdminModal [style*="border-bottom:1px solid #e2e8f0"],
body.dark-mode #verAsigAdminModal [style*="border-bottom: 1px solid #e2e8f0"] { border-bottom-color:rgba(0,200,255,0.1) !important; }
body.dark-mode #verAsigAdminModal [style*="background:#f8fafc"],
body.dark-mode #verAsigAdminModal [style*="background: #f8fafc"] { background:rgba(15,25,50,0.5) !important; }
body.dark-mode #verAsigAdminModal [style*="border:1px solid #e2e8f0"],
body.dark-mode #verAsigAdminModal [style*="border: 1px solid #e2e8f0"] { border-color:rgba(0,200,255,0.12) !important; }
body.dark-mode #verAsigAdminModal .modal-content { background:#1e293b !important; }
body.dark-mode #verAsigAdminModal .modal-content [style*="color:#2563eb"],
body.dark-mode #verAsigAdminModal .modal-content [style*="color: #2563eb"] { color:#60a5fa !important; }
body.dark-mode #verAsigAdminModal .modal-content [style*="color:#059669"],
body.dark-mode #verAsigAdminModal .modal-content [style*="color: #059669"] { color:#6ee7b7 !important; }
body.dark-mode #verAsigAdminModal .modal-content [style*="color:#7c3aed"],
body.dark-mode #verAsigAdminModal .modal-content [style*="color: #7c3aed"] { color:#a78bfa !important; }
body.dark-mode #verAsigAdminModal .modal-content [style*="color:#0891b2"],
body.dark-mode #verAsigAdminModal .modal-content [style*="color: #0891b2"] { color:#22d3ee !important; }
body.dark-mode #verAsigAdminModal .modal-content [style*="background:linear-gradient(135deg,#021b5b,#1a3a7a)"],
body.dark-mode #verAsigAdminModal .modal-content [style*="background:linear-gradient(135deg,#021b5b,#1a3a7a)"] { background:linear-gradient(135deg,#0a1a3a,#0f2860) !important; }
body.dark-mode #verAsigAdminModal .admin-table tbody td { color:#d6e2f0 !important; }
body.dark-mode #verAsigInvModal [style*="color:#0f172a"],
body.dark-mode #verAsigInvModal [style*="color: #0f172a"] { color:#e2e8f0 !important; }
body.dark-mode #verAsigInvModal [style*="color:#475569"],
body.dark-mode #verAsigInvModal [style*="color: #475569"] { color:#94a3b8 !important; }
body.dark-mode #verAsigInvModal [style*="color:#64748b"],
body.dark-mode #verAsigInvModal [style*="color: #64748b"] { color:#94a3b8 !important; }
body.dark-mode #verAsigInvModal [style*="color:#1e293b"],
body.dark-mode #verAsigInvModal [style*="color: #1e293b"] { color:#e2e8f0 !important; }
body.dark-mode #verAsigInvModal [style*="color:#94a3b8"],
body.dark-mode #verAsigInvModal [style*="color: #94a3b8"] { color:#7bcfff !important; }
body.dark-mode #verAsigInvModal [style*="background:#f1f5f9"],
body.dark-mode #verAsigInvModal [style*="background: #f1f5f9"] { background:rgba(15,25,50,0.7) !important; }
body.dark-mode #verAsigInvModal [style*="border-bottom:1px solid #e2e8f0"],
body.dark-mode #verAsigInvModal [style*="border-bottom: 1px solid #e2e8f0"] { border-bottom-color:rgba(0,200,255,0.1) !important; }
body.dark-mode #verAsigInvModal [style*="background:#f8fafc"],
body.dark-mode #verAsigInvModal [style*="background: #f8fafc"] { background:rgba(15,25,50,0.5) !important; }
body.dark-mode #verAsigInvModal [style*="border:1px solid #e2e8f0"],
body.dark-mode #verAsigInvModal [style*="border: 1px solid #e2e8f0"] { border-color:rgba(0,200,255,0.12) !important; }
body.dark-mode #verAsigInvModal .modal-content { background:#1e293b !important; }
body.dark-mode #verAsigInvModal .modal-content [style*="color:#2563eb"],
body.dark-mode #verAsigInvModal .modal-content [style*="color: #2563eb"] { color:#60a5fa !important; }
body.dark-mode #verAsigInvModal .modal-content [style*="color:#059669"],
body.dark-mode #verAsigInvModal .modal-content [style*="color: #059669"] { color:#6ee7b7 !important; }
body.dark-mode #verAsigInvModal .modal-content [style*="color:#7c3aed"],
body.dark-mode #verAsigInvModal .modal-content [style*="color: #7c3aed"] { color:#a78bfa !important; }
body.dark-mode #verAsigInvModal .modal-content [style*="color:#0891b2"],
body.dark-mode #verAsigInvModal .modal-content [style*="color: #0891b2"] { color:#22d3ee !important; }
body.dark-mode #verAsigInvModal .modal-content [style*="background:linear-gradient(135deg,#021b5b,#1a3a7a)"],
body.dark-mode #verAsigInvModal .modal-content [style*="background:linear-gradient(135deg,#021b5b,#1a3a7a)"] { background:linear-gradient(135deg,#0a1a3a,#0f2860) !important; }
body.dark-mode #verAsigInvModal .admin-table tbody td { color:#d6e2f0 !important; }
body.dark-mode #panelAsignaciones .admin-table tbody td { color:#d6e2f0 !important; }
body.dark-mode #panelAsignaciones .admin-table tbody td.asig-folio { color:#94a3b8 !important; }

/* Dark mode overrides for activo */
body.dark-mode .activo-header { background:linear-gradient(135deg,#0a1a3a,#0f2860); }
body.dark-mode .activo-body { background:rgba(10,18,40,0.95); }
body.dark-mode .activo-col h4 { color:#bfe8ff; border-bottom-color:rgba(0,200,255,0.15); }
body.dark-mode .activo-col label { color:#8899bb; }
body.dark-mode .activo-col input, body.dark-mode .activo-col textarea, body.dark-mode .activo-col select { background:#1a2245; border-color:rgba(0,200,255,0.2); color:#bfe8ff; }
body.dark-mode .activo-col input[readonly] { background:#121a35; color:#8899bb; }
body.dark-mode .activo-col input:not([readonly]), body.dark-mode .activo-col textarea:not([readonly]) { background:rgba(10,18,40,0.7); }
body.dark-mode .activo-item-inline { background:rgba(15,25,50,0.5); border-color:rgba(0,200,255,0.1); }
body.dark-mode .activo-item-inline select, body.dark-mode .activo-item-inline input { background:#1a2245; color:#bfe8ff; }
body.dark-mode .activo-sig-section { background:#121a30; border-color:rgba(0,200,255,0.12); }
body.dark-mode .activo-sig-section h4 { color:#00d4ff; border-bottom-color:rgba(0,200,255,0.12); }
body.dark-mode .activo-sig-preview { background:#1a2245; border-color:rgba(0,200,255,0.15); }
body.dark-mode .activo-val-box { background:#121a30; border-color:rgba(0,200,255,0.12); }
body.dark-mode .activo-val-box h5 { color:#00d4ff; }
body.dark-mode .activo-val-check { background:#1a2245; border-color:rgba(0,200,255,0.1); }
body.dark-mode .activo-val-check label { color:#bfe8ff; }
body.dark-mode .activo-val-canvas-wrap { border-color:rgba(0,200,255,0.2); }
body.dark-mode .activo-btn-danger { background:transparent; color:#ff6b6b; border-color:rgba(255,100,100,0.2); }
body.dark-mode .activo-btn-danger:hover { background:rgba(255,50,50,0.1); }
body.dark-mode .activo-btn-secondary { background:#1a2245; border-color:rgba(0,200,255,0.2); color:#8899bb; }
body.dark-mode .activo-btn-secondary:hover { background:#2a3255; }
body.dark-mode .activo-pdf-options { background:rgba(5,150,105,0.1); border-color:rgba(5,150,105,0.3); }
body.dark-mode .activo-pdf-options label { color:#6ee7b7; }
body.dark-mode .inv-tabs { background:#1a2245; }
body.dark-mode .inv-tab { color:#8899bb; }
body.dark-mode .inv-tab.activo { background:#121a35; color:#00d4ff; }
body.dark-mode .inv-tab:hover:not(.activo) { background:#2a3255; }

/* Portal — Asignaciones Pendientes */
.asignacion-pendiente-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.asignacion-pendiente-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }

.asig-pendiente-titulo {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
}
.asig-pendiente-sub {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}
.asig-pendiente-fecha {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 2px;
}
body.dark-mode .asig-pendiente-titulo { color: #d0d0e0; }

.btn-asig-recibir {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #021b5b, #1a3a7a);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-asig-recibir:hover {
    background: linear-gradient(135deg, #1a3a7a, #2a5aaa);
}

.btn-asig-dismiss {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.btn-asig-dismiss:hover {
    background: #fee2e2;
    color: #dc2626;
}
body.dark-mode .btn-asig-dismiss { color: #64748b; }
body.dark-mode .btn-asig-dismiss:hover { background: #3a1525; color: #f87171; }

body.dark-mode .asignacion-pendiente-item { background:#2a2a45 !important; border-color:#3a3a55 !important; }
body.dark-mode .asignacion-pendiente-item div { color:#d0d0e0 !important; }
body.dark-mode .crear-section-title { color:#60a5fa; border-bottom-color:#1e3a5f; }
body.dark-mode .crear-grid-2 input,
body.dark-mode .crear-section textarea,
body.dark-mode .crear-activo-row select,
body.dark-mode .crear-activo-row input { background:#1e1e38; border-color:#3a3a55; color:#d0d0e0; }
body.dark-mode .crear-grid-2 input:focus, body.dark-mode .crear-section textarea:focus,
body.dark-mode .crear-activo-row select:focus, body.dark-mode .crear-activo-row input:focus { border-color:#60a5fa; }
body.dark-mode .crear-activo-row { background:#1a1a30; border-color:#3a3a55; }
body.dark-mode .crear-activo-remove { background:#4a1525; color:#fca5a5; }
body.dark-mode .crear-activo-remove:hover { background:#5a1a30; }
body.dark-mode .crear-btn-add { border-color:#3a3a55; color:#60a5fa; }
body.dark-mode .crear-btn-add:hover { background:#1e2a4a; }
body.dark-mode .crear-confirm-box { background:#0a2a1a; border-color:#059669; }
body.dark-mode .crear-confirm-box label { color:#6ee7b7; }
body.dark-mode .crear-acciones { border-top-color:#3a3a55; }
body.dark-mode #crearFirmaPreview { background:#1e1e38 !important; border-color:#3a3a55 !important; color:#d0d0e0 !important; }

/* === Canvas Signature (shared) === */
.asig-signature-wrap { border:2px solid #e2e8f0; border-radius:12px; padding:20px; background:#fafcff; }
.asig-divider { display:flex; align-items:center; gap:12px; margin:12px 0; color:#94a3b8; font-size:11px; font-weight:500; }
.asig-divider::before,.asig-divider::after { content:''; flex:1; height:1px; background:#dce3ef; }
.asig-canvas-wrap { border:2px dashed #dce3ef; border-radius:10px; padding:4px; background:#fff; }
.asig-canvas-wrap canvas { display:block; width:100%; height:100px; cursor:crosshair; touch-action:none; border-radius:6px; }
.asig-canvas-actions { display:flex; gap:8px; align-items:center; margin-top:8px; }
.asig-btn-limpiar { background:transparent; border:1px solid #dce3ef; border-radius:6px; padding:6px 14px; font-size:11px; font-weight:600; color:#64748b; cursor:pointer; }
.asig-btn-limpiar:hover { background:#f1f5f9; }
.asig-status { font-size:11px; color:#94a3b8; font-style:italic; margin-left:auto; }

/* === Custom Modal System === */
.custom-modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:100000; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.custom-modal { background:#fff; border-radius:16px; padding:24px; max-width:420px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.custom-modal h3 { margin:0 0 8px; font-size:16px; font-weight:700; color:#1e293b; }
.custom-modal p { margin:0 0 16px; font-size:14px; color:#475569; line-height:1.5; }
.custom-modal-input { width:100%; padding:10px 12px; border:1.5px solid #d1d5db; border-radius:8px; font-size:13px; outline:none; box-sizing:border-box; margin-bottom:16px; background:#fff; color:#1e293b; }
.custom-modal-input:focus { border-color:#4361ee; box-shadow:0 0 0 2px rgba(67,97,238,0.1); }
.custom-modal-actions { display:flex; gap:8px; justify-content:flex-end; }
.custom-modal-btn { padding:8px 20px; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; }
.custom-modal-btn-primary { background:linear-gradient(135deg,#021b5b,#1a3a7a); color:#fff; }
.custom-modal-btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(2,27,91,0.3); }
.custom-modal-btn-secondary { background:#e2e8f0; color:#475569; }
.custom-modal-btn-secondary:hover { background:#cbd5e1; }

/* === Existing Asignaciones Cards (Ver estado al reabrir) === */
.asig-prev-section { margin-bottom:16px; padding:14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; }
.asig-prev-section-title { font-size:13px; font-weight:700; color:#021b5b; margin:0 0 10px; display:flex; align-items:center; gap:6px; }
.asig-prev-card { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:10px 12px; margin-bottom:6px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.asig-prev-card:last-child { margin-bottom:0; }
.asig-prev-card-info { flex:1; min-width:0; }
.asig-prev-card-info .asig-prev-folio { font-size:12px; font-weight:600; color:#1e293b; }
.asig-prev-card-info .asig-prev-fecha { font-size:10px; color:#64748b; margin-top:2px; }
.asig-prev-badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; }
.asig-prev-badge.pendiente { background:#fffbeb; color:#92400e; border:1px solid #fbbf24; }
.asig-prev-badge.aprobado { background:#ecfdf5; color:#065f46; border:1px solid #34d399; }
.asig-prev-badge.rechazado { background:#fef2f2; color:#991b1b; border:1px solid #fca5a5; }
.asig-prev-btn { padding:5px 12px; border:none; border-radius:6px; background:#eef2ff; color:#4361ee; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all 0.15s; }
.asig-prev-btn:hover { background:#dde4ff; }

/* Dark mode for custom modals, canvas, cards */
body.dark-mode .custom-modal { background:#1a1a30; }
body.dark-mode .custom-modal h3 { color:#d0d0e0; }
body.dark-mode .custom-modal p { color:#94a3b8; }
body.dark-mode .custom-modal-input { background:#1e1e38; border-color:#3a3a55; color:#d0d0e0; }
body.dark-mode .custom-modal-btn-secondary { background:#2a2a45; color:#8899bb; }
body.dark-mode .custom-modal-btn-secondary:hover { background:#3a3a55; }
/* Dark mode for the "Registrar devolucion" asset picker (inline styles built in agente.js) */
body.dark-mode #selDevOverlay [style*="color:#1e293b"],
body.dark-mode #selDevOverlay [style*="color: #1e293b"] { color:#e2e8f0 !important; }
body.dark-mode #selDevOverlay [style*="color:#64748b"],
body.dark-mode #selDevOverlay [style*="color: #64748b"] { color:#94a3b8 !important; }
body.dark-mode #selDevOverlay [style*="color:#94a3b8"],
body.dark-mode #selDevOverlay [style*="color: #94a3b8"] { color:#8899bb !important; }
body.dark-mode #selDevOverlay [style*="color:#b91c1c"],
body.dark-mode #selDevOverlay [style*="color: #b91c1c"] { color:#f87171 !important; }
body.dark-mode #selDevOverlay [style*="color:#2563eb"],
body.dark-mode #selDevOverlay [style*="color: #2563eb"] { color:#60a5fa !important; }
body.dark-mode #selDevOverlay [style*="border-bottom:1px solid #eef2f7"],
body.dark-mode #selDevOverlay [style*="border-bottom: 1px solid #eef2f7"] { border-bottom-color:rgba(0,200,255,0.12) !important; }
body.dark-mode .asig-signature-wrap { background:#1a1a30; border-color:#3a3a55; }
body.dark-mode .asig-canvas-wrap { background:#1e1e38; border-color:#3a3a55; }
body.dark-mode .asig-canvas-wrap canvas { background:#1e1e38; }
body.dark-mode .asig-divider { color:#64748b; }
body.dark-mode .asig-divider::before, body.dark-mode .asig-divider::after { background:#3a3a55; }
body.dark-mode .asig-btn-limpiar { border-color:#3a3a55; color:#8899bb; }
body.dark-mode .asig-btn-limpiar:hover { background:#2a2a45; }
body.dark-mode .asig-prev-section { background:#1a1a30; border-color:#3a3a55; }
body.dark-mode .asig-prev-section-title { color:#60a5fa; }
body.dark-mode .asig-prev-card { background:#1e1e38; border-color:#3a3a55; }
body.dark-mode .asig-prev-card-info .asig-prev-folio { color:#d0d0e0; }
body.dark-mode .asig-prev-btn { background:#1e2a4a; color:#60a5fa; }
body.dark-mode .asig-prev-btn:hover { background:#2a3a5a; }
body.dark-mode .asig-prev-card-info .asig-prev-fecha { color:#8899bb; }
/* Dark mode — Ver Asignación Modal (inline styles) */

body.dark-mode #verAsignacionModal [style*="background:#f8fafc"],
body.dark-mode #verAsignacionModal [style*="background: #f8fafc"] {
    background: #1a2245 !important;
}
body.dark-mode #verAsignacionModal [style*="color:#1e293b"],
body.dark-mode #verAsignacionModal [style*="color: #1e293b"] {
    color: #bfe8ff !important;
}
body.dark-mode #verAsignacionModal [style*="border:1px solid #e2e8f0"],
body.dark-mode #verAsignacionModal [style*="border: 1px solid #e2e8f0"] {
    border-color: rgba(0,200,255,0.15) !important;
}
body.dark-mode #verAsignacionModal [style*="color:#64748b"],
body.dark-mode #verAsignacionModal [style*="color: #64748b"] {
    color: #8899bb !important;
}
body.dark-mode #verAsignacionModal [style*="color:#475569"],
body.dark-mode #verAsignacionModal [style*="color: #475569"] {
    color: #94a3b8 !important;
}
body.dark-mode #verAsignacionModal [style*="color:#021b5b"],
body.dark-mode #verAsignacionModal [style*="color: #021b5b"] {
    color: #60a5fa !important;
}
body.dark-mode #verAsignacionModal [style*="border-bottom:2px solid #eef2ff"],
body.dark-mode #verAsignacionModal [style*="border-bottom: 2px solid #eef2ff"] {
    border-bottom-color: rgba(0,200,255,0.12) !important;
}
body.dark-mode #verAsignacionModal [style*="background:#fafcff"],
body.dark-mode #verAsignacionModal [style*="background: #fafcff"] {
    background: #121a35 !important;
}
body.dark-mode #verAsignacionModal [style*="color:#94a3b8"],
body.dark-mode #verAsignacionModal [style*="color: #94a3b8"] {
    color: #5a8aaa !important;
}
body.dark-mode #verAsignacionModal [style*="background:#f1f5f9"] {
    background: #16294a !important;
}

/* ===== NUEVO INGRESO ===== */
.ingreso-option-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.ingreso-option-btn:active {
    transform: translateY(0);
}

.ingreso-field-row {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
}
.ingreso-field-group {
    flex: 1;
    min-width: 0;
}
.ingreso-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 3px;
    margin-top: 10px;
}
.ingreso-label:first-of-type {
    margin-top: 0;
}
.ingreso-input {
    width: 100%;
    padding: 9px 11px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
    background: #fafbfc;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
}
.ingreso-input:focus {
    border-color: #00369a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,54,154,0.08);
}
.ingreso-textarea {
    resize: vertical;
    min-height: 60px;
}
.accesos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.acceso-check-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    color: #1e293b;
    user-select: none;
    font-weight: 500;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s;
}
.acceso-check-item:hover {
    border-color: #00369a;
    background: #eef2ff;
}
.acceso-check-item input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #00369a;
    flex-shrink: 0;
}
.acceso-sistema {
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fafbfc;
    transition: all 0.2s;
}
.acceso-sistema:hover {
    border-color: #cbd5e1;
}
.nivel-permiso {
    margin-top: 8px;
    padding-left: 24px;
}
.nivel-permiso select {
    width: 100%;
    max-width: 280px;
}
.permiso-select {
    margin-top: 4px;
}

body.dark-mode .ingreso-label {
    color: #bfe8ff;
}
body.dark-mode .ingreso-input {
    background: rgba(15,25,50,0.35);
    border-color: rgba(0,200,255,0.2);
    color: #d0d0e0;
}
body.dark-mode .ingreso-input:focus {
    border-color: #00d4ff;
    background: rgba(15,25,50,0.5);
    box-shadow: 0 0 0 3px rgba(0,200,255,0.1);
}
body.dark-mode .acceso-check-item {
    color: #bfe8ff;
    background: rgba(15,25,50,0.4);
    border-color: rgba(0,200,255,0.15);
}
body.dark-mode .acceso-check-item:hover {
    border-color: #00d4ff;
    background: rgba(0,100,255,0.08);
}
body.dark-mode .acceso-sistema {
    background: rgba(15,25,50,0.25);
    border-color: rgba(0,200,255,0.12);
}
body.dark-mode .acceso-sistema:hover {
    border-color: rgba(0,200,255,0.25);
}

/* ===== MODAL INGRESO OVERRIDES ===== */
#modalSelectorIngreso.dropdown-overlay,
#modalFormAdmin.dropdown-overlay,
#modalFormOperaciones.dropdown-overlay {
    background: rgba(0,0,0,0.45);
}
#modalSelectorIngreso .dropdown-contenido,
#modalFormAdmin .dropdown-contenido,
#modalFormOperaciones .dropdown-contenido {
    position: fixed;
}
body.dark-mode #modalSelectorIngreso.dropdown-overlay,
body.dark-mode #modalFormAdmin.dropdown-overlay,
body.dark-mode #modalFormOperaciones.dropdown-overlay {
    background: rgba(0,0,0,0.65);
}
body.dark-mode #modalSelectorSalida.dropdown-overlay,
body.dark-mode #modalFormSalidaAdmin.dropdown-overlay,
body.dark-mode #modalFormSalidaOperaciones.dropdown-overlay {
    background: rgba(0,0,0,0.65);
}
#modalSelectorSalida.dropdown-overlay,
#modalFormSalidaAdmin.dropdown-overlay,
#modalFormSalidaOperaciones.dropdown-overlay {
    background: rgba(0,0,0,0.45);
}
#modalSelectorSalida .dropdown-contenido,
#modalFormSalidaAdmin .dropdown-contenido,
#modalFormSalidaOperaciones .dropdown-contenido {
    position: fixed;
}

/* ===== NUEVO INGRESO HEADER BUTTON ===== */
.btn-nuevo-ingreso-header {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    background: linear-gradient(135deg,#1976d2,#0d47a1);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-nuevo-ingreso-header:hover {
    box-shadow: 0 3px 12px rgba(25,118,210,0.4);
    transform: translateY(-1px);
}
.btn-nuevo-ingreso-header:active {
    transform: translateY(0);
}
body.dark-mode .btn-nuevo-ingreso-header {
    background: linear-gradient(135deg,#1565c0,#0d47a1);
}
.btn-para-otro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: linear-gradient(135deg,#c084fc,#a855f7);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-para-otro:hover {
    box-shadow: 0 3px 12px rgba(168,85,247,0.35);
    transform: translateY(-1px);
}
.btn-para-otro:active {
    transform: translateY(0);
}
.btn-para-otro.activo {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.28) inset, 0 3px 12px rgba(168,85,247,0.22);
}
body.dark-mode .btn-para-otro {
    background: linear-gradient(135deg,#a855f7,#7c3aed);
}
/* ===== INGRESO DATA SECTION ===== */
.ingreso-data-section .ingreso-card {
    margin-top: 16px;
    padding: 20px;
    overflow: hidden;
}
.ingreso-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px;
}
.ingreso-card-sub {
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
}
.ingreso-block {
    margin-bottom: 14px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.ingreso-block-title {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.ingreso-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ingreso-field {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ingreso-label {
    font-size: 11px;
    color: #64748b;
}
.ingreso-value {
    font-size: 13px;
    color: #0f172a;
}
.ingreso-value-bold {
    font-weight: 600;
}
.ingreso-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ingreso-tag {
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    color: #0f172a;
}
.ingreso-accesos {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ingreso-acceso-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.ingreso-acceso-row input[type="checkbox"],
body.dark-mode .ingreso-acceso-row input[type="checkbox"],
body.dark-mode .ingreso-acceso-row input[type="checkbox"]:hover,
body.dark-mode .ingreso-acceso-row input[type="checkbox"]:focus,
body.dark-mode .ingreso-acceso-row input[type="checkbox"]:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
}
.ingreso-acceso-nombre {
    font-size: 13px;
    color: #0f172a;
}
.ingreso-acceso-nivel {
    font-size: 11px;
    color: #1976d2;
    font-weight: 600;
    padding: 2px 8px;
    background: #e3f2fd;
    border-radius: 4px;
}
.ingreso-texto {
    font-size: 13px;
    color: #0f172a;
    margin: 0;
}
.ingreso-firma-img {
    max-height: 80px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}
.ingreso-firma-name {
    font-size: 11px;
    color: #64748b;
    margin-left: 8px;
}

body.dark-mode .ingreso-card-title {
    color: #e2e8f0;
}
body.dark-mode .ingreso-card-sub {
    color: #8ba4d4;
}
body.dark-mode .ingreso-block {
    background: rgba(15,25,50,0.4);
    border-color: rgba(0,200,255,0.15);
}
body.dark-mode .ingreso-block-title {
    color: #5a8aaa;
}
body.dark-mode .ingreso-label {
    color: #5a8aaa;
}
body.dark-mode .ingreso-value {
    color: #bfe8ff;
}
body.dark-mode .ingreso-tag {
    background: rgba(15,25,50,0.4);
    border-color: rgba(0,200,255,0.15);
    color: #bfe8ff;
}
body.dark-mode .ingreso-acceso-row {
    background: rgba(15,25,50,0.4);
    border-color: rgba(0,200,255,0.15);
}
body.dark-mode .ingreso-acceso-nombre {
    color: #bfe8ff;
}
body.dark-mode .ingreso-acceso-nivel {
    color: #4fc3f7;
    background: rgba(0,200,255,0.1);
}
body.dark-mode .ingreso-texto {
    color: #bfe8ff;
}
body.dark-mode .ingreso-firma-img {
    border-color: rgba(0,200,255,0.15);
}
body.dark-mode .ingreso-firma-name {
    color: #5a8aaa;
}
/* ===== PROVEEDOR ESCALATION ===== */


body.dark-mode .ingreso-value {
    color: #bfe8ff;
}
body.dark-mode .ingreso-tag {
    background: rgba(15,25,50,0.4);
    border-color: rgba(0,200,255,0.15);
    color: #bfe8ff;
}
body.dark-mode .ingreso-acceso-row {
    background: rgba(15,25,50,0.4);
    border-color: rgba(0,200,255,0.15);
}
body.dark-mode .ingreso-acceso-nombre {
    color: #bfe8ff;
}
body.dark-mode .ingreso-acceso-nivel {
    color: #4fc3f7;
    background: rgba(0,200,255,0.1);
}
body.dark-mode .ingreso-texto {
    color: #bfe8ff;
}
body.dark-mode .ingreso-firma-img {
    border-color: rgba(0,200,255,0.15);
}
body.dark-mode .ingreso-firma-name {
    color: #5a8aaa;
}

.accesos-filtro-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.accesos-filtro-bar .accesos-filtro-input,
.accesos-filtro-bar .accesos-filtro-select,
.accesos-filtro-bar .accesos-filtro-btn {
    height: 36px;
    box-sizing: border-box;
    font-size: 13px;
    font-family: inherit;
    line-height: normal;
    border-radius: 8px;
    outline: none;
}
.accesos-filtro-bar .accesos-filtro-input,
.accesos-filtro-bar .accesos-filtro-select {
    padding: 0 12px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #1e293b;
}
.accesos-filtro-bar .accesos-filtro-input {
    flex: 1;
    min-width: 150px;
}
.accesos-filtro-bar .accesos-filtro-input:focus,
.accesos-filtro-bar .accesos-filtro-select:focus {
    border-color: #00369a;
    box-shadow: 0 0 0 3px rgba(0,54,154,0.08);
}
.accesos-filtro-bar .accesos-filtro-select {
    width: 220px;
    cursor: pointer;
    appearance: auto;
}
.accesos-filtro-bar .accesos-filtro-btn {
    padding: 0 16px;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, #00369a, #4361ee);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, box-shadow 0.2s;
}
.accesos-filtro-bar .accesos-filtro-btn:hover {
    background: linear-gradient(135deg, #002a7a, #3651d4);
}
body.dark-mode .accesos-filtro-bar .accesos-filtro-input,
body.dark-mode .accesos-filtro-bar .accesos-filtro-select {
    background: #1e1e38;
    border-color: #3a3a55;
    color: #d0d0e0;
}
body.dark-mode .accesos-filtro-bar .accesos-filtro-input:focus,
body.dark-mode .accesos-filtro-bar .accesos-filtro-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
}



/* ===== ETIQUETA DE ESTADO CON DESPLEGABLE (detalle del ticket) =====
   La etiqueta de estado es un boton para quien puede moverlo. Se eligio
   desplegable y no modal: es un solo dato y un modal taparia el ticket que se
   esta mirando. */
.estado-wrap { position: relative; display: inline-block; vertical-align: middle; }

/* Hereda el color de .badge.<Estado>, asi el boton conserva el color del estado
   en el que esta. Solo se le agrega que parezca pulsable. */
.badge-accion {
    cursor: pointer;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    transition: filter 0.15s, box-shadow 0.15s;
}
.badge-accion:hover { filter: brightness(0.95); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.badge-accion:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.badge-accion:disabled { cursor: wait; }
.badge-flecha { font-size: 9px; opacity: 0.7; }

.estado-drop {
    position: absolute;
    top: calc(100% + 6px); left: 0;
    min-width: 172px;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(15,23,42,0.16);
    padding: 5px;
    /* Por encima del contenido del ticket, pero por debajo de los modales. */
    z-index: 900;
}
.estado-opcion {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    background: none; border: none;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 600; font-family: inherit;
    color: #334155; text-align: left; cursor: pointer;
}
.estado-opcion:hover { background: #f1f5f9; }
.estado-opcion.es-actual { color: #0f172a; }
.estado-tilde { margin-left: auto; color: #059669; font-size: 13px; }

/* El punto lleva el color del estado, para reconocerlo sin leer. */
.estado-punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.estado-punto.Abierto { background: #f0b429; }
.estado-punto.En-Progreso { background: #00b5ad; }
.estado-punto.Cerrado { background: #27ae60; }

body.dark-mode .estado-drop {
    background: #101a2e; border-color: rgba(0,200,255,0.15);
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
body.dark-mode .estado-opcion { color: #bfe8ff; }
body.dark-mode .estado-opcion:hover { background: rgba(0,100,255,0.12); }
body.dark-mode .estado-opcion.es-actual { color: #ffffff; }