/* =========================================================================
   CAPA DE PERSONALIZACIÓN: MISA EXPRESS (GUÍA DE ESTILOS)
   ========================================================================= */

:root, [data-bs-theme="light"] {
    /* 1. COLOR PRINCIPAL (Rojo Corporativo) */
    --bs-primary: #E3182D;
    --bs-primary-active: #C81527;
    --bs-primary-light: #FCE8EA;
    --bs-primary-inverse: #ffffff;
    --bs-primary-rgb: 227, 24, 45;
    /* 2. COLOR DE ENLACES GLOBALES (Azul Profesional) */
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
    /* 3. COLOR DE ACCIÓN PRINCIPAL (Plomo Oscuro/Negro) */
    --bs-dark: #1A1A1A;
    --bs-dark-active: #000000;
    /* 4. FONDOS GENERALES (Plomo Claro) */
    --bs-body-bg: #F4F5F7;
    --bs-app-bg-color: #F4F5F7;
    /* 5. FONDO DE CABECERA (Blanco Puro) */
    --bs-app-header-base-bg-color: #ffffff;
    --bs-app-header-base-border-bottom: 1px solid #EBECEF;
}

/* =========================================================================
   2. MODO OSCURO (Dark Mode Support)
   ========================================================================= */
[data-bs-theme="dark"] {
    --bs-primary: #E3182D;
    --bs-primary-active: #C81527;
    --bs-primary-light: #3A1015;
    --bs-link-color: #3d8bfd;
    --bs-link-hover-color: #6ea8fe;
    --bs-app-header-base-bg-color: #13141A;
}

/* =========================================================================
   3. NAVEGACIÓN SUPERIOR (Top Menu - Destrucción total del morado)
   ========================================================================= */

/* 1. Sobrescribir variables internas de Metronic por si acaso */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bs-header-link-bg-color: #E3182D !important;
}

/* 2. Forzar el color en escritorio asegurando la misma especificidad que Metronic */
@media (min-width: 992px) {
    .app-header-menu .menu > .menu-item.here > .menu-link,
    .app-header-menu .menu > .menu-item.show > .menu-link,
    .app-header-menu .menu > .menu-item.active > .menu-link {
        background: var(--bs-header-link-bg-color) !important;
        background-color: var(--bs-header-link-bg-color) !important;
    }
}

/* 3. Forzar textos e iconos blancos en el estado activo */
.app-header-menu .menu > .menu-item.here > .menu-link .menu-title,
.app-header-menu .menu > .menu-item.here > .menu-link .menu-icon i,
.app-header-menu .menu > .menu-item.here > .menu-link .menu-icon .svg-icon {
    color: #ffffff !important;
}

/* 4. Estado Hover (Rojo suave) */
.app-header-menu .menu > .menu-item:not(.here):hover > .menu-link {
    background-color: #FCE8EA !important;
}

    .app-header-menu .menu > .menu-item:not(.here):hover > .menu-link .menu-title,
    .app-header-menu .menu > .menu-item:not(.here):hover > .menu-link .menu-icon i {
        color: #E3182D !important;
    }

/* =========================================================================
   4. COMPONENTES GLOBALES (Tarjetas, Checks, Enlaces y Fixes)
   ========================================================================= */
/* Eliminar fondo blanco del logo */
.app-header img[src*="Logo"] {
    mix-blend-mode: multiply;
}

/* Tarjetas */
.card {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.03) !important;
}

/* Paginación Activa */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bs-component-active-bg: var(--bs-primary) !important;
    --bs-component-hover-color: var(--bs-primary) !important;
}

/* Checkboxes */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.form-check-input:focus {
    border-color: var(--bs-primary-active) !important;
    box-shadow: 0 0 0 0.25rem rgba(227, 24, 45, 0.25) !important;
}

/* Forzar textos interactivos a Azul */
.text-primary {
    color: var(--bs-link-color) !important;
}

.text-hover-primary:hover {
    color: var(--bs-link-hover-color) !important;
    transition: color 0.2s ease;
}

.text-active-primary.active {
    color: var(--bs-link-color) !important;
}

    .text-primary i, .text-hover-primary:hover i, .text-active-primary.active i {
        color: inherit !important;
    }

/* Enlaces de tabla a Azul (Excluyendo botones y menús) */
.table tbody a:not(.btn):not(.menu-link) {
    color: var(--bs-link-color) !important;
    font-weight: 600;
    text-decoration: none;
}

    .table tbody a:not(.btn):not(.menu-link):hover {
        color: var(--bs-link-hover-color) !important;
        text-decoration: underline;
    }

/* Fix Select2 en Modales */
.select2-container--open {
    z-index: 1060 !important;
}

.select2-results__option {
    padding: 6px 12px !important;
    font-size: 1.05rem;
}


/* =========================================================================
   5. DISEÑO DE TABLAS (Mínima Personalización - Cabeceras Compactas)
   ========================================================================= */

/* Fila principal de la cabecera (Rojo Fuerte) */
.table thead tr:first-child th {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    text-align: center !important;
    vertical-align: middle !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important; /* Divisores sutiles */
    padding: 0.5rem 0.5rem !important;
}

    .table thead tr:first-child th:last-child {
        border-right: none !important;
    }

/* Fila de filtros (Rojo Suave) */
.table thead tr.filter-row th {
    background-color: var(--bs-primary-light) !important;
    border-right: 1px solid rgba(227, 24, 45, 0.15) !important;
    padding: 0.35rem 0.5rem !important;
}

    .table thead tr.filter-row th:last-child {
        border-right: none !important;
    }


/* =========================================================================
   6. FIX DATATABLES SCROLL (Clon Fantasma)
   ========================================================================= */
/* Aseguramos que la copia de la cabecera (que DataTables usa para medir)
   no se pinte de rojo ni tenga textos visibles, pero conserve su tamaño nativo. */
.dt-scroll-body thead tr th,
.dt-scroll-body thead tr td {
    background-color: transparent !important;
    color: transparent !important;
    border: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.dt-scroll-body thead tr.filter-row th input {
    visibility: hidden !important;
}


/* =========================================================================
   7. DATATABLES CONTROLES INFERIORES (Paginación y Selectores)
   ========================================================================= */
/* Alineación de controles inferiores de DataTable */
div.dataTables_wrapper div.dataTables_length label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

/* Ajustar el SELECT para que no ocupe el 100% y tenga márgenes */
div.dataTables_wrapper div.dataTables_length select {
    width: auto !important;
    display: inline-block !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* Alinear el texto de información (Mostrando 1 al 10...) a la derecha del select */
div.dataTables_wrapper div.dataTables_info {
    padding-top: 0 !important;
    margin-left: 15px !important;
    display: inline-block !important;
}

/* Asegurar que el contenedor izquierdo (Length + Info) esté alineado */
div.dataTables_wrapper .row .col-md-6.d-flex {
    align-items: center !important;
}


/* =========================================================================
   8. COMPONENTES VISUALES E IMÁGENES
   ========================================================================= */
/* Rutas absolutas para imágenes de placeholder (Soporte Light/Dark) */
.image-input-placeholder {
    background-image: url('/assets/media/svg/files/blank-image.svg');
}

[data-bs-theme="dark"] .image-input-placeholder {
    background-image: url('/assets/media/svg/files/blank-image-dark.svg');
}


/* =========================================================================
   9. VALIDACIÓN DE FORMULARIOS (Errores)
   ========================================================================= */
/* Hacer que los mensajes de error sean más pequeños y limpios */
.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.85em;
    color: #f1416c; /* Metronic Danger Color */
    font-weight: 500;
}

/* Estilo personalizado para el estado de error de Select2 */
.select2-selection.is-invalid-select {
    border-color: #f1416c !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f1416c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f1416c' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}