/* Estilos propios del Sistema de Logística Portuaria */

body {
    background-color: #f4f6f9;
}

.navbar-brand i {
    margin-right: 6px;
}

.stat-card {
    color: #fff;
    border-radius: 10px;
    border: none;
}

.card {
    border-radius: 10px;
    border: 1px solid #e6e9ee;
}

.table thead th {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #6c757d;
    border-bottom-width: 1px;
}

.sidebar {
    /* El fondo azul del menú debe cubrir siempre todo el lateral,
       sin importar qué tan larga sea la página de contenido (grids con
       muchos registros, formularios extensos, etc.). Al ser hijo directo
       de ".d-flex" (que por defecto estira sus hijos con align-items:
       stretch), el sidebar toma automáticamente el alto total de la fila,
       igual que "main", así que nunca queda un tramo en blanco debajo. */
    background: #1a2540;
    flex-shrink: 0;
}

/* El contenido del menú (logo + enlaces) se queda "pegado" en la parte
   visible de la pantalla mientras se hace scroll por el contenido
   principal, con su propio scroll interno si el menú es más largo que
   la pantalla. Separar esto del fondo (".sidebar") es lo que permite que
   el color azul cubra todo el lateral aunque el menú en sí sea corto. */
.sidebar-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    /* Scrollbar propio, discreto, dentro del sidebar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.35) transparent;
}

.sidebar-inner::-webkit-scrollbar {
    width: 6px;
}
.sidebar-inner::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-inner::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.35);
    border-radius: 4px;
}


.sidebar .nav-link {
    color: rgba(255,255,255,.75);
    font-size: .92rem;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-radius: 6px;
}

/* Botón hamburguesa: solo visible en pantallas pequeñas */
.btn-sidebar-toggle {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: #1a2540;
    padding: 0;
    margin-right: .75rem;
    line-height: 1;
}

/* Respeta el notch / barra de estado dentro de la app móvil (Capacitor) */
.navbar {
    padding-top: calc(.5rem + env(safe-area-inset-top));
}

/* ---------------------------------------------------------------
   Responsive: sidebar tipo offcanvas en pantallas pequeñas
   --------------------------------------------------------------- */
@media (max-width: 768px) {
    .btn-sidebar-toggle {
        display: inline-block;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .25s ease-in-out;
        box-shadow: 2px 0 12px rgba(0,0,0,.3);
    }

    .sidebar-inner {
        padding-top: calc(1rem + env(safe-area-inset-top)) !important;
    }

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

    #sidebarOverlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1040;
    }

    body.sidebar-open #sidebarOverlay {
        display: block;
    }

    main.flex-fill {
        width: 100%;
    }
}


/* ---------------------------------------------------------------
   Panel fijo de documentos adjuntos (lateral derecho), usado en el
   formulario de detalle de Contenedor. Permanece siempre visible
   mientras se trabaja en el formulario (no requiere abrirlo/cerrarlo).
   --------------------------------------------------------------- */
.panel-adjuntos-fijo {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #e6e9ee;
    box-shadow: -2px 0 8px rgba(0,0,0,.05);
    z-index: 1030;
}

.panel-adjuntos-header {
    background: #f8f9fa;
}

/* Deja espacio a la derecha del contenido para que el panel fijo no lo tape */
.contenido-con-panel-adjuntos {
    margin-right: 360px;
}

/* En pantallas medianas (tablets/laptops con ventana no maximizada) el
   panel se mantiene fijo al costado, solo se angosta un poco para dejar
   más espacio al formulario. */
@media (max-width: 1199.98px) {
    .panel-adjuntos-fijo {
        width: 280px;
    }
    .contenido-con-panel-adjuntos {
        margin-right: 296px;
    }
}

@media (max-width: 575.98px) {
    /* Solo en móviles (pantalla realmente angosta) el panel pasa a flujo
       normal (debajo del formulario) en vez de quedar fijo al costado,
       porque ya no hay espacio horizontal suficiente para ambos. */
    .panel-adjuntos-fijo {
        position: static;
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 1px solid #e6e9ee;
        box-shadow: none;
        margin-top: 1.5rem;
    }

    .contenido-con-panel-adjuntos {
        margin-right: 0;
    }
}

/* Barra de herramientas (exportar / imprimir) */
.toolbar-actions .btn {
    font-size: .8rem;
}

/* Impresión: solo se muestra el contenido principal (tablas) */
@media print {
    .no-print {
        display: none !important;
    }
    .sidebar,
    .navbar,
    .panel-adjuntos-fijo {
        display: none !important;
    }
    main {
        margin: 0 !important;
    }
    .contenido-con-panel-adjuntos {
        margin-right: 0 !important;
    }
    .card {
        border: none !important;
    }
    a {
        text-decoration: none !important;
        color: inherit !important;
    }
}