/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:      #F7F5F2;
  --surface: #FFFFFF;
  --s2:      #F2F0ED;
  --sidebar: #111827;
  --side2:   #0D1520;
  --amber:    #F59E0B;
  --amber-d:  #D97706;
  --amber-bg: #FEF3C7;
  --red:     #EF4444;
  --red-bg:  #FEF2F2;
  --green:   #10B981;
  --grn-bg:  #ECFDF5;
  --blue:    #6366F1;
  --blu-bg:  #EEF2FF;
  --t1: #111827;
  --t2: #374151;
  --t3: #6B7280;
  --t4: #9CA3AF;
  --bdr: #E5E7EB;
  --sh:    0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 4px 12px rgba(0,0,0,.08);
  --sh-lg: 0 16px 40px rgba(0,0,0,.12);
  --r:    12px;
  --r-sm:  8px;
  --r-xs:  6px;
  --r-xl: 18px;
  --sw:  252px;
  --th:   62px;
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--t1);min-height:100vh}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}
ul{list-style:none}

/* ── APP LAYOUT ─────────────────────────────────────────── */
.app{display:flex;height:100vh;overflow:hidden}

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar{
  width:var(--sw);
  background:var(--sidebar);
  border-right:1px solid rgba(255,255,255,.04);
  display:flex;flex-direction:column;flex-shrink:0;
  overflow-y:auto;overflow-x:hidden;position:relative;
}
.sidebar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--amber);
}
.sb-brand{padding:22px 20px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.sb-name{
  font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;
  color:#fff;letter-spacing:-0.5px;line-height:1
}
.sb-name span{color:var(--amber)}
.sb-sub{
  font-size:10px;color:rgba(255,255,255,.3);
  margin-top:4px;letter-spacing:1.2px;text-transform:uppercase
}
.sb-status{
  display:flex;align-items:center;gap:10px;
  margin:14px 16px;padding:10px 14px;
  background:rgba(255,255,255,.05);border-radius:10px;
  border:1px solid rgba(255,255,255,.07);
}
.radar-wrap{position:relative;width:20px;height:20px;flex-shrink:0}
.r-dot{
  width:8px;height:8px;background:var(--amber);border-radius:50%;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 6px rgba(245,158,11,.5);
}
.r-ring{
  position:absolute;top:50%;left:50%;border-radius:50%;
  border:1.5px solid var(--amber);
  animation:radar 2.8s ease-out infinite;
  transform:translate(-50%,-50%);
}
.r-ring:nth-child(2){animation-delay:.9s}
.r-ring:nth-child(3){animation-delay:1.8s}
@keyframes radar{
  0%{width:8px;height:8px;opacity:.9}
  100%{width:26px;height:26px;opacity:0}
}
.sb-status-txt{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  color:var(--amber);letter-spacing:.5px;line-height:1;
}
.sb-status-txt small{
  display:block;font-size:10px;font-weight:400;
  color:rgba(255,255,255,.33);letter-spacing:0;margin-top:3px;
}
.sb-nav{padding:6px 10px;flex:1}
.sb-section{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;
  color:rgba(255,255,255,.22);padding:14px 10px 5px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-sm);
  color:rgba(255,255,255,.52);
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:500;
  cursor:pointer;transition:all .14s;margin-bottom:2px;
  position:relative;user-select:none;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.9)}
.nav-item.active{background:rgba(245,158,11,.13);color:var(--amber)}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--amber);border-radius:0 3px 3px 0;
}
.nav-icon{width:17px;height:17px;flex-shrink:0}
.nav-badge{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;
  font-family:'Space Grotesk',sans-serif;
}
.sb-footer{
  padding:14px 20px;border-top:1px solid rgba(255,255,255,.06);
  font-size:11px;color:rgba(255,255,255,.22);line-height:1.6;
}
.sb-export-btn{
  margin-top:10px;width:100%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.45);
  border-radius:8px;padding:7px 10px;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .14s;letter-spacing:.3px;
}
.sb-export-btn:hover{background:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}

/* ── TOPBAR ─────────────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{
  height:var(--th);background:var(--surface);
  border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;padding:0 28px;gap:12px;flex-shrink:0;
}
.tb-title{
  font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;
  color:var(--t1);flex:1;
}
.tb-time{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--t4)}

/* Pill de sincronización */
.sync-pill{
  display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .2s;border:1px solid transparent;white-space:nowrap;
}
.sync-pill.synced {background:var(--grn-bg);color:var(--green);border-color:#A7F3D0}
.sync-pill.pending{background:var(--amber-bg);color:var(--amber-d);border-color:#FDE68A}
.sync-pill.offline{background:var(--red-bg);color:var(--red);border-color:#FECACA}
.sync-pill.syncing{background:var(--blu-bg);color:var(--blue);border-color:#C7D2FE}
.sync-pill.local  {background:var(--s2);color:var(--t3);border-color:var(--bdr)}
.sync-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
@keyframes sdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.2;transform:scale(.5)}}
.sync-pill.syncing .sync-dot{animation:sdot .8s ease-in-out infinite}

/* ── CONTENT ────────────────────────────────────────────── */
.content{flex:1;overflow-y:auto;padding:24px 28px 40px}
.page{display:none;animation:pg-in .2s ease}
.page.active{display:block}
@keyframes pg-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* ── SETUP BANNER ───────────────────────────────────────── */
.setup-banner{
  display:none;background:#FFF7ED;border:1px solid #FED7AA;border-radius:var(--r-sm);
  padding:11px 16px;margin-bottom:18px;
  font-size:13px;color:#92400E;font-family:'Space Grotesk',sans-serif;font-weight:500;
  align-items:center;gap:8px;
}
.setup-banner.show{display:flex}

/* ── HERO ───────────────────────────────────────────────── */
.hero{
  background:var(--amber);border-radius:var(--r-xl);
  padding:46px 46px 42px;
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;margin-bottom:22px;position:relative;overflow:hidden;
  background-image:radial-gradient(circle,rgba(255,255,255,.18) 1.5px,transparent 1.5px);
  background-size:22px 22px;
}
.hero::before,.hero::after{
  content:'';position:absolute;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);pointer-events:none;
}
.hero::before{width:340px;height:340px;right:-110px;top:-110px}
.hero::after {width:200px;height:200px;right:-48px;top:-48px}
.hero-wm{
  position:absolute;left:28px;top:50%;transform:translateY(-58%);
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(130px,21vw,230px);font-weight:700;
  letter-spacing:-12px;line-height:1;
  color:rgba(255,255,255,.052);pointer-events:none;user-select:none;z-index:0;
}
.hero-left{flex:1;min-width:0;position:relative;z-index:1}
.hero-eyebrow{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:3.5px;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:18px;
  display:flex;align-items:center;gap:12px;animation:hseq .4s ease both;
}
.hero-eyebrow::before{
  content:'';display:block;flex-shrink:0;width:30px;height:2px;background:rgba(255,255,255,.55);
}
.hero-h{
  font-family:'Space Grotesk',sans-serif;line-height:.84;letter-spacing:-4px;
  text-transform:uppercase;margin-bottom:22px;overflow:visible;
}
.hl-fill{
  display:block;font-size:clamp(64px,10.5vw,108px);font-weight:700;color:#fff;
  animation:hseq .5s cubic-bezier(.22,1,.36,1) .1s both;
}
.hl-outline{
  display:block;font-size:clamp(56px,9vw,94px);font-weight:700;color:transparent;
  -webkit-text-stroke:2.5px rgba(255,255,255,.8);
  animation:hseq .5s cubic-bezier(.22,1,.36,1) .22s both;
}
@keyframes hseq{
  from{transform:translateY(28px) skewY(1.5deg);opacity:0}
  to{transform:translateY(0) skewY(0);opacity:1}
}
.hero-sub{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.42);
  margin-bottom:26px;animation:hseq .45s ease .33s both;
}
.hero-pills{display:flex;gap:8px;flex-wrap:wrap;animation:hseq .45s ease .44s both}
.hero-pill{
  display:flex;align-items:center;gap:9px;
  background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.2);
  border-radius:99px;padding:8px 18px;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
  color:rgba(255,255,255,.75);backdrop-filter:blur(6px);
}
.hero-pill-n{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:600;color:#fff}
.hero-right{
  position:relative;width:130px;height:130px;flex-shrink:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
}
.hr-dot{
  width:22px;height:22px;background:#fff;border-radius:50%;position:absolute;
  box-shadow:0 0 16px rgba(255,255,255,.9),0 0 40px rgba(255,255,255,.4),0 0 70px rgba(255,255,255,.15);
}
.hr-ring{
  position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.65);
  animation:hr-expand 3.3s ease-out infinite;
}
.hr-ring:nth-child(2){animation-delay:1.1s}
.hr-ring:nth-child(3){animation-delay:2.2s}
@keyframes hr-expand{
  0%{width:22px;height:22px;opacity:.85}
  100%{width:130px;height:130px;opacity:0}
}

/* ── STAT CARDS ─────────────────────────────────────────── */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;margin-bottom:20px;
}
.sc{
  background:var(--surface);border-radius:var(--r);padding:22px 22px 20px;
  border:1px solid var(--bdr);box-shadow:var(--sh);
  min-width:0;overflow:hidden;transition:box-shadow .18s,transform .18s;
}
.sc:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.sc-eyebrow{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--amber);
  margin-bottom:10px;display:flex;align-items:center;gap:6px;
}
.sc-value{
  font-family:'JetBrains Mono',monospace;font-size:clamp(28px,3.5vw,42px);
  font-weight:600;color:var(--t1);line-height:1;letter-spacing:-1px;margin-bottom:5px;
}
.sc-sub{font-size:12px;color:var(--t3)}

/* ── TWO-COL LAYOUT ─────────────────────────────────────── */
.two-col{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;margin-bottom:18px;
}

/* ── CARDS ──────────────────────────────────────────────── */
.card{
  background:var(--surface);border-radius:var(--r);
  padding:22px;border:1px solid var(--bdr);box-shadow:var(--sh);
  min-width:0;overflow:hidden;
}
.card-h{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.card-title{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:var(--t3);
}
.card-link{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  color:var(--amber-d);cursor:pointer;transition:color .14s;
}
.card-link:hover{color:var(--amber)}

/* ── SECTION HEADERS ────────────────────────────────────── */
.sec-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.sec-eyebrow{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--amber);margin-bottom:4px;
}
.sec-title{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,2.5vw,28px);font-weight:700;
  color:var(--t1);letter-spacing:-0.5px;line-height:1.1;
}
.sec-sub{font-size:13px;color:var(--t3);margin-top:4px}

/* ── INVENTORY MINI (dashboard) ─────────────────────────── */
.inv-row-mini{margin-bottom:13px}
.inv-row-mini:last-child{margin-bottom:0}
.inv-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.inv-name{font-size:13px;font-weight:500;color:var(--t1)}
.inv-qty{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t4)}
.prog{height:6px;background:var(--s2);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;border-radius:3px;transition:width .35s ease}
.fill-red  {background:var(--red)}
.fill-amber{background:var(--amber)}
.fill-green{background:var(--green)}
.fill-gray {background:var(--t3)}

/* ── VOLUNTEER MINI LIST ────────────────────────────────── */
.vol-mini{
  display:flex;align-items:center;gap:11px;
  padding:9px 0;border-bottom:1px solid var(--bdr);
}
.vol-mini:last-child{border-bottom:none;padding-bottom:0}
.avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;color:#fff;
}
.av-name{font-size:13px;font-weight:600;color:var(--t1)}
.av-role{font-size:11px;color:var(--t4);margin-top:1px}
.av-turn{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t3);white-space:nowrap}

/* ── TIMELINE ───────────────────────────────────────────── */
.timeline{position:relative;padding-left:28px}
.timeline::before{
  content:'';position:absolute;left:6px;top:14px;bottom:14px;
  width:2px;background:linear-gradient(180deg,var(--bdr) 0%,transparent 100%);
}
.tl-item{position:relative;margin-bottom:18px}
.tl-item:last-child{margin-bottom:0}
.tl-dot{
  position:absolute;left:-24px;top:14px;
  width:12px;height:12px;border-radius:50%;
  border:2.5px solid #fff;box-shadow:0 0 0 2px currentColor;
}
.tl-item.critico .tl-dot{color:var(--red)}
.tl-item.urgente .tl-dot{color:var(--amber)}
.tl-item.info    .tl-dot{color:var(--blue)}
.tl-card{
  background:var(--surface);border:1px solid var(--bdr);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--sh);border-left-width:3px;
}
.tl-item.critico .tl-card{border-left-color:var(--red)}
.tl-item.urgente .tl-card{border-left-color:var(--amber)}
.tl-item.info    .tl-card{border-left-color:var(--blue)}
.tl-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.tl-title{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  color:var(--t1);flex:1;min-width:100px;
}
.tl-time{font-size:11px;color:var(--t4);white-space:nowrap}
.tl-body{font-size:13px;color:var(--t2);line-height:1.55}
.tl-foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px}
.tl-author{font-size:11px;color:var(--t4)}

/* ── INVENTORY GRID ─────────────────────────────────────── */
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.inv-card{
  background:var(--surface);border-radius:var(--r);
  border:1px solid var(--bdr);border-left:4px solid var(--ic-clr,var(--bdr));
  padding:18px;box-shadow:var(--sh);min-width:0;overflow:hidden;
  transition:box-shadow .18s,transform .18s;
}
.inv-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.inv-card.status-critico{--ic-clr:var(--red)}
.inv-card.status-bajo   {--ic-clr:var(--amber)}
.inv-card.status-ok     {--ic-clr:var(--green)}
.inv-card.status-none   {--ic-clr:var(--t4)}
.ic-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px}
.ic-name{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--t1);line-height:1.3}
.ic-cat{font-size:11px;color:var(--t4);margin-top:2px}
.ic-qty{font-family:'JetBrains Mono',monospace;font-size:34px;font-weight:600;color:var(--t1);line-height:1}
.ic-unit{font-size:11px;color:var(--t4);margin-top:4px}
.ic-prog-row{margin:10px 0}
.ic-controls{display:flex;align-items:center;gap:7px;margin-top:12px}
.qty-btn{
  width:28px;height:28px;border-radius:6px;
  border:1px solid var(--bdr);background:var(--s2);color:var(--t1);
  font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .14s;flex-shrink:0;
}
.qty-btn:hover{border-color:var(--amber);background:var(--amber-bg)}
.qty-input{
  flex:1;text-align:center;padding:5px 4px;
  border:1px solid var(--bdr);border-radius:6px;
  font-family:'JetBrains Mono',monospace;font-size:13px;
  color:var(--t1);background:#fff;outline:none;min-width:0;
}
.qty-input:focus{border-color:var(--amber)}
.qty-input::-webkit-inner-spin-button,.qty-input::-webkit-outer-spin-button{-webkit-appearance:none}

/* ── VOLUNTEERS TABLE ───────────────────────────────────── */
.search-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.inp-wrap{position:relative;flex:1;min-width:0}
.inp-wrap input{
  width:100%;padding:9px 12px 9px 34px;
  border:1px solid var(--bdr);border-radius:var(--r-sm);
  font-size:13px;color:var(--t1);background:#fff;outline:none;
  transition:border-color .14s;
}
.inp-wrap input:focus{border-color:var(--amber)}
.inp-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t4);pointer-events:none}
.inp-wrap input{padding-right:32px}
.inp-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:4px;border:none;
  background:var(--t4);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:.55;transition:opacity .14s;padding:0;
}
.inp-clear:hover{opacity:1}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;color:var(--t4);
  padding:10px 14px;text-align:left;border-bottom:2px solid var(--bdr);
  white-space:nowrap;background:var(--s2);
}
td{padding:12px 14px;font-size:13px;color:var(--t1);border-bottom:1px solid var(--bdr);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#FAFAF8}
.st-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px;flex-shrink:0}
.dot-g{background:var(--green)}.dot-r{background:var(--red)}.dot-gr{background:var(--t4)}
.act-cell{display:flex;gap:5px;align-items:center}

/* ── TAGS ───────────────────────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:3px;padding:2px 9px;
  border-radius:99px;font-family:'Space Grotesk',sans-serif;
  font-size:11px;font-weight:600;white-space:nowrap;
}
.tag-red  {background:var(--red-bg);color:var(--red)}
.tag-amber{background:var(--amber-bg);color:var(--amber-d)}
.tag-green{background:var(--grn-bg);color:var(--green)}
.tag-blue {background:var(--blu-bg);color:var(--blue)}
.tag-gray {background:var(--s2);color:var(--t3)}

/* ── TABS ───────────────────────────────────────────────── */
.tabs{
  display:flex;gap:3px;background:var(--s2);border-radius:var(--r-sm);
  padding:4px;margin-bottom:18px;overflow-x:auto;
}
.tab{
  flex:1;min-width:fit-content;padding:7px 12px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:5px;
  border-radius:6px;font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:600;color:var(--t3);cursor:pointer;
  transition:all .14s;white-space:nowrap;
}
.tab.active{background:#fff;color:var(--t1);box-shadow:var(--sh)}
.tab:hover:not(.active){color:var(--t1)}

/* ── COMM FILTERS ───────────────────────────────────────── */
.filter-row{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.fbtn{
  display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;cursor:pointer;
  border:1.5px solid var(--bdr);background:#fff;color:var(--t3);transition:all .14s;
}
.fbtn.fa-todos    {background:var(--t1);color:#fff;border-color:var(--t1)}
.fbtn.fa-critico  {background:var(--red);color:#fff;border-color:var(--red)}
.fbtn.fa-urgente  {background:var(--amber);color:#fff;border-color:var(--amber)}
.fbtn.fa-info     {background:var(--blue);color:#fff;border-color:var(--blue)}
.fbtn.fa-resueltos{background:var(--green);color:#fff;border-color:var(--green)}

/* ── FILAS DE INSUMOS EN MODAL ENTREGA ─────────────────── */
.del-item-row{margin-bottom:10px}
.del-item-row-top{display:flex;gap:8px;align-items:center;margin-bottom:3px}
.del-item-stock{font-size:11px;color:var(--t4);padding-left:2px;display:block;min-height:14px}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:99px;
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  transition:all .14s;cursor:pointer;white-space:nowrap;letter-spacing:.2px;
}
.btn-primary{background:var(--t1);color:#fff}
.btn-primary:hover{background:var(--t2)}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:var(--amber-d)}
.btn-ghost{background:transparent;color:var(--t2);border:1.5px solid var(--bdr)}
.btn-ghost:hover{background:var(--s2)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#DC2626}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-icon{padding:5px 8px;border-radius:8px;font-size:14px}

/* ── FORMS ──────────────────────────────────────────────── */
.form-g{margin-bottom:14px}
.form-l{
  display:block;font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:600;color:var(--t2);margin-bottom:5px;
}
.form-i{
  width:100%;padding:10px 13px;border:1.5px solid var(--bdr);border-radius:var(--r-sm);
  font-size:13px;color:var(--t1);background:#fff;outline:none;
  transition:border-color .14s,box-shadow .14s;
}
.form-i:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.12)}
select.form-i{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239CA3AF'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:34px;
}
textarea.form-i{resize:vertical;min-height:90px;line-height:1.55}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* ── MODALS ─────────────────────────────────────────────── */
.modal-ov{
  display:none;position:fixed;inset:0;
  background:rgba(10,15,30,.45);z-index:100;
  align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(4px);
}
.modal-ov.open{display:flex}
.modal{
  background:#fff;border-radius:var(--r-xl);padding:28px;
  width:100%;max-width:500px;box-shadow:var(--sh-lg);max-height:90vh;overflow-y:auto;
}
.modal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.modal-title{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;color:var(--t1)}
.modal-x{
  width:28px;height:28px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;color:var(--t4);font-size:20px;cursor:pointer;
  transition:all .14s;line-height:1;
}
.modal-x:hover{background:var(--s2);color:var(--t1)}
.modal-foot{
  display:flex;gap:10px;justify-content:flex-end;
  margin-top:22px;padding-top:16px;border-top:1px solid var(--bdr);
}

/* ── TOASTS ─────────────────────────────────────────────── */
.toast-c{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{
  display:flex;align-items:center;gap:9px;padding:12px 16px;
  color:#fff;border-radius:var(--r-sm);box-shadow:var(--sh-lg);
  font-size:13px;font-family:'Space Grotesk',sans-serif;font-weight:600;
  min-width:200px;animation:toast-in .25s ease;background:var(--t1);
}
.toast.ok  {background:var(--green)}
.toast.warn{background:var(--amber-d)}
.toast.err {background:var(--red)}
@keyframes toast-in{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── EMPTY STATES ───────────────────────────────────────── */
.empty{text-align:center;padding:40px 20px;color:var(--t4)}
.empty-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 auto 10px;color:var(--t4)}
.empty-title{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--t3);margin-bottom:5px}
.empty-txt{font-size:13px}

/* ── TOP NAV (desktop) ──────────────────────────────────── */
.topnav{
  display:none;
}
@media(min-width:821px){
  .topnav{
    display:flex;align-items:center;
    height:54px;background:var(--sidebar);
    border-bottom:1px solid rgba(255,255,255,.04);
    padding:0 18px;gap:0;flex-shrink:0;
    position:relative;
  }
  .topnav::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--amber);
  }
}
.tn-brand{
  font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;
  color:#fff;letter-spacing:-.5px;flex-shrink:0;margin-right:20px;
}
.tn-brand span{color:var(--amber)}
.tn-nav{display:flex;align-items:center;gap:1px;flex:1;overflow-x:auto}
.tn-item{
  display:flex;align-items:center;gap:5px;padding:8px 11px;
  border-radius:var(--r-sm);
  color:rgba(255,255,255,.42);
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:500;
  cursor:pointer;transition:all .14s;white-space:nowrap;user-select:none;
  position:relative;
}
.tn-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.82)}
.tn-item.active{color:var(--amber);background:rgba(245,158,11,.1)}
.tn-item.active::after{
  content:'';position:absolute;bottom:-1px;left:8px;right:8px;
  height:2px;background:var(--amber);border-radius:2px 2px 0 0;
}
.tn-item.nav-locked{opacity:.35;cursor:default}
.tn-item.nav-locked:hover{background:none;color:rgba(255,255,255,.42)}
.tn-sep{width:1px;height:20px;background:rgba(255,255,255,.1);margin:0 8px;flex-shrink:0}
.tn-auth-btn{
  display:flex;align-items:center;gap:6px;padding:6px 12px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.52);
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .14s;flex-shrink:0;margin-left:12px;
}
.tn-auth-btn:hover{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
.tn-auth-btn--active{background:rgba(245,158,11,.15)!important;border-color:rgba(245,158,11,.4)!important;color:var(--amber)!important}

/* ── STATUS BAR (desktop) ───────────────────────────────── */
.statusbar{display:none}
@media(min-width:821px){
  .statusbar{
    display:flex;align-items:center;
    height:40px;background:var(--surface);
    border-bottom:1px solid var(--bdr);
    padding:0 20px;gap:10px;flex-shrink:0;
  }
}
.stb-left{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.stb-radar{position:relative;width:16px;height:16px;flex-shrink:0}
.stb-radar .r-dot{width:6px;height:6px}
.stb-label{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--amber);white-space:nowrap;
}
.stb-div{color:var(--bdr);font-size:12px}
.stb-page{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  color:var(--t2);flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── QUICK ADD PANEL (desktop) ──────────────────────────── */
.quickadd{display:none}
@media(min-width:821px){
  .quickadd{
    display:flex;flex-direction:column;
    width:290px;background:var(--sidebar);
    border-right:1px solid rgba(255,255,255,.04);
    flex-shrink:0;overflow-y:auto;padding:14px 14px 12px;
  }
  .app{height:calc(100vh - 94px)}
}
/* Head */
.qa-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.qa-head-icon{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.25);
  display:flex;align-items:center;justify-content:center;
  color:var(--amber);
}
.qa-title{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  color:rgba(255,255,255,.88);letter-spacing:.1px;line-height:1.2;
}
.qa-sub{font-size:10px;color:rgba(255,255,255,.28);margin-top:2px;letter-spacing:.3px}
/* Form card */
.qa-form-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:12px 11px 11px;margin-bottom:14px;
}
.qa-label{color:rgba(255,255,255,.35)!important;font-size:9.5px!important;letter-spacing:.7px!important}
.quickadd .form-i{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.88);font-size:13px;
}
.quickadd .form-i::placeholder{color:rgba(255,255,255,.22)}
.quickadd .form-i:focus{
  border-color:var(--amber);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 2px rgba(245,158,11,.18);outline:none;
}
.quickadd select.form-i option{background:#1f2937;color:#fff}
.quickadd .sugg-list{
  background:#1a2535;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.quickadd .sugg-item:hover,.quickadd .sugg-item.sugg-item--active{background:rgba(255,255,255,.12)}
.quickadd .sugg-nombre{color:rgba(255,255,255,.88);white-space:normal;word-break:break-word}
.quickadd .sugg-qty{color:rgba(255,255,255,.35)}
.quickadd .sugg-existing-badge{
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.22);
  color:rgba(245,158,11,.9);border-radius:8px;padding:8px 10px;
  font-size:12px;font-family:'Space Grotesk',sans-serif;
  display:flex;align-items:center;justify-content:space-between;gap:6px;
}
.qa-badge-critico{
  font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.35);
  color:rgba(252,165,165,.95);border-radius:4px;padding:2px 5px;
}
.qa-badge-bajo{
  font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(245,158,11,.18);border:1px solid rgba(245,158,11,.35);
  color:var(--amber);border-radius:4px;padding:2px 5px;
}
.qa-badge-ok{
  font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.3);
  color:rgba(134,239,172,.9);border-radius:4px;padding:2px 5px;
}
.qa-badge-none{
  font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(107,114,128,.15);border:1px solid rgba(107,114,128,.3);
  color:var(--t3);border-radius:4px;padding:2px 5px;
}
/* New-item row: category + unit side by side */
.qa-two-col{display:flex;gap:6px;margin-bottom:8px}
.qa-two-col .form-g{margin-bottom:0}
.qa-hint{font-size:10px;font-weight:400;color:var(--t4);font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0}
/* Qty row with inline save button */
.qa-qty-row{display:flex;align-items:flex-end;gap:7px}
.qa-save-btn{
  width:36px;height:36px;flex-shrink:0;
  background:var(--amber);border:none;border-radius:8px;
  color:#1a1100;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .14s,transform .1s;
}
.qa-save-btn:hover{background:#f0a000;transform:scale(1.04)}
.qa-save-btn:active{transform:scale(.96)}
/* Alerts section */
.qa-alerts-wrap{flex:1;min-height:0;overflow-y:auto;margin-bottom:10px}
.qa-section-label{
  font-family:'Space Grotesk',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.9px;text-transform:uppercase;color:rgba(255,255,255,.28);
  margin-bottom:6px;display:flex;align-items:center;gap:5px;
}
.qa-alert-item{
  display:flex;align-items:center;gap:7px;padding:6px 8px;
  border-radius:7px;cursor:pointer;transition:background .12s;
  border-left:2px solid transparent;margin-bottom:2px;
}
.qa-alert-item:hover{background:rgba(255,255,255,.06)}
.qa-alert-critico{border-left-color:rgba(239,68,68,.7);background:rgba(239,68,68,.05)}
.qa-alert-bajo{border-left-color:rgba(245,158,11,.6);background:rgba(245,158,11,.04)}
.qa-alert-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
.qa-alert-critico .qa-alert-dot{background:rgba(239,68,68,.9)}
.qa-alert-bajo .qa-alert-dot{background:var(--amber)}
.qa-alert-name{
  flex:1;font-size:11.5px;color:rgba(255,255,255,.72);
  overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.qa-alert-qty{font-size:10px;color:rgba(255,255,255,.3);flex-shrink:0}
.qa-alert-empty{
  font-size:11px;color:rgba(255,255,255,.2);text-align:center;
  padding:14px 0;letter-spacing:.2px;
}
/* Bottom tools section */
.qa-bottom{display:flex;flex-direction:column;gap:0}
.qa-tools{
  padding-top:12px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:5px;
}
.qa-tool-btn{
  width:100%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.38);border-radius:8px;padding:7px 10px;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .14s;letter-spacing:.3px;text-align:left;
}
.qa-tool-btn:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.65)}
.qa-tool-amber{background:rgba(245,158,11,.15)!important;border-color:rgba(245,158,11,.35)!important;color:var(--amber)!important}
.qa-tool-blue{background:rgba(59,130,246,.15)!important;border-color:rgba(59,130,246,.4)!important;color:rgba(147,197,253,.88)!important}
.quickadd .sb-footer{padding:10px 0 0;border-top:1px solid rgba(255,255,255,.05);margin-top:8px;font-size:10px}

/* ── MOBILE ─────────────────────────────────────────────── */
.m-topbar{display:none}
.bot-nav{display:none}

@media(max-width:820px){
  .m-topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:0 16px;height:52px;background:var(--sidebar);flex-shrink:0;
  }
  .m-brand{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:#fff}
  .m-brand span{color:var(--amber)}
  .topbar{display:none}
  .app{flex-direction:column}
  .main{overflow:auto;flex:1}
  .content{padding:14px 14px 90px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .two-col{grid-template-columns:minmax(0,1fr)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .hero{flex-direction:column}
  .hero-right{display:none}
  .bot-nav{
    display:block;position:fixed;bottom:0;left:0;right:0;
    background:var(--sidebar);border-top:1px solid rgba(255,255,255,.07);
    padding:6px 0 env(safe-area-inset-bottom,0);z-index:50;
  }
  .bot-nav-items{display:flex;justify-content:space-around}
  .bot-nav-item{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:5px 10px;color:rgba(255,255,255,.4);cursor:pointer;
    transition:color .14s;min-width:60px;
  }
  .bot-nav-item.active{color:var(--amber)}
  .bot-nav-item svg{width:22px;height:22px}
  .bnl{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600}
  .bot-nav-item.nav-locked{opacity:.3}
  .bot-nav-item.nav-locked:active{color:rgba(255,255,255,.4)}
}

/* ── AUTH — NAV ITEMS BLOQUEADOS ────────────────────────── */
.nav-lock-ico{
  width:13px;height:13px;margin-left:auto;flex-shrink:0;
  opacity:.35;display:none;
}
.nav-item.nav-locked .nav-lock-ico{display:block}
.nav-item.nav-locked{opacity:.42}
.nav-item.nav-locked:hover{
  background:none !important;
  color:rgba(255,255,255,.52) !important;
}

/* ── AUTH — SIDEBAR FOOTER ──────────────────────────────── */
.sb-auth-btn{
  width:100%;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.55);border-radius:8px;padding:7px 10px;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .14s;letter-spacing:.3px;
  display:flex;align-items:center;gap:6px;justify-content:center;
}
.sb-auth-btn:hover{background:rgba(255,255,255,.13);color:rgba(255,255,255,.85)}
.sb-coord-info{
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.22);
  border-radius:8px;padding:9px 11px;
}
.sb-coord-name{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  color:var(--amber);margin-bottom:5px;letter-spacing:.2px;
}
.sb-logout-btn{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;
  color:rgba(255,255,255,.3);cursor:pointer;letter-spacing:.3px;transition:color .14s;
}
.sb-logout-btn:hover{color:rgba(255,255,255,.65)}

/* ── AUTH — LOGIN MODAL ─────────────────────────────────── */
/* ── AUTH — BOTÓN MOBILE TOPBAR ─────────────────────────── */
.m-auth-btn{
  display:flex;align-items:center;gap:5px;
  padding:0 12px;height:34px;flex-shrink:0;
  background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.28);
  border-radius:99px;
  color:#fff;
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:700;
  cursor:pointer;transition:all .14s;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  min-width:72px;
}
.m-auth-btn:active{background:rgba(255,255,255,.24)}
.m-auth-btn--active{
  background:rgba(245,158,11,.28);
  border-color:rgba(245,158,11,.6);
  color:var(--amber);
}

.delivery-warning{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--amber-bg);border:1px solid #FDE68A;border-radius:var(--r-sm);
  padding:11px 14px;margin-bottom:18px;
  font-size:12px;color:#92400E;line-height:1.5;
}
.delivery-warning strong{font-weight:700}

.login-err{
  background:var(--red-bg);border:1px solid #FECACA;border-radius:var(--r-sm);
  padding:10px 13px;font-size:13px;color:var(--red);margin-bottom:14px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;
}

/* ── AUTH — RESTRICTED CARD ─────────────────────────────── */
.restricted-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 20px;color:var(--t4);text-align:center;gap:10px;
}
.restricted-card svg{width:28px;height:28px;opacity:.35}
.rc-title{
  font-family:'Space Grotesk',sans-serif;font-size:13px;
  font-weight:700;color:var(--t3);
}
.rc-sub{font-size:12px}

/* ── BARRA DE BÚSQUEDA — INVENTARIO ────────────────────── */
.inv-search-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.inv-search-row .inp-wrap{flex:1;min-width:0}
.inv-sort-btns{display:flex;gap:3px;flex-shrink:0}
.inv-sort-btn{
  height:36px;min-width:34px;padding:0 8px;
  border:1px solid var(--bdr);border-radius:var(--r-sm);
  background:var(--surface);color:var(--t3);
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  cursor:pointer;transition:all .14s;display:flex;align-items:center;justify-content:center;
}
.inv-sort-btn:hover{border-color:var(--amber);color:var(--amber)}
.inv-sort-btn.active{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.45);color:var(--amber)}
#inv-count{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
  color:var(--t4);white-space:nowrap;flex-shrink:0;
}

/* ── AUTOCOMPLETE DROPDOWN ──────────────────────────────── */
.sugg-list{
  position:absolute;top:100%;left:0;right:0;
  background:#fff;border:1.5px solid var(--bdr);border-radius:var(--r-sm);
  box-shadow:var(--sh-md);max-height:240px;overflow-y:auto;
  z-index:200;margin-top:3px;
}
.sugg-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;cursor:pointer;font-size:13px;
  border-bottom:1px solid var(--s2);transition:background .1s;
}
.sugg-item:last-child{border-bottom:none}
.sugg-item:hover,.sugg-item.sugg-item--active{background:var(--s2)}
.sugg-nombre{font-weight:500;color:var(--t1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugg-qty{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t4);flex-shrink:0;margin-left:10px}
.sugg-existing-badge{
  background:var(--grn-bg);border:1px solid #A7F3D0;border-radius:var(--r-sm);
  padding:10px 14px;font-size:13px;color:var(--green);font-weight:500;line-height:1.5;
}
.sugg-existing-badge strong{font-weight:700}

/* ── Quick-add en tarjeta de insumo ─────────────────────── */
.ic-quickadd{
  display:flex;gap:6px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--bdr);
}
.ic-qadd-inp{
  flex:1;min-width:0;padding:7px 10px;border:1px solid var(--bdr);
  border-radius:var(--r-sm);font-size:13px;font-family:'Space Grotesk',sans-serif;
  background:var(--s2);color:var(--t1);outline:none;transition:border-color .15s;
}
.ic-qadd-inp:focus{border-color:var(--green);background:#fff}
.ic-qadd-inp::placeholder{color:var(--t4);font-size:12px}
.ic-qadd-btn{
  flex-shrink:0;padding:7px 12px;border-radius:var(--r-sm);border:none;
  background:var(--green);color:#fff;font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;transition:opacity .15s;white-space:nowrap;
}
.ic-qadd-btn:hover{opacity:.85}
.ic-qadd-btn:active{opacity:.7}

/* ── INGRESOS — HISTORIAL DIARIO ─────────────────────────── */
.ing-empty{text-align:center;color:var(--t4);font-size:13px;padding:24px 0}

/* Página diary */
.ing-diary-wrap{display:flex;flex-direction:column;gap:20px;padding:4px}
.ing-diary-loading{color:var(--t4);font-size:13px;padding:24px 0;text-align:center}
.ing-diary-empty{
  display:flex;flex-direction:column;align-items:center;
  padding:60px 0;color:var(--t4);text-align:center;
}
.ing-diary-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;background:var(--surface);border:1px solid var(--bdr);
  border-radius:var(--r);box-shadow:var(--sh);
}
.ing-diary-header-title{
  font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:700;color:var(--t1);
}
.ing-diary-header-sub{font-size:12px;color:var(--t4);margin-top:3px}

/* Grid de tarjetas */
.ing-diary-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
}
.ing-diary-card{
  background:var(--surface);border:1px solid var(--bdr);border-radius:var(--r);
  padding:20px;box-shadow:var(--sh);cursor:pointer;
  transition:border-color .15s,transform .12s,box-shadow .15s;
}
.ing-diary-card:hover{
  border-color:rgba(245,158,11,.4);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.ing-diary-card-today{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.03)}

/* Cabecera de la tarjeta */
.idc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.idc-date-block{}
.idc-dayname{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.7px;color:var(--t4);
  display:flex;align-items:center;gap:6px;margin-bottom:2px;
}
.idc-datenum{
  font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:800;
  color:var(--t1);line-height:1;
}
.ing-diary-card-today .idc-datenum{color:var(--amber)}
.idc-total-block{text-align:right}
.idc-total{
  font-family:'Space Grotesk',sans-serif;font-size:1.6rem;font-weight:800;
  color:var(--green);line-height:1;
}
.idc-total-lbl{font-size:10px;color:var(--t4);margin-top:2px;text-align:right}
.idc-meta{font-size:11px;color:var(--t4);margin-bottom:12px}

/* Top 3 ítems dentro de la tarjeta */
.idc-top3{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.idc-item{display:flex;align-items:center;gap:7px}
.idc-item-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.idc-item-name{
  flex:1;font-size:12px;color:var(--t2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.idc-item-qty{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--green);flex-shrink:0}
.idc-foot{font-size:11px;color:var(--amber);font-weight:600;text-align:right}

/* Badges de día */
.ing-day-badge{
  display:inline-block;padding:1px 7px;border-radius:20px;font-size:9px;
  font-weight:700;letter-spacing:.4px;text-transform:uppercase;
}
.ing-day-badge-today{background:rgba(245,158,11,.18);color:var(--amber);border:1px solid rgba(245,158,11,.35)}
.ing-day-badge-ayer{background:rgba(129,140,248,.15);color:#818cf8;border:1px solid rgba(129,140,248,.3)}

/* ── MODAL DETALLE DEL DÍA ───────────────────────────────── */
.idm-box{
  background:var(--sidebar);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;width:min(94vw,960px);
  max-height:92vh;display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:hidden;
}
.idm-hero{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:24px 24px 20px;
  background:linear-gradient(135deg,rgba(245,158,11,.1) 0%,transparent 60%);
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.idm-hero-left{}
.idm-hero-day{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;
  color:rgba(255,255,255,.4);display:flex;align-items:center;gap:8px;margin-bottom:4px;
}
.idm-badge{
  display:inline-block;padding:2px 8px;border-radius:20px;font-size:9px;
  font-weight:700;letter-spacing:.4px;
  background:rgba(245,158,11,.2);color:var(--amber);border:1px solid rgba(245,158,11,.4);
}
.idm-hero-date{
  font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;
  color:#fff;line-height:1.1;margin-bottom:10px;
}
.idm-hero-cats{display:flex;flex-wrap:wrap;gap:5px}
.idm-cat-pill{
  font-size:10px;font-weight:600;padding:2px 9px;border-radius:20px;
  border:1px solid transparent;
}
.idm-hero-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.idm-export-btn{
  display:flex;align-items:center;gap:5px;padding:6px 13px;
  border-radius:8px;background:rgba(52,211,153,.1);
  border:1px solid rgba(52,211,153,.28);color:#34d399;
  font-size:11px;font-weight:700;letter-spacing:.3px;cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.idm-export-btn:hover{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.5)}
.idm-close{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .14s;
}
.idm-close:hover{background:rgba(255,255,255,.12);color:#fff}

.idm-stats-row{
  display:flex;align-items:center;padding:16px 24px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.07);gap:0;
}
.idm-stat{flex:1;text-align:center}
.idm-stat-n{
  font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;
  color:var(--amber);line-height:1;
}
.idm-stat-l{font-size:10px;color:rgba(255,255,255,.3);margin-top:3px;letter-spacing:.3px}
.idm-stat-div{width:1px;background:rgba(255,255,255,.08);height:32px;flex-shrink:0}

.idm-body{
  flex:1;overflow-y:auto;padding:20px 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:0 36px;align-items:start;
}
.idm-body > .idm-section:only-child{grid-column:1/-1}
@media(max-width:660px){.idm-body{grid-template-columns:1fr}}
.idm-section-title{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.9px;text-transform:uppercase;color:rgba(255,255,255,.28);
  margin-bottom:12px;
}
/* Barras de lo más ingresado */
.idm-bars{display:flex;flex-direction:column;gap:10px}
.idm-bar-row{display:flex;align-items:center;gap:10px}
.idm-bar-rank{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.2);
  font-family:'Space Grotesk',sans-serif;font-size:9px;font-weight:700;
  color:var(--amber);display:flex;align-items:center;justify-content:center;
}
.idm-bar-info{flex:1;min-width:0}
.idm-bar-name{
  font-size:13px;font-weight:600;color:rgba(255,255,255,.82);
  margin-bottom:5px;line-height:1.35;
}
.idm-bar-track{
  height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;
}
.idm-bar-fill{height:100%;border-radius:3px;transition:width .5s ease}
.idm-bar-qty{
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
  white-space:nowrap;flex-shrink:0;min-width:44px;text-align:right;
}
/* Timeline */
.idm-timeline{display:flex;flex-direction:column;gap:0}
.idm-tl-row{
  display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.idm-tl-row:last-child{border-bottom:none}
.idm-tl-time{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.28);flex-shrink:0;width:42px;padding-top:2px;
}
.idm-tl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px}
.idm-tl-info{flex:1;min-width:0}
.idm-tl-name{
  font-size:13px;font-weight:600;color:rgba(255,255,255,.82);
  line-height:1.35;
}
.idm-tl-cat{font-size:10px;color:rgba(255,255,255,.28);margin-top:2px;text-transform:capitalize}
.idm-tl-qty{
  font-family:'JetBrains Mono',monospace;font-size:13px;
  font-weight:700;color:var(--green);flex-shrink:0;padding-top:2px;
}
.idm-tl-del{
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.18);padding:3px 5px;
  border-radius:5px;flex-shrink:0;
  transition:color .15s,background .15s;line-height:1;
}
.idm-tl-del:hover{color:#f87171;background:rgba(248,113,113,.12)}
.idm-edit-hint{font-size:10px;font-weight:400;color:rgba(255,255,255,.25);margin-left:6px}
.idm-del-form{
  display:flex;align-items:center;gap:7px;flex:1;flex-wrap:wrap;padding:4px 0;
}
.idm-del-lbl{font-size:11px;color:rgba(255,255,255,.45);flex-shrink:0;white-space:nowrap}
.idm-del-lbl strong{color:rgba(255,255,255,.75)}
.idm-del-input{
  width:62px;padding:4px 6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:5px;color:#fff;font-size:12px;font-family:inherit;text-align:center;
}
.idm-del-input:focus{outline:none;border-color:rgba(248,113,113,.55)}
.idm-del-of{font-size:11px;color:rgba(255,255,255,.28);flex-shrink:0}
.idm-del-ok{
  padding:4px 11px;background:#f87171;color:#fff;
  border:none;border-radius:5px;font-size:11px;font-weight:600;
  cursor:pointer;flex-shrink:0;
}
.idm-del-ok:hover{background:#ef4444}
.idm-del-ok:disabled{opacity:.5;cursor:default}
.idm-del-cancel{
  background:none;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.38);
  border-radius:5px;padding:4px 9px;font-size:11px;cursor:pointer;flex-shrink:0;
}
.idm-del-cancel:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.65)}

/* ── ESTADÍSTICAS ─────────────────────────────────────────── */
.stats-wrap{display:flex;flex-direction:column;gap:20px}

.stats-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:700px){.stats-cards{grid-template-columns:repeat(2,1fr)}}

.stats-section-label{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.9px;text-transform:uppercase;color:var(--t4);
  margin-bottom:10px;
}
.stat-card{
  border-radius:var(--r);padding:20px 18px;border:1px solid var(--bdr);
  text-align:center;background:var(--surface);box-shadow:var(--sh);
}
.stat-card-num{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:800;line-height:1}
.stat-card-lbl{font-size:12px;color:var(--t3);margin-top:4px;font-weight:500}
.stat-card-sub{font-size:10px;color:var(--t4);margin-top:3px}
.stat-card-ok   .stat-card-num{color:var(--green)}
.stat-card-warn .stat-card-num{color:var(--amber)}
.stat-card-crit .stat-card-num{color:var(--red)}
.stat-card-total .stat-card-num{color:var(--blue)}
/* Actividad por día */
.stats-day-list{display:flex;flex-direction:column;gap:9px}
.stats-day-row{display:flex;align-items:center;gap:10px}
.stats-day-label{
  font-size:12px;color:var(--t3);font-weight:500;
  width:36px;flex-shrink:0;text-align:right;
}
.stats-day-today{color:var(--amber);font-weight:700}
.stats-day-val{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  font-weight:700;color:var(--t1);white-space:nowrap;flex-shrink:0;
  min-width:52px;text-align:right;
}

.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:860px){.stats-grid{grid-template-columns:1fr}}

.stats-panel{
  background:var(--surface);border:1px solid var(--bdr);
  border-radius:var(--r);padding:22px;box-shadow:var(--sh);
}
.stats-panel-full{grid-column:1/-1}
.stats-panel-title{
  display:flex;align-items:center;gap:8px;
  font-family:'Space Grotesk',sans-serif;font-size:.95rem;font-weight:700;
  color:var(--t1);margin-bottom:18px;
}
.stats-panel-title small{color:var(--t4);font-size:11px;font-weight:400;margin-left:auto}

.stat-bar-row{margin-bottom:14px}
.stat-bar-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.stat-bar-name{font-size:12px;color:var(--t2);font-weight:500;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-bar-val{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--t1);font-weight:700;flex-shrink:0;margin-left:8px}
.stat-bar-track{height:10px;background:var(--s2);border-radius:99px;overflow:hidden}
.stat-bar-fill{height:100%;border-radius:99px;transition:width .4s ease}
.stat-bar-sub{font-size:11px;color:var(--t4);margin-top:3px}

.stats-cat-grid{display:flex;flex-direction:column;gap:12px}
.stats-cat-row{display:grid;grid-template-columns:160px 1fr 70px;align-items:center;gap:12px}
@media(max-width:600px){.stats-cat-row{grid-template-columns:120px 1fr 50px}}
.stats-cat-info{display:flex;align-items:center;gap:10px}
.stats-cat-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.stats-cat-name{font-size:13px;font-weight:600;color:var(--t1)}
.stats-cat-sub{font-size:11px;color:var(--t4)}
.stats-cat-bar-wrap{flex:1}
.stats-cat-num{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--t1);text-align:right}