/* ═══ Motor Comercial · Command Center v2 — app.css ═══ CSS íntegro del prototipo aprobado (fidelidad 1:1), sin el :root (vive en tokens.css) y sin la .devbar de demo (vive en dev.css). Al final: bloque @media (max-width:768px) que espeja las reglas body.mobile para dispositivos reales (sin el marco de teléfono). */ *{box-sizing:border-box} html,body{margin:0;height:100%;background:var(--ground);color:var(--text);font-family:var(--fb);font-size:14px;-webkit-font-smoothing:antialiased;overflow:hidden} button{font-family:var(--fb)}.mono{font-family:var(--fm)} ::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:9px}::-webkit-scrollbar-track{background:transparent} #app{display:flex;flex-direction:column;height:100vh;position:relative;/* Jean 27-ago: cero scroll horizontal. `#ficha` y `#drawer` se estacionan fuera de pantalla con transform:translateX(430px) y eso ESTIRA el documento: el `overflow:hidden` de oculta la barra pero no impide el desplazamiento por script, así que la página se corría 430 px. `clip` recorta SIN crear contenedor de scroll — por eso no rompe los position:sticky de adentro, que es lo que sí haría `hidden`. `position:relative` es la otra mitad: sin él `#app` no es el bloque contenedor de esos paneles absolutos y su recorte no les aplica — clipear no sirve de nada si el elemento no cuelga de ti. */overflow-x:clip} #topbar{height:52px;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--nav);border-bottom:1px solid var(--nav2);flex-shrink:0;z-index:30} .brand{font-family:var(--fd);font-weight:800;font-size:14px;letter-spacing:.02em;display:flex;align-items:center;gap:8px;white-space:nowrap} .brand .dot{width:9px;height:9px;border-radius:2px;background:var(--teal);box-shadow:0 0 10px var(--teal)}.brand b{color:var(--teal)} .tb-spacer{flex:1} .tb-kpis{display:flex;gap:18px}.tb-kpis .k{text-align:right}.tb-kpis .k b{font-family:var(--fm);font-size:15px;color:var(--text);display:block;line-height:1}.tb-kpis .k.acc b{color:var(--warning)} .tb-kpis .k span{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#8FA0BC} .tb-inv{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text2);border-radius:var(--r-md);padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer} .tb-user{display:flex;align-items:center;gap:9px}.tb-user .nm{font-size:12px;font-weight:600;text-align:right;line-height:1.2}.tb-user .nm span{color:#8FA0BC;font-size:10px} .tb-av{width:32px;height:32px;border-radius:var(--r-full);background:linear-gradient(135deg,var(--copper),#8A6446);display:flex;align-items:center;justify-content:center;font-weight:800;color:#1a1206;font-size:12px} /* co-branding cliente × Motor Comercial */ .cobrand{display:flex;align-items:center;gap:11px} .cb-mk{width:27px;height:27px;border-radius:7px;background:linear-gradient(135deg,var(--teal),#067775);display:flex;align-items:center;justify-content:center;color:#04201F;font-weight:800;font-size:13px;font-family:var(--fd);flex:0 0 auto} .cb-name{font-family:var(--fd);font-weight:800;font-size:13.5px;color:var(--teal);white-space:nowrap} .cb-x{color:rgba(255,255,255,.28);font-size:15px} .cb-client{display:flex;align-items:center;gap:8px} .cb-cmk{width:27px;height:27px;border-radius:7px;background:linear-gradient(135deg,var(--copper),#8A6446);display:flex;align-items:center;justify-content:center;color:#1a1206;font-weight:800;font-size:13px;font-family:var(--fd);flex:0 0 auto} .cb-cname{font-family:var(--fd);font-weight:700;font-size:13px;color:var(--text);white-space:nowrap} .cb-cmk.jvc{width:auto;padding:0 9px;border-radius:6px;background:#0A0E14;color:#fff;font-size:12.5px;letter-spacing:.1em;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.4)} body.mobile .cb-name,body.mobile .cb-x{display:none} /* switch de línea de producto (B2C/B2B) */ .lineswitch{display:inline-flex;align-items:center;gap:8px;margin-left:16px} /* EN LA CABINA REAL NACE OCULTO (Jean 27-ago: "cuando hago refresh siempre aparece primero la barra azul que dice B2B o B2C… no debe salir eso con nadie"). Estaba visible por defecto con las etiquetas de EJEMPLO de la maqueta ("Hogar / Negocio"), y el JS lo escondía recién cuando llegaba la configuración del cliente: en cada carga destellaba un control ajeno. Solo se muestra cuando el servidor confirma que ESE cliente maneja 2+ líneas — mostrar primero y corregir después es enseñar datos de otro. La maqueta estática (sin `mc-live`) lo conserva. */ body.mc-live .lineswitch{display:none} body.mc-live .lineswitch.on{display:inline-flex} .ls-lbl{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .lineswitch button{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);color:var(--muted);font:inherit;font-size:12px;font-weight:600;padding:5px 11px;cursor:pointer;transition:.15s} .lineswitch button:first-of-type{border-radius:8px 0 0 8px} .lineswitch button:last-of-type{border-radius:0 8px 8px 0;border-left:none} .lineswitch button:hover{color:var(--text2)} .lineswitch button em{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.05em;opacity:.65;padding:1px 4px;border-radius:4px;background:rgba(255,255,255,.07)} .lineswitch button.on{color:var(--text);background:var(--surface2)} .lineswitch button.on[data-line=b2c]{border-color:var(--teal-line);box-shadow:inset 0 0 0 1px var(--teal-line)} .lineswitch button.on[data-line=b2b]{border-color:var(--copper);box-shadow:inset 0 0 0 1px var(--copper)} .lineswitch button.on em{opacity:1;color:var(--text)} body.mobile .ls-lbl,body.mobile .lineswitch em{display:none} body.mobile .lineswitch{margin-left:8px} body.mobile .lineswitch button{padding:5px 8px} .ob-bar{width:34px;height:2px;background:var(--border);margin:0 9px}.ob-bar.done{background:var(--teal)} body.mobile .ob-bar{width:16px;margin:0 4px} #tabbar{height:46px;display:flex;align-items:stretch;gap:2px;padding:0 12px;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0;z-index:29;overflow-x:auto} .tab{display:flex;align-items:center;gap:7px;padding:0 15px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;transition:color .15s;white-space:nowrap} .tab:hover{color:var(--text2)}.tab.on{color:var(--teal);border-bottom-color:var(--teal)} .tab svg{width:17px;height:17px;flex:0 0 auto;opacity:.8}.tab.on svg{opacity:1} #content{flex:1;position:relative;overflow:hidden} .view{position:absolute;inset:0;overflow:auto;padding:20px 22px;display:none}.view.on{display:block} .vhead{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap} .vtitle{font-family:var(--fd);font-size:19px;font-weight:700;letter-spacing:-.01em}.spacer{flex:1} .chip{background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:var(--r-md);padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s} .chip:hover{color:var(--text2)}.chip.on{background:var(--teal-dim);border-color:var(--teal-line);color:var(--teal-bright)}.chip b{color:var(--text)} .datechips{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:3px} .dchip{background:none;border:none;color:var(--muted);font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:var(--r-sm);cursor:pointer}.dchip.on{background:var(--surface2);color:var(--text)} .search{background:var(--ground);border:1px solid var(--border);color:var(--text);border-radius:var(--r-md);padding:8px 12px;font-family:var(--fb);font-size:13px;min-width:200px} .search:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(10,191,188,.2)} .btn{border:none;border-radius:var(--r-md);padding:9px 16px;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:filter .12s} .btn:hover{filter:brightness(1.08)}.btn.primary{background:var(--teal);color:#04201F}.btn.copper{background:var(--copper);color:#1a1206} .btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text2)}.btn.ghost:hover{border-color:var(--teal-line);color:var(--text)} .btn.danger{background:transparent;border:1px solid var(--error-dim);color:#F58C85}.btn.sm{padding:6px 11px;font-size:12px}.btn:disabled{opacity:.5;cursor:default;filter:none} .pill{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:var(--r-full);white-space:nowrap} .pill.hot{background:var(--error-dim);color:#F58C85}.pill.warm{background:var(--warning-dim);color:var(--warning)}.pill.cold{background:rgba(123,160,212,.16);color:var(--navylink)} .pill.wa{background:rgba(37,211,102,.15);color:var(--wa)}.pill.ds1{background:rgba(177,125,96,.18);color:var(--copper,#B17D60)} /* conteo EN JUEGO por línea en el switch (Jean 24-ago: "no aparecen" = estaban en la otra línea) */ #lineswitch button i.cnt{font-style:normal;margin-left:6px;min-width:18px;padding:0 5px;border-radius:9px;font-size:10px;font-weight:700;line-height:16px;background:var(--surface2);color:var(--muted)} #lineswitch button.on i.cnt{background:var(--copper,#B17D60);color:#fff} #lineswitch button i.cnt.fresh{background:var(--copper,#B17D60);color:#fff;box-shadow:0 0 0 3px rgba(177,125,96,.25)} /* Origen: Technera cc_static/v2/app.css:1-79 (capa genérica portable) — heredado 2026-08-31 */