/* ===================================================================== CURIFOR POST VENTA — hoja de estilo única ===================================================================== */ /* 09/09/2026 — pasada de rediseño visual, a pedido de Cristóbal ("moderna, amigable, que muestre profesionalidad de desarrollo"). Antes de tocar nada se revisó la hoja completa: ya venía de una pasada de espaciado del 08/09 y la base (paneles oscuros, chips en pastilla, tabular-nums, fuente de sistema) ya era sólida — así que este paso es un refinamiento de la MISMA base (paleta más rica, esquinas y sombras algo más suaves, un par de detalles de foco/hover), no una reescritura estructural. A propósito se dejaron intactas todas las reglas que el comentario de abajo (08/09) ya marcaba como sensibles a geometría calculada en JS (`.tb-*`, `.jpcb-*` anchos/posiciones, `.vcuf-*` porcentajes del PDF) — solo se les tocó color, nunca tamaño/posición. */ :root{ --bg:#0c0e13; --panel:#14171e; --panel2:#191d26; --panel3:#212633; --linea:#262c38; --linea2:#333a48; --txt:#eef1f6; --txt2:#9aa5b5; --txt3:#6b7482; --azul:#4f7cf5; --azul2:#182449; --azulc:#9db4fb; --verde:#2fbf71; --verde2:#0f2b1e; --verdec:#8ee9b8; --ambar:#f0a92e; --ambar2:#332609; --ambarc:#f8cf7d; --rojo:#ef5461; --rojo2:#33161a; --rojoc:#f7a8b0; --morado:#a875f5; --morado2:#241a3d; --moradoc:#d7bffa; --cyan:#22c3dd; --cyan2:#0b2830; --cyanc:#8fe6f2; --r:12px; --sombra:0 8px 28px rgba(0,0,0,.45); /* 25/09/2026 — tokens nuevos: son los mismos colores que ya vivían sueltos (código de color a mano) en varias reglas de más abajo — .c-INTERNO/.tc-otro, bordes de tabla, la raya de "no disponible" del tablero, etc. Se les puso nombre para poder darles un valor distinto en modo claro (ver el bloque [data-theme="light"] al final del archivo) sin tocar su apariencia actual en modo oscuro — el valor de acá es EXACTAMENTE el mismo hex que ya estaba escrito a mano en cada sitio, cero cambio visual en oscuro. */ --neutro-bg:#292933; --neutro-txt:#c3c3ce; --sutil-bg:#1f242d; --borde-tabla:#1d222c; --fila-hover:#1a202a; --divisor-tablero:#1b2029; --raya-nodisp:#1a1f28; --tarjeta-libre-borde:#1d4d31; --login-glow:#1b2036; --login-err-borde:#5a2328; --jpcb-panel-bg:rgba(255,255,255,.025); --jpcb-panel-tit-bg:rgba(255,255,255,.035); --jpcb-cerrada-hover-bg:rgba(255,255,255,.06); --fade-fondo-0:rgba(20,23,30,0); --fade-fondo-1:rgba(20,23,30,.85); --sombra-cab:0 4px 10px rgba(0,0,0,.18); --sombra-tablero-hover:0 4px 12px rgba(0,0,0,.45); --sombra-login-caja:0 20px 60px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.03) inset; --sombra-boton-pri:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(91,124,250,.22); --sombra-boton-pri-hover:0 2px 4px rgba(0,0,0,.3),0 8px 24px rgba(91,124,250,.4); } *{box-sizing:border-box;} html,body{height:100%;margin:0;} body{background:var(--bg);color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:14.5px;line-height:1.55;overflow:hidden; -webkit-font-smoothing:antialiased;} ::-webkit-scrollbar{width:9px;height:9px;} ::-webkit-scrollbar-thumb{background:var(--linea2);border-radius:9px;} ::-webkit-scrollbar-track{background:transparent;} /* 08/09/2026 — pasada de espaciado general: Cristóbal reportó que la App se siente "apretada" en general (tablas, paneles, pestañas, controles). Se subieron paddings, gaps y algunos tamaños de letra chicos en las reglas COMPARTIDAS de abajo, que es lo que da más aire en todos los módulos a la vez. A propósito NO se tocó nada dentro de "PLANIFICADOR" (`.tb-*`, el tablero por horas) ni "JPCB" (`.jpcb-*`, el kanban) ni el overlay del VCU (`.vcuf-*`) — esas tres áreas tienen su geometría calculada en JS en base a los valores actuales de esta hoja de estilo (posiciones/anchos en píxeles para el tablero de horas, franjas del PDF escaneado en el VCU); cambiarlas acá sin tocar el JS que las calcula las desalinea. */ button,select,input,textarea{font-family:inherit;font-size:14px;color:var(--txt); background:var(--panel2);border:1px solid var(--linea);border-radius:8px;padding:9px 13px; transition:border-color .15s,background .15s,box-shadow .15s;} button,select{cursor:pointer;} button:hover:not(:disabled){border-color:var(--azul);} button:disabled{opacity:.45;cursor:not-allowed;} button.pri{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.35),0 0 0 0 rgba(79,124,245,0);} button.pri:hover:not(:disabled){background:#6690f7;box-shadow:0 2px 10px rgba(79,124,245,.35);} button.gh{background:transparent;border-color:transparent;color:var(--txt2);padding:7px 11px;} button.gh:hover{background:var(--panel2);color:var(--txt);border-color:transparent;} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul); box-shadow:0 0 0 3px rgba(79,124,245,.18);} textarea{resize:vertical;width:100%;} a{color:var(--azulc);} /* ---------------- LOGIN ---------------- */ .login{height:100vh;display:grid;place-items:center;padding:20px;overflow:auto; background:radial-gradient(1100px 700px at 50% -10%,#171c2c 0%,var(--bg) 60%);} .login .caja{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--linea); border-radius:18px;padding:34px 32px;box-shadow:var(--sombra);} .login .marca{display:flex;align-items:center;gap:11px;margin-bottom:5px;} .login .logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--azul),#2f4fd6); display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff; box-shadow:0 4px 14px rgba(79,124,245,.35);} .login h1{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em;} .login .sub{color:var(--txt3);font-size:12.5px;margin:0 0 22px 49px;} .login label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em; color:var(--txt3);font-weight:700;margin:0 0 5px;} .login input{width:100%;margin-bottom:14px;padding:10px 12px;} .login button{width:100%;padding:10px;} .login .err{background:var(--rojo2);border:1px solid var(--login-err-borde);color:var(--rojoc); border-radius:8px;padding:9px 12px;font-size:12.5px;margin-bottom:14px;} .login .demo{margin-top:20px;padding-top:18px;border-top:1px solid var(--linea);} .login .demo p{margin:0 0 9px;font-size:11.5px;color:var(--txt3);} .login .demo select{width:100%;} /* ---------------- ESTRUCTURA ---------------- */ .app{display:grid;grid-template-columns:222px 1fr;height:100vh;} .lateral{background:var(--panel);border-right:1px solid var(--linea); display:flex;flex-direction:column;min-height:0;} .lat-top{padding:17px 17px 15px;border-bottom:1px solid var(--linea);} .lat-top .marca{display:flex;align-items:center;gap:10px;} .lat-top .logo{width:29px;height:29px;border-radius:8px; background:linear-gradient(135deg,var(--azul),#1d4ed8);display:grid;place-items:center; font-weight:800;font-size:12px;color:#fff;} .lat-top .n{font-size:14px;font-weight:700;line-height:1.25;} .lat-top .s{font-size:11px;color:var(--txt3);} nav{flex:1;overflow-y:auto;padding:10px 10px 16px;} nav .grupo{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--txt3); font-weight:700;padding:14px 10px 6px;} nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px; color:var(--txt2);text-decoration:none;font-size:13.5px;margin-bottom:2px;cursor:pointer; border-left:2px solid transparent;transition:background .15s,color .15s;} nav a:hover{background:var(--panel2);color:var(--txt);} nav a.on{background:var(--azul2);color:var(--azulc);font-weight:600;border-left-color:var(--azul);} nav a .ic{width:17px;text-align:center;font-size:14px;} nav a .badge{margin-left:auto;font-size:10px;background:var(--azul);color:#fff; padding:1px 6px;border-radius:99px;font-weight:700;} /* 29/09/2026 — campanita de Notificaciones (menciones), separada de los grupos de módulos por su propia línea, para que se note apenas se abre el menú. El conteo usa rojo (no el azul genérico de arriba) a propósito: es la única señal de "alguien te necesita", conviene que destaque más que un contador cualquiera. */ #nav-notif{border-bottom:1px solid var(--linea);border-radius:0;margin:0 0 8px;padding:10px 11px 14px;} #nav-notif .badge{background:var(--rojo);} #nav-notif.on{background:transparent;border-left-color:transparent;color:var(--txt);} .lat-pie{border-top:1px solid var(--linea);padding:11px 14px;} .lat-pie .yo{display:flex;align-items:center;gap:9px;} .av{width:29px;height:29px;border-radius:99px;background:var(--azul2);color:var(--azulc); display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 auto;} .lat-pie .n{font-size:12.5px;font-weight:600;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .lat-pie .r{font-size:10.5px;color:var(--txt3);} /* 17/09/2026 — flecha para ocultar/mostrar el menú lateral en computador (ver detalle de por qué escopeado a escritorio en la media query de abajo, junto a las demás reglas de @media(max-width:1080px)). Oculta por defecto acá arriba; se muestra solo dentro de esa media query — el mismo truco de orden (regla incondicional ANTES, la que la enciende DESPUÉS) que ya se usó con .p-det-volver, 15/09/2026. */ .lat-toggle{display:none;} .principal{display:flex;flex-direction:column;min-width:0;min-height:0;} .barra{display:flex;align-items:center;gap:13px;padding:12px 18px; border-bottom:1px solid var(--linea);background:var(--panel);min-height:55px;} .barra h2{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;min-width:0;} .sp{flex:1;min-width:8px;} .vivo{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--txt2);white-space:nowrap;flex:0 0 auto;} .dot{width:7px;height:7px;border-radius:99px;background:var(--verde);animation:lat 2.4s infinite;} @keyframes lat{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} .gente{display:flex;align-items:center;} .gente .av{width:25px;height:25px;font-size:9.5px;margin-left:-6px; border:2px solid var(--panel);} .gente .av:first-child{margin-left:0;} .pill{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:3px 9px;border-radius:99px;background:var(--ambar2);color:var(--ambarc);white-space:nowrap;} /* 15/09/2026 — celular: la barra de arriba (menú + título + gente conectada + "en vivo") no tenía forma de encogerse y en pantalla angosta se salía del ancho de la pantalla (toda la App quedaba con scroll horizontal, en TODAS las vistas, no solo Planificador). El título ahora se recorta con "…" si no cabe, y el texto "en vivo" se oculta dejando solo el punto verde animado — la información (que sigue en vivo) no se pierde, solo el rótulo, que es lo que sobraba de ancho. */ @media (max-width:600px){ .vivo-txt{display:none;} } .vista{flex:1;min-height:0;overflow:hidden;display:flex;} /* ---------------- MÓDULO CASOS ---------------- */ .split{display:grid;grid-template-columns:minmax(480px,1fr) minmax(430px,560px); width:100%;min-height:0;} .col{display:flex;flex-direction:column;min-width:0;min-height:0;} .col.izq{border-right:1px solid var(--linea);} .col.der{background:var(--panel);} .filtros{display:flex;flex-wrap:wrap;gap:10px;padding:13px 16px; border-bottom:1px solid var(--linea);align-items:center;} .filtros input[type=search]{flex:1;min-width:140px;} .cnt{font-size:12px;color:var(--txt3);white-space:nowrap;} .gf-lbl-sel{display:flex;flex-direction:column;gap:3px;} .gf-lbl{font-size:11.5px;color:var(--txt3);} /* ---- Filtro global — desplegables propios (23/09/2026) ------------ */ .gf-drop{position:relative;} .gf-drop-btn{display:flex;align-items:center;gap:7px;background:var(--panel2); border:1px solid var(--linea);border-radius:8px;padding:7px 10px;font-size:12.5px; color:var(--txt);cursor:pointer;white-space:nowrap;max-width:190px;} .gf-drop-btn:hover:not(:disabled){border-color:var(--azul);} .gf-drop-btn:disabled{cursor:default;opacity:.6;} .gf-drop.abierto .gf-drop-btn{border-color:var(--azul);background:var(--azul2);color:var(--azulc);} .gf-drop-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .gf-drop-flecha{font-size:9px;color:var(--txt3);margin-left:auto;} .gf-drop.abierto .gf-drop-flecha{color:var(--azulc);transform:rotate(180deg);} .gf-drop-panel{position:absolute;top:100%;left:0;z-index:20;margin-top:4px; min-width:180px;max-width:260px;max-height:260px;overflow-y:auto; background:var(--panel2);border:1px solid var(--linea2);border-radius:8px; box-shadow:var(--sombra);padding:4px;} .gf-drop-item{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:6px; font-size:12.5px;color:var(--txt2);cursor:pointer;} .gf-drop-item:hover{background:var(--panel3);color:var(--txt);} .gf-drop-item.on{color:var(--azulc);} .gf-drop-item input[type=checkbox]{margin:0;accent-color:var(--azul);} .gf-drop-item .gf-drop-marca{font-size:11px;width:12px;text-align:center;color:var(--txt3);} .gf-drop-item.on .gf-drop-marca{color:var(--azulc);} .gf-drop-item.vacio{color:var(--txt3);cursor:default;} .gf-drop-item.vacio:hover{background:transparent;} .gf-drop-acciones{display:flex;gap:4px;padding:2px 4px 6px;margin-bottom:4px; border-bottom:1px solid var(--linea);} .gf-drop-mini{background:transparent;border:none;color:var(--azulc);font-size:11px; cursor:pointer;padding:2px 5px;border-radius:4px;} .gf-drop-mini:hover{background:var(--panel3);} .tabla{flex:1;overflow:auto;min-height:0;} table{width:100%;border-collapse:collapse;font-size:13px;} thead th{position:sticky;top:0;z-index:2;text-align:left;padding:10px 13px;font-size:10.5px; text-transform:uppercase;letter-spacing:.05em;color:var(--txt3);background:var(--panel2); border-bottom:1px solid var(--linea);white-space:nowrap;} td{padding:10px 13px;border-bottom:1px solid var(--borde-tabla);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:170px;} tbody tr{cursor:pointer;} tbody tr:hover td{background:var(--fila-hover);} tbody tr.sel td{background:var(--azul2);} tbody tr.pulso td{animation:pulso 1.6s ease-out;} @keyframes pulso{0%{background:var(--verde2)}100%{background:transparent}} .folio{font-weight:700;} .num{text-align:right;font-variant-numeric:tabular-nums;} .d3{color:var(--rojoc);font-weight:700;} .d2{color:var(--ambarc);font-weight:700;} .d1{color:var(--txt2);} .chip{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px; text-transform:uppercase;letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);} .c-DYP{background:var(--azul2);color:var(--azulc);} .c-GARANTIA{background:var(--morado2);color:var(--moradoc);} .c-REVISAR{background:var(--ambar2);color:var(--ambarc);} .c-CG{background:var(--cyan2);color:var(--cyanc);} .c-COBRAR{background:var(--verde2);color:var(--verdec);} .c-INTERNO{background:var(--neutro-bg);color:var(--neutro-txt);} .c-none{background:var(--sutil-bg);color:var(--txt3);} .c-ESPERA{background:var(--rojo2);color:var(--rojoc);} .mini{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--txt3);margin-right:5px;} .mini.ok{color:var(--verdec);} /* ---- Tipo de cliente — chip llamativo junto al folio (23/09/2026) --- */ .chip-tc{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700; padding:3px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.03em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);white-space:nowrap;vertical-align:middle;} .chip-tc.mini{font-size:9px;padding:1px 7px;margin-top:3px;} .tc-particular{background:var(--cyan2);color:var(--cyanc);} .tc-seguro{background:var(--morado2);color:var(--moradoc);} .tc-garantia{background:var(--ambar2);color:var(--ambarc);} .tc-interno{background:var(--azul2);color:var(--azulc);} .tc-otro{background:var(--neutro-bg);color:var(--neutro-txt);} /* La columna Folio del listado de Casos pasa a 2 líneas (folio arriba, chip de tipo de cliente abajo) para mostrar el texto completo del tipo de cliente sin cortarlo — el resto de las columnas sigue truncando con "..." como antes (regla general de la línea 201). Escopado a esta tabla en particular (.tabla es únicaen el módulo de Casos) para no afectar otras listas que también usan class="folio" (Cuenta Ficha, Facturas X, etc.), que sí deben seguir en una sola línea. .tabla es única en este módulo — ver mod-casos.js, la única vez que aparece. */ .tabla td.folio{white-space:normal;overflow:visible;text-overflow:clip;max-width:210px;} .folio-linea{white-space:nowrap;} .paginacion{display:flex;align-items:center;justify-content:center;gap:16px; padding:10px 16px;border-top:1px solid var(--linea);font-size:12.5px;color:var(--txt3); background:var(--panel);flex-wrap:wrap;} .paginacion:empty{display:none;} .paginacion button{padding:6px 12px;font-size:13px;} /* 23/09/2026 — se repite arriba de la tabla (mismo estilo, borde abajo en vez de arriba) y ahora con números de página, no solo Anterior/Siguiente */ .paginacion-top{border-top:none;border-bottom:1px solid var(--linea);} .pag-nums{display:flex;align-items:center;gap:3px;} .pag-num{padding:5px 10px!important;min-width:30px;} .pag-num.on{background:var(--azul2);color:var(--azulc);border-color:var(--azul);} .pag-elipsis{padding:0 4px;color:var(--txt3);} .pag-total{white-space:nowrap;} .cab{padding:16px 18px;border-bottom:1px solid var(--linea);} .cab .l1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;} .cab h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em;} .cab .l2{margin-top:5px;font-size:13px;color:var(--txt2);} .kpis{display:flex;gap:22px;margin-top:14px;flex-wrap:wrap;} .kpi .v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;} .kpi .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt3);} .tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--linea); overflow-x:auto;background:var(--panel);} .tab{padding:11px 15px;font-size:13px;color:var(--txt2);cursor:pointer;white-space:nowrap; border-bottom:2px solid transparent;transition:color .15s,border-color .15s;} .tab:hover{color:var(--txt);} .tab.on{color:var(--azulc);border-bottom-color:var(--azul);font-weight:600;} .tab .n{font-size:10.5px;background:var(--panel3);padding:1px 7px;border-radius:99px; margin-left:6px;color:var(--txt3);} .cuerpo{flex:1;overflow-y:auto;padding:18px 20px 22px;min-height:0;} .campo{margin-bottom:15px;} .campo label{display:block;margin-bottom:6px;font-size:10.5px;text-transform:uppercase; letter-spacing:.05em;color:var(--txt3);font-weight:700;} .campo select,.campo textarea,.campo input{width:100%;} .ok{font-size:11.5px;color:var(--verde);opacity:0;transition:opacity .3s;} .ok.on{opacity:1;} .tl{position:relative;padding-left:26px;} .tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--linea);} .ev{position:relative;padding-bottom:22px;} .ev::before{content:"";position:absolute;left:-22px;top:4px;width:11px;height:11px; border-radius:99px;border:2px solid var(--bg);} .ev.coment::before{background:var(--azul);} .ev.doc::before{background:var(--verde);} .ev.rep::before{background:var(--ambar);} .ev.edit::before{background:var(--morado);} .ev.apertura::before{background:var(--txt3);} .ev .h{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--txt3);} .ev .h b{color:var(--azulc);font-weight:600;} .ev .b{font-size:13.5px;margin-top:4px;line-height:1.5;} .et{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase; letter-spacing:.04em;padding:2px 7px;border-radius:99px;margin-right:6px;} .et-coment{background:var(--azul2);color:var(--azulc);} .et-doc{background:var(--verde2);color:var(--verdec);} .et-rep{background:var(--ambar2);color:var(--ambarc);} .et-edit{background:var(--morado2);color:var(--moradoc);} .et-apertura{background:var(--sutil-bg);color:var(--txt3);} .ev.nuevo{animation:entra 1.8s ease-out;} @keyframes entra{0%{background:var(--azul2)}100%{background:transparent}} .lista{border:1px solid var(--linea);border-radius:9px;overflow:hidden;} .lista .it{display:flex;justify-content:space-between;gap:12px;padding:11px 14px; border-bottom:1px solid var(--borde-tabla);font-size:13px;} .lista .it:last-child{border-bottom:none;} .lista .it .s{color:var(--txt3);font-size:12px;} .vacio{color:var(--txt3);font-size:13px;padding:22px 4px;text-align:center;} .barra-com{border-top:1px solid var(--linea);padding:13px 18px;background:var(--panel);} /* ---- Panel de comentarios — botón junto al folio (23/09/2026) ------ */ .com-toggle{margin-left:auto;align-self:center;border-color:var(--linea)!important;} .com-toggle.on{color:var(--azulc);background:var(--azul2);border-color:var(--azul)!important;} .panel-comentarios{border-bottom:1px solid var(--linea);padding:14px 18px;background:var(--panel3);} .panel-comentarios .com-lista{max-height:220px;overflow-y:auto;margin-bottom:14px;} .panel-comentarios .vacio{padding:6px 4px 14px;text-align:left;} .aviso{background:var(--ambar2);border-left:3px solid var(--ambar);border-radius:0 8px 8px 0; padding:11px 14px;font-size:12.5px;color:var(--ambarc);margin-bottom:14px;} /* ---------------- tarjetas / genérico ---------------- */ .rejilla{display:grid;gap:15px;padding:18px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));width:100%; align-content:start;overflow-y:auto;} .tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:18px 20px; transition:border-color .15s,transform .15s,box-shadow .15s;} .tarjeta:hover{border-color:var(--linea2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.3);} .tarjeta .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt3);font-weight:700;} .tarjeta .v{font-size:27px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;} .tarjeta .d{font-size:12px;color:var(--txt3);margin-top:4px;} .centro{flex:1;display:grid;place-items:center;padding:40px;text-align:center;color:var(--txt3);} .centro .g{font-size:34px;margin-bottom:9px;opacity:.5;} .toast{position:fixed;bottom:18px;right:18px;z-index:99;background:var(--panel3); border:1px solid var(--linea2);border-radius:10px;padding:11px 15px;font-size:12.5px; box-shadow:var(--sombra);max-width:330px;animation:sube .25s ease-out;} @keyframes sube{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}} .toast b{color:var(--azulc);} @media(max-width:1080px){ .app{grid-template-columns:1fr;} .lateral{position:fixed;left:-240px;top:0;bottom:0;width:222px;z-index:50;transition:left .2s;} .lateral.abierto{left:0;box-shadow:var(--sombra);} .split{grid-template-columns:1fr;} .col.der{border-top:1px solid var(--linea);} body{overflow:auto;} .app{height:auto;min-height:100vh;} } /* 17/09/2026 — colapso del menú lateral, SOLO en computador (a pedido de Cristóbal, para ganar ancho en el Planificador). Escopeado a min-width:1081px a propósito: bajo ese ancho ya existe el cajón deslizable (☰ arriba, .lateral.abierto) del bloque de arriba — son dos mecanismos distintos para dos anchos distintos, y como los rangos de las media queries no se cruzan nunca (uno es max-width:1080px, este es min-width:1081px) no hay forma de que las reglas de acá le ganen a las de arriba por especificidad, ni al revés. */ @media (min-width:1081px){ .app{position:relative;} .lat-toggle{display:flex;position:absolute;top:17px;left:222px;transform:translateX(-50%); width:22px;height:22px;border-radius:50%;background:var(--panel); border:1px solid var(--linea2);color:var(--txt2);align-items:center; justify-content:center;cursor:pointer;font-size:12px;line-height:1;z-index:5; padding:0;transition:left .15s ease;} .lat-toggle:hover{background:var(--panel2);color:var(--txt);} .app.lateral-oculta{grid-template-columns:0 1fr;} .app.lateral-oculta .lateral{width:0;min-width:0;overflow:hidden;border-right:none;} .app.lateral-oculta .lat-toggle{left:0;} } /* ================= PLANIFICADOR ================= */ .split.planif{grid-template-columns:minmax(560px,1fr) minmax(380px,470px); transition:grid-template-columns .15s ease;} /* 14/09/2026 — rediseño JPCB (especificación de Cristóbal): el panel de detalle (derecha) ocupaba ancho fijo permanentemente aunque no hubiera nada seleccionado ("Selecciona una tarjeta del tablero" solo, flotando). Ahora se colapsa a un riel angosto hasta que se elige una tarjeta — ver pintarDetalle() en mod-planificador.js, que agrega/quita esta clase. Escopeado a .split.planif a propósito: Casos sigue usando .split/.col.der siempre expandido, sin ningún cambio. */ .split.planif.der-rail{grid-template-columns:minmax(560px,1fr) 46px;} .split.planif.der-rail .cab{height:100%;display:flex;flex-direction:column; align-items:center;justify-content:flex-start;gap:10px;padding:16px 0;border-bottom:none;} .split.planif.der-rail .cuerpo{display:none;} .der-rail-icono{font-size:16px;} .der-rail-etiqueta{writing-mode:vertical-rl;font-size:10.5px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--txt3);} @media (max-width:900px){ .split.planif.der-rail{grid-template-columns:1fr;} .split.planif.der-rail .col.der{display:none;} /* en pantalla angosta ya es una fila abajo, no una columna */ } /* 29/09/2026 — Producción Técnicos necesita bastante más ancho que el detalle de una orden de JPCB/Tablero: tabla de avance semanal, fichas de efectividad y detalle por producto/OT se leían apretados en los 380-470px de siempre. Pedido explícito de Cristóbal ("amplía el ancho hacia la izquierda, espacio tenemos"). Se amplía SOLO en esa sub-pestaña (.prod-ancho, agregada/quitada en pintar(), mod- planificador.js) y solo en pantallas con espacio de sobra — bajo 900px ya rige el colapso de arriba/abajo, que no se toca. */ @media (min-width:901px){ .split.planif.prod-ancho{grid-template-columns:minmax(420px,1fr) minmax(620px,780px);} .split.planif.prod-ancho.der-rail{grid-template-columns:minmax(420px,1fr) 46px;} } /* 15/09/2026 — celular (pedido de Cristóbal, "vista cómoda para celular" del Planificador/Producción): con una tarjeta seleccionada, el ancho mínimo de las dos columnas (560px + 380px = 940px) no cabía en un teléfono — y como .vista tiene overflow:hidden, esa columna de detalle no aparecía cortada con scroll, sino DIRECTAMENTE INVISIBLE, sin forma de llegar a ella. Bajo 760px el detalle pasa a ocupar toda la pantalla (con el botón "← Volver" agregado en pintarDetalle(), mod-planificador.js) y el tablero se oculta mientras tanto, en vez de repartirse un ancho que no alcanza. El estado sin selección (.der-rail) ya quedaba bien resuelto por la regla de arriba (900px) — esto solo cubre el otro caso. */ .p-det-volver{display:none;} @media (max-width:760px){ .split.planif:not(.der-rail){grid-template-columns:1fr;} .split.planif:not(.der-rail) .col.izq{display:none;} .split.planif:not(.der-rail) .col.der{overflow-y:auto;} .p-det-volver{display:block;margin-bottom:10px;} } /* 17/09/2026 — "✕" para ocultar el panel de detalle en computador, a pedido de Cristóbal. Hace exactamente lo mismo que "← Volver" (deselecciona la tarjeta, lo que ya colapsa el panel al riel angosto .der-rail) — acá solo se ve distinto y en otra posición porque en escritorio no hace falta un botón de ancho completo. Se oculta bajo 760px porque ahí ya está "← Volver" cumpliendo el mismo rol a pantalla completa; mostrar los dos juntos habría sido redundante. */ .split.planif .cab{position:relative;} .p-det-cerrar{position:absolute;top:14px;right:14px;width:24px;height:24px;padding:0; border-radius:6px;display:flex;align-items:center;justify-content:center; font-size:12px;line-height:1;} @media (max-width:760px){ .p-det-cerrar{display:none;} } /* ---- Agenda Curifor (panel de citas) ------------------------------ */ .citas-wrap{flex:0 0 auto;border-bottom:1px solid var(--linea);background:var(--panel2);} .citas-cab{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 14px;} .citas-tit{font-size:11px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.03em;flex:1;} /* 17/09/2026 — buscador de "Citas de hoy" por patente u OT. .citas-cab ya tenía flex-wrap:wrap agregado arriba, para que en pantalla angosta este input (más el contador y el botón "+ Nueva cita") pase a una segunda línea en vez de salirse del ancho — mismo problema que ya se corrigió en la barra superior (app.css, 15/09/2026). */ .citas-buscar{width:170px;flex:0 0 auto;} .cita-form{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 10px;align-items:center;} .citas-fila-wrap{position:relative;padding:0 30px 10px 30px;} .citas-fila{display:flex;gap:9px;overflow-x:auto;scroll-behavior:smooth;} .citas-flecha{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px; padding:0;border-radius:50%;background:var(--panel3);border:1px solid var(--linea2); color:var(--txt);display:flex;align-items:center;justify-content:center;font-size:14px; line-height:1;z-index:2;} .citas-flecha.izq{left:2px;} .citas-flecha.der{right:2px;} .citas-progreso{font-size:10.5px;color:var(--txt3);font-variant-numeric:tabular-nums; .citas-agenda-act{font-size:10.5px;color:var(--txt3);white-space:nowrap;font-variant-numeric:tabular-nums;} .citas-agenda-act.atrasada{color:var(--ambarc,#d97706);font-weight:600;} white-space:nowrap;} .cita-card{flex:0 0 190px;background:var(--panel);border:1px solid var(--linea); border-left:3px solid var(--ambar);border-radius:8px;padding:8px 10px;} .cita-card .pat{font-weight:700;font-size:12.5px;} .cita-card .s{font-size:11px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .cita-acc{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap;} .cita-acc button{font-size:10.5px;padding:3px 7px;} .btn-asiste{background:var(--verde2);border-color:var(--verde2);color:var(--verdec);} .btn-noasiste{background:var(--rojo2);border-color:var(--rojo2);color:var(--rojoc);} .btn-reagenda{background:var(--ambar2);border-color:var(--ambar2);color:var(--ambarc);} .cita-reagenda-form{display:flex;gap:5px;margin-top:7px;align-items:center;} .cita-reagenda-form input[type=date]{font-size:11px;padding:3px 5px;} /* ---- Control de Taller (vista planilla) --------------------------- */ .ct-toolbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--linea);} .ct-tabla-wrap{flex:1;overflow:auto;padding:0 14px 14px;} .ct-tabla th,.ct-tabla td{white-space:nowrap;} .ct-tabla select,.ct-tabla input{font-size:12px;padding:3px 5px;} tr.ct-sep td{background:var(--panel2);font-weight:700;font-size:11.5px;color:var(--txt2);padding:6px 10px;} tr.ct-noshow{opacity:.5;} /* ============ 📋 VCU Ford (Hoja Multipuntos) ============ */ .vcu-badge{display:inline-block;margin-top:5px;padding:3px 8px;border-radius:4px; font-size:11px;font-weight:700;cursor:pointer;} .vcu-badge.ok{background:var(--verde);color:#04210f;} .vcu-badge.pend{background:var(--rojo);color:#2a0708;} .ots-multi{font-weight:700;color:var(--azulc)!important;} .ots-item{white-space:normal!important;} .semaforos{display:flex;flex-direction:column;gap:5px;margin:6px 0 6px;} .semaforo{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;padding:5px 10px;border-radius:8px;white-space:nowrap;border:1.5px solid transparent;line-height:1.3;letter-spacing:.01em;} .semaforo::first-letter{font-size:15px;} .sem-verde{background:var(--verde2);color:var(--verdec);border-color:var(--verde);} .sem-amarillo{background:var(--ambar2);color:var(--ambarc);border-color:var(--ambar);} .sem-rojo{background:var(--rojo2);color:var(--rojoc);border-color:var(--rojo);box-shadow:0 0 0 2px rgba(239,84,97,.18);} .l1 .semaforos{display:inline-flex;flex-direction:row;margin:0 0 0 8px;vertical-align:middle;} .l1 .semaforo{font-size:12px;padding:3px 9px;} .cita-card .semaforo{font-size:12px;padding:4px 8px;} .interno-chip{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;font-size:9.5px;font-weight:800;letter-spacing:.06em;vertical-align:1px;background:var(--morado2);color:var(--moradoc);border:1px solid var(--morado);white-space:nowrap;} .tarjeta .interno-chip{margin-left:4px;padding:0 4px;font-size:8.5px;} .vcu-chip{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px; font-size:9px;font-weight:700;cursor:pointer;vertical-align:middle;} .vcu-chip.ok{background:var(--verde);color:#04210f;} .vcu-chip.pend{background:var(--rojo);color:#2a0708;} .vcu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none; align-items:center;justify-content:center;z-index:1000;padding:20px;} .vcu-overlay.open{display:flex;} .vcu-modal{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r); width:1300px;max-width:97vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--sombra);} .vcu-modal-head{display:flex;align-items:center;justify-content:space-between; padding:14px 18px;border-bottom:1px solid var(--linea);} .vcu-modal-head h3{margin:0;font-size:15px;} .vcu-modal-estado{padding:8px 18px;font-size:12px;color:var(--txt2);border-bottom:1px solid var(--linea);} .vcu-modal-body{flex:1;overflow:auto;padding:14px 18px;} .vcu-modal-pie{display:flex;gap:10px;align-items:center;padding:12px 18px;border-top:1px solid var(--linea);} /* Modal genérico chico (reutilizable) — mismo patrón que .vcu-overlay arriba, pero angosto, para formularios simples (ver mod-disponibilidad.js). */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none; align-items:center;justify-content:center;z-index:1000;padding:20px;} .modal-overlay.open{display:flex;} .modal-box{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r); width:520px;max-width:97vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--sombra);} .modal-head{display:flex;align-items:center;justify-content:space-between; padding:14px 18px;border-bottom:1px solid var(--linea);} .modal-head h3{margin:0;font-size:15px;} .modal-body{flex:1;overflow:auto;padding:14px 18px;} /* Overlay de campos ENCIMA de la imagen real del PDF Ford — a pedido explícito de Cristóbal, no es una recreación, son inputs posicionados en % sobre las casillas/líneas reales del documento escaneado. Los colores de fondo son intencionalmente casi-blancos (para leerse sobre el papel escaneado), independientes del tema oscuro del resto de la app — por eso llevan su propio color:#111 en vez de heredar var(--txt). */ .vcuf-overlay-wrap{position:relative;width:100%;margin:0 0 12px;line-height:0; border:1px solid var(--linea2);border-radius:4px;overflow:hidden;} .vcuf-overlay-wrap img{display:block;width:100%;height:auto;} .vcuf-of-box{position:absolute;margin:0;padding:0;cursor:pointer;z-index:2; appearance:none;-webkit-appearance:none;-moz-appearance:none; background:rgba(255,255,255,.001);border:1px solid transparent;border-radius:1px; box-shadow:0 0 0 1px rgba(20,60,120,.22);box-sizing:border-box;outline:none;} .vcuf-of-box:hover{box-shadow:0 0 0 1.5px rgba(20,60,120,.7);} .vcuf-of-box:checked{background:rgba(17,17,17,.62);box-shadow:0 0 0 1.5px #111;} .vcuf-of-box:disabled{cursor:not-allowed;box-shadow:0 0 0 1px rgba(20,60,120,.1);} .vcuf-of-box:disabled:checked{background:rgba(17,17,17,.45);} .vcuf-of-text{position:absolute;border:none;border-bottom:1px solid rgba(26,58,92,.55); border-radius:0;background:rgba(255,255,255,.72);font-size:.85vw;line-height:1.15; padding:0 2px;box-sizing:border-box;z-index:2;font-family:inherit;color:#111;} .vcuf-of-text.vcuf-of-empty{background:rgba(255,244,214,.85);} .vcuf-of-text:focus{background:#fff;outline:1.5px solid #1a3a5c;} .vcuf-of-textarea{position:absolute;border:1px solid rgba(26,58,92,.35);border-radius:3px; background:rgba(255,255,255,.82);font-size:.85vw;padding:3px 5px;box-sizing:border-box; resize:none;font-family:inherit;z-index:2;color:#111;} .vcuf-of-textarea:focus{background:#fff;outline:1.5px solid #1a3a5c;} .vcuf-of-range{position:absolute;height:1.7%;margin:0;padding:0;z-index:3;cursor:pointer; accent-color:#111;background:transparent;} .vcuf-bat-marker{position:absolute;width:.35%;background:#111;z-index:2;pointer-events:none;} .vcuf-bat-marker-lbl{position:absolute;font-size:.8vw;font-weight:700;color:#111; background:rgba(255,255,255,.8);padding:0 3px;border-radius:2px; transform:translate(-50%,-100%);white-space:nowrap;z-index:3;pointer-events:none;} @media (max-width:700px){.vcuf-of-text,.vcuf-of-textarea,.vcuf-bat-marker-lbl{font-size:9px;}} .tablero-wrap{flex:1;overflow:auto;min-height:0;} .tablero{min-width:max-content;} .tb-cab{display:flex;position:sticky;top:0;z-index:5;background:var(--panel2); border-bottom:1px solid var(--linea);} .tb-tec{width:190px;flex:0 0 190px;padding:7px 11px;display:flex;align-items:center;gap:8px; border-right:1px solid var(--linea);position:sticky;left:0;background:var(--panel);z-index:3;} .tb-cab .tb-tec{background:var(--panel2);font-size:9.5px;text-transform:uppercase; letter-spacing:.05em;color:var(--txt3);font-weight:700;} .tb-tec .n{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tb-tec .c{font-size:10.5px;color:var(--txt3);} .tb-horas{display:flex;} .tb-h{flex:0 0 auto;font-size:9.5px;color:var(--txt3);padding:7px 0 6px 3px; border-right:1px solid var(--divisor-tablero);} .tb-h.marca{color:var(--txt2);font-weight:600;border-right-color:var(--linea);} .tb-fila{display:flex;border-bottom:1px solid var(--linea);min-height:52px;} .tb-fila.nodisp .tb-tec{opacity:.5;} .tb-fila.nodisp .tb-pista{background:repeating-linear-gradient(45deg,transparent,transparent 7px,var(--raya-nodisp) 7px,var(--raya-nodisp) 14px);} .tb-pista{position:relative;flex:1;min-height:52px;} .tb-pista.libre{display:flex;flex-wrap:wrap;padding:3px;width:auto!important;} .tb-slot{position:absolute;top:0;bottom:0;border-right:1px solid var(--divisor-tablero);} .tb-slot.sobre{background:var(--azul2);border-right-color:var(--azul);} .tablero .tarjeta{position:absolute;top:4px;bottom:4px;border-radius:7px;padding:5px 8px; background:var(--panel3);border-left:3px solid var(--azul);cursor:grab;overflow:hidden; transition:transform .1s,box-shadow .1s;z-index:2;} .tablero .tarjeta:hover{transform:translateY(-1px);box-shadow:var(--sombra-tablero-hover);z-index:4;} .tablero .tarjeta.arrastrando{opacity:.4;cursor:grabbing;} .tablero .tarjeta.sel{box-shadow:0 0 0 2px var(--azul);z-index:4;} .tablero .tarjeta.cerrada{opacity:.55;} .tablero .tarjeta .pat{font-size:11.5px;font-weight:700;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;} .tablero .tarjeta .srv{font-size:9.5px;color:var(--txt3);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;} .tablero .tarjeta .stop{position:absolute;top:4px;right:5px;color:var(--ambar);font-size:8px;} .tarjeta.recepcion{border-left-color:var(--txt3);} .tarjeta.ingreso_taller{border-left-color:var(--azul);} .tarjeta.en_proceso{border-left-color:var(--ambar);} .tarjeta.en_prueba{border-left-color:var(--morado);} .tarjeta.lavado{border-left-color:var(--cyan);} .tarjeta.entrega{border-left-color:var(--verde);} .chip.e-recepcion{background:var(--sutil-bg);color:var(--txt3);} .chip.e-ingreso_taller{background:var(--azul2);color:var(--azulc);} .chip.e-en_proceso{background:var(--ambar2);color:var(--ambarc);} .chip.e-en_prueba{background:var(--morado2);color:var(--moradoc);} .chip.e-lavado{background:var(--cyan2);color:var(--cyanc);} .chip.e-entrega{background:var(--verde2);color:var(--verdec);} /* 30/09/2026 — etapas propias de DyP (recepcion/lavado/entrega ya están arriba, se reutilizan tal cual). No se toca ninguna regla de ST. */ .tarjeta.inspeccion{border-left-color:var(--azul);} .tarjeta.desarme_evaluacion{border-left-color:var(--ambar);} .tarjeta.desabolladura{border-left-color:var(--rojo);} .tarjeta.preparacion_pintura{border-left-color:var(--morado);} .tarjeta.armado{border-left-color:var(--azul);} .tarjeta.control_calidad{border-left-color:var(--ambar);} .chip.e-inspeccion{background:var(--azul2);color:var(--azulc);} .chip.e-desarme_evaluacion{background:var(--ambar2);color:var(--ambarc);} .chip.e-desabolladura{background:var(--rojo2);color:var(--rojoc);} .chip.e-preparacion_pintura{background:var(--morado2);color:var(--moradoc);} .chip.e-armado{background:var(--azul2);color:var(--azulc);} .chip.e-control_calidad{background:var(--ambar2);color:var(--ambarc);} /* 09/10/2026 — etapa nueva "Pulido" de DyP */ .tarjeta.pulido{border-left-color:var(--cyan);} .chip.e-pulido{background:var(--cyan2);color:var(--cyanc);} /* ================= GENÉRICO DE MÓDULOS ================= */ .mod{flex:1;overflow-y:auto;padding:20px;min-width:0;} .mod h3{margin:0 0 6px;font-size:16px;font-weight:700;} .mod .sub{margin:0 0 18px;font-size:13px;color:var(--txt3);} .seccion{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r); margin-bottom:18px;overflow:hidden;} .seccion > h4{margin:0;padding:13px 17px;font-size:13px;font-weight:700; border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:10px;} .seccion > h4 .n{font-size:10.5px;background:var(--panel3);padding:2px 8px; border-radius:99px;color:var(--txt3);font-weight:600;} .seccion .in{padding:16px 18px;} .fila-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;} .fila-form .campo{margin-bottom:0;flex:1;min-width:130px;} .tabla-simple{width:100%;} .tabla-simple td,.tabla-simple th{white-space:normal;} .acc{display:flex;gap:7px;} .acc button{padding:5px 11px;font-size:12px;} /* ============ elementos compartidos de los módulos ============ */ .punto{width:8px;height:8px;border-radius:99px;flex:0 0 auto;} .punto.verde{background:var(--verde);} .punto.cyan{background:var(--cyan);} .punto.morado{background:var(--morado);} .punto.ambar{background:var(--ambar);} .punto.rojo{background:var(--rojo);} .punto.azul{background:var(--azul);} .permisos{display:flex;flex-wrap:wrap;gap:7px;} .chk{display:flex;align-items:center;gap:6px;font-size:12px;padding:5px 10px; background:var(--panel2);border:1px solid var(--linea);border-radius:7px;cursor:pointer; color:var(--txt2);} .chk:hover{border-color:var(--azul);color:var(--txt);} .chk input{width:14px;height:14px;accent-color:var(--azul);cursor:pointer;margin:0;padding:0;} .item-lista{padding:10px 14px;border-bottom:1px solid var(--borde-tabla);cursor:pointer;} .item-lista:hover{background:var(--fila-hover);} .item-lista.sel{background:var(--azul2);} .tarjeta.libre{border-color:var(--tarjeta-libre-borde);} .mod code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:11.5px;} .seccion .sp{flex:1;} /* ============ 📈 Indicadores Post Venta (Power BI) ============ */ .mod-pbi{flex:1;display:flex;flex-direction:column;min-width:0;height:100%;} .pbi-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:10px 16px;border-bottom:1px solid var(--linea);background:var(--panel2);} .pbi-nav-label{font-size:11px;font-weight:700;color:var(--txt3); text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto;} .pbi-chips{display:flex;flex-wrap:wrap;gap:6px;} .pbi-nav-hint{font-size:11px;color:var(--txt3);flex:0 0 auto;margin-left:auto;} .info-chip{display:inline-block;font-size:10.5px;font-weight:600;padding:3px 9px; border-radius:99px;background:var(--panel3);border:1px solid var(--linea2);color:var(--txt2); white-space:nowrap;} .pbi-frame{flex:1;width:100%;border:none;min-height:0;} /* ============ 🧮 Cotizador de Mantenciones ============ */ .mod-cotizador{flex:1;display:flex;flex-direction:column;min-width:0;height:100%;} .cotiz-frame{flex:1;width:100%;border:none;min-height:0;background:var(--panel);} /* ============ 📋 OTs Pendientes — barra de sub-módulos ============ */ .mod-ots{flex:1;display:flex;flex-direction:column;min-width:0;height:100%;} .subtabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--linea2); overflow-x:auto;background:var(--panel);flex:0 0 auto;} .subtab{padding:13px 16px;font-size:13px;font-weight:600;color:var(--txt2);cursor:pointer; white-space:nowrap;border-bottom:2px solid transparent;} .subtab:hover{color:var(--txt);} .subtab.on{color:var(--azulc);border-bottom-color:var(--azul);} .subtab.pend{opacity:.55;} .subtab.pend::after{content:"";display:inline-block;width:5px;height:5px;border-radius:99px; background:var(--txt3);margin-left:6px;vertical-align:middle;} /* ============ 🔍 Búsqueda de Cliente ============ */ .cli-busq{padding:20px;flex:0 0 auto;border-bottom:1px solid var(--linea);} .cli-busq input{width:100%;max-width:480px;} .cli-lista{flex:1;overflow-y:auto;padding:0 20px 22px;} .cli-tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:10px; margin-bottom:16px;overflow:hidden;} .cli-tarjeta .cab2{padding:13px 17px;background:var(--panel2);display:flex; align-items:baseline;gap:12px;flex-wrap:wrap;} .cli-tarjeta .cab2 h4{margin:0;font-size:14px;font-weight:700;} .cli-tarjeta .cab2 .meta{font-size:12px;color:var(--txt3);} .cli-tarjeta table{width:100%;} .cli-tarjeta .pie{display:flex;justify-content:flex-end;gap:16px;padding:11px 17px; font-size:13px;font-weight:700;color:var(--txt);background:var(--panel2); border-top:1px solid var(--linea);} .cli-tarjeta .pie .saldo{color:var(--verdec);} .cli-mov{padding:12px 17px;border-top:1px dashed var(--linea);} /* ---- 👤 Por Asesor — ranking en barras --------------------------- */ .rank-fila{display:flex;align-items:center;gap:12px;padding:7px 0;} .rank-fila .rank-n{flex:0 0 160px;font-size:12.5px;color:var(--txt2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rank-fila .rank-pista{flex:1;height:10px;border-radius:99px;background:var(--panel3); overflow:hidden;} .rank-fila .rank-barra{height:100%;background:var(--azul);border-radius:99px;} .rank-fila .rank-val{flex:0 0 34px;text-align:right;font-size:12.5px;font-weight:700;} /* ---- 🏆 Ranking Cierres >90d ------------------------------------- */ .rk-chip{display:inline-block;padding:6px 14px;font-size:12.5px;font-weight:600; color:var(--txt2);background:var(--panel3);border:1px solid var(--linea2); border-radius:99px;cursor:pointer;white-space:nowrap;} .rk-chip:hover{color:var(--txt);} .rk-chip.on{color:var(--azulc);border-color:var(--azul);background:var(--azul2);} .rk-fila-sem{display:flex;align-items:center;gap:10px;padding:4px 0;} .rk-fila-sem .rk-sem{flex:0 0 90px;font-size:11px;color:var(--txt2);white-space:nowrap;} .rk-fila-sem .rk-pista{flex:1;height:15px;border-radius:4px;background:var(--panel3); overflow:hidden;display:flex;} .rk-fila-sem .rk-seg{height:100%;} .rk-fila-sem .rk-tot{flex:0 0 28px;text-align:right;font-size:11.5px;font-weight:700;} .rk-leyenda{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:11px;color:var(--txt2);} /* ---- 📣 Mencionar a — buscador compacto (08/09/2026) ------------- */ .mencion-chip-sel{display:inline-flex;align-items:center;gap:5px;padding:3px 8px; font-size:11.5px;font-weight:600;color:var(--azulc);background:var(--azul2); border:1px solid var(--azul);border-radius:99px;cursor:default;} .mencion-chip-sel b{cursor:pointer;opacity:.7;font-weight:700;} .mencion-chip-sel b:hover{opacity:1;} .mencion-drop{position:absolute;top:100%;left:0;z-index:20;margin-top:2px; width:100%;max-width:300px;max-height:220px;overflow-y:auto; background:var(--panel2);border:1px solid var(--linea2);border-radius:6px; box-shadow:var(--sombra);} .mencion-item{padding:6px 10px;font-size:12.5px;cursor:pointer; display:flex;justify-content:space-between;gap:8px;align-items:baseline;} .mencion-item:hover{background:var(--panel3);} .mencion-item .s{font-size:10.5px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mencion-item.vacio{color:var(--txt3);cursor:default;} .mencion-item.vacio:hover{background:transparent;} .rk-leyenda .sw{display:inline-block;width:9px;height:9px;border-radius:2px; margin-right:5px;vertical-align:middle;} /* ---- 🔔 Notificaciones ------------------------------------------- */ .notif-lista{display:flex;flex-direction:column;gap:12px;} .notif-card{background:var(--panel2);border:1px solid var(--linea);border-left:3px solid var(--azul); border-radius:8px;padding:12px 15px;} .notif-card.leida{border-left-color:var(--linea2);opacity:.68;} .notif-card .meta{font-size:11.5px;color:var(--txt3);margin-bottom:5px;} .notif-card .txt{font-size:13px;color:var(--txt);margin-bottom:9px;} .notif-card .ir{font-size:12px;padding:5px 11px;} /* ---- 📊 Producción Técnicos ---------------------------------------- */ .prod-wrap{padding:12px 14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;} .tabla-scroll{overflow-x:auto;} .prod-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;} .prod-mes-label{font-size:12px;font-weight:700;color:var(--txt2);display:flex; align-items:center;gap:6px;} .prod-toolbar input[type=text]{min-width:160px;} .prod-nota{font-size:11px;color:var(--txt3);flex-basis:100%;line-height:1.5;} .prod-kpis,.prod-kpis-det{display:flex;flex-wrap:wrap;gap:8px;} .prod-kpi{background:var(--panel2);border:1px solid var(--linea);border-radius:8px; padding:8px 12px;min-width:120px;} .prod-kpi b{display:block;font-size:16px;color:var(--txt);} .prod-kpi span{display:block;font-size:10.5px;color:var(--txt3);margin-top:2px;} .prod-tabla th.num,.prod-tabla td.num{text-align:right;} .prod-frac{font-size:10px;color:var(--txt3);margin-top:2px;} .nodisp-badge{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 7px; border-radius:99px;background:var(--rojo2);color:var(--rojoc);margin-left:6px;} .empresa-badge{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 7px; border-radius:99px;margin-left:6px;} .empresa-badge.curifor{background:var(--azul2);color:var(--azulc);} .empresa-badge.frontera{background:var(--ambar2);color:var(--ambarc);} .caso-dot{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:5px;vertical-align:middle;} .empresa-badge.mixto{background:var(--panel3);color:var(--txt2);border:1px solid var(--linea2);} .prod-det-head{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700; padding:10px 0 4px;border-top:1px solid var(--linea);margin-top:4px;} .prod-det-close{margin-left:auto;font-size:11.5px;} .prod-det-sub{font-size:12px;font-weight:700;color:var(--txt2);margin:10px 0 6px;} .prod-det-empty{font-size:11.5px;color:var(--txt3);padding:6px 0;} .prod-mini th,.prod-mini td{font-size:12px;padding:5px 8px;} /* ---- 📊 Producción Taller (paso vehicular DyP, 30/09/2026) --------- Solo existe dentro del ambiente DyP del Planificador (reemplaza a Tablero/Producción Técnicos ahí) — reutiliza .prod-wrap/.prod-toolbar/ .prod-mes-label/.prod-nota de arriba (mismo lenguaje visual), con tablas agrupadas por tipo de cliente y detalle de OT desplegable. */ .pt-titulo{font-size:13px;font-weight:700;color:var(--txt2);margin:6px 0 0; display:flex;align-items:center;gap:8px;} .pt-titulo .cnt{font-weight:400;color:var(--txt3);font-size:11.5px;} .pt-tabla{width:100%;border-collapse:collapse;font-size:12.5px;} .pt-tabla th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em; color:var(--txt3);padding:6px 8px;border-bottom:1px solid var(--linea);} .pt-tabla td{padding:7px 8px;border-bottom:1px solid var(--linea2);} .pt-tabla th.num,.pt-tabla td.num,.pt-tabla tfoot td:last-child{text-align:right;} .pt-tabla tfoot td{font-weight:700;border-bottom:none;padding-top:8px;} .pt-grupo{cursor:pointer;background:var(--panel2);} .pt-grupo:hover{background:var(--panel3);} .pt-grupo td{font-weight:600;} .pt-flecha{width:18px;color:var(--txt3);font-size:11px;} .pt-detalle-wrap td{padding:0;border-bottom:1px solid var(--linea2);background:var(--panel);} .pt-subtabla{width:100%;border-collapse:collapse;font-size:11.5px;margin:2px 0 6px;} .pt-subtabla th{text-align:left;font-size:10px;color:var(--txt3);padding:5px 10px; border-bottom:1px solid var(--linea2);} .pt-subtabla td{padding:5px 10px;border-bottom:1px dashed var(--linea2);} .pt-subtabla th.num,.pt-subtabla td:last-child{text-align:right;} .pt-subtabla tbody tr:last-child td{border-bottom:none;} /* ---- 🎯 Metas DyP (02/10/2026) ------------------------------------ Reutiliza .rank-fila/.rank-pista/.rank-barra/.rank-val (mismo estilo que el ranking por asesor) más una columna extra de porcentaje. */ .metas-lista{display:flex;flex-direction:column;gap:2px;margin-top:8px;} .metas-fila .rank-n{flex:0 0 220px;} .metas-fila .rank-val{flex:0 0 56px;color:var(--txt3);font-weight:400;} .metas-fila .rank-barra.ok{background:var(--verde);} .metas-fila .rank-barra.bajo{background:var(--rojo);} .metas-pct{flex:0 0 44px;text-align:right;font-size:12.5px;font-weight:700;color:var(--azulc);} .metas-pct.ok{color:var(--verdec);} .metas-pct.bajo{color:var(--rojoc);} /* ---- 🚗 Paso Vehicular (01/10/2026) -------------------------------- Módulo PROPIO del menú lateral (NO una pestaña del Planificador — ver mod-paso-vehicular.js), con Servicio Técnico y DyP como secciones separadas (.seccion/.in, mismas clases genéricas de módulo que usa Informes), cada una con una tabla Marca × Tipo de Documento. Tabla matriz propia (.pv-tabla), sin agrupado/desplegable (son solo cantidades, no hace falta el detalle de cada OT acá). */ .pv-tabla{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:4px;} .pv-tabla th{text-align:right;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em; color:var(--txt3);padding:6px 8px;border-bottom:1px solid var(--linea);white-space:nowrap;} .pv-tabla th:first-child{text-align:left;} .pv-tabla td{padding:6px 8px;border-bottom:1px solid var(--linea2);text-align:right;white-space:nowrap;} .pv-tabla td:first-child{text-align:left;font-weight:600;white-space:normal;} .pv-tabla tfoot td{font-weight:700;border-bottom:none;padding-top:8px;} .pv-total{font-weight:700;color:var(--azulc);} /* ---- 🩻 Radiografía de Talleres (02/10/2026) ------------------------ Reutiliza .pv-tabla/.pv-total (igual criterio que Paso Vehicular) y .rank-fila/.rank-pista/.rank-barra/.rank-val (ranking de "Por Asesor", arriba) para el Comparativo de sucursales — esta App no usa ninguna librería de gráficos, así que no se agrega ninguna acá tampoco. Única clase nueva: resaltar la fila de la sucursal elegida en el comparativo. */ .pv-tabla tr.rt-sel td{background:var(--azul2);} /* 29/09/2026 — ficha de vehículo en "Efectividad" (Producción Técnicos), a pedido de Cristóbal: la tabla de 5 columnas con encabezados largos ("Asignado (Ingreso/Salida Taller)") se leía mal en el panel de detalle — títulos y datos se envolvían y quedaban cortados. Cada vehículo pasa a tener su propia ficha apilada (un dato por línea), que se lee completa sin importar el ancho del panel — ver efectividadHtml() en mod-planificador.js. */ .efect-ficha{background:var(--panel2);border:1px solid var(--linea);border-radius:10px; padding:12px 14px;margin-bottom:10px;} .efect-ficha-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;} .efect-ficha-patente{font-size:14.5px;font-weight:700;letter-spacing:.02em;} .efect-ficha-servicio{font-size:12px;color:var(--txt2);margin-top:2px;} .efect-ficha-pct{flex:0 0 auto;font-size:14.5px;font-weight:700;padding:3px 11px; border-radius:99px;border:1.5px solid;white-space:nowrap;} .efect-ficha-grid{display:flex;flex-direction:column;gap:7px;margin-top:10px; padding-top:10px;border-top:1px solid var(--linea2);} .efect-ficha-campo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px;} .efect-ficha-campo .k{color:var(--txt3);} .efect-ficha-campo .v{font-weight:600;text-align:right;} /* 29/09/2026 — tarjeta de técnico en Producción Técnicos, diseñada de cero: las clases .prod-card* existían en el marcado desde el 25/09/2026 pero NUNCA tuvieron CSS (se veían como texto plano sin tarjeta, sin borde, un dato debajo del otro — ver captura de Cristóbal, "cada técnico que sea una ficha o tarjeta en un diseño moderno y profesional"). Mismo lenguaje visual que .jpcb-card/.tj-item (tarjeta elevada, se resalta al pasar el mouse) — grid que se acomoda solo según el ancho disponible, así que también aprovecha el panel de detalle más angosto que le queda a la izquierda cuando éste se amplía. */ /* #tablero trae min-width:max-content para el grid horario de JPCB/ Tablero (necesita su ancho natural para el scroll horizontal) — pero eso rompe el grid de tarjetas de abajo (auto-fill/1fr no tiene un ancho de contenedor real contra el cual repartirse bajo max-content). Se anula solo cuando adentro hay .prod-wrap, sin tocar el otro caso. */ #tablero:has(.prod-wrap){min-width:0;} .prod-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;} .prod-card{background:var(--panel4);border:1px solid var(--linea);border-radius:12px; padding:13px 14px;cursor:pointer;box-shadow:var(--sombra-tj); transition:box-shadow .15s,border-color .15s,transform .12s;} .prod-card:hover{box-shadow:var(--sombra-tj-hover);transform:translateY(-1px);border-color:var(--linea2);} .prod-card.sel{border-color:var(--azul);box-shadow:0 0 0 1.5px var(--azul);} .prod-card-cab{display:flex;align-items:center;gap:10px;} .prod-card .av{width:36px;height:36px;font-size:12.5px;flex:0 0 auto;} .prod-card-nom{flex:1;min-width:0;} /* Nombres completos chilenos (3-4 palabras) no entraban en una sola línea sin cortarse feo ("BIZARRO GO...") — se permiten hasta 2 líneas completas antes de recortar, así se alcanza a leer el nombre real. */ .prod-card-nom .n{font-size:12.5px;font-weight:700;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .prod-card-nota{display:block;font-size:9.5px;color:var(--ambarc);margin-top:1px;} .prod-card-pct{flex:0 0 auto;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:99px; background:var(--panel3);color:var(--txt2);} .prod-card-pct.verde{background:var(--verde2);color:var(--verdec);} .prod-card-pct.ambar{background:var(--ambar2);color:var(--ambarc);} .prod-card-pct.rojo{background:var(--rojo2);color:var(--rojoc);} .prod-card-stats{display:flex;gap:16px;margin-top:11px;padding-top:11px;border-top:1px solid var(--linea);} .prod-card-stats div{display:flex;flex-direction:column;} .prod-card-stats b{font-size:14.5px;color:var(--txt);} .prod-card-stats span{font-size:9.5px;color:var(--txt3);margin-top:1px; text-transform:uppercase;letter-spacing:.02em;} /* Cada bloque del detalle (Avance por semana / Efectividad / Detalle por producto / Detalle por OT) pasa a vivir en su propia "tarjeta" en vez de correr uno detrás de otro separados solo por un subtítulo chico — mismo pedido de arriba, "la distribución de la info... más amigable". */ .prod-det-seccion{background:var(--panel2);border:1px solid var(--linea);border-radius:12px; padding:14px 16px;margin-bottom:12px;overflow-x:auto;} .prod-det-seccion:last-child{margin-bottom:0;} .prod-det-seccion .prod-det-sub{margin-top:0;} @media (max-width:480px){ /* En celular angosto, la tabla de 4 columnas de "Avance por semana" queda justa — se recupera algo de ancho recortando el padding de la tarjeta y la letra de las tablas, y overflow-x:auto de arriba evita que si aun así no entra, se vea "cortada" en vez de deslizarse. */ .prod-det-seccion{padding:12px 8px;} .prod-mini th,.prod-mini td{font-size:11px;padding:5px 6px;} } /* ===================================================================== JPCB — tablero por Etapa (kanban), 06/09/2026 ===================================================================== */ .area-toggle{display:flex;gap:2px;background:var(--panel2);border-radius:8px;padding:2px;} .area-toggle button{padding:5px 9px;font-size:11.5px;border-radius:6px;} .area-toggle button.on{background:var(--azul2);color:var(--azulc);} .jpcb-wrap{display:flex;gap:10px;padding:12px 14px;overflow-x:auto;align-items:flex-start;} .jpcb-stopboard-tit{padding:2px 14px;font-size:11px;font-weight:700;color:var(--txt3); text-transform:uppercase;letter-spacing:.03em;border-top:1px solid var(--linea);padding-top:12px;margin-top:4px;} .jpcb-stopboard-tit .cnt{text-transform:none;font-weight:400;letter-spacing:0;} .jpcb-stopboard{padding-top:8px;} .jpcb-col{flex:0 0 220px;min-width:0;max-width:220px;display:flex;flex-direction:column;min-height:80px;} .jpcb-col-tit{font-size:11px;font-weight:700;color:var(--txt2);text-transform:uppercase; letter-spacing:.03em;padding:0 2px 8px;display:flex;justify-content:space-between;} .jpcb-col-tit .cnt{font-weight:700;} .jpcb-col-body{flex:1;display:flex;flex-direction:column;gap:8px;min-height:60px;min-width:0; border-radius:10px;padding:2px;} .jpcb-col-body.jpcb-drop.sobre{background:var(--azul2);outline:2px dashed var(--azul);} .jpcb-card{background:var(--panel);border:1px solid var(--linea);border-left:3px solid var(--txt3); border-radius:8px;padding:9px 10px;font-size:11.5px;cursor:pointer;min-width:0;max-width:100%; overflow:hidden;} .jpcb-card:hover{border-color:var(--linea2);} .jpcb-card.sel{box-shadow:0 0 0 2px var(--azul);} .jpcb-card.arrastrando{opacity:.4;} .jpcb-card.recepcion{border-left-color:var(--txt3);} .jpcb-card.ingreso_taller{border-left-color:var(--azul);} .jpcb-card.en_proceso{border-left-color:var(--ambar);} .jpcb-card.en_prueba{border-left-color:var(--morado);} .jpcb-card.lavado{border-left-color:var(--cyan);} .jpcb-card.entrega{border-left-color:var(--verde);} /* 30/09/2026 — etapas propias de DyP, ver el mismo comentario junto a .tarjeta.inspeccion más arriba. */ .jpcb-card.inspeccion{border-left-color:var(--azul);} .jpcb-card.desarme_evaluacion{border-left-color:var(--ambar);} .jpcb-card.desabolladura{border-left-color:var(--rojo);} .jpcb-card.preparacion_pintura{border-left-color:var(--morado);} .jpcb-card.armado{border-left-color:var(--azul);} .jpcb-card.control_calidad{border-left-color:var(--ambar);} .jpcb-card.pulido{border-left-color:var(--cyan);} .jpcb-pat{font-weight:700;font-size:12.5px;margin-bottom:2px;} .jpcb-linea{color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .jpcb-comentario{color:var(--ambarc);margin-top:4px;font-style:italic;overflow-wrap:break-word;} .jpcb-badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;} .qbadge{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:99px; background:var(--verde2);color:var(--verdec);} /* 14/09/2026 — pedido de Cristóbal: que se vea "sí o no" pasó por lavado en cada tarjeta, no solo cuando ya se lavó (antes el badge de 🧼 Lavado directamente no existía si aún no se marcaba). El "no" es a propósito neutro/apagado (gris, no ámbar/rojo) — es solo información de estado, no una alerta de que algo esté mal. */ .qbadge.qbadge-no{background:var(--panel3);color:var(--txt3);} /* 17/09/2026 — contador de "días en trabajo" (fusión de "En taller"/"En proceso" en una sola etapa, pedido de Cristóbal). Azul para que combine con el color ya asignado a esa columna/chip (ver .jpcb-col--ingreso_taller y .chip.e-ingreso_taller) — es información de rutina, no una alerta. */ .qbadge.qbadge-tiempo{background:var(--azul2);color:var(--azulc);} .jpcb-stopbadge{font-size:10px;font-weight:700;color:var(--rojoc);background:var(--rojo2); border-radius:6px;padding:2px 6px;margin-bottom:5px;display:inline-block;} .jpcb-noasistebadge{font-size:10px;font-weight:700;color:var(--ambarc);background:var(--ambar2); border-radius:6px;padding:2px 6px;margin-bottom:5px;display:inline-block;} /* 14/09/2026 — alerta de "falta de gestión" (48h sin que nadie toque la orden). A propósito NO es sólida como .jpcb-noasistebadge (mismo tono ámbar): son dos alertas distintas que pueden aparecer juntas en la misma tarjeta (un "No asiste" viejo que además nadie gestiona), así que necesitan distinguirse a simple vista — esta va con borde en vez de relleno, e ícono de reloj en vez de prohibido. */ .jpcb-alerta-gestion{font-size:10px;font-weight:700;color:var(--ambarc);background:transparent; border:1px solid var(--ambar);border-radius:6px;padding:1px 6px;margin-bottom:5px;display:inline-block;} .jpcb-acciones{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;min-width:0;} .jpcb-acciones button{font-size:10px;padding:3px 6px;background:var(--panel2);border-color:var(--linea2); min-width:0;} .jpcb-acciones select{font-size:10px;padding:2px 4px;max-width:100%;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* ===================================================================== REDISEÑO EJECUTIVO — 09/09/2026, aprobado por Cristóbal sobre capturas previas (JPCB + Citas de hoy + Prepicking). Ningún selector de acá cambia geometría calculada por JS (posición/ancho de .tablero .tarjeta, drag de .jpcb-card) — solo apariencia: sombra, superficie, tipografía, agrupación de botones. El resto de los módulos (Casos, Cuenta Ficha, Cotizador, etc.) todavía no tiene este pase — se hace por partes, mostrando capturas antes de cada uno. --------------------------------------------------------------- Ajuste 09/09/2026 (mismo día): revisé cómo resuelven esto mismo Linear y Vercel (paneles ejecutivos de referencia) antes de afinar el primer pase: - Linear separa superficies con una "escalera" de fondos cada vez más claros + borde de un tono más fuerte, y usa la sombra poco — la separación la hace principalmente el CONTRASTE de superficie, no el efecto de "flotar". Por eso --panel4 ya existe como un nivel más. - Vercel es explícito: "borde primero, sombra apenas se nota en reposo — recién se nota más al pasar el mouse". Bajé la sombra de reposo (antes ya se notaba mucho, casi como si todo estuviera en hover todo el tiempo) y dejé la sombra fuerte solo para :hover. - Los dos reservan la forma 100% redonda (píldora) para etiquetas de estado chicas (nuestro .chip), NO para botones de acción — un botón usa un radio moderado (8px), más "de precisión" que "de burbuja". Los botones de Prepicking/JPCB/Citas pasan de píldora completa a este mismo radio moderado. ===================================================================== */ :root{ /* Un nivel de superficie más, para que las tarjetas se despeguen del fondo de verdad (antes costaba notar dónde termina una y empieza la siguiente — panel/panel2/panel3 quedaban muy pegados en luminosidad). */ --panel4: #242a3b; --sombra-tj: 0 1px 2px rgba(0,0,0,.3); --sombra-tj-hover: 0 2px 4px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.38); } /* Tarjeta genérica para listas repetidas (una fila = una tarjeta): usada por Prepicking. Clase NUEVA (.tj-item) — no reemplaza ".in", que se sigue usando tal cual donde hoy envuelve una tabla o un bloque único. */ .tj-item{background:var(--panel4);border:1px solid var(--linea);border-radius:12px; box-shadow:var(--sombra-tj);padding:14px 16px;margin-bottom:10px; transition:box-shadow .15s,border-color .15s;} .tj-item:hover{border-color:var(--linea2);box-shadow:var(--sombra-tj-hover);} .tj-item:last-child{margin-bottom:0} .tj-item .tj-cab{display:flex;align-items:center;gap:10px;cursor:pointer;} .tj-item .tj-cuerpo{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea);} /* JPCB — columnas como "bandejas" reales y tarjetas con jerarquía clara + acciones agrupadas aparte, para que dejen de sentirse "todas iguales" / sobrecargadas (pedido explícito de Cristóbal). */ .jpcb-wrap{gap:14px;} .jpcb-col-body{background:var(--jpcb-panel-bg);border-radius:0 0 10px 10px;padding:8px;gap:10px;} .jpcb-col-tit{background:var(--jpcb-panel-tit-bg);border-radius:10px 10px 0 0; padding:9px 12px;margin:0;font-size:11.5px;} .jpcb-col-tit .cnt{background:var(--panel3);color:var(--txt2);padding:1px 9px; border-radius:99px;font-size:10.5px;} .jpcb-card{background:var(--panel4);border:1px solid var(--linea);border-left-width:4px; border-radius:10px;padding:12px 13px 10px;box-shadow:var(--sombra-tj); transition:box-shadow .15s,border-color .15s,transform .12s;} .jpcb-card:hover{box-shadow:var(--sombra-tj-hover);transform:translateY(-1px);border-color:var(--linea2);} .jpcb-pat{font-size:13.5px;} .jpcb-linea{line-height:1.55;} .jpcb-linea:first-of-type{color:var(--txt);font-weight:600;} .jpcb-comentario{background:var(--ambar2);border-radius:6px;padding:5px 8px;margin-top:6px;} /* Acciones: propia "franja" separada del contenido, botones uniformes en forma de píldora, y la acción positiva (Finalizado) resaltada para que se note cuál es "la buena" entre varias secundarias. Ningún botón se quita ni cambia de comportamiento — solo se reordena visualmente. */ .jpcb-acciones{border-top:1px solid var(--linea);margin-top:10px;padding-top:8px;gap:5px;} .jpcb-acciones button,.jpcb-acciones select{border-radius:7px;padding:4px 8px; font-weight:600;background:var(--panel3);min-width:0;max-width:100%;} .jpcb-acciones button[data-jpcb-finalizar]{background:var(--verde2);color:var(--verdec);border-color:transparent;} .jpcb-acciones button[data-jpcb-eliminar]{background:transparent;color:var(--txt3);border-color:transparent; margin-left:auto;padding:4px 7px;} .jpcb-acciones button[data-jpcb-eliminar]:hover{background:var(--rojo2);color:var(--rojoc);} /* ===================================================================== REDISEÑO JPCB — 14/09/2026, a partir de la especificación de diseño de Cristóbal (especificacion-diseno-planificador.md): columnas colapsables + color por etapa + scroll vertical propio por columna. Los colores reusan exactamente los mismos que ya identifican cada etapa en el borde de la tarjeta (.jpcb-card. más arriba) — ahora también se ven en el encabezado de columna, para reconocer la etapa sin leer el título. ===================================================================== */ /* Cada columna, con scroll propio (no toda la fila de golpe) y un degradado abajo que avisa que hay más tarjetas — el encabezado (.jpcb-col-tit) queda fuera de ese scroll, siempre visible. */ .jpcb-col{position:relative;} .jpcb-col-body{max-height:56vh;overflow-y:auto;} /* BUG encontrado en prueba visual (14/09/2026): al ponerle max-height + overflow-y:auto a .jpcb-col-body (que ya era flex-direction:column), las tarjetas — flex-shrink:1 por defecto — se ENCOGÍAN para caber todas dentro del alto máximo en vez de desbordar y activar el scroll (con muchas OTs una tarjeta real llegaba a verse aplastada a ~24px, ilegible). flex-shrink:0 fuerza a cada tarjeta a mantener su alto natural, así el que se queda corto es el contenedor — que sí sabe scrollear — y no la tarjeta. Verificado inyectando 10 tarjetas de prueba en una columna angosta de alto: sin esto no había scroll real (scrollHeight quedaba igual al clientHeight pese al desborde). El "—" de columna vacía también entra por acá; no le hace nada. */ .jpcb-col-body>*{flex-shrink:0;} .jpcb-col::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px; border-radius:0 0 10px 10px;background:linear-gradient(to bottom,var(--fade-fondo-0),var(--fade-fondo-1)); pointer-events:none;} .jpcb-col-tit{border-top:3px solid var(--linea2);display:flex;align-items:center;gap:6px;} .jpcb-col-tit>span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .jpcb-col-cerrar{background:transparent;border:none;color:var(--txt3);padding:0 2px;font-size:13px; line-height:1;min-width:0;} .jpcb-col-cerrar:hover{color:var(--txt);border-color:transparent;background:transparent;} .jpcb-col--no_asiste .jpcb-col-tit{border-top-color:var(--rojo);} .jpcb-col--no_asiste .jpcb-col-tit .cnt{background:var(--rojo2);color:var(--rojoc);} .jpcb-col--ingreso_taller .jpcb-col-tit{border-top-color:var(--azul);} .jpcb-col--ingreso_taller .jpcb-col-tit .cnt{background:var(--azul2);color:var(--azulc);} .jpcb-col--en_proceso .jpcb-col-tit{border-top-color:var(--ambar);} .jpcb-col--en_proceso .jpcb-col-tit .cnt{background:var(--ambar2);color:var(--ambarc);} .jpcb-col--en_prueba .jpcb-col-tit{border-top-color:var(--morado);} .jpcb-col--en_prueba .jpcb-col-tit .cnt{background:var(--morado2);color:var(--moradoc);} .jpcb-col--lavado .jpcb-col-tit{border-top-color:var(--cyan);} .jpcb-col--lavado .jpcb-col-tit .cnt{background:var(--cyan2);color:var(--cyanc);} .jpcb-col--entrega .jpcb-col-tit{border-top-color:var(--verde);} .jpcb-col--entrega .jpcb-col-tit .cnt{background:var(--verde2);color:var(--verdec);} .jpcb-col--stop .jpcb-col-tit{border-top-color:var(--ambar);} /* 30/09/2026 — columnas propias del tablero DyP (recepcion/lavado/entrega ya están arriba, se reutilizan tal cual). */ .jpcb-col--inspeccion .jpcb-col-tit{border-top-color:var(--azul);} .jpcb-col--inspeccion .jpcb-col-tit .cnt{background:var(--azul2);color:var(--azulc);} .jpcb-col--desarme_evaluacion .jpcb-col-tit{border-top-color:var(--ambar);} .jpcb-col--desarme_evaluacion .jpcb-col-tit .cnt{background:var(--ambar2);color:var(--ambarc);} .jpcb-col--desabolladura .jpcb-col-tit{border-top-color:var(--rojo);} .jpcb-col--desabolladura .jpcb-col-tit .cnt{background:var(--rojo2);color:var(--rojoc);} .jpcb-col--preparacion_pintura .jpcb-col-tit{border-top-color:var(--morado);} .jpcb-col--preparacion_pintura .jpcb-col-tit .cnt{background:var(--morado2);color:var(--moradoc);} .jpcb-col--armado .jpcb-col-tit{border-top-color:var(--azul);} .jpcb-col--armado .jpcb-col-tit .cnt{background:var(--azul2);color:var(--azulc);} .jpcb-col--control_calidad .jpcb-col-tit{border-top-color:var(--ambar);} .jpcb-col--control_calidad .jpcb-col-tit .cnt{background:var(--ambar2);color:var(--ambarc);} .jpcb-col--pulido .jpcb-col-tit{border-top-color:var(--cyan);} .jpcb-col--pulido .jpcb-col-tit .cnt{background:var(--cyan2);color:var(--cyanc);} /* Columna vacía o cerrada a mano: se reduce a una franja angosta con el ícono de la etapa, el conteo y el título en vertical — clic para volver a abrirla (columnaJpcb() en mod-planificador.js decide cuándo). */ .jpcb-col-cerrada{flex:0 0 42px;max-width:42px;} .jpcb-col-cerrada::after{display:none;} .jpcb-col-cerrada-inner{width:100%;height:100%;min-height:180px;display:flex;flex-direction:column; align-items:center;gap:8px;padding:10px 0;background:var(--jpcb-panel-tit-bg);border-radius:10px; border-top:3px solid var(--linea2);color:var(--txt2);} .jpcb-col-cerrada-inner:hover{background:var(--jpcb-cerrada-hover-bg);border-color:transparent;} .jpcb-col-cerrada-inner .cnt{background:var(--panel3);color:var(--txt2);padding:1px 7px; border-radius:99px;font-size:10px;} .jpcb-col-cerrada-etiqueta{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px; font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--txt2);margin-top:auto;} .jpcb-col-cerrada.jpcb-col--no_asiste .jpcb-col-cerrada-inner{border-top-color:var(--rojo);} .jpcb-col-cerrada.jpcb-col--ingreso_taller .jpcb-col-cerrada-inner{border-top-color:var(--azul);} .jpcb-col-cerrada.jpcb-col--en_proceso .jpcb-col-cerrada-inner{border-top-color:var(--ambar);} .jpcb-col-cerrada.jpcb-col--en_prueba .jpcb-col-cerrada-inner{border-top-color:var(--morado);} .jpcb-col-cerrada.jpcb-col--lavado .jpcb-col-cerrada-inner{border-top-color:var(--cyan);} .jpcb-col-cerrada.jpcb-col--entrega .jpcb-col-cerrada-inner{border-top-color:var(--verde);} .jpcb-col-cerrada.jpcb-col--stop .jpcb-col-cerrada-inner{border-top-color:var(--ambar);} /* "Citas de hoy" (Asiste/No asiste/Reagenda) — mismo lenguaje: tarjeta elevada; los botones ya venían con color semántico (verde/rojo/ámbar), solo se redondean para que hagan juego con el resto. */ .citas-wrap{background:var(--panel2);} .cita-card{background:var(--panel4);box-shadow:var(--sombra-tj);padding:10px 12px; transition:box-shadow .15s,border-color .15s;} .cita-card:hover{box-shadow:var(--sombra-tj-hover);border-color:var(--linea2);} .cita-acc button{border-radius:8px;font-weight:600;padding:4px 10px;} /* Tarjetas KPI (.tarjeta genérica) — consistente con .tj-item/.jpcb-card. */ .tarjeta{background:var(--panel4);box-shadow:var(--sombra-tj);} .tarjeta:hover{box-shadow:var(--sombra-tj-hover);} /* Tabla de Casos — un poco más de aire por fila y mejor contraste en la fila seleccionada, sin tocar la lógica de selección. */ td{padding:12px 13px;} tbody tr.sel td{background:var(--azul2);box-shadow:inset 3px 0 0 var(--azul);} /* ===================================================================== MÓDULO CASOS — CONTENIDO — 10/09/2026 --------------------------------------------------------------- Aprobado por Cristóbal ("en parte" — el contenido estaba bien, lo que faltaba era la capa de marca de más abajo). Objetivo puntual: que al pasar de un caso a otro se note de inmediato — antes el encabezado (folio + KPIs) era puro texto plano del mismo tono que el resto. ===================================================================== */ .cab{background:var(--panel2);box-shadow:var(--sombra-cab);position:relative;z-index:1;} .cab h3{font-size:19px;} .kpis{gap:10px;} .kpis .kpi{background:var(--panel4);border:1px solid var(--linea);border-radius:9px; padding:9px 14px;box-shadow:var(--sombra-tj);min-width:84px;} .ev .b{background:var(--panel4);border:1px solid var(--linea);border-radius:8px; padding:9px 12px;margin-top:6px;} .lista{border:none;border-radius:0;overflow:visible;} .lista .it{background:var(--panel4);border:1px solid var(--linea);border-radius:9px; padding:11px 14px;margin-bottom:8px;box-shadow:var(--sombra-tj); transition:box-shadow .15s,border-color .15s;} .lista .it:hover{border-color:var(--linea2);box-shadow:var(--sombra-tj-hover);} .lista .it:last-child{margin-bottom:0;border-bottom:1px solid var(--linea);} .filtros{background:var(--panel2);} /* ===================================================================== CAPA DE MARCA / SHELL — 10/09/2026 --------------------------------------------------------------- Cristóbal vio la pasada de tarjetas de arriba y su comentario fue justo: "sigue sintiéndose como la de Streamlit". Tenía razón — lo que más delata a una app hecha rápido no es la tarjeta de un módulo, es el "esqueleto" que se ve en TODA pantalla sin excepción: la tipografía de sistema, los emoji como ícono de navegación, el nav plano, los botones sin personalidad. Esta pasada ataca eso — la única capa que el ojo ve siempre, sea cual sea el módulo. No toca ninguna lógica: tipografía (Inter, importada en index.html), íconos de navegación (dejaron de ser emoji — ver ICONS en app.js), el nav lateral, la barra superior, los botones y el login. ===================================================================== */ :root{ --f: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --marca-a: #5b7cfa; --marca-b: #8b5cf6; --marca-grad: linear-gradient(135deg, var(--marca-a), var(--marca-b)); } body{font-family:var(--f);letter-spacing:-.001em;} h1,h2,h3{font-family:var(--f);} button,select,input,textarea{border-radius:9px;font-weight:500;} button.pri{background:var(--marca-grad);border-color:transparent;font-weight:600; box-shadow:var(--sombra-boton-pri); transition:box-shadow .18s,transform .12s;} button.pri:hover:not(:disabled){background:var(--marca-grad);filter:brightness(1.08); box-shadow:var(--sombra-boton-pri-hover);transform:translateY(-1px);} button.pri:active:not(:disabled){transform:translateY(0);} button.gh{border-radius:8px;} input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(91,124,250,.18);} .login{background:radial-gradient(1200px 800px at 50% -12%,var(--login-glow) 0%,var(--bg) 58%);} .login .caja{border-radius:20px;box-shadow:var(--sombra-login-caja);} .login .logo{background:var(--marca-grad);border-radius:12px;box-shadow:0 6px 20px rgba(91,124,250,.4); font-family:var(--f);} .login h1{font-weight:800;letter-spacing:-.02em;} .lat-top .logo{background:var(--marca-grad);box-shadow:0 3px 10px rgba(91,124,250,.35); font-family:var(--f);} .lat-top .n{font-weight:800;letter-spacing:-.01em;} nav{padding:12px 12px 16px;} nav .grupo{font-size:9.5px;letter-spacing:.09em;padding:16px 10px 7px;opacity:.75;} nav a{gap:11px;padding:8px 11px;border-radius:9px;border-left:none;font-weight:500; position:relative;} nav a:hover{background:var(--panel3);} nav a.on{background:var(--marca-grad);color:#fff;font-weight:600; box-shadow:0 3px 12px rgba(91,124,250,.3);} nav a.on .ic{color:#fff;} nav a .ic{width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center; color:var(--txt3);flex:0 0 auto;transition:color .15s;} nav a .ic svg{width:17px;height:17px;stroke-width:1.8;} nav a:hover .ic{color:var(--txt2);} nav a.on .badge{background:rgba(255,255,255,.25);} .av{background:var(--marca-grad);color:#fff;font-weight:700;} .lat-pie .n{font-weight:700;} /* Botones "gh" que solo llevan un ícono svg (salir, menú hamburguesa): centrado vertical prolijo, mismo trato que los íconos del nav. */ button.gh svg{display:block;vertical-align:middle;} /* ===================================================================== RESTO DE MÓDULOS — 10/09/2026 --------------------------------------------------------------- Sala de Control, Admin, Cuenta Ficha, Loaners, Campañas e Informes ya usan en su mayoría clases compartidas (`.tarjeta`, `.kpis .kpi`, `.lista .it`, `.chip`, tablas) que ya recibieron el tratamiento nuevo más arriba — así que gran parte de estos módulos ya se ve al día sin tocar nada más. Lo que faltaba suelto: - `.seccion` (el bloque con título que usa Admin/Sala de Control/ Informes) no tenía ninguna sombra propia — se agrega, mismo token que el resto, para que no se sienta "plano" al lado de una tarjeta. - `.item-lista` (la lista de la izquierda en Campañas Ford) todavía eran filas pegadas con solo una línea divisoria — pasa a ser el mismo patrón de tarjeta por fila que ya se usa en Documentos/ Repuestos de Casos y en Prepicking. Nota aparte: el Cotizador de Mantenciones y el informe de Power BI de Indicadores Post Venta son contenido de terceros incrustado en un iframe (un bundle propio y un reporte de Power BI, respectivamente) — no son HTML de esta App, así que no se pueden restylear desde acá; solo se afinó el marco que sí es nuestro (`.pbi-nav`, ya estaba bien). ===================================================================== */ .seccion{box-shadow:var(--sombra-tj);} .item-lista{background:var(--panel4);border:1px solid var(--linea);border-radius:9px; padding:11px 14px;margin:0 0 8px;box-shadow:var(--sombra-tj); transition:box-shadow .15s,border-color .15s;} .item-lista:hover{background:var(--panel4);border-color:var(--linea2);box-shadow:var(--sombra-tj-hover);} .item-lista.sel{background:var(--azul2);border-color:var(--azul);} .item-lista:last-child{margin-bottom:0;} /* Campañas Ford reutiliza `.tabla` (pensada para envolver un ) como contenedor genérico con scroll para su lista de tarjetas — le damos un respiro interno SOLO cuando envuelve tarjetas, sin tocar el caso de Casos (que sigue envolviendo una tabla al ras). */ .tabla:has(.item-lista){padding:10px;} /* ===================================================================== TEMA CLARO — 25/09/2026 --------------------------------------------------------------- Pedido de Cristóbal: modo claro y oscuro, sin perder legibilidad ni "comodidad visual" en modo claro, y con oscuro como default para cualquier usuario nuevo (ver el script inline en index.html: si localStorage no tiene nada guardado, no se pone este atributo y la App sigue mostrando el :root de arriba, es decir oscuro — el modo claro SOLO se activa cuando la persona lo elige a propósito, ver TEMA_KEY en app.js). Selector con atributo (:root[data-theme="light"]) para que gane por especificidad sobre los tres bloques :root{} de arriba sin importar el orden — por eso este bloque puede ir al final, como sección propia, en vez de tener que intercalarse entre los otros tres. Cada valor de acá fue verificado con la fórmula de contraste WCAG (luminancia relativa) antes de fijarlo, no a ojo: - Texto: --txt/--txt2 ≥ 7:1 sobre --bg y --panel (bien por sobre el mínimo de 4.5:1 — este era el punto más importante del pedido, "que no se vean textos con poco contraste"). --txt3 (etiquetas chicas, uppercase) ≥ 5:1. - Los seis pares accent2/accentc (chips de estado, etiquetas, montos) se rehicieron para claro: en oscuro accentc es un pastel claro sobre un fondo oscuro-teñido; en claro se invierte — accentc pasa a ser una versión oscura/saturada del color, verificada en ≥4.5:1 tanto contra su propio accent2 como contra --panel/--bg (varios chips muestran el texto directo sobre la página, no solo sobre el chip). Los colores base (--azul, --verde, --ambar, --rojo, --morado, --cyan) NO cambian: son sólidos y ya se leen bien con texto blanco encima en los dos temas (botón primario, avatar, nav activo), así que se dejan intactos a propósito. - Bordes (--linea/--linea2) calibrados para tener la MISMA sutileza relativa que ya tiene hoy el tema oscuro (línea vs panel ~1.3/1.6:1 en los dos temas) en vez de un valor arbitrario más marcado — si en claro los bordes fueran mucho más notorios que en oscuro, la App se sentiría inconsistente entre los dos modos. - Sombras: se pasa de negro puro (rgba(0,0,0,x)) a un tinte azul-gris oscuro (rgba(20,23,42,x), el mismo tono de --txt) con opacidad más baja — una sombra negra fuerte sobre fondo blanco se ve "sucia"; este tinte da la misma sensación de profundidad sin ensuciar. Ver contraste.py (registrado en LEEME.md) para el detalle de cada verificación. */ :root[data-theme="light"]{ --bg:#eef1f6; --panel:#ffffff; --panel2:#f7f9fc; --panel3:#e9edf4; --panel4:#ffffff; --linea:#dde2ea; --linea2:#c7cedb; --txt:#161a22; --txt2:#454e5f; --txt3:#5f6675; --azul2:#e4ebff; --azulc:#2f56d1; --verde2:#e1f7ea; --verdec:#157a45; --ambar2:#fdf1da; --ambarc:#8a5a05; --rojo2:#fde7e9; --rojoc:#c81e2e; --morado2:#f1e8fd; --moradoc:#7233c9; --cyan2:#e0f7fb; --cyanc:#0d7186; --sombra:0 8px 28px rgba(20,23,42,.16); --sombra-tj:0 1px 2px rgba(20,23,42,.08); --sombra-tj-hover:0 2px 4px rgba(20,23,42,.10),0 8px 20px rgba(20,23,42,.12); --neutro-bg:#e7e7ec; --neutro-txt:#46454f; --sutil-bg:#e9edf4; --borde-tabla:#e6eaf1; --fila-hover:#eef2f8; --divisor-tablero:#e7ebf2; --raya-nodisp:#e3e7ee; --tarjeta-libre-borde:#3fa36c; --login-glow:#dce6fb; --login-err-borde:#eeb0b8; --jpcb-panel-bg:rgba(15,23,42,.03); --jpcb-panel-tit-bg:rgba(15,23,42,.045); --jpcb-cerrada-hover-bg:rgba(15,23,42,.07); --fade-fondo-0:rgba(255,255,255,0); --fade-fondo-1:rgba(255,255,255,.9); --sombra-cab:0 4px 10px rgba(20,23,42,.08); --sombra-tablero-hover:0 4px 12px rgba(20,23,42,.18); --sombra-login-caja:0 20px 60px rgba(20,23,42,.10),0 1px 0 rgba(255,255,255,.6) inset; --sombra-boton-pri:0 1px 2px rgba(20,23,42,.12),0 4px 14px rgba(91,124,250,.28); --sombra-boton-pri-hover:0 2px 4px rgba(20,23,42,.14),0 8px 24px rgba(91,124,250,.38); } /* ===================================================================== HERRAMIENTAS ESPECIALES (13/10/2026) — mod-herramientas.js Todo con prefijo .hx- y solo con los tokens de color de :root, así el modo claro funciona solo (no necesita reglas propias). ===================================================================== */ .hx{display:flex;flex-direction:column;width:100%;min-height:0;position:relative;} .hx-top{display:flex;gap:14px;align-items:flex-start;padding:14px 18px 12px;flex-wrap:wrap;background:var(--panel);} .hx-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;flex:1;min-width:0;} .hx-kpi{background:var(--panel2);border:1px solid var(--linea);border-radius:var(--r);padding:10px 13px;cursor:pointer; transition:border-color .15s,transform .15s;position:relative;overflow:hidden;} .hx-kpi:hover{border-color:var(--linea2);transform:translateY(-1px);} .hx-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--linea2);} .hx-kpi .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt3);font-weight:700;} .hx-kpi .v{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:2px;} .hx-kpi .d{font-size:11px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .hx-k-verde::before{background:var(--verde);} .hx-k-verde .v{color:var(--verdec);} .hx-k-azul::before{background:var(--azul);} .hx-k-azul .v{color:var(--azulc);} .hx-k-rojo::before{background:var(--rojo);} .hx-k-rojo .v{color:var(--rojoc);} .hx-k-ambar::before{background:var(--ambar);} .hx-k-ambar .v{color:var(--ambarc);} .hx-acciones{display:flex;gap:8px;align-items:center;padding:6px 0;flex:0 0 auto;} .hx-acciones button{padding:7px 12px;font-size:13px;white-space:nowrap;} .hx-tabs{align-items:center;} .hx-filtros select{max-width:210px;} .hx-tabs .tab{display:flex;align-items:center;gap:6px;} .hx-badge{font-size:10.5px;font-weight:700;background:var(--ambar2);color:var(--ambarc);padding:1px 7px;border-radius:99px;} .hx-badge.rojo{background:var(--rojo2);color:var(--rojoc);} .hx-cuerpo{flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column;} .hx-filtros{position:sticky;top:0;z-index:3;background:var(--bg);} .hx-filtros input[type=search]{flex:1;min-width:200px;} .hx-toggle{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt2);white-space:nowrap;cursor:pointer;} .hx-lista{padding:0 0 70px;} .hx-tabla td{max-width:none;white-space:normal;vertical-align:middle;} .hx-c-sel{width:34px;text-align:center;padding-left:10px !important;padding-right:4px !important;} .hx-sel{width:16px;height:16px;cursor:pointer;accent-color:var(--azul);} .hx-sel-vacio{display:inline-block;width:16px;} .hx-nom{font-weight:600;} .hx-sub{font-size:11.5px;color:var(--txt3);font-weight:400;} .hx-1l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%;vertical-align:bottom;} div.hx-1l,.hx-sub.hx-1l{display:block;max-width:520px;} .hx-nw{white-space:nowrap !important;} .hx-ubi{display:inline-block;font-size:11px;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--panel3);color:var(--txt2);padding:2px 7px;border-radius:6px;} .hx-grupo td{background:var(--panel);} .hx-unidad td{background:var(--panel2);} .hx-unidad td.folio{padding-left:28px;} .hx-flecha{display:inline-block;transition:transform .15s;color:var(--txt3);} .hx-flecha.on{transform:rotate(90deg);} .hx-disp{display:flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap;} .hx-disp-bar{display:flex;gap:2px;} .hx-disp-bar i{width:9px;height:14px;border-radius:3px;display:block;} .hx-chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:99px; white-space:nowrap;letter-spacing:.02em;vertical-align:middle;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);} .hx-chip.hx-verde,i.hx-verde,.hx-pill-r .hx-verde{background:var(--verde2);color:var(--verdec);} .hx-chip.hx-azul,i.hx-azul{background:var(--azul2);color:var(--azulc);} .hx-chip.hx-rojo,i.hx-rojo,.hx-pill-r .hx-rojo{background:var(--rojo2);color:var(--rojoc);} .hx-chip.hx-ambar,i.hx-ambar,.hx-pill-r .hx-ambar{background:var(--ambar2);color:var(--ambarc);} .hx-chip.hx-morado,i.hx-morado{background:var(--morado2);color:var(--moradoc);} .hx-chip.hx-cyan,i.hx-cyan{background:var(--cyan2);color:var(--cyanc);} .hx-chip.hx-neutro,i.hx-neutro{background:var(--neutro-bg);color:var(--neutro-txt);} .hx-disp-bar i.hx-verde,.hx-zona-bar i.hx-verde{background:var(--verde);} .hx-disp-bar i.hx-azul,.hx-zona-bar i.hx-azul{background:var(--azul);} .hx-disp-bar i.hx-rojo,.hx-zona-bar i.hx-rojo{background:var(--rojo);} .hx-disp-bar i.hx-ambar{background:var(--ambar);} .hx-disp-bar i.hx-morado,.hx-zona-bar i.hx-morado{background:var(--morado);} .hx-disp-bar i.hx-neutro{background:var(--linea2);} /* Barra flotante de selección */ .hx-carro{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;z-index:20;width:min(880px,calc(100% - 32px));} .hx-carro-in{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--azul);border-radius:14px; padding:10px 14px;box-shadow:var(--sombra);} .hx-carro-in .hx-sub{max-width:360px;} /* Modales */ .hx-modal{max-height:92vh;} .hx-modal .modal-head h3{font-size:16px;} .hx-x{background:transparent;border:none;color:var(--txt3);padding:4px 8px;font-size:14px;} .hx-x:hover{color:var(--txt);} .hx-p{margin:0 0 12px;color:var(--txt2);font-size:13px;} .hx-pie{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;} .hx-err{background:var(--rojo2);color:var(--rojoc);border-radius:8px;padding:9px 12px;font-size:13px;margin-top:12px;} .hx-form{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px;} .hx-span2{grid-column:span 2;} .hx-span3{grid-column:span 3;} .hx-campo{display:flex;flex-direction:column;gap:4px;min-width:0;margin-bottom:6px;} .hx-campo>span{font-size:11.5px;color:var(--txt3);font-weight:600;} .hx-campo input,.hx-campo select,.hx-campo textarea{width:100%;} .hx-resp{display:flex;gap:6px;} .hx-resp>*{flex:1;min-width:0;} .hx-rapidos{display:flex;gap:4px;flex-wrap:wrap;} .hx-rapidos button{padding:6px 9px;font-size:12px;} .hx-sec-t{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt3);font-weight:700;margin:16px 0 8px;} .hx-picker{position:relative;} .hx-picker input{width:100%;} .hx-picker-res{display:flex;flex-direction:column;gap:4px;margin-top:6px;max-height:230px;overflow:auto;} .hx-res-i{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:7px 10px;border:1px solid var(--linea); border-radius:9px;background:var(--panel2);font-size:13px;} .hx-res-i button{padding:6px 10px;font-size:12px;white-space:nowrap;} .hx-sel-lista{display:flex;flex-direction:column;gap:5px;margin-top:10px;} .hx-sel-i{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;background:var(--azul2);font-size:13px;} .hx-sel-i .hx-1l{flex:1;min-width:0;} .hx-aviso-plazo{margin-top:10px;background:var(--ambar2);color:var(--ambarc);border-radius:8px;padding:8px 12px;font-size:12.5px;} /* Ficha */ .hx-ficha-nom{font-size:17px;font-weight:700;margin-bottom:8px;} .hx-ficha-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px;} .hx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} .hx-grid>div{background:var(--panel2);border:1px solid var(--linea);border-radius:10px;padding:8px 11px;display:flex;flex-direction:column;min-width:0;} .hx-grid span,.hx-bloque>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt3);font-weight:700;} .hx-grid b{font-size:13.5px;} .hx-grid em{font-size:11.5px;color:var(--txt3);font-style:normal;} .hx-grid a{color:var(--azulc);} .hx-bloque{margin-top:10px;background:var(--panel2);border:1px solid var(--linea);border-radius:10px;padding:9px 12px;} .hx-bloque p{margin:3px 0 0;font-size:13px;} .hx-bloque a{color:var(--azulc);font-size:12.5px;} .hx-aviso{background:var(--ambar2);border-color:transparent;} .hx-aviso p{color:var(--ambarc);} .hx-pbox{border-color:var(--azul);background:var(--azul2);} .hx-ficha-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;} .hx-tl{display:flex;flex-direction:column;gap:0;max-height:300px;overflow:auto;padding-left:4px;} .hx-tl-i{display:flex;gap:10px;padding:6px 0;position:relative;} .hx-tl-i::before{content:"";position:absolute;left:4px;top:18px;bottom:-6px;width:1px;background:var(--linea);} .hx-tl-i:last-child::before{display:none;} .hx-tl-dot{width:9px;height:9px;border-radius:99px;background:var(--linea2);margin-top:5px;flex:0 0 auto;} .hx-tl-entrega .hx-tl-dot{background:var(--azul);} .hx-tl-devolucion .hx-tl-dot{background:var(--verde);} .hx-tl-solicitud .hx-tl-dot,.hx-tl-estado .hx-tl-dot{background:var(--ambar);} .hx-tl-rechazo .hx-tl-dot{background:var(--rojo);} .hx-tl-aprobacion .hx-tl-dot{background:var(--morado);} .hx-tl-conteo .hx-tl-dot{background:var(--cyan);} .hx-tl-t{font-size:12px;color:var(--txt3);} .hx-tl-t b{color:var(--txt2);} .hx-tl-d{font-size:13px;} .hx-radios{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;} .hx-radio{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--linea);border-radius:9px;cursor:pointer;} .hx-radio:has(input:checked){border-color:var(--azul);background:var(--azul2);} /* Préstamos */ .hx-seg{display:inline-flex;background:var(--panel2);border:1px solid var(--linea);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap;} .hx-seg button{border:none;background:transparent;padding:6px 11px;font-size:12.5px;border-radius:7px;color:var(--txt2);} .hx-seg button span{font-size:10.5px;color:var(--txt3);margin-left:3px;} .hx-seg button.on{background:var(--panel);color:var(--txt);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.25);} .hx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px;padding:14px 16px 30px;align-content:start;} .hx-card{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:6px; border-left:3px solid var(--linea2);} .hx-card-solicitada{border-left-color:var(--ambar);} .hx-card-aprobada{border-left-color:var(--morado);} .hx-card-entregada{border-left-color:var(--azul);} .hx-card-devuelta{border-left-color:var(--verde);} .hx-card-rechazada{border-left-color:var(--rojo);} .hx-card-venc{border-left-color:var(--rojo);background:linear-gradient(90deg,var(--rojo2),var(--panel) 40%);} .hx-card-cab{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .hx-folio{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;} .hx-card-resp{font-size:13.5px;} .hx-card-plazo{font-size:12.5px;color:var(--txt2);} .hx-card-items{display:flex;flex-wrap:wrap;gap:4px;} .hx-it{font-size:11.5px;font-weight:600;background:var(--panel3);padding:2px 8px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;} .hx-it-ok{text-decoration:line-through;opacity:.6;} .hx-card-mot{font-size:12.5px;color:var(--txt2);font-style:italic;} .hx-card-ret{font-size:12.5px;padding:6px 9px;border-radius:8px;background:var(--morado2,rgba(139,92,246,.12));color:var(--moradoc,#c4b5fd);border:1px solid rgba(139,92,246,.35);} .hx-it-ret{font-size:10px;color:var(--moradoc,#c4b5fd);} .hx-card-acc{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;} .hx-card-acc button{padding:6px 11px;font-size:12.5px;} .hx-recep{display:flex;flex-direction:column;gap:8px;} .hx-recep-i{border:1px solid var(--linea);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:7px;background:var(--panel2);} .hx-recep-chk{display:flex;align-items:center;gap:8px;min-width:0;} .hx-recep-con{display:flex;gap:5px;flex-wrap:wrap;} .hx-pill-r input{display:none;} .hx-pill-r span{display:inline-block;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600;cursor:pointer;opacity:.45;border:1px solid transparent;} .hx-pill-r input:checked+span{opacity:1;border-color:currentColor;} .hx-imp-res{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;} .hx-imp-wrap{max-height:60vh;overflow:auto;border:1px solid var(--linea);border-radius:10px;} .hx-imp td{vertical-align:top;padding:8px 9px;} .hx-imp th{top:0 !important;} .hx-imp input,.hx-imp select{padding:6px 8px;font-size:12.5px;} .hx-avisos{font-size:11.5px;color:var(--ambarc);max-width:280px;min-width:230px;} .hx-avisos a{color:var(--azulc);font-weight:700;} .hx-avisos div+div{margin-top:3px;} .hx-dib{color:var(--txt2);flex:0 0 auto;display:block;} .hx-con-dib{display:flex;align-items:center;gap:12px;min-width:0;} .hx-con-dib .hx-dib{background:var(--panel2);border:1px solid var(--linea);border-radius:8px;padding:3px;} .hx-con-dib-t{min-width:0;} .hx-ficha-top{display:flex;gap:16px;align-items:flex-start;margin-bottom:12px;} .hx-ficha-dib{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--linea);border-radius:12px;padding:12px;flex:0 0 auto;max-width:230px;text-align:center;} .hx-ficha-dib .hx-dib{color:var(--txt);} .hx-ficha-cab{min-width:0;flex:1;} .hx-mini-btn{padding:4px 10px;font-size:12px;} .hx-dib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;max-height:56vh;overflow:auto;padding:2px;} .hx-dib-op{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:10px;background:var(--panel2);} .hx-dib-op span{font-size:11px;color:var(--txt2);line-height:1.25;} .hx-dib-op.on{border-color:var(--azul);background:var(--azul2);} .hx-sel-i .hx-dib,.hx-res-i .hx-dib,.hx-det-i .hx-dib{background:var(--panel);border-radius:6px;} .hx-iv-dib{width:56px;} /* Mapa */ .hx-leyenda{display:flex;gap:4px;flex-wrap:wrap;} .hx-mapa-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;padding:14px 16px 24px;align-items:start;} .hx-mapa{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;} .hx-rack{flex:1;min-width:260px;max-width:420px;} .hx-rack-t{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt3);font-weight:700;margin:0 0 6px 4px;} .hx-rack-in{display:flex;flex-direction:column;gap:0;border-left:6px solid var(--ambar);border-right:6px solid var(--ambar); border-radius:4px;padding:0 8px;background:linear-gradient(var(--panel2),var(--panel2));} .hx-rack-suelto .hx-rack-in{border-color:var(--linea2);} .hx-zona{padding:10px 10px 9px;border-bottom:5px solid var(--azul);cursor:pointer;transition:background .15s;} .hx-zona:last-child{border-bottom-color:var(--azul);} .hx-zona:hover{background:var(--panel3);} .hx-zona.on{background:var(--azul2);} .hx-zona-cab{display:flex;align-items:center;justify-content:space-between;} .hx-zona-cab b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;} .hx-zona-n{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;} .hx-zona-d{font-size:12px;color:var(--txt2);} .hx-zona-r{font-size:11px;color:var(--txt3);} .hx-zona-bar{display:flex;height:6px;border-radius:99px;overflow:hidden;background:var(--panel3);margin:6px 0 3px;} .hx-zona-bar i{display:block;height:100%;} .hx-zona-l{font-size:11px;color:var(--txt3);} .hx-mapa-det{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);position:sticky;top:70px;max-height:calc(100vh - 260px); display:flex;flex-direction:column;min-height:200px;} .hx-det-cab{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--linea);} .hx-det-cab button{padding:5px 10px;font-size:12px;} .hx-det-lista{overflow:auto;padding:6px;} .hx-det-i{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:12.5px;} .hx-det-i:hover{background:var(--panel2);} .hx-det-i>div:first-child{min-width:0;} /* Alertas */ .hx-alertas{padding:14px 16px 30px;} .hx-al-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;align-items:start;} .hx-al-i.hx-al-2l{flex-direction:column;align-items:stretch;gap:1px;text-align:left;} .hx-al-l1{display:flex;align-items:center;gap:6px;min-width:0;} .hx-al-l1 .hx-1l{min-width:0;flex:0 1 auto;} .hx-al{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:11px 13px;border-top:3px solid var(--linea2);} .hx-al-rojo{border-top-color:var(--rojo);} .hx-al-ambar{border-top-color:var(--ambar);} .hx-al-morado{border-top-color:var(--morado);} .hx-al-t{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13.5px;} .hx-al-t b{font-size:20px;font-variant-numeric:tabular-nums;} .hx-al-rojo .hx-al-t b{color:var(--rojoc);} .hx-al-ambar .hx-al-t b{color:var(--ambarc);} .hx-al-ay{margin:2px 0 4px;} .hx-al-l{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-height:220px;overflow:auto;} .hx-al-i{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:12.5px;cursor:pointer;min-width:0;} .hx-al-i:hover{background:var(--panel2);} .hx-al-i .hx-1l{min-width:0;flex:0 1 auto;} .hx-uso-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .hx-uso-2{grid-template-columns:repeat(3,1fr);margin-top:12px;} .hx-uso{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:12px 14px;} .hx-uso .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt3);font-weight:700;} .hx-uso .v{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;} .hx-panel{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:12px 14px;} .hx-panel-t{font-weight:700;font-size:13.5px;margin-bottom:8px;} .hx-bar-i{display:grid;grid-template-columns:minmax(0,1.4fr) 1fr 30px;gap:8px;align-items:center;font-size:12.5px;padding:3px 0;} .hx-bar{height:8px;background:var(--panel3);border-radius:99px;overflow:hidden;} .hx-bar i{display:block;height:100%;background:var(--azul);border-radius:99px;} .hx-bar-i b{text-align:right;font-variant-numeric:tabular-nums;} /* Conteo */ .hx-conteo-ini{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 16px;align-items:start;} .hx-zonas-chk{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin:8px 0;} .hx-zonas-chk label{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--linea);border-radius:9px;cursor:pointer;font-size:13px;} .hx-zonas-chk label:has(input:checked){border-color:var(--azul);background:var(--azul2);} .hx-conteo{padding:12px 16px 40px;} .hx-conteo-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:11px 14px;margin-bottom:10px;} .hx-prog{display:flex;align-items:center;gap:8px;font-size:12.5px;font-variant-numeric:tabular-nums;} .hx-prog-bar{width:160px;height:8px;border-radius:99px;background:var(--panel3);overflow:hidden;} .hx-prog-bar i{display:block;height:100%;background:var(--verde);} .hx-conteo-extra{margin-bottom:6px;} .hx-cz{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);margin-bottom:10px;overflow:hidden;} .hx-cz-t{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--panel2);border-bottom:1px solid var(--linea);} .hx-cz-t button{padding:5px 10px;font-size:12px;} .hx-ci{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-bottom:1px solid var(--borde-tabla);flex-wrap:wrap;} .hx-ci:last-child{border-bottom:none;} .hx-ci.hecho{opacity:.75;} .hx-ci-n{min-width:0;flex:1;font-size:13px;display:flex;gap:6px;align-items:center;} .hx-ci-n .hx-1l{min-width:0;} .hx-ci-b{display:flex;gap:4px;flex-wrap:wrap;} .hx-ci-b button{padding:5px 9px;font-size:12px;} .hx-ci-b button.on{font-weight:700;} .hx-ci-b .hx-b-verde{background:var(--verde2);color:var(--verdec);border-color:var(--verde);} .hx-ci-b .hx-b-rojo{background:var(--rojo2);color:var(--rojoc);border-color:var(--rojo);} .hx-ci-b .hx-b-ambar{background:var(--ambar2);color:var(--ambarc);border-color:var(--ambar);} .hx-conteo-h{border:1px solid var(--linea);margin-bottom:4px;} @media (max-width:1100px){ .hx-kpis{grid-template-columns:repeat(3,1fr);} .hx-acciones button[data-acc=directo]{display:none;} .hx-mapa-wrap{grid-template-columns:1fr;} .hx-mapa-det{position:static;max-height:none;} .hx-uso-grid{grid-template-columns:repeat(2,1fr);} .hx-uso-2{grid-template-columns:1fr;} .hx-conteo-ini{grid-template-columns:1fr;} } @media (max-width:700px){ .hx-kpis{grid-template-columns:repeat(2,1fr);min-width:0;} .hx-form{grid-template-columns:1fr;} .hx-span2,.hx-span3{grid-column:auto;} .hx-grid{grid-template-columns:1fr 1fr;} .hx-ficha-top{flex-direction:column;align-items:stretch;} .hx-ficha-dib{max-width:none;} .hx-con-dib .hx-dib{width:40px;height:27px;} .hx-cards{grid-template-columns:1fr;padding:10px;} .hx-tabla th:nth-child(4),.hx-tabla td:nth-child(4),.hx-tabla th:nth-child(6),.hx-tabla td:nth-child(6){display:none;} .hx-carro-in{flex-wrap:wrap;} .hx-carro-in .hx-sub{display:none;} .hx-tabs{flex-wrap:wrap;} .hx-tabs .sp{display:none;} .hx-acciones{width:100%;flex-wrap:wrap;padding:4px 0 8px;} .hx-filtros select{max-width:none;flex:1 1 45%;} .hx-top{padding:10px 12px;} } /* Catálogo Rotunda / Ford (13/10/2026) — ilustraciones oficiales en gris sobre blanco */ .hx-cimg{display:block;background:#fff;border-radius:6px;padding:2px;height:auto;flex:0 0 auto;} .hx-ficha-cimg .hx-cimg{padding:6px;border-radius:10px;} .hx-tkit{display:inline-block;font-size:10.5px;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--cyan2);color:var(--cyanc);padding:1px 7px;border-radius:6px;margin:1px 0;white-space:nowrap;} .hx-tkit.clic{cursor:pointer;} .hx-tkit.clic:hover{outline:1px solid var(--cyan);} .hx-tkit-s{font-size:10.5px;font-weight:600;color:var(--cyanc);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px;} .hx-desc-s{display:inline-block;font-size:10px;font-weight:700;color:var(--ambarc);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;} .hx-marca-s{display:block;width:max-content;font-size:10px;font-weight:700;color:var(--azulc,#5aa9ff);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;} .hx-catbox{border-color:var(--cyan);} .hx-cat-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:6px;} .hx-cat-g em{display:block;font-style:normal;font-size:10.5px;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em;} .hx-cat-g b{font-size:13px;font-weight:600;} .hx-cat-g i{display:block;font-size:11px;color:var(--txt3);} .hx-desc-p{margin:10px 0 0;background:var(--ambar2);color:var(--ambarc);border-radius:8px;padding:7px 10px;font-size:12.5px;} .hx-catmini{display:flex;gap:12px;align-items:center;background:var(--panel2);border:1px solid var(--cyan);border-radius:10px;padding:8px 10px;font-size:13px;margin-bottom:4px;} .hx-catmini .hx-mini-btn{margin-top:6px;} .hx-catmini-no{border-color:var(--ambar);color:var(--ambarc);} .hx-ok{font-size:11.5px;color:var(--verdec);margin-bottom:3px;} .hx-catwrap{padding:12px 16px 30px;} .hx-kits{margin-bottom:12px;} .hx-kits-t{display:flex;align-items:center;gap:8px;cursor:pointer;margin-bottom:0;} .hx-kits-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 16px;margin-top:10px;max-height:300px;overflow:auto;} .hx-kit{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr 52px;gap:8px;align-items:center;font-size:12px;padding:4px 6px;border-radius:7px;cursor:pointer;} .hx-kit:hover,.hx-kit.on{background:var(--panel2);} .hx-kit.on{outline:1px solid var(--cyan);} .hx-kit .hx-bar i{background:var(--cyan);} .hx-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;} .hx-catc{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:5px;} .hx-catc.tengo{border-color:var(--verde);} .hx-catc-img{display:flex;align-items:center;justify-content:center;min-height:100px;background:#fff;border-radius:8px;} .hx-catc-img .hx-cimg{padding:0;} .hx-catc-cod{display:flex;justify-content:space-between;gap:6px;align-items:baseline;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;} .hx-catc-cod .hx-sub{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%;} .hx-catc-nom{font-size:12.5px;font-weight:600;line-height:1.3;min-height:32px;} .hx-catc-pie{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:auto;} .hx-catc-pie .hx-mini-btn{margin-left:auto;padding:3px 9px;} @media (max-width:700px){ .hx-cat-g{grid-template-columns:1fr;} .hx-catgrid{grid-template-columns:repeat(2,minmax(0,1fr));} } .hx-falta{border-color:var(--rojo) !important;box-shadow:0 0 0 2px var(--rojo2);} .hx-espera{color:var(--ambarc);font-weight:600;align-self:center;} /* 15/10/2026 — contadores Servicio Técnico (total y en etapa), mismo tamaño que los semáforos DyP, color neutro */ .contadores{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0;} .contador{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;padding:5px 10px;border-radius:8px;white-space:nowrap;border:1.5px solid var(--azul);background:var(--azul2);color:var(--azulc);line-height:1.3;} .cont-etapa{background:transparent;} .l1 .contadores{display:inline-flex;margin:0 0 0 8px;vertical-align:middle;} .l1 .contador{font-size:12px;padding:3px 9px;} /* 15/10/2026 — comentario visible en "Citas de hoy" (cualquier usuario con acceso puede comentar) */ .cita-card .cita-comentario{white-space:normal;color:var(--txt2,var(--txt));font-style:italic;} /* ===================================================================== 🚗 LOANERS (16/10/2026) — mismos campos y Excel que Streamlit. Solo tokens de color (:root / [data-theme="light"]), así funciona en modo oscuro y claro sin reglas aparte. ===================================================================== */ .ln{display:flex;flex-direction:column;gap:16px;} .ln-cab{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;} .ln-tit{display:flex;align-items:center;gap:13px;min-width:0;} .ln-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:23px; background:linear-gradient(135deg,var(--verde2),var(--azul2));border:1px solid var(--linea2);flex:none;} .ln-tit h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em;} .ln-sub{font-size:12.5px;color:var(--txt3);margin-top:1px;} .ln-cab-acc{display:flex;gap:8px;flex-wrap:wrap;} .ln-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;} .ln-kpi{all:unset;box-sizing:border-box;position:relative;overflow:hidden;cursor:default; background:var(--panel2);border:1px solid var(--linea);border-radius:14px;padding:13px 16px 12px 18px; display:flex;flex-direction:column;gap:1px;transition:border-color .15s,transform .15s,box-shadow .15s;} button.ln-kpi{cursor:pointer;} button.ln-kpi:hover{border-color:var(--linea2);transform:translateY(-1px);} button.ln-kpi:focus-visible{outline:2px solid var(--azul);outline-offset:2px;} .ln-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--azul);} .ln-kpi.verde::before{background:var(--verde);} .ln-kpi.rojo::before{background:var(--rojo);} .ln-kpi.ambar::before{background:var(--ambar);} .ln-kpi.on{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul) inset;} .ln-kpi.verde.on{border-color:var(--verde);box-shadow:0 0 0 1px var(--verde) inset;} .ln-kpi.rojo.on{border-color:var(--rojo);box-shadow:0 0 0 1px var(--rojo) inset;} .ln-kpi .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt3);font-weight:700;} .ln-kpi .v{font-size:28px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--txt);} .ln-kpi .v small{font-size:13px;font-weight:700;color:var(--txt2);} .ln-kpi.verde .v{color:var(--verdec);} .ln-kpi.rojo .v{color:var(--rojoc);} .ln-kpi.ambar .v{color:var(--ambarc);} .ln-kpi .d{font-size:11.5px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ln-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .ln-buscar{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--linea); border-radius:10px;padding:0 11px;flex:1 1 260px;min-width:200px;} .ln-buscar:focus-within{border-color:var(--azul);} .ln-buscar span{font-size:13px;opacity:.7;} .ln-buscar input{border:0;background:transparent;flex:1;min-width:0;padding:9px 0;outline:none;color:var(--txt);} .ln-barra select{min-width:170px;} .ln-seg{display:inline-flex;background:var(--panel2);border:1px solid var(--linea);border-radius:10px;padding:3px;gap:2px;} .ln-seg button{border:0;background:transparent;color:var(--txt2);padding:6px 11px;border-radius:7px;font-size:12.5px;font-weight:600;box-shadow:none;} .ln-seg button:hover{color:var(--txt);background:var(--panel3);} .ln-seg button.on{background:var(--panel3);color:var(--txt);box-shadow:0 1px 2px rgba(0,0,0,.25);} .ln-cnt{margin-left:auto;font-size:12px;color:var(--txt3);white-space:nowrap;} .ln-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:3px 10px; border-radius:999px;white-space:nowrap;} .ln-chip.libre{background:var(--verde2);color:var(--verdec);} .ln-chip.asig{background:var(--rojo2);color:var(--rojoc);} .ln-chip.mut{background:var(--neutro-bg);color:var(--neutro-txt);} .ln-dias{display:inline-block;margin-top:3px;font-size:11px;font-weight:700;padding:1px 8px;border-radius:6px; background:var(--azul2);color:var(--azulc);} .ln-dias.largo{background:var(--ambar2);color:var(--ambarc);} .ln-pat{font-weight:800;font-size:14px;letter-spacing:.04em;} .ln-mod{font-size:12px;color:var(--txt2);} .ln-vin{font-size:11px;color:var(--txt3);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em;} .ln-pat-fila{display:flex;align-items:center;gap:8px;white-space:nowrap;} .ln-pat-fila .ln-chip{font-size:10.5px;padding:2px 8px;} .ln-cli{font-weight:600;font-size:13px;line-height:1.3;} .ln-mut{color:var(--txt3);} .ln-disp-txt{display:inline-block;font-size:12px;font-weight:700;color:var(--txt3);background:var(--sutil-bg); border:1px dashed var(--linea2);padding:2px 10px;border-radius:6px;} .ln-tabla-wrap{background:var(--panel);border:1px solid var(--linea);border-radius:14px;overflow:auto;} .ln-tabla{width:100%;border-collapse:collapse;font-size:13px;} .ln-tabla th{position:sticky;top:0;z-index:1;background:var(--panel2);text-align:left;font-size:10.5px;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--txt3);padding:10px 10px;border-bottom:1px solid var(--linea);white-space:nowrap;} .ln-tabla td{padding:10px 10px;border-bottom:1px solid var(--borde-tabla);vertical-align:middle;white-space:normal;max-width:none;overflow:visible;text-overflow:clip;} .ln-tabla td.ln-cli-td{min-width:190px;} .ln-tabla tbody tr:last-child td{border-bottom:0;} .ln-tabla tbody tr{cursor:default;} .ln-tabla tbody tr:hover td{background:var(--fila-hover);} .ln-tabla td.ln-acc,.ln-tabla td.num,.ln-tabla td.ln-suc-td{white-space:nowrap;} .ln-tabla tr td:first-child{border-left:3px solid transparent;} .ln-tabla tr.disp td:first-child{border-left-color:var(--verde);} .ln-tabla tr.asig td:first-child{border-left-color:var(--rojo);} .ln-tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;} .ln-suc-td{font-weight:600;white-space:nowrap;} .ln-acc{white-space:nowrap;text-align:right;} .ln-b{font-size:12px;padding:5px 10px;margin-left:4px;} .ln-b.ln-ic{padding:5px 8px;} .ln-b.ln-dev{border-color:var(--verde);color:var(--verdec);} .ln-b.ln-dev:hover{background:var(--verde2);} .ln-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;} .ln-card{background:var(--panel);border:1px solid var(--linea);border-top:4px solid var(--verde);border-radius:14px; padding:14px 15px 12px;display:flex;flex-direction:column;gap:7px;transition:border-color .15s,box-shadow .15s;} .ln-card.asig{border-top-color:var(--rojo);} .ln-card:hover{box-shadow:var(--sombra-tablero-hover);} .ln-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;} .ln-card .ln-pat{font-size:18px;} .ln-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--txt2);align-items:center;} .ln-meta .ln-dias{margin-top:0;} .ln-card-cli{background:var(--panel2);border:1px solid var(--linea);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:4px;} .ln-card-libre{font-size:12.5px;color:var(--verdec);background:var(--verde2);border-radius:10px;padding:9px 11px;font-weight:600;} .ln-card-acc{display:flex;justify-content:flex-end;gap:2px;margin-top:auto;padding-top:4px;} .ln-vacio{text-align:center;color:var(--txt3);padding:34px 16px;border:1px dashed var(--linea2);border-radius:14px;} /* modales */ .ln-modal .modal-head{align-items:flex-start;} .ln-modal .modal-head h3{font-size:16px;font-weight:800;} .ln-modal-sub{margin-top:5px;font-size:12px;color:var(--txt3);} .ln-unidad{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;color:var(--txt2);font-size:12.5px;} .ln-unidad .ln-pat{color:var(--txt);} .ln-x{padding:4px 9px;} .ln-sec{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--azulc);margin:4px 0 8px;} .ln-sec:not(:first-of-type){margin-top:16px;padding-top:14px;border-top:1px solid var(--linea);} .ln-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 14px;} .ln-campo{display:flex;flex-direction:column;gap:4px;min-width:0;} .ln-campo.ancho{grid-column:1/-1;} .ln-campo>span{font-size:12px;font-weight:600;color:var(--txt2);} .ln-campo input{width:100%;} .ln-campo small{font-size:11px;color:var(--txt3);} .ln-req{color:var(--rojoc);} .ln-resumen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px;} .ln-resumen div{background:var(--panel2);border:1px solid var(--linea);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;min-width:0;} .ln-resumen span{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt3);font-weight:700;} .ln-resumen b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;} .ln-nota{font-size:12px;color:var(--txt3);margin:12px 0 0;} .ln-err{margin-top:12px;background:var(--rojo2);color:var(--rojoc);border:1px solid var(--rojo);border-radius:9px;padding:8px 11px;font-size:12.5px;} .ln-pie{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--linea);} .ln-pie .gh{margin-right:auto;} .ln-hist{display:flex;flex-direction:column;gap:9px;} .ln-hist-it{background:var(--panel2);border:1px solid var(--linea);border-left:3px solid var(--linea2);border-radius:10px;padding:10px 12px;} .ln-hist-it.vig{border-left-color:var(--rojo);} .ln-hist-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;} .ln-hist-det{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--txt2);margin-top:5px;} .ln-hist-pie{font-size:11px;color:var(--txt3);margin-top:5px;} @media (max-width:1100px){ .ln-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:640px){ .ln-form,.ln-resumen{grid-template-columns:1fr;} .ln-cnt{margin-left:0;width:100%;} .ln-buscar{flex:1 1 100%;} .ln-barra select{flex:1 1 100%;min-width:0;} .ln-kpi .v{font-size:24px;} } /* 16/10/2026 — Planificador: "Finalizado" (y 🔒 de Control de Taller) solo habilitado en la etapa Entrega */ .jpcb-acciones button.btn-finalizar:disabled,#tablero button[data-cerrar]:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(1);}