/* ============================================================
   MÓDULO 0 — ESTILOS GLOBALES + RESPONSIVE MÓVIL
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
* { font-family: 'Inter', sans-serif; box-sizing: border-box; }

/* ── UTILIDADES ── */
.hidden-view  { display: none !important; }
.fade-in      { animation: fadeIn .2s ease-out forwards; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:#1e293b; }
::-webkit-scrollbar-thumb { background:#334155; border-radius:3px; }

/* ── Ocultar flechas de inputs numéricos ── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }

/* ── SUBMENÚ LATERAL ── */
.submenu       { display: none; }
.submenu.open  { display: block; }
.nav-group-btn { transition: background .15s; }
.nav-sub-item  {
    display:block; width:100%; text-align:left;
    padding:7px 12px 7px 36px; font-size:11px; color:#94a3b8;
    cursor:pointer; border-radius:6px; transition:all .15s;
    text-transform:uppercase; letter-spacing:.04em; font-weight:600;
    background:none; border:none;
}
.nav-sub-item:hover  { background:#1e293b; color:#e2e8f0; }
.nav-sub-item.active { color:#38bdf8; background:#0f2744; }

/* ── TOPBAR ADMIN ── */
.top-dropdown { position:relative; display:inline-block; }
.top-dropdown-menu {
    display:none; position:absolute; top:100%; left:0; z-index:500;
    background:#1e293b; border:1px solid #334155; border-radius:10px;
    min-width:180px; box-shadow:0 8px 32px rgba(0,0,0,.4); padding:6px;
    margin-top:4px;
}
.top-dropdown:hover .top-dropdown-menu { display:block; }
.top-dropdown-menu .section-title {
    padding:6px 10px 4px; font-size:9px; font-weight:900; text-transform:uppercase;
    letter-spacing:.08em; color:#64748b; border-top:1px solid #334155; margin-top:2px;
}
.top-dropdown-menu .section-title:first-child { border-top:none; margin-top:0; }
.top-dropdown-menu a,
.top-dropdown-menu button {
    display:flex; align-items:center; gap:7px;
    width:100%; text-align:left; padding:7px 10px;
    font-size:12px; font-weight:700; color:#cbd5e1;
    background:none; border:none; cursor:pointer; border-radius:6px;
    transition:background .12s;
}
.top-dropdown-menu a:hover,
.top-dropdown-menu button:hover { background:#334155; color:#fff; }
.topbar-btn {
    display:flex; align-items:center; gap:5px;
    background:none; border:none; color:#94a3b8; cursor:pointer;
    padding:5px 10px; border-radius:6px; font-size:12px; font-weight:700;
    transition:all .15s; white-space:nowrap;
}
.topbar-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
.topbar-btn svg  { width:14px; height:14px; flex-shrink:0; }

/* ── CARDS HOME ── */
.home-card {
    background:#fff; border-radius:14px; border:1px solid #e2e8f0;
    padding:28px 24px; display:flex; align-items:flex-start; gap:20px;
    cursor:pointer; transition:all .2s; box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.home-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.1); border-color:#bae6fd; }
.home-card-icon { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; }
.home-card h3 { font-size:15px; font-weight:800; color:#0f172a; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.home-card p { font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:.04em; line-height:1.5; }

/* ── LIENZO ── */
.lienzo { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:400px; text-align:center; gap:16px; }
.lienzo-icon { font-size:56px; }
.lienzo h2   { font-size:20px; font-weight:800; color:#1e293b; text-transform:uppercase; letter-spacing:.06em; }
.lienzo p    { font-size:13px; color:#64748b; max-width:360px; line-height:1.6; }
.lienzo-badge { background:#f0f9ff; border:1px solid #bae6fd; color:#0369a1; padding:4px 14px; border-radius:20px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }

/* ── BADGES ESTADO ── */
.badge-estado        { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:10px; font-weight:700; text-transform:uppercase; }
.badge-documentacion { background:#f1f5f9; color:#475569; }
.badge-bodega-china  { background:#fef9c3; color:#854d0e; }
.badge-cargue        { background:#ffedd5; color:#9a3412; }
.badge-transito      { background:#dbeafe; color:#1e40af; }
.badge-llegada       { background:#e0f2fe; color:#0369a1; }
.badge-vuelo         { background:#ede9fe; color:#5b21b6; }
.badge-aduana        { background:#fce7f3; color:#9d174d; }
.badge-bodega-bog    { background:#dcfce7; color:#166534; }
.badge-reparto       { background:#fef3c7; color:#92400e; }
.badge-entregado     { background:#d1fae5; color:#065f46; }

/* ── IMPRESIÓN ── */
body.preview-mode #app-wrapper { display:none !important; }
body.preview-mode #preview-controls { display:flex !important; }
body.preview-mode #print-area { display:flex !important; flex-direction:column; align-items:center; gap:20px; padding:60px 0; background:#334155; min-height:100vh; }
#print-area { display:none; }
#preview-controls { display:none; }
@media print {
    body * { visibility:hidden; }
    html, body { background:transparent !important; margin:0 !important; padding:0 !important; }
    #print-area, #print-area * { visibility:visible; }
    #print-area { position:absolute !important; left:0 !important; top:0 !important; width:4in !important; display:block !important; }
    @page { size:4in 6in; margin:0; }
    .etiqueta { page-break-after:always !important; page-break-inside:avoid !important; margin:0 !important; box-shadow:none !important; }
    .etiqueta:last-child { page-break-after:avoid !important; }
}

/* ── ETIQUETA ── */
.etiqueta { width:4in; height:6in; border:2px solid #000; box-sizing:border-box; display:flex; flex-direction:column; background:#fff; font-family:Arial,Helvetica,sans-serif; color:#000; overflow:hidden; }
.etq-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:2px solid #000; flex-shrink:0; }
.etq-header img { height:40px; object-fit:contain; }
.etq-header-tipo { font-size:28px; font-weight:400; }
.etq-consignee { padding:7px 12px 10px; border-bottom:2px solid #000; flex-shrink:0; }
.etq-warehouse-block { padding:6px 12px 0; border-bottom:2px solid #000; flex-shrink:0; }
.etq-wh-toprow { display:flex; justify-content:space-between; align-items:baseline; }
.etq-big-code { text-align:center; font-size:68px; font-weight:900; letter-spacing:-2px; line-height:.9; margin:3px 0 5px; }
.etq-barcode-main { display:block; width:100%; padding:0 4px 6px; box-sizing:border-box; }
.etq-barcode-main svg { display:block; width:100%; height:65px; }
.etq-destination { padding:5px 12px 4px; border-bottom:2px solid #000; flex-shrink:0; }
.etq-dest-value { text-align:center; font-size:34px; font-weight:400; line-height:1.15; }
.etq-metrics { display:flex; border-bottom:2px solid #000; flex-shrink:0; }
.etq-metrics .etq-col { flex:1; padding:5px 8px; text-align:center; }
.etq-metrics .etq-col:not(:last-child) { border-right:2px solid #000; }
.etq-itemdesc { display:flex; border-bottom:2px solid #000; flex-shrink:0; }
.etq-itemdesc .etq-col { flex:1; padding:5px 8px; text-align:center; }
.etq-itemdesc .etq-col:first-child { border-right:2px solid #000; flex:0 0 38%; }
.etq-field-label { font-size:10px; font-weight:bold; text-transform:uppercase; margin-bottom:2px; }
.etq-field-value { font-size:12px; font-weight:bold; text-transform:uppercase; line-height:1.25; white-space:pre-line; }
.etq-field-value.lg { font-size:13px; }
.etq-footer { padding:6px 12px 5px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:1; }
.etq-barcode-foot { display:block; width:92%; margin:0 auto 2px; }
.etq-barcode-foot svg { display:block; width:100%; height:48px; }
.etq-footer-code { font-size:11px; font-weight:bold; letter-spacing:.5px; margin-bottom:1px; }
.etq-footer-page { font-size:15px; font-weight:bold; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE MÓVIL — Diseño completamente separado
   Breakpoint: 768px
══════════════════════════════════════════════════════════ */

/* ── Botón hamburguesa (solo móvil) ── */
#mob-menu-btn {
    display: none;
    position: fixed; top: 12px; left: 12px; z-index: 1000;
    background: #0f172a; color: #fff; border: none;
    width: 40px; height: 40px; border-radius: 10px;
    font-size: 20px; cursor: pointer; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* ── Overlay oscuro ── */
#mob-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 199;
}
#mob-overlay.open { display: block; }

/* ── Topbar móvil oculto en desktop ── */
#topbar-mobile { display: none; }

@media (max-width: 768px) {

    /* ── ROOT: evitar scroll horizontal ── */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ── Desktop topbar: solo en pantallas grandes ── */
    #topbar { display: none !important; }

    /* ── Topbar móvil: visible solo en móvil ── */
    #topbar-mobile { display: flex !important; }

    /* ── Botón hamburguesa nativo: oculto (reemplazado por topbar-mobile) ── */
    #mob-menu-btn { display: none !important; }

    /* ── App wrapper: sin overflow horizontal ── */
    #app-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ── Layout principal ── */
    .flex.flex-1.overflow-hidden {
        position: relative;
        overflow-x: hidden !important;
    }

    /* ── Sidebar: drawer lateral ── */
    aside.w-56 {
        position: fixed !important;
        top: 0 !important; left: 0 !important; bottom: 0 !important;
        width: 260px !important;
        z-index: 200 !important;
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto !important;
        height: 100vh !important;
    }
    aside.w-56.mob-open {
        transform: translateX(0) !important;
    }

    /* ── Main: full width, sin overflow horizontal ── */
    main {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        flex: 1 !important;
    }
    main .flex-1.overflow-y-auto,
    #views-container {
        height: calc(100vh - 50px) !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ── Header compacto ── */
    header.h-14 {
        padding-left: 12px !important;
        height: 50px !important;
        padding-right: 8px !important;
    }
    #header-title {
        font-size: 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 120px);
    }

    /* ── Vistas: padding reducido + sin overflow ── */
    .app-view {
        padding: 12px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* ── Tablas: scroll horizontal contenido con swipe ── */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        max-width: calc(100vw - 24px);
        overflow-x: auto !important;
    }

    /* ── Cards home: 1 columna ── */
    #view-home .grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .home-card { padding: 16px !important; gap: 12px !important; }
    .home-card-icon { width: 44px !important; height: 44px !important; font-size: 18px !important; }
    .home-card h3 { font-size: 12px !important; }
    .home-card p  { font-size: 10px !important; }

    /* ── Formulario etiquetas ── */
    .grid.grid-cols-2.md\:grid-cols-4,
    .grid.grid-cols-2.md\:grid-cols-3 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .xl\:grid-cols-4 { grid-template-columns: 1fr !important; }
    .xl\:col-span-3, .xl\:col-span-1 { grid-column: span 1 !important; }

    /* ── Pie tabla etiquetas ── */
    .bg-slate-900.p-5 {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    /* ── Modales: full width, bottom sheet ── */
    .max-w-lg, .max-w-md, .max-w-sm, .max-w-2xl {
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }
    .fixed.inset-0.flex.items-center {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .fixed.inset-0.flex.items-center > div {
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-y: auto;
    }

    /* ── Textos muy pequeños: legibles en móvil ── */
    .text-\[9px\]  { font-size: 10px !important; }
    .text-\[10px\] { font-size: 11px !important; }

    /* ── Botones táctiles más grandes ── */
    .btn-camara, .btn-subir {
        min-height: 44px !important;
        font-size: 13px !important;
    }

    /* ── Barras fijas de totales: compactas en móvil ── */
    #almacen-totales,
    #db-totales {
        padding: 8px 12px !important;
    }
    #almacen-totales .flex,
    #db-totales .flex {
        gap: 12px !important;
        flex-wrap: wrap !important;
        justify-content: space-around !important;
    }
    #almacen-totales p.text-lg,
    #db-totales p.text-lg {
        font-size: 15px !important;
    }

    /* ── Vista WR Info: botones en grid ── */
    #wr-info-body .flex.flex-wrap.gap-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    #wr-info-body .flex.flex-wrap.gap-2 button {
        justify-content: center !important;
        font-size: 10px !important;
        padding: 8px 6px !important;
    }

    /* ── Stats grid WR Info ── */
    #wr-info-body .grid-cols-2.sm\:grid-cols-3.md\:grid-cols-5 {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ── Cards remitente/destinatario/detalles ── */
    #wr-info-body .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* ── Recepción rápida: centrada y compacta ── */
    #view-recepcion-rapida .max-w-lg {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* ── Paginación: centrada ── */
    #alm-paginacion, #db-paginacion {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #alm-paginas, #db-paginas {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* ── Ocultar columnas menos críticas en tablas ── */
    .mob-hide { display: none !important; }

    /* ── Tabla En Almacén / Listar WR: columnas clave ── */
    #almacen-table-body td:nth-child(4),  /* Agente */
    #almacen-table-body td:nth-child(5),  /* Fecha */
    #db-table-body td:nth-child(4),       /* Agente */
    #db-table-body td:nth-child(5) {      /* Fecha */
        display: none !important;
    }
    #almacen-table-body .alm-admin-col,
    .alm-admin-col { display: none !important; }

    /* ── Toast: arriba centrado en móvil para no quedar tapado ── */
    #toast-container {
        top: 70px !important;
        bottom: auto !important;
        right: 12px !important;
        left: 12px !important;
        pointer-events: none;
    }
    #toast-container > div {
        width: 100% !important;
        max-width: 100% !important;
        pointer-events: auto;
    }
}

/* ── Tablet ── */
@media (max-width: 1024px) and (min-width: 769px) {
    aside.w-56 { width: 200px !important; }
    .grid.grid-cols-1.md\\:grid-cols-2.xl\\:grid-cols-4 { grid-template-columns: repeat(2,1fr) !important; }


    /* ── Adicionales ── */
    aside.w-56 .h-16 { height: 52px !important; padding: 8px !important; }

}

/* ── Mejoras adicionales móvil ── */


/* ── Panel Admin Móvil ── */
.mob-admin-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(30,41,59,1);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    text-align: left;
    transition: background 0.15s;
    width: 100%;
}
.mob-admin-item:hover, .mob-admin-item:active {
    background: rgba(51,65,85,1);
    color: #fff;
}