:root{--bg:#f6f0e8;--card:#fffdfa;--ink:#1a1412;--muted:#7a6a63;--line:rgba(26,20,18,.1);--gold:#b8935a;--ok:#2f8f5b;--warn:#c27b1c;--bad:#c4473e;--blue:#2a6fb0;--r:18px}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100dvh}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mini-logo{display:inline-block;width:20px;height:30px;background:var(--ink);-webkit-mask:url(../assets/isologo.png) center/contain no-repeat;mask:url(../assets/isologo.png) center/contain no-repeat}
.mini-logo.xl{width:42px;height:62px}

/* login */
.login{min-height:100dvh;display:grid;place-items:center;padding:20px}
.login-card{width:100%;max-width:370px;display:grid;gap:12px;justify-items:center;text-align:center;background:var(--card);padding:32px 24px;border-radius:28px;box-shadow:0 30px 60px -30px rgba(80,50,40,.4)}
.login-card h1{font-family:"Cutive Mono",monospace;font-weight:400;font-size:2rem}
.login-card p{color:var(--muted);font-size:.85rem;margin-top:-6px}
.back-site{font-size:.8rem;color:var(--muted);text-decoration:none;margin-top:4px}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);outline:none;appearance:none;-webkit-appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237a6a63' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,147,90,.2)}
.btn{border:0;border-radius:14px;padding:14px 18px;font-weight:600;background:var(--ink);color:#f5ede4;width:100%}
.btn.sm{width:auto;padding:10px 16px;font-size:.88rem;border-radius:12px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.5}
.err{color:var(--bad);min-height:1em}

/* layout */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100dvh}
.side{position:sticky;top:0;height:100dvh;background:var(--card);border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:22px}
.brand{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font-family:"Cutive Mono",monospace;font-size:1.3rem;padding:0 8px}
.nav{display:grid;gap:4px}
.nav button,.bnav button{position:relative;display:flex;align-items:center;gap:12px;border:0;background:none;padding:12px;border-radius:12px;color:var(--muted);font-weight:500;text-align:left}
.nav button.on{background:var(--ink);color:#f5ede4}
.nav button:not(.on):hover{background:rgba(26,20,18,.06)}
.nav i,.bnav i{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--warn)}
.side-foot{margin-top:auto;display:grid;gap:6px}
.link{background:none;border:0;color:var(--muted);text-decoration:none;font-size:.85rem;text-align:left;padding:6px 8px}
.mtop,.bnav{display:none}
.main{padding:28px 32px 60px;max-width:1100px;width:100%}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.head h1{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:2.1rem}
.sub{color:var(--muted);font-size:.85rem}

/* resumen */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:4px;align-content:start}
.kpi small{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kpi strong{font-family:"Cutive Mono",monospace;font-weight:400;font-size:1.55rem;word-break:break-word}
.kpi span{font-size:.76rem;color:var(--muted);min-height:1em}
.kpi.warn strong{color:var(--warn)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px}
.card-h{display:flex;justify-content:space-between;margin-bottom:12px}
.card-h h3{font-size:.95rem;font-weight:600}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two-col .card{margin-bottom:0}
.chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:10px}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;min-width:0}
.bar i{display:block;width:100%;max-width:34px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--gold),#d9bd8d);min-height:3px;transition:height .7s cubic-bezier(.2,.8,.2,1)}
.bar i.zero{background:rgba(26,20,18,.1)}
.bar span{font-size:.62rem;color:var(--muted)}
.mini-list{display:grid;gap:2px}
.mini{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.mini:last-child{border:0}
.mini div{display:grid;gap:2px;min-width:0}
.mini small{color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini b{font-family:"Cutive Mono",monospace;font-weight:400;white-space:nowrap}
.none{color:var(--muted);font-size:.85rem;padding:14px 0;text-align:center}

/* herramientas */
.tools{display:grid;gap:10px;margin-bottom:14px}
.search{background:var(--card)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px;font-size:.84rem;font-weight:500;white-space:nowrap}
.chip b{font-weight:500;opacity:.55;margin-left:3px}
.chip.on{background:var(--ink);color:#f5ede4;border-color:var(--ink)}
.selects{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.summary{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.summary b{color:var(--ink)}

/* productos */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.pc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.pc .ph{position:relative;aspect-ratio:4/5;background:#eadfd2 center/cover no-repeat;display:grid;place-items:center}
.pc .ph .mini-logo{opacity:.3;width:34px;height:50px}
.pc.dim .ph{filter:grayscale(.7) opacity(.8)}
.pc .st{position:absolute;top:10px;left:10px}
.pc .body{padding:12px;display:grid;gap:3px;flex:1}
.pc small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pc strong{font-size:.95rem;line-height:1.25}
.pc .meta{font-size:.76rem;color:var(--muted)}
.price{font-family:"Cutive Mono",monospace;font-size:1.15rem;margin-top:4px}
.pc .acts{display:grid;grid-template-columns:1fr auto;gap:8px;padding:0 12px 12px}
.tg{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px;font-size:.82rem;font-weight:600}
.tg.pause{color:var(--warn)}
.tg.play{background:var(--ok);color:#fff;border-color:var(--ok)}
.tg.lock{color:var(--muted);font-weight:500}
.ib{border:1px solid var(--line);background:#fff;border-radius:11px;padding:0 14px;font-size:.82rem}
.pill{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;color:#fff;white-space:nowrap;width:max-content}
.pill.disponible,.pill.aprobado{background:var(--ok)}
.pill.reservado,.pill.pendiente{background:var(--warn)}
.pill.pausado,.pill.vencido{background:#8a7f79}
.pill.agotado{background:var(--ink)}
.pill.rechazado{background:var(--bad)}

/* ventas */
.olist{display:grid;gap:10px}
.oc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:8px}
.oc-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.oc-top strong{font-size:.98rem}
.oc small{color:var(--muted);font-size:.78rem;line-height:1.4}
.oc .amt{font-family:"Cutive Mono",monospace;font-size:1.25rem;white-space:nowrap}
.oc-bot{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.oc-bot .sp{flex:1}
.mbtn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;font-size:.8rem;text-decoration:none;color:var(--ink);font-weight:500}
.mbtn.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.mbtn.bad{color:var(--bad)}
.mbtn.wa{background:#e7f6ec;border-color:#bfe5cc;color:#1c6b3d}

/* clientes */
.clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.cc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:10px;text-align:left;width:100%}
.cc-top{display:flex;gap:12px;align-items:center}
.av{flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#f5ede4;display:grid;place-items:center;font-family:"Cormorant Garamond",serif;font-size:1.3rem;font-weight:600}
.cc-top div{display:grid;gap:2px;min-width:0}
.cc strong{font-size:.98rem}
.cc small{color:var(--muted);font-size:.78rem}
.cc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:.72rem;color:var(--muted)}
.cc-stats b{display:block;color:var(--ink);font-size:.98rem;font-family:"Cutive Mono",monospace;font-weight:400}

/* modal */
.modal{position:fixed;inset:0;background:rgba(26,20,18,.45);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);animation:fade .2s}
.sheet{background:var(--card);border-radius:24px;width:100%;max-width:520px;max-height:92dvh;overflow:auto;padding:20px;animation:pop .28s cubic-bezier(.2,.8,.2,1)}
.sheet-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sheet-h h2{font-family:"Cormorant Garamond",serif;font-size:1.6rem;font-weight:600}
.x{border:0;background:rgba(26,20,18,.07);width:36px;height:36px;border-radius:50%}
.form{display:grid;gap:12px}
.form label{display:grid;gap:5px;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photo{position:relative;aspect-ratio:4/3;border:1.5px dashed rgba(26,20,18,.28);border-radius:16px;display:grid!important;place-items:center;overflow:hidden;cursor:pointer;text-transform:none!important;letter-spacing:0!important;font-size:.9rem!important;background:#fff}
.photo input{display:none}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .chg{position:absolute;bottom:10px;right:10px;background:rgba(26,20,18,.75);color:#fff;padding:6px 12px;border-radius:999px;font-size:.75rem}
.form-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.cust-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.cust-head div{display:grid;gap:2px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.98)}}

.toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#f5ede4;padding:12px 20px;border-radius:999px;font-size:.88rem;transition:.3s;pointer-events:none;z-index:80;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* celular */
@media (max-width:860px){
  .app{display:block}
  .side{display:none}
  .mtop{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:30;background:rgba(255,253,250,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
  .main{padding:16px 14px calc(96px + env(safe-area-inset-bottom))}
  .head h1{font-size:1.75rem}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:13px}.kpi strong{font-size:1.25rem}
  .two-col{grid-template-columns:1fr}
  .two-col .card{margin-bottom:0}
  .two-col{gap:14px}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pc .acts{grid-template-columns:1fr}
  .ib{padding:10px}
  .clist{grid-template-columns:1fr}
  .bnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,253,250,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .bnav button{flex-direction:column;gap:3px;padding:8px 2px;font-size:.68rem;text-align:center;justify-content:center}
  .bnav button.on{color:var(--ink)}
  .bnav button.on svg{stroke-width:2.2}
  .bnav button.on span{font-weight:600}
  .bnav i{right:calc(50% - 20px);top:8px;transform:none}
  .modal{align-items:flex-end;padding:0}
  .sheet{max-width:none;border-radius:24px 24px 0 0;max-height:94dvh;padding:18px 16px calc(20px + env(safe-area-inset-bottom));animation:up .3s cubic-bezier(.2,.8,.2,1)}
  @keyframes up{from{transform:translateY(100%)}}
}

.pc .acts .cp{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed rgba(26,20,18,.3);background:rgba(184,147,90,.1);border-radius:11px;padding:10px;font-size:.82rem;font-weight:600}
.pc .acts .cp svg{width:16px;height:16px}
.pc .acts .cp.done{background:var(--ok);color:#fff;border:1px solid var(--ok)}
@media (max-width:860px){.pc .acts .cp{grid-column:auto}}

.deliv{font-weight:500;color:var(--ink)!important}
.deliv.cadete{color:var(--blue)!important}

.mtop-r{display:flex;gap:4px;align-items:center}
.rc{display:inline-block;font-size:.72rem;font-weight:600;color:#1f6b42;background:rgba(47,143,91,.12);border-radius:999px;padding:3px 9px;width:max-content}
.mbtn.rcb{background:#fff;border-color:var(--ink);font-weight:600}
.pw-note{font-size:.78rem;color:var(--muted);line-height:1.4}

.cnote{background:#fff7e6;border:1px solid #f0dcae;border-radius:10px;padding:8px 10px;color:#5a4520!important;font-size:.8rem!important}

.ai{border-radius:10px;padding:8px 10px;font-size:.78rem!important;line-height:1.4}
.ai.ok{background:rgba(47,143,91,.1);color:#1f6b42!important}
.ai.revisar{background:#fff7e6;color:#8a5a12!important}
.ai.invalido{background:rgba(196,71,62,.1);color:#8f2f28!important}