/* Cerki — sistema visual "Neon Orange + Porcelain"
   (paleta elegida por Carlos: #FF6115 sobre #FFFCF4).
   Tokens en :root; tema oscuro por prefers-color-scheme. */
:root{
  --ground:#FFFCF4; --surface:#FFFFFF; --surface2:#FFF3E8; --ink:#27160B; --ink2:#8A6E5A;
  --line:#F0E1D0; --accent:#FF6115; --accent-ink:#C6440A; --accent-soft:#FFE8DB;
  --mango:#E8A50A; --mango-soft:#FBF0D6; --danger:#CE2C2C; --chat-user:#27160B; --chat-user-ink:#FFFCF4;
  --shadow:0 2px 10px rgba(63,32,12,.08); --r:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#181008; --surface:#231710; --surface2:#2E1E12; --ink:#F7EEE3; --ink2:#B79C87;
    --line:#3D2A1A; --accent:#FF7A38; --accent-ink:#FFA678; --accent-soft:#3B2110;
    --mango:#F2B23B; --mango-soft:#3A2C12; --danger:#F06A5C; --chat-user:#F7EEE3; --chat-user-ink:#181008;
    --shadow:0 2px 10px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.5 "Instrument Sans",system-ui,sans-serif;min-height:100dvh}
img{max-width:100%}
.app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
header.top{padding:14px 16px 10px;display:flex;align-items:center;gap:10px}
.logo{font:800 26px/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.5px;color:var(--ink)}
.logo .pin{color:var(--accent)}
.tagline{font-size:12px;color:var(--ink2);margin-top:2px}
.navlinks{margin-left:auto;display:flex;gap:6px;align-items:center}
.pill{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:7px 12px;font:600 13px "Instrument Sans",sans-serif;color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:var(--shadow)}
.pill:hover{border-color:var(--accent)}
nav.tabs{display:flex;gap:6px;padding:4px 16px 10px}
.tab{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink2);border-radius:11px;padding:9px 4px;font:600 13px "Instrument Sans",sans-serif;cursor:pointer;text-align:center}
.tab.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
main{flex:1;display:flex;flex-direction:column;padding:0 16px 16px;gap:12px}
.subtabs{display:flex;gap:6px}
.subtab{border:1px solid var(--line);background:var(--surface2);color:var(--ink2);border-radius:99px;padding:7px 16px;font:600 13px "Instrument Sans",sans-serif;cursor:pointer}
.subtab.on{background:var(--accent);border-color:var(--accent);color:#241206}
/* chat */
.chat{flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding:6px 2px;min-height:300px}
.msg{max-width:86%;padding:11px 14px;border-radius:16px;white-space:pre-wrap}
.msg.ia{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;box-shadow:var(--shadow)}
.msg.yo{background:var(--chat-user);color:var(--chat-user-ink);align-self:flex-end;border-bottom-right-radius:5px}
.msg.sys{background:var(--mango-soft);color:var(--ink);font-size:13px;align-self:center;text-align:center;border-radius:10px;max-width:95%}
.typing{display:flex;gap:4px;padding:12px 16px;align-self:flex-start}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink2);animation:b 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes b{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion: reduce){.typing i{animation:none;opacity:.6}}
/* tarjetas */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow)}
.card h4{margin:0;font:700 16px "Bricolage Grotesque",sans-serif}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:12.5px;color:var(--ink2)}
.chip{background:var(--surface2);border-radius:99px;padding:3px 9px;font-weight:500}
.chip.star{background:var(--mango-soft);color:var(--ink)}
.chip.km{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.precios{margin:8px 0 0;padding:0;list-style:none;font-size:13.5px}
.precios li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px dashed var(--line)}
.precios b{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.pimg{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--accent-soft),var(--surface2));display:grid;place-items:center;font-size:21px;flex:none;border:1px solid var(--line);overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover}
.buy{border:none;background:var(--accent);color:#241206;border-radius:99px;padding:5px 12px;font:700 12px "Instrument Sans",sans-serif;cursor:pointer;flex:none;text-decoration:none;display:inline-block}
.buy:hover{filter:brightness(1.08)}
.conf{border-left:4px solid var(--accent)}
.conf .num{font:800 13px "Bricolage Grotesque",sans-serif;color:var(--accent-ink);letter-spacing:.5px}
.wa{margin-top:8px;font-size:12.5px;color:var(--accent-ink);background:var(--accent-soft);border-radius:9px;padding:7px 10px}
/* controles */
.sugs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.sug{white-space:nowrap;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font:500 13.5px "Instrument Sans",sans-serif;color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.sug:hover{border-color:var(--accent);color:var(--accent-ink)}
.inputrow{display:flex;gap:8px}
.inputrow input{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:99px;padding:12px 17px;font:15px "Instrument Sans",sans-serif;outline:none;min-width:0}
.inputrow input:focus{border-color:var(--accent)}
.send{border:none;background:var(--accent);color:#241206;border-radius:99px;width:48px;height:48px;font-size:19px;cursor:pointer;flex:none}
.send:disabled{opacity:.45;cursor:default}
select,input.f,textarea.f{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;padding:10px 12px;font:500 14px "Instrument Sans",sans-serif;width:100%}
.btn{border:1px solid var(--line);background:var(--surface2);color:var(--ink);border-radius:9px;padding:8px 14px;font:600 13px "Instrument Sans",sans-serif;cursor:pointer}
.btn.ok{background:var(--accent);border-color:var(--accent);color:#241206}
.btn.rojo{color:var(--danger)}
.acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.form{display:flex;flex-direction:column;gap:9px}
.form label{font:600 12.5px "Instrument Sans",sans-serif;color:var(--ink2)}
.vacio{text-align:center;color:var(--ink2);padding:32px 20px;font-size:14px}
.notice{background:var(--mango-soft);border-radius:11px;padding:10px 13px;font-size:13px}
.wanote{background:var(--surface);border:1px dashed var(--accent);border-radius:var(--r);padding:11px 14px;font-size:13px;color:var(--ink2)}
.wanote b{color:var(--accent-ink)}
h3.sec{font:700 15px "Bricolage Grotesque",sans-serif;margin:6px 0 0}
/* órdenes */
.orden{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow);margin-bottom:9px}
.orden.nueva{border-color:var(--accent);animation:pop .5s}
@keyframes pop{0%{transform:scale(.96);opacity:.4}100%{transform:scale(1);opacity:1}}
.orden .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.estado{font:700 11px "Instrument Sans",sans-serif;text-transform:uppercase;letter-spacing:.6px;border-radius:99px;padding:4px 10px}
.estado.nueva{background:var(--mango-soft);color:var(--mango)}
.estado.confirmada{background:var(--accent-soft);color:var(--accent-ink)}
.estado.completada,.estado.cancelada{background:var(--surface2);color:var(--ink2)}
.orden .det{font-size:13.5px;color:var(--ink2);margin-top:6px;line-height:1.55}
.orden .det b{color:var(--ink);font-weight:600}
/* admin */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.kpi .n{font:800 26px/1.1 "Bricolage Grotesque",sans-serif;font-variant-numeric:tabular-nums}
.kpi .l{font-size:12px;color:var(--ink2);margin-top:3px}
.kpi.acc .n{color:var(--accent-ink)}
.area{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow);margin-bottom:8px}
.area .nom{flex:1;font-weight:600}
.area .cnt{font-size:12px;color:var(--ink2)}
.sw{width:46px;height:26px;border-radius:99px;border:none;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.sw.on{background:var(--accent)}
.sw.on::after{transform:translateX(20px)}
dialog{border:none;border-radius:16px;background:var(--surface);color:var(--ink);padding:20px;max-width:420px;width:90vw;box-shadow:0 10px 40px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,20,14,.5)}
dialog h4{margin:0 0 12px;font:700 17px "Bricolage Grotesque",sans-serif}
.barrios{display:flex;flex-wrap:wrap;gap:8px}
.barrios button{border:1px solid var(--line);background:var(--surface2);color:var(--ink);border-radius:99px;padding:8px 14px;font:500 14px "Instrument Sans",sans-serif;cursor:pointer}
.barrios button.on{background:var(--accent);border-color:var(--accent);color:#241206}
.areachips{display:flex;gap:8px;flex-wrap:wrap}
.areachip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:7px 14px;font:600 13px "Instrument Sans",sans-serif;color:var(--ink);cursor:pointer}
.areachip.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
footer.pie{padding:10px 16px 18px;text-align:center;font-size:11.5px;color:var(--ink2)}
footer.pie a{color:var(--ink2)}