/* ==========================================================================
   ESTILO UNIFICADO DE ADMINISTRACIÓN DE DEPÓSITO (Inspirado en Personal.php)
   ========================================================================== */

:root {
    --bg-body: #f1f5f9;
    /* Gris claro moderno para el fondo */
    --bg-card: #ffffff;
    /* Fondo blanco para tarjetas y formularios */
    --text-main: #0f172a;
    /* Texto oscuro sofisticado */
    --text-muted: #64748b;
    /* Texto secundario gris */
    --primary: #0dcaf0;
    /* Azul claro tipo info de Bootstrap */
    --primary-hover: #31d2f2;
    /* Azul info más claro para hover */
    --border-color: #e2e8f0;
    /* Gris sutil para líneas divisorias */
}

/* --- Configuración Base y Tipografía --- */
body {
    min-height: 100vh;
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    margin: 0;
    padding: 0;
}

/* --- Estructura del Panel Principal --- */
.navbar-superior {
    z-index: 1030;
    background-color: #0f172a !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #1e293b;
}

.contenedor-principal {
    display: flex;
    flex: 1;
    margin-top: 56px;
    min-height: calc(100vh - 56px);
}

.sidebar-lateral {
    width: 260px;
    min-width: 260px;
    background-color: #1e293b;
    color: #f8fafc;
    transition: all 0.3s;
    z-index: 1020;
    border-right: 1px solid #334155;
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

.sidebar-lateral .nav-item {
    margin: 0;
}

.sidebar-lateral .nav-link {
    color: #cbd5e1;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    border-radius: 0;
    transition: all 0.2s;
    font-size: 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    text-decoration: none;
}

.sidebar-lateral .nav-link:hover {
    color: #ffffff;
    background-color: #0f172a;
    border-left-color: #0dcaf0;
}

/* Cuando el submenu está expandido, el padre se resalta sutilmente */
.sidebar-lateral .nav-item>a[aria-expanded="true"] {
    color: #ffffff;
    background-color: #0f172a;
    border-left-color: #0dcaf0;
}

.sidebar-lateral .nav-link i {
    width: 25px;
    font-size: 1.1rem;
    color: #38bdf8;
}

.sidebar-lateral .submenu {
    background-color: #0f172a;
}


/* ==========================================================================
   AJUSTES PARA DESARMAR EL AZUL DE BOOTSTRAP EN EL MENÚ LATERAL
   ========================================================================== */

/* 1. Neutralizamos cualquier clase activa o focus nativa de Bootstrap en la barra lateral */
.sidebar-lateral .nav-pills .nav-link.active,
.sidebar-lateral .nav-link:focus,
.sidebar-lateral .nav-link.active {
    color: #ffffff !important;
    background-color: #0f172a !important;
    /* Reemplaza el azul por el fondo oscuro */
    border-left-color: #0dcaf0 !important;
    /* Mantiene tu delicada línea celeste a la izquierda */
}

/* 2. Aseguramos el comportamiento del submenú cuando está desplegado */
.sidebar-lateral .submenu {
    background-color: #0f172a !important;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 3. Forzamos a que los links internos del acordeón no hereden fondos extraños */
.sidebar-lateral .submenu .nav-link,
.sidebar-lateral .submenu .nav-link.active {
    padding-left: 48px !important;
    font-size: 13px !important;
    background-color: transparent !important;
    /* Fondo transparente para que se vea el fondo oscuro del padre */
    color: #cbd5e1 !important;
    border-left: 3px solid transparent !important;
}

/* 4. Efecto Hover limpio para las opciones internas del acordeón (Despachos, Devoluciones, etc.) */
.sidebar-lateral .submenu .nav-link:hover {
    background-color: #1e293b !important;
    /* Color intermedio grisáceo suave */
    color: #ffffff !important;
    border-left-color: #38bdf8 !important;
    /* Resalta el ítem con tu celeste de marca */
}

/* --- Mejoras de Jerarquía Visual para DepoRed --- */

/* Convertimos los títulos principales en separadores de sección elegantes */
.sidebar-lateral .nav-item-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    /* Gris sutil */
    padding: 18px 20px 8px 20px;
    font-weight: 700;
}

/* Suavizamos el tamaño de las fuentes para que no compitan con la navbar superior */
.sidebar-lateral .nav-link {
    font-size: 13.5px;
    font-weight: 500;
}



/* Flecha animada al expandir */
.flecha-menu {
    transition: transform 0.3s ease;
    font-size: 14px;
}

.nav-item>a[aria-expanded="true"] .flecha-menu {
    transform: rotate(90deg);
}

/* Separadores del menú */
.sidebar-lateral hr {
    border-color: #334155;
    opacity: 0.5;
}

/* --- Estructura del Panel de Administración (Corregido) --- */

.contenido-dinamico {
    flex-grow: 1;
    padding: 25px;
    padding-top: 15px;
    background-color: var(--bg-body);
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: 260px;
    /* Respeta el ancho del menú lateral izquierdo */
    width: calc(100% - 260px) !important;
    /* Ocupa el 100% del espacio restante */
    min-width: 0;
    /* Candado técnico flexbox para evitar desbordes */
    height: calc(100vh - 56px);
}

/* El cuerpo general de las pestañas se estira de forma natural */
.contenido-dinamico .tab-content-maestra,
.contenido-dinamico #cuerpoPestañas {
    width: 100% !important;
    flex: 1;
}


/* --- Pestañas Internas (Estilo Navegador) --- */
.nav-tabs {
    border-bottom: 2px solid #e2e8f0;
    gap: 4px;
    position: sticky;
    top: 0;
    z-index: 1025;
    background-color: var(--bg-body);
    padding-top: 4px;
}

.nav-tabs .nav-link {
    background-color: #e2e8f0;
    color: #64748b;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-tabs .nav-link.active {
    background-color: #ffffff !important;
    color: var(--primary) !important;
    border-color: var(--border-color) var(--border-color) #ffffff !important;
    font-weight: 600;
}

.btn-cerrar-tab {
    background: none;
    border: none;
    padding: 0;
    margin-left: 12px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn-cerrar-tab:hover {
    color: #ef4444;
}

.tab-content-maestra {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Para que el contenido de las pestañas use scroll interno */
#cuerpoPestañas.tab-content {
    flex: 1;
    overflow: hidden !important; /* 🚫 PROHIBIDO SCROLL EN EL CUERPO DE LAS SOLAPAS */
    min-height: 0;
    height: calc(100vh - 110px); /* Ajuste dinámico exacto al ras de tu navbar */
}

/* Los paneles individuales ocupan todo el alto disponible */
#cuerpoPestañas .tab-pane {
    min-height: 100%;
}

.iframe-pantalla {
    width: 100%;
    height: 100% !important; /* 🚀 LA CLAVE: El iframe mide exactamente el 100% de la pestaña */
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden !important; /* Elimina cualquier residuo de scroll del marco */
}

/* --- Tarjetas Modernas (Cards de Personal) --- */
.card {
    background-color: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 20px;
}

.card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 15px;
    background-color: #fafafa;
    color: var(--text-main);
    display: flex;
    align-items: center;
}

.card-body {
    padding: 24px;
}

/* ==========================================================================
   ELIMINACIÓN DE TRIPLE SCROLL EN MESAS DE CARGA (DepoGestion PRO)
   ========================================================================== */

/* 1. La tarjeta contenedora de la tabla calcula dinámicamente el espacio restante */
.card-elastica-master {
    flex: 1;
    min-height: 0; /* Candado flexbox clave para evitar el estiramiento infinito */
    display: flex;
    flex-direction: column;
    overflow: hidden !important; /* Prohibido scrolls en el marco de la tarjeta */
}

#divdata {
    overflow-y: hidden !important; 
    overflow-x: hidden !important;
    height: 100% !important;
    padding: 0 !important;
}
/* 2. El cuerpo de la tabla recibe el scroll vertical de forma exclusiva */
#divdata.table-responsive-fija {
    flex: 1;
    overflow-y: auto !important; /* Único scroll vertical autorizado en la pantalla */
    overflow-x: hidden; /* Evita scrolls horizontales innecesarios */
    width: 100%;
}

/* 3. Fijamos el encabezado negro para que no desaparezca al hacer scroll hacia abajo */
#divdata.table-responsive-fija table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #727b85; /* Sincroniza con el table-dark de Bootstrap */
}

/* --- Tablas de Datos Minimalistas (Estilo Listados Personal) --- */
.table-responsive {
    overflow-x: auto;
    width: 100%;
}



table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
    background: var(--bg-card);
}

th {
    background-color: #f8fafc;
    color: var(--text-muted);
    padding: 14px 16px;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    color: #334155;
}

tr:hover td {
    background-color: #f8fafc;
}

/* --- Elementos de Formulario Estilizados --- */
.form-control,
.form-select,
input[type="date"],
select {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text-main);
    background-color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus,
.form-select:focus,
select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

label,
.CselectElement {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-right: 8px;
}

/* --- Botones --- */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
}

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

footer {
    background-color: #0f172a;
    color: var(--text-muted);
    padding: 12px 20px;
    z-index: 1040;
    border-top: 1px solid #1e293b;
}

/* --- Encabezados de despacho, remito, devolución --- */
.EncabezadoDiv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
}

.EncabezadoDiv label,
.EncabezadoDiv .labelgr,
.EncabezadoDiv .labelmed {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    white-space: nowrap;
}

.EncabezadoDiv .labelgr {
    background-color: var(--primary);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
}

.EncabezadoDiv select,
.EncabezadoDiv input[type="date"],
.EncabezadoDiv input[type="text"] {
    padding: 5px 10px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: #fff;
}

.EncabezadoDiv .btn-primary {
    padding: 5px 14px;
    font-size: 13px;
    white-space: nowrap;
}




/* ==========================================================================
   ESTILOS EXCLUSIVOS PARA PANTALLAS DE LOGIN / IDENTIFICACIÓN (MÉTODO FLEX)
   ========================================================================== */


/* Estructura base limpia */
html,
body.body-login {
    height: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0f172a !important;
    /* Fondo de respaldo */
    overflow: hidden !important;
}

/* El contenedor maestro aplica la imagen de fondo y el efecto desenfoque */
.body-login .login-wrapper {
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1;
}


/* CAPA DE IMAGEN DE FONDO (Logística Digital - Intensidad Optimizada) */
.body-login .login-wrapper::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    /* 1. Suavizamos la cortina negra (bajamos de 0.85 a 0.45 de opacidad) 
          para dejar pasar la luz original de tu foto */
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.55)),
        url('../../images/fondo_redes.jpg') !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    /* 2. INTENSIDAD: Subimos el brillo al 55% para que encienda el galpón 
          y bajamos un pelín el blur (a 3px) para que se distingan mejor los racks */
    filter: blur(3px) brightness(55%) !important;
    z-index: -1 !important;
}


/* Tarjeta compacta flotante con leve transparencia de cristal */
.body-login .login-container {
    width: 100% !important;
    max-width: 440px !important;
    padding: 35px 30px !important;
    background-color: rgba(30, 41, 59, 0.85) !important;
    /* Backdrop gris azulado con transparencia */
    backdrop-filter: blur(8px) !important;
    /* Efecto cristal esmerilado moderno */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Borde brillante sutil */
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4) !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Resto de tus estilos (.login-container h3, tarjetas, etc.) quedan exactamente igual abajo */


/* Encendemos el H3 de la cabecera en mayúsculas impecables */
.body-login .login-container h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-top: 0 !important;
}

/* --- Diseño de Tarjetas de Frentes/Contratos (Paso 2) --- */
.tarjeta-contrato-industrial {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    background-color: #0f172a !important;
    /* Fondo de contraste interno */
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
}

/* Efecto de arrastre y brillo en los bordes */
.tarjeta-contrato-industrial:hover {
    border-color: #0dcaf0 !important;
    background-color: #131e32 !important;
    transform: translateX(4px);
}

/* BLINDAJE DE TEXTO: Forza a CUALQUIER elemento interno a leerse en blanco nítido */
.tarjeta-contrato-industrial *,
.tarjeta-contrato-industrial p,
.tarjeta-contrato-industrial span,
.tarjeta-contrato-industrial .contrato-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: capitalize !important;
    /* Convierte 'claro' en 'Claro' */
    margin: 0 !important;
}

/* Subtítulos secundarios de la tarjeta */
.tarjeta-contrato-industrial small {
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    display: block !important;
    text-transform: none !important;
}

/* Flecha cian guía de la derecha */
.badge-flecha {
    color: #0dcaf0 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    transition: transform 0.2s !important;
}

.tarjeta-contrato-industrial:hover .badge-flecha {
    transform: scale(1.2);
}

/* --- Botón de Acción General (Paso 1 y 3) --- */
.form-button-industrial {
    background-color: #0dcaf0 !important;
    border: 1px solid #0dcaf0 !important;
    color: #0f172a !important;
    padding: 11px !important;
    width: 100% !important;
    border-radius: 6px !important;
    margin-top: 20px !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

.form-button-industrial:hover {
    background-color: #31d2f2 !important;
    border-color: #31d2f2 !important;
    box-shadow: 0 4px 12px rgba(13, 202, 240, 0.3) !important;
}

/* CAPA DE IMAGEN DE FONDO (Logística Digital Unificada) */
.body-login .login-wrapper::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    /* 1. Inyectamos una cortina degradada oscura arriba de la foto para darle contraste */
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.85)),
        url('../images/fondo_redes.jpg') !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    /* 2. El desenfoque elimina los iconos viejos y suaviza los vectores azules */
    filter: blur(1px) !important;
    z-index: -1 !important;
    /* Se esconde detrás de la tarjeta gris */
}

/* ==========================================================================
   DISEÑO UNIFICADO GLOBAL PARA TABLAS CON ENCABEZADO FIJO
   ========================================================================== */

/* Contenedor que limita la altura y activa el scroll vertical */
.tabla-congelada-responsiva {
    display: block;
    width: 100% !important;
    height: calc(100vh - 200px) !important; /* Ajuste dinámico exacto al ras de la pantalla */
    overflow-y: scroll !important; /* 🌟 ÚNICO scroll vertical autorizado en el visor */
    overflow-x: hidden !important;
}

/* Desarmamos el colapso de bordes para que el navegador pinte el fondo blanco del TH */
.tabla-congelada-responsiva table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}


/* Fijamos los títulos con su máscara opaca blanca */
.tabla-congelada-responsiva table thead tr th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important; /* Prioridad por sobre el cuerpo */
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #64748b !important;
    opacity: 1 !important;
    padding: 12px 16px !important;
    box-shadow: inset 0 -2px 0 #e2e8f0 !important; /* Línea gris inferior */
}

/* Forzamos a que las filas de datos se deslicen por detrás de los títulos */
.tabla-congelada-responsiva table tbody tr td {
    position: relative !important;
    z-index: 1 !important;
}
#TablaPreMov {
    width: 100% !important;
    table-layout: fixed !important; /* Blindaje para que no se deformen las columnas */
    border-collapse: collapse;
}

#TablaPreMov thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background-color: #36383a !important; /* Forzamos el color oscuro de Bootstrap 5 */
    box-shadow: inset 0 -2px 0 #e2e8f0; /* Línea divisoria inferior sutil */
}

table#TablaPreMov thead tr th,
table#TablaPreMov thead th,
#TablaPreMov th {
    color: #ffffff !important; /* ⚪ Blanco puro de alta definición */
    background-color: #74797e !important; /* 🎛️ El gris intermedio que elegiste */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}

/* public/css/estilo_unificado.css */
/* ================================================================================= */
/* 🎨 COMPONENTES SÍNCRONOS: ARQUITECTURA DE ADVERTENCIAS MULTI-TENANT              */
/* ================================================================================= */

/* Contenedor Base Elástico para tu div #mensajephp */
.alerta-backend-SaaS {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    border: 1px solid transparent;
    transition: all 1.2s ease-in-out;
    animation: fadeInAlerta 0.35s ease-out forwards;
}

/* 🟢 ESTADO EXITOSO (Confirmaciones de Ingreso / Acción 1) */
.alerta-SaaS-verde {
    background-color: rgba(204, 243, 219, 0.45) !important; /* Verde esperanza tenue contable */
    color: #157347 !important; /* Verde esmeralda nítido para tipografía */
    border-color: rgba(25, 135, 84, 0.15) !important;
    border-left: 4px solid #198754 !important; /* Candado rígido izquierdo de fábrica */
}

/* 🔴 ESTADO BLOQUEADO (Equipos Instalados, Robados o con Error SQL 23000) */
.alerta-SaaS-rojo {
    background-color: rgba(253, 215, 215, 0.45) !important; /* Rojo tenue de alerta financiero */
    color: #bb2d3b !important; /* Rojo carmín de alta visibilidad para error */
    border-color: rgba(220, 53, 69, 0.15) !important;
    border-left: 4px solid #dc3545 !important; /* Candado rígido izquierdo de bloqueo */
}

/* Micro-animación síncrona para que el cartel nazca con suavidad al hacer el bíp con el escáner */
@keyframes fadeInAlerta {
    from {
        opacity: 0;
        transform: translateY(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}