/* CSS del prototipo v3 revisado con JN Confecciones el 22-oct-2026 (prototipo/index.html). No se edita: los
   ajustes del aplicativo van en app.css. */
:root{
  --p:#5b3a8c;--p2:#2f1d4a;--p3:#43296a;--pl:#f1ecf8;--pl2:#e4daf2;--acc:#8b6bc2;
  --tx:#1f1b2a;--tx2:#5f5970;--tx3:#8a849a;--bg:#f6f4f9;--bd:#e3dded;--wh:#fff;
  --ok:#24875a;--okl:#e3f4ec;--am:#b7791f;--aml:#fbf1dd;--ro:#c0392b;--rol:#fbe6e3;--az:#2f6fb0;--azl:#e5eef8;
  --sh:0 1px 2px rgba(40,20,70,.06),0 4px 14px rgba(40,20,70,.06);--r:12px
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--tx);background:var(--bg);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--p)}
#franja{position:fixed;top:0;left:0;right:0;height:22px;line-height:22px;text-align:center;font-size:11px;letter-spacing:.06em;color:#6b5a86;background:#ece6f5;border-bottom:1px solid var(--bd);z-index:60}
#app{display:flex;min-height:100vh;padding-top:22px}
/* menú lateral */
#side{width:248px;flex:0 0 248px;background:linear-gradient(180deg,var(--p2),#24163a);color:#e9e2f5;display:flex;flex-direction:column;position:sticky;top:22px;height:calc(100vh - 22px);z-index:40;transition:transform .2s}
.brand{display:flex;gap:11px;align-items:center;padding:18px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#9a7ad0,#5b3a8c);display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.brand b{display:block;font-size:14px;color:#fff}.brand span{font-size:11.5px;color:#b9abd3}
#menu{flex:1;overflow:auto;padding:10px 10px}
.mg{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:#9c8db8;padding:14px 10px 6px}
.mi{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:#ddd3ee;text-decoration:none;cursor:pointer;margin:1px 0;font-size:13.5px}
.mi svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.mi:hover{background:rgba(255,255,255,.07);color:#fff}
.mi.on{background:#fff;color:var(--p2);font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.mi .bdg{margin-left:auto;background:#e0a33a;color:#2b1a00;font-size:10.5px;font-weight:700;border-radius:10px;padding:1px 7px}
.mi.on .bdg{background:var(--aml);color:var(--am)}
.sidefoot{padding:12px 14px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#b9abd3}
.sidefoot button{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#efe8fb;padding:8px;border-radius:8px;cursor:pointer;font-size:12.5px}
.sidefoot button:hover{background:rgba(255,255,255,.14)}
/* encabezado */
#wrap{flex:1;min-width:0;display:flex;flex-direction:column}
#top{position:sticky;top:22px;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:16px;padding:10px 24px;min-height:62px}
#hamb{display:none;background:none;border:0;cursor:pointer;padding:6px}
#hamb svg{width:22px;height:22px;stroke:var(--p2);stroke-width:2;fill:none}
.emp b{display:block;font-size:14px;color:var(--p2)}.emp span{font-size:11.5px;color:var(--tx3)}
.buscar{flex:1;max-width:520px;margin:0 auto;position:relative}
.buscar input{width:100%;padding:9px 12px 9px 36px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);outline:none}
.buscar input:focus{border-color:var(--acc);background:#fff;box-shadow:0 0 0 3px var(--pl)}
.buscar svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--tx3);fill:none;stroke-width:2}
#resultados{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:0 12px 32px rgba(40,20,70,.16);max-height:420px;overflow:auto;display:none;z-index:50}
#resultados .rg{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);padding:10px 14px 4px}
#resultados .ri{padding:8px 14px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
#resultados .ri:hover,#resultados .ri.sel{background:var(--pl)}
#resultados .ri small{color:var(--tx3)}
.usuario{display:flex;align-items:center;gap:10px}
.usuario select{border:1px solid var(--bd);border-radius:8px;padding:6px 8px;background:#fff;font-size:12.5px;color:var(--tx2)}
.av{width:36px;height:36px;border-radius:50%;background:var(--pl2);color:var(--p);display:grid;place-items:center;font-weight:700;font-size:13px}
.usuario .un b{display:block;font-size:13px}.usuario .un span{font-size:11.5px;color:var(--tx3)}
#main{padding:22px 26px 60px;max-width:1440px;width:100%;margin:0 auto}
/* encabezado de página */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.ph h1{margin:0;font-size:22px;color:var(--p2);letter-spacing:-.01em}
.ph p{margin:4px 0 0;color:var(--tx2);font-size:13.5px}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--p);color:#fff;border:0;border-radius:9px;padding:9px 15px;cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap}
.btn:hover{background:var(--p3)}
.btn.sec{background:#fff;color:var(--p);border:1px solid var(--pl2)}
.btn.sec:hover{background:var(--pl)}
.btn.peq{padding:5px 10px;font-size:12px;border-radius:7px}
.btn.ok{background:var(--ok)}.btn.ro{background:#fff;color:var(--ro);border:1px solid #f0c9c4}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.lnk{white-space:nowrap;background:none;border:0;color:var(--p);cursor:pointer;padding:0;font-weight:600;text-decoration:none}
.lnk:hover{text-decoration:underline}
/* tarjetas */
.card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:18px}
.card h2{margin:0 0 4px;font-size:15px;color:var(--p2)}
.card .sub{margin:0 0 14px;color:var(--tx3);font-size:12.5px}
.ch{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ch h2{margin:0}.ch .sub{margin:2px 0 0}
.g{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g64{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.g46{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.mb{margin-bottom:16px}
.kp{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:14px;margin-bottom:16px}
.k{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:15px 16px;box-shadow:var(--sh);position:relative;overflow:hidden;cursor:default}
.k[data-act]{cursor:pointer}.k[data-act]:hover{border-color:var(--acc)}
.k .kt{font-size:12px;color:var(--tx2);font-weight:600}
.k .kv{font-size:24px;white-space:nowrap;font-weight:700;color:var(--tx);margin:6px 0 2px;letter-spacing:-.02em}
.k .kv small{font-size:14px;color:var(--tx3);font-weight:600}
.k .km{font-size:12px;color:var(--tx3)}
.k .kbar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--p)}
.k.ok .kbar{background:var(--ok)}.k.am .kbar{background:var(--am)}.k.ro .kbar{background:var(--ro)}
.k .ksp{position:absolute;right:12px;top:14px}
/* etiquetas */
.tg{display:inline-block;font-size:11.5px;font-weight:600;border-radius:20px;padding:2px 9px;white-space:nowrap}
.tg.ok{background:var(--okl);color:var(--ok)}.tg.am{background:var(--aml);color:var(--am)}.tg.ro{background:var(--rol);color:var(--ro)}.tg.az{background:var(--azl);color:var(--az)}.tg.mo{background:var(--pl);color:var(--p)}.tg.gr{background:#eeedf2;color:var(--tx2)}
.up{color:var(--ro);font-weight:600}.dn{color:var(--ok);font-weight:600}.eq{color:var(--tx3)}
/* tablas */
.tw{overflow:auto;border:1px solid var(--bd);border-radius:10px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:#f7f4fb;color:var(--tx2);font-weight:600;text-align:left;padding:9px 11px;border-bottom:1px solid var(--bd);white-space:nowrap;position:sticky;top:0;z-index:1;font-size:12px}
td{padding:8px 11px;border-bottom:1px solid #efebf4;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.cl{cursor:pointer}tbody tr.cl:hover td{background:#faf8fd}
tr.sel td{background:var(--pl)!important}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.c,th.c{text-align:center}
tr.tot td{font-weight:700;background:#f7f4fb;border-top:1px solid var(--bd)}
.mut{color:var(--tx3)}.small{font-size:12px}
/* formularios */
.fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--tx2);font-weight:600}
.in,select.in,textarea.in{border:1px solid var(--bd);border-radius:8px;padding:8px 10px;background:#fff;outline:none;font-weight:400;font-size:13.5px;width:100%}
.in:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--pl)}
.in.n{text-align:right}
.in.xs{padding:5px 7px;font-size:13px}
.tb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tb .in{width:auto;min-width:150px}
.tb .sp{flex:1}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--bd);margin-bottom:16px;flex-wrap:wrap}
.tabs button{background:none;border:0;padding:10px 14px;cursor:pointer;color:var(--tx2);font-weight:600;border-bottom:2.5px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--p);border-bottom-color:var(--p)}
.pill{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pill button{border:1px solid var(--bd);background:#fff;border-radius:20px;padding:6px 13px;cursor:pointer;font-size:12.5px;color:var(--tx2);font-weight:600}
.pill button.on{background:var(--p);border-color:var(--p);color:#fff}
.drop{border:1.5px dashed var(--pl2);border-radius:10px;padding:14px;text-align:center;background:#fcfbfe;color:var(--tx2);font-size:12.5px;cursor:pointer;position:relative}
.drop:hover{border-color:var(--acc)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.prev{border:1px solid var(--bd);border-radius:10px;background:#f4f2f7;min-height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prev img{max-width:100%;max-height:520px;display:block}
.prev iframe,.prev embed{width:100%;height:520px;border:0}
/* inicio */
.flujo{display:flex;align-items:stretch;gap:0;background:#fff;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:12px;margin-bottom:16px;overflow-x:auto}
.fs{flex:1;min-width:132px;padding:8px 12px;border-radius:9px;cursor:pointer;position:relative}
.fs:hover{background:var(--pl)}
.fs b{display:block;font-size:12.5px;color:var(--p2)}
.fs span{font-size:20px;font-weight:700;color:var(--p)}
.fs small{display:block;font-size:11.5px;color:var(--tx3)}
.fa{display:flex;align-items:center;color:var(--acc);padding:0 2px}
.fa svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.al{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #f0ecf5}
.al:last-child{border-bottom:0}
.al .ai{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 30px;font-weight:800;font-size:14px}
.al .ai.am{background:var(--aml);color:var(--am)}.al .ai.ro{background:var(--rol);color:var(--ro)}.al .ai.az{background:var(--azl);color:var(--az)}
.al b{font-size:13px}.al p{margin:2px 0 0;font-size:12.5px;color:var(--tx2);line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.chip{font-size:11.5px;background:var(--bg);border:1px solid var(--bd);border-radius:6px;padding:2px 7px;cursor:pointer;color:var(--tx2)}
.chip:hover{border-color:var(--acc);color:var(--p)}
/* proveedores */
.pc{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:16px;box-shadow:var(--sh);cursor:pointer;transition:border-color .15s,transform .15s}
.pc:hover{border-color:var(--acc);transform:translateY(-1px)}
.pc .pt{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.pc .pa{width:42px;height:42px;border-radius:10px;background:var(--pl);color:var(--p);display:grid;place-items:center;font-weight:800}
.pc b{font-size:14px}.pc .pt span{display:block;font-size:12px;color:var(--tx3)}
.pc dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;font-size:12.5px}
.pc dt{color:var(--tx3)}.pc dd{margin:0;text-align:right;font-weight:600}
.ficha{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 18px;margin:12px 0 16px}
.ficha div small{display:block;font-size:11.5px;color:var(--tx3)}
.ficha div b{font-size:13.5px}
/* prendas */
.rc{background:#fff;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;cursor:pointer;box-shadow:var(--sh);transition:border-color .15s}
.rc:hover{border-color:var(--acc)}.rc.on{border-color:var(--p);box-shadow:0 0 0 3px var(--pl2)}
.rc .ri2{height:128px;background:linear-gradient(180deg,#f8f5fc,#efe9f7);display:grid;place-items:center;overflow:hidden}
.rc .ri2 img{width:100%;height:100%;object-fit:cover}
.rc .rb{padding:10px 12px}
.rc .rb b{font-size:13px;display:block}.rc .rb span{font-size:11.5px;color:var(--tx3)}
.foto{border:1px solid var(--bd);border-radius:12px;height:300px;background:linear-gradient(180deg,#faf8fd,#efe9f7);display:grid;place-items:center;overflow:hidden;position:relative}
.foto img{width:100%;height:100%;object-fit:contain}
.molde{display:flex;align-items:center;gap:10px;background:var(--pl);border:1px solid var(--pl2);border-radius:10px;padding:10px 12px;font-size:12.5px}
.molde code{font-family:Consolas,Menlo,monospace;font-size:12px;color:var(--p2);word-break:break-all}
/* costeo */
.cr td:first-child{padding-left:22px}
.cg td{font-weight:700;background:#faf8fd}
.big{font-size:30px;font-weight:800;color:var(--p2);letter-spacing:-.02em}
.leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--tx2)}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.bar{height:8px;background:#eee9f4;border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;border-radius:5px}
/* cotizador */
.qt input{width:52px}.qt td,.qt th{padding:8px 6px}
.nw{white-space:nowrap}.qt select{min-width:190px}
.resumen.h{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;align-items:start}
@media (max-width:900px){.resumen.h{grid-template-columns:1fr}}
.resumen{background:linear-gradient(180deg,#faf7fe,#fff);border:1px solid var(--pl2);border-radius:var(--r);padding:16px}
.resumen .rl{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #e7e0f1;font-size:13.5px}
.resumen .rl:last-of-type{border-bottom:0}
.resumen .rl b{font-variant-numeric:tabular-nums}
.reloj{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--bd);border-radius:9px;padding:8px 10px;margin-top:12px;font-size:12.5px;color:var(--tx2)}
.reloj b{color:var(--p);font-size:15px}
/* indicadores */
.ic{background:#fff;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.ic .ih{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.ic h3{margin:0;font-size:14px;color:var(--p2)}
.ic .iv{font-size:30px;font-weight:800;letter-spacing:-.02em}
.ic .im{font-size:12px;color:var(--tx2)}
.ic dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:4px 0 0;font-size:12px}
.ic dt{color:var(--tx3)}.ic dd{margin:0}
.sem{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:6px}
.semana{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.dia{background:#faf8fd;border:1px solid var(--bd);border-radius:10px;padding:10px;min-height:120px}
.dia b{font-size:12.5px;color:var(--p2);display:block;margin-bottom:6px}
.dia div{font-size:12px;background:#fff;border-left:3px solid var(--acc);border-radius:5px;padding:5px 7px;margin-bottom:5px;color:var(--tx2)}
/* modal y aviso */
.modal{position:fixed;inset:0;background:rgba(32,18,52,.45);display:none;align-items:flex-start;justify-content:center;z-index:80;padding:40px 16px;overflow:auto}
.modal.on{display:flex}
.mbox{background:#fff;border-radius:16px;width:100%;max-width:980px;box-shadow:0 24px 60px rgba(20,8,40,.3);position:relative;padding:24px 26px;animation:ap .16s ease-out}
@keyframes ap{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.mx{position:absolute;right:14px;top:12px;border:0;background:var(--bg);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:18px;color:var(--tx2)}
.mx:hover{background:var(--pl2)}
#toast{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:8px}
.ts{background:var(--p2);color:#fff;border-radius:10px;padding:11px 16px;box-shadow:0 10px 26px rgba(20,8,40,.3);font-size:13px;max-width:380px;animation:ap .2s}
.ts b{display:block;margin-bottom:2px}
svg.ch text{font-family:inherit}
.vacio{padding:30px;text-align:center;color:var(--tx3)}
/* cotización imprimible */
.doc{font-size:13px;color:#222;background:#fff}
.doc .dh{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid var(--p);padding-bottom:14px;margin-bottom:16px}
.doc .dl{display:flex;gap:12px;align-items:center}
.doc .dl .logo{width:52px;height:52px;font-size:20px}
.doc h2{margin:0;font-size:18px;color:var(--p2)}
.doc .dn{text-align:right}.doc .dn b{font-size:16px;color:var(--p)}
.doc table th{background:var(--p);color:#fff}
.doc .cond{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;font-size:12px}
.doc .firma{margin-top:40px;display:flex;justify-content:space-between;font-size:12px}
.doc .firma div{border-top:1px solid #999;padding-top:6px;width:230px}
#printArea{display:none}
@media print{
  body.imprimiendo #app,body.imprimiendo #franja,body.imprimiendo .modal,body.imprimiendo #toast{display:none!important}
  body.imprimiendo #printArea{display:block;padding:10mm}
  body.imprimiendo{background:#fff}
  .doc table th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .doc .dh,.logo{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (max-width:1100px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g64,.g46{grid-template-columns:1fr}}
@media (max-width:900px){
  #side{position:fixed;left:0;top:22px;transform:translateX(-100%)}
  #side.abierto{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35)}
  #hamb{display:block}
  .emp{display:none}
  .usuario .un{display:none}
  #main{padding:16px 14px 50px}
  .g2,.g3{grid-template-columns:1fr}
  .semana{grid-template-columns:1fr 1fr}
  #top{padding:10px 14px;gap:10px}
}
@media (max-width:560px){.usuario select{max-width:120px}.kp{grid-template-columns:1fr 1fr}.k .kv{font-size:22px}}
.pasos{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.pasos div{flex:1;min-width:140px;background:#fff;border:1px solid var(--bd);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--tx3)}
.pasos div b{display:block;color:var(--tx2);font-size:13px}
.pasos div.on{border-color:var(--p);box-shadow:0 0 0 3px var(--pl)}.pasos div.on b{color:var(--p)}.pasos div.ok b{color:var(--ok)}
.drop.grande{padding:38px 14px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}