/* ═══════════════════════════════════════════════════════════════════════
   TopePizza Escandallos — Holded-style Professional UI
   Rediseño: fondo neutro, tipografía limpia, cards aireadas.
   Identidad: sidebar oscuro marrón + amarillo TopePizza.
   ═══════════════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* ── Brand TopePizza ── */
  --tp-amarillo:#F1C400;
  --tp-marron:#5C4A1E;
  --tp-marron-dark:#1E1708;
  --tp-marron-mid:#332810;
  --tp-verde:#D4C304;
  --tp-cream:#FAF7EE;

  /* ── Semantic colors ── */
  --red:#DC3545;
  --green:#28A745;
  --yellow:#F1C400;
  --orange:#E8890C;
  --blue:#4A90D9;

  /* ── UI tokens (Holded-style) ── */
  --primary:#F1C400;
  --bg:#F4F5F7;
  --bg2:#ECEDF0;
  --white:#FFFFFF;
  --gray:#6B7280;
  --gray-dark:#374151;
  --light:#E5E7EB;
  --border:#D1D5DB;
  --text:#111827;
  --text-secondary:#6B7280;

  /* ── Layout ── */
  --sb-w:230px;
  --sb-cw:56px;
  --radius:8px;
  --radius-lg:12px;

  /* ── Phase 2 semantic ── */
  --clr-ok:#059669;
  --clr-danger:#DC3545;
  --clr-warn:#D97706;
  --clr-info:#2563EB;
  --clr-text2:#374151
}

body{
  font-family:'Inter','Oxygen',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  display:flex;min-height:100vh;font-size:14px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}

/* ═══════════ SIDEBAR ═══════════ */
#sidebar{
  width:var(--sb-w);background:var(--tp-marron-dark);color:#fff;
  position:fixed;top:0;left:0;height:100vh;z-index:100;
  overflow:hidden;display:flex;flex-direction:column;
  border-right:1px solid rgba(241,196,0,.08);
  transition:width .22s cubic-bezier(.4,0,.2,1)
}
#sidebar.collapsed{width:var(--sb-cw)}

/* Logo */
.slogo{
  padding:18px 14px 16px;border-bottom:1px solid rgba(241,196,0,.12);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex-shrink:0;overflow:hidden;transition:.22s
}
.slogo img{width:72px;height:72px;object-fit:contain;display:block;flex-shrink:0;transition:.22s}
.slogo-txt{text-align:center;overflow:hidden;white-space:nowrap;transition:opacity .15s,max-height .22s;max-height:40px;opacity:1}
#sidebar.collapsed .slogo img{width:32px;height:32px}
#sidebar.collapsed .slogo-txt{opacity:0;max-height:0}
#sidebar.collapsed .slogo{padding:12px 0}

.stxt{font-weight:700;font-size:15px;color:var(--tp-amarillo)}
.ssub{font-size:9px;color:rgba(241,196,0,.35);text-transform:uppercase;letter-spacing:.1em}

/* Nav sections */
.nsec{
  padding:16px 18px 5px;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;color:rgba(241,196,0,.25);white-space:nowrap;overflow:hidden;
  transition:opacity .15s,max-height .22s;max-height:30px;opacity:1
}
#sidebar.collapsed .nsec{opacity:0;max-height:0;padding:0}

/* Nav items */
.ni{
  display:flex;align-items:center;gap:11px;
  padding:10px 18px;cursor:pointer;
  color:rgba(255,255,255,.5);font-size:13px;font-weight:500;
  transition:background .12s,color .12s;
  border-left:3px solid transparent;margin:1px 0;
  white-space:nowrap;overflow:hidden
}
.ni:hover{background:rgba(241,196,0,.07);color:rgba(255,255,255,.85)}
.ni.active{background:rgba(241,196,0,.1);color:var(--tp-amarillo);border-left-color:var(--tp-amarillo);font-weight:700}
.ni-icon{font-size:16px;flex-shrink:0;width:20px;text-align:center;line-height:1}
.ni-txt{transition:opacity .15s;overflow:hidden}
#sidebar.collapsed .ni{padding:11px 0;justify-content:center;border-left-color:transparent!important}
#sidebar.collapsed .ni.active{background:rgba(241,196,0,.1)}
#sidebar.collapsed .ni-txt{opacity:0;width:0}

/* Footer / toggle */
.sver{
  padding:12px 18px;margin-top:auto;border-top:1px solid rgba(241,196,0,.08);
  font-size:10px;color:rgba(241,196,0,.18);text-align:center;white-space:nowrap;
  overflow:hidden;transition:opacity .15s;flex-shrink:0
}
#sidebar.collapsed .sver{opacity:0;height:0;padding:0}
.stgl{
  width:100%;padding:10px 0;background:rgba(241,196,0,.04);border:none;
  border-top:1px solid rgba(241,196,0,.08);cursor:pointer;
  color:rgba(241,196,0,.4);font-size:18px;line-height:1;
  transition:.15s;flex-shrink:0;display:flex;align-items:center;justify-content:center
}
.stgl:hover{background:rgba(241,196,0,.1);color:var(--tp-amarillo)}
#sidebar.collapsed .stgl{font-size:16px}

/* ═══════════ MAIN ═══════════ */
#main{margin-left:var(--sb-w);flex:1;display:flex;flex-direction:column;transition:margin-left .22s cubic-bezier(.4,0,.2,1)}
#sidebar.collapsed ~ #sbOv ~ #main,
body.sb-collapsed #main{margin-left:var(--sb-cw)}

/* Topbar — limpia, sin borde amarillo grueso */
.tbar{
  background:var(--white);border-bottom:1px solid var(--border);
  padding:12px 24px;display:flex;align-items:center;
  justify-content:space-between;position:sticky;top:0;z-index:50;
  gap:12px;box-shadow:0 1px 3px rgba(0,0,0,.04)
}
.tbar h1{font-size:15px;font-weight:700;color:var(--text)}
.tsub{font-size:11px;color:var(--text-secondary);font-style:normal;margin-top:1px}
.tright{display:flex;align-items:center;gap:8px}

/* Hamburger (mobile) */
.hmb{
  display:none;background:none;border:none;cursor:pointer;
  padding:6px;border-radius:var(--radius);color:var(--text);margin-right:4px;flex-shrink:0
}
.hmb:hover{background:var(--bg2)}
.hbl{display:block;width:20px;height:2px;background:currentColor;margin:4px 0;border-radius:2px;transition:.2s}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  padding:7px 14px;border-radius:var(--radius);border:none;cursor:pointer;
  font-size:12px;font-weight:600;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px;transition:.15s;
  text-transform:none;letter-spacing:0
}
.bp{background:var(--tp-amarillo);color:var(--tp-marron-dark)}
.bp:hover{background:#E6BA00;box-shadow:0 2px 8px rgba(241,196,0,.3)}
.bs{background:var(--white);color:var(--text);border:1px solid var(--border)}
.bs:hover{background:var(--bg);border-color:var(--gray)}
.bsm{padding:5px 10px;font-size:11px}
.bi{
  padding:4px 8px;font-size:13px;background:transparent;
  border:1px solid var(--border);color:var(--text-secondary);
  border-radius:6px;cursor:pointer;transition:.12s
}
.bi:hover{background:var(--tp-amarillo);border-color:var(--tp-amarillo);color:var(--tp-marron-dark)}

/* ═══════════ CONTENT ═══════════ */
.content{padding:20px 24px;flex:1;max-width:1400px}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}

/* ═══════════ CARDS ═══════════ */
.card{
  background:var(--white);border-radius:var(--radius-lg);padding:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);border:1px solid var(--border);
  margin-bottom:14px
}
.ki{width:38px;height:38px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:8px}
.kr{background:rgba(220,53,69,.08)}.kg{background:rgba(40,167,69,.08)}.kb{background:rgba(74,144,217,.08)}.ko{background:rgba(232,137,12,.08)}
.kl{font-size:10px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.kv{font-size:24px;font-weight:700;line-height:1.1;margin:2px 0;color:var(--text)}
.ks{font-size:11px;color:var(--text-secondary)}

/* ═══════════ GRIDS ═══════════ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.g3{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:20px}
.ct{font-size:12px;font-weight:700;margin-bottom:12px;color:var(--text);display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;letter-spacing:.04em}
.ch{position:relative;height:200px}

/* ═══════════ LISTS ═══════════ */
.tpi{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--light)}
.tpi:last-child{border-bottom:none}
.tpn{font-size:13px;font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.tps{font-size:11px;color:var(--text-secondary)}

/* ═══════════ SEARCH / FILTERS ═══════════ */
.sb{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sw{position:relative}
.si{
  padding:7px 10px 7px 28px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:13px;width:220px;background:var(--white);font-family:inherit;color:var(--text)
}
.si:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(241,196,0,.15)}
.fs{
  padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:12px;background:var(--white);cursor:pointer;
  font-family:inherit;color:var(--text)
}
.fs:focus{outline:none;border-color:var(--primary)}

/* ═══════════ TABLE ═══════════ */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-secondary);padding:9px 12px;border-bottom:2px solid var(--light);
  white-space:nowrap;text-align:left;background:var(--bg)
}
td{
  padding:9px 12px;border-bottom:1px solid var(--light);
  font-size:13px;vertical-align:middle;color:var(--text)
}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(0,0,0,.015)}
.tr2{text-align:right}.tc2{text-align:center}

/* ═══════════ BADGES ═══════════ */
.bk{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.bkg{background:rgba(40,167,69,.1);color:#166534}
.bky{background:rgba(241,196,0,.15);color:#92400E}
.bkr{background:rgba(220,53,69,.08);color:#991B1B}
.bkb{background:rgba(74,144,217,.1);color:#1E40AF}
.bkgr{background:var(--bg2);color:var(--text-secondary)}

/* ═══════════ TABS ═══════════ */
.tbs{display:flex;gap:2px;background:var(--bg2);padding:3px;border-radius:var(--radius);width:fit-content;margin-bottom:14px;border:1px solid var(--border)}
.tb{
  padding:6px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;
  color:var(--text-secondary);border:none;background:transparent;transition:.12s;
  font-family:inherit
}
.tb.active{background:var(--white);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tb:hover:not(.active){background:rgba(0,0,0,.04)}

/* ═══════════ MODAL ═══════════ */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.18s;backdrop-filter:blur(2px)}
.mo.open{opacity:1;pointer-events:all}
.md{background:var(--white);border-radius:var(--radius-lg);width:520px;max-width:95vw;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);transform:translateY(8px);transition:.18s}
.mo.open .md{transform:translateY(0)}
.mhd{padding:18px 22px 14px;border-bottom:1px solid var(--light);display:flex;align-items:center;justify-content:space-between}
.mhd h3{font-size:15px;font-weight:700;color:var(--text)}
.mxb{background:none;border:none;font-size:19px;cursor:pointer;color:var(--text-secondary);line-height:1;padding:2px 6px;transition:.12s;border-radius:4px}
.mxb:hover{background:var(--bg2);color:var(--text)}
.mbd{padding:18px 22px}
.mft{padding:14px 22px;border-top:1px solid var(--light);display:flex;justify-content:flex-end;gap:8px;background:var(--bg)}

/* ═══════════ FORMS ═══════════ */
.fg2{margin-bottom:14px}
.fl2{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.fi2{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;font-family:inherit;background:var(--white);color:var(--text);transition:border .15s,box-shadow .15s}
.fi2:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(241,196,0,.15)}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ═══════════ DETAIL ═══════════ */
.ri{background:var(--bg);border-radius:var(--radius);padding:14px;border:1px solid var(--border)}
.rl{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--light);font-size:13px}
.rl:last-child{border-bottom:none}
.rtot{display:flex;justify-content:space-between;padding:10px 0;font-size:14px;font-weight:700;border-top:2px solid var(--primary);margin-top:4px;color:var(--text)}

/* ═══════════ PROGRESS ═══════════ */
.pb{height:6px;background:var(--light);border-radius:10px;overflow:hidden;margin-top:5px}
.pf{height:100%;border-radius:10px}

/* ═══════════ ALERTS ═══════════ */
.alrt{padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:14px;background:rgba(241,196,0,.06);border:1px solid rgba(241,196,0,.2);color:var(--text)}
#errbox{position:fixed;bottom:18px;right:18px;background:#1E293B;color:#F87171;padding:12px 16px;border-radius:var(--radius);font-size:12px;max-width:400px;z-index:999;display:none;white-space:pre-wrap}

/* ═══════════ OVERLAY (mobile) ═══════════ */
#sbOv{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99}
#sbOv.show{display:block}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1100px){.cgrid{grid-template-columns:1fr 1fr}.an-kpi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}}
@media(max-width:768px){
  :root{--sb-w:0px}
  .hmb{display:flex;flex-direction:column;justify-content:center}
  #sidebar{transform:translateX(-100%);transition:transform .25s,width .25s;z-index:200;width:240px!important}
  #sidebar.mob-open{transform:translateX(0)}
  #main{margin-left:0!important}
  .content{padding:14px 16px}
  .tbar{padding:10px 14px}
  .tbar h1{font-size:14px}
  .md{width:97vw!important;max-height:93vh!important}
  .fr2{grid-template-columns:1fr!important}
  .tright .fs{display:none}
  .stgl{display:none}
}
@media(max-width:480px){.cgrid{grid-template-columns:1fr!important}.an-kpi-grid{grid-template-columns:1fr!important}}

/* ═══════════ TOAST SYSTEM ═══════════ */
#toast-rack{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:300px}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,.12);pointer-events:all;animation:tIn .2s ease,tOut .4s ease 3.6s forwards;border-left:4px solid transparent;background:var(--white);line-height:1.4;word-break:break-word}
.toast-icon{flex-shrink:0;font-size:15px;margin-top:1px}
.toast.ok{border-left-color:var(--clr-ok);color:#065F46}
.toast.err{border-left-color:var(--clr-danger);color:#991B1B}
.toast.warn{border-left-color:var(--clr-warn);color:#92400E}
.toast.info{border-left-color:var(--clr-info);color:#1E3A5F}
@keyframes tIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes tOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}

/* ═══════════ FIELD ERRORS ═══════════ */
.field-err{font-size:11px;color:var(--clr-danger);margin-top:3px;display:none;font-weight:600}
.fi2.is-err{border-color:var(--clr-danger)!important;box-shadow:0 0 0 3px rgba(220,53,69,.1)!important}

/* ═══════════ INPUT GROUP ═══════════ */
.inp-grp{display:flex;align-items:stretch;min-width:0}
.inp-grp .fi2{border-radius:var(--radius) 0 0 var(--radius)!important;flex:1;min-width:0;border-right:none!important}
.inp-grp-suf{background:var(--bg);border:1px solid var(--border);border-left:none;border-radius:0 var(--radius) var(--radius) 0;padding:0 10px;font-size:11px;color:var(--text-secondary);display:flex;align-items:center;white-space:nowrap;flex-shrink:0;font-weight:600}

/* ═══════════ INGREDIENT ROW (recipe modal) ═══════════ */
.ring-row{display:grid;grid-template-columns:1.8fr 90px 70px 55px 24px;gap:6px;align-items:center;margin-bottom:3px;padding:8px 10px;background:var(--bg);border-radius:var(--radius);transition:.12s;border:1px solid transparent}
.ri-ac{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7280'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 7px) center;padding-right:22px!important}
.ring-row:hover{border-color:var(--border);background:var(--bg2)}
.ring-cost{font-size:11px;font-weight:700;color:var(--text);text-align:right;white-space:nowrap;min-width:46px}
.ring-cost.zero{color:var(--light)}
.ring-hdr{display:grid;grid-template-columns:1.8fr 90px 70px 55px 24px;gap:6px;padding:2px 10px;margin-bottom:2px}
.ring-hdr span{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}

/* ═══════════ STICKY COST BAR (recipe modal footer) ═══════════ */
.scb{position:sticky;bottom:-18px;background:var(--tp-marron-dark);color:#fff;margin:16px -22px -18px;padding:14px 22px;display:flex;align-items:center;flex-wrap:wrap;border-radius:0 0 var(--radius-lg) var(--radius-lg);z-index:10;border-top:2px solid var(--tp-amarillo);gap:4px}
.scb-item{display:flex;flex-direction:column;align-items:center;padding:4px 18px;border-right:1px solid rgba(255,255,255,.12)}
.scb-item:last-child{border-right:none;margin-left:auto}
.scb-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.06em;opacity:.55;font-weight:600;margin-bottom:2px}
.scb-val{font-size:15px;font-weight:700;color:var(--tp-amarillo);white-space:nowrap}
.scb-val.ok{color:#34D399}.scb-val.warn{color:#FBBF24}.scb-val.err{color:#F87171}

/* ═══════════ MODAL WIDER ═══════════ */
.md.md-wide{width:700px}

/* ═══════════ ALERT INFO ═══════════ */
.alrt-info{background:rgba(37,99,235,.06);border-left:3px solid var(--clr-info);border-radius:0 var(--radius) var(--radius) 0;padding:10px 14px;font-size:13px;color:#1E3A5F;margin-bottom:14px}

/* ═══════════ LOGIN ═══════════ */
#login-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:var(--tp-marron-dark);
  display:none;align-items:center;justify-content:center;
  z-index:10000;flex-direction:column;gap:0
}
.login-box{
  background:var(--white);border-radius:var(--radius-lg);padding:40px 44px;width:360px;
  box-shadow:0 10px 50px rgba(0,0,0,.35)
}
.login-logo{text-align:center;margin-bottom:26px}
.login-logo img{width:72px;height:72px;object-fit:contain}
.login-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px;text-align:center}
.login-sub{font-size:12px;color:var(--text-secondary);text-align:center;margin-bottom:24px}
.login-lbl{font-size:12px;font-weight:600;color:var(--text);display:block;margin-bottom:5px}
.login-inp{
  width:100%;border:1.5px solid var(--border);border-radius:var(--radius);padding:10px 14px;
  font-size:14px;font-family:inherit;outline:none;transition:border .18s;margin-bottom:16px
}
.login-inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(241,196,0,.15)}
.login-btn{
  width:100%;background:var(--tp-marron-dark);color:var(--tp-amarillo);
  border:none;border-radius:var(--radius);padding:12px;font-size:14px;font-weight:700;
  cursor:pointer;transition:background .18s;font-family:inherit;margin-top:4px
}
.login-btn:hover{background:var(--tp-marron)}
.login-btn:disabled{opacity:.6;cursor:default}
.login-err{font-size:12px;color:var(--red);text-align:center;margin-top:8px;min-height:18px}

/* ═══════════ LOADING ═══════════ */
#loading-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.7);display:none;
  align-items:center;justify-content:center;z-index:9998;
  flex-direction:column;gap:14px;backdrop-filter:blur(4px)
}
.loading-spinner{
  width:44px;height:44px;border:4px solid rgba(241,196,0,.2);
  border-top-color:var(--tp-amarillo);border-radius:50%;
  animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-txt{color:var(--tp-amarillo);font-size:14px;font-weight:700;letter-spacing:.05em}

/* ═══════════ MISC BADGES ═══════════ */
.confirmed-banner{background:rgba(40,167,69,.08);border:1px solid rgba(40,167,69,.2);border-radius:var(--radius);padding:8px 14px;margin-bottom:12px;font-size:12px;color:#166534}
.tamano-masa-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ═══════════ ANALYTICS ═══════════ */
.an-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.an-kpi{background:var(--white);border-radius:var(--radius-lg);padding:16px 18px;border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.an-kpi-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin-bottom:4px}
.an-kpi-val{font-size:22px;font-weight:700;color:var(--text)}
.an-kpi-sub{font-size:11px;color:var(--text-secondary);margin-top:2px}
.an-tbl-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:4px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--light);font-size:13px}
.an-tbl-row:last-child{border-bottom:none}
.an-tbl-hdr{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);background:var(--bg);border-radius:var(--radius) var(--radius) 0 0;padding:7px 12px}
.an-bar-wrap{background:var(--light);border-radius:4px;height:6px;overflow:hidden}
.an-bar-fill{height:100%;border-radius:4px;transition:width .3s}
.canal-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600}
.canal-r{background:rgba(74,144,217,.1);color:#1E40AF}
.canal-d{background:rgba(232,137,12,.1);color:#92400E}
.canal-a{background:rgba(40,167,69,.1);color:#166534}