/* Pendientero — tokens del handoff de diseño (De la Fuente) */
:root{
  --vino:#6E1F38;
  --page:#EDEAE2;
  --panel:#F9F9F5;
  --tinta:#442121;
  --tinta2:#3E3E3E;
  --gris:rgba(68,33,33,.5);
  --gris2:#8a6a6a;
  --verde:#3C7A57;
  --naranja:#B5622A;
  --azulgris:#5B6B7A;
  --durazno:#FBF3EC;
  --b1:#00000015;
  --b2:#00000022;
  --b3:#00000033;
}
*{-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--page)}
body{font-family:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;color:var(--tinta);overscroll-behavior-y:none}
.h{font-family:'Noto Serif',serif;color:var(--tinta2)}
.lbl{font-family:'Manrope',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.money{font-variant-numeric:tabular-nums;font-weight:600}
.pill{border-radius:100px}
.navitem{font-family:'Manrope',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:8px 13px;border-radius:100px;color:rgba(68,33,33,.55);cursor:pointer;border:none;background:none}
.navitem.active{background:var(--panel);color:var(--vino)}
.rowhover:hover{background:#FAFAF7}
input,button,select{font-family:inherit}
input{color:var(--tinta)}
input:focus{outline:none}
.tap{cursor:pointer}
.err{color:var(--naranja);font-size:10.5px;margin-top:4px;font-family:'Manrope',sans-serif}
.inp{border:1px solid var(--b3);border-radius:10px;padding:8px 10px;font-size:12px;width:100%;box-sizing:border-box}
.inp.bad{border-color:var(--naranja)}
.menu{position:absolute;background:#fff;border:1px solid var(--b2);border-radius:8px;padding:6px;box-shadow:0 6px 18px rgba(0,0,0,.12);z-index:20;max-height:260px;overflow:auto}
.menu>div{padding:7px 9px;font-size:12px;border-radius:6px;cursor:pointer}
.sheetwrap{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet{background:#fff;border-radius:16px 16px 0 0;padding:18px;width:100%;max-width:900px;max-height:88vh;overflow-y:auto;box-shadow:0 -10px 40px rgba(0,0,0,.25);padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.handle{width:36px;height:4px;background:var(--b2);border-radius:2px;margin:0 auto 14px}
.bar{height:6px;border-radius:3px;background:var(--b1);overflow:hidden;display:block}
.bar>i{display:block;height:100%;background:var(--vino)}
.photo{background:repeating-linear-gradient(45deg,#f4f2ee,#f4f2ee 4px,#fff 4px,#fff 8px);display:flex;align-items:center;justify-content:center;color:var(--gris2);font-size:10px;flex:none;background-size:cover;background-position:center;overflow:hidden;cursor:pointer;border:1px solid var(--b2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.drag{outline:2px dashed var(--vino);outline-offset:-2px}
.card{border:1px solid var(--b2);border-radius:10px;background:#fff}
.btnp{border-radius:100px;background:var(--vino);color:#fff;border:none;cursor:pointer;font-size:11.5px;padding:8px 16px;white-space:nowrap}
.btno{border-radius:100px;background:none;border:1px solid var(--b3);cursor:pointer;font-size:11px;padding:6px 12px;color:var(--tinta)}
.drop{border:1.5px dashed var(--b3);border-radius:12px;padding:22px;text-align:center;color:var(--gris2);font-size:12.5px;cursor:pointer}
.drop.drag{border-color:var(--vino);background:#FBF7F8}
#app{min-height:100vh}
.shell{background:#fff;margin:0 auto;min-height:100vh;position:relative}
@media (min-width:768px){
  .shell{max-width:1280px;border:1px solid var(--b2);box-shadow:0 2px 10px rgba(0,0,0,.05);min-height:760px}
}
.kan{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.kancol{min-width:190px;flex:none;background:var(--panel);border-radius:10px;padding:10px}
.kancol.over{outline:2px dashed var(--vino);outline-offset:-2px}
.tbl{display:flex;flex-direction:column;border:1px solid var(--b2);border-radius:10px;overflow:hidden}
.tbl>div{border-bottom:1px solid var(--b1);background:#fff}
.tbl>div:last-child{border-bottom:none}
.sync{font-family:'Manrope',sans-serif;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);display:flex;align-items:center;gap:5px;white-space:nowrap}
.sync i{width:6px;height:6px;border-radius:50%;background:var(--verde);display:block}
.sync.off i{background:var(--naranja)}
.sync.busy i{background:#c9a227}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--tinta);color:#fff;font-size:12.5px;padding:10px 18px;border-radius:100px;z-index:200;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.login{max-width:340px;margin:0 auto;padding:80px 24px;text-align:center}