/* PYROCOL Equipo V1.0 */
:root{--ink:#14161c;--ink2:#262a33;--bg:#f4f5f7;--card:#fff;--line:#e3e6eb;--muted:#667085;--text:#1d2330;--accent:#ea580c;--accent-d:#c2410c;--accent-l:#fff1e7;--ok:#067647;--ok-l:#e3f6ec;--warn:#b54708;--warn-l:#fff4e0;--bad:#b42318;--bad-l:#fdecea;--info:#175cd3;--info-l:#e8f0fe;--vio:#6941c6;--vio-l:#f1ecfd;--r:12px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.45;color:var(--text);background:var(--bg)}
a{color:var(--info)}
h1,h2,h3{line-height:1.2;margin:0 0 10px}
h2{font-size:20px}h3{font-size:16px}
small,.muted{color:var(--muted)}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #cdd2da;border-radius:9px;background:#fff;min-height:42px}
textarea{resize:vertical;min-height:72px}
input:focus,select:focus,textarea:focus{outline:2px solid #fdba74;border-color:var(--accent)}
label{display:block;font-weight:600;font-size:13px;margin-bottom:12px}
label>input,label>select,label>textarea{margin-top:5px;font-weight:400;font-size:15px}
label.check{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px}
label.check input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--accent)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:9px;border:1px solid #cdd2da;background:#fff;font-weight:600;cursor:pointer;text-decoration:none;color:var(--text);min-height:42px;white-space:nowrap}
.btn:hover{background:#f8f9fb}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-d)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.danger{color:var(--bad);border-color:#f3b8b2}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{padding:6px 11px;min-height:34px;font-size:13px}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap}

/* Login / instalación */
body.auth{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px;background:radial-gradient(circle at 20% 10%,#3b1d0b 0,#14161c 55%)}
.auth-card{width:100%;max-width:380px;background:#fff;border-radius:16px;padding:26px;box-shadow:0 20px 60px #0006}
.auth-card.wide{max-width:520px}
.auth-card h3{margin-top:18px;font-size:15px;color:var(--accent-d)}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.brand .logo{font-size:30px}
.brand b{display:block;font-size:18px;letter-spacing:.5px}
.brand small{display:block;font-size:12px}
.alert{padding:11px 13px;border-radius:9px;margin-bottom:14px;font-size:14px}
.alert.err{background:var(--bad-l);color:var(--bad)}
.alert.ok{background:var(--ok-l);color:var(--ok)}
.alert.warn{background:var(--warn-l);color:var(--warn)}

/* App */
.top{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff}
.top-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 16px}
.top .brand{margin:0;color:#fff}
.top .brand small{color:#fdba74}
.top .who{margin-left:auto;text-align:right;font-size:13px;line-height:1.25}
.top .who b{display:block;font-size:14px}
.top .who small{color:#cbd0d8}
.top .who a{color:#fdba74;font-size:12px}
.nav{background:var(--ink2)}
.nav-in{max-width:1180px;margin:0 auto;display:flex;gap:4px;padding:0 10px;overflow-x:auto}
.nav a{color:#d0d5dd;text-decoration:none;padding:12px 14px;font-weight:600;font-size:14px;border-bottom:3px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:7px}
.nav a.on{color:#fff;border-color:var(--accent)}
.nav .ic{font-size:16px}
.nav .dot{background:var(--accent);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;font-weight:800}
main{max-width:1180px;margin:0 auto;padding:18px 16px 90px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.card.flat{padding:0;overflow:hidden}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.page-head h2{margin:0}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.seg button{border:1px solid #cdd2da;background:#fff;border-radius:99px;padding:7px 14px;font-weight:600;font-size:13px;cursor:pointer}
.seg button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.seg button .n{opacity:.75;margin-left:4px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filters select,.filters input{width:auto;min-width:160px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;text-align:left;width:100%}
.kpi:hover{border-color:#fdba74}
.kpi .n{display:block;font-size:28px;font-weight:800;margin-top:2px}
.kpi .l{font-size:13px;color:var(--muted);font-weight:600}
.kpi.alert-k{border-color:#f5b4ab;background:#fff8f7}.kpi.alert-k .n{color:var(--bad)}
.kpi.warn-k .n{color:var(--warn)}
.kpi.ok-k .n{color:var(--ok)}

/* Listas */
.list{list-style:none;margin:0;padding:0}
.item{display:flex;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;background:#fff}
.item:last-child{border-bottom:0}
.item:hover{background:#fcfcfd}
.item .main{flex:1;min-width:0}
.item .t{font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis}
.item .s{font-size:13px;color:var(--muted)}
.item .side{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.empty{padding:28px 16px;text-align:center;color:var(--muted)}

/* Etiquetas */
.b{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap;background:#eef0f3;color:#344054}
.b.pendiente,.b.solicitado{background:#eef0f3;color:#344054}
.b.en_proceso,.b.tomado,.b.aprobado{background:var(--info-l);color:var(--info)}
.b.en_gestion,.b.en_camino,.b.enviado{background:var(--vio-l);color:var(--vio)}
.b.realizada,.b.recibido{background:var(--warn-l);color:var(--warn)}
.b.aprobada,.b.cerrado{background:var(--ok-l);color:var(--ok)}
.b.devuelta,.b.rechazado,.b.vencida,.b.urgente,.b.sinrem{background:var(--bad-l);color:var(--bad)}
.b.cancelado{background:#f2f4f7;color:#98a2b3;text-decoration:line-through}
.b.global{background:var(--accent-l);color:var(--accent-d)}
.b.sede{background:#ecfdf3;color:#05603a}

/* Tablero de tareas */
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.kb-col{background:#eceef2;border-radius:var(--r);padding:10px;min-height:120px}
.kb-col h3{font-size:14px;display:flex;justify-content:space-between;margin:2px 4px 10px}
.kb-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 2px #0000000d}
.kb-card:hover{border-color:#fdba74}
.kb-card .t{font-weight:700;margin-bottom:6px}
.kb-card .meta{display:flex;gap:5px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted)}
.prog{height:7px;border-radius:9px;background:#e7e9ee;overflow:hidden;margin-top:8px}
.prog i{display:block;height:100%;background:var(--ok)}
.chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.chip{font-size:11px;padding:2px 7px;border-radius:6px;font-weight:700}
.chip.okc{background:var(--ok-l);color:var(--ok)}.chip.pc{background:#eef0f3;color:#475467}.chip.ipc{background:var(--info-l);color:var(--info)}.chip.bc{background:var(--bad-l);color:var(--bad)}.chip.wc{background:var(--warn-l);color:var(--warn)}

/* Detalle */
.detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
.detail-grid>*{min-width:0}
.kv{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}
.steps{list-style:none;padding:0;margin:0}
.steps li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line)}
.steps li:last-child{border-bottom:0}
.steps input{width:22px;height:22px;min-height:0;margin:0;accent-color:var(--ok);flex:none}
.steps .done{text-decoration:line-through;color:var(--muted)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.timeline li:last-child{border-bottom:0}
.timeline .w{font-size:12px;color:var(--muted)}
.timeline img{max-width:220px;max-height:220px;border-radius:9px;display:block;margin-top:6px;cursor:zoom-in;border:1px solid var(--line)}
.asg{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px}
.asg-head{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.flow{display:flex;gap:0;margin:6px 0 14px;overflow-x:auto}
.flow span{flex:1;min-width:92px;text-align:center;font-size:11.5px;font-weight:700;padding:8px 4px;background:#eef0f3;color:#98a2b3;position:relative}
.flow span:first-child{border-radius:9px 0 0 9px}.flow span:last-child{border-radius:0 9px 9px 0}
.flow span.on{background:var(--accent);color:#fff}
.flow span.past{background:#fed7aa;color:#9a3412}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;color:var(--muted);font-weight:700;padding:8px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl .num{text-align:right}
.tbl input{width:90px;min-height:36px;padding:6px 8px;text-align:right}
.scroll-x{overflow-x:auto}
.photo-prev{max-width:100%;max-height:260px;border-radius:10px;border:1px solid var(--line);display:block;margin-top:6px;cursor:zoom-in}
.remision-box{border:2px solid #f5b4ab;background:#fff8f7;border-radius:var(--r);padding:14px;margin-bottom:14px}
.remision-box.okb{border-color:#a6e3c3;background:#f3fbf6}
.big-alert{display:flex;gap:12px;align-items:center;background:var(--bad-l);color:var(--bad);border-radius:var(--r);padding:12px 14px;margin-bottom:14px;font-weight:600;cursor:pointer}

/* Selector de productos */
.picker{position:relative}
.picker-res{position:absolute;left:0;right:0;top:100%;z-index:40;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px #0003;max-height:300px;overflow:auto;margin-top:4px}
.picker-res button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;border-bottom:1px solid #f0f1f4;background:#fff;padding:11px 12px;cursor:pointer}
.picker-res button:hover,.picker-res button:focus{background:var(--accent-l);outline:none}
.picker-res .empty{padding:12px}
.lines{margin-top:8px}
.line{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
.line .nm{flex:1;min-width:0;font-weight:600;font-size:14px}
.line input.q{width:80px;text-align:right}
.line input.nt{flex:1;min-width:0}

/* Modal */
.modal-bg{position:fixed;inset:0;background:#0f121a99;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:30px 12px;overflow-y:auto}
.modal{background:#fff;border-radius:16px;width:100%;max-width:620px;padding:20px;box-shadow:0 30px 70px #0006}
.modal.wide{max-width:820px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal-head h3{margin:0;font-size:18px}
.x{border:0;background:#f2f4f7;border-radius:99px;width:34px;height:34px;font-size:18px;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;flex-wrap:wrap}
.lightbox{position:fixed;inset:0;background:#000d;z-index:200;display:flex;align-items:center;justify-content:center;padding:10px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;z-index:300;box-shadow:0 10px 30px #0005;max-width:92vw;font-weight:600;font-size:14px}
.toast.err{background:var(--bad)}
.spin{padding:40px;text-align:center;color:var(--muted)}

@media(max-width:860px){
  .kb{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  body{font-size:15px}
  .top .brand small,.top .who small{display:none}
  .nav{position:fixed;bottom:0;left:0;right:0;z-index:40;border-top:1px solid #000;padding-bottom:env(safe-area-inset-bottom)}
  .nav-in{justify-content:space-around;padding:0;gap:0}
  .nav a{flex-direction:column;gap:2px;font-size:10.5px;padding:8px 6px 7px;border-bottom:0;border-top:3px solid transparent;flex:1;min-width:0;position:relative}
  .nav a.on{border-color:var(--accent)}
  .nav .ic{font-size:20px}
  .nav .dot{position:absolute;top:3px;right:calc(50% - 22px);font-size:10px;padding:0 5px}
  main{padding:14px 12px 96px}
  .grid2,.grid3{grid-template-columns:1fr}
  .filters select,.filters input{min-width:0;flex:1}
  .modal-bg{padding:0;align-items:flex-end}
  .modal{border-radius:16px 16px 0 0;max-height:94vh;overflow-y:auto;padding:16px}
  .item{padding:12px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi .n{font-size:24px}
  .flow span{min-width:0;font-size:10px;padding:7px 2px}
}

/* V1.1 · Shows */
.b.sh-cotizado{background:#eef0f3;color:#344054}
.b.sh-separado{background:var(--info-l);color:var(--info)}
.b.sh-confirmado{background:var(--vio-l);color:var(--vio)}
.b.sh-realizado{background:var(--warn-l);color:var(--warn)}
.b.sh-cerrado{background:var(--ok-l);color:var(--ok)}
.b.sh-cancelado{background:#f2f4f7;color:#98a2b3;text-decoration:line-through}
.datebox{flex:none;width:48px;text-align:center;border-radius:10px;background:var(--accent-l);color:var(--accent-d);padding:5px 0;line-height:1.1}
.datebox b{display:block;font-size:19px}.datebox small{color:inherit;font-size:11px;text-transform:uppercase;font-weight:700}
h3.sec{font-size:14px;color:var(--accent-d);margin:6px 0 10px;padding-top:6px;border-top:1px solid var(--line)}
form h3.sec:first-child{border-top:0;padding-top:0}
.totals,.money-rows{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.totals>div,.money-rows>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:14px}
.totals>div:last-child,.money-rows>div:last-child{border-bottom:0}
.totals input{width:160px;min-height:36px;padding:6px 10px;text-align:right}
.totals .tt,.money-rows .tt{background:#f7f8fa;font-size:15px}
.totals .tt b,.money-rows .tt b{font-size:18px}
.line .lsub{width:100px;text-align:right;font-size:14px}
.inline-form{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.inline-form input{flex:1;min-width:110px;min-height:36px;padding:6px 10px}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cal-head h3{margin:0}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-wd{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding:4px 0}
.cal-d{min-height:92px;border:1px solid var(--line);border-radius:8px;padding:4px;background:#fff;min-width:0;overflow:hidden}
.cal-d.off{background:transparent;border-color:transparent}
.cal-d.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cal-d .dn{font-size:12px;font-weight:700;color:var(--muted)}
.cal-d.today .dn{color:var(--accent-d)}
.cal-ev{display:block;font-size:11px;font-weight:600;border-radius:5px;padding:2px 4px;margin-top:3px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev.s{background:var(--accent-l);color:var(--accent-d)}
.cal-ev.t{background:var(--info-l);color:var(--info)}
.show-alerts{border-color:#fdba74;background:#fffaf5}
.show-alerts .item{padding:10px 0;background:transparent;border-bottom:1px dashed #fed7aa}
.show-alerts .item:last-child{border-bottom:0}
.notif-card{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:640px){
  .cal-d{min-height:46px;padding:3px}
  .cal-ev{font-size:0;padding:0;height:6px;border-radius:3px;margin-top:2px}
  .cal-ev.s{background:var(--accent)}.cal-ev.t{background:var(--info)}
  .nav a{font-size:9.5px;padding:8px 2px 7px}
  .nav .ic{font-size:18px}
  .totals input{width:130px}
  .line .lsub{width:80px;font-size:13px}
}