/* =================================================================== */
/* 1. ANULACIÓN DE ESTILOS DE SIDEBAR ACTIVO/HOVER (TEMA OSCURO) */
/* =================================================================== */

/* 1. Anulación para el estado ACTIVO/SELECCIONADO (Usando el ID #sidebar) */
#sidebar .nav .nav-item.active > .nav-link {
    background: #0f1015 !important; 
    /* Sombra interna para forzar el color sobre cualquier JS */
    box-shadow: 0 0 0 1000px #0f1015 inset !important; 
    color: #ffffff !important;
}

/* 2. Anulación para el estado HOVER (Ratón encima) (Usando el ID #sidebar) */
#sidebar .nav:not(.sub-menu) > .nav-item:hover:not(.nav-category):not(.account-dropdown) > .nav-link {
    background: #2a314b !important; 
    box-shadow: 0 0 0 1000px #2a314b inset !important;
    color: #ffffff !important;
}

/* 3. Mantener Iconos y Barra Activa Blancos */
.sidebar .nav .menu-items .nav-link .menu-icon i {
    color: #ffffff !important;
}
.sidebar .nav .nav-item.active > .nav-link::before {
    background: #ffffff !important; 
}

/* =================================================================== */
/* 2. ANULACIÓN NAVBAR (ÍCONOS DE DESPLEGABLES A BLANCO) */
/* =================================================================== */

.navbar .dropdown-menu .preview-item .preview-icon i {
    color: #ffffff !important;
}
.navbar .dropdown-menu .preview-item .preview-icon {
    background: #191c24 !important; 
}

/* =================================================================== */
/* 3. ESTILOS DE MODALES (TEMA OSCURO CORONA) */
/* =================================================================== */

.modal-content {
    background-color: #191c24 !important;
    color: #6c7293 !important;
    border: 1px solid #3e424a !important;
}
.modal-content .p-input {
    background: #2A3038 !important;
    border: 1px solid #3e424a !important;
    color: #ffffff !important;
}
.modal-content .form-control {
    background-color: #2A3038 !important;
    color: #ffffff !important;
    border: 1px solid #3e424a !important;
}
.modal-content .modal-title,
.modal-content .form-group label,
.modal-content .form-check-label {
    color: #ffffff !important;
}
.modal-content .close {
    color: #ffffff !important;
    text-shadow: none !important;
}
.modal-content .close:hover {
    color: #6c7293 !important;
}
.modal-content.border-primary {
    border: none !important;
}

/* =================================================================== */
/* 4. ESTILOS DEL MODAL DE DETALLES (#modal-detalle-caso) */
/* =================================================================== */

.modal-body h5 {
    color: #ffffff !important;
    border-bottom: 1px solid #3e424a;
    padding-bottom: 0.5rem;
    font-size: 1.1rem; 
}
.modal-body h5 i.mdi {
    color: #ffffff !important; 
    margin-right: 0.5rem;
}

/* Contenedor con borde para las secciones de datos */
.data-section-box {
    border: 1px solid #3e424a; 
    border-radius: 4px;
    padding: 1rem; 
    margin-bottom: 1.5rem; 
}
.data-section-box:last-child {
    margin-bottom: 0;
}
.data-section-box h5 {
    margin-top: 0; 
}

/* Estilos para las tablas de datos (reemplaza <ul>) */
.data-table-custom {
    color: #ffffff;
    width: 100%;
}
.data-table-custom td {
    border: none !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    vertical-align: top;
    padding-left: 0 !important;
}
.data-table-custom td.icon-cell {
    width: 24px;
    padding-right: 5px !important;
}
.data-table-custom td.label-cell {
    white-space: nowrap; 
    padding-right: 8px !important;
    font-weight: 400; /* Sin negrita */
}
.data-table-custom td.value-cell {
    word-break: break-all; 
    text-align: left; /* Alineado a la izquierda */
}

/* =================================================================== */
/* 5. GALERÍA DE IMÁGENES (Miniaturas) */
/* =================================================================== */

.image-gallery-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1rem;
    padding: 1rem;
    background-color: #2A3038;
    border: 1px solid #3e424a;
    border-radius: 4px;
    -webkit-overflow-scrolling: touch;
}
.image-gallery-container::-webkit-scrollbar {
    height: 8px;
    background: transparent;
}
.image-gallery-container::-webkit-scrollbar-thumb {
    background: rgba(108, 117, 125, 0.3);
    border-radius: 10px;
}
.image-gallery-container:hover::-webkit-scrollbar-thumb {
    background: rgba(108, 117, 125, 0.6);
}

.image-thumbnail-wrapper {
    flex-shrink: 0;
    width: 150px;
    height: 100px;
    border: 1px solid #3e424a;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease-in-out;
}
.image-thumbnail-wrapper:hover {
    transform: translateY(-3px);
}
.image-thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.no-images-placeholder {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #6c7293;
    background-color: #2A3038;
    border: 1px dashed #3e424a;
    border-radius: 4px;
}
.no-images-placeholder h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: normal;
}

/* =================================================================== */
/* 6. CORRECCIÓN DE ANCHO DE MODAL-XL (Para ambos modales) */
/* =================================================================== */

body .modal-dialog.modal-xl {
    max-width: 95vw !important; 
    width: 95vw !important;
}
body .modal-dialog.modal-xl .modal-content {
    width: 100% !important;
}

/* =================================================================== */
/* 7. (NUEVO DESDE CERO) ESTILOS PARA EL VISOR FABRIC.JS */
/* =================================================================== */

#modal-image-viewer .modal-dialog {
    /* Ancho específico para el visor, anula el 95vw genérico si es necesario */
    max-width: 90vw !important; 
}

#modal-image-viewer .modal-body {
    /* Altura del visor. 75% de la altura de la ventana */
    height: 75vh; 
    padding: 0; /* Sin relleno para que el canvas ocupe todo */
    overflow: hidden;
}

/* El contenedor del canvas de Fabric */
#image-canvas-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* El canvas en sí (generado por Fabric) */
#image-canvas-container .canvas-container {
    width: 100% !important;
    height: 100% !important;
}

#image-canvas {
    width: 100%;
    height: 100%;
    cursor: grab; /* Cursor por defecto */
}
#image-canvas.grabbing {
    cursor: grabbing; /* Cursor al arrastrar */
}

/* Estilos para los controles en el footer */
#modal-image-viewer .modal-footer {
    display: flex;
    flex-wrap: wrap; /* Para que quepan en móviles */
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 150px;
    color: #ffffff;
}
.filter-group label {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}
.filter-group input[type="range"] {
    width: 100%;
}

/* Estilo para los botones de toggle activos */
.btn-outline-light.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}