/* ═══════════ TOKENS · paleta Hadysic ═══════════ Desde el 1-oct es la de la maqueta documental de Claudia: rail azul marino con degradé, la pantalla activa en naranja de marca, fondo frío y colores saturados en los indicadores. La anterior (neutros cálidos y rail café) se sentía apagada. El naranja de la marca con texto blanco encima da poco contraste: va solo en piezas grandes y en negrita (botón principal, pantalla activa). Para texto naranjo sobre blanco se usa --accent-ink, más profundo. El claro es el modo por defecto y el oscuro es una elección: no hay media query que siga al sistema operativo. Se activa con data-theme="dark" en el y queda guardado en el navegador. Ojo con la colisión clásica de las marcas naranjas: el acento es la acción, el ámbar es advertencia y el rojo es error. */ :root{ color-scheme:light; --bg:#f4f7fb; --surface:#ffffff; --surface2:#f8fafc; --surface3:#eef2f7; --rail:#071d39; --rail2:#0d2d52; --rail-ink:#e7eef8; --rail-muted:#96aac1; --rail-grad:linear-gradient(180deg,#071d39 0%,#0b2947 100%); --line:#e2e8f0; --line2:#cbd5e1; /* --line2 sobre --surface2 es casi blanco sobre casi blanco en modo claro (se nota en oscuro porque ahí la diferencia es grande): los campos de formulario necesitan su propio borde, más oscuro, para que no se pierdan contra la tarjeta (Pablo, 6-oct). */ --field-line:#94a3b8; --ink:#10233f; --ink2:#4a5b73; --ink3:#6c7a90; --marca:#f28b0c; --marca-ambar:#fcb424; --marca-rojo:#e43000; --accent:#e87800; --accent-ink:#b45a00; --accent-soft:#fff3e3; --accent-grad:linear-gradient(90deg,#e87800,#ff9816); --accent-glow:0 5px 13px rgba(242,139,12,.25); --ok:#17804a; --ok-bg:#e3f6ea; --warn:#8a6100; --warn-bg:#fff4d6; --bad:#c93a3a; --bad-bg:#fde8e8; --c1:#1d6de2; --c2:#f28b0c; --c3:#27a75a; --c4:#7655c5; --c5:#1a9bb8; --kpi-in:linear-gradient(135deg,#2f6fe4,#5b5ff0); --kpi-out:linear-gradient(135deg,#6f4fc2,#9a72e3); --kpi-ok:linear-gradient(135deg,#1f9d55,#3cc47a); --kpi-warn:linear-gradient(135deg,#e8900a,#f2b422); --kpi-bad:linear-gradient(135deg,#e04848,#f2706b); --kpi-neutro:linear-gradient(135deg,#7655c5,#a07ce6); --grid:rgba(16,35,63,.08); --shadow:0 1px 2px rgba(21,45,80,.05), 0 5px 18px rgba(21,45,80,.07); --r:10px; --r2:14px; --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; } :root[data-theme="dark"]{ color-scheme:dark; --bg:#0a1424; --surface:#111e33; --surface2:#16253d; --surface3:#1d2f4b; --rail:#050f1f; --rail2:#0d2340; --rail-ink:#e7eef8; --rail-muted:#8ea3bc; --rail-grad:linear-gradient(180deg,#050f1f 0%,#08192f 100%); --line:#22344f; --line2:#30476a; --field-line:var(--line2); --ink:#eef3fa; --ink2:#b3c1d4; --ink3:#8396ae; --marca:#ff9a2e; --marca-ambar:#fcc44a; --marca-rojo:#ff5a33; --accent:#f28b0c; --accent-ink:#ffab4f; --accent-soft:#3a2614; --ok:#4cc584; --ok-bg:#12321f; --warn:#e3b23c; --warn-bg:#352a0e; --bad:#f07171; --bad-bg:#3b1b1f; --c1:#5b94ef; --c2:#ff9a2e; --c3:#4cc584; --c4:#a98ae0; --c5:#4cc0d8; --grid:rgba(238,243,250,.09); --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.38); } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} .eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink)} /* ═══════════ SHELL ═══════════ */ #app{display:grid;grid-template-columns:236px 1fr;min-height:100vh} .rail{background:var(--rail-grad);color:var(--rail-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto} .rail-head{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08)} .rail-head b{font-size:19px;letter-spacing:-.02em;display:block} /* El wordmark viene con transparencia, así que se apoya en el rail sin caja */ .rail-logo{display:block;width:100%;max-width:172px;height:auto} .rail-head small{font-size:11px;color:var(--rail-muted);letter-spacing:.08em;text-transform:uppercase;font-weight:700} .rail-logo + small{margin-top:9px;display:block} .rail nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px} .rail-group{font-size:10px;font-weight:750;letter-spacing:.11em;text-transform:uppercase;color:var(--rail-muted);padding:14px 10px 6px} .rail-tier{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--rail-muted); padding:18px 10px 7px;opacity:.7;display:flex;align-items:center;gap:8px} .rail-tier::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.09)} .rail nav button.rail-grupo{font-size:13.5px;font-weight:700;padding:8px 10px} .rail nav button.rail-grupo .chev{margin-left:auto;font-size:9px;opacity:.55;transition:transform .15s} .rail nav button.rail-grupo[aria-expanded="true"] .chev{transform:rotate(90deg)} .rail nav button.rail-grupo .cnt{font-family:var(--mono);font-size:10.5px;font-weight:700; color:var(--rail-muted);background:rgba(255,255,255,.08);border-radius:99px;padding:1px 7px;min-width:20px;text-align:center} .rail nav button.rail-grupo .cnt.alerta{background:var(--bad);color:#fff} .rail nav button.rail-tier-toggle{width:100%;border:0;background:none;color:inherit;font:inherit;cursor:pointer;border-radius:0} .rail nav button.rail-tier-toggle .chev{margin-left:auto;font-size:9px;opacity:.55;transition:transform .15s} .rail nav button.rail-tier-toggle[aria-expanded="true"] .chev{transform:rotate(90deg)} .rail nav button.rail-tier-toggle .cnt{font-family:var(--mono);font-size:10px;font-weight:700; color:var(--rail-muted);background:rgba(255,255,255,.08);border-radius:99px;padding:1px 6px;min-width:18px;text-align:center} .rail nav button.rail-tier-toggle .cnt.alerta{background:var(--bad);color:#fff} .rail nav button.rail-tier-toggle:hover{opacity:1} .rail-sub{display:flex;flex-direction:column;gap:2px;margin:1px 0 5px} .rail nav .rail-sub button{padding-left:26px;font-size:13px;font-weight:500;position:relative} .rail nav .rail-sub button::before{content:"";position:absolute;left:15px;top:50%;width:4px;height:1px;background:rgba(255,255,255,.22)} .rail nav .rail-sub button[aria-current="page"]{font-weight:700} .rail nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;color:var(--rail-ink);padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:550} .rail nav button{transition:background .18s} .rail nav button:hover{background:rgba(255,255,255,.07)} .rail nav button[aria-current="page"]{background:var(--accent-grad);color:#fff;font-weight:700;box-shadow:var(--accent-glow)} .rail nav button[aria-current="page"] .tag{color:#fff} .rail nav .rail-sub button[aria-current="page"]::before{background:#fff} .rail nav button .tag{margin-left:auto;font-size:11px;font-weight:700;color:var(--rail-muted);font-family:var(--mono)} .rail nav button .tag.alerta{background:var(--bad);color:#fff;border-radius:99px;padding:0 6px;min-width:19px;text-align:center} .rail-foot{margin-top:auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:var(--rail-muted)} .rail-leyenda{display:flex;gap:14px;padding:10px 14px 0;font-size:10px;color:var(--rail-muted);flex-wrap:wrap} .rail-leyenda span{display:inline-flex;align-items:center;gap:5px} .rail-leyenda i{width:14px;height:14px;border-radius:99px;display:inline-grid;place-items:center; font-family:var(--mono);font-size:8px;font-weight:700;font-style:normal} .rail-leyenda i.rojo{background:var(--bad);color:#fff} .rail-leyenda i.gris{background:rgba(255,255,255,.08);color:var(--rail-muted)} .topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:12px 24px} .topbar h1{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0} .topbar .sep{flex:1} .chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface2);border-radius:99px;padding:4px 11px;font-size:12px;font-weight:600} button.chip{cursor:pointer} button.chip:hover{border-color:var(--line2)} .chip-demo{background:var(--warn-bg);border-color:transparent;color:var(--warn)} .avatar{width:28px;height:28px;border-radius:99px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:750} .icon-btn{background:none;border:1px solid var(--line);border-radius:8px;padding:5px 9px;cursor:pointer} main{padding:22px 24px 60px;max-width:1240px} .view{display:none} .view.active{display:block} .view-head{margin-bottom:18px} .view-head h2{font-size:25px;letter-spacing:-.02em;margin:2px 0 4px;text-wrap:balance} .view-head p{margin:0;color:var(--ink2);font-size:13px;max-width:70ch} /* ═══════════ CARDS ═══════════ */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow)} .card-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--surface);border-radius:var(--r2) var(--r2) 0 0} .card-head h3{margin:0;font-size:14px;font-weight:700} .card-head .sep{flex:1} .card-body{padding:16px} .grid{display:grid;gap:14px} .g5{grid-template-columns:repeat(5,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g21{grid-template-columns:1.55fr 1fr} @media (max-width:1100px){.g5{grid-template-columns:repeat(3,1fr)}} @media (max-width:980px){.g4,.g3,.g2,.g21{grid-template-columns:1fr 1fr}} /* ── Móvil / tablet angosta: el rail pasa a cajón lateral ── */ .menu-btn{display:none} #rail-scrim{position:fixed;inset:0;background:rgba(6,16,26,.5);z-index:55;display:none} @media (max-width:820px){ #app{grid-template-columns:1fr} .rail{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:min(300px,84vw);z-index:60; transform:translateX(-100%);transition:transform .22s ease} .rail.open{transform:none} #rail-scrim.on{display:block} .menu-btn{display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1} .topbar{padding:10px 12px;gap:7px} .topbar h1{font-size:15.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #salir{font-size:12px;padding:5px 7px} main{padding:16px 13px 60px} .g5,.g4,.g3,.g2,.g21{grid-template-columns:1fr} .modal-back,.drawer-back{padding:8px} .hoja{padding:20px 15px} } .kpi{padding:14px 16px} .kpi .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:23px;font-weight:700;letter-spacing:-.02em;margin-top:7px} .kpi .foot{font-size:12px;color:var(--ink2);margin-top:5px;display:flex;align-items:center;gap:6px} .stripe{border-left:3px solid var(--accent)} /* Los indicadores del tablero y de cada módulo van en color pleno, con la cifra en blanco (como el centro de alertas de la maqueta). El color lo da la misma clase stripe-* que antes pintaba solo el borde. */ .card.kpi.stripe{border:0;color:#fff;background:var(--kpi-in);box-shadow:0 6px 18px rgba(21,45,80,.14)} .card.kpi.stripe-out{background:var(--kpi-out)} .card.kpi.stripe-ok{background:var(--kpi-ok)} .card.kpi.stripe-warn{background:var(--kpi-warn)} .card.kpi.stripe-bad{background:var(--kpi-bad)} .card.kpi.stripe .eyebrow,.card.kpi.stripe .foot,.card.kpi.stripe .val{color:#fff} .card.kpi.stripe .eyebrow{opacity:.92} .card.kpi.stripe .foot{opacity:.95} .card.kpi.stripe .badge,.card.kpi.stripe .pill{background:rgba(255,255,255,.22);color:#fff} .card.kpi.stripe .num{color:inherit} .card.kpi.stripe.click{transition:transform .15s,box-shadow .15s} .card.kpi.stripe.click:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(21,45,80,.2)} .stripe-in{border-left-color:var(--c1)} .stripe-out{border-left-color:var(--c2)} .stripe-ok{border-left-color:var(--ok)} .stripe-warn{border-left-color:var(--warn)} .stripe-bad{border-left-color:var(--bad)} .card.click{cursor:pointer} .card.click:hover{border-color:var(--accent)} .card.kpi.stripe.click:hover{border-color:transparent} /* ═══════════ BADGES ═══════════ */ .badge{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:2px 9px 2px 7px;font-size:11.5px;font-weight:700;white-space:nowrap;background:var(--surface3);color:var(--ink2)} .badge::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor} .badge.plain::before{display:none} .b-ok{background:var(--ok-bg);color:var(--ok)} .b-warn{background:var(--warn-bg);color:var(--warn)} .b-bad{background:var(--bad-bg);color:var(--bad)} .b-info{background:var(--accent-soft);color:var(--accent-ink)} /* ═══════════ TABLAS ═══════════ */ .tbl-wrap{overflow-x:auto} table{border-collapse:collapse;width:100%;font-size:13px} th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:750;padding:9px 12px;border-bottom:2px solid var(--line2);white-space:nowrap;background:var(--surface2)} td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--surface2)} tr.clickable{cursor:pointer} .r{text-align:right} td.money{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} td.code{font-family:var(--mono);font-size:12.5px;color:var(--ink2);white-space:nowrap} .strong{font-weight:650;color:var(--ink)} .new-row{animation:flash 1.6s ease-out} @keyframes flash{from{background:var(--accent-soft)}to{background:transparent}} .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px} .toolbar input[type="search"],.toolbar select,.toolbar input[type="date"]{padding:7px 11px;border:1px solid var(--field-line);border-radius:8px;background:var(--surface);font-size:13px} .tabs{display:flex;gap:4px;background:var(--surface3);padding:3px;border-radius:10px} .tabs button{background:none;border:0;padding:6px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:650;color:var(--ink2)} .tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)} /* ═══════════ BOTONES / FORM ═══════════ */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .field label{font-size:12px;font-weight:650;color:var(--ink2)} .field input,.field select,.field textarea{padding:9px 11px;border:1px solid var(--field-line);border-radius:var(--r);background:var(--surface2)} .field input[readonly]{background:var(--surface3);color:var(--ink2)} .field input:focus,.field select:focus,.field textarea:focus, .toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .fhint{font-size:11.5px;color:var(--ink3)} .fhint.bad{color:var(--bad);font-weight:600} .fhint.good{color:var(--ok);font-weight:600} .btn{border:1px solid var(--line);border-radius:var(--r);padding:9px 15px;font-weight:700;cursor:pointer;background:var(--surface);color:var(--ink)} .btn:hover{border-color:var(--line2)} .btn-primary{background:var(--accent-grad);border-color:var(--accent);color:#fff;box-shadow:var(--accent-glow)} .btn-primary:hover{background:var(--accent);border-color:var(--accent)} .btn-primary:disabled,.btn:disabled{opacity:.45;cursor:not-allowed} .btn-ghost{background:none;border-color:transparent;color:var(--accent);padding:6px 8px} .btn-sm{padding:5px 10px;font-size:12px;border-radius:8px} .btn-full{width:100%;margin-top:6px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} @media (max-width:560px){.row2,.row3{grid-template-columns:1fr}} .alert{display:flex;gap:9px;padding:10px 12px;border-radius:var(--r);font-size:12.5px;background:var(--bad-bg);color:var(--bad);font-weight:600;margin-bottom:12px} .alert.ok{background:var(--ok-bg);color:var(--ok)} .alert.info{background:var(--accent-soft);color:var(--accent-ink)} .alert.warn{background:var(--warn-bg);color:var(--warn)} /* Ficha del trabajador: en escritorio el perfil va a un costado y la matriz de capacitaciones —lo alto— ocupa la columna ancha. */ .ficha-cols{display:grid;gap:14px;align-items:start} @media (min-width:1080px){.ficha-cols{grid-template-columns:minmax(320px,380px) minmax(0,1fr)}} .ficha-cols .fic-full{grid-column:1/-1} .ficha-perfil{display:grid;gap:14px;align-content:start} .dr-hero .ficha-hab{flex:1 1 240px} .ficha-hab{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--r);font-size:12px;background:var(--ok-bg);color:var(--ok);min-width:240px} .ficha-hab.no{background:var(--bad-bg);color:var(--bad)} .ficha-hab.sin{background:var(--surface3);color:var(--ink2)} .ficha-hab .dot{width:10px;height:10px;border-radius:50%;background:currentColor;flex-shrink:0} .ficha-hab .fhint{color:inherit;opacity:.8} td .dot,span.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ink3)} .dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)} .dot.warn{background:var(--warn)} .section-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)} .section-head h3{margin:0;font-size:13px} /* Matriz de documentos de flota — misma idea que la de capacitaciones */ .docsf-wrap{max-height:66vh;overflow:auto} table.docsf-mx{border-collapse:separate;border-spacing:0;font-size:11px} .docsf-mx th,.docsf-mx td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 8px} .docsf-mx thead th{position:sticky;top:0;z-index:3;background:var(--surface2);font-size:9px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink3)} .docsf-ch{vertical-align:bottom;min-width:92px;max-width:130px;padding:8px 8px 6px} .docsf-ch span{display:block;white-space:normal;line-height:1.25} .docsf-sticky{position:sticky;left:0;z-index:2;background:var(--surface);min-width:180px;text-align:left} .docsf-mx thead .docsf-sticky{z-index:4;background:var(--surface2)} .docsf-hab{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;background:var(--ink3)} .docsf-hab.ok{background:var(--ok)} .docsf-hab.no{background:var(--bad)} .docsf-cell{text-align:center;cursor:pointer;white-space:nowrap;font-weight:600} .docsf-cell:hover{outline:2px solid var(--accent);outline-offset:-2px} .docsf-cell.con-adj{box-shadow:inset 0 -3px 0 var(--accent)} .docsf-cell.na{cursor:default;background:var(--surface3);color:var(--ink3);font-weight:400} .docsf-cell.na:hover{outline:none} .docsf-cell.b-ok{background:var(--ok-bg);color:var(--ok)} .docsf-cell.b-warn{background:var(--warn-bg);color:var(--warn)} .docsf-cell.b-bad{background:var(--bad-bg);color:var(--bad)} .mini-bar{height:8px;border-radius:99px;background:var(--surface3);overflow:hidden;min-width:70px} .mini-bar span{display:block;height:100%;border-radius:99px;background:var(--c1)} /* ═══════════ MODAL / DRAWER ═══════════ */ .modal-back{position:fixed;inset:0;background:rgba(6,16,26,.55);z-index:60;display:none;place-items:center;padding:20px} .modal-back.open{display:grid} .modal{background:var(--surface);border-radius:var(--r2);width:min(580px,100%);box-shadow:0 30px 70px rgba(3,10,18,.4);max-height:92vh;display:flex;flex-direction:column} .modal.wide{width:min(880px,100%)} .modal.xwide{width:min(1040px,100%)} .modal-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface2);border-radius:var(--r2) var(--r2) 0 0} .modal-head h3{margin:0;font-size:15px} .modal-head .sep{flex:1} .modal-body{padding:18px;overflow:auto} .modal-foot{display:flex;gap:8px;align-items:center;padding:13px 18px;border-top:1px solid var(--line);background:var(--surface2);border-radius:0 0 var(--r2) var(--r2)} .modal-foot .sep{flex:1} /* Alta / edición de un maestro: la ficha se abre a lo ancho en rejilla, no como una tira vertical de campos. */ .mae-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 16px;align-items:start} .mae-grid .field{margin-bottom:0} .mae-grid .field.wide{grid-column:1/-1} .drawer-back{position:fixed;inset:0;background:rgba(6,16,26,.55);z-index:70;display:none;place-items:center;padding:20px} .drawer-back.open{display:grid} .drawer{position:relative;width:min(720px,100%);max-height:92vh;background:var(--surface);border-radius:var(--r2);box-shadow:0 30px 70px rgba(3,10,18,.4);display:flex;flex-direction:column} .drawer.wide{width:min(960px,100%)} .drawer-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface2);border-radius:var(--r2) var(--r2) 0 0} .drawer-head h3{margin:0;font-size:15px} .drawer-head .sep{flex:1} .drawer-body{padding:18px;overflow:auto;display:grid;gap:16px} .kv{display:grid;grid-template-columns:auto 1fr;gap:0 16px;font-size:13px;align-content:start} .kv dt{color:var(--ink3);font-size:12px;padding:8px 0;border-bottom:1px solid var(--line)} .kv dd{margin:0;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;padding:8px 0;border-bottom:1px solid var(--line)} .kv dt:last-of-type,.kv dd:last-of-type{border-bottom:0} .kv dd.txt{font-family:var(--sans)} /* Banda de identidad + rejilla de secciones: la usan el drawer de detalle (persona, vehículo, serie) y la Ficha del trabajador a página completa, para que se lean a lo ancho y no como una columna larga. Prefijo dr- por dónde nació. */ .dr-hero{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px; background:var(--surface2);border:1px solid var(--line);border-radius:var(--r2)} .dr-hero .avatar{width:44px;height:44px;font-size:14px;flex:none} .dr-hero .dr-id{flex:1;min-width:180px} .dr-hero .dr-id b{font-size:15px;display:block;letter-spacing:-.01em} .dr-hero .dr-id .fhint{margin-top:2px} .dr-hero .dr-acc{display:flex;gap:8px;flex-wrap:wrap} .avatar.con-foto{overflow:hidden} .avatar img{width:100%;height:100%;object-fit:cover;display:block} /* Foto de credencial en la ficha: retrato 3:4, como sale del portal /foto */ .fic-foto-cols{display:flex;gap:14px;align-items:flex-start} .fic-foto-img{width:120px;aspect-ratio:3/4;flex:none;border:1.5px dashed var(--line2);border-radius:var(--r); background:var(--surface2);display:grid;place-items:center;overflow:hidden; font-size:11.5px;color:var(--ink3);text-align:center;padding:6px} .fic-foto-img:has(img){border-style:solid;padding:0} .fic-foto-img img{width:100%;height:100%;object-fit:cover;display:block} .fic-foto-info{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0} .fic-foto-acc{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px} .dr-cols{display:grid;gap:14px;align-items:start} @media (min-width:680px){.dr-cols{grid-template-columns:1fr 1fr}} .dr-cols .full{grid-column:1/-1} .dr-sec{border:1px solid var(--line);border-radius:var(--r2);padding:13px 15px;background:var(--surface)} .dr-sec > .eyebrow{display:block;margin-bottom:9px} .dr-line{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px} .dr-line:last-child{border-bottom:0} .tl{display:grid;gap:0;position:relative;padding-left:18px;margin:0} .tl::before{content:"";position:absolute;left:4px;top:6px;bottom:10px;width:2px;background:var(--line)} .tl li{list-style:none;position:relative;padding:0 0 14px} .tl li::before{content:"";position:absolute;left:-18px;top:6px;width:10px;height:10px;border-radius:99px;background:var(--surface);border:2px solid var(--accent)} .tl li.done::before{background:var(--accent)} .tl b{font-size:13px} .tl span{display:block;font-size:12px;color:var(--ink3);font-family:var(--mono)} /* ═══════════ TABLERO · "resolver hoy" segregado por área ═══════════ */ /* El bloque "resolver hoy" se acomoda en columnas: cada área es una tarjeta, no una fila con divisor. Así la vista no se estira a lo largo. */ #hoy{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:start} #hoy .empty{grid-column:1/-1} .hoy-grupo{padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface2)} .hoy-grupo-head{display:flex;align-items:center;gap:8px;margin-bottom:4px} .hoy-grupo-head b{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)} .hoy-item{display:flex;gap:9px;align-items:flex-start;padding:6px 0} .hoy-item .hoy-txt{flex:1;min-width:0} .hoy-item .hoy-txt b{font-size:13px} .hoy-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;background:var(--warn)} .hoy-dot.is-alta{background:var(--bad)} .hoy-mas{margin-top:2px} /* ═══════════ TOAST / TIP ═══════════ */ #toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:90;display:grid;gap:8px;justify-items:center} .toast{background:var(--rail);color:var(--rail-ink);padding:10px 16px;border-radius:99px;font-size:13px;font-weight:600;box-shadow:0 10px 30px rgba(3,10,18,.35);display:flex;align-items:center;gap:9px;animation:up .22s ease-out} .toast i{width:7px;height:7px;border-radius:99px;background:var(--ok);display:inline-block} .toast.bad i{background:var(--bad)} @keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .empty{padding:26px;text-align:center;color:var(--ink3);font-size:13px} #tip{position:fixed;z-index:80;pointer-events:none;opacity:0;transition:opacity .1s;background:var(--rail);color:var(--rail-ink);border-radius:8px;padding:8px 10px;font-size:12px;box-shadow:0 8px 24px rgba(3,10,18,.4);max-width:250px} #tip b{display:block;margin-bottom:3px} .chart{width:100%;height:auto;display:block;overflow:visible} /* A ancho completo el chart de costo se estiraría; se topa a su tamaño útil */ #chart-costo{max-width:620px;padding:14px 16px 0} .legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--ink2);padding:0 16px 14px} .legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px} /* ═══════════ CHECKLIST PRECHEQUEO ═══════════ */ .chk{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .chk-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)} .chk-row:last-child{border-bottom:0} .chk-row .nom{flex:1;font-size:13px} .chk-row .crit{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--bad);background:var(--bad-bg);padding:1px 6px;border-radius:5px} .chk-opt{display:flex;gap:3px;background:var(--surface3);padding:2px;border-radius:8px} .chk-opt button{border:0;background:none;padding:3px 10px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;color:var(--ink3)} .chk-opt button[aria-pressed="true"]{background:var(--surface);box-shadow:var(--shadow)} .chk-opt button.si[aria-pressed="true"]{color:var(--ok)} .chk-opt button.no[aria-pressed="true"]{color:var(--bad)} .chk-opt button.na[aria-pressed="true"]{color:var(--ink2)} /* ═══════════ MAPA GPS ═══════════ */ .mapa{position:relative;background:var(--surface2);border-radius:var(--r);overflow:hidden} .mapa svg{display:block;width:100%;height:auto} .gps-dot{cursor:pointer} .conector{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface2);margin-bottom:12px;flex-wrap:wrap} .conector .luz{width:9px;height:9px;border-radius:99px;background:var(--ok);box-shadow:0 0 0 4px var(--ok-bg);flex:none} .conector .luz.off{background:var(--ink3);box-shadow:0 0 0 4px var(--surface3)} .api{font-family:var(--mono);font-size:11.5px;color:var(--ink2);background:var(--surface3);padding:2px 7px;border-radius:6px;white-space:nowrap} /* ═══════════ RED DE BODEGAS ═══════════ */ .red{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px} .bod{border:1px solid var(--line);border-radius:var(--r2);padding:14px;background:var(--surface);cursor:pointer} .bod:hover{border-color:var(--accent)} .bod.central{border-left:3px solid var(--accent);background:var(--accent-soft)} .bod b{display:block;font-size:14px} .bod .u{font-size:11.5px;color:var(--ink3);margin-bottom:9px} .bod .n{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);padding:2px 0} .bod .n span:last-child{font-family:var(--mono);font-weight:700;color:var(--ink)} .flecha-t{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:7px 0;color:var(--ink2)} .flecha-t .via{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line2) 0 6px,transparent 6px 12px)} /* ═══════════ SEMÁFORO DE CUSTODIA ═══════════ */ .dias{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:700} .dias i{width:8px;height:8px;border-radius:99px;display:inline-block;background:var(--ok)} .dias.w i{background:var(--warn)} .dias.b i{background:var(--bad)} .pill{display:inline-block;font-size:11px;font-weight:750;padding:2px 8px;border-radius:6px;background:var(--surface3);color:var(--ink2);letter-spacing:.03em} .pill.con{background:var(--accent-soft);color:var(--accent-ink)} .pill.her{background:#f0e9fa;color:#5b3fa0} :root[data-theme="dark"] .pill.her{background:#2f2545;color:#c0aeea} .mod-card{border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;background:var(--surface)} .mod-card.on{border-left:3px solid var(--ok)} .mod-card.off{opacity:.72;border-left:3px solid var(--line2)} .mod-card b{font-size:14px} .mod-card p{margin:5px 0 0;font-size:12.5px;color:var(--ink2)} .mod-card .vs{margin-top:9px;font-size:11.5px;color:var(--ink3);font-family:var(--mono)} /* ═══════════ CALENDARIO DE FLOTA ═══════════ Tres meses lado a lado. En pantalla angosta se apilan: el calendario es la vista que el jefe de flota abre en el teléfono, no en el escritorio. */ .fcal-meses{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .fcal-mes-t{font-size:12.5px;font-weight:750;color:var(--ink2);margin-bottom:8px;text-align:center} .fcal-sem,.fcal-rejilla{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .fcal-sem span{font-size:10px;font-weight:700;color:var(--ink3);text-align:center;padding-bottom:4px} .fcal-dia{position:relative;min-height:34px;border:1px solid var(--line);border-radius:6px; background:var(--surface2);padding:3px 4px 2px;display:flex;flex-direction:column;gap:2px} .fcal-dia.vacio{border:0;background:none} .fcal-dia .n{font-size:11px;font-family:var(--mono);color:var(--ink3);line-height:1} .fcal-dia.hoy{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .fcal-dia.hoy .n{color:var(--accent-ink);font-weight:750} .fcal-dia.clickable{cursor:pointer} .fcal-dia.clickable:hover{border-color:var(--line2);background:var(--surface3)} .fcal-dia.t-ok{background:var(--ok-bg)} .fcal-dia.t-warn{background:var(--warn-bg)} .fcal-dia.t-bad{background:var(--bad-bg)} .fcal-dia .pts{display:flex;flex-wrap:wrap;gap:2px;align-items:center} .fcal-dia .pts i{width:5px;height:5px;border-radius:99px;background:var(--ink3)} .fcal-dia .pts i.ok{background:var(--ok)} .fcal-dia .pts i.warn{background:var(--warn)} .fcal-dia .pts i.bad{background:var(--bad)} .fcal-dia .pts b{font-size:9px;font-family:var(--mono);color:var(--ink3)} /* Tarjeta de evento, en el panel de prioridad y en el detalle del día */ .fcal-ev{border-left:3px solid var(--line2);background:var(--surface2);border-radius:0 var(--r) var(--r) 0; padding:8px 11px;margin-bottom:8px} .fcal-ev:last-child{margin-bottom:0} .fcal-ev b{display:block;font-size:12.5px} .fcal-ev span{display:block;margin-top:2px;font-size:11.5px;color:var(--ink2)} .fcal-ev.ok{border-left-color:var(--ok)} .fcal-ev.warn{border-left-color:var(--warn);background:var(--warn-bg)} .fcal-ev.bad{border-left-color:var(--bad);background:var(--bad-bg)} @media (max-width:900px){.fcal-meses{grid-template-columns:1fr}} /* ═══════════ RIEL DEL CICLO COMERCIAL ═══════════ */ .ciclo{display:flex;align-items:stretch;overflow-x:auto;padding:2px} .ciclo .paso{flex:1;min-width:136px;background:var(--surface2);border:1px solid var(--line); padding:10px 12px 11px;text-align:left;cursor:pointer;color:inherit} .ciclo .paso:first-child{border-radius:var(--r) 0 0 var(--r)} .ciclo .paso:last-child{border-radius:0 var(--r) var(--r) 0} .ciclo .paso + .paso{border-left:0} .ciclo .paso:hover{background:var(--accent-soft);border-color:var(--accent)} .ciclo .paso .n{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:-.02em;display:block} .ciclo .paso .q{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)} .ciclo .paso .m{font-size:11.5px;color:var(--ink2)} .ciclo-lbl{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap} .dir{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:750;letter-spacing:.04em; padding:2px 8px;border-radius:6px;text-transform:uppercase} .dir-in{background:var(--accent-soft);color:var(--accent-ink)} .dir-out{background:var(--warn-bg);color:var(--warn)} /* ═══════════ REPARTIDOR N:N ═══════════ */ .alloc-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:10px} .alloc{width:100%;font-size:13px} .alloc th{background:var(--surface2)} .alloc td{padding:7px 10px} .alloc input{padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface); width:100%;text-align:right;font-family:var(--mono)} .alloc input.lleno{border-color:var(--accent);font-weight:650} .alloc-foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:10px 12px; background:var(--surface2);border-top:1px solid var(--line);font-size:12.5px} .alloc-foot .num{font-weight:700} .alloc-foot .sep{flex:1} .sug{font-size:11.5px;color:var(--ok);font-weight:650} /* ═══════════ HOJA DEL DOCUMENTO DE ENTREGA ═══════════ */ .hoja{background:#fff;color:#16202b;padding:18px 22px;border-radius:6px;position:relative;overflow:hidden; box-shadow:0 2px 14px rgba(2,6,23,.18);font-size:10px;line-height:1.3} .hoja-cont{position:relative;z-index:1} .hoja-sello{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:60%;max-width:440px;opacity:.06;filter:grayscale(1);pointer-events:none;z-index:0} /* Cierre: monto en palabras + datos bancarios a la izquierda, totales a la derecha */ .hoja .doc-cierre{display:flex;gap:16px;align-items:flex-start;margin-top:8px;flex-wrap:wrap} .hoja .doc-cierre-l{flex:1;min-width:240px} .hoja .banco{width:100%;margin:0;font-size:10px;border:1px solid #c2cfdb} .hoja .banco td{border-bottom:1px solid #eceff3;padding:3px 8px} .hoja .doc-tot{width:230px;margin:0;font-size:11px} .hoja .doc-tot td{border:0;padding:2px 8px;color:#46586a} .hoja .doc-tot td:last-child{text-align:right;color:#16202b} .hoja .doc-tot .doc-tot-fin td{font-weight:700;border-top:2px solid #16202b;font-size:12px;color:#16202b} .hoja .kv-h{background:#e9eef3;color:#46586a;font-weight:700;font-size:9.5px;letter-spacing:.05em; text-transform:uppercase;padding:4px 9px} .hoja .acuse{margin-top:8px;border:1px solid #c2cfdb;border-radius:4px;padding:6px 10px;font-size:9.5px;color:#46586a} .hoja .acuse-firma{display:flex;gap:20px;margin-top:10px} .hoja .acuse-firma span{flex:1;border-top:1px solid #16202b;padding-top:4px;text-align:center;font-size:9px} /* Diseño "formal": bloques con recuadro y encabezado gris (estilo Prodalam) */ .hoja:not(.hoja-formal) .kv-h{display:none} .hoja-formal .kv2{gap:0 20px} .hoja-formal .kv-box{border:1px solid #c2cfdb;margin-bottom:10px} .hoja-formal .kv-box table{margin:0} .hoja-formal .kv-box td{border-bottom:1px solid #eceff3} .hoja h1{font-size:13px;margin:0 0 1px;letter-spacing:-.01em} .hoja .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-bottom:2px solid #16202b; padding-bottom:8px;margin-bottom:8px;flex-wrap:wrap} .hoja .caja{border:1.5px solid #a8342a;border-radius:6px;padding:5px 12px;text-align:center;color:#a8342a;flex:none} .hoja .caja b{display:block;font-size:12px;font-family:var(--mono)} .hoja .caja span{font-size:10px;font-weight:700;letter-spacing:.06em} .hoja table{width:100%;border-collapse:collapse;margin:8px 0;font-size:10.5px} .hoja .kv2{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin:12px 0} .hoja .kv2 table{margin:0} .hoja .kv2 td{padding:5px 9px;font-size:11.5px} @media (max-width:620px){ .hoja .kv2{grid-template-columns:1fr;gap:0} } .hoja th{background:#f0f3f6;color:#46586a;border-bottom:1px solid #d7dee6;padding:4px 8px;text-transform:none;letter-spacing:0} .hoja td{border-bottom:1px solid #eceff3;padding:4px 8px;color:#16202b} .hoja .dcl{background:#f7f9fb;border-left:3px solid #46586a;padding:6px 10px;margin:8px 0;font-size:10px;color:#46586a} .hoja .firma{margin-top:18px;display:flex;gap:24px;justify-content:space-between;font-size:10px;color:#46586a;flex-wrap:wrap} .hoja .firma>div{border-top:1px solid #16202b;padding-top:3px;flex:1;min-width:130px;text-align:center} .linea-add{display:grid;grid-template-columns:1fr 110px auto;gap:8px;align-items:end;margin-bottom:10px} .totales{display:flex;gap:22px;flex-wrap:wrap;padding:12px 14px;background:var(--surface2); border:1px solid var(--line);border-radius:var(--r)} .totales .num{font-weight:700;font-size:15px} .arch{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line); border-radius:var(--r);background:var(--surface2);margin-bottom:7px} .arch .ext{display:grid;place-items:center;width:34px;height:38px;border-radius:5px;flex:none; font-size:9.5px;font-weight:800;color:#fff;background:var(--ink3)} .arch .ext.pdf{background:#a8342a} .arch .meta{flex:1;min-width:0} .arch .meta b{display:block;font-size:12.5px;font-family:var(--mono);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .arch .meta span{font-size:11.5px;color:var(--ink3)} .banner-bod{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:12px 14px;margin-bottom:12px; border:1px solid var(--accent);background:var(--accent-soft);border-radius:var(--r)} .banner-bod b{display:block;font-size:15px;letter-spacing:-.01em} .banner-bod .fhint{display:block} .cifras-bod{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap} .cifras-bod b{font-family:var(--mono);font-size:15px} .alloc input.malo,input.num.malo{border-color:var(--bad)!important;color:var(--bad);font-weight:700} @media (max-width:560px){.linea-add{grid-template-columns:1fr}} .firma-pad{border:1.5px dashed var(--line2);border-radius:var(--r);background:#fff;touch-action:none; width:100%;height:170px;display:block;cursor:crosshair} .egreso{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px} .egreso button{flex:1;min-width:160px;border:1px solid var(--line);background:var(--surface2); border-radius:var(--r);padding:10px 12px;cursor:pointer;text-align:left} .egreso button b{display:block;font-size:13px} .egreso button span{font-size:11.5px;color:var(--ink3)} .egreso button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)} .egreso button[aria-pressed="true"] b{color:var(--accent-ink)} .fonos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px} .fono{border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:12px; box-shadow:var(--shadow)} .fono .pantalla{background:var(--surface2);border-radius:14px;padding:14px;min-height:290px; display:flex;flex-direction:column;gap:9px} .fono .marca{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)} .fono h4{margin:0;font-size:15px;letter-spacing:-.01em} .fono p{margin:0;font-size:12px;color:var(--ink2)} .fono .campo{background:var(--surface);border:1px solid var(--line);border-radius:8px; padding:7px 9px;font-size:11.5px;color:var(--ink3)} .fono .cta{margin-top:auto;background:var(--accent);color:#fff;border-radius:8px;padding:9px; text-align:center;font-size:12.5px;font-weight:700} .fono .url{font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-top:9px;text-align:center} /* ═══════════ FALTABAN EN LA MAQUETA ═══════════ Ambas clases se usaban en el markup del artifact sin regla que las pintara: la zona de carga de archivos y el botón destructivo. */ .drop{border:1.5px dashed var(--line2);border-radius:var(--r);background:var(--surface2); padding:22px 16px;text-align:center;cursor:pointer} .drop:hover{border-color:var(--accent);background:var(--accent-soft)} .drop b{display:block;font-size:13px} .drop span{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px} .btn-danger{color:var(--bad);border-color:var(--line)} .btn-danger:hover{border-color:var(--bad);background:var(--bad-bg)} /* ═══════════ DOCUMENTOS Y FORMATOS ═══════════ */ .fmt-logo-prev{width:200px;min-height:96px;border:1px dashed var(--line2);border-radius:var(--r); background:var(--surface2);display:grid;place-items:center;padding:10px;flex:none} .fmt-logo-prev img{max-width:180px;max-height:76px} .fmt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px 20px;align-items:start} .fmt-grupo{grid-column:1/-1;margin:6px 0 0;font-size:11px;font-weight:700;color:var(--ink3); text-transform:uppercase;letter-spacing:.06em} .fmt-field{display:flex;flex-direction:column;gap:5px;min-width:0} .fmt-field.fmt-wide{grid-column:1/-1} .fmt-label{font-size:12.5px;font-weight:600;color:var(--ink)} .fmt-label em{display:block;font-style:normal;font-weight:400;font-size:11px;color:var(--ink3);margin-top:1px} .fmt-field input,.fmt-field select,.fmt-field textarea{width:100%;padding:8px 11px;border:1px solid var(--line); border-radius:var(--r);background:var(--surface);font-size:13px} .fmt-field input.num{font-family:var(--mono);text-align:right} .fmt-field.fmt-bool{flex-direction:row;align-items:center;gap:9px} .fmt-field.fmt-bool input{width:auto} .fmt-field.fmt-bool .fhint{margin-left:auto} /* Etiqueta QR de herramienta/lote (ver imprimirEtiquetaQR en bodega/certificados.js): el código que ya resuelve apiCertificadoTerreno, para pegar en el equipo. */ .etiqueta-qr{background:#fff;color:#16202b;width:220px;padding:16px;border:1px solid #c2cfdb; border-radius:8px;text-align:center;font-family:var(--sans)} .etiqueta-qr img{width:160px;height:160px;display:block;margin:0 auto 8px} .etiqueta-qr .eq-codigo{font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:.02em} .etiqueta-qr .eq-item{font-size:11px;color:#46586a;margin-top:3px} .etiqueta-qr .eq-marca{font-size:9px;color:#8ea6bd;margin-top:8px;text-transform:uppercase;letter-spacing:.05em} /* Impresión: se vuelca la hoja en #print-area (ver imprimirHoja en core.js) y acá se esconde todo lo demás. El navegador arma el PDF con esto. */ #print-area{display:none} @media print{ body>*{display:none!important} body.printing>#print-area{display:block!important} body.printing #print-area .hoja{border:0;box-shadow:none;padding:0;margin:0} /* DTE y cotización: una hoja carta exacta, sin márgenes del navegador (así tampoco salen la fecha y la URL arriba y abajo). */ @page hoja{size:letter;margin:0} body.printing #print-area .hoja-carta{page:hoja;width:215.9mm;height:278mm;box-sizing:border-box; padding:11mm 13mm;aspect-ratio:auto;overflow:hidden;border-radius:0;break-inside:avoid} body.printing #print-area .hoja-carta{break-after:page} body.printing #print-area .hoja-carta:last-child{break-after:auto} body.printing #print-area .etiqueta-qr{border:0;box-shadow:none;margin:0 auto} } /* ═══════════ BUSCADOR EN LOS SELECT LARGOS (ver js/buscador.js) ═══════════ El