/* =============================================
   SISTEMA DE TICKETS - ESTILOS PERSONALIZADOS
   ============================================= */

/* ========================================
   SISTEMA DE NOTIFICACIONES
   ======================================== */

/* Contenedor de notificaciones */
#notificaciones-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    max-width: 320px;
}

#notificaciones-container.oculto {
    display: none;
}

/* Botón toggle para mostrar notificaciones */
#notificaciones-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10000;
    display: none;
}

/* Banner de notificación */
.notificacion-banner {
    background: white;
    border-left: 4px solid;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    margin-bottom: 8px;
    animation: slideInUp 0.3s ease-out;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.notificacion-banner:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

/* Colores por tipo de notificación */
.notificacion-banner.comentario {
    border-left-color: #00B48D;
}

.notificacion-banner.asignacion {
    border-left-color: #8F53A1;
}

.notificacion-banner.estado {
    border-left-color: #00AEEF;
}

.notificacion-banner.movimiento {
    border-left-color: #6DCFF6;
}

/* Nuevos tipos de notificación */
.notificacion-banner.respuesta {
    border-left-color: #00B48D; /* Verde - Respuesta */
    background: #d4f1e8;
    border: 1px solid #8ee5d0;
}

.notificacion-banner.historial {
    border-left-color: #00AEEF; /* Azul claro - Historial */
    background: #c7e9ff;
    border: 1px solid #6ec9f8;
}

.notificacion-banner.sistema {
    border-left-color: #FFC107; /* Amarillo - Sistema */
    background: #fff4cc;
    border: 1px solid #ffe066;
}

.notificacion-banner.consolidada {
    border-left-color: #c82333; /* Rojo oscuro - Consolidada */
    background: #e84c4c;
    border: 1px solid #d63238;
}

/* Título de notificación */
.notificacion-titulo {
    font-weight: 600;
    font-size: 12px;
    color: #333;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
}

.notificacion-titulo i {
    margin-right: 4px;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}

.notificacion-titulo-texto {
    flex: 1;
    line-height: 1.3;
}

/* Botón cerrar */
.notificacion-close {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    flex-shrink: 0;
}

.notificacion-close:hover {
    color: #999;
}

/* Contenido de notificación */
.notificacion-contenido {
    font-size: 11px;
    color: #666;
    line-height: 1.3;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 6px;
}

/* Botón toggle */
.notificacion-btn-toggle {
    background: #023F88;
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.notificacion-btn-toggle:hover {
    background: #1e5ba8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

/* Badge de notificaciones */
.notificacion-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Animación de latido para el badge */
.notificacion-badge.latido {
    animation: latidoBadge 0.6s ease-in-out;
}

@keyframes latidoBadge {
    0% {
        transform: scale(1);
        background: #dc3545;
    }
    15% {
        transform: scale(2.5);
        background: #ff4757;
    }
    30% {
        transform: scale(1.8);
        background: #ff6b7a;
    }
    45% {
        transform: scale(2.2);
        background: #ff4757;
    }
    60% {
        transform: scale(1.5);
        background: #ff6b7a;
    }
    75% {
        transform: scale(2.0);
        background: #ff4757;
    }
    90% {
        transform: scale(1.2);
        background: #ff6b7a;
    }
    100% {
        transform: scale(1);
        background: #dc3545;
    }
}

/* Botón candado */
.notificacion-btn-candado {
    background: #6c757d;
    color: white;
    border: none;
    padding: 6px 8px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.7em;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.notificacion-btn-candado:hover {
    background: #5a6268;
    transform: scale(1.1);
}

.notificacion-btn-candado i {
    font-size: 0.8em;
}

/* Botón ocultar */
.notificacion-btn-ocultar {
    background: #333;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8em;
    margin-top: 8px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.notificacion-btn-ocultar:hover {
    background: #555;
}

/* Animaciones */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(15px);
    }
}

.notificacion-banner.removiendo {
    animation: slideOutDown 0.2s ease-out forwards;
}

/* Fuentes de la empresa */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/static/Manrope-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/static/Manrope-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/static/Manrope-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/static/Manrope-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/static/Manrope-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/static/Manrope-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/static/Manrope-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* =============================================
   PALETA DE COLORES CORPORATIVOS BEXEN
   ============================================= */

/* Variables CSS para colores del tema */
:root {
    /* Colores base Bexen */
    --bexen-base-blue: #023F88;
    --bexen-base-cyan: #00AEEF;
    
    /* Submarcas Bexen */
    --bexen-medical-green: #00B48D;
    --bexen-cardio-purple: #8F53A1;
    --bexen-bioservices-blue: #6DCFF6;
    
    /* Colores del sistema actual (Bexen Cardio) */
    --primary-color: var(--bexen-base-blue);
    --secondary-color: var(--bexen-cardio-purple);
    --success-color: var(--bexen-medical-green);
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: var(--bexen-bioservices-blue);
    --light-color: #f8f9fa;
    --dark-color: #212529;
    
    /* Colores específicos para tickets (Bexen Cardio) */
    --tickets-primary: var(--bexen-cardio-purple);
    --tickets-secondary: var(--bexen-base-blue);
    --tickets-success: var(--bexen-medical-green);
    --tickets-info: var(--bexen-bioservices-blue);
    --tickets-warning: var(--bexen-base-cyan);
    --tickets-danger: var(--bexen-base-blue);
    --white-color: #FFFFFF;
    --sidebar-width: 250px;
    --navbar-height: 76px;
}

/* Estilos generales */
html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f6fa;
    line-height: 1.6;
    font-weight: 400;
}

body.tema-diurno {
    background-color: #f5f6fa;
    color: #212529;
}

/* =============================================
   MODO NOCTURNO
   ============================================= */
body.tema-nocturno {
    background-color: #0f172a;
    color: #e2e8f0;
}

body.tema-nocturno .container-fluid {
    background-color: transparent;
}

body.tema-nocturno a:not(.btn) {
    color: #93c5fd;
}

body.tema-nocturno a:not(.btn):hover {
    color: #bfdbfe;
}

body.tema-nocturno .navbar {
    background: linear-gradient(135deg, #0b1120 0%, #16213b 100%) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.6);
}

body.tema-nocturno .navbar-brand {
    color: #e2e8f0 !important;
}

body.tema-nocturno .navbar-logo {
    background-color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 18px rgba(8, 15, 28, 0.4);
}

body.tema-nocturno .navbar-nav .nav-link {
    color: #e2e8f0 !important;
}

body.tema-nocturno .navbar-nav .nav-link:hover {
    background-color: rgba(148, 163, 184, 0.2);
}

body.tema-nocturno .navbar .dropdown-menu {
    background-color: #111c2d;
    color: #e2e8f0;
    box-shadow: 0 14px 32px rgba(8, 15, 28, 0.6);
}

body.tema-nocturno .navbar .dropdown-item {
    color: #e2e8f0;
}

body.tema-nocturno .navbar .dropdown-item:hover {
    background-color: rgba(56, 189, 248, 0.15);
    color: #93c5fd;
}

body.tema-nocturno .navbar .dropdown-divider {
    border-top-color: rgba(148, 163, 184, 0.18);
}

body.tema-nocturno .navbar .theme-toggle-btn {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.35);
    color: #e2e8f0;
}

body.tema-nocturno .navbar .theme-toggle-btn:hover,
body.tema-nocturno .navbar .theme-toggle-btn:focus {
    background: rgba(148, 163, 184, 0.28);
    border-color: rgba(148, 163, 184, 0.55);
    box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.25);
}

body.tema-nocturno .sidebar {
    background: linear-gradient(180deg, #111c2d 0%, #0b1322 100%);
    box-shadow: 2px 0 25px rgba(8, 15, 28, 0.7);
}

body.tema-nocturno .sidebar-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    color: #f8fafc;
}

body.tema-nocturno .sidebar-close {
    color: rgba(226, 232, 240, 0.75);
}

body.tema-nocturno .sidebar-close:hover {
    background-color: rgba(148, 163, 184, 0.25);
}

body.tema-nocturno .sidebar-nav .nav-link {
    color: rgba(226, 232, 240, 0.78);
}

body.tema-nocturno .sidebar-nav .nav-link:hover,
body.tema-nocturno .sidebar-nav .nav-link.active {
    background-color: rgba(148, 163, 184, 0.22);
    color: #f8fafc;
    border-left-color: #38bdf8;
}

body.tema-nocturno .main-content {
    background-color: #0f172a;
    color: inherit;
}

body.tema-nocturno .page-header {
    border-bottom: 2px solid #1f2937;
}

body.tema-nocturno .page-header h1,
body.tema-nocturno h2,
body.tema-nocturno h3,
body.tema-nocturno h4,
body.tema-nocturno h5 {
    color: #f8fafc;
}

body.tema-nocturno .text-muted {
    color: #94a3b8 !important;
}

body.tema-nocturno .card {
    background-color: #1e293b;
    color: #e2e8f0;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.45);
}

body.tema-nocturno .card-header {
    background: linear-gradient(135deg, rgba(2, 63, 136, 0.85) 0%, rgba(143, 83, 161, 0.95) 100%);
    color: #f8fafc;
}

/* Estilos para card-header con bg-light en modo día */
body.tema-diurno .card-header.bg-light,
body:not(.tema-nocturno) .card-header.bg-light {
    color: #212529 !important;
}

body.tema-diurno .card-header.bg-light h6,
body:not(.tema-nocturno) .card-header.bg-light h6,
body.tema-diurno .card-header.bg-light h5,
body:not(.tema-nocturno) .card-header.bg-light h5,
body.tema-diurno .card-header.bg-light h4,
body:not(.tema-nocturno) .card-header.bg-light h4 {
    color: #212529 !important;
}

body.tema-nocturno .card .border,
body.tema-nocturno .card .border-top,
body.tema-nocturno .card .border-bottom,
body.tema-nocturno .card .border-start,
body.tema-nocturno .card .border-end {
    border-color: #273449 !important;
}

body.tema-nocturno .summary-card {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    box-shadow: 0 12px 32px rgba(8, 15, 28, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

body.tema-nocturno .summary-card:hover {
    box-shadow: 0 18px 40px rgba(8, 15, 28, 0.6);
}

body.tema-nocturno .summary-card .card-title {
    color: #93c5fd;
}

body.tema-nocturno .summary-card .card-body,
body.tema-nocturno .summary-card .card-body * {
    color: #e2e8f0;
}

body.tema-nocturno .summary-card small,
body.tema-nocturno .summary-card .text-muted {
    color: #94a3b8 !important;
}

body.tema-nocturno .summary-card .icon-circle {
    background: rgba(56, 189, 248, 0.18);
    color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35);
}

body.tema-nocturno .table {
    color: #d1d5db;
}

body.tema-nocturno .table thead th {
    background-color: #1f2937;
    border-bottom: 2px solid #273449;
    color: #f8fafc;
}

body.tema-nocturno .table tbody td {
    border-color: #273449;
}

body.tema-nocturno .table tbody tr:hover {
    background-color: rgba(148, 163, 184, 0.12);
}

body.tema-nocturno .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(148, 163, 184, 0.08);
}

body.tema-nocturno .form-control,
body.tema-nocturno .form-select {
    background-color: #0f172a;
    border-color: #1f2937;
    color: #e2e8f0;
}

body.tema-nocturno .form-control:focus,
body.tema-nocturno .form-select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25);
}

body.tema-nocturno .form-control::placeholder {
    color: #64748b;
}

body.tema-nocturno .form-label {
    color: #cbd5f5;
}

body.tema-nocturno .input-group-text {
    background-color: #1f2937;
    border-color: #1f2937;
    color: #e2e8f0;
}

body.tema-nocturno .dropdown-menu {
    background-color: #111c2d;
    color: #e2e8f0;
    border-color: #1f2937;
}

body.tema-nocturno .dropdown-item {
    color: #e2e8f0;
}

body.tema-nocturno .dropdown-item:hover,
body.tema-nocturno .dropdown-item:focus {
    background-color: rgba(56, 189, 248, 0.15);
    color: #93c5fd;
}

body.tema-nocturno .modal-content {
    background-color: #111c2d;
    color: #e2e8f0;
    border: 1px solid #1f2937;
}

body.tema-nocturno .modal-header,
body.tema-nocturno .modal-footer {
    border-color: #1f2937;
}

/* =============================================
   ESTILOS DE MODO NOCTURNO PARA TABLAS EN MODALES
   ============================================= */

/* Tablas dentro de modales en modo nocturno */
body.tema-nocturno .modal-body .table,
body.tema-nocturno .modal .table {
    color: #e2e8f0 !important;
    background-color: transparent !important;
}

body.tema-nocturno .modal-body .table-sm,
body.tema-nocturno .modal .table-sm {
    color: #e2e8f0 !important;
}

/* Thead con clase table-dark en modo nocturno */
body.tema-nocturno .modal-body thead.table-dark,
body.tema-nocturno .modal thead.table-dark,
body.tema-nocturno thead.table-dark {
    background-color: #1f2937 !important;
    color: #f8fafc !important;
    border-bottom: 2px solid #374151 !important;
}

body.tema-nocturno .modal-body thead.table-dark th,
body.tema-nocturno .modal thead.table-dark th,
body.tema-nocturno thead.table-dark th {
    background-color: #1f2937 !important;
    color: #f8fafc !important;
    border-color: #374151 !important;
    font-weight: 600 !important;
}

/* Filas de tabla dentro de modales en modo nocturno */
body.tema-nocturno .modal-body .table tbody tr,
body.tema-nocturno .modal .table tbody tr {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .modal-body .table tbody tr td,
body.tema-nocturno .modal .table tbody tr td {
    color: #e2e8f0 !important;
    border-color: #374151 !important;
    background-color: transparent !important;
}

body.tema-nocturno .modal-body .table tbody tr:hover,
body.tema-nocturno .modal .table tbody tr:hover {
    background-color: #273449 !important;
}

/* Tablas con table-striped dentro de modales */
body.tema-nocturno .modal-body .table-striped > tbody > tr:nth-of-type(odd),
body.tema-nocturno .modal .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(148, 163, 184, 0.08) !important;
}

body.tema-nocturno .modal-body .table-striped > tbody > tr:nth-of-type(even),
body.tema-nocturno .modal .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #1e293b !important;
}

/* Filas con clases específicas de Bootstrap en modo nocturno */
body.tema-nocturno .modal-body .table tbody tr.table-info,
body.tema-nocturno .modal .table tbody tr.table-info,
body.tema-nocturno .table tbody tr.table-info {
    background-color: rgba(13, 110, 253, 0.2) !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .modal-body .table tbody tr.table-info td,
body.tema-nocturno .modal .table tbody tr.table-info td,
body.tema-nocturno .table tbody tr.table-info td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: rgba(13, 110, 253, 0.3) !important;
}

/* Filas table-info con fw-bold en modo nocturno - MÁXIMA ESPECIFICIDAD */
/* Sobrescribir TODOS los estilos de Bootstrap para table-info en modo nocturno */
body.tema-nocturno .modal-body .table.table-sm tbody tr.table-info.fw-bold,
body.tema-nocturno .modal .table.table-sm tbody tr.table-info.fw-bold,
body.tema-nocturno .modal-body .table.table-striped.table-sm tbody tr.table-info.fw-bold,
body.tema-nocturno .modal .table.table-striped.table-sm tbody tr.table-info.fw-bold,
body.tema-nocturno .modal-body .table tbody tr.table-info.fw-bold,
body.tema-nocturno .modal .table tbody tr.table-info.fw-bold,
body.tema-nocturno .modal-body .table-striped tbody tr.table-info.fw-bold,
body.tema-nocturno .modal .table-striped tbody tr.table-info.fw-bold,
body.tema-nocturno .table tbody tr.table-info.fw-bold,
body.tema-nocturno .table-striped tbody tr.table-info.fw-bold,
body.tema-nocturno .table.table-sm tbody tr.table-info.fw-bold,
body.tema-nocturno .table.table-striped.table-sm tbody tr.table-info.fw-bold {
    background-color: #1e3a5f !important;
    background: #1e3a5f !important;
    background-image: none !important;
    color: #f8fafc !important;
}

body.tema-nocturno .modal-body .table.table-sm tbody tr.table-info.fw-bold td,
body.tema-nocturno .modal .table.table-sm tbody tr.table-info.fw-bold td,
body.tema-nocturno .modal-body .table.table-striped.table-sm tbody tr.table-info.fw-bold td,
body.tema-nocturno .modal .table.table-striped.table-sm tbody tr.table-info.fw-bold td,
body.tema-nocturno .modal-body .table tbody tr.table-info.fw-bold td,
body.tema-nocturno .modal .table tbody tr.table-info.fw-bold td,
body.tema-nocturno .modal-body .table-striped tbody tr.table-info.fw-bold td,
body.tema-nocturno .modal .table-striped tbody tr.table-info.fw-bold td,
body.tema-nocturno .table tbody tr.table-info.fw-bold td,
body.tema-nocturno .table-striped tbody tr.table-info.fw-bold td,
body.tema-nocturno .table.table-sm tbody tr.table-info.fw-bold td,
body.tema-nocturno .table.table-striped.table-sm tbody tr.table-info.fw-bold td {
    background-color: #1e3a5f !important;
    background: #1e3a5f !important;
    background-image: none !important;
    color: #f8fafc !important;
    font-weight: 700 !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

/* Asegurar que todas las celdas dentro de table-info.fw-bold tengan el fondo correcto */
body.tema-nocturno .modal-body .table.table-sm tbody tr.table-info.fw-bold td[colspan],
body.tema-nocturno .modal .table.table-sm tbody tr.table-info.fw-bold td[colspan],
body.tema-nocturno .modal-body .table.table-striped.table-sm tbody tr.table-info.fw-bold td[colspan],
body.tema-nocturno .modal .table.table-striped.table-sm tbody tr.table-info.fw-bold td[colspan],
body.tema-nocturno .modal-body .table tbody tr.table-info.fw-bold td[colspan],
body.tema-nocturno .modal .table tbody tr.table-info.fw-bold td[colspan],
body.tema-nocturno .modal-body .table-striped tbody tr.table-info.fw-bold td[colspan],
body.tema-nocturno .modal .table-striped tbody tr.table-info.fw-bold td[colspan] {
    background-color: #1e3a5f !important;
    background: #1e3a5f !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* Regla adicional para sobrescribir cualquier estilo inline o de Bootstrap */
body.tema-nocturno tr.table-info.fw-bold,
body.tema-nocturno tr.table-info.fw-bold td {
    background-color: #1e3a5f !important;
    background: #1e3a5f !important;
    background-image: none !important;
    color: #f8fafc !important;
}

body.tema-nocturno .modal-body .table tbody tr.table-warning,
body.tema-nocturno .modal .table tbody tr.table-warning,
body.tema-nocturno .table tbody tr.table-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .modal-body .table tbody tr.table-warning td,
body.tema-nocturno .modal .table tbody tr.table-warning td,
body.tema-nocturno .table tbody tr.table-warning td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}

body.tema-nocturno .modal-body .table tbody tr.table-success,
body.tema-nocturno .modal .table tbody tr.table-success,
body.tema-nocturno .table tbody tr.table-success {
    background-color: rgba(25, 135, 84, 0.2) !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .modal-body .table tbody tr.table-success td,
body.tema-nocturno .modal .table tbody tr.table-success td,
body.tema-nocturno .table tbody tr.table-success td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: rgba(25, 135, 84, 0.3) !important;
}

body.tema-nocturno .modal-body .table tbody tr.table-danger,
body.tema-nocturno .modal .table tbody tr.table-danger,
body.tema-nocturno .table tbody tr.table-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .modal-body .table tbody tr.table-danger td,
body.tema-nocturno .modal .table tbody tr.table-danger td,
body.tema-nocturno .table tbody tr.table-danger td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

body.tema-nocturno .badge.bg-light,
body.tema-nocturno .bg-light {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* MODO NOCTURNO - Sidebar de información del ticket - MÁXIMA ESPECIFICIDAD */
body.tema-nocturno.ver-ticket-page .ticket-info-popup,
body.tema-nocturno.ver-ticket-page #ticketInfoPopup,
body.tema-nocturno .ver-ticket-page .ticket-info-popup,
body.tema-nocturno .ver-ticket-page #ticketInfoPopup,
body.tema-nocturno.ver-ticket-page div.ticket-info-popup,
body.tema-nocturno.ver-ticket-page div#ticketInfoPopup {
    background: #1e293b !important;
    background-color: #1e293b !important;
    background-image: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    border: 1px solid #374151 !important;
}

/* Estado collapsed - debe funcionar en ambos modos */
body.tema-nocturno .ver-ticket-page .ticket-info-popup.collapsed,
body.tema-nocturno .ver-ticket-page #ticketInfoPopup.collapsed {
    right: -260px !important;
}

body.tema-nocturno.ver-ticket-page .ticket-info-popup .popup-content,
body.tema-nocturno.ver-ticket-page #ticketInfoPopup .popup-content,
body.tema-nocturno .ver-ticket-page .ticket-info-popup .popup-content,
body.tema-nocturno .ver-ticket-page #ticketInfoPopup .popup-content,
body.tema-nocturno.ver-ticket-page .ticket-info-popup > .popup-content,
body.tema-nocturno.ver-ticket-page div.ticket-info-popup div.popup-content,
body.tema-nocturno.ver-ticket-page div#ticketInfoPopup div.popup-content {
    background: #1e293b !important;
    background-color: #1e293b !important;
    background-image: none !important;
    color: #e2e8f0 !important;
    padding: 16px !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .popup-content::-webkit-scrollbar-track {
    background: #1f2937 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .popup-content::-webkit-scrollbar-thumb {
    background: #475569 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .info-section {
    border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .info-label {
    color: #94a3b8 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .info-value {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .info-value.text-primary,
body.tema-nocturno .ver-ticket-page .ticket-info-popup .info-value.text-success,
body.tema-nocturno .ver-ticket-page .ticket-info-popup .info-value.text-danger,
body.tema-nocturno .ver-ticket-page .ticket-info-popup .info-value.text-warning,
body.tema-nocturno .ver-ticket-page .ticket-info-popup .info-value.text-info {
    color: inherit !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .info-section-title {
    color: #a78bfa !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .info-item {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .badge {
    background-color: #475569 !important;
    color: #ffffff !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .badge.bg-primary {
    background-color: #3b82f6 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .badge.bg-success {
    background-color: #10b981 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .badge.bg-danger {
    background-color: #ef4444 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .badge.bg-warning {
    background-color: #f59e0b !important;
    color: #1e293b !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .badge.bg-info {
    background-color: #06b6d4 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .badge.bg-secondary {
    background-color: #8F53A1 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup small,
body.tema-nocturno .ver-ticket-page .ticket-info-popup .text-muted {
    color: #94a3b8 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup a {
    color: #93c5fd !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup a:hover {
    color: #60a5fa !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .btn {
    border-color: #374151 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .btn-outline-primary {
    color: #93c5fd !important;
    border-color: #475569 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .btn-outline-primary:hover {
    background-color: #475569 !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .btn-outline-danger {
    color: #f87171 !important;
    border-color: #475569 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .btn-outline-danger:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .btn-outline-secondary {
    color: #c084fc !important;
    border-color: #475569 !important;
}

body.tema-nocturno .ver-ticket-page .ticket-info-popup .btn-outline-secondary:hover {
    background-color: #8F53A1 !important;
    border-color: #8F53A1 !important;
    color: #ffffff !important;
}

/* Estilos de modo nocturno para elementos de suscripciones en el sidebar */
body.tema-nocturno .ver-ticket-page .subscription-item {
    background-color: #0f172a !important;
    border-color: #374151 !important;
    color: #e2e8f0 !important;
}

/* MODO NOCTURNO - Nombre de suscriptor - MÁXIMA ESPECIFICIDAD */
body.tema-nocturno.ver-ticket-page .subscription-name,
body.tema-nocturno .ver-ticket-page .subscription-name,
body.tema-nocturno.ver-ticket-page .subscription-name span,
body.tema-nocturno .ver-ticket-page .subscription-name span,
body.tema-nocturno.ver-ticket-page .subscription-name *,
body.tema-nocturno .ver-ticket-page .subscription-name *,
body.tema-nocturno.ver-ticket-page .subscription-item .subscription-name,
body.tema-nocturno .ver-ticket-page .subscription-item .subscription-name,
body.tema-nocturno.ver-ticket-page .subscription-item .subscription-name span,
body.tema-nocturno .ver-ticket-page .subscription-item .subscription-name span {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .subscription-meta {
    color: #94a3b8 !important;
}

body.tema-nocturno .ver-ticket-page .subscription-search-results {
    background-color: #0f172a !important;
    border-color: #374151 !important;
}

body.tema-nocturno .ver-ticket-page .subscription-search-item {
    background-color: #1e293b !important;
    border-color: #374151 !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .subscription-search-item:hover {
    background-color: #374151 !important;
    border-color: #475569 !important;
}

body.tema-nocturno .ver-ticket-page .subscription-search-meta {
    color: #94a3b8 !important;
}

/* =============================================
   SIDEBAR TICKET INFO - MODO NOCTURNO (FINAL)
   Al final del archivo para máxima prioridad
   ============================================= */
body.tema-nocturno.ver-ticket-page .ticket-info-popup,
body.tema-nocturno.ver-ticket-page #ticketInfoPopup,
body.tema-nocturno .ver-ticket-page .ticket-info-popup,
body.tema-nocturno .ver-ticket-page #ticketInfoPopup,
body.tema-nocturno.ver-ticket-page div.ticket-info-popup,
body.tema-nocturno.ver-ticket-page div#ticketInfoPopup {
    background: #1e293b !important;
    background-color: #1e293b !important;
    background-image: none !important;
}

body.tema-nocturno.ver-ticket-page .ticket-info-popup .popup-content,
body.tema-nocturno.ver-ticket-page #ticketInfoPopup .popup-content,
body.tema-nocturno .ver-ticket-page .ticket-info-popup .popup-content,
body.tema-nocturno .ver-ticket-page #ticketInfoPopup .popup-content,
body.tema-nocturno.ver-ticket-page .ticket-info-popup > .popup-content,
body.tema-nocturno.ver-ticket-page div.ticket-info-popup div.popup-content,
body.tema-nocturno.ver-ticket-page div#ticketInfoPopup div.popup-content {
    background: #1e293b !important;
    background-color: #1e293b !important;
    background-image: none !important;
}

body.tema-nocturno footer {
    background-color: #111c2d !important;
    color: #94a3b8 !important;
}

/* =============================================
   SUSCRIPTORES - MODO NOCTURNO (FINAL)
   Al final del archivo para máxima prioridad
   ============================================= */
body.tema-nocturno.ver-ticket-page .subscription-name,
body.tema-nocturno .ver-ticket-page .subscription-name,
body.tema-nocturno.ver-ticket-page .subscription-name span,
body.tema-nocturno .ver-ticket-page .subscription-name span,
body.tema-nocturno.ver-ticket-page .subscription-name *,
body.tema-nocturno .ver-ticket-page .subscription-name *,
body.tema-nocturno.ver-ticket-page .subscription-item .subscription-name,
body.tema-nocturno .ver-ticket-page .subscription-item .subscription-name,
body.tema-nocturno.ver-ticket-page .subscription-item .subscription-name span,
body.tema-nocturno .ver-ticket-page .subscription-item .subscription-name span,
body.tema-nocturno.ver-ticket-page div.subscription-item div.subscription-name,
body.tema-nocturno .ver-ticket-page div.subscription-item div.subscription-name,
body.tema-nocturno.ver-ticket-page div.subscription-item div.subscription-name span,
body.tema-nocturno .ver-ticket-page div.subscription-item div.subscription-name span {
    color: #e2e8f0 !important;
}

body.tema-nocturno footer a {
    color: #93c5fd;
}

/* =============================================
   PÁGINA ESTADÍSTICAS - MODO NOCTURNO
   ============================================= */
body.tema-nocturno .estadisticas-page .table-striped tbody tr {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .estadisticas-page .table-striped tbody tr:nth-of-type(odd) {
    background-color: #1f2937 !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .estadisticas-page .table-striped tbody tr:nth-of-type(even) {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .estadisticas-page .table-striped tbody tr td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .estadisticas-page .table-striped thead th {
    background-color: #111c2d !important;
    color: #f8fafc !important;
    border-color: #374151 !important;
}

body.tema-nocturno .estadisticas-page .list-group-item {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .estadisticas-page .list-group-item strong {
    color: #f8fafc !important;
}

/* =============================================
   PÁGINA ÁREAS - MODO NOCTURNO
   ============================================= */
body.tema-nocturno .areas-page .stat-box {
    background: #1f2937 !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .areas-page .stat-box h3 {
    color: #e2e8f0 !important;
}

body.tema-nocturno .areas-page .stat-box small {
    color: #94a3b8 !important;
}

body.tema-nocturno .areas-page .card-header.bg-light {
    background-color: #1f2937 !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .areas-page .card-header.bg-light h6 {
    color: #f8fafc !important;
}

body.tema-nocturno .areas-page .table-light thead th {
    background-color: #111c2d !important;
    color: #f8fafc !important;
    border-color: #374151 !important;
}

body.tema-nocturno .areas-page .table-hover tbody tr {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .areas-page .table-hover tbody tr:hover {
    background-color: #273449 !important;
    color: #f8fafc !important;
}

body.tema-nocturno .areas-page .table-hover tbody tr td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

/* =============================================
   PÁGINA USUARIOS - MODO NOCTURNO
   ============================================= */
body.tema-nocturno .usuarios-page .table-light thead th {
    background-color: #111c2d !important;
    color: #f8fafc !important;
    border-color: #374151 !important;
}

body.tema-nocturno .usuarios-page .table-hover tbody tr {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .usuarios-page .table-hover tbody tr:hover {
    background-color: #273449 !important;
    color: #f8fafc !important;
}

body.tema-nocturno .usuarios-page .table-hover tbody tr td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .usuarios-page .table-hover tbody tr td strong {
    color: #f8fafc !important;
}

body.tema-nocturno .usuarios-page .table-hover tbody tr td small {
    color: #94a3b8 !important;
}

body.tema-nocturno .theme-toggle-label {
    color: #e2e8f0;
}

/* =============================================
   PÁGINA PROYECTOS ÁREA - MODO NOCTURNO
   ============================================= */
body.tema-nocturno .proyectos-area-page .table thead th {
    background-color: #111c2d !important;
    color: #f8fafc !important;
    border-color: #374151 !important;
}

body.tema-nocturno .proyectos-area-page .table tbody tr {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .proyectos-area-page .table tbody tr:hover {
    background-color: #273449 !important;
    color: #f8fafc !important;
}

body.tema-nocturno .proyectos-area-page .table tbody tr td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .proyectos-area-page .table tbody tr td strong {
    color: #f8fafc !important;
}

body.tema-nocturno .proyectos-area-page .table tbody tr td small {
    color: #94a3b8 !important;
}

body.tema-nocturno .proyectos-area-page .table tbody tr td .badge {
    color: #ffffff !important;
}

/* =============================================
   PÁGINA PROYECTO - MODO NOCTURNO
   ============================================= */
body.tema-nocturno .proyecto-page .list-group-item {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .proyecto-page .list-group-item:hover,
body.tema-nocturno .proyecto-page .list-group-item-action:hover {
    background-color: #273449 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

body.tema-nocturno .proyecto-page .list-group-item h6 {
    color: #f8fafc !important;
}

body.tema-nocturno .proyecto-page .list-group-item small {
    color: #94a3b8 !important;
}

body.tema-nocturno .proyecto-page .list-group-item .badge {
    color: #ffffff !important;
}

body.tema-nocturno .proyecto-page .list-group-item .btn-outline-primary {
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}

body.tema-nocturno .proyecto-page .list-group-item .btn-outline-primary:hover {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.tema-nocturno .proyecto-page .list-group-item .btn-outline-danger {
    border-color: #ef4444 !important;
    color: #f87171 !important;
}

body.tema-nocturno .proyecto-page .list-group-item .btn-outline-danger:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

/* Tabla de hitos en proyecto-page */
body.tema-nocturno .proyecto-page .table thead th {
    background-color: #111c2d !important;
    color: #f8fafc !important;
    border-color: #374151 !important;
}

body.tema-nocturno .proyecto-page .table tbody tr {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .proyecto-page .table tbody tr:hover {
    background-color: #273449 !important;
    color: #f8fafc !important;
}

body.tema-nocturno .proyecto-page .table tbody tr td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .proyecto-page .table tbody tr td strong {
    color: #f8fafc !important;
}

body.tema-nocturno .proyecto-page .table tbody tr td small {
    color: #94a3b8 !important;
}

body.tema-nocturno .proyecto-page .table tbody tr td .badge {
    color: #ffffff !important;
}

/* Diagrama de Gantt en proyecto-page - Modo Nocturno */
body.tema-nocturno #gantt-container {
    background-color: #1e293b !important;
    border-radius: 8px;
    padding: 20px;
}

body.tema-nocturno #gantt {
    background-color: #1e293b !important;
}

/* Textos y labels del Gantt */
body.tema-nocturno #gantt text {
    fill: #e2e8f0 !important;
}

/* Líneas de grid del Gantt */
body.tema-nocturno #gantt .grid-background,
body.tema-nocturno #gantt .grid-row,
body.tema-nocturno #gantt .grid-header {
    fill: #1e293b !important;
    stroke: #374151 !important;
}

body.tema-nocturno #gantt .row-line {
    stroke: #374151 !important;
}

body.tema-nocturno #gantt .today-highlight {
    fill: rgba(59, 130, 246, 0.1) !important;
}

/* Headers del Gantt (fechas) */
body.tema-nocturno #gantt .upper-text,
body.tema-nocturno #gantt .lower-text {
    fill: #e2e8f0 !important;
}

/* Barras de tareas - mantener colores pero ajustar opacidad si es necesario */
body.tema-nocturno #gantt .bar {
    opacity: 0.9;
}

body.tema-nocturno #gantt .bar-progress {
    opacity: 0.7;
}

/* Labels de las tareas */
body.tema-nocturno #gantt .bar-label {
    fill: #f8fafc !important;
    font-weight: 500;
}

/* Líneas de conexión */
body.tema-nocturno #gantt .arrow {
    stroke: #60a5fa !important;
    fill: #60a5fa !important;
}

/* Botones de navegación del Gantt (si existen) */
body.tema-nocturno #gantt .gantt-header-arrow {
    fill: #e2e8f0 !important;
}

body.tema-nocturno #gantt .gantt-header-arrow:hover {
    fill: #93c5fd !important;
}

/* Contenedor de avances */
body.tema-nocturno .avances-page {
    background-color: transparent !important;
}

/* =============================================
   ESTILOS DE MODO NOCTURNO PARA FILAS DE TICKETS
   ============================================= */

/* Tabla light (tickets abiertos no leídos) */
body.tema-nocturno .table tbody tr.table-light,
body.tema-nocturno tbody tr.table-light {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .table tbody tr.table-light:hover,
body.tema-nocturno tbody tr.table-light:hover {
    background-color: #273449 !important;
}

body.tema-nocturno .table tbody tr.table-light td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

/* Tabla secondary (tickets abiertos leídos) */
body.tema-nocturno .table tbody tr.table-secondary,
body.tema-nocturno tbody tr.table-secondary {
    background-color: #1f2937 !important;
    color: #94a3b8 !important;
}

body.tema-nocturno .table tbody tr.table-secondary:hover,
body.tema-nocturno tbody tr.table-secondary:hover {
    background-color: #273449 !important;
}

body.tema-nocturno .table tbody tr.table-secondary td {
    background-color: transparent !important;
    color: #94a3b8 !important;
}

/* Ticket en gestión - Morado claro adaptado para modo nocturno */
body.tema-nocturno .table tbody tr.ticket-en-gestion,
body.tema-nocturno tbody tr.ticket-en-gestion {
    background-color: rgba(143, 83, 161, 0.3) !important;
    border-left: 6px solid #c084fc !important;
    color: #e2e8f0 !important;
    box-shadow: inset 0 0 0 1px rgba(143, 83, 161, 0.2) !important;
}

body.tema-nocturno .table tbody tr.ticket-en-gestion:hover,
body.tema-nocturno tbody tr.ticket-en-gestion:hover {
    background-color: rgba(143, 83, 161, 0.4) !important;
    box-shadow: inset 0 0 0 1px rgba(143, 83, 161, 0.3) !important;
}

body.tema-nocturno .table-hover tbody tr.ticket-en-gestion:hover {
    background-color: rgba(143, 83, 161, 0.4) !important;
    box-shadow: inset 0 0 0 1px rgba(143, 83, 161, 0.3) !important;
}

body.tema-nocturno .table tbody tr.ticket-en-gestion td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

/* Ticket con SLA vencido - ROJO adaptado para modo nocturno */
body.tema-nocturno .table tbody tr.ticket-sla-vencido,
body.tema-nocturno tbody tr.ticket-sla-vencido {
    background-color: rgba(220, 53, 69, 0.35) !important;
    border-left: 6px solid #ef4444 !important;
    font-weight: 600 !important;
    color: #fee2e2 !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.25) !important;
}

body.tema-nocturno .table tbody tr.ticket-sla-vencido:hover,
body.tema-nocturno tbody tr.ticket-sla-vencido:hover {
    background-color: rgba(220, 53, 69, 0.45) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.35) !important;
}

body.tema-nocturno .table-hover tbody tr.ticket-sla-vencido:hover {
    background-color: rgba(220, 53, 69, 0.45) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.35) !important;
}

body.tema-nocturno .table tbody tr.ticket-sla-vencido td {
    background-color: transparent !important;
    color: #fee2e2 !important;
}

/* Ticket con SLA vencido y leído - ROJO claro en modo nocturno */
body.tema-nocturno .table tbody tr.ticket-sla-vencido-leido,
body.tema-nocturno tbody tr.ticket-sla-vencido-leido {
    background-color: rgba(220, 53, 69, 0.25) !important;
    border-left: 6px solid #f87171 !important;
    color: #fecaca !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.15) !important;
}

body.tema-nocturno .table tbody tr.ticket-sla-vencido-leido:hover,
body.tema-nocturno tbody tr.ticket-sla-vencido-leido:hover {
    background-color: rgba(220, 53, 69, 0.35) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.25) !important;
}

body.tema-nocturno .table tbody tr.ticket-sla-vencido-leido td {
    background-color: transparent !important;
    color: #fecaca !important;
}

/* Ticket con SLA vencido EN GESTIÓN - ROJO claro en modo nocturno */
body.tema-nocturno .table tbody tr.ticket-sla-vencido-gestion,
body.tema-nocturno tbody tr.ticket-sla-vencido-gestion {
    background-color: rgba(220, 53, 69, 0.3) !important;
    border-left: 6px solid #f87171 !important;
    font-weight: 500 !important;
    color: #fee2e2 !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.2) !important;
}

body.tema-nocturno .table tbody tr.ticket-sla-vencido-gestion:hover,
body.tema-nocturno tbody tr.ticket-sla-vencido-gestion:hover {
    background-color: rgba(220, 53, 69, 0.4) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.3) !important;
}

body.tema-nocturno .table-hover tbody tr.ticket-sla-vencido-gestion:hover {
    background-color: rgba(220, 53, 69, 0.4) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.3) !important;
}

body.tema-nocturno .table tbody tr.ticket-sla-vencido-gestion td {
    background-color: transparent !important;
    color: #fee2e2 !important;
}

/* Ticket con SLA vencido EN GESTIÓN y leído - ROJO muy claro en modo nocturno */
body.tema-nocturno .table tbody tr.ticket-sla-vencido-gestion-leido,
body.tema-nocturno tbody tr.ticket-sla-vencido-gestion-leido {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-left: 6px solid #fca5a5 !important;
    color: #fecaca !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.12) !important;
}

body.tema-nocturno .table tbody tr.ticket-sla-vencido-gestion-leido:hover,
body.tema-nocturno tbody tr.ticket-sla-vencido-gestion-leido:hover {
    background-color: rgba(220, 53, 69, 0.3) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.2) !important;
}

body.tema-nocturno .table tbody tr.ticket-sla-vencido-gestion-leido td {
    background-color: transparent !important;
    color: #fecaca !important;
}

/* Ticket cerrado - Celeste adaptado para modo nocturno */
body.tema-nocturno .table tbody tr.ticket-cerrado,
body.tema-nocturno tbody tr.ticket-cerrado {
    background-color: rgba(0, 174, 239, 0.25) !important;
    border-left: 6px solid #38bdf8 !important;
    color: #e2e8f0 !important;
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, 0.15) !important;
}

body.tema-nocturno .table tbody tr.ticket-cerrado:hover,
body.tema-nocturno tbody tr.ticket-cerrado:hover {
    background-color: rgba(0, 174, 239, 0.35) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, 0.2) !important;
}

body.tema-nocturno .table-hover tbody tr.ticket-cerrado:hover {
    background-color: rgba(0, 174, 239, 0.3) !important;
}

body.tema-nocturno .table tbody tr.ticket-cerrado td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

/* Tabla danger (tickets rechazados) */
body.tema-nocturno .table tbody tr.table-danger,
body.tema-nocturno tbody tr.table-danger {
    background-color: rgba(220, 53, 69, 0.25) !important;
    border-left: 4px solid #f87171 !important;
    color: #fee2e2 !important;
}

body.tema-nocturno .table tbody tr.table-danger:hover,
body.tema-nocturno tbody tr.table-danger:hover {
    background-color: rgba(220, 53, 69, 0.35) !important;
}

body.tema-nocturno .table tbody tr.table-danger td {
    background-color: transparent !important;
    color: #fee2e2 !important;
}

/* Tabla hover general en modo nocturno */
body.tema-nocturno .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Thead en modo nocturno */
body.tema-nocturno thead.table-light {
    background-color: #1f2937 !important;
    color: #e2e8f0 !important;
    border-bottom: 2px solid #374151 !important;
}

body.tema-nocturno thead.table-light th {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

/* Filas de tabla por defecto en modo nocturno (sin clases específicas) */
body.tema-nocturno .table tbody tr {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .table tbody tr td {
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .table tbody tr:hover {
    background-color: #273449 !important;
}

/* Filas alternadas en modo nocturno */
body.tema-nocturno .table tbody tr:nth-child(even) {
    background-color: #1f2937 !important;
}

body.tema-nocturno .table tbody tr:nth-child(even):hover {
    background-color: #273449 !important;
}

/* Estilos específicos para tabla de líneas de compras en modo nocturno */
body.tema-nocturno #tabla-lineas-compras.table-hover tbody tr,
body.tema-nocturno #tabla-lineas-compras tbody tr {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno #tabla-lineas-compras.table-hover tbody tr td,
body.tema-nocturno #tabla-lineas-compras tbody tr td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno #tabla-lineas-compras.table-hover tbody tr:hover,
body.tema-nocturno #tabla-lineas-compras tbody tr:hover {
    background-color: #273449 !important;
}

body.tema-nocturno #tabla-lineas-compras.table-hover tbody tr:hover td,
body.tema-nocturno #tabla-lineas-compras tbody tr:hover td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno #tabla-lineas-compras tbody tr .form-control,
body.tema-nocturno #tabla-lineas-compras tbody tr .form-control-sm,
body.tema-nocturno #tabla-lineas-compras tbody tr input[type="text"],
body.tema-nocturno #tabla-lineas-compras tbody tr input[type="number"] {
    background-color: #0f172a !important;
    border-color: #1f2937 !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno #tabla-lineas-compras tbody tr .form-control:focus,
body.tema-nocturno #tabla-lineas-compras tbody tr .form-control-sm:focus,
body.tema-nocturno #tabla-lineas-compras tbody tr input[type="text"]:focus,
body.tema-nocturno #tabla-lineas-compras tbody tr input[type="number"]:focus {
    background-color: #0f172a !important;
    border-color: #38bdf8 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25) !important;
}

body.tema-nocturno #tabla-lineas-compras tbody tr .form-select,
body.tema-nocturno #tabla-lineas-compras tbody tr .form-select-sm,
body.tema-nocturno #tabla-lineas-compras tbody tr select {
    background-color: #0f172a !important;
    border-color: #1f2937 !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno #tabla-lineas-compras tbody tr .form-select:focus,
body.tema-nocturno #tabla-lineas-compras tbody tr .form-select-sm:focus,
body.tema-nocturno #tabla-lineas-compras tbody tr select:focus {
    background-color: #0f172a !important;
    border-color: #38bdf8 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25) !important;
}

body.tema-nocturno #tabla-lineas-compras tbody tr .form-select option,
body.tema-nocturno #tabla-lineas-compras tbody tr .form-select-sm option,
body.tema-nocturno #tabla-lineas-compras tbody tr select option {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno #tabla-lineas-compras tbody tr .btn {
    color: #fff !important;
}

body.tema-nocturno #tabla-lineas-compras tbody tr .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

body.tema-nocturno #tabla-lineas-compras tbody tr .btn-danger:hover {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
}


.container-fluid {
    overflow-x: hidden;
    padding-left: 0;
    padding-right: 0;
}

/* Asegurar que el navbar no tenga overflow que corte los dropdowns */
.navbar {
    overflow: visible !important;
}

.navbar .container-fluid {
    overflow: visible !important;
}

/* Navbar personalizada */
.navbar {
    background-color: var(--primary-color) !important;
    box-shadow: 0 2px 10px rgba(2, 63, 136, 0.1);
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
    font-family: 'Manrope', sans-serif;
    color: var(--white-color) !important;
    display: flex;
    align-items: center;
}

.navbar-logo {
    height: 40px;
    width: auto;
    max-height: 40px;
    transition: all 0.3s ease;
    background-color: var(--white-color);
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.navbar-nav .nav-link {
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    color: var(--white-color) !important;
}

.navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 0.375rem;
    color: var(--white-color) !important;
}

/* Botón de cambio de tema */
.navbar .theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--white-color);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.4rem 0.85rem;
    transition: all 0.2s ease;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.navbar .theme-toggle-btn i {
    font-size: 0.95rem;
}

.navbar .theme-toggle-btn:hover,
.navbar .theme-toggle-btn:focus {
    color: var(--white-color);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.75);
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.15);
}

.navbar .theme-toggle-btn .theme-toggle-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* Estilos para dropdowns del navbar */
.navbar .dropdown-menu {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    animation: fadeInDown 0.3s ease;
}

.navbar .dropdown-item {
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
    color: #333;
    font-weight: 500;
}

.navbar .dropdown-item:hover {
    background-color: rgba(2, 63, 136, 0.1);
    color: var(--primary-color);
    padding-left: 2rem;
}

.navbar .dropdown-item i {
    margin-right: 0.5rem;
    width: 20px;
    text-align: center;
}

.navbar .dropdown-divider {
    margin: 0.5rem 0;
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* Animación para dropdowns */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Botón toggle del sidebar */
.sidebar-toggle {
    position: fixed;
    top: calc(var(--navbar-height) + 20px);
    left: 20px;
    z-index: 1050;
    background: var(--secondary-color);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: var(--white-color);
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(143, 83, 161, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.sidebar-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(143, 83, 161, 0.4);
    background: #8F53A1;
}

.sidebar-toggle.sidebar-open {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: var(--navbar-height);
    left: calc(-1 * var(--sidebar-width));
    width: var(--sidebar-width);
    height: calc(100vh - var(--navbar-height));
    background: var(--secondary-color);
    box-shadow: 2px 0 15px rgba(0,0,0,0.1);
    transition: left 0.3s ease;
    z-index: 1040;
    overflow-y: auto;
    transform: translateX(0);
}

.sidebar.open {
    left: 0;
    transform: translateX(0);
}

/* Overlay removido - no se oscurece el área de trabajo */

.sidebar-header {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h5 {
    margin: 0;
    font-weight: 600;
    flex: 1;
}

.sidebar-close {
    background: none;
    border: none;
    color: var(--white-color);
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sidebar-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.75rem 1.5rem;
    border-radius: 0;
    transition: all 0.3s ease;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--white-color);
    border-left: 3px solid var(--white-color);
}

.sidebar-nav .nav-link i {
    width: 20px;
    margin-right: 0.5rem;
    transition: transform 0.3s ease;
}

.nav-text {
    transition: opacity 0.3s ease;
}

/* Contenido principal */
.main-content {
    position: relative;
    left: 0;
    width: 100%;
    padding: 2rem;
    background-color: #f5f6fa;
    min-height: calc(100vh - var(--navbar-height));
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.main-content.sidebar-open {
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

/* Footer responsivo - se ajusta cuando el sidebar está abierto */
footer#mainFooter {
    position: relative;
    left: 0;
    width: 100%;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

footer#mainFooter.sidebar-open {
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

.page-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid #e9ecef;
}

.page-header h1 {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-family: 'Manrope', sans-serif;
}

/* Tarjetas de resumen */
.summary-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.summary-card .card-body {
    padding: 1.5rem;
}

.summary-card .card-title {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

/* Tarjetas generales */
.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.card-header {
    background: var(--primary-color);
    color: var(--white-color);
    border-radius: 1rem 1rem 0 0 !important;
    border: none;
    padding: 1.25rem 1.5rem;
}

.card-header h5 {
    margin: 0;
    font-weight: 600;
}

/* Tablas */
.table {
    border-radius: 0.5rem;
    overflow: hidden;
}

.table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: var(--dark-color);
}

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

.table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Badges de estado */
.badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
}

.badge-estado-abierto {
    background-color: #dc3545;
    color: white;
}

.badge-estado-asignado {
    background-color: #fd7e14;
    color: white;
}

.badge-estado-gestionandose {
    background-color: #ffc107;
    color: #000;
}

.badge-estado-detenido {
    background-color: #6c757d;
    color: white;
}

.badge-estado-cerrado {
    background-color: #198754;
    color: white;
}

.badge-estado-rechazado {
    background-color: #dc3545;
    color: white;
}

/* Badges de prioridad */
.badge-prioridad-baja {
    background-color: var(--bexen-medical-green);
    color: white;
}

.badge-prioridad-media {
    background-color: var(--bexen-base-blue);
    color: white;
}

.badge-prioridad-alta {
    background-color: var(--bexen-cardio-purple);
    color: white;
}

.badge-prioridad-critica {
    background-color: #dc3545;
    color: white;
}

.badge-prioridad-urgente {
    background-color: #dc3545;
    color: white;
}

/* Botones personalizados */
.btn {
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

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

.btn-primary:hover {
    background: #022a5f;
    border: none;
}

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

.btn-secondary:hover {
    background: #8F53A1;
    border: none;
}

.btn-success {
    background: #28a745;
    border: none;
}

.btn-success:hover {
    background: #218838;
    border: none;
}

.btn-danger {
    background: #dc3545;
    border: none;
}

.btn-danger:hover {
    background: #c82333;
    border: none;
}

/* Estilos específicos para botones en ver_ticket */
.ver-ticket-page .btn-success {
    background: #28a745 !important;
    border: none !important;
}

.ver-ticket-page .btn-success:hover {
    background: #218838 !important;
    border: none !important;
}

.ver-ticket-page .btn-danger {
    background: #dc3545 !important;
    border: none !important;
}

.ver-ticket-page .btn-danger:hover {
    background: #c82333 !important;
    border: none !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: none;
    color: white;
}

/* Formularios */
.form-control,
.form-select {
    border-radius: 0.5rem;
    border: 2px solid #e9ecef;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(2, 63, 136, 0.25);
}

.form-label {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

/* Actividad reciente */
.activity-item {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
}

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

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 1rem;
    font-size: 0.875rem;
}

.activity-content p {
    margin: 0;
    font-weight: 500;
}

.activity-content small {
    color: #6c757d;
}

/* Footer */
footer {
    margin-top: auto;
    border-top: 1px solid #e9ecef;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        width: 280px;
        left: calc(-1 * 280px) !important;
        transform: translateX(-100%);
    }
    
    .sidebar.open {
        left: 0 !important;
        transform: translateX(0);
    }
    
    .main-content {
        padding: 1rem;
        left: 0 !important;
        width: 100% !important;
    }
    
    .main-content.sidebar-open {
        left: 0 !important;
        width: 100% !important;
    }
    
    footer#mainFooter {
        left: 0 !important;
        width: 100% !important;
    }
    
    footer#mainFooter.sidebar-open {
        left: 0 !important;
        width: 100% !important;
    }
    
    .sidebar-toggle {
        top: calc(var(--navbar-height) + 10px);
        left: 10px;
    }
    
    .sidebar-toggle.sidebar-open {
        opacity: 0;
        visibility: hidden;
    }
    
    .summary-card {
        margin-bottom: 1rem;
    }
    
    /* Logo responsive */
    .navbar-logo {
        height: 35px;
        max-height: 35px;
        padding: 4px 10px;
    }
    
    /* En móviles, el sidebar cubre toda la pantalla */
    @media (max-width: 576px) {
        .sidebar {
            width: 100%;
            left: calc(-1 * 100%) !important;
        }
        
        .sidebar.open {
            left: 0 !important;
        }
        
        .sidebar-toggle.sidebar-open {
            opacity: 0;
            visibility: hidden;
        }
        
        /* Logo más pequeño en móviles pequeños */
        .navbar-logo {
            height: 30px;
            max-height: 30px;
            padding: 3px 8px;
        }
    }
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* Estados de carga */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Utilidades */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Clases de fuente Manrope */
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.border-gradient {
    border: 2px solid transparent;
    background: linear-gradient(var(--white-color), var(--white-color)) padding-box,
                linear-gradient(135deg, var(--primary-color), var(--secondary-color)) border-box;
}

/* =============================================
   PÁGINA: COMPLETAR PERFIL
   ============================================= */

.completar-perfil-page .card {
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.completar-perfil-page .card-header {
    background: var(--primary-color);
    color: white;
    border: none;
}

.completar-perfil-page .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.completar-perfil-page .text-danger {
    color: var(--danger-color) !important;
}

.completar-perfil-page .border-info {
    border-color: #0dcaf0 !important;
    border-width: 1px !important;
}

/* =============================================
   UTILIDADES DE COLOR MORADO/PURPLE
   ============================================= */

.text-purple {
    color: var(--secondary-color) !important;
}

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

.border-purple {
    border-color: var(--secondary-color) !important;
}

/* =============================================
   PÁGINA NUEVO TICKET
   ============================================= */

.nuevo-ticket-page .required::after {
    content: ' *';
    color: var(--danger-color);
}

.nuevo-ticket-page .file-upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.nuevo-ticket-page .file-upload-area:hover {
    border-color: var(--primary-color);
    background-color: #f8f9fa;
}

.nuevo-ticket-page .file-upload-area.drag-active {
    border-color: var(--primary-color);
    background-color: #e7f1ff;
    transform: scale(1.02);
}

.nuevo-ticket-page .file-upload-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.nuevo-ticket-page .file-upload-message {
    pointer-events: none;
}

.nuevo-ticket-page .files-list {
    text-align: left;
}

.nuevo-ticket-page .file-item {
    animation: slideIn 0.3s ease;
}

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

.nuevo-ticket-page .card {
    border: none;
    border-radius: 15px;
}

.nuevo-ticket-page .form-select,
.nuevo-ticket-page .form-control {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 0.6rem 1rem;
}

.nuevo-ticket-page .form-select:focus,
.nuevo-ticket-page .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(2, 63, 136, 0.15);
}

.nuevo-ticket-page .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nuevo-ticket-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(2, 63, 136, 0.3);
}

.nuevo-ticket-page .btn-secondary {
    border-radius: 8px;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
}

.nuevo-ticket-page .border-warning {
    border-left: 4px solid #ffc107 !important;
}

/* TinyMCE customizations */
.nuevo-ticket-page .tox-tinymce {
    border-radius: 8px !important;
    border-color: #dee2e6 !important;
}

.nuevo-ticket-page .tox .tox-toolbar,
.nuevo-ticket-page .tox .tox-toolbar__overflow,
.nuevo-ticket-page .tox .tox-toolbar__primary {
    background: #f8f9fa !important;
}

/* =============================================
   ESTILOS PARA PÁGINAS DE LISTADO DE TICKETS
   ============================================= */

/* Avatar circular para usuarios */
.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 12px;
    font-weight: 600;
}

/* Estadísticas rápidas con colores corporativos Bexen */
.mis-tickets-page .card.bg-primary,
.todos-tickets-page .card.bg-primary {
    background-color: var(--tickets-primary) !important; /* Bexen Cardio Purple */
    border: none;
    box-shadow: 0 2px 4px rgba(143, 83, 161, 0.2);
    transition: transform 0.2s ease;
}

.mis-tickets-page .card.bg-warning,
.todos-tickets-page .card.bg-warning {
    background-color: var(--tickets-warning) !important; /* Cian Base Bexen */
    border: none;
    box-shadow: 0 2px 4px rgba(0, 174, 239, 0.2);
    transition: transform 0.2s ease;
}

.mis-tickets-page .card.bg-info,
.todos-tickets-page .card.bg-info {
    background-color: var(--tickets-info) !important; /* Bexen Bioservices Blue */
    border: none;
    box-shadow: 0 2px 4px rgba(109, 207, 246, 0.2);
    transition: transform 0.2s ease;
}

.mis-tickets-page .card.bg-success,
.todos-tickets-page .card.bg-success {
    background-color: var(--tickets-success) !important; /* Bexen Medical Green */
    border: none;
    box-shadow: 0 2px 4px rgba(0, 180, 141, 0.2);
    transition: transform 0.2s ease;
}

.mis-tickets-page .card.bg-secondary,
.todos-tickets-page .card.bg-secondary {
    background-color: var(--tickets-secondary) !important; /* Bexen Base Blue */
    border: none;
    box-shadow: 0 2px 4px rgba(2, 63, 136, 0.2);
    transition: transform 0.2s ease;
}

.mis-tickets-page .card.bg-primary:hover,
.mis-tickets-page .card.bg-warning:hover,
.mis-tickets-page .card.bg-info:hover,
.mis-tickets-page .card.bg-success:hover,
.mis-tickets-page .card.bg-secondary:hover,
.todos-tickets-page .card.bg-primary:hover,
.todos-tickets-page .card.bg-warning:hover,
.todos-tickets-page .card.bg-info:hover,
.todos-tickets-page .card.bg-success:hover,
.todos-tickets-page .card.bg-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Desactivar hover en cuadros de estadísticas de mis_tickets.php */
.mis-tickets-page .card.no-hover:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Headers de las secciones con colores corporativos Bexen */
.mis-tickets-page .card-header.bg-primary,
.todos-tickets-page .card-header.bg-primary {
    background-color: var(--tickets-primary) !important; /* Bexen Cardio Purple */
    border-bottom: 3px solid var(--bexen-base-blue);
}

.mis-tickets-page .card-header.bg-warning,
.todos-tickets-page .card-header.bg-warning {
    background-color: var(--tickets-warning) !important; /* Cian Base Bexen */
    color: #fff !important;
    border-bottom: 3px solid var(--bexen-base-blue);
}

.mis-tickets-page .card-header.bg-success,
.todos-tickets-page .card-header.bg-success {
    background-color: var(--tickets-success) !important; /* Bexen Medical Green */
    border-bottom: 3px solid var(--bexen-medical-green);
}

.mis-tickets-page .card-header.bg-info,
.todos-tickets-page .card-header.bg-info {
    background-color: var(--tickets-info) !important; /* Bexen Bioservices Blue */
    border-bottom: 3px solid var(--bexen-base-blue);
}

/* Tabla de tickets */
.mis-tickets-page .table,
.todos-tickets-page .table {
    font-size: 0.9rem;
}

.mis-tickets-page .table th,
.todos-tickets-page .table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
    background-color: #f8f9fa;
}

.mis-tickets-page .table td,
.todos-tickets-page .table td {
    vertical-align: middle;
    border-color: #e9ecef;
}

.mis-tickets-page .table tbody tr:hover,
.todos-tickets-page .table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Badges de prioridad con colores corporativos Bexen */
.mis-tickets-page .badge.bg-danger,
.todos-tickets-page .badge.bg-danger {
    background-color: var(--tickets-danger) !important; /* Azul Base Bexen */
}

.mis-tickets-page .badge.bg-warning,
.todos-tickets-page .badge.bg-warning {
    background-color: var(--tickets-warning) !important; /* Cian Base Bexen */
    color: #fff !important;
}

.mis-tickets-page .badge.bg-info,
.todos-tickets-page .badge.bg-info {
    background-color: var(--tickets-info) !important; /* Bexen Bioservices Blue */
}

.mis-tickets-page .badge.bg-success,
.todos-tickets-page .badge.bg-success {
    background-color: var(--tickets-success) !important; /* Bexen Medical Green */
}

.mis-tickets-page .badge.bg-secondary,
.todos-tickets-page .badge.bg-secondary {
    background-color: var(--tickets-secondary) !important; /* Bexen Base Blue */
}

/* Estado vacío */
.text-center.py-5 {
    padding: 3rem 0 !important;
}

.text-center.py-5 i {
    opacity: 0.5;
}

/* Selectores de límite de registros */
.mis-tickets-page .form-select,
.todos-tickets-page .form-select {
    min-width: 80px;
    padding-right: 2rem;
}

.mis-tickets-page .form-select-sm,
.todos-tickets-page .form-select-sm {
    min-width: 70px;
    padding-right: 1.8rem;
}

/* Estilos para drag & drop de secciones */
.seccion-ordenable {
    transition: all 0.3s ease;
    position: relative;
}

.seccion-ordenable.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
    z-index: 1000;
}

.seccion-ordenable.drag-over {
    border: 2px dashed var(--bexen-blue-dark);
    background-color: rgba(2, 63, 136, 0.05);
}

.drag-handle {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.drag-handle:hover {
    opacity: 1;
}

.seccion-ordenable:hover .drag-handle {
    opacity: 1;
}

/* Indicador visual de que es arrastrable */
.seccion-ordenable .card-header {
    position: relative;
}

.seccion-ordenable .card-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--bexen-base-blue), var(--bexen-cardio-purple));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.seccion-ordenable:hover .card-header::before {
    opacity: 1;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .mis-tickets-page .table-responsive,
    .todos-tickets-page .table-responsive {
        font-size: 0.8rem;
    }
    
    .avatar-sm {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    
    .card-body h4 {
        font-size: 1.5rem;
    }
    
    .mis-tickets-page .form-select,
    .todos-tickets-page .form-select {
        min-width: 60px;
    }
}

/* =============================================
   ESTILOS PARA ÁREA ACTUAL EN CABECERA
   ============================================= */

.area-actual-link {
    background: linear-gradient(135deg, var(--bexen-cardio-purple), #A876B5) !important;
    color: white !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    margin: 0 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(143, 83, 161, 0.3) !important;
    position: relative !important;
    z-index: 1000 !important;
}

.area-actual-link:hover,
.area-actual-link:focus,
.area-actual-link.show {
    background: linear-gradient(135deg, #7A4A8A, var(--bexen-cardio-purple)) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(143, 83, 161, 0.4) !important;
}

/* Asegurar que el dropdown funcione */
.area-actual-link.dropdown-toggle::after {
    display: inline-block !important;
    margin-left: 0.255em !important;
    vertical-align: 0.255em !important;
    content: "" !important;
    border-top: 0.3em solid !important;
    border-right: 0.3em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.3em solid transparent !important;
}

.area-actual-text {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.area-actual-link i {
    margin-right: 6px !important;
    font-size: 0.9rem !important;
}

/* Estilos para usuarios en línea en cabecera */
.usuarios-online-link {
    background: linear-gradient(135deg, var(--bexen-base-cyan), #00AEEF) !important;
    color: white !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    margin: 0 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 174, 239, 0.3) !important;
    position: relative !important;
    z-index: 1000 !important;
}

.usuarios-online-link:hover {
    background: linear-gradient(135deg, #0099CC, var(--bexen-base-cyan)) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 174, 239, 0.4) !important;
}

.usuarios-online-link i {
    margin-right: 6px !important;
    font-size: 0.9rem !important;
}

#usuarios-online-count {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Estilos para el dropdown de áreas */
#dropdown-areas {
    min-width: 250px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    border: 1px solid rgba(143, 83, 161, 0.2) !important;
    box-shadow: 0 4px 12px rgba(143, 83, 161, 0.15) !important;
    z-index: 1050 !important;
    position: absolute !important;
}

#dropdown-areas .dropdown-header {
    background: linear-gradient(135deg, var(--bexen-cardio-purple), #A876B5) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

#dropdown-areas .dropdown-item {
    padding: 10px 16px !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
}

#dropdown-areas .dropdown-item:hover {
    background-color: rgba(143, 83, 161, 0.1) !important;
    border-left-color: var(--bexen-cardio-purple) !important;
}

#dropdown-areas .dropdown-item.active {
    background-color: rgba(143, 83, 161, 0.15) !important;
    color: var(--bexen-cardio-purple) !important;
    font-weight: 600 !important;
    border-left-color: var(--bexen-cardio-purple) !important;
}

#dropdown-areas .dropdown-item i {
    width: 16px !important;
    text-align: center !important;
}

#dropdown-areas .dropdown-divider {
    margin: 8px 0 !important;
    border-color: rgba(143, 83, 161, 0.2) !important;
}

/* =============================================
   ESTILOS PARA COLORES DE TICKETS EN INDEX
   ============================================= */

/* Ticket en gestión - Morado cardio claro */
.ticket-en-gestion {
    background-color: rgba(143, 83, 161, 0.18) !important;
    border-left: 6px solid var(--bexen-cardio-purple) !important;
    box-shadow: inset 0 0 0 1px rgba(143, 83, 161, 0.1) !important;
}

.ticket-en-gestion:hover {
    background-color: rgba(143, 83, 161, 0.25) !important;
    box-shadow: inset 0 0 0 1px rgba(143, 83, 161, 0.15) !important;
}

/* Ticket con SLA vencido - ROJO (prioridad máxima, requiere atención urgente) */
.ticket-sla-vencido {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-left: 6px solid #dc3545 !important;
    font-weight: 600 !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.15) !important;
}

.ticket-sla-vencido:hover {
    background-color: rgba(220, 53, 69, 0.28) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.2) !important;
}

/* Ticket con SLA vencido y leído - ROJO claro (ya revisado pero sigue vencido) */
.ticket-sla-vencido-leido {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-left: 6px solid #e57373 !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.1) !important;
}

.ticket-sla-vencido-leido:hover {
    background-color: rgba(220, 53, 69, 0.22) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.15) !important;
}

/* Ticket con SLA vencido EN GESTIÓN - ROJO claro (está siendo atendido pero vencido) */
.ticket-sla-vencido-gestion {
    background-color: rgba(220, 53, 69, 0.18) !important;
    border-left: 6px solid #ef4444 !important;
    font-weight: 500 !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.12) !important;
}

.ticket-sla-vencido-gestion:hover {
    background-color: rgba(220, 53, 69, 0.25) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.18) !important;
}

/* Ticket con SLA vencido EN GESTIÓN y leído - ROJO muy claro */
.ticket-sla-vencido-gestion-leido {
    background-color: rgba(220, 53, 69, 0.12) !important;
    border-left: 6px solid #f87171 !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.08) !important;
}

.ticket-sla-vencido-gestion-leido:hover {
    background-color: rgba(220, 53, 69, 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.12) !important;
}

/* Ticket cerrado - Celeste bexen claro */
.ticket-cerrado {
    background-color: rgba(0, 174, 239, 0.15) !important;
    border-left: 6px solid var(--bexen-base-cyan) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, 0.1) !important;
}

.ticket-cerrado:hover {
    background-color: rgba(0, 174, 239, 0.22) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, 0.15) !important;
}

/* Estilos para la tabla de tickets */
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.table-hover tbody tr.ticket-en-gestion:hover {
    background-color: rgba(143, 83, 161, 0.15) !important;
}

.table-hover tbody tr.ticket-sla-vencido:hover {
    background-color: rgba(220, 53, 69, 0.2) !important;
}

.table-hover tbody tr.ticket-sla-vencido-leido:hover {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

.table-hover tbody tr.ticket-sla-vencido-gestion:hover {
    background-color: rgba(220, 53, 69, 0.18) !important;
}

.table-hover tbody tr.ticket-sla-vencido-gestion-leido:hover {
    background-color: rgba(220, 53, 69, 0.12) !important;
}

.table-hover tbody tr.ticket-cerrado:hover {
    background-color: rgba(0, 174, 239, 0.15) !important;
}

/* =============================================
   ALERTAS PERSISTENTES
   ============================================= */

/* Asegurar que las alertas no se auto-oculten */
.alert-dismissible {
    animation: none !important;
    transition: none !important;
}

.alert-dismissible.fade {
    opacity: 1 !important;
}

.alert-dismissible.show {
    opacity: 1 !important;
}

/* Prevenir auto-ocultamiento de alertas Bootstrap */
.alert[data-bs-dismiss="alert"] {
    animation: none !important;
    transition: none !important;
}

/* Prevenir auto-ocultamiento de TODAS las alertas */
.alert {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
}

.alert.fade {
    opacity: 1 !important;
}

.alert.show {
    opacity: 1 !important;
}

/* =============================================
   ESTILOS ESPECÍFICOS - PÁGINA VER TICKET
   ============================================= */

/* Estilos modernos para comentarios y actividades */
body:not(.tema-nocturno) .ver-ticket-page .comentario-item {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border: 1px solid #e3e6f0 !important;
    border-left: 4px solid var(--bexen-base-blue) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    min-height: auto !important;
}


.ver-ticket-page .comentario-header {
    background: linear-gradient(135deg, var(--bexen-base-blue) 0%, #4a90e2 100%) !important;
    color: white !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    margin-left: -11px !important;
    margin-right: -1px !important;
    margin-top: -1px !important;
    border-radius: 0 12px 0 0 !important;
    position: relative !important;
}

.ver-ticket-page .comentario-header::before {
    content: '' !important;
    position: absolute !important;
    left: -11px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 11px !important;
    background: var(--bexen-base-blue) !important;
}

.ver-ticket-page .comentario-usuario {
    color: white !important;
    font-weight: 600 !important;
    font-size: 0.95em !important;
}

.ver-ticket-page .comentario-fecha {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.85em !important;
}

body:not(.tema-nocturno) .ver-ticket-page .comentario-contenido {
    padding: 16px !important;
    background: white !important;
    line-height: 1.6 !important;
    color: #2c3e50 !important;
    min-height: auto !important;
}

body:not(.tema-nocturno) .ver-ticket-page .actividad-item {
    border-left: 3px solid var(--bexen-cyan) !important;
    background: white !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    font-size: 0.9em !important;
    color: #6c757d !important;
    position: relative !important;
    margin-left: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.ver-ticket-page .actividad-item::before {
    content: '•' !important;
    position: absolute !important;
    left: -15px !important;
    top: 12px !important;
    color: var(--bexen-cyan) !important;
    font-size: 1.2em !important;
}

body:not(.tema-nocturno) .ver-ticket-page .comentario-contenido {
    line-height: 1.6;
    color: #333;
}

.ver-ticket-page .actividad-contenido {
    line-height: 1.4;
    font-style: italic;
}

/* Efecto llamativo para nuevas respuestas */
.ver-ticket-page .nueva-respuesta {
    animation: nuevaRespuestaEfecto 3s ease-in-out !important;
    border-left: 4px solid var(--bexen-cardio-purple) !important;
    box-shadow: 0 0 20px rgba(139, 69, 19, 0.3) !important;
}

/* =============================================
   ESTILOS DE MODO NOCTURNO PARA RESPUESTAS
   ============================================= */

/* Comentarios en modo nocturno - DEBE estar después de los estilos diurnos */
body.tema-nocturno .ver-ticket-page .comentario-item {
    background: linear-gradient(135deg, #1e293b 0%, #1f2937 100%) !important;
    background-color: #1e293b !important;
    border: 1px solid #374151 !important;
    border-left: 4px solid #38bdf8 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    min-height: auto !important;
}


body.tema-nocturno .ver-ticket-page .comentario-header {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: white !important;
}

body.tema-nocturno .ver-ticket-page .comentario-header::before {
    background: #0ea5e9 !important;
}

/* Comentarios en modo nocturno - Mayor especificidad */
body.tema-nocturno .ver-ticket-page .comentario-contenido,
body.tema-nocturno .ver-ticket-page .comentario-item .comentario-contenido {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    padding: 16px !important;
    line-height: 1.6 !important;
    min-height: auto !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido *,
body.tema-nocturno .ver-ticket-page .comentario-contenido p,
body.tema-nocturno .ver-ticket-page .comentario-contenido div,
body.tema-nocturno .ver-ticket-page .comentario-contenido span,
body.tema-nocturno .ver-ticket-page .comentario-contenido strong,
body.tema-nocturno .ver-ticket-page .comentario-contenido em {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido a {
    color: #93c5fd !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido a:hover {
    color: #60a5fa !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido h1,
body.tema-nocturno .ver-ticket-page .comentario-contenido h2,
body.tema-nocturno .ver-ticket-page .comentario-contenido h3,
body.tema-nocturno .ver-ticket-page .comentario-contenido h4,
body.tema-nocturno .ver-ticket-page .comentario-contenido h5,
body.tema-nocturno .ver-ticket-page .comentario-contenido h6 {
    color: #f1f5f9 !important;
}

/* Actividades en modo nocturno - Mayor especificidad */
body.tema-nocturno .ver-ticket-page .actividad-item,
body.tema-nocturno .ver-ticket-page .actividad-item.mb-2 {
    background: #1e293b !important;
    border-left: 3px solid #38bdf8 !important;
    color: #cbd5e1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    font-size: 0.9em !important;
    position: relative !important;
    margin-left: 20px !important;
}

body.tema-nocturno .ver-ticket-page .actividad-item::before {
    color: #38bdf8 !important;
}

body.tema-nocturno .ver-ticket-page .actividad-contenido,
body.tema-nocturno .ver-ticket-page .actividad-item .actividad-contenido {
    color: #cbd5e1 !important;
    line-height: 1.4 !important;
    font-style: italic !important;
}

body.tema-nocturno .ver-ticket-page .actividad-item .text-muted,
body.tema-nocturno .ver-ticket-page .actividad-item small.text-muted {
    color: #94a3b8 !important;
}

body.tema-nocturno .ver-ticket-page .actividad-item * {
    color: #cbd5e1 !important;
}

@keyframes nuevaRespuestaEfecto {
    0% {
        transform: scale(1.02) !important;
        box-shadow: 0 0 25px rgba(139, 69, 19, 0.5) !important;
        border-left: 4px solid var(--bexen-cardio-purple) !important;
    }
    50% {
        transform: scale(1.01) !important;
        box-shadow: 0 0 15px rgba(139, 69, 19, 0.4) !important;
    }
    100% {
        transform: scale(1) !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        border-left: 4px solid var(--bexen-base-blue) !important;
    }
}

/* Popup de información del ticket */
/* Estilos base del popup - FONDO BLANCO POR DEFECTO */
.ver-ticket-page .ticket-info-popup,
.ver-ticket-page #ticketInfoPopup {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 280px;
    max-height: calc(100vh - 100px);
    border-radius: 12px;
    transition: all 0.3s ease;
    z-index: 1020;
    overflow: visible;
    background: white;
    background-color: white;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.1);
}

.ver-ticket-page .ticket-info-popup.collapsed,
.ver-ticket-page #ticketInfoPopup.collapsed {
    right: -260px !important;
}

.ver-ticket-page .ticket-info-popup .popup-header {
    background: linear-gradient(135deg, var(--bexen-cardio-purple), #A876B5);
    color: white;
    padding: 12px 16px 12px 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px 12px 0 0;
    position: relative;
}

.ver-ticket-page .ticket-info-popup .popup-header h6 {
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
}

.ver-ticket-page .ticket-info-popup .popup-toggle {
    background: linear-gradient(135deg, var(--bexen-cardio-purple), #A876B5);
    border: 2px solid white;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1030;
}

.ver-ticket-page .ticket-info-popup .popup-toggle:hover {
    background: linear-gradient(135deg, #7A4A8A, var(--bexen-cardio-purple));
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Estilos base del popup-content - FONDO BLANCO POR DEFECTO */
.ver-ticket-page .ticket-info-popup .popup-content,
.ver-ticket-page #ticketInfoPopup .popup-content {
    padding: 16px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: white;
    background-color: white;
    color: #333;
}

.ver-ticket-page .ticket-info-popup .popup-content::-webkit-scrollbar {
    width: 4px;
}

.ver-ticket-page .ticket-info-popup .popup-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.ver-ticket-page .ticket-info-popup .popup-content::-webkit-scrollbar-thumb {
    background: var(--bexen-cardio-purple);
    border-radius: 2px;
}

.ver-ticket-page .ticket-info-popup .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 4px 0;
}

.ver-ticket-page .ticket-info-popup .info-item:last-child {
    margin-bottom: 0;
}

.ver-ticket-page .ticket-info-popup .info-label {
    font-weight: 600;
    color: #666;
    font-size: 0.85rem;
    min-width: 70px;
}

.ver-ticket-page .ticket-info-popup .info-value {
    font-size: 0.85rem;
    text-align: right;
    flex: 1;
    white-space: nowrap;
}

.ver-ticket-page .ticket-info-popup .info-section {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.ver-ticket-page .ticket-info-popup .info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.ver-ticket-page .ticket-info-popup .info-section-title {
    font-weight: 600;
    color: var(--bexen-cardio-purple);
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.ver-ticket-page .ticket-info-popup .info-section-title i {
    margin-right: 6px;
    font-size: 0.8rem;
}

.ver-ticket-page .subscription-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.ver-ticket-page .subscription-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 220px;
    overflow-y: auto;
}

.ver-ticket-page .subscription-item {
    border: 1px solid rgba(2, 63, 136, 0.15);
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    background-color: rgba(2, 63, 136, 0.04);
}

.ver-ticket-page .subscription-name {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--dark-color);
    gap: 0.35rem;
}

/* Asegurar que en modo diurno el color sea oscuro */
body:not(.tema-nocturno) .ver-ticket-page .subscription-name,
body.tema-diurno .ver-ticket-page .subscription-name {
    color: var(--dark-color) !important;
}

.ver-ticket-page .subscription-meta {
    font-size: 0.75rem;
    color: #6c757d;
}

.subscription-search-results {
    border: 1px solid rgba(2, 63, 136, 0.15);
    border-radius: 8px;
    padding: 0.75rem;
    max-height: 320px;
    overflow-y: auto;
    background-color: rgba(2, 63, 136, 0.03);
}

.subscription-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    background-color: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.subscription-search-item + .subscription-search-item {
    margin-top: 0.5rem;
}

.subscription-search-item:hover {
    border-color: rgba(2, 63, 136, 0.35);
    box-shadow: 0 4px 12px rgba(2, 63, 136, 0.12);
}

.subscription-search-item button {
    white-space: nowrap;
}

.subscription-search-name {
    font-weight: 600;
    color: var(--dark-color);
}

.subscription-search-meta {
    font-size: 0.75rem;
    color: #6c757d;
}

.ver-ticket-page .sla-timer {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.1rem;
}

.ver-ticket-page .comentario-item {
    border-left: 3px solid var(--bexen-base-blue);
    padding-left: 15px;
    margin-bottom: 20px;
}

.ver-ticket-page .actividad-item {
    border-left: 3px solid var(--bexen-cardio-purple);
    padding-left: 15px;
    margin-bottom: 15px;
}

.ver-ticket-page .ticket-content {
    margin-right: 20px;
}

.ver-ticket-page .main-content {
    padding: 20px;
}

/* =============================================
   IMÁGENES RESPONSIVAS - TICKET
   ============================================= */

/* Imágenes en la descripción del ticket */
.ver-ticket-page .ticket-description img,
.ver-ticket-page .ticket-description figure img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    margin: 12px 0 !important;
}

/* Imágenes en comentarios y respuestas */
.ver-ticket-page .comentario-contenido img,
.ver-ticket-page .comentario-contenido figure img,
.ver-ticket-page .actividad-item img,
.ver-ticket-page .actividad-item figure img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    margin: 8px 0 !important;
}

/* Contenedores de figuras con imágenes */
.ver-ticket-page .ticket-description figure,
.ver-ticket-page .comentario-contenido figure,
.ver-ticket-page .actividad-item figure {
    max-width: 100% !important;
    margin: 12px 0 !important;
}

.ver-ticket-page .ticket-description figure img,
.ver-ticket-page .comentario-contenido figure img,
.ver-ticket-page .actividad-item figure img {
    max-width: 100% !important;
    width: 100% !important;
}

/* Estilos para párrafos con imágenes */
.ver-ticket-page .ticket-description p,
.ver-ticket-page .comentario-contenido p,
.ver-ticket-page .actividad-item p {
    overflow: hidden !important;
    word-wrap: break-word !important;
}

/* Asegurar que cualquier contenido ancho se adapte */
.ver-ticket-page .ticket-description,
body:not(.tema-nocturno) .ver-ticket-page .comentario-contenido {
    overflow-x: auto !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido {
    overflow-x: auto !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* =============================================
   PÁGINA INDEX - PANEL PRINCIPAL
   ============================================= */

.index-page {
    min-height: 100vh;
}

/* Tutorial interactivo sidebar */
.tutorial-sidebar {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
    height: fit-content;
}

.tutorial-sidebar .card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e5ba8 100%) !important;
    border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}

.tutorial-sidebar .card-header h5 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.tutorial-sidebar .badge {
    font-size: 0.7rem;
    padding: 4px 8px;
    font-weight: 600;
}

.tutorial-page {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tutorial-page h6 {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.tutorial-page .bg-light {
    background-color: #f8f9fa !important;
    border-left: 3px solid var(--primary-color);
}

.tutorial-page ol,
.tutorial-page ul {
    padding-left: 1.2rem;
}

.tutorial-page li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.tutorial-sidebar .btn {
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tutorial-sidebar .btn:disabled {
    cursor: not-allowed;
}

.tutorial-sidebar .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e5ba8 100%);
    border: none;
}

.tutorial-sidebar .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 63, 136, 0.3);
}

.tutorial-sidebar .btn-outline-secondary {
    border-color: #dee2e6;
    color: #6c757d;
}

.tutorial-sidebar .btn-outline-secondary:hover:not(:disabled) {
    background-color: #e9ecef;
    color: #495057;
}

.tutorial-sidebar .btn-light {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #333;
}

.tutorial-sidebar .btn-light:hover {
    background-color: #e9ecef;
    color: #333;
}

/* Desglose de prioridades en widget de abiertos */
.index-page .badge-prioridad-urgente,
.index-page .badge-prioridad-alta,
.index-page .badge-prioridad-media,
.index-page .badge-prioridad-baja {
    font-weight: 500;
    padding: 6px 10px;
    display: inline-block;
    min-width: 50px;
    text-align: center;
}

/* Responsive para el layout de index */
@media (max-width: 991.98px) {
    .index-page .row > .col-lg-9,
    .index-page .row > .col-lg-3 {
        width: 100%;
        flex: 0 0 100%;
    }
}

/* Hacer el widget de usuarios clickeable */
.summary-card {
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.summary-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* =============================================
   ESTILOS PARA PANEL DE INSERCIÓN LATERAL - NUEVO TICKET
   ============================================= */

/* Contenedor del formulario con pestaña lateral */
.form-container-wrapper {
    position: relative;
}

/* Pestaña lateral para expandir opciones */
.insert-tab {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 80px;
    background: #28a745;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1060 !important; /* Por encima del modal de respuesta (1055) pero por debajo del modal de búsqueda (1070) */
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
}

.insert-tab:hover {
    background: #218838;
    transform: translateY(-50%) translateX(-5px);
}

.insert-tab.active {
    background: #007bff;
}

.insert-tab i {
    color: white;
    font-size: 1.2em;
    transition: all 0.3s ease;
}

/* Panel de opciones de inserción */
.insert-panel {
    position: absolute;
    left: -300px;
    top: 0;
    width: 300px;
    height: 100%;
    background: white;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    z-index: 1060 !important; /* Por encima del modal de respuesta (1055) pero por debajo del modal de búsqueda (1070) */
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    opacity: 0;
    visibility: hidden;
}

.insert-panel.show {
    transform: translateX(300px);
    opacity: 1;
    visibility: visible;
}

.insert-panel-header {
    padding: 15px 20px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8px 0 0 0;
}

.insert-panel-header h6 {
    color: #495057;
    font-weight: 600;
    margin: 0;
}


.insert-panel-body {
    padding: 20px;
    flex: 1;
    overflow-y: visible;
    overflow-x: hidden;
}

.insert-panel-body .btn {
    font-size: 0.85em;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin-bottom: 6px;
    text-align: left;
    width: 100%;
}

.insert-panel-body .btn:hover {
    transform: translateX(3px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.insert-panel-body .btn i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/* Panel dentro de modal - sin scroll, usar todo el espacio */
.modal-body .form-container-wrapper {
    position: relative;
    min-height: 500px;
}

.modal-body .insert-tab {
    z-index: 1060 !important;
}

.modal-body .insert-panel {
    height: 100%;
    max-height: none;
    top: 0;
    bottom: 0;
    z-index: 1060 !important;
}

.modal-body .insert-panel-body {
    overflow: visible !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .insert-tab {
        left: -35px;
        width: 35px;
        height: 60px;
    }
    
    .insert-panel {
        left: -250px;
        width: 250px;
    }
    
    .insert-panel-body .btn {
        font-size: 0.8em;
        padding: 6px 10px;
    }
}

/* Estilos para los botones insertados en el editor */
.btn-insertado {
    display: inline-block;
    margin: 2px 4px;
    font-size: 0.8em;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-insertado:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Botones insertados NO editables (usando span) */
span[contenteditable="false"] {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: auto !important;
}

/* Prevenir edición accidental en botones insertados */
span[contenteditable="false"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

/* Asegurar que los span con clase btn se vean como botones Bootstrap */
span.btn {
    display: inline-block !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    text-align: center !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    background-color: transparent !important;
    border: 1px solid #dee2e6 !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.375rem !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    margin: 0.125rem !important;
}

span.btn:hover {
    color: #0d6efd !important;
    background-color: transparent !important;
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

span.btn-outline-primary {
    color: #0d6efd !important;
    border-color: #0d6efd !important;
}

span.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

span.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.25rem !important;
}

/* ===========================================
   Z-INDEX PARA CAPAS DE PROFUNDIDAD
   ===========================================
   
   Estructura de capas:
   
   nuevo_ticket.php:
   1. Fondo: Formulario (z-index: auto/1)
   2. Medio: Sidebar insert-panel (z-index: 1060)
   3. Frente: Modal de búsqueda (z-index: 1070)
   
   ver_ticket.php:
   1. Fondo: Página ver_ticket.php (z-index: auto/1)
   2. Capa 2: Modal de respuesta (z-index: 1055 - Bootstrap default)
   3. Capa 3: Sidebar insert-panel (z-index: 1060)
   4. Capa 4: Modal de búsqueda (z-index: 1070)
   
   Bootstrap defaults:
   - .modal-backdrop: z-index: 1050
   - .modal: z-index: 1055
   =========================================== */

/* Sidebar de inserción - debe estar por encima del modal de respuesta pero por debajo del modal de búsqueda */
.insert-tab {
    z-index: 1060 !important;
}

.insert-panel {
    z-index: 1060 !important;
}

/* Sidebar dentro de modal (ver_ticket.php) - debe estar por encima del modal de respuesta */
.modal-body .insert-tab {
    z-index: 1060 !important;
}

.modal-body .insert-panel {
    z-index: 1060 !important;
}

/* Modal de búsqueda - debe estar en la capa más alta */
#modalBuscador {
    z-index: 1070 !important; /* Por encima del sidebar (1060) y modals Bootstrap (1055) */
}

#modalBuscador .modal-dialog {
    max-width: 800px;
    z-index: 1070 !important;
}

#modalBuscador .modal-content {
    z-index: 1070 !important;
}

/* REGLA GENERAL: Por defecto, todos los backdrops deben estar en 1050 */
body.modal-open .modal-backdrop {
    z-index: 1050 !important;
}

/* Backdrop específico del modal de búsqueda cuando hay otro modal abierto */
/* Debe estar entre el modal de respuesta (1055) y el modal de búsqueda (1070) */
body.modal-open .modal-backdrop-busqueda,
body.modal-open .modal-backdrop[data-modal-busqueda="true"],
body.modal-open #modalBuscador.show ~ .modal-backdrop.modal-backdrop-busqueda,
body.modal-open #modalBuscador.show ~ .modal-backdrop[data-modal-busqueda="true"] {
    z-index: 1065 !important;
}

/* Backdrop del modal de búsqueda cuando NO hay otro modal abierto */
/* Debe estar por encima del sidebar (1060) pero por debajo del modal (1070) */
body.modal-open #modalBuscador.show ~ .modal-backdrop:last-of-type:not(.modal-backdrop-busqueda):not([data-modal-busqueda="true"]),
body.modal-open #modalBuscador.show + .modal-backdrop:not(.modal-backdrop-busqueda):not([data-modal-busqueda="true"]),
body:has(#modalBuscador.show) .modal-backdrop:last-of-type:not(.modal-backdrop-busqueda):not([data-modal-busqueda="true"]) {
    z-index: 1069 !important;
}

/* Alternativa para navegadores que no soportan :has() */
body.modal-open #modalBuscador.show {
    z-index: 1070 !important;
}

/* REGLA GENERAL: Todos los modales deben estar por encima del backdrop */
.modal.show {
    z-index: 1055 !important;
}

.modal.fade.show {
    z-index: 1055 !important;
}

/* REGLA GENERAL: Todos los backdrops deben estar por debajo de los modales */
.modal-backdrop {
    z-index: 1050 !important;
}

.modal-backdrop.show {
    z-index: 1050 !important;
}

/* EXCEPCIÓN CRÍTICA: Backdrop del modal de búsqueda cuando hay otro modal abierto */
/* Esta regla DEBE tener mayor especificidad que cualquier otra regla de backdrop */
/* DEBE IR DESPUÉS DE LAS REGLAS GENERALES para tener prioridad */
body.modal-open .modal-backdrop-busqueda,
body.modal-open .modal-backdrop[data-modal-busqueda="true"],
body.modal-open #modalBuscador.show ~ .modal-backdrop.modal-backdrop-busqueda,
body.modal-open #modalBuscador.show ~ .modal-backdrop[data-modal-busqueda="true"],
body.modal-open #modalBuscador.show + .modal-backdrop.modal-backdrop-busqueda,
body.modal-open #modalBuscador.show + .modal-backdrop[data-modal-busqueda="true"] {
    z-index: 1065 !important;
}

/* Modal de respuesta (ver_ticket.php) - debe estar en z-index 1055 (Bootstrap default) */
#modalComentario {
    z-index: 1055 !important;
}

#modalComentario.show {
    z-index: 1055 !important;
}

/* Asegurar que el backdrop del modal de respuesta esté en z-index 1050 (Bootstrap default) */
#modalComentario + .modal-backdrop,
body.modal-open #modalComentario.show ~ .modal-backdrop:first-of-type {
    z-index: 1050 !important;
}

/* Modales específicos de ver_ticket.php - asegurar z-index correcto */
#modalCambiarPrioridad,
#modalConfirmarResponder,
#modalEnviarArea,
#modalCerrarTicket,
#modalLiberarGestion,
#modalConfirmarIniciarGestion,
#modalConfirmacionEnvio,
#modalSuscribirUsuario {
    z-index: 1055 !important;
}

#modalCambiarPrioridad.show,
#modalConfirmarResponder.show,
#modalEnviarArea.show,
#modalCerrarTicket.show,
#modalLiberarGestion.show,
#modalConfirmarIniciarGestion.show,
#modalConfirmacionEnvio.show,
#modalSuscribirUsuario.show {
    z-index: 1055 !important;
}

/* Modal de proveedor (ver_ticket.php) - debe estar por encima de todo */
#modalDatosProveedor {
    z-index: 1080 !important;
}

#modalDatosProveedor .modal-dialog {
    z-index: 1080 !important;
    position: relative;
}

#modalDatosProveedor .modal-content {
    z-index: 1080 !important;
    position: relative;
}

/* Asegurar que cuando el modal de proveedor está abierto, su backdrop esté por debajo del modal pero por encima de otros elementos */
body.modal-open #modalDatosProveedor.show ~ .modal-backdrop:last-of-type,
body:has(#modalDatosProveedor.show) .modal-backdrop:last-of-type {
    z-index: 1079 !important;
}

/* Backdrop específico del modal de proveedor */
.modal-backdrop[data-modal="modalDatosProveedor"] {
    z-index: 1079 !important;
}

/* Asegurar que el modal de proveedor esté por encima incluso cuando hay otros modales abiertos */
body.modal-open #modalDatosProveedor.show {
    z-index: 1080 !important;
    position: fixed !important;
}

/* Modal de datos de albarán de compra - Z-index máximo para estar siempre por encima */
#modalDatosAlbaranCompra {
    z-index: 1100 !important;
}

#modalDatosAlbaranCompra .modal-dialog {
    z-index: 1100 !important;
    position: relative;
}

#modalDatosAlbaranCompra .modal-content {
    z-index: 1100 !important;
    position: relative;
}

/* Asegurar que cuando el modal de albarán de compra está abierto, su backdrop esté por debajo del modal */
body.modal-open #modalDatosAlbaranCompra.show ~ .modal-backdrop:last-of-type,
body:has(#modalDatosAlbaranCompra.show) .modal-backdrop:last-of-type {
    z-index: 1099 !important;
}

body.modal-open #modalDatosAlbaranCompra.show {
    z-index: 1100 !important;
    position: fixed !important;
}

/* Modal de datos de cliente - Z-index máximo para estar siempre por encima */
#modalDatosCliente {
    z-index: 1100 !important;
}

#modalDatosCliente .modal-dialog {
    z-index: 1100 !important;
    position: relative;
}

#modalDatosCliente .modal-content {
    z-index: 1100 !important;
    position: relative;
}

/* Asegurar que cuando el modal de cliente está abierto, su backdrop esté por debajo del modal */
body.modal-open #modalDatosCliente.show ~ .modal-backdrop:last-of-type,
body:has(#modalDatosCliente.show) .modal-backdrop:last-of-type {
    z-index: 1099 !important;
}

body.modal-open #modalDatosCliente.show {
    z-index: 1100 !important;
    position: fixed !important;
}

/* Modal de datos de albarán de devolución - Z-index máximo para estar siempre por encima */
#modalDatosAlbaranDevolucion {
    z-index: 1100 !important;
}

#modalDatosAlbaranDevolucion .modal-dialog {
    z-index: 1100 !important;
    position: relative;
}

#modalDatosAlbaranDevolucion .modal-content {
    z-index: 1100 !important;
    position: relative;
}

/* Asegurar que cuando el modal de albarán de devolución está abierto, su backdrop esté por debajo del modal */
body.modal-open #modalDatosAlbaranDevolucion.show ~ .modal-backdrop:last-of-type,
body:has(#modalDatosAlbaranDevolucion.show) .modal-backdrop:last-of-type {
    z-index: 1099 !important;
}

body.modal-open #modalDatosAlbaranDevolucion.show {
    z-index: 1100 !important;
    position: fixed !important;
}

/* Modal de datos de albarán de venta - Z-index máximo para estar siempre por encima */
#modalDatosAlbaranVenta {
    z-index: 1100 !important;
}

#modalDatosAlbaranVenta .modal-dialog {
    z-index: 1100 !important;
    position: relative;
}

#modalDatosAlbaranVenta .modal-content {
    z-index: 1100 !important;
    position: relative;
}

/* Asegurar que cuando el modal de albarán de venta está abierto, su backdrop esté por debajo del modal */
body.modal-open #modalDatosAlbaranVenta.show ~ .modal-backdrop:last-of-type,
body:has(#modalDatosAlbaranVenta.show) .modal-backdrop:last-of-type {
    z-index: 1099 !important;
}

body.modal-open #modalDatosAlbaranVenta.show {
    z-index: 1100 !important;
    position: fixed !important;
}

/* Modal de datos de orden de compra - Z-index máximo para estar siempre por encima */
#modalDatosOrdenCompra {
    z-index: 1100 !important;
}

#modalDatosOrdenCompra .modal-dialog {
    z-index: 1100 !important;
    position: relative;
}

#modalDatosOrdenCompra .modal-content {
    z-index: 1100 !important;
    position: relative;
}

/* Asegurar que cuando el modal de orden de compra está abierto, su backdrop esté por debajo del modal */
body.modal-open #modalDatosOrdenCompra.show ~ .modal-backdrop:last-of-type,
body:has(#modalDatosOrdenCompra.show) .modal-backdrop:last-of-type {
    z-index: 1099 !important;
}

body.modal-open #modalDatosOrdenCompra.show {
    z-index: 1100 !important;
    position: fixed !important;
}

/* ========================================
   TINYMCE DIALOGS - Z-INDEX Y INTERACTIVIDAD
   ======================================== */

/* Diálogos de TinyMCE - deben estar por encima de todos los modales de Bootstrap */
.mce-window,
.tox-dialog,
.tox-dialog__body {
    z-index: 1200 !important;
}

/* Asegurar que los campos de entrada en diálogos de TinyMCE sean interactuables */
.mce-window input[type="text"],
.mce-window input[type="url"],
.mce-window textarea,
.tox-dialog input[type="text"],
.tox-dialog input[type="url"],
.tox-dialog textarea {
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
}

/* Asegurar que los diálogos de TinyMCE estén por encima incluso cuando hay modales abiertos */
body.modal-open .mce-window,
body.modal-open .tox-dialog {
    z-index: 1200 !important;
    position: fixed !important;
}

/* ========================================
   ESTILOS PERSONALIZADOS PARA HOVER SIN MOVIMIENTO
   ======================================== */

/* Contenedor de lista personalizado - sin scroll horizontal */
.custom-hover-list {
    overflow-x: hidden !important;
    overflow-y: auto;
    max-height: 400px;
    /* Asegurar que el contenedor no se mueva */
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Items de lista personalizados - hover solo con color */
.custom-hover-item {
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
    border: 1px solid #dee2e6;
    margin-bottom: 2px;
    border-radius: 6px;
    padding: 12px 15px;
    background-color: #ffffff;
    color: #495057;
    /* Asegurar que no haya desplazamiento */
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    box-sizing: border-box;
}

.custom-hover-item:hover {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
    border-color: #1976d2 !important;
    /* ABSOLUTAMENTE sin transform, sin scale, sin translate, sin margin */
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 15px !important;
}

.custom-hover-item:active {
    background-color: #bbdefb !important;
    color: #0d47a1 !important;
}

/* Asegurar que no haya scroll horizontal en el modal */
#modalBuscador .modal-body {
    overflow-x: hidden;
    padding: 15px 20px;
}

/* Sobrescribir cualquier estilo de Bootstrap que pueda causar movimiento */
.custom-hover-list .custom-hover-item {
    transform: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.custom-hover-list .custom-hover-item:hover {
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 15px !important;
}

/* Mejorar la apariencia del campo de búsqueda */
#criterioBusqueda {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    padding: 10px 15px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

#criterioBusqueda:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
}

#resultadosBusqueda {
    max-height: 400px;
    overflow-y: auto;
}

#resultadosBusqueda .list-group-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

#resultadosBusqueda .list-group-item:hover {
    background-color: #f8f9fa;
    transform: translateX(5px);
}

.subscription-actions .btn-outline-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
}

.ver-ticket-page .subscription-list::-webkit-scrollbar {
    width: 4px;
}

.ver-ticket-page .subscription-list::-webkit-scrollbar-track {
    background: rgba(2, 63, 136, 0.08);
}

/* =============================================
   ESTILOS DE MODO NOCTURNO PARA RESPUESTAS - FINAL
   (Al final del archivo para máxima prioridad)
   ============================================= */

/* Comentarios en modo nocturno - MÁXIMA ESPECIFICIDAD */
body.tema-nocturno .ver-ticket-page .comentario-item,
body.tema-nocturno .ver-ticket-page .comentario-item.mb-3 {
    background: linear-gradient(135deg, #1e293b 0%, #1f2937 100%) !important;
    background-color: #1e293b !important;
    border: 1px solid #374151 !important;
    border-left: 4px solid #38bdf8 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    min-height: auto !important;
    border-radius: 12px !important;
}


body.tema-nocturno .ver-ticket-page .comentario-header {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: white !important;
}

body.tema-nocturno .ver-ticket-page .comentario-header::before {
    background: #0ea5e9 !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido,
body.tema-nocturno .ver-ticket-page .comentario-item .comentario-contenido,
body.tema-nocturno .ver-ticket-page .comentario-item > .comentario-contenido {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    padding: 16px !important;
    line-height: 1.6 !important;
    min-height: auto !important;
}

/* Forzar color en TODOS los elementos hijos - MÁXIMA ESPECIFICIDAD */
body.tema-nocturno .ver-ticket-page .comentario-contenido *,
body.tema-nocturno .ver-ticket-page .comentario-item .comentario-contenido *,
body.tema-nocturno .ver-ticket-page .comentario-item > .comentario-contenido * {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido p,
body.tema-nocturno .ver-ticket-page .comentario-item .comentario-contenido p,
body.tema-nocturno .ver-ticket-page .comentario-item > .comentario-contenido p {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido div,
body.tema-nocturno .ver-ticket-page .comentario-item .comentario-contenido div,
body.tema-nocturno .ver-ticket-page .comentario-item > .comentario-contenido div {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido span,
body.tema-nocturno .ver-ticket-page .comentario-item .comentario-contenido span,
body.tema-nocturno .ver-ticket-page .comentario-item > .comentario-contenido span {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido strong,
body.tema-nocturno .ver-ticket-page .comentario-item .comentario-contenido strong,
body.tema-nocturno .ver-ticket-page .comentario-item > .comentario-contenido strong {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido em,
body.tema-nocturno .ver-ticket-page .comentario-item .comentario-contenido em,
body.tema-nocturno .ver-ticket-page .comentario-item > .comentario-contenido em {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido li,
body.tema-nocturno .ver-ticket-page .comentario-item .comentario-contenido li,
body.tema-nocturno .ver-ticket-page .comentario-item > .comentario-contenido li {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido ul,
body.tema-nocturno .ver-ticket-page .comentario-item .comentario-contenido ul,
body.tema-nocturno .ver-ticket-page .comentario-item > .comentario-contenido ul {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido ol,
body.tema-nocturno .ver-ticket-page .comentario-item .comentario-contenido ol,
body.tema-nocturno .ver-ticket-page .comentario-item > .comentario-contenido ol {
    color: #e2e8f0 !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido a {
    color: #93c5fd !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido a:hover {
    color: #60a5fa !important;
}

body.tema-nocturno .ver-ticket-page .comentario-contenido h1,
body.tema-nocturno .ver-ticket-page .comentario-contenido h2,
body.tema-nocturno .ver-ticket-page .comentario-contenido h3,
body.tema-nocturno .ver-ticket-page .comentario-contenido h4,
body.tema-nocturno .ver-ticket-page .comentario-contenido h5,
body.tema-nocturno .ver-ticket-page .comentario-contenido h6 {
    color: #f1f5f9 !important;
}

/* Actividades en modo nocturno - MÁXIMA ESPECIFICIDAD */
body.tema-nocturno .ver-ticket-page .actividad-item,
body.tema-nocturno .ver-ticket-page .actividad-item.mb-2,
body.tema-nocturno .ver-ticket-page .actividad-item.p-2 {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-left: 3px solid #38bdf8 !important;
    color: #cbd5e1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    font-size: 0.9em !important;
    position: relative !important;
    margin-left: 20px !important;
}

body.tema-nocturno .ver-ticket-page .actividad-item::before {
    color: #38bdf8 !important;
}

body.tema-nocturno .ver-ticket-page .actividad-contenido,
body.tema-nocturno .ver-ticket-page .actividad-item .actividad-contenido,
body.tema-nocturno .ver-ticket-page .actividad-item > .actividad-contenido {
    color: #cbd5e1 !important;
    line-height: 1.4 !important;
    font-style: italic !important;
}

body.tema-nocturno .ver-ticket-page .actividad-item .text-muted,
body.tema-nocturno .ver-ticket-page .actividad-item small.text-muted,
body.tema-nocturno .ver-ticket-page .actividad-item small {
    color: #94a3b8 !important;
}

body.tema-nocturno .ver-ticket-page .actividad-item *,
body.tema-nocturno .ver-ticket-page .actividad-item div,
body.tema-nocturno .ver-ticket-page .actividad-item span {
    color: #cbd5e1 !important;
}

.ver-ticket-page .subscription-list::-webkit-scrollbar-thumb {
    background: rgba(2, 63, 136, 0.35);
    border-radius: 4px;
}

/* =============================================
   TINYMCE EDITOR - MODO NOCTURNO
   ============================================= */

/* Contenedor del editor TinyMCE en modo nocturno */
body.tema-nocturno .tox-tinymce,
body.tema-nocturno .tox-tinymce-aux {
    background-color: #1e293b !important;
    border-color: #374151 !important;
}

/* Toolbar de TinyMCE en modo nocturno */
body.tema-nocturno .tox .tox-toolbar,
body.tema-nocturno .tox .tox-toolbar__overflow,
body.tema-nocturno .tox .tox-toolbar__group {
    background-color: #1e293b !important;
    border-color: #374151 !important;
}

/* Botones de la toolbar en modo nocturno */
body.tema-nocturno .tox .tox-tbtn,
body.tema-nocturno .tox .tox-tbtn:hover,
body.tema-nocturno .tox .tox-tbtn:focus {
    color: #e2e8f0 !important;
    background-color: transparent !important;
}

body.tema-nocturno .tox .tox-tbtn:hover {
    background-color: #374151 !important;
}

body.tema-nocturno .tox .tox-tbtn--enabled {
    background-color: #475569 !important;
    color: #ffffff !important;
}

/* Área de contenido del editor en modo nocturno */
body.tema-nocturno .tox .tox-edit-area__iframe,
body.tema-nocturno .tox .tox-edit-area iframe {
    background-color: #1e293b !important;
}

body.tema-nocturno .tox .tox-edit-area iframe body,
body.tema-nocturno .mce-content-body {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Menús desplegables en modo nocturno */
body.tema-nocturno .tox .tox-menu,
body.tema-nocturno .tox .tox-collection,
body.tema-nocturno .tox .tox-collection__item {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .tox .tox-collection__item:hover,
body.tema-nocturno .tox .tox-collection__item--active {
    background-color: #374151 !important;
    color: #ffffff !important;
}

/* Diálogos y modales en modo nocturno */
body.tema-nocturno .tox .tox-dialog,
body.tema-nocturno .tox .tox-dialog__header,
body.tema-nocturno .tox .tox-dialog__body,
body.tema-nocturno .tox .tox-dialog__footer {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .tox .tox-dialog__title {
    color: #ffffff !important;
}

/* Inputs y campos de formulario en diálogos */
body.tema-nocturno .tox .tox-textfield,
body.tema-nocturno .tox .tox-textarea,
body.tema-nocturno .tox .tox-listboxfield {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

body.tema-nocturno .tox .tox-textfield:focus,
body.tema-nocturno .tox .tox-textarea:focus {
    border-color: #38bdf8 !important;
    background-color: #1e293b !important;
}

/* Botones en diálogos */
body.tema-nocturno .tox .tox-button {
    background-color: #475569 !important;
    color: #ffffff !important;
    border-color: #374151 !important;
}

body.tema-nocturno .tox .tox-button:hover {
    background-color: #64748b !important;
}

body.tema-nocturno .tox .tox-button--secondary {
    background-color: #374151 !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .tox .tox-button--secondary:hover {
    background-color: #475569 !important;
}

/* Statusbar en modo nocturno */
body.tema-nocturno .tox .tox-statusbar {
    background-color: #1e293b !important;
    border-color: #374151 !important;
    color: #94a3b8 !important;
}

body.tema-nocturno .tox .tox-statusbar__path-item,
body.tema-nocturno .tox .tox-statusbar__text-container {
    color: #94a3b8 !important;
}

/* Override para el contenido dentro del iframe del editor */
body.tema-nocturno .tox .tox-edit-area iframe body.mce-content-body {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

body.tema-nocturno .tox .tox-edit-area iframe body.mce-content-body * {
    color: #e2e8f0 !important;
}

body.tema-nocturno .tox .tox-edit-area iframe body.mce-content-body p,
body.tema-nocturno .tox .tox-edit-area iframe body.mce-content-body div,
body.tema-nocturno .tox .tox-edit-area iframe body.mce-content-body span {
    color: #e2e8f0 !important;
}

/* =============================================
   SISTEMA DE GLOBOS DE TEXTO (TIPS Y AI)
   ============================================= */

.globo-texto {
    position: fixed;
    z-index: 10000;
    min-width: 320px;
    max-width: 500px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(2, 63, 136, 0.25),
                0 0 0 1px rgba(0, 174, 239, 0.1),
                0 0 40px rgba(0, 174, 239, 0.15);
    padding: 0;
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 174, 239, 0.2);
    overflow: visible;
}

/* Cola del globo de cómic */
.globo-cola {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    --cola-size: 15px;
    z-index: 1;
    display: none !important; /* Ocultar por defecto */
}

/* Mostrar la cola solo cuando tenga una dirección específica */
.globo-cola.globo-cola-top,
.globo-cola.globo-cola-bottom,
.globo-cola.globo-cola-left,
.globo-cola.globo-cola-right {
    display: block !important;
}

/* Cola apuntando hacia abajo (globo arriba del elemento) */
.globo-cola-bottom {
    bottom: -15px;
    left: var(--cola-offset, 50%);
    transform: translateX(-50%);
    border-width: var(--cola-size) var(--cola-size) 0 var(--cola-size);
    border-color: #ffffff transparent transparent transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.globo-cola-bottom::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(var(--cola-size) + 1px) calc(var(--cola-size) + 1px) 0 calc(var(--cola-size) + 1px);
    border-color: rgba(0, 174, 239, 0.2) transparent transparent transparent;
    z-index: -1;
}

/* Cola apuntando hacia arriba (globo debajo del elemento) */
.globo-cola-top {
    top: -15px;
    left: var(--cola-offset, 50%);
    transform: translateX(-50%);
    border-width: 0 var(--cola-size) var(--cola-size) var(--cola-size);
    border-color: transparent transparent #ffffff transparent;
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));
}

.globo-cola-top::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 calc(var(--cola-size) + 1px) calc(var(--cola-size) + 1px) calc(var(--cola-size) + 1px);
    border-color: transparent transparent rgba(0, 174, 239, 0.2) transparent;
    z-index: -1;
}

/* Cola apuntando hacia la izquierda (globo a la derecha del elemento) */
.globo-cola-left {
    left: -15px;
    top: var(--cola-offset, 50%);
    transform: translateY(-50%);
    border-width: var(--cola-size) var(--cola-size) var(--cola-size) 0;
    border-color: transparent transparent transparent #ffffff;
    filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, 0.1));
}

.globo-cola-left::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--cola-size) calc(var(--cola-size) + 1px) var(--cola-size) 0;
    border-color: transparent rgba(0, 174, 239, 0.2) transparent transparent;
    z-index: -1;
}

/* Cola apuntando hacia la derecha (globo a la izquierda del elemento) */
.globo-cola-right {
    right: -15px;
    top: var(--cola-offset, 50%);
    transform: translateY(-50%);
    border-width: var(--cola-size) 0 var(--cola-size) var(--cola-size);
    border-color: transparent transparent transparent #ffffff;
    filter: drop-shadow(2px 0 4px rgba(0, 0, 0, 0.1));
}

.globo-cola-right::before {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--cola-size) 0 var(--cola-size) calc(var(--cola-size) + 1px);
    border-color: transparent transparent transparent rgba(0, 174, 239, 0.2);
    z-index: -1;
}

.globo-texto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        var(--bexen-base-cyan) 0%, 
        var(--bexen-cardio-purple) 50%, 
        var(--bexen-base-cyan) 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.globo-texto.globo-visible {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    visibility: visible !important;
    display: block !important;
}

.globo-texto.globo-relativo.globo-visible {
    opacity: 1 !important;
    transform: scale(1) !important;
    visibility: visible !important;
    display: block !important;
}

.globo-texto.globo-cerrando {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
}

.globo-texto.globo-relativo.globo-cerrando {
    opacity: 0;
    transform: scale(0.8);
}

/* Posiciones */
.globo-top-right {
    top: 90px;
    right: 20px;
}

.globo-top-left {
    top: 90px;
    left: 20px;
}

.globo-bottom-right {
    bottom: 20px;
    right: 20px;
}

.globo-bottom-left {
    bottom: 20px;
    left: 20px;
}

.globo-top-center {
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
}

.globo-bottom-center {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.globo-top-center.globo-visible,
.globo-bottom-center.globo-visible {
    transform: translateX(-50%) scale(1) translateY(0);
}

.globo-top-center.globo-cerrando,
.globo-bottom-center.globo-cerrando {
    transform: translateX(-50%) scale(0.8) translateY(-20px);
}

/* Botón cerrar en la parte superior */
.globo-cerrar-top {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    z-index: 10;
}

.globo-cerrar-top:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    transform: rotate(90deg);
}

/* Contenido compacto del globo (icono y texto en una sola línea) */
.globo-contenido-compacto {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 20px 16px 4px; /* 4px arriba, 4px izquierda para el icono, 20px derecha para X, 16px abajo */
    min-height: 50px;
}

.globo-icono-inline {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 20px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    margin-top: 0; /* Sin margen superior */
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 4px currentColor);
    }
    50% {
        filter: drop-shadow(0 0 8px currentColor);
    }
}

.globo-mensaje-inline {
    flex: 1;
    color: #212529;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-width: 0; /* Permite que el texto se ajuste */
    padding-right: 20px; /* Espacio para el botón X */
    margin: 0;
    padding-top: 0; /* Sin padding superior para que empiece arriba, alineado con el icono */
    padding-bottom: 0;
}

/* Mantener compatibilidad con el diseño antiguo por si acaso */
.globo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(0, 174, 239, 0.05) 0%, rgba(143, 83, 161, 0.05) 100%);
    border-bottom: 1px solid rgba(0, 174, 239, 0.1);
}

.globo-icono {
    display: flex;
    align-items: center;
    font-size: 20px;
    animation: pulse-glow 2s infinite;
}

.globo-cerrar {
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.globo-cerrar:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    transform: rotate(90deg);
}

/* Contenido del globo (antiguo) */
.globo-contenido {
    padding: 20px;
}

.globo-mensaje {
    color: #212529;
    font-size: 14px;
    line-height: 1.6;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.globo-cargando {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bexen-base-cyan);
    font-weight: 500;
}

.globo-cargando i {
    animation: spin 1s linear infinite;
}

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

.globo-error {
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* Tipos de globo */
.globo-tip {
    border-left: 4px solid var(--bexen-base-cyan);
}

.globo-tip .globo-icono {
    color: var(--bexen-base-cyan);
}

.globo-ai {
    border-left: 4px solid var(--bexen-cardio-purple);
}

.globo-ai .globo-icono {
    color: var(--bexen-cardio-purple);
}

/* Iconos trigger (para hover) */
.globo-icono-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--bexen-base-cyan);
    transition: all 0.3s ease;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}

.globo-icono-trigger:hover {
    color: var(--bexen-cardio-purple);
    transform: scale(1.2);
    background: rgba(0, 174, 239, 0.1);
}

.globo-icono-trigger.globo-icono-ai {
    color: var(--bexen-cardio-purple);
}

.globo-icono-trigger.globo-icono-ai:hover {
    color: var(--bexen-base-cyan);
    background: rgba(143, 83, 161, 0.1);
}

.globo-icono-trigger i {
    font-size: 16px;
}

/* Tema nocturno */
body.tema-nocturno .globo-texto {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: rgba(0, 174, 239, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(0, 174, 239, 0.2),
                0 0 40px rgba(0, 174, 239, 0.25);
}

body.tema-nocturno .globo-mensaje-inline {
    color: #e2e8f0;
}

body.tema-nocturno .globo-header {
    background: linear-gradient(135deg, rgba(0, 174, 239, 0.1) 0%, rgba(143, 83, 161, 0.1) 100%);
    border-bottom-color: rgba(0, 174, 239, 0.2);
}

body.tema-nocturno .globo-mensaje {
    color: #e2e8f0;
}

body.tema-nocturno .globo-cerrar {
    color: #94a3b8;
}

body.tema-nocturno .globo-cerrar:hover {
    color: #f87171;
    background: rgba(220, 53, 69, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .globo-texto {
        min-width: 280px;
        max-width: calc(100vw - 40px);
    }
    
    .globo-top-right,
    .globo-top-left,
    .globo-bottom-right,
    .globo-bottom-left {
        right: 20px;
        left: auto;
    }
}