@import '../../../node_modules/@tabler/core/dist/css/tabler.min.css';

:root {
    /* One Team Logistics brand palette (Manual de identidad 2026) */
    --marca-azul-marino: #011f30;
    --marca-azul-corporativo: #004a7c;
    --marca-azul-cielo: #009ada;
    --marca-azul-hielo: #d8edff;
    --marca-blanco: #ffffff;
    --marca-fuente-titulos: 'Jost', 'Futura', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --marca-fuente-textos: 'PT Serif', Georgia, serif;

    --color-primario: var(--marca-azul-cielo);
    --color-primario-hover: #0087c0;
    --color-corporativo: var(--marca-azul-corporativo);
    --color-grafica-4: #7fcdee;
    --color-acento: var(--marca-azul-cielo);
    --color-sidebar-bg: var(--marca-azul-marino);
    --color-sidebar-texto: #a9c9de;
    --color-sidebar-activo: var(--marca-azul-cielo);
    --color-sidebar-hover: #0b3550;
    --color-navbar-bg: #ffffff;
    --color-body-bg: #f3f9ff;
    --color-texto-principal: var(--marca-azul-marino);
    --color-texto-secundario: #4f6475;
    --color-borde: #d5e4f0;
    --color-peligro: #ef4444;
    --color-exito: #22c55e;
    --color-advertencia: #f59e0b;
    --color-info: #009ada;
    /* WMSPRO: location occupancy */
    --color-ubic-libre: #22c55e;
    --color-ubic-ocupada: #f59e0b;
    --color-ubic-bloqueada: #ef4444;
    --color-ubic-libre-fondo: #dcfce7;
    --color-ubic-libre-texto: #166534;
    --color-ubic-ocupada-fondo: #fef3c7;
    --color-ubic-ocupada-texto: #92400e;
    --color-ubic-bloqueada-fondo: #fee2e2;
    --color-ubic-bloqueada-texto: #991b1b;
    --color-ubic-inactiva: #b6c3cf;
    --color-ubic-inactiva-fondo: #eef2f6;
    --color-ubic-inactiva-texto: #5b6b7a;
    /* WMSPRO: barcode template fields */
    --color-campo-parte: #009ada;
    --color-campo-parte-fondo: #d8edff;
    --color-campo-lote: #7c3aed;
    --color-campo-lote-fondo: #ede5fd;
    --color-campo-cantidad: #d97706;
    --color-campo-cantidad-fondo: #fdf0dc;
    --color-campo-seleccion: #011f30;
    --color-campo-seleccion-fondo: #fff7c2;
    --color-preview-celda: #f3f9ff;
    --color-camara-fondo: #000000;
    --color-superficie: #ffffff;
    /* Recepcion */
    --color-recepcion-abierta: #009ada;
    --color-recepcion-aceptada: #22c55e;
    --color-recepcion-cancelada: #64748b;
    --color-escaner-ok: #22c55e;
    --color-escaner-ok-fondo: #ecfdf3;
    --color-escaner-error: #ef4444;
    --color-escaner-error-fondo: #fef2f2;
    --color-immex-fondo: #d8edff;
    --color-revision: #f97316;
    /* Client badges (automatic palette) */
    --color-cliente-1: #009ada;
    --color-cliente-2: #7c3aed;
    --color-cliente-3: #d97706;
    --color-cliente-4: #059669;
    --color-cliente-5: #db2777;
    --color-cliente-6: #004a7c;
    --color-cliente-7: #65a30d;
    --color-cliente-8: #9333ea;
    --color-badge-texto-oscuro: #011f30;
    /* Quality */
    --color-calidad-approved: #22c55e;
    --color-calidad-hold: #ef4444;
    /* Picklist statuses (Envios) */
    --color-picklist-abierta: #009ada;
    --color-picklist-trabajando: #f59e0b;
    --color-picklist-verificacion: #f97316;
    --color-picklist-preparada: #14b8a6;
    --color-picklist-cargada: #004a7c;
    --color-picklist-despachada: #9333ea;
    --color-picklist-recibida: #16a34a;
    --color-picklist-cancelada: #94a3b8;

    /* Facturacion: pre-invoice status */
    --color-prefactura-borrador: #f59e0b;
    --color-prefactura-generada: #009ada;
    --color-prefactura-contabilidad: #16a34a;
    --color-prefactura-cancelada: #94a3b8;
    --color-prefactura-negativo: #dc2626;
    /* Picking (Envios -> Surtido) */
    --color-surtido-completa: #16a34a;
    --color-surtido-completa-fondo: #f0fdf4;
    --color-surtido-parcial: #f59e0b;
    --color-surtido-parcial-fondo: #fffbeb;
    --color-surtido-fondo: #ffffff;
    /* Client dashboard (portal) */
    --color-dc-hero-1: #011f30;
    --color-dc-hero-2: #004a7c;
    --color-dc-hero-3: #009ada;
    --color-dc-hero-texto: #ffffff;
    --color-dc-hero-texto-suave: rgba(255, 255, 255, 0.75);
    --color-dc-hero-chip: rgba(255, 255, 255, 0.16);
    --color-dc-vivo: #4ade80;
    --color-dc-kpi-1: #009ada;
    --color-dc-kpi-2: #7c3aed;
    --color-dc-kpi-3: #004a7c;
    --color-dc-kpi-4: #d97706;
    --color-dc-kpi-5: #f97316;
    --color-dc-kpi-6: #16a34a;
    --color-dc-disponible: #16a34a;
    --color-dc-comprometida: #f59e0b;
    --color-dc-hold: #ef4444;
    --color-dc-entradas: #009ada;
    --color-dc-salidas: #f97316;
    --color-dc-edad-1: #22c55e;
    --color-dc-edad-2: #eab308;
    --color-dc-edad-3: #f97316;
    --color-dc-edad-4: #ef4444;
    --color-dc-barra-fondo: #e6f2fd;
    --color-dc-sombra: rgba(1, 31, 48, 0.12);
    /* Cyclic counts (Control de inventario) */
    --color-conteo-discrepancia: #dc2626;
    --color-conteo-discrepancia-fondo: #fef2f2;
    --color-conteo-posterior: #c2410c;
    --color-conteo-posterior-fondo: #fff7ed;
    --color-texto-invertido: #ffffff;
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 64px;
    --transition-speed: 0.25s;
}

/* ===== TABLER OVERRIDES (brand) ===== */
:root,
[data-bs-theme=light] {
    --tblr-primary: var(--marca-azul-cielo);
    --tblr-primary-rgb: 0, 154, 218;
    --tblr-primary-darken: var(--color-primario-hover);
    --tblr-primary-fg: #ffffff;
    --tblr-primary-text-emphasis: var(--marca-azul-corporativo);
    --tblr-azure: var(--marca-azul-cielo);
    --tblr-azure-rgb: 0, 154, 218;
    --tblr-blue: var(--marca-azul-corporativo);
    --tblr-blue-rgb: 0, 74, 124;
    --tblr-dark: var(--marca-azul-marino);
    --tblr-dark-rgb: 1, 31, 48;
    --tblr-info: var(--marca-azul-cielo);
    --tblr-info-rgb: 0, 154, 218;
    --tblr-link-color: var(--marca-azul-corporativo);
    --tblr-link-color-rgb: 0, 74, 124;
    --tblr-link-hover-color: var(--marca-azul-cielo);
    --tblr-link-hover-color-rgb: 0, 154, 218;
    --tblr-body-color: var(--color-texto-principal);
    --tblr-body-color-rgb: 1, 31, 48;
    --tblr-emphasis-color: var(--marca-azul-marino);
    --tblr-heading-color: var(--marca-azul-marino);
    --tblr-body-bg: var(--color-body-bg);
    --tblr-bg-surface: #ffffff;
    --tblr-border-color: var(--color-borde);
    --tblr-font-sans-serif: var(--marca-fuente-titulos);
    --tblr-body-font-family: var(--marca-fuente-titulos);
    --tblr-focus-ring-color: rgba(0, 154, 218, 0.25);
}

body {
    font-family: var(--marca-fuente-titulos);
    color: var(--color-texto-principal);
    background-color: var(--color-body-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .card-title, .modal-title {
    font-family: var(--marca-fuente-titulos);
    color: var(--marca-azul-marino);
    font-weight: 500;
}

/* Long texts (manual, descriptions): PT Serif */
.texto-largo,
.markdown,
#doc_content {
    font-family: var(--marca-fuente-textos);
}
.markdown h1, .markdown h2, .markdown h3, .markdown h4,
#doc_content h1, #doc_content h2, #doc_content h3, #doc_content h4,
#doc_content th, #doc_content code {
    font-family: var(--marca-fuente-titulos);
}
#doc_content code { font-family: var(--tblr-font-monospace); }

/* Buttons: pill shape (brand) */
.btn:not(.btn-icon):not(.input-group .btn):not(.btn-group .btn):not(.btn-group-vertical .btn) {
    border-radius: var(--tblr-border-radius-pill);
}
.btn-primary {
    --tblr-btn-bg: var(--marca-azul-cielo);
    --tblr-btn-border-color: var(--marca-azul-cielo);
    --tblr-btn-hover-bg: var(--color-primario-hover);
    --tblr-btn-hover-border-color: var(--color-primario-hover);
    --tblr-btn-active-bg: var(--marca-azul-corporativo);
    --tblr-btn-active-border-color: var(--marca-azul-corporativo);
    --tblr-btn-color: #ffffff;
    --tblr-btn-hover-color: #ffffff;
}
.btn-dark {
    --tblr-btn-bg: var(--marca-azul-marino);
    --tblr-btn-border-color: var(--marca-azul-marino);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--marca-azul-cielo);
    box-shadow: 0 0 0 0.25rem rgba(0, 154, 218, 0.2);
}
.form-check-input:checked {
    background-color: var(--marca-azul-cielo);
    border-color: var(--marca-azul-cielo);
}

.nav-tabs .nav-link.active {
    color: var(--marca-azul-corporativo);
    border-bottom-color: var(--marca-azul-cielo);
}

.page-item.active .page-link,
.dt-paging .page-item.active .page-link {
    background-color: var(--marca-azul-cielo);
    border-color: var(--marca-azul-cielo);
}

.table thead th {
    color: var(--marca-azul-corporativo);
    background-color: var(--marca-azul-hielo);
}

/* SweetAlert2 */
.swal2-popup { font-family: var(--marca-fuente-titulos); border-radius: 12px; }
.swal2-title { color: var(--marca-azul-marino); font-weight: 500; }
.swal2-styled { border-radius: var(--tblr-border-radius-pill) !important; }
.swal2-styled.swal2-confirm { background-color: var(--marca-azul-cielo); }
.swal2-styled.swal2-cancel { background-color: var(--marca-azul-marino); }

/* Flatpickr */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--marca-azul-cielo);
    border-color: var(--marca-azul-cielo);
}

/* ===== SIDEBAR ===== */
.navbar-vertical {
    background-color: var(--color-sidebar-bg) !important;
    width: var(--sidebar-width) !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--transition-speed) ease;
    z-index: 1030;
    border-right: none !important;
}

.navbar-vertical .navbar-brand {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
}

.navbar-vertical .navbar-brand-name {
    transition: opacity var(--transition-speed);
}

/* Brand block: white variant of the logo over navy (Manual 03 Variaciones) */
.sidebar-marca {
    min-height: 64px;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}
.sidebar-marca__globo {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}
.sidebar-marca__texto {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.sidebar-marca__nombre {
    font-family: var(--marca-fuente-titulos);
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    color: var(--marca-blanco);
}
.sidebar-marca__sub {
    font-family: var(--marca-fuente-titulos);
    font-weight: 400;
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    color: var(--marca-blanco);
    margin-top: 4px;
}
.sidebar-marca__sub b {
    font-weight: 600;
    color: var(--marca-azul-cielo);
    letter-spacing: 0.2em;
}

.navbar-vertical .nav-link {
    color: var(--color-sidebar-texto) !important;
    border-radius: 6px;
    margin: 1px 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    white-space: nowrap;
    transition: background-color var(--transition-speed);
}

.navbar-vertical .nav-link:hover {
    background-color: var(--color-sidebar-hover) !important;
    color: #ffffff !important;
}

.navbar-vertical .nav-link.active {
    background-color: var(--color-sidebar-activo) !important;
    color: #ffffff !important;
}

.navbar-vertical .nav-link .nav-link-icon svg {
    color: var(--color-sidebar-texto);
    flex-shrink: 0;
}

.navbar-vertical .nav-link:hover .nav-link-icon svg,
.navbar-vertical .nav-link.active .nav-link-icon svg {
    color: #ffffff !important;
}

.navbar-vertical .nav-category {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-acento);
    padding: 12px 18px 4px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--transition-speed);
}

.navbar-vertical .nav-link .nav-link-icon,
.navbar-vertical .nav-link .dropdown-arrow {
    color: inherit !important;
    opacity: 1;
}

.navbar-vertical .nav-submenu .nav-link.active {
    background-color: rgba(0, 154, 218, 0.18) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 var(--marca-azul-cielo);
}

.navbar-vertical .nav-submenu .nav-link {
    font-size: 0.875rem;
    padding: 5px 10px 5px 42px !important;
}

/* ===== SIDEBAR COLAPSADO ===== */
body.sidebar-collapsed .navbar-vertical {
    width: var(--sidebar-collapsed-width) !important;
}

body.sidebar-collapsed .navbar-vertical .nav-link-title,
body.sidebar-collapsed .navbar-vertical .navbar-brand-name,
body.sidebar-collapsed .navbar-vertical .nav-category,
body.sidebar-collapsed .navbar-vertical .nav-submenu,
body.sidebar-collapsed .navbar-vertical .dropdown-arrow {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

body.sidebar-collapsed .navbar-vertical .nav-link {
    justify-content: center;
    padding: 8px;
    margin: 2px auto;
    width: 44px;
}

body.sidebar-collapsed .navbar-vertical .navbar-brand {
    justify-content: center;
    padding: 0;
}

body.sidebar-collapsed .navbar-vertical .sidebar-marca__texto {
    display: none;
}

body.sidebar-collapsed .page-wrapper {
    margin-left: var(--sidebar-collapsed-width) !important;
}

/* ===== LAYOUT PRINCIPAL ===== */
.page-wrapper {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    background-color: var(--color-body-bg);
    transition: margin-left var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
}

.page-body {
    flex: 1;
    padding: 1.5rem 0;
}

/* ===== NAVBAR TOP ===== */
.navbar-top {
    background-color: var(--color-navbar-bg) !important;
    border-bottom: 1px solid var(--color-borde) !important;
    position: sticky;
    top: 0;
    z-index: 1020;
    padding: 0.5rem 1.5rem;
}

/* ===== CARDS ===== */
.card {
    border: 1px solid var(--color-borde);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-card {
    border-left: 4px solid var(--color-primario);
}

.stat-card .stat-card__value {
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--marca-azul-corporativo);
}

.stat-card .stat-card__label {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== BOTÓN COLAPSAR ===== */
#btn_toggle_sidebar {
    background: none;
    border: none;
    color: var(--color-texto-secundario);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background-color 0.15s;
}

#btn_toggle_sidebar:hover {
    background-color: var(--color-body-bg);
}

/* ===== LOGIN ===== */
.page-login {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background-color: var(--marca-azul-marino);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

/* Brand globe as background graphic (Manual: cover) */
.page-login__globo {
    position: absolute;
    right: -14vmin;
    top: 50%;
    width: 90vmin;
    height: 90vmin;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.login-card .card-body {
    padding: 2.5rem;
}

.login-card__logo {
    width: 150px;
    height: auto;
}

.login-card__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--marca-azul-cielo);
}

.login-card__titulo {
    font-weight: 500;
    color: var(--marca-azul-marino);
}

.login-card__lema {
    font-family: var(--marca-fuente-textos);
    color: var(--color-texto-secundario);
    font-size: 0.95rem;
}

.page-login__pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--color-sidebar-texto);
    z-index: 1;
}

@media (max-width: 575.98px) {
    .login-card .card-body { padding: 1.75rem; }
    .page-login__globo { opacity: 0.35; }
}


/* ===== TOM SELECT ===== */
.ts-wrapper {
    position: relative;
}

.ts-wrapper.dropdown-active {
    z-index: 50;
}

.ts-dropdown {
    background-color: #ffffff !important;
    border: 1px solid var(--color-borde);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 9999;
}

.ts-dropdown .option {
    color: var(--color-texto-principal);
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: var(--color-primario);
    color: #ffffff;
}

.ts-dropdown .option.selected {
    background-color: rgba(0, 154, 218, 0.12);
    color: var(--color-primario);
}

.ts-wrapper.single .ts-input,
.ts-wrapper.multi .ts-input {
    background-color: #ffffff;
}

/* ===== AJAX PROGRESS BAR ===== */
#ajax-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--color-primario);
    z-index: 9999;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(0,154,218,0.6);
    opacity: 0;
    transition: none;
    pointer-events: none;
}
#ajax-loader.loading {
    opacity: 1;
    width: 75%;
    transition: width 3s cubic-bezier(0.1, 0.05, 0, 1);
}
#ajax-loader.done {
    opacity: 1;
    width: 100%;
    transition: width 0.15s ease;
}
#ajax-loader.hide {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
    .navbar-vertical {
        transform: translateX(-100%);
        transition: transform var(--transition-speed) ease, width var(--transition-speed) ease;
    }

    .navbar-vertical.show {
        transform: translateX(0);
    }

    .page-wrapper {
        margin-left: 0 !important;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1025;
    }

    .sidebar-overlay.show {
        display: block;
    }
}

/* ===== WMSPRO ===== */

/* Webcam capture (admin_usuarios) */
.usuario-camara {
    background: var(--color-camara-fondo);
    border-radius: 8px;
    overflow: hidden;
    max-width: 360px;
}
.usuario-camara__video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Location metrics (wmspro_ubicaciones) */
.ubicaciones-metrica--libre     { --metrica-color: var(--color-ubic-libre); }
.ubicaciones-metrica--ocupada   { --metrica-color: var(--color-ubic-ocupada); }
.ubicaciones-metrica--bloqueada { --metrica-color: var(--color-ubic-bloqueada); }
.ubicaciones-metrica { border-top: 3px solid var(--metrica-color); }
.ubicaciones-metrica__pct { color: var(--metrica-color); }
.ubicaciones-metrica__barra { background-color: var(--metrica-color) !important; }

.ubicacion-badge { color: var(--color-texto-invertido) !important; min-width: 70px; }
.ubicacion-badge--0 { background-color: var(--color-ubic-libre) !important; }
.ubicacion-badge--1 { background-color: var(--color-ubic-ocupada) !important; }
.ubicacion-badge--2 { background-color: var(--color-ubic-bloqueada) !important; }

/* Bulk generator preview */
.ubicaciones-preview {
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    max-height: 420px;
    overflow: auto;
    padding: 8px;
}
.ubicaciones-preview__rack { margin-bottom: 12px; }
.ubicaciones-preview__titulo {
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-texto-secundario);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ubicaciones-preview__nivel {
    display: flex;
    gap: 3px;
    margin-bottom: 3px;
    align-items: center;
}
.ubicaciones-preview__etiqueta {
    width: 34px;
    flex-shrink: 0;
    font-size: .7rem;
    color: var(--color-texto-secundario);
}
.ubicaciones-preview__area { display: flex; flex-wrap: wrap; gap: 4px; }
.ubicaciones-preview__celda {
    min-width: 30px;
    padding: 3px 4px;
    font-size: .7rem;
    text-align: center;
    font-family: var(--tblr-font-monospace);
    background: var(--color-preview-celda);
    border: 1px solid var(--color-borde);
    border-radius: 3px;
}
.ubicaciones-preview__celda--ancha { min-width: 80px; }

/* Visual location map (wmspro_ubicaciones -> Mapa) */
.mapa-ubicaciones {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}
.mapa-pasillo-btn.active {
    background-color: var(--marca-azul-cielo);
    border-color: var(--marca-azul-cielo);
    color: var(--marca-blanco);
}
.mapa-rack {
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-superficie);
}
.mapa-rack__cab {
    background: var(--marca-azul-corporativo);
    color: var(--marca-blanco);
    text-align: center;
    padding: 6px 12px;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.2;
}
.mapa-rack__resumen {
    display: block;
    font-weight: 400;
    font-size: .7rem;
    opacity: .85;
}
.mapa-rack__cuerpo { padding: 10px 12px 12px; }
.mapa-rack__nivel {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.mapa-rack__nivel:last-child { margin-bottom: 0; }
.mapa-rack__etq {
    width: 26px;
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-texto-secundario);
    text-align: right;
}
.mapa-rack__hueco { width: 56px; height: 56px; flex-shrink: 0; }
.mapa-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mapa-celda {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: 1px solid;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.1;
    cursor: default;
    transition: transform .1s ease, box-shadow .1s ease;
}
.mapa-celda--clic { cursor: pointer; }
.mapa-celda--clic:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(1, 31, 48, .15);
}
.mapa-celda--ancha { width: auto; min-width: 96px; padding: 0 8px; font-size: .78rem; }
.mapa-celda__tarima {
    font-size: .6rem;
    font-weight: 600;
    font-family: var(--tblr-font-monospace);
    margin-top: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mapa-celda--ancha:has(.mapa-celda__conteo) { min-width: 120px; height: 64px; }
.mapa-celda__conteo {
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: var(--tblr-border-radius-pill);
    background: var(--color-superficie);
    border: 1px solid currentColor;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}
.mapa-celda--libre     { background: var(--color-ubic-libre-fondo);     border-color: var(--color-ubic-libre);     color: var(--color-ubic-libre-texto); }
.mapa-celda--ocupada   { background: var(--color-ubic-ocupada-fondo);   border-color: var(--color-ubic-ocupada);   color: var(--color-ubic-ocupada-texto); }
.mapa-celda--bloqueada { background: var(--color-ubic-bloqueada-fondo); border-color: var(--color-ubic-bloqueada); color: var(--color-ubic-bloqueada-texto); }
.mapa-celda--inactiva  { background: var(--color-ubic-inactiva-fondo);  border-color: var(--color-ubic-inactiva);  color: var(--color-ubic-inactiva-texto); border-style: dashed; }
.mapa-leyenda__item {
    border: 1px solid;
    border-radius: var(--tblr-border-radius-pill);
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 600;
}
.mapa-vacio {
    width: 100%;
    text-align: center;
    padding: 40px 16px;
    color: var(--color-texto-secundario);
}

/* Barcode templates (wmspro_plantillas_codigos) */
.plantilla-seccion {
    border: 1px solid var(--color-borde);
    border-left: 3px solid var(--color-borde);
    border-radius: 6px;
    padding: 12px;
    margin-top: 14px;
}
.plantilla-seccion--parte    { border-left-color: var(--color-campo-parte); }
.plantilla-seccion--lote     { border-left-color: var(--color-campo-lote); }
.plantilla-seccion--cantidad { border-left-color: var(--color-campo-cantidad); }
.plantilla-seccion__titulo {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: 8px;
    color: var(--color-texto-principal);
}
.plantilla-probador {
    position: sticky;
    top: 0;
    background: var(--color-body-bg);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 14px;
}

.codigo-caracteres {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
    user-select: none;
}
.codigo-char {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 20px;
    border: 1px solid var(--color-borde);
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.1;
    padding: 1px 2px;
}
.codigo-char small { font-size: .55rem; color: var(--color-texto-secundario); }
.codigo-char b { font-family: var(--tblr-font-monospace); font-size: .8rem; font-weight: 600; }
.codigo-char--espacio b { color: var(--color-texto-secundario); }
.codigo-char--parte    { background: var(--color-campo-parte-fondo);    border-color: var(--color-campo-parte); }
.codigo-char--lote     { background: var(--color-campo-lote-fondo);     border-color: var(--color-campo-lote); }
.codigo-char--cantidad { background: var(--color-campo-cantidad-fondo); border-color: var(--color-campo-cantidad); }
.codigo-char--sel {
    background: var(--color-campo-seleccion-fondo) !important;
    border-color: var(--color-campo-seleccion) !important;
    box-shadow: inset 0 -2px 0 var(--color-campo-seleccion);
}

.codigo-campos { display: flex; flex-wrap: wrap; gap: 4px; }
.codigo-campo {
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .78rem;
    cursor: pointer;
}
.codigo-campo__idx { color: var(--color-texto-secundario); margin-right: 4px; font-size: .7rem; }
.codigo-campo--parte    { background: var(--color-campo-parte-fondo);    border-color: var(--color-campo-parte); }
.codigo-campo--lote     { background: var(--color-campo-lote-fondo);     border-color: var(--color-campo-lote); }
.codigo-campo--cantidad { background: var(--color-campo-cantidad-fondo); border-color: var(--color-campo-cantidad); }
.codigo-campo--sel { outline: 2px solid var(--color-campo-seleccion); }
.codigo-espacio { color: var(--color-texto-secundario); }

.codigo-resultado__fila {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-left: 3px solid var(--color-borde);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: .85rem;
    word-break: break-all;
}
.codigo-resultado__fila > span:first-child { color: var(--color-texto-secundario); white-space: nowrap; }
.codigo-resultado__fila--parte    { border-left-color: var(--color-campo-parte); }
.codigo-resultado__fila--lote     { border-left-color: var(--color-campo-lote); }
.codigo-resultado__fila--cantidad { border-left-color: var(--color-campo-cantidad); }

.btn-asignar { border: 1px solid; background: var(--color-superficie); }
.codigo-asignar--parte    { color: var(--color-campo-parte);    border-color: var(--color-campo-parte); }
.codigo-asignar--lote     { color: var(--color-campo-lote);     border-color: var(--color-campo-lote); }
.codigo-asignar--cantidad { color: var(--color-campo-cantidad); border-color: var(--color-campo-cantidad); }
.codigo-asignar--parte:hover:not(:disabled)    { background: var(--color-campo-parte-fondo); }
.codigo-asignar--lote:hover:not(:disabled)     { background: var(--color-campo-lote-fondo); }
.codigo-asignar--cantidad:hover:not(:disabled) { background: var(--color-campo-cantidad-fondo); }

@media (max-width: 991.98px) {
    .plantilla-probador { position: static; }
}

/* ===== RECEPCION ===== */
.recepcion-estatus { color: var(--color-texto-invertido) !important; }
.recepcion-estatus--0 { background-color: var(--color-recepcion-abierta) !important; }
.recepcion-estatus--1 { background-color: var(--color-recepcion-aceptada) !important; }
.recepcion-estatus--2 { background-color: var(--color-recepcion-cancelada) !important; }

.recepcion-immex {
    background: var(--color-immex-fondo);
    border: 1px solid var(--color-borde);
    border-left: 3px solid var(--color-info);
    border-radius: 6px;
    padding: 12px;
}
.recepcion-immex__titulo { font-weight: 600; font-size: .85rem; margin-bottom: 8px; }

.recepcion-resumen__etq { font-size: .7rem; text-transform: uppercase; font-weight: 600; color: var(--color-texto-secundario); }
.recepcion-resumen__val { font-size: .9rem; font-weight: 500; word-break: break-word; }

/* Scanner */
.escaner__input { font-size: 1.25rem; letter-spacing: .02em; }
.escaner__input:focus { border-color: var(--color-primario); box-shadow: 0 0 0 .2rem var(--color-campo-parte-fondo); }
.escaner-resultado {
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--color-borde);
    border-radius: 6px;
    padding: 10px 12px;
    min-height: 92px;
    background: var(--color-superficie);
}
.escaner-resultado--ok    { border-left-color: var(--color-escaner-ok);    background: var(--color-escaner-ok-fondo); }
.escaner-resultado--error { border-left-color: var(--color-escaner-error); background: var(--color-escaner-error-fondo); }
.escaner-resultado__cab { font-weight: 600; }
.escaner-resultado--ok .escaner-resultado__cab    { color: var(--color-escaner-ok); }
.escaner-resultado--error .escaner-resultado__cab { color: var(--color-escaner-error); }
.escaner-resultado__etq { font-size: .7rem; text-transform: uppercase; color: var(--color-texto-secundario); }
.escaner-resultado__val { font-family: var(--tblr-font-monospace); font-weight: 700; font-size: 1rem; word-break: break-all; }

/* QR reading with the camera */
.camara-qr { border: 1px solid var(--color-borde); border-radius: 6px; padding: 8px; background: var(--color-superficie); }
.camara-qr__visor { position: relative; display: flex; justify-content: center; background: var(--color-camara-fondo); border-radius: 4px; overflow: hidden; }
.camara-qr__video { display: block; width: 100%; max-height: 45vh; object-fit: contain; transition: opacity .15s; }
.camara-qr--leido .camara-qr__video { opacity: .45; }
.camara-qr__dispositivo { width: auto; max-width: 60%; }
.camara-qr__estado { margin-top: 6px; font-size: .85rem; color: var(--color-texto-secundario); word-break: break-word; }
.camara-qr__estado--ok    { color: var(--color-escaner-ok); font-weight: 600; }
.camara-qr__estado--error { color: var(--color-escaner-error); font-weight: 600; }
.camara-qr__lectura { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--color-borde); border-left: 4px solid var(--color-primario); border-radius: 6px; }
.camara-qr__texto { font-weight: 700; font-size: 1.05rem; word-break: break-all; }

.escaner-historial {
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    max-height: 160px;
    overflow-y: auto;
    background: var(--color-superficie);
}
.escaner-historial__item {
    position: relative;
    padding: 4px 64px 4px 8px;
    font-size: .78rem;
    border-bottom: 1px solid var(--color-borde);
    word-break: break-word;
}
.escaner-historial__item--ok i    { color: var(--color-escaner-ok); }
.escaner-historial__item--error i { color: var(--color-escaner-error); }
.escaner-historial__hora { position: absolute; right: 8px; top: 4px; color: var(--color-texto-secundario); font-size: .7rem; }

.tarima-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: .8rem;
    cursor: pointer;
}
.tarima-chip--actual { border-color: var(--color-primario); box-shadow: inset 0 0 0 1px var(--color-primario); background: var(--color-campo-parte-fondo); }
.tarima-chip__det { color: var(--color-texto-secundario); font-size: .72rem; }
.tarima-chip__copia { color: var(--color-primario); }

/* Duplicate pallet / multiple capture */
.copias-tabla { max-height: 45vh; overflow-y: auto; border: 1px solid var(--color-borde); border-radius: 6px; }
.copias-tabla thead th { position: sticky; top: 0; z-index: 1; background: var(--color-superficie); }
.copias-tabla .form-control { min-width: 90px; }
.duplicado-lote {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px;
    border: 1px dashed var(--color-borde);
    border-radius: 6px;
    font-size: .82rem;
}
.duplicado-lote + .duplicado-lote { margin-top: 6px; }

/* Evidence photos */
.recepcion-foto-preview { max-height: 140px; border-radius: 6px; border: 1px solid var(--color-borde); }
.recepcion-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.recepcion-galeria__item {
    position: relative;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-superficie);
}
.recepcion-galeria__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.recepcion-galeria__pie { padding: 6px 8px; font-size: .75rem; }
.recepcion-galeria__borrar { position: absolute; top: 4px; right: 4px; background: var(--color-superficie); }

/* Put-away */
.acomodo-paso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primario);
    color: var(--color-texto-invertido);
    font-size: .75rem;
    margin-right: 6px;
}
.acomodo-info__cab { font-size: .85rem; }

/* Inventory */
.inventario-detalle { padding: 4px 8px 8px 36px; background: var(--color-body-bg); }
.inventario-revision { border-top: 3px solid var(--color-revision); cursor: pointer; }
.inv-toggle { cursor: pointer; }

/* ===== ALMACEN ===== */
.badge-cliente { color: var(--color-texto-invertido) !important; font-weight: 600; }
.badge-cliente--oscuro { color: var(--color-badge-texto-oscuro) !important; }

.calidad-badge { color: var(--color-texto-invertido) !important; min-width: 64px; }
.calidad-badge--approved { background-color: var(--color-calidad-approved) !important; }
.calidad-badge--hold     { background-color: var(--color-calidad-hold) !important; }

.inventario-hold { border-top: 3px solid var(--color-calidad-hold); cursor: pointer; }
.inventario-diferencia {
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--color-borde);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: .85rem;
    background: var(--color-body-bg);
}
.inventario-diferencia--alta { border-left-color: var(--color-escaner-ok);    background: var(--color-escaner-ok-fondo); }
.inventario-diferencia--baja { border-left-color: var(--color-escaner-error); background: var(--color-escaner-error-fondo); }

/* Rack grid (bulk relocation) */
.rack-grid { overflow-x: auto; padding-bottom: 4px; }
.rack-grid__nivel { display: flex; gap: 6px; margin-bottom: 6px; align-items: stretch; }
.rack-grid__etq {
    width: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-texto-secundario);
}
.rack-grid__celda {
    width: 132px;
    min-height: 92px;
    flex-shrink: 0;
    border: 1px dashed var(--color-borde);
    border-radius: 6px;
    padding: 4px;
    background: var(--color-superficie);
    cursor: pointer;
    user-select: none;
}
.rack-grid__celda--over      { border-color: var(--color-primario); background: var(--color-campo-parte-fondo); }
.rack-grid__celda--sel       { border: 2px solid var(--color-campo-seleccion); background: var(--color-campo-seleccion-fondo); }
.rack-grid__celda--cambio    { border: 2px solid var(--color-advertencia); }
.rack-grid__celda--bloqueada { background: var(--color-escaner-error-fondo); cursor: not-allowed; }
.rack-grid__codigo { font-family: var(--tblr-font-monospace); font-size: .68rem; color: var(--color-texto-secundario); }
.rack-grid__pallet {
    margin-top: 3px;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    padding: 3px 4px;
    font-size: .72rem;
    background: var(--color-body-bg);
    cursor: grab;
}
.rack-grid__pallet .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.rack-grid__vacia { margin-top: 18px; text-align: center; font-size: .72rem; color: var(--color-texto-secundario); }

/* ===== ENVIOS ===== */
.picklist-estatus { color: var(--color-texto-invertido) !important; }
.picklist-estatus--abierta      { background-color: var(--color-picklist-abierta) !important; }
.picklist-estatus--trabajando   { background-color: var(--color-picklist-trabajando) !important; }
.picklist-estatus--verificacion { background-color: var(--color-picklist-verificacion) !important; }
.picklist-estatus--preparada    { background-color: var(--color-picklist-preparada) !important; }
.picklist-estatus--cargada      { background-color: var(--color-picklist-cargada) !important; }
.picklist-estatus--despachada   { background-color: var(--color-picklist-despachada) !important; }
.picklist-estatus--recibida     { background-color: var(--color-picklist-recibida) !important; }
.picklist-estatus--cancelada    { background-color: var(--color-picklist-cancelada) !important; }

.picklist-pasos { display: flex; flex-wrap: wrap; gap: 4px; }
.picklist-pasos__paso {
    flex: 1 1 0;
    min-width: 92px;
    text-align: center;
    font-size: .72rem;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid var(--color-borde);
    color: var(--color-texto-secundario);
    background: var(--color-superficie);
}
.picklist-pasos__paso--hecho  { border-color: var(--color-exito); color: var(--color-exito); }
.picklist-pasos__paso--actual { border-color: var(--color-primario); background: var(--color-primario); color: var(--color-texto-invertido); font-weight: 600; }
.picklist-pasos__paso--cancelada { border-color: var(--color-picklist-cancelada); background: var(--color-picklist-cancelada); color: var(--color-texto-invertido); }

.picklist-verificacion__progreso { height: 10px; }
.picklist-verificacion__item--completo { background: var(--color-escaner-ok-fondo); }
.picklist-scan { font-family: var(--tblr-font-monospace); font-size: 1.1rem; }
/* Picking (Envios -> Surtido), handheld / tablet friendly */
.surtido-progreso { position: sticky; top: 0; z-index: 5; }
.surtido-progreso__pct { font-size: 2rem; font-weight: 700; line-height: 1; min-width: 4.5rem; color: var(--color-primario); }
.surtido-progreso__barra { height: 14px; }
.surtido-progreso__mini { height: 8px; min-width: 70px; }
.surtido-grupo__header { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.surtido-grupo__ubicacion { font-size: 1.05rem; padding: 6px 10px; }
.surtido-linea {
    border: 1px solid var(--color-borde);
    border-left: 5px solid var(--color-borde);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--color-surtido-fondo);
}
.surtido-linea + .surtido-linea { margin-top: 8px; }
.surtido-linea--parcial  { border-left-color: var(--color-surtido-parcial);  background: var(--color-surtido-parcial-fondo); }
.surtido-linea--completa { border-left-color: var(--color-surtido-completa); background: var(--color-surtido-completa-fondo); }
.surtido-linea__parte { font-size: 1.1rem; font-weight: 700; }
.surtido-linea__datos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.surtido-linea__control { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.surtido-linea__btn { min-height: 44px; min-width: 44px; }
.surtido-linea__captura { width: 130px; flex: 0 0 auto; }
.surtido-linea__captura .form-control { min-height: 44px; font-size: 1.1rem; font-weight: 600; }

.picklist-fifo__opcion { cursor: pointer; }
.picklist-fifo__opcion--activa { border-color: var(--color-primario) !important; box-shadow: 0 0 0 2px var(--color-primario); }

.acuse-publico { max-width: 960px; margin: 0 auto; padding: 16px; }
.picklist-verificacion .escaner-resultado { min-height: 0; }

/* ===== CONTROL DE INVENTARIO ===== */
.conteo-discrepancia { background-color: var(--color-conteo-discrepancia) !important; color: var(--color-texto-invertido) !important; white-space: normal; }
.conteo-fila--discrepancia > td { background-color: var(--color-conteo-discrepancia-fondo) !important; }
.conteo-posterior { background-color: var(--color-conteo-posterior) !important; color: var(--color-texto-invertido) !important; }
.conteo-fila--posterior > td { background-color: var(--color-conteo-posterior-fondo) !important; }

/* ===== CLIENT DASHBOARD (portal) ===== */
@keyframes dc-entrada { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes dc-pulso { 0% { box-shadow: 0 0 0 0 var(--color-dc-vivo); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes dc-degradado { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes dc-brillo { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes dc-destello { 0% { color: var(--dc-kpi-color, var(--color-primario)); } 100% { color: inherit; } }
@keyframes dc-giro { to { transform: rotate(360deg); } }

.dc-reveal { opacity: 0; animation: dc-entrada .6s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 70ms); }

.dc-hero {
    position: relative; overflow: hidden; border-radius: 14px; padding: 26px 28px;
    color: var(--color-dc-hero-texto);
    background: linear-gradient(120deg, var(--color-dc-hero-1), var(--color-dc-hero-2), var(--color-dc-hero-3), var(--color-dc-hero-2));
    background-size: 300% 300%;
    animation: dc-entrada .6s ease forwards, dc-degradado 14s ease infinite;
}
.dc-hero__fondo {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 85% 20%, var(--color-dc-hero-chip) 0, transparent 40%),
                radial-gradient(circle at 10% 110%, var(--color-dc-hero-chip) 0, transparent 35%);
}
.dc-hero__saludo { color: var(--color-dc-hero-texto-suave); font-size: .9rem; }
.dc-hero__cliente { font-size: 1.7rem; font-weight: 800; color: var(--color-dc-hero-texto); letter-spacing: -.01em; }
.dc-hero__chip { background: var(--color-dc-hero-chip); color: var(--color-dc-hero-texto); border-radius: 999px; padding: 3px 10px; font-size: .78rem; }
.dc-hero__vivo { color: var(--color-dc-hero-texto-suave); font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; }
.dc-hero__btn { background: var(--color-dc-hero-chip); color: var(--color-dc-hero-texto); border: 0; }
.dc-hero__btn:hover { background: var(--color-dc-hero-texto); color: var(--color-dc-hero-1); }
.dc-pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--color-dc-vivo); display: inline-block; animation: dc-pulso 1.8s infinite; }
.dc-girando { display: inline-block; animation: dc-giro 1s linear infinite; }

.dc-kpi { position: relative; overflow: hidden; border-top: 3px solid var(--dc-kpi-color); transition: transform .2s ease, box-shadow .2s ease; }
.dc-kpi:hover { transform: translateY(-4px); box-shadow: 0 12px 24px var(--color-dc-sombra); }
.dc-kpi__icono {
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
    color: var(--dc-kpi-color); background: color-mix(in srgb, var(--dc-kpi-color) 14%, transparent); font-size: 1.3rem;
}
.dc-kpi__valor { font-size: 1.75rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dc-kpi__valor--cambio { animation: dc-destello 1.2s ease; }
.dc-kpi__titulo { font-size: .76rem; font-weight: 600; color: var(--tblr-secondary); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.dc-kpi__sub { font-size: .76rem; color: var(--tblr-secondary); margin-top: 4px; }

.dc-disp__valor { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--color-dc-disponible); font-variant-numeric: tabular-nums; }
.dc-barra { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--color-dc-barra-fondo); }
.dc-barra__seg { width: 0; transition: width 1.2s cubic-bezier(.2, .7, .2, 1); position: relative; overflow: hidden; }
.dc-barra__seg::after {
    content: ''; position: absolute; inset: 0; animation: dc-brillo 2.4s ease-in-out infinite;
    background: linear-gradient(90deg, transparent, var(--color-dc-hero-chip), transparent);
}
.dc-barra__seg--disponible   { background: var(--color-dc-disponible); }
.dc-barra__seg--comprometida { background: var(--color-dc-comprometida); }
.dc-barra__seg--hold         { background: var(--color-dc-hold); }
.dc-leyenda { font-size: .75rem; color: var(--tblr-secondary); display: inline-flex; align-items: center; gap: 5px; }
.dc-leyenda::before { content: ''; width: 9px; height: 9px; border-radius: 50%; }
.dc-leyenda--disponible::before   { background: var(--color-dc-disponible); }
.dc-leyenda--comprometida::before { background: var(--color-dc-comprometida); }
.dc-leyenda--hold::before         { background: var(--color-dc-hold); }

.dc-pipeline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dc-paso { text-align: center; }
.dc-paso__columna { height: 120px; display: flex; align-items: flex-end; background: var(--color-dc-barra-fondo); border-radius: 8px; overflow: hidden; }
.dc-paso__relleno { width: 100%; height: 0; transition: height 1.1s cubic-bezier(.2, .7, .2, 1); border-radius: 8px 8px 0 0; }
.dc-paso__num { font-size: 1.35rem; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
.dc-paso__nombre { font-size: .72rem; color: var(--tblr-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-paso__cajas { font-size: .7rem; color: var(--tblr-secondary); }
.dc-paso--0 .dc-paso__relleno { background: var(--color-picklist-abierta); }
.dc-paso--1 .dc-paso__relleno { background: var(--color-picklist-trabajando); }
.dc-paso--2 .dc-paso__relleno { background: var(--color-picklist-verificacion); }
.dc-paso--3 .dc-paso__relleno { background: var(--color-picklist-preparada); }
.dc-paso--4 .dc-paso__relleno { background: var(--color-picklist-cargada); }
.dc-paso--5 .dc-paso__relleno { background: var(--color-picklist-despachada); }
.dc-paso--6 .dc-paso__relleno { background: var(--color-picklist-recibida); }

.dc-lista { max-height: 380px; overflow-y: auto; }
.dc-picklist { display: block; padding: 12px 16px; border-bottom: 1px solid var(--color-borde); color: inherit; text-decoration: none; transition: background .15s ease; }
a.dc-picklist:hover { background: var(--color-dc-barra-fondo); color: inherit; }
.dc-picklist__progreso { height: 6px; border-radius: 999px; background: var(--color-dc-barra-fondo); overflow: hidden; margin-top: 6px; }
.dc-picklist__progreso > div { height: 100%; width: 0; transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }

.dc-mini { height: 8px; border-radius: 999px; background: var(--color-dc-barra-fondo); overflow: hidden; min-width: 70px; }
.dc-mini > div { height: 100%; background: var(--color-dc-disponible); }

.dc-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.dc-timeline::before { content: ''; position: absolute; left: 11px; top: 4px; bottom: 4px; width: 2px; background: var(--color-borde); }
.dc-timeline__item { position: relative; padding: 0 0 16px 34px; opacity: 0; animation: dc-entrada .5s ease forwards; animation-delay: calc(var(--i, 0) * 90ms + 300ms); }
.dc-timeline__punto {
    position: absolute; left: 3px; top: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--color-dc-entradas); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-dc-entradas) 20%, transparent);
}

.dc-almacen + .dc-almacen { margin-top: 14px; }
.dc-almacen__barra { height: 10px; border-radius: 999px; background: var(--color-dc-barra-fondo); overflow: hidden; margin-top: 4px; }
.dc-almacen__barra > div { height: 100%; width: 0; background: var(--color-primario); transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }

.dc-preview__select { min-width: 260px; }
@media (max-width: 991.98px) {
    .dc-preview__controles { width: 100%; }
    .dc-preview__select { flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 767.98px) {
    .dc-pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dc-hero { padding: 20px; }
    .dc-hero__cliente { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
    .dc-reveal, .dc-timeline__item { animation: none; opacity: 1; }
    .dc-hero { animation: none; }
    .dc-barra__seg, .dc-paso__relleno, .dc-picklist__progreso > div, .dc-almacen__barra > div { transition: none; }
    .dc-barra__seg::after, .dc-pulso { animation: none; }
}

/* ===== FACTURACION ===== */
.prefactura-estatus { color: var(--color-texto-invertido) !important; }
.prefactura-estatus--borrador     { background-color: var(--color-prefactura-borrador) !important; }
.prefactura-estatus--generada     { background-color: var(--color-prefactura-generada) !important; }
.prefactura-estatus--contabilidad { background-color: var(--color-prefactura-contabilidad) !important; }
.prefactura-estatus--cancelada    { background-color: var(--color-prefactura-cancelada) !important; }
.prefactura__importe--negativo { color: var(--color-prefactura-negativo); }
.prefactura__totales td { padding: 4px 10px; }
.prefactura__totales tr.prefactura__total td { font-size: 1.05rem; font-weight: 700; border-top: 2px solid var(--color-primario); }
.prefactura__avisos li + li { margin-top: 4px; }
.prefactura__conceptos .form-check { margin-bottom: 4px; }