:root {
            /* 🎨 PALETA — inspirada en papel e imprenta, no en un dashboard genérico */
            --bg-main: #FAF8F4;
            --bg-card: #ffffff;
            --bg-input: #ffffff;
            --bg-input-soft: #F5F2EC;
            --border-color: #E4E0D8;
            --border-color-strong: #D8D2C6;
            --text-main: #1C1B1F;
            --text-main-muted: #52504C;
            --text-muted: #8A867C;

            --accent-blue: #1E5F8C;    /* Azul Prensa */
            --accent-green: #2F7D4F;   /* Verde Aprobado */
            --accent-amber: #B5652B;   /* Terracota / Tinta */
            --accent-purple: #6B4C93;  /* Morado Placa */
            --accent-red: #B23A3A;     /* Rojo Alerta */

            /* 📏 ESCALA DE ESPACIADO — mismo ritmo en todo el sistema */
            --sp-1: 4px;
            --sp-2: 8px;
            --sp-3: 10px;
            --sp-4: 12px;
            --sp-5: 16px;
            --sp-6: 20px;

            /* 🔤 ESCALA TIPOGRÁFICA */
            --fs-2xs: 10.5px;
            --fs-xs: 11.5px;
            --fs-sm: 12.5px;
            --fs-base: 14px;
            --fs-md: 15px;
            --fs-lg: 18px;
            --fs-xl: 22px;
            --fs-2xl: 28px;

            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 14px;

            --shadow-card: 0 1px 2px rgba(28,27,31,0.04), 0 1px 8px rgba(28,27,31,0.04);
            --shadow-card-lg: 0 4px 10px rgba(28,27,31,0.05), 0 10px 30px rgba(28,27,31,0.06);
            --shadow-modal: 0 25px 60px -12px rgba(28,27,31,0.35);

            --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
        }

        body { font-family: var(--font-body); background-color: var(--bg-main); color: var(--text-main); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-size: var(--fs-base); }

        /* 🖨️ Por defecto, los navegadores NO imprimen fondos/colores (para ahorrar tinta),
           por eso las barras oscuras de sección salían en blanco al imprimir. Esto le dice
           al navegador que sí respete los colores tal cual se ven en pantalla. */
        html { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
        nav { display: flex; justify-content: space-between; align-items: center; background: #ffffff; padding: 0 var(--sp-6); height: 68px; border-bottom: 1px solid var(--border-color); gap: var(--sp-4); }
        .nav-brand { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.5px; color: var(--text-main); flex-shrink: 0; }
        .nav-brand span { color: var(--accent-amber); }
        .nav-tabs { display: flex; gap: 2px; flex-wrap: nowrap; height: 68px; flex-shrink: 0; }
        .tab-btn { font-family: var(--font-body); background: transparent; border: none; color: var(--text-muted); width: 52px; height: 68px; font-size: 21px; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; }
        .tab-btn .tab-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
        .tab-btn:hover { color: var(--text-main); background: rgba(28,27,31,0.03); }
        .tab-btn.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); background: rgba(30,95,140,0.06); }
        .btn-refresh { font-family: var(--font-body); background: var(--accent-blue); color: #ffffff; border: none; padding: var(--sp-2) var(--sp-4); font-weight: 700; font-size: var(--fs-xs); border-radius: var(--radius-sm); cursor: pointer; transition: opacity 0.15s; flex-shrink: 0; white-space: nowrap; }
        .btn-refresh:hover { opacity: 0.88; }

        .app-container { max-width: 1650px; margin: var(--sp-6) auto; padding: 0 var(--sp-5); }
        .view-section { display: none; }
        .view-section.active { display: block; }

        /* 📊 KANBAN */

        .kanban-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
        #tab-kanban .kanban-board { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        .column { background: #F1EEE7; border-radius: var(--radius-lg); padding: var(--sp-4); border: 1px solid var(--border-color); min-height: 320px; }
        .column-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-color-strong); }
        .column-header h3 { margin: 0; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-main-muted); }
        .badge-count { background: var(--border-color-strong); color: var(--text-main); font-size: var(--fs-2xs); padding: 2px var(--sp-2); border-radius: 10px; font-weight: bold; }

        .card { background: var(--bg-card); border-radius: var(--radius-md); padding: var(--sp-4); margin-bottom: var(--sp-4); border: 1px solid var(--border-color); box-shadow: var(--shadow-card); }
        .folio-tag { color: var(--accent-blue); font-family: monospace; font-weight: 700; }
        .card-client { font-size: var(--fs-base); font-weight: 700; margin: var(--sp-2) 0; color: var(--text-main); }
        .card-tech { font-size: var(--fs-2xs); background: var(--bg-input-soft); color: var(--text-main); padding: 2px var(--sp-2); border-radius: var(--radius-sm); display: inline-block; font-weight: 600; }
        .finance-status { font-size: var(--fs-2xs); text-transform: uppercase; font-weight: 700; text-align: center; padding: var(--sp-1); border-radius: var(--radius-sm); margin-top: var(--sp-3); }
        .status-ok { background: rgba(47,125,79,0.06); color: var(--accent-green); border: 1px solid rgba(47,125,79,0.2); }
        .card-actions { display: flex; gap: var(--sp-1); margin-top: var(--sp-3); }
        .btn-card-action { flex: 1; background: var(--bg-input-soft); color: var(--text-main); border: 1px solid var(--border-color); padding: var(--sp-2); font-size: var(--fs-2xs); font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s; }
        .btn-card-action:hover { background: var(--border-color); }

        /* ⚙️ ESTIMATOR */
        .estimator-layout { display: grid; grid-template-columns: 1.8fr 1.2fr; gap: var(--sp-5); align-items: start; }
        .panel-engineering { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-card); }
        .panel-summary-sticky { 
    background: #ffffff; 
    border: 2px solid var(--accent-blue); 
    border-radius: var(--radius-lg); 
    padding: var(--sp-5); 
    position: sticky; 
    top: var(--sp-5); 
    box-shadow: var(--shadow-card-lg); 
    max-height: calc(100vh - 80px); 
    overflow-y: auto; 
}
        
        .section-title { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; color: var(--accent-blue); margin: var(--sp-6) 0 var(--sp-4) 0; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-color); letter-spacing: 0.4px; display: flex; justify-content: space-between; }
        .section-title:first-of-type { margin-top: 0; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
        
        .field-group { display: flex; flex-direction: column; }
        .field-group label { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; color: var(--text-muted); margin-bottom: var(--sp-1); }
        .field-group input, .field-group select, .field-group textarea { font-family: var(--font-body); background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); color: var(--text-main); font-size: var(--fs-sm); outline: none; transition: border 0.15s; }
        .field-group input:focus, .field-group select:focus, .field-group textarea:focus { border-color: var(--accent-blue); }
        .field-group input[readonly] { background: var(--bg-input-soft); color: var(--text-muted); cursor: not-allowed; }

        .cost-summary-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-main); }
        .cost-summary-table td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-color); }
        .cost-summary-table tr:last-child td { border-bottom: none; font-weight: 700; }
        
        .scale-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-1); font-size: var(--fs-sm); text-align: center; }
        .scale-table th { background: var(--bg-input-soft); padding: var(--sp-2); font-weight: 700; text-transform: uppercase; font-size: var(--fs-2xs); color: var(--text-muted); border: 1px solid var(--border-color); }
        .scale-table td { padding: var(--sp-2); border: 1px solid var(--border-color); font-family: monospace; }

        .comp-block { border-left: 4px solid var(--border-color-strong); padding-left: var(--sp-4); margin-bottom: var(--sp-5); }
        .sub-block-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; margin-bottom: var(--sp-3); }
        /* 🗂️ Encabezados de los 4 grupos dentro de Componente 1 y Componente 2 (Calculadora de
           Páginas/Papel, Preprensa/Placas/Tintas, Corte/Guillotina, Acabados/Encuadernación) */
        .grupo-title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--text-main); background: var(--bg-input-soft); border-left: 4px solid var(--accent-purple); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); margin: var(--sp-6) 0 var(--sp-4) 0; }
        .grupo-title:first-of-type { margin-top: var(--sp-3); }
        .corte-helper-box { background: var(--bg-input-soft); padding: var(--sp-3); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); border: 1px dashed var(--border-color-strong); }

        .comp-card-cost { background: var(--bg-input-soft); border: 1px solid var(--border-color); padding: var(--sp-3); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); }
        .comp-card-cost h6 { margin: 0 0 var(--sp-1) 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.3px; }

        /* 🖨️ ORDEN DE IMPRESIÓN (multi-pliego) */
        .oi-pliego-card { background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid var(--accent-blue); border-radius: var(--radius-md); padding: var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow-card); }
        .oi-pliego-header { display:flex; justify-content:space-between; align-items:center; background: var(--oi-bar-gray); color: #fff; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        .oi-pliego-header span { font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
        .oi-mini-btn { background: rgba(255,255,255,0.15); color: #fff; border: none; padding: 3px var(--sp-2); border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
        .oi-mini-btn:hover { background: rgba(255,255,255,0.28); }
        .oi-kpi-box { padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); text-align:center; }
        .oi-kpi-box label { display:block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; }
        .oi-badge-tarifa { font-size: var(--fs-2xs); font-weight: 800; padding: 3px 10px; border-radius: 10px; background: #fff; color: var(--accent-red); }
        /* 🗂️ Barra de sección numerada (1. Preprensa, 2. Papel/Sustrato, 3. Impresión,
           4. Acabados, 5. Observaciones) — mismo look que la cabecera de cada Pliego/Firma,
           para que las 5 secciones de la Orden de Impresión se vean como un solo formato.
           --oi-bar-gray = pantalla al 75% (no negro 100%), para pantalla Y para impresión. */
        :root { --oi-bar-gray: #404040; }
        .oi-section-bar { background: var(--oi-bar-gray); color: #fff; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; margin: var(--sp-4) 0 var(--sp-3) 0; white-space: nowrap; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        .oi-section-bar:first-child { margin-top: 0; }
        /* 🖼️ Diseño limpio para el bloque de Cliente y las secciones 1, 4 y 5:
           franja lateral de color (igual criterio que .oi-pliego-card) + una línea
           difuminada (sombra suave, no un borde duro) alrededor de todo el bloque.
           Nada de recuadro negro grueso — solo el acento lateral y un contorno tenue. */
        .oi-framed-block { background: var(--bg-card); border-left: 4px solid var(--accent-blue); border-radius: var(--radius-md); padding: var(--sp-3); margin-top: var(--sp-4); box-shadow: 0 0 0 1px rgba(28,27,31,0.07), 0 1px 3px rgba(28,27,31,0.04); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        .oi-framed-block .oi-section-bar:first-child { margin-top: 0; }

        /* MODAL */
        .modal-overlay { 
            position: fixed !important; 
            top: 0 !important; 
            left: 0 !important; 
            width: 100% !important; 
            height: 100% !important; 
            background: rgba(28, 27, 31, 0.55) !important; 
            display: none; 
            z-index: 9999 !important; 
            overflow-y: auto !important; 
            backdrop-filter: blur(4px);
        }
        .modal-body { 
            background: #ffffff !important; 
            color: var(--text-main); 
            width: 92% !important; 
            max-width: 850px !important; 
            margin: 40px auto !important; 
            padding: var(--sp-6); 
            border-radius: var(--radius-lg); 
            box-shadow: var(--shadow-modal) !important; 
            position: relative !important;
        }
        @media screen { #modalOrden .modal-body { max-width: 1060px !important; } }
        .doc-switcher { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border-color); padding-bottom: var(--sp-3); flex-wrap: wrap; }
        .doc-btn { font-family: var(--font-body); background: var(--bg-input-soft); border: 1px solid var(--border-color); padding: 6px 9px; font-size: 11px; font-weight: 700; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; flex: 0 1 auto; text-align: center; letter-spacing: 0; }
        .doc-btn.active { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }
        .print-preview-box { border: 1px solid var(--border-color); padding: var(--sp-5); border-radius: var(--radius-md); background: #fff; }
        .debug-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--text-main); color: #fff; padding: var(--sp-2) var(--sp-5); font-size: var(--fs-2xs); display: flex; justify-content: space-between; z-index: 999; }

        .btn-submit-form { font-family: var(--font-body); background: var(--accent-green); color: white; border: none; padding: var(--sp-3); width: 100%; border-radius: var(--radius-sm); font-weight: bold; font-size: var(--fs-base); cursor: pointer; margin-top: var(--sp-4); transition: opacity 0.15s; }
        .btn-submit-form:hover { opacity: 0.88; }

        @media print {
    @page { size: letter; margin: 10mm; }
    body { background: #ffffff; color: #000000; }
    nav, .debug-bar, .actions-bar, .modal-actions-footer, .doc-switcher, .no-print { 
        display: none !important; 
    }
    .view-section { display: none !important; }
    #tab-production.active { display: block !important; }
    #tab-ordenimpresion.active { display: block !important; }

    /* 🧾 MODAL DE DOCUMENTOS (Cotización, Pedido, Orden de Impresión, etc.):
       en pantalla es un overlay de posición fija con scroll propio, lo cual
       recorta cualquier documento más alto que una pantalla al imprimir
       (Chrome/Safari solo "capturan" el recuadro visible). Lo volvemos
       estático y de alto automático para que el contenido fluya y pagine
       normalmente en tamaño carta — igual que ya se hace con el Estado
       de Cuenta. */
    #modalOrden {
        position: static !important;
        background: none !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        height: auto !important;
        width: auto !important;
    }
    #modalOrden .modal-body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    /* 📄 ESTADO DE CUENTA: que quede bien centrado en la hoja carta al
       imprimir/guardar como PDF, en vez de heredar el posicionamiento
       fijo y semi-transparente que usa en pantalla. */
    #overlayEstadoCuenta {
        position: static !important;
        display: block !important;
        background: none !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }
    #overlayEstadoCuenta > div {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    /* Todo el contenido debe caber en el ancho útil de la hoja carta
       (216 mm − 2 × 10 mm de margen) y paginar limpio si hay muchos pedidos. */
    #overlayEstadoCuenta *, #overlayEstadoCuenta *::before, #overlayEstadoCuenta *::after {
        box-sizing: border-box !important;
    }
    #estadoCuentaImprimible {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 11px !important;
    }
    #estadoCuentaImprimible table {
        width: 100% !important;
        table-layout: auto;
        font-size: 10.5px !important;
    }
    #estadoCuentaImprimible th, #estadoCuentaImprimible td {
        padding: 5px 6px !important;
        white-space: nowrap;
    }
    /* Solo la descripción (3ª columna) puede saltar de línea */
    #estadoCuentaImprimible .ec-desc {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    #estadoCuentaImprimible .ec-fav { width: 52px !important; padding-left: 3px !important; padding-right: 3px !important; }
    #estadoCuentaImprimible th.ec-fav { white-space: normal !important; font-size: 8.5px !important; line-height: 1.15; }
    #estadoCuentaImprimible thead { display: table-header-group; }
    #estadoCuentaImprimible tfoot { display: table-row-group; }
    #estadoCuentaImprimible tr, #estadoCuentaImprimible tbody.ec-grupo { page-break-inside: avoid; break-inside: avoid; }
    #estadoCuentaImprimible, #estadoCuentaImprimible * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
        
        /* 🎨 DISEÑO PREMIUN PARA LA PESTAÑA DE ÓRDENES DE TALLER (PANTALLA VIVA) */
        #tab-production .container { max-width: 100%; margin: 0 auto; padding: 10px; }
        #tab-production .actions-bar { display: flex; justify-content: space-between; align-items: center; background: #ffffff; padding: 10px 15px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-color); box-shadow: var(--shadow-card); }
        #tab-production .header { display: flex; justify-content: space-between; align-items: center; background: #ffffff; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border-color); border-left: 4px solid var(--text-main); margin-bottom: 10px; }
        #tab-production .logo-area h1 { font-family: var(--font-display); font-size: 18pt; color: var(--text-main); margin: 0; font-weight: 700; letter-spacing: 0.5px; }
        #tab-production .logo-area p { font-size: 8.5pt; color: var(--accent-blue); margin: 2px 0 0 0; font-weight: 600; text-transform: uppercase; }
        #tab-production .folio-box { background: var(--text-main); color: white; padding: 4px 10px; border-radius: 4px; font-size: 10pt; font-weight: bold; display: inline-block; }
        #tab-production .dates-container { display: flex; gap: 8px; margin-top: 4px; }
        #tab-production .date-badge { background: var(--bg-input-soft); border: 1px solid var(--border-color-strong); padding: 4px 6px; border-radius: 4px; font-size: 7.5pt; color: var(--text-main-muted); text-align: left; }
        #tab-production .date-badge label { display: block; font-weight: 700; margin-bottom: 2px; }
        #tab-production .date-badge input { border: none; background: transparent; font-size: 8.5pt; color: var(--text-main); font-weight: 600; width: 110px; padding: 0; outline: none; height: auto !important; }
        #tab-production .row-table { display: table; width: 100%; table-layout: fixed; margin-bottom: 6px; }
        #tab-production .col-cell { display: table-cell; padding: 0 6px; vertical-align: top; }
        #tab-production .form-group { margin-bottom: 2px; }
        #tab-production .form-group label { display: block; font-size: 7.5pt; font-weight: 700; margin-bottom: 3px; color: var(--text-main-muted); text-transform: uppercase; }
        #tab-production input[type="text"], #tab-production input[type="number"], #tab-production select, #tab-production textarea { width: 100%; padding: 5px 8px; border: 1px solid var(--border-color-strong); border-radius: 4px; font-size: 9pt; color: var(--text-main); background-color: #ffffff; height: 28px; box-sizing: border-box; }
        #tab-production textarea { height: 60px; resize: none; font-family: inherit; }
        #tab-production .systems-grid { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
        #tab-production .system-card { flex: 1; min-width: 90px; background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; padding: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 30px; box-shadow: 0 1px 2px rgba(28,27,31,0.02); }
        #tab-production .system-card label { font-size: 8pt; font-weight: 700; color: var(--text-main-muted); cursor: pointer; margin: 0; }
        #tab-production .system-card input[type="checkbox"] { transform: scale(1.1); margin: 0; }
        #tab-production .workshop-flex { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
        #tab-production .workshop-module { flex: 1; min-width: 260px; background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; padding: 10px; box-shadow: 0 1px 3px rgba(28,27,31,0.02); }
        #tab-production .workshop-module h4 { margin: 0 0 6px 0; font-size: 9pt; color: var(--accent-blue); border-bottom: 2px solid var(--bg-input-soft); padding-bottom: 3px; text-transform: uppercase; font-weight: 700; }
        #tab-production .combo-row-taller { display: flex; align-items: center; justify-content: space-around; background: #ffffff; border: 1px solid var(--border-color-strong); border-radius: 4px; padding: 0 8px; height: 28px; }
        #tab-production .combo-segment { display: flex; align-items: center; gap: 6px; }
        #tab-production .combo-lbl { font-size: 8pt; font-weight: 700; color: var(--text-main-muted); margin: 0; }
        #tab-production .combo-v-divider { width: 1px; height: 16px; background-color: var(--border-color-strong); }
        #tab-production .paper-vendor-table { width: 100%; border-collapse: collapse; }
        #tab-production .paper-vendor-table th { background: var(--text-main-muted); color: white; font-size: 7.5pt; text-transform: uppercase; padding: 4px; text-align: left; }
        #tab-production .paper-vendor-table td { border: 1px solid var(--border-color); padding: 4px; background: #ffffff; }
        #tab-production .paper-vendor-table label { font-size: 6.5pt; font-weight: 700; color: var(--text-main-muted); display: block; text-transform: uppercase; }
        #tab-production .paper-vendor-table input { border: none; padding: 0; font-size: 9pt; background: transparent; width: 100%; height: 20px; outline: none; }
        #tab-production .finishes-table { width: 100%; border-collapse: collapse; background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
        #tab-production .finishes-table td { border: 1px solid var(--border-color); padding: 5px 8px; font-size: 9pt; vertical-align: middle; }
        #tab-production .row-divider { background: var(--bg-input-soft) !important; color: var(--text-main) !important; font-size: 8pt !important; font-weight: 800 !important; text-transform: uppercase !important; padding: 4px 8px !important; border-left: 4px solid var(--text-main) !important; }
        #tab-production .finance-card { background: var(--bg-input-soft); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; }
        #tab-production .total-highlight { background: rgba(30,95,140,0.08) !important; color: var(--accent-blue) !important; font-weight: bold !important; font-size: 10pt !important; }
        #tab-production .restante-highlight { background: rgba(178,58,58,0.08) !important; color: var(--accent-red) !important; font-weight: bold !important; font-size: 10pt !important; }
        
        /* 🔒 REGLA PARA OCULTAR PRECIOS EN LA HOJA DE IMPRESIÓN DEL OPERADOR */
        @media print {
            #tab-production.hide-prices-print .finance-card,
            #tab-production.hide-prices-print [id^="t_unit_"],
            #tab-production.hide-prices-print [id^="t_tot_"],
            #tab-production.hide-prices-print #t_p_costo,
            #tab-production.hide-prices-print .section-title:nth-of-type(7),
            #tab-production.hide-prices-print .row-table:has(label) div:nth-child(3),
            #tab-production.hide-prices-print .row-table:has(label) div:nth-child(4) {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
            }
        }        
        


/* 📌 PIZARRA DE PENDIENTES */
.pend-panel { background: var(--bg-card); border: 1px solid var(--border-color); padding: 16px 20px; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.pend-titlebar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.pend-resumen { display:flex; gap:8px; flex-wrap:wrap; }
.pend-resumen .pend-pill { font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px; border:1px solid var(--border-color); background:var(--bg-input-soft); cursor:pointer; }
.pend-pill.rojo { color:var(--accent-red); border-color:rgba(178,58,58,.4); background:#fdf3f3; }
.pend-pill.ambar { color:var(--accent-amber); border-color:rgba(181,101,43,.4); background:#fdf6ef; }
.pend-pill.activo { outline:2px solid var(--accent-purple); }
.pend-quick { display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; }
.pend-quick input[type=text] { flex:1; min-width:240px; padding:10px 12px; font-size:14px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-input); }
.pend-quick input:focus, .pend-col-add:focus, .pend-filtros input:focus { outline:none; border-color:var(--accent-purple); }
.pend-opciones { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--border-color); }
.pend-btn-mas { background:var(--bg-input-soft); border:1px solid var(--border-color); color:var(--text-main); font-size:12px; font-weight:600; padding:8px 12px; border-radius:8px; cursor:pointer; }
.pend-btn-mas:hover { background:var(--border-color); }
.pend-filtros { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.pend-filtros input[type=search] { flex:1; min-width:220px; padding:8px 12px; border:1px solid var(--border-color); border-radius:8px; font-size:13px; }
.pend-filtros select { padding:8px; border:1px solid var(--border-color); border-radius:8px; font-size:12px; background:#fff; }
.pend-chips { display:flex; gap:4px; }
.pend-chip { border:1px solid var(--border-color); background:#fff; padding:6px 12px; border-radius:16px; font-size:12px; font-weight:600; cursor:pointer; }
.pend-chip.activo { background:var(--accent-purple); color:#fff; border-color:var(--accent-purple); }
.pend-check { font-size:12px; color:var(--text-main-muted); display:flex; align-items:center; gap:5px; cursor:pointer; }
.pend-col-add { width:100%; box-sizing:border-box; padding:8px 10px; margin-bottom:10px; border:1px dashed var(--border-color-strong); border-radius:8px; background:rgba(255,255,255,.6); font-size:12.5px; }
.pend-hint { font-size:11px; color:var(--text-muted); text-align:center; font-style:italic; padding:9px 0 11px; }
.pend-col .cards-container { min-height:120px; border-radius:8px; transition: background .12s; }
.pend-col.pend-drop-over { outline:2px dashed var(--accent-purple); outline-offset:-4px; background:#ece7f3; }
.pend-card { cursor:grab; border-left:4px solid var(--border-color-strong); position:relative; }
.pend-card:active { cursor:grabbing; }
.pend-card.dragging { opacity:.4; }
.pend-card.prio-Urgente { border-left-color:var(--accent-red); }
.pend-card.prio-Normal { border-left-color:var(--accent-amber); }
.pend-card.prio-Baja { border-left-color:var(--accent-green); }
.pend-card.hecho .card-client { text-decoration:line-through; color:var(--text-muted); }
.pend-card.vencido { background:#fff8f8; }
.pend-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.pend-tag { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:10px; background:var(--bg-input-soft); color:var(--text-main-muted); }
.pend-tag.rojo { background:#fdecec; color:var(--accent-red); }
.pend-tag.ambar { background:#fdf0e3; color:var(--accent-amber); }
.pend-tag.verde { background:#e8f5ec; color:var(--accent-green); }
.pend-tag.azul { background:#e6f0f7; color:var(--accent-blue); }
.pend-sub { margin-top:8px; font-size:12px; }
.pend-sub label { display:flex; gap:6px; align-items:flex-start; padding:1px 0; cursor:pointer; }
.pend-sub label.ok span { text-decoration:line-through; color:var(--text-muted); }
.pend-barra { height:5px; background:var(--border-color); border-radius:3px; overflow:hidden; margin:6px 0 2px; }
.pend-barra > div { height:100%; background:var(--accent-green); }
.pend-card-btns { display:flex; gap:4px; margin-top:10px; }
.pend-card-btns button { flex:1; background:var(--bg-input-soft); border:1px solid var(--border-color); border-radius:6px; padding:5px 0; font-size:12px; cursor:pointer; }
.pend-card-btns button:hover { background:var(--border-color); }
.pend-overlay { position:fixed; inset:0; background:rgba(28,27,31,.55); display:none; z-index:9999; overflow-y:auto; align-items:flex-start; justify-content:center; padding:30px 12px; }
.pend-overlay.abierto { display:flex; }
.pend-modal { background:#fff; border-radius:12px; padding:20px 22px; width:100%; max-width:560px; box-shadow:0 20px 40px rgba(0,0,0,.25); }
.pend-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pend-modal .field-group input, .pend-modal .field-group select, .pend-modal .field-group textarea { width:100%; box-sizing:border-box; }
.pend-sub-row { display:flex; gap:6px; align-items:center; margin-bottom:4px; }
.pend-sub-row input[type=text] { flex:1; padding:6px 8px; border:1px solid var(--border-color); border-radius:6px; font-size:13px; }
.pend-sub-row button { border:1px solid var(--border-color); background:var(--bg-input-soft); border-radius:6px; cursor:pointer; padding:4px 8px; }
.pend-modal-actions { display:flex; gap:8px; align-items:center; margin-top:16px; padding-top:12px; border-top:1px solid var(--border-color); }
@media (max-width: 900px) { #tab-pendientes .kanban-board { grid-template-columns: 1fr !important; } .pend-grid2 { grid-template-columns:1fr; } }

/* 🔍 Buscador del Monitor de Producción */
.kanban-buscador { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.kanban-buscador input[type=search] { width:100%; max-width:340px; padding:8px 12px; border:1px solid var(--border-color-strong); border-radius:8px; font-size:13px; background:var(--bg-card); color:var(--text-main); }
.kanban-buscador input[type=search]:focus { outline:none; border-color:var(--accent-blue); }
.kanban-buscador button { border:1px solid var(--border-color); background:var(--bg-input-soft); border-radius:6px; padding:6px 10px; cursor:pointer; font-size:12px; }
.kanban-buscador #kanban_buscar_info { font-size:12px; color:var(--text-muted); font-weight:600; }

/* ============================================
   🏠 HOY + 🔍 BÚSQUEDA GLOBAL + ☁️ CHIP DE NUBE
   ============================================ */
.hoy-wrap { max-width: 1100px; margin: 0 auto; padding: var(--sp-4); }
.hoy-saludo { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.hoy-saludo h2 { margin: 0; font-family: var(--font-display, var(--font-body)); font-size: 26px; color: var(--text-main); }
.hoy-saludo p { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.hoy-btn-buscar { background: #fff; border: 1px solid var(--border-color-strong); border-radius: 10px; padding: 10px 14px; font-size: var(--fs-sm); color: var(--text-main-muted); cursor: pointer; font-family: var(--font-body); }
.hoy-btn-buscar:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.hoy-btn-buscar kbd, .bg-pie span { font-family: var(--font-body); }
.hoy-btn-buscar kbd { background: var(--bg-input-soft); border: 1px solid var(--border-color); border-radius: 5px; padding: 1px 6px; margin-left: 8px; font-size: var(--fs-2xs); }
.hoy-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.hoy-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--border-color); border-left: 5px solid var(--border-color-strong); text-decoration: none; color: var(--text-main); transition: transform .12s, box-shadow .12s; }
.hoy-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(28,27,31,.08); }
.hoy-kpi strong { font-size: 22px; line-height: 1.1; }
.hoy-kpi span { font-size: var(--fs-xs); color: var(--text-muted); }
.hoy-kpi.ok { border-left-color: var(--accent-green); } .hoy-kpi.amber { border-left-color: var(--accent-amber); }
.hoy-kpi.rojo { border-left-color: var(--accent-red); background: #fdf3f3; } .hoy-kpi.azul { border-left-color: var(--accent-blue); }
.hoy-card { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; margin-bottom: var(--sp-3); }
.hoy-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.hoy-card-h h3 { margin: 0; font-size: 15px; color: var(--text-main); }
.hoy-card-h span { font-size: var(--fs-xs); color: var(--text-muted); }
.hoy-fila { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f1ede6; font-size: var(--fs-sm); }
.hoy-fila-txt { flex: 1; min-width: 0; line-height: 1.3; } .hoy-fila-txt small { display: block; color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-fila-der { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hoy-fila-acc { display: flex; gap: 4px; }
.hoy-fila-acc button { background: var(--bg-input-soft); border: 1px solid var(--border-color); border-radius: 7px; padding: 4px 8px; font-size: var(--fs-xs); cursor: pointer; font-family: var(--font-body); color: var(--text-main-muted); }
.hoy-fila-acc button:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.hoy-monto { font-family: monospace; }
.hoy-chip { font-size: var(--fs-2xs); font-weight: 700; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.hoy-chip.rojo { background: #fbe9e9; color: var(--accent-red); } .hoy-chip.amber { background: #fbefe3; color: var(--accent-amber); } .hoy-chip.azul { background: #e6f0f7; color: var(--accent-blue); }
.hoy-vacio { padding: 10px 0 4px; color: var(--text-muted); font-size: var(--fs-sm); }
.hoy-nota { margin-top: 8px; padding: 7px 10px; background: var(--bg-input-soft); border-radius: 8px; font-size: var(--fs-xs); color: var(--text-main-muted); }
.hoy-mes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.hoy-mes > div { display: flex; flex-direction: column; gap: 2px; } .hoy-mes strong { font-size: 22px; } .hoy-mes small { color: var(--text-muted); font-size: var(--fs-xs); }
.hoy-sube { color: var(--accent-green); font-weight: 700; font-size: var(--fs-sm); } .hoy-baja { color: var(--accent-red); font-weight: 700; font-size: var(--fs-sm); }
@media (min-width: 900px) { .hoy-wrap .hoy-card { } }

.chip-nube { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 6px 12px; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; border: 1px solid var(--border-color); background: #fff; font-family: var(--font-body); white-space: nowrap; }
.chip-nube.ok { color: var(--accent-green); border-color: rgba(47,125,79,.35); background: #f2f9f4; }
.chip-nube.amber { color: var(--accent-amber); border-color: rgba(181,101,43,.45); background: #fbefe3; }
.btn-buscar-nav { background: transparent; border: 1px solid var(--border-color); border-radius: 10px; width: 38px; height: 34px; cursor: pointer; font-size: 15px; }
.btn-buscar-nav:hover { border-color: var(--accent-blue); }
@media (max-width: 1100px) { .chip-nube-txt { display: none; } .chip-nube { padding: 6px 9px; } }

.bg-overlay { position: fixed; inset: 0; background: rgba(28,27,31,.5); z-index: 20000; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; }
.bg-caja { background: #fff; border-radius: 14px; width: 100%; max-width: 680px; max-height: 78vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.bg-caja input { border: none; border-bottom: 1px solid var(--border-color); padding: 16px 18px; font-size: 15px; outline: none; font-family: var(--font-body); }
.bg-lista { overflow: auto; padding: 6px; flex: 1; }
.bg-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.bg-item.sel, .bg-item:hover { background: rgba(30,95,140,.08); }
.bg-txt { flex: 1; min-width: 0; } .bg-txt strong { display: block; font-size: var(--fs-sm); } .bg-txt small { display: block; color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-acc { display: flex; gap: 4px; } .bg-acc button { background: #fff; border: 1px solid var(--border-color); border-radius: 7px; padding: 3px 8px; font-size: var(--fs-xs); cursor: pointer; font-family: var(--font-body); }
.bg-acc button:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.bg-vacio { padding: 24px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.bg-pie { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--border-color); font-size: var(--fs-2xs); color: var(--text-muted); background: var(--bg-input-soft); }


/* 👥 CLIENTES */
.cli-barra { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.cli-barra input { flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--border-color-strong); border-radius: 10px; font-size: var(--fs-sm); font-family: var(--font-body); }
.cli-barra select { padding: 9px 12px; border: 1px solid var(--border-color-strong); border-radius: 10px; font-size: var(--fs-sm); font-family: var(--font-body); background: #fff; }
.cli-scroll { overflow-x: auto; }
.cli-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cli-tabla th { text-align: left; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); padding: 8px; border-bottom: 1px solid var(--border-color); }
.cli-tabla td { padding: 9px 8px; border-bottom: 1px solid #f1ede6; }
.cli-tabla .num { text-align: right; font-family: monospace; }
.cli-tabla tbody tr { cursor: pointer; } .cli-tabla tbody tr:hover { background: rgba(30,95,140,.06); }
.cli-volver { background: none; border: none; color: var(--accent-blue); font-weight: 700; cursor: pointer; padding: 0; margin-bottom: 4px; font-family: var(--font-body); font-size: var(--fs-sm); }


/* ============================================================
   🪶 DISEÑO COMPACTO (v158): menos aire, más información a la vista.
   Los espacios globales (--sp-*) ya se redujeron arriba; aquí se afinan los componentes más grandes.
   ============================================================ */
.card { padding: 10px 12px; margin-bottom: 8px; }
.card-client { margin: 4px 0; }
.card-actions { margin-top: 8px; }
.finance-status { margin-top: 8px; }
.column { padding: 10px; }
.column-header { margin-bottom: 10px; }
.app-container { margin-top: 14px; }
.section-title { margin: 16px 0 10px 0; }

/* Fichas del Monitor de Producción, más bajitas */
#tab-kanban .card textarea:focus { height: 60px; overflow: auto; }
#tab-kanban .card .card-actions { gap: 4px; }
#tab-kanban .card .btn-card-action { flex: 1 1 28%; padding: 5px 4px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
#tab-kanban .card .finance-status { padding: 4px 6px; }
#tab-kanban .card .finance-status > div { line-height: 1.3; }
#tab-kanban .card .btn-card-action[title="Borrar este folio"] { flex: 0 0 38px; }

/* ============================================================
   👉 SIGUIENTE PASO (v162): un botón principal por tarjeta y por fila de «Haz esto primero»
   ============================================================ */
#tab-kanban .card .sp-acciones { flex-wrap: wrap; }
.btn-sp-next { flex: 1 1 100%; background: var(--accent-blue); color: #fff; border: none; padding: 7px 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 800; cursor: pointer; text-align: center; }
.btn-sp-next:hover { filter: brightness(1.08); }
.sp-listo { flex: 1 1 100%; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--accent-green); background: rgba(22,163,74,0.06); border: 1px solid rgba(22,163,74,0.2); border-radius: var(--radius-sm); padding: 5px; }
#tab-kanban .card .sp-acciones .btn-card-action { flex: 1 1 28%; }
.sp-mas { flex: 1 1 100%; flex-wrap: wrap; gap: 4px; }
.sp-mas .btn-card-action { flex: 1 1 40%; }
.hoy-primero { border-left: 4px solid var(--accent-blue); background: #f8fbff; }
.hoy-primero.ok { border-left-color: var(--accent-green); background: #f6fdf8; }
.hoy-prio { align-items: center; }
.hoy-prio-n { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--accent-blue); color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.hoy-fila-acc .hoy-prio-btn { background: var(--accent-blue); color: #fff; border: none; font-weight: 800; padding: 6px 12px; }
.hoy-fila-acc .hoy-prio-btn:hover { filter: brightness(1.08); color: #fff; }

/* ============================================================
   🧭 NAVEGACIÓN POR GRUPOS (v163): Inicio · Ventas · Producción · Administración
   ============================================================ */
.nav-tabs { align-items: stretch; overflow-x: auto; scrollbar-width: none; min-width: 0; flex-shrink: 1; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-sep { flex: 0 0 1px; align-self: center; height: 34px; background: var(--border-color); margin: 0 7px; }
.tab-btn { width: 58px; flex-direction: column; gap: 2px; font-size: 19px; padding: 0 2px; }
.tab-btn .tab-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: 0; }
@media (max-width: 1480px) {
  .tab-btn { width: 44px; font-size: 21px; }
  .tab-btn .tab-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
  .nav-sep { margin: 0 4px; }
}
/* Barra para cambiar entre Taller y Orden de Impresión */
.subnav { display: flex; gap: 6px; margin: 0 0 10px 0; }
.subnav-btn { padding: 6px 14px; border-radius: 16px; border: 1px solid var(--border-color); background: #fff; color: var(--text-main-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: var(--font-body); }
.subnav-btn.on { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
@media print { .subnav, .nav-sep { display: none !important; } }
/* Tarjetas de Hoy sin nada pendiente: una sola línea */
.hoy-card.hoy-card-vacia { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; background: transparent; border-style: dashed; }
.hoy-vacia-t { font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; }
.hoy-vacia-m { font-size: 12px; color: var(--text-muted); }

/* ===== v167 Cobranza ===== */
.cb-tramos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0; }
.cb-tramo { text-align: left; background: #fff; border: 1px solid var(--border-color); border-top: 4px solid var(--c); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-family: var(--font-body); display: flex; flex-direction: column; gap: 2px; }
.cb-tramo span { font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; }
.cb-tramo strong { font-size: 20px; color: var(--c); font-family: monospace; }
.cb-tramo small { font-size: 11px; color: #94a3b8; }
.cb-tramo.on { background: #f8fafc; box-shadow: 0 0 0 2px var(--c); }
.cb-btn { padding: 4px 10px; font-size: 12px; font-weight: 700; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; cursor: pointer; }
.cb-btn:hover { background: #f1f5f9; }
@media (max-width: 800px) { .cb-tramos { grid-template-columns: repeat(2, 1fr); } }

/* ===== v168 Reportes ===== */
.rp-barras { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 190px; padding: 10px 4px 0; }
.rp-mes { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 0; }
.rp-par { display: flex; gap: 2px; align-items: flex-end; width: 100%; flex: 1; justify-content: center; }
.rp-b { width: 42%; min-height: 1px; border-radius: 3px 3px 0 0; }
.rp-b.cur { background: #2563eb; } .rp-b.prev { background: #cbd5e1; }
.rp-v { font-size: 9px; color: #475569; font-family: monospace; margin-top: 3px; white-space: nowrap; height: 11px; }
.rp-et { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; }
.rp-pct { display: inline-block; width: 50px; height: 6px; background: #e2e8f0; border-radius: 4px; overflow: hidden; vertical-align: middle; }
.rp-pct i { display: block; height: 100%; background: #2563eb; }
.rp-pct.big { width: 160px; height: 8px; }
.rp-motivo { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid #f1f5f9; }
.rp-motivo > span:first-child { flex: 0 0 230px; }
.rp-motivo small { color: #94a3b8; margin-left: auto; }
@media (max-width: 800px) { .rp-v { display: none; } .rp-motivo > span:first-child { flex-basis: 140px; } }

/* 🧾 Aviso de facturación: globo con el número de cobros sin factura en el botón Hoy */
.tab-btn .af-globo { position: absolute; top: 8px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px #fff; font-family: var(--font-body); }

/* v179 · Banco minimalista */
.conc-mas { position: relative; display: inline-block; }
.conc-mas > summary { list-style: none; cursor: pointer; border: 1px solid var(--border-color); background: #fff; border-radius: 8px; padding: 3px 9px; font-size: 14px; font-weight: 800; color: #475569; user-select: none; }
.conc-mas > summary::-webkit-details-marker { display: none; }
.conc-mas > summary::marker { content: ''; }
.conc-mas-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 210px; background: #fff; border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.14); padding: 6px; display: flex; flex-direction: column; }
.conc-mas-menu a { display: block; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; color: #334155; text-decoration: none; white-space: nowrap; }
.conc-mas-menu a:hover { background: #f1f5f9; }
.conc-mas-fila { margin-top: 4px; }
.conc-mas-fila > summary { padding: 0 8px; font-size: 13px; border-color: transparent; background: transparent; color: #94a3b8; }
.conc-mas-fila[open] > summary, .conc-mas-fila > summary:hover { color: #475569; background: #f1f5f9; }
.conc-mas-fila .conc-mas-menu { position: static; box-shadow: none; border: 1px solid #e2e8f0; margin-top: 4px; min-width: 0; }
.conc-bloque { background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid var(--accent-blue); border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
.conc-bloque > summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.conc-n { font-weight: 700; font-size: 11px; background: #f1f5f9; color: #475569; border-radius: 10px; padding: 1px 8px; margin-left: 4px; }
.conc-arch { font-size: 11.5px; color: var(--text-muted); margin: 4px 0 8px; }
.conc-arch > summary { cursor: pointer; }
.conc-arch-fila { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px solid #f1f5f9; }
.conc-arch-fila a { margin-left: 8px; }
.hoy-por-entregar { margin-top: 8px; border-top: 1px dashed #e2e8f0; padding-top: 8px; color: #64748b; font-size: 12.5px; }
.hoy-por-entregar > summary { cursor: pointer; font-weight: 700; }

/* v181 · Autocompletar con menú (clientes / proveedores) */
.ac-panel { z-index: 10050; overflow-y: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 12px 30px rgba(15,23,42,.22); padding: 4px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.ac-cab { font-size: 10.5px; font-weight: 800; color: #94a3b8; text-transform: uppercase; padding: 5px 9px 3px; }
.ac-op { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; color: #1e293b; }
.ac-op small { color: #94a3b8; font-size: 11px; white-space: nowrap; }
.ac-op:hover, .ac-op.on { background: #e0f2fe; }
.ac-estado { margin-top: 4px; font-size: 11.5px; line-height: 1.45; }
.ac-aviso { color: #b45309; }
.ac-aviso a { color: #0369a1; }
.ac-aviso .ac-nuevo { color: #64748b; margin-left: 4px; }
.ac-nuevo-txt { color: #64748b; }
.ac-btn { background: #fff; border: 1px solid #16a34a; color: #15803d; border-radius: 6px; padding: 2px 9px; font-size: 11.5px; font-weight: 800; cursor: pointer; margin-left: 4px; }
.ac-btn:hover { background: #f0fdf4; }

/* 💰 Kanban: «Por cobrar / facturar» agrupado por cliente (v204) */
.kb-barra { display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); padding:0 4px 6px; }
.kb-barra a { color:var(--accent-blue); font-weight:700; text-decoration:none; }
details.kb-grupo { margin-bottom:8px; background:var(--bg-card, #fff); border:1px solid var(--border-color, #e2e8f0); border-radius:10px; overflow:hidden; }
details.kb-grupo > summary { cursor:pointer; padding:9px 34px 9px 12px; list-style:none; display:block; position:relative; }
.kb-nom, .kb-res { display:block; }
details.kb-grupo > summary::-webkit-details-marker { display:none; }
details.kb-grupo > summary::before { content:'▶'; position:absolute; right:12px; top:12px; font-size:11px; color:var(--text-muted); }
details.kb-grupo[open] > summary::before { content:'▼'; }
details.kb-grupo[open] > summary { border-bottom:1px solid var(--border-color, #e2e8f0); background:rgba(0,0,0,.02); }
.kb-nom { font-weight:900; font-size:13px; color:#0f172a; text-transform:uppercase; }
.kb-res { font-size:11.5px; color:var(--text-muted); }
.kb-rojo { color:var(--accent-red); font-weight:800; }
.kb-amb { color:var(--accent-amber); font-weight:800; }
details.kb-grupo > .kb-cuerpo { padding:8px; }
details.kb-grupo > .kb-cuerpo .card { margin-bottom:8px; }

/* v230: menú Herramientas del Almacén y botón Fusionar solo cuando hay marcados */
#avBtnFus:disabled { display:none; }
details.sp-herr > summary::-webkit-details-marker { display:none; }
.sp-herr-menu button:hover { background:#f1f5f9 !important; }

/* ============================================================
   v261 — menú en 5 grupos con nombre · cotizador por pasos · seguimiento · carga de la semana · datos de factura
   ============================================================ */
.nav-grupo { display: flex; gap: 2px; position: relative; flex-shrink: 0; }
.nav-grupo::before { content: attr(data-g); position: absolute; top: 4px; left: 0; right: 0; text-align: center; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #a8a29e; pointer-events: none; white-space: nowrap; }
@media (max-width: 1480px) { .nav-grupo::before { top: 2px; font-size: 7.5px; } }
@media print { .nav-grupo::before { display: none; } }
.cp-bloque { position: relative; }
.cp-toggle { position: absolute; top: -11px; right: 12px; z-index: 2; background: #fff; border: 1px solid var(--border-color); border-radius: 14px; padding: 2px 10px; font-size: 11px; font-weight: 700; color: var(--text-muted); cursor: pointer; font-family: var(--font-body); max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-toggle:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.cp-toggle .cp-res { color: var(--text-main); font-weight: 600; margin-right: 6px; }
.cp-plegado > :not(.cp-toggle):not(.sub-block-title):not(.section-title) { max-height: 0 !important; overflow: hidden !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top-width: 0 !important; border-bottom-width: 0 !important; opacity: 0; }
.cp-plegado { padding-bottom: 8px !important; }
.cp-plegado > .sub-block-title, .cp-plegado > .section-title { margin-bottom: 0 !important; padding-right: 45%; }
.cp-todo { display: inline-flex; gap: 4px; }
.cp-todo button { background: #f8fafc; border: 1px dashed var(--border-color); border-radius: 7px; padding: 3px 8px; font-size: 11px; font-weight: 700; cursor: pointer; color: var(--text-muted); }
.hoy-fila-acc button.hoy-btn-wa { background: #f0fdf4; border-color: #86efac; color: #15803d; font-weight: 700; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cs-dia { background: var(--bg-input-soft, #f8fafc); border: 1px solid var(--border-color); border-radius: 8px; padding: 6px; min-height: 60px; }
.cs-dia.cs-cargado { border-color: #f59e0b; background: #fffbeb; }
.cs-dia-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 12px; margin-bottom: 3px; }
.cs-dia-h span { font-size: 10.5px; color: var(--text-muted); }
.cs-barra { height: 3px; background: #e2e8f0; border-radius: 2px; overflow: hidden; margin-bottom: 5px; }
.cs-barra i { display: block; height: 100%; background: #0284c7; }
.cs-item { background: #fff; border-radius: 5px; padding: 3px 6px; margin-bottom: 4px; font-size: 11px; cursor: pointer; line-height: 1.25; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.cs-item span { color: var(--text-muted); }
.cs-item small { display: block; font-weight: 700; font-size: 10px; }
.cs-item:hover { outline: 1px solid var(--accent-blue); }
.cs-libre { font-size: 11px; color: #94a3b8; text-align: center; padding: 8px 0; }
.df-cp { background: none; border: none; cursor: pointer; font-size: 11px; padding: 0 2px; opacity: .65; }
.df-cp:hover { opacity: 1; }

/* ============================================================
   v268 — Dirección · Planeación · Flujo
   ============================================================ */
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.dr-tile { background: var(--bg-card, #fff); border: 1px solid var(--border-color); border-top: 3px solid #0f766e; border-radius: 10px; padding: 10px 12px; }
.dr-t { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.dr-v { font-size: 24px; font-weight: 800; font-family: var(--font-display, inherit); margin: 2px 0; }
.dr-d { font-size: 11px; color: var(--text-muted); }
.dr-n { font-size: 11px; color: #475569; margin-top: 3px; }
.dr-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.dr-fila { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid #f1f5f9; font-size: 13px; }
.dr-barras { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 8px; }
.dr-barra { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.dr-barra i { display: block; width: 100%; background: #99f6e4; border-radius: 4px 4px 0 0; min-height: 2px; }
.dr-barra small { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
@media print { .dr-grid { grid-template-columns: repeat(3, 1fr); } }
.pl-sin { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pl-card { background: #fff; border: 1px solid var(--border-color); border-radius: 6px; padding: 4px 7px; margin-bottom: 4px; font-size: 11.5px; cursor: pointer; line-height: 1.25; }
.pl-card:hover { outline: 1px solid var(--accent-blue); }
.pl-card span { color: var(--text-muted); }
.pl-card small { display: block; font-size: 10.5px; color: #475569; }
.pl-card select { margin-top: 3px; font-size: 11px; padding: 2px; width: 100%; }
.pl-tabla { border-collapse: collapse; width: 100%; min-width: 900px; }
.pl-tabla th { font-size: 11px; padding: 5px; background: #f1f5f9; text-align: left; vertical-align: top; position: sticky; top: 0; }
.pl-tabla tbody th { width: 120px; background: #f8fafc; }
.pl-tabla td { border: 1px solid #e2e8f0; vertical-align: top; padding: 4px; min-width: 90px; height: 54px; }
.pl-tabla .pl-hoy { background: #f0fdfa; }
.pl-tabla td.pl-justo { background: #fffbeb; }
.pl-tabla td.pl-lleno { background: #fef2f2; }
.pl-n { font-size: 10px; font-weight: 800; color: #64748b; text-align: right; }

/* v269 — Expediente del cliente */
.ex-tabla tr.ex-on td { background: #eff6ff; }
.ex-mes { border-top: 1px solid var(--border-color); }
.ex-mes-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 2px; cursor: pointer; font-size: 13px; }
.ex-mes-h small { color: var(--text-muted); }
.ex-cadena { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; padding: 6px 0 10px 14px; border-bottom: 1px dashed #e2e8f0; }
.ex-paso { flex: 1 1 170px; display: flex; gap: 6px; background: #fff; border: 1px solid var(--border-color); border-top: 3px solid #cbd5e1; border-radius: 8px; padding: 6px 8px; min-width: 150px; }
.ex-paso.ok { border-top-color: #22c55e; }
.ex-paso.mal { border-top-color: #ef4444; background: #fffafa; }
.ex-paso.gris { opacity: .7; }
.ex-ico { font-size: 16px; }
.ex-txt { font-size: 12px; line-height: 1.35; min-width: 0; }
.ex-txt b { display: block; }
.ex-txt small { color: #475569; }
.ex-acc { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.ex-acc button { background: var(--bg-input-soft, #f8fafc); border: 1px solid var(--border-color); border-radius: 6px; padding: 2px 7px; font-size: 11px; cursor: pointer; }
.ex-flecha { align-self: center; color: #94a3b8; font-weight: 800; }
@media print { .ex-acc, #exExpediente .cb-btn { display: none !important; } }

/* v295: cotización con el diseño de los PDF de Alamoprint (js/cotizacion-diseno.js) — se ve como una hoja carta */
.cd-hoja { font-feature-settings: 'calt' 0; position: relative; background: #fff; width: 8.5in; max-width: 100%; min-height: 11in; margin: 0 auto; padding: 0.6in 0.62in 1.05in; box-sizing: border-box; box-shadow: 0 1px 8px rgba(15,23,42,.12); }
.cd-pie { position: absolute; left: 0; right: 0; bottom: 0; height: 0.55in; }
#modalPrintArea:has(.cd-hoja) { background: #eef0f2; padding: 18px; }
@media print {
    .cd-hoja { width: auto !important; max-width: none !important; min-height: 9.85in !important; padding: 0.25in 0.35in 0.9in !important; box-shadow: none !important; margin: 0 !important; }
    #modalPrintArea:has(.cd-hoja) { background: #fff !important; padding: 0 !important; border: none !important; }
}

/* ===== v309: tarjeta compacta del Monitor de producción ===== */
#tab-kanban .card.kb2 { padding: 9px 10px; margin-bottom: 8px; border-left: 3px solid var(--border-color-strong, #cbd5e1); box-shadow: none; }
#tab-kanban .card.kb2.kb2-tarde { border-left-color: #dc2626; }
#tab-kanban .card.kb2.kb2-hoy { border-left-color: #f59e0b; }
#tab-kanban .kb2-t { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
#tab-kanban .kb2-cli { font-weight: 700; font-size: 13px; color: var(--text-main); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tab-kanban .kb2-fol { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--text-muted); background: none; padding: 0; white-space: nowrap; }
#tab-kanban .kb2-d { font-size: 12px; color: var(--text-muted); margin: 2px 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-kanban .kb2-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
#tab-kanban .kb2-c { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: #f1f5f9; color: #475569; white-space: nowrap; }
#tab-kanban .kb2-c[onclick] { cursor: pointer; }
#tab-kanban .kb2-c.r { background: #fee2e2; color: #b91c1c; font-weight: 700; }
#tab-kanban .kb2-c.a { background: #fef3c7; color: #92400e; }
#tab-kanban .kb2-chips > span > span { margin-left: 0 !important; border-radius: 10px !important; }
#tab-kanban .kb2-nota { font-size: 11.5px; color: #475569; font-style: italic; margin: -3px 0 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#tab-kanban .kb2-b { display: flex; gap: 6px; align-items: stretch; }
#tab-kanban .kb2-go { flex: 1; font-size: 11.5px; font-weight: 700; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 6px; color: var(--text-main); cursor: pointer; }
#tab-kanban .kb2-go:hover { background: #f8fafc; border-color: #94a3b8; }
#tab-kanban .kb2-ok { flex: 1; font-size: 11.5px; color: #15803d; padding: 5px 0; }
#tab-kanban .kb2-mas { font-size: 13px; line-height: 1; border: 1px solid #e2e8f0; background: #fff; border-radius: 6px; padding: 4px 10px; color: #64748b; cursor: pointer; }
#tab-kanban .kb2-menu { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; }
#tab-kanban .kb2-lbl { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin: 4px 0 3px; }
#tab-kanban .kb2-menu select, #tab-kanban .kb2-menu textarea { width: 100%; box-sizing: border-box; font-size: 12px; padding: 5px 7px; border: 1px solid var(--border-color); border-radius: 6px; font-family: inherit; }
#tab-kanban .kb2-menu textarea { resize: vertical; min-height: 44px; height: auto; overflow: auto; }
#tab-kanban .kb2-acc { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
#tab-kanban .kb2-c.pj { background:#f5f3ff; color:#6d28d9; cursor:pointer; }