/**
 * plan_inventario_etapas.css - Módulo Planificador
 * v1.20 - Sprint 4 (Hoja de Estilos Aislada con Contraste Pastel, X en Buscador y Botones Simétricos)
 * - Encapsulado estricto bajo .modulo-inventario-etapas e #modal_inventario_ubicaciones_etapas.
 * - Cabeceras y Totales en fondos pasteles claros (#f1f5f9 / #e2e8f0) con texto oscuro (#0f172a).
 * - Botones superiores de acción simétricos (115px) con paleta temática individual por función.
 * - Posicionamiento para el icono "X" de reseteo en la caja de búsqueda.
 * - Estilos para menús desplegables de filtrado por categoría y selector de Etapas.
 */

/* ==========================================================================
   1. ESTRUCTURA Y CONTENCIÓN DE LA MODAL
   ========================================================================== */
#modal_inventario_ubicaciones_etapas .modal-content {
    background-color: #f8fafc !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

#modal_inventario_ubicaciones_etapas .modal-body {
    padding: 1.25rem !important;
    background-color: #f8fafc !important;
}

.modulo-inventario-etapas {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #0f172a !important;
}

/* ==========================================================================
   2. BARRA SUPERIOR DE HERRAMIENTAS, BUSCADOR CON "X" Y BOTONES SIMÉTRICOS
   ========================================================================== */
.modulo-inventario-etapas .inv-toolbar {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.modulo-inventario-etapas .inv-search-input {
    height: 38px !important;
    border-radius: 6px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding-left: 38px !important;
    padding-right: 36px !important;
    font-size: 0.88rem !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
}

.modulo-inventario-etapas .inv-search-input:focus {
    border-color: #6b5b95 !important;
    box-shadow: 0 0 0 3px rgba(107, 91, 149, 0.2) !important;
    outline: none !important;
}

/* Botón X de Limpieza en la caja de búsqueda */
.modulo-inventario-etapas #btn_clear_buscar_inventario_etapas {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    transition: color 0.2s ease !important;
    z-index: 5 !important;
}

.modulo-inventario-etapas #btn_clear_buscar_inventario_etapas:hover {
    color: #dc3545 !important;
}

.modulo-inventario-etapas .inv-action-btn-group {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Simetría y dimensiones estándar para los 5 botones superiores */
.modulo-inventario-etapas .btn-inv-action {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    width: 115px !important;
    min-width: 115px !important;
    max-width: 115px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.modulo-inventario-etapas .btn-inv-action:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.08) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Paleta temática individual por función */
.modulo-inventario-etapas #btn_refrescar_inventario_etapas { background-color: #0d6efd !important; border-color: #0d6efd !important; }
.modulo-inventario-etapas #btn_exportar_excel_inventario_etapas { background-color: #198754 !important; border-color: #198754 !important; }
.modulo-inventario-etapas #btn_exportar_pdf_inventario_etapas { background-color: #dc3545 !important; border-color: #dc3545 !important; }
.modulo-inventario-etapas #btn_exportar_png_inventario_etapas { background-color: #ea580c !important; border-color: #ea580c !important; }
.modulo-inventario-etapas #btn_toggle_dashboard_inventario_etapas { background-color: #6b5b95 !important; border-color: #6b5b95 !important; }

.modulo-inventario-etapas .btn-inv-action.btn-inv-action-active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
    filter: brightness(0.9) !important;
}

/* ==========================================================================
   3. BANNERS EN TONOS PASTELES DE ALTO CONTRASTE Y DESPLEGABLE DE ETAPAS
   ========================================================================== */
.modulo-inventario-etapas .inv-title-banner {
    background-color: #ffffff !important;
    border-left: 4px solid #6b5b95 !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    border: 1px solid #cbd5e1 !important;
    border-left-width: 5px !important;
}

.modulo-inventario-etapas .inv-title-banner h4 {
    margin: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* Banner de Totales en Pastel Suave con Texto Oscuro */
.modulo-inventario-etapas .inv-totals-banner {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
    border-bottom: none !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    padding: 12px 20px !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
}

.modulo-inventario-etapas .inv-totals-banner .highlight-total {
    color: #0369a1 !important;
    font-family: monospace !important;
    font-weight: 900 !important;
}

/* ==========================================================================
   4. TABLA DE INVENTARIO Y RESALTADOS
   ========================================================================== */
.modulo-inventario-etapas .inv-table-wrapper {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    overflow-x: auto !important;
    max-height: 58vh !important;
}

.modulo-inventario-etapas .table-inv-etapas {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    font-size: 0.84rem !important;
}

/* Cabecera de la tabla en Pastel Claro con Texto Oscuro Negrita */
.modulo-inventario-etapas .table-inv-etapas thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.5px !important;
    padding: 11px 8px !important;
    text-align: center !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

.modulo-inventario-etapas .table-inv-etapas tbody td {
    padding: 8px 10px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(203, 213, 225, 0.6) !important;
    color: #0f172a !important;
}

/* Resaltados Tipográficos */
.modulo-inventario-etapas .table-inv-etapas td.col-bold-carga {
    font-weight: 800 !important;
    color: #0f172a !important;
}

.modulo-inventario-etapas .table-inv-etapas td.col-bold-pzs {
    font-weight: 900 !important;
    font-family: monospace !important;
    font-size: 0.92rem !important;
    color: #0f172a !important;
}

.modulo-inventario-etapas .table-inv-etapas td.col-bold-alerta,
.modulo-inventario-etapas .table-inv-etapas td.col-bold-vencimiento {
    font-weight: 800 !important;
    font-family: monospace !important;
    color: #0f172a !important;
}

.modulo-inventario-etapas .table-inv-etapas td.col-bold-ubicacion {
    font-weight: 800 !important;
    color: #334155 !important;
}

.modulo-inventario-etapas .table-inv-etapas tbody tr:hover td {
    filter: brightness(0.96) !important;
    cursor: pointer !important;
}

/* ==========================================================================
   5. BARRA INFERIOR DE FILTROS DESPLEGABLES ("PILLS" REAGRUPADOS)
   ========================================================================== */
.modulo-inventario-etapas .inv-pills-bar {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    margin-top: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
}

/* Botones desplegables por categoría */
.modulo-inventario-etapas .btn-dropdown-categoria {
    height: 36px !important;
    min-width: 140px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: all 0.2s ease !important;
}

.modulo-inventario-etapas .btn-dropdown-categoria:hover,
.modulo-inventario-etapas .btn-dropdown-categoria.active {
    border-color: #6b5b95 !important;
    background-color: #f8fafc !important;
    color: #6b5b95 !important;
}

.modulo-inventario-etapas .dropdown-menu-categoria {
    max-height: 220px !important;
    overflow-y: auto !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important;
    border: 1px solid #cbd5e1 !important;
    padding: 4px !important;
    z-index: 1080 !important;
}

.modulo-inventario-etapas .dropdown-item-categoria {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    color: #0f172a !important;
    cursor: pointer !important;
}

.modulo-inventario-etapas .dropdown-item-categoria:hover {
    background-color: #f1f5f9 !important;
    color: #6b5b95 !important;
}

.modulo-inventario-etapas #btn_reset_filtros_inventario {
    height: 36px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
}

/* ==========================================================================
   6. DASHBOARD ANALÍTICO (KPIs & GRÁFICOS)
   ========================================================================== */
.modulo-inventario-etapas .inv-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
}

.modulo-inventario-etapas .inv-kpi-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    text-align: center !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important;
    border-bottom: 3px solid #6b5b95 !important;
}

.modulo-inventario-etapas .inv-kpi-title {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

.modulo-inventario-etapas .inv-kpi-value {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-family: monospace !important;
}

.modulo-inventario-etapas .inv-charts-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.modulo-inventario-etapas .inv-chart-box {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    min-height: 280px !important;
}

/* ==========================================================================
   7. ADAPTACIÓN RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
    .modulo-inventario-etapas .inv-charts-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    .modulo-inventario-etapas .inv-action-btn-group {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .modulo-inventario-etapas .btn-inv-action {
        width: 48% !important;
        min-width: 48% !important;
    }
    .modulo-inventario-etapas .inv-pills-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .modulo-inventario-etapas .btn-dropdown-categoria {
        width: 100% !important;
    }
}