[v-cloak] { display: none !important; }
body { font-family: 'Inter', 'Basier Square', sans-serif; }
.adr-icon { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1)); }
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

.markdown-body { font-size: 0.85rem; color: #334155; line-height: 1.6; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { color: #091197; font-weight: 800; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.markdown-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; background-color: #fff; font-size: 0.8rem; }
.markdown-body th { background-color: #091197; color: white; padding: 0.5rem; text-align: left; border: 1px solid #cbd5e1; }
.markdown-body td { padding: 0.5rem; border: 1px solid #cbd5e1; }
.markdown-body tr:nth-child(even) { background-color: #f8fafc; }
.markdown-body blockquote { border-left: 4px solid #03A9EC; padding-left: 1rem; color: #091197; background-color: #f0f4f8; padding-top: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 1rem; font-weight: 600;}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #03A9EC; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #091197; }

/* ==========================================================================
   CONFIGURACIÓN DE IMPRESIÓN PROFESIONAL DEFINITIVA (A4 EXACTO)
   ========================================================================== */
@media print {
    /* 1. Configuración estricta del papel */
    @page { 
        size: A4 portrait;
        margin: 10mm; 
    }
    
    /* 2. Liberamos la altura para que el contenido baje por los folios */
    html, body, #app, main, .overflow-y-auto, .flex-1 { 
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important; 
        padding: 0 !important; 
        background: #ffffff !important;
        overflow: visible !important;
        position: static !important;
    }

    /* 3. Apagar solo menús y botones (¡SIN BORRAR LA APP!) */
    aside, nav, #menu-lateral, .mobile-header, .print-hide, button, .print\:hidden { 
        display: none !important; 
        opacity: 0 !important;
    }

    /* 4. TRUCO ANTI-CHROME: Eliminar sombras para que las imágenes NO se vuelvan invisibles y forzar la tinta */
    * {
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important;
        filter: none !important;
        -webkit-filter: none !important;
        box-shadow: none !important;
    }

    /* Evitar que los recuadros se corten por la mitad al cambiar de folio */
    .bg-white, .rounded-2xl, .rounded-3xl, .p-6 {
        page-break-inside: avoid !important;
    }

    /* 5. Encadenamiento perfecto de folios físicos (Para la Multimodal) */
    .pdf-page-box {
        display: block !important;
        width: 210mm !important;
        height: 296.5mm !important;
        max-height: 296.5mm !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 12mm 15mm !important;
        border: none !important;
        overflow: hidden !important;
        background: #ffffff !important;
        page-break-inside: avoid !important;
        page-break-after: always !important;
    }

    .pdf-page-box:last-child {
        page-break-after: avoid !important;
    }

    /* ========================================================= */
    /* 6. TRUCO ANTI-CHROME PARA 3D: Evitar que el techo tape las etiquetas */
    /* ========================================================= */
    .carton .top, .carton .bottom, .carton .left, .carton .back,
    .black-wrap .top, .black-wrap .bottom, .black-wrap .left, .black-wrap .back,
    .mini-carton .top, .mini-carton .bottom, .mini-carton .left, .mini-carton .back {
        display: none !important;
        opacity: 0 !important;
    }

    .carton .front, .carton .right,
    .black-wrap .front, .black-wrap .right,
    .mini-carton .front, .mini-carton .right {
        z-index: 100 !important;
    }
	/* Añadir al truco Anti-Chrome de styles.css para que afecte también a los GRG */
    .grg .top, .grg .bottom, .grg .left, .grg .back,
    .ibc .top, .ibc .bottom, .ibc .left, .ibc .back {
        display: none !important;
        opacity: 0 !important;
    }

    .grg .front, .grg .right,
    .ibc .front, .ibc .right {
        z-index: 100 !important;
    }
}


/* Estilos para el Simulador 3D CTU */
.scene-3d { perspective: 1200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.truck-assembly { transform-style: preserve-3d; transition: transform 0.1s ease-out; --truck-scale: 1.8; }
@media (max-width: 1024px) { .truck-assembly { --truck-scale: 1.3; } }
@media (max-width: 768px) { .truck-assembly { --truck-scale: 0.8; } }
.cuboid { position: absolute; transform-style: preserve-3d; }
.cuboid .face { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* Contenedor: W=100, H=100, D=300 */
.trailer { width: 100px; height: 100px; }
.trailer .front  { width: 100px; height: 100px; transform: translateZ(150px); background: #091197; border: 1px solid rgba(0,0,0,0.5); --truck-scale: 1.2; }
.trailer .back   { width: 100px; height: 100px; transform: translateZ(-150px) rotateY(180deg); background: #091197; border: 1px solid rgba(0,0,0,0.5); --truck-scale: 1.2; }
.trailer .right  { width: 300px; height: 100px; transform: translateX(50px) rotateY(90deg); left: -100px; background-color: #091197; border: 1px solid rgba(0,0,0,0.5); }
.trailer .left   { width: 300px; height: 100px; transform: translateX(-50px) rotateY(-90deg); left: -100px; background-color: #091197; border: 1px solid rgba(0,0,0,0.5); }
.trailer .top    { width: 100px; height: 300px; transform: translateY(-50px) rotateX(90deg); top: -100px; background: #070d75; border: 1px solid rgba(0,0,0,0.5); }

/* Tractora: W=90, H=80, D=80 */
.tractor { width: 90px; height: 80px; transform: translate3d(5px, 10px, 210px); }
.tractor .front  { width: 90px; height: 80px; transform: translateZ(40px); background: #ffffff; border: 1px solid #cbd5e1; flex-direction: column;}
.tractor .back   { width: 90px; height: 80px; transform: translateZ(-40px) rotateY(180deg); background: #e2e8f0; border: 1px solid #cbd5e1; }
.tractor .right  { width: 80px; height: 80px; transform: translateX(45px) rotateY(90deg); left: 5px; background: #f8fafc; border: 1px solid #cbd5e1; }
.tractor .left   { width: 80px; height: 80px; transform: translateX(-45px) rotateY(-90deg); left: 5px; background: #f1f5f9; border: 1px solid #cbd5e1; }
.tractor .top    { width: 90px; height: 80px; transform: translateY(-40px) rotateX(90deg); top: 0px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 10px; }

/* Estilos PDF Multimodal */
#multimodal-template { font-family: 'Helvetica', 'Arial', sans-serif; background: white !important; color: black; width: 210mm; min-height: 297mm; padding: 15mm; box-sizing: border-box; margin: 0 auto; }
.mm-table, .mm-table th, .mm-table td { border: 1px solid black; border-collapse: collapse; }
.mm-table th, .mm-table td { padding: 4px; vertical-align: top; }
.mm-box { border: 1px solid black; padding: 4px; box-sizing: border-box; }
.mm-title { font-size: 14pt; font-weight: bold; text-align: center; margin-bottom: 10px; }
.mm-label { font-size: 7pt; display: block; margin-bottom: 2px; }
.mm-value { font-size: 8pt; font-weight: bold; white-space: pre-wrap; word-break: break-word; }
.mm-grid { display: grid; gap: 0; }
.mm-page-break { page-break-before: always; clear: both; }

@media screen {
    .mm-page-break { padding-top: 15mm; margin-top: 15mm; }
}
/* ==========================================================================
   SIMULADOR 3D BULTOS Y PALETS (PERFECTO)
   ========================================================================== */
.box-assembly { transform-style: preserve-3d; transition: transform 0.1s ease-out; --box-scale: 1.5; }
@media (max-width: 1024px) { .box-assembly { --box-scale: 1.2; } }
@media (max-width: 768px) { .box-assembly { --box-scale: 0.9; } }

.cuboid { position: absolute; transform-style: preserve-3d; }
.cuboid .face { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; backface-visibility: hidden; }

/* Textura Cartón (Bulto Simple) 100x100x100 */
.carton { width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; transform-style: preserve-3d; }
.carton .face { background: #dcb88b; border: 2px solid #b59267; box-shadow: inset 0 0 20px rgba(0,0,0,0.05); }
.carton .front  { width: 100px; height: 100px; transform: rotateY(0deg) translateZ(50px); }
.carton .back   { width: 100px; height: 100px; transform: rotateY(180deg) translateZ(50px); }
.carton .right  { width: 100px; height: 100px; transform: rotateY(90deg) translateZ(50px); left: 0; }
.carton .left   { width: 100px; height: 100px; transform: rotateY(-90deg) translateZ(50px); left: 0; }
.carton .top    { width: 100px; height: 100px; transform: rotateX(90deg) translateZ(50px); top: 0; }
.carton .bottom { width: 100px; height: 100px; transform: rotateX(-90deg) translateZ(50px); top: 0; }

/* Base del Palet (Madera) 140x20x140 */
.pallet-base { width: 140px; height: 20px; margin-left: -70px; margin-top: -10px; transform: translateY(60px); transform-style: preserve-3d; }
.pallet-base .face { background: #d09451; border: 1px solid #8b5a2b; }
.pallet-base .front  { width: 140px; height: 20px; transform: rotateY(0deg) translateZ(70px); }
.pallet-base .back   { width: 140px; height: 20px; transform: rotateY(180deg) translateZ(70px); }
.pallet-base .right  { width: 140px; height: 20px; transform: rotateY(90deg) translateZ(70px); left: 0; top: 0; }
.pallet-base .left   { width: 140px; height: 20px; transform: rotateY(-90deg) translateZ(70px); left: 0; top: 0; }
.pallet-base .top    { width: 140px; height: 140px; transform: rotateX(90deg) translateZ(10px); top: -60px; left: 0; background: repeating-linear-gradient(90deg, #d09451, #d09451 18px, #a8723a 20px); }
.pallet-base .bottom { width: 140px; height: 140px; transform: rotateX(-90deg) translateZ(10px); top: -60px; left: 0; }

/* Sobreembalaje (Plástico Negro Opaco) 130x120x130 */
.black-wrap { width: 130px; height: 120px; margin-left: -65px; margin-top: -60px; transform: translateY(-10px); transform-style: preserve-3d; }
.black-wrap .face { background: rgba(25, 25, 25, 0.98); border: 1px solid #000; box-shadow: inset 0 0 30px rgba(255,255,255,0.1); }
.black-wrap .front  { width: 130px; height: 120px; transform: rotateY(0deg) translateZ(65px); }
.black-wrap .back   { width: 130px; height: 120px; transform: rotateY(180deg) translateZ(65px); }
.black-wrap .right  { width: 130px; height: 120px; transform: rotateY(90deg) translateZ(65px); left: 0; top:0; }
.black-wrap .left   { width: 130px; height: 120px; transform: rotateY(-90deg) translateZ(65px); left: 0; top:0; }
.black-wrap .top    { width: 130px; height: 130px; transform: rotateX(90deg) translateZ(60px); top: -5px; left: 0; }
.black-wrap .bottom { width: 130px; height: 130px; transform: rotateX(-90deg) translateZ(60px); top: -5px; left: 0; }

/* Miniboxes para el palet visible 60x60x60 */
.mini-carton { width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; transform-style: preserve-3d; }
.mini-carton .face { background: #dcb88b; border: 1px solid #b59267; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); }
.mini-carton .front  { width: 60px; height: 60px; transform: rotateY(0deg) translateZ(30px); }
.mini-carton .back   { width: 60px; height: 60px; transform: rotateY(180deg) translateZ(30px); }
.mini-carton .right  { width: 60px; height: 60px; transform: rotateY(90deg) translateZ(30px); left: 0; top:0; }
.mini-carton .left   { width: 60px; height: 60px; transform: rotateY(-90deg) translateZ(30px); left: 0; top:0; }
.mini-carton .top    { width: 60px; height: 60px; transform: rotateX(90deg) translateZ(30px); top: 0; left: 0; }
.mini-carton .bottom { width: 60px; height: 60px; transform: rotateX(-90deg) translateZ(30px); top: 0; left: 0; }

/* ==========================================================================
   MANUAL DE ESTILO GRUPAMAR 2026 - GEOMETRÍA, CURVAS Y FONDOS
   ========================================================================== */

/* 1. Forzar las esquinas redondeadas oficiales (32px) en todas las tarjetas principales */
.bg-white.p-6, 
.rounded-2xl, 
.rounded-3xl, 
.bg-white.rounded-2xl, 
.bg-white.rounded-3xl {
    border-radius: 32px !important; /* Cumple la regla de ~30px y es múltiplo de 4 */
}

/* 2. Forzar el Fondo Gris Claro oficial (#F6F6F6) para bloques secundarios, fichas y tarjetas de datos */
.bg-slate-50, 
.bg-slate-100, 
.bg-slate-50\/50, 
.border-slate-100 {
    background-color: #F6F6F6 !important;
    border-radius: 16px !important; /* Elemento anidado menor, múltiplo de 4 */
}

/* 3. Forzar esquinas redondeadas en todos los botones de la aplicación */
button, 
.btn, 
input[type="button"], 
input[type="submit"] {
    border-radius: 12px !important; /* Esquinas suaves alineadas con el manual, múltiplo de 4 */
    transition: all 0.2s ease-in-out;
}

/* 4. Forzar que los marcos de imágenes o logos cumplan la norma de redondeo de ~30px (múltiplo de 4) */
img, 
.adr-icon {
    border-radius: 32px !important;
}
/* 5. Inyectar el Naranja Corporativo Oficial (#F75600) en los elementos destacados */
.bg-orange-400, .bg-orange-500, .bg-orange-600 {
    background-color: #F75600 !important;
}
.text-orange-400, .text-orange-500, .text-orange-600 {
    color: #F75600 !important;
}
.border-orange-400, .border-orange-500, .border-orange-600 {
    border-color: #F75600 !important;
}
/* 6. Adaptar los botones principales al fondo de contraste */
.bg-\[\#091197\] {
    background-color: #091197 !important;
    color: #FFFFFF !important;
}
/* 7. Aumentar tamaño SOLO en la Matriz de Segregación (sin romper nada más) */
.overflow-x-auto table.text-center th, 
.overflow-x-auto table.text-center td {
    font-size: 13px !important;
}
.overflow-x-auto table.text-center tbody th {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* 8. Escudo protector de tamaño y letra exclusivo para la Declaración Multimodal */
#multimodal-template,
#multimodal-template * {
    font-family: 'Helvetica', 'Arial', sans-serif !important;
}
#multimodal-template .mm-label { 
    font-size: 7pt !important; 
    line-height: 1.1 !important;
}
#multimodal-template .mm-value,
#multimodal-template .mm-table th, 
#multimodal-template .mm-table td { 
    font-size: 8pt !important; 
    line-height: 1.2 !important;
}
#multimodal-template .mm-title {
    font-size: 14pt !important;
}