/* ═══════════ TOKENS · paleta Hadysic ═══════════ Los tres colores salen del logo: naranja #F0780C, rojo #E43000 y ámbar #FCB424. El acento que se usa en botones es una versión más profunda del naranja, porque el de la marca con texto blanco encima da 2,8:1 de contraste y no se lee; éste da 4,7:1. 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. Los neutros son cálidos a propósito: un gris azulado peleaba con el naranja de la marca. Ojo con la colisión clásica de las marcas naranjas: el acento es la acción, el ámbar es advertencia y el carmesí es error. Por eso el ámbar se corrió hacia el amarillo, para no confundirse con el acento. */ :root{ color-scheme:light; --bg:#f4f1ee; --surface:#ffffff; --surface2:#faf7f4; --surface3:#f0eae4; --rail:#1e1a17; --rail2:#2e2823; --rail-ink:#f4efe9; --rail-muted:#a2968b; --line:#e4dcd4; --line2:#d0c5ba; --ink:#1f1a16; --ink2:#574c43; --ink3:#7d6f64; --marca:#f0780c; --marca-ambar:#fcb424; --marca-rojo:#e43000; --accent:#c2500c; --accent-ink:#9a3e08; --accent-soft:#fdeee1; --ok:#0f6f40; --ok-bg:#e3f2ea; --warn:#7d5e00; --warn-bg:#faf0d8; --bad:#bc3b2f; --bad-bg:#fbe7e3; --c1:#e06a0f; --c2:#1f6fa8; --c3:#157f4a; --c4:#7a4ba8; --grid:rgba(31,26,22,.09); --shadow:0 1px 2px rgba(46,32,20,.06), 0 8px 24px rgba(46,32,20,.09); --r:10px; --r2:14px; --sans: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:#15110e; --surface:#1e1916; --surface2:#272019; --surface3:#332a22; --rail:#100d0b; --rail2:#241d18; --rail-ink:#f0e8e0; --rail-muted:#9d9086; --line:#3a3027; --line2:#4d4036; --ink:#f2ece6; --ink2:#c0b3a8; --ink3:#95867a; --marca:#ff8c2b; --marca-ambar:#fcc44a; --marca-rojo:#ff5a33; --accent:#f0780c; --accent-ink:#ffa04a; --accent-soft:#3a2415; --ok:#43b87c; --ok-bg:#14312a; --warn:#d3a52f; --warn-bg:#332a0f; --bad:#e2685a; --bad-bg:#3a1e1c; --c1:#ff8c2b; --c2:#4a9bd4; --c3:#43b87c; --c4:#a98ae0; --grid:rgba(242,236,230,.10); --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(--ink3)} /* ═══════════ SHELL ═══════════ */ #app{display:grid;grid-template-columns:236px 1fr;min-height:100vh} .rail{background:var(--rail);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-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:hover{background:rgba(255,255,255,.07)} .rail nav button[aria-current="page"]{background:var(--rail2);font-weight:700;box-shadow:inset 2px 0 0 var(--accent)} .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:22px;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:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap} .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}} @media (max-width:680px){ #app{grid-template-columns:1fr} .rail{position:static;height:auto} .g5,.g4,.g3,.g2,.g21{grid-template-columns:1fr} } .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)} .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)} /* ═══════════ 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:1px solid var(--line);white-space:nowrap;background:var(--surface)} 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(--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(--line);border-radius:var(--r);background:var(--surface2)} .field input[readonly]{background:var(--surface3);color:var(--ink2)} .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:650;cursor:pointer;background:var(--surface2);color:var(--ink)} .btn:hover{border-color:var(--line2)} .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)} .btn-primary:disabled,.btn:disabled{opacity:.45;cursor:not-allowed} /* En oscuro el acento sube al naranja pleno de la marca, y ahí el texto blanco baja a 2,8:1. Con tinta oscura encima queda en 6,5:1. */ :root[data-theme="dark"] .btn-primary{color:#1a1208} :root[data-theme="dark"] .btn-primary:hover{color:#1a1208} .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)} .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-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)} .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} .drawer-back{position:fixed;inset:0;background:rgba(6,16,26,.45);z-index:70;display:none} .drawer-back.open{display:block} .drawer{position:absolute;top:0;right:0;height:100%;width:min(460px,100%);background:var(--surface);box-shadow:-16px 0 46px rgba(3,10,18,.32);display:flex;flex-direction:column} .drawer-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)} .drawer-head h3{margin:0;font-size:15px} .drawer-head .sep{flex:1} .drawer-body{padding:18px;overflow:auto;display:grid;gap:18px} .kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:13px} .kv dt{color:var(--ink3);font-size:12px} .kv dd{margin:0;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums} .kv dd.txt{font-family:var(--sans)} .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)} /* ═══════════ 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} .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)} /* ═══════════ 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:32px 34px;border-radius:6px; box-shadow:0 2px 14px rgba(2,6,23,.18);font-size:12.5px;line-height:1.5} .hoja h1{font-size:17px;margin:0 0 2px;letter-spacing:-.01em} .hoja .cab{display:flex;justify-content:space-between;gap:24px;border-bottom:2px solid #16202b; padding-bottom:13px;margin-bottom:15px;flex-wrap:wrap} .hoja .caja{border:1.5px solid #a8342a;border-radius:6px;padding:9px 15px;text-align:center;color:#a8342a;flex:none} .hoja .caja b{display:block;font-size:14px;font-family:var(--mono)} .hoja .caja span{font-size:10.5px;font-weight:700;letter-spacing:.06em} .hoja table{width:100%;border-collapse:collapse;margin:13px 0;font-size:12px} .hoja th{background:#f0f3f6;color:#46586a;border-bottom:1px solid #d7dee6;padding:7px 9px;text-transform:none;letter-spacing:0} .hoja td{border-bottom:1px solid #eceff3;padding:7px 9px;color:#16202b} .hoja .dcl{background:#f7f9fb;border-left:3px solid #46586a;padding:10px 13px;margin:14px 0;font-size:11.5px;color:#46586a} .hoja .firma{margin-top:32px;display:flex;gap:36px;justify-content:space-between;font-size:11px;color:#46586a;flex-wrap:wrap} .hoja .firma div{border-top:1px solid #16202b;padding-top:6px;flex:1;min-width:150px;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)}