:root {
    --sce-primary: #003366; /* Azul marino logístico */
    --sce-secondary: #00509d; /* Azul brillante */
    --sce-accent: #ffcc00; /* Amarillo seguridad/transporte */
    --sce-bg: #f4f6f9; /* Gris muy suave para fondo */
    --sce-text: #2c3e50;
}

body {
    background-color: var(--sce-bg);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--sce-text);
}

/* --- Navbar --- */
.navbar-sce {
    background-color: var(--sce-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1060;
}
/* Menús desplegables siempre visibles sobre buscadores y contenido sticky */
.navbar .dropdown-menu {
    z-index: 1070 !important;
}

.navbar-brand {
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff !important;
}

.nav-link {
    color: rgba(255,255,255,0.8) !important;
    font-weight: 500;
}

.nav-link:hover, .nav-link.active {
    color: var(--sce-accent) !important;
}

/* --- Tarjetas (Cards) --- */
.card {
    border: none;
    border-radius: 12px; /* Bordes más redondeados */
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
    transition: transform 0.2s ease;
    margin-bottom: 20px;
    background-color: #fff;
}

.card:hover {
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.card-header {
    background-color: #fff;
    border-bottom: 2px solid var(--sce-secondary);
    color: var(--sce-secondary);
    font-weight: 700;
    border-radius: 12px 12px 0 0 !important;
    padding: 1rem 1.25rem;
}

/* --- Personalización Tarjetas de Pilotos --- */
.card-piloto {
    /* Ajusta la altura mínima si quieres que sean más altas */
    min-height: auto; 
}

/* --- Botones --- */
.btn-primary {
    background-color: var(--sce-secondary);
    border-color: var(--sce-secondary);
}

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

/* --- Utilidades --- */
.section-title {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 5px;
}

.form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
}

.input-group-text {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    color: var(--sce-secondary);
}

/* ... (el resto de tu CSS anterior) ... */

/* --- Pestañas Personalizadas (Tabs) - VERSIÓN VISIBLE --- */
.nav-tabs {
    border-bottom: 2px solid var(--sce-secondary);
    gap: 4px; /* Un pequeño espacio entre pestañas */
}

/* Estado INACTIVO (Visible permanentemente) */
.nav-tabs .nav-link {
    color: #555; /* Gris oscuro para el texto */
    background-color: #f0f2f5; /* Gris claro para el fondo (YA NO TRANSPARENTE) */
    border: 1px solid #dee2e6;
    border-bottom: none;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;
    opacity: 1; /* Asegura opacidad total */
}

/* Estado HOVER (Al pasar el mouse) */
.nav-tabs .nav-link:hover {
    background-color: #e2e6ea; /* Un gris un poco más oscuro al tocar */
    color: var(--sce-secondary);
    cursor: pointer;
}

/* Estado ACTIVO (Seleccionado) */
.nav-tabs .nav-link.active {
    color: #fff !important;
    background-color: var(--sce-secondary) !important;
    border-color: var(--sce-secondary);
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Sombra suave para resaltar */
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

/* ==========================================================
   static/css/print_documento.css
   Estilos maestros para documentos y órdenes de carga
========================================================== */

/* 1. VISTA PREVIA EN PANTALLA (Modo Visor de PDF) */
body {
    background-color: #ffffff; /* Fondo gris oscuro clásico de los visores de PDF */
    font-family: 'Arial', sans-serif;
}

.page-container {
    background-color: #ffffff;
    width: 21.59cm; /* Ancho tamaño Carta (Letter) */
    min-height: 27.94cm; /* Alto tamaño Carta */
    margin: 100px auto 40px auto; /* Margen superior para la barra de botones */
    padding: 1.5cm 2cm; /* Márgenes internos de la hoja */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Sombra para que parezca hoja flotando */
    position: relative;
    box-sizing: border-box;
}

/* Footer posicionado al final de la hoja */
.footer-absolute {
    position: absolute;
    bottom: 1cm;
    left: 2cm;
    right: 2cm;
}

/* 2. MODO IMPRESIÓN (Cuando le das Ctrl+P o "Imprimir") */
@media print {
    /* Fondo blanco puro para ahorrar tinta */
    body {
        background-color: #ffffff;
        margin: 0;
        padding: 0;
    }

    /* Quitamos las sombras y los márgenes de la pantalla, la impresora pone los suyos */
    .page-container {
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: none;
    }

    /* ¡LA REGLA DE ORO! Ocultamos todo lo que tenga la clase 'no-print' (Botones) */
    .no-print, .fixed-top {
        display: none !important;
    }

    /* Forzamos al navegador a imprimir los colores de fondo (las barras negras/grises) */
    * {
        -webkit-print-color-adjust: exact !important; /* Para compatibilidad con navegadores antiguos (Safari, Chrome) */
        print-color-adjust: exact !important; /* El estándar actual */
    }

    /* El pie de página al fondo de la hoja impresa */
    .footer-absolute {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
    }
}

/* Esto atenuará el placeholder de todos tus inputs */
::placeholder {
    color: #adb5bd !important; /* Un gris claro estándar de Bootstrap */
    opacity: 0.6; /* Esto le da el toque "atenuado" */
    font-weight: normal; /* Para que no herede el fw-bold del input mientras sea sugerencia */
}

/* =========================================
   ESTILOS PERSONALIZADOS SCEMEX
========================================= */

/* Definición del color Azul SCE para botones */
.btn-sce-blue {
    /* 👇 CAMBIA ESTE CÓDIGO HEX POR EL AZUL EXACTO DE TU MARCA 👇 */
    background-color: #0d47a1;  /* Azul corporativo intenso */
    border-color: #0d47a1;
    color: white !important; /* Texto blanco forzado */
    transition: all 0.3s ease; /* Suaviza el cambio de color */
}

/* Efecto al pasar el mouse (hover) - Un poco más oscuro */
.btn-sce-blue:hover, .btn-sce-blue:focus, .btn-sce-blue:active {
    background-color: #002171; /* Azul más oscuro para contraste */
    border-color: #002171;
    box-shadow: 0 4px 8px rgba(13, 71, 161, 0.3); /* Sombra suave azul */
}

/* Fondo Azul Corporativo para Tarjetas y Encabezados */
.bg-sce-blue {
    background-color: #0d47a1 !important;
    color: white !important;
}

/* --- Sticky Action Bar (Volver + botones principales) --- */
.sticky-actions {
    position: sticky;
    top: 56px; /* debajo del navbar */
    z-index: 1020;
    background: linear-gradient(to bottom, var(--sce-bg) 85%, transparent);
    padding: 0.5rem 0 1rem 0;
    margin: -0.5rem 0 1rem 0;
}
.card-header.sticky-top {
    position: sticky;
    top: 56px;
    z-index: 1015;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.tarjeta-header { 
            background-color: #e9ecef !important; 
            font-weight: bold; 
            text-transform: uppercase;
            padding: 5px 10px;
            border-bottom: 1px solid #000;
            
            /* Esta es la forma estándar que VSCode acepta sin protestar */
            print-color-adjust: exact !important;
            -webkit-print-color-adjust: exact !important;
        }