/* Shell do painel admin e do painel da loja (opção A, 2026-10-03).
   Tokens semânticos no padrão Astryx. Os nomes antigos (--red, --bg, --r...) são alias,
   então páginas que ainda os citam continuam funcionando. Nunca cite hex fora deste bloco. */
:root {
  /* marca e estado */
  --color-accent:            #CE1A28;
  --color-accent-strong:     #E62A39;
  --color-accent-soft:       #FDECEE;
  --color-success:           #2E7D32;
  --color-success-soft:      #E8F5E9;
  --color-warning:           #B26A00;
  --color-warning-soft:      #FFF4E0;
  --color-error:             #C1352B;
  --color-info:              #1C52A2;
  --color-info-soft:         #E3ECF8;
  --color-gold:              #B8860B;
  --color-gold-soft:         #FDF6E0;
  --color-purple:            #7C3AED;
  --color-purple-soft:       #EDE9FE;
  --color-cyan:              #0891B2;
  --color-cyan-soft:         #E0F2FE;
  /* fundo */
  --color-background-body:     #F4F5F7;
  --color-background-surface:  #FFFFFF;
  --color-background-card:     #FFFFFF;
  --color-background-muted:    #EEF0F3;
  --color-background-inverted: #242631;
  --color-background-inverted-2:#1A1C23;
  /* texto */
  --color-text-primary:    #1B1D24;
  --color-text-secondary:  #5F6470;
  --color-text-disabled:   #9AA0AB;
  --color-text-on-inverted:#F2F3F5;
  --color-text-on-inverted-muted:#9DA3B0;
  --color-text-on-accent:  #FFFFFF;
  /* borda */
  --color-border:            #E6E8EC;
  --color-border-emphasized: #CFD3DA;
  --color-border-inverted:   rgba(255,255,255,.08);
  /* espaço, raio, sombra, tamanho, tipo */
  --spacing-1:2px; --spacing-2:4px; --spacing-3:8px; --spacing-4:12px; --spacing-5:16px;
  --spacing-6:20px; --spacing-7:24px; --spacing-8:28px; --spacing-9:32px; --spacing-12:48px;
  --radius-inner:8px; --radius-element:10px; --radius-container:14px; --radius-page:24px;
  --shadow-low:0 1px 2px rgba(17,17,19,.06); --shadow-med:0 4px 14px rgba(17,17,19,.08); --shadow-high:0 12px 32px rgba(17,17,19,.16);
  --size-element-sm:28px; --size-element-md:34px; --size-element-lg:40px;
  --size-sidebar:236px; --size-topbar:56px; --size-bottomnav:60px;
  --font-family-body:'Inter','Segoe UI',Roboto,Helvetica,-apple-system,sans-serif;
  --text-body-size:13.5px; --text-label-size:11px; --text-heading-3-size:15px; --text-heading-2-size:18px; --text-heading-1-size:22px; --text-display-size:26px;

  /* alias legados */
  --red:var(--color-accent); --red2:var(--color-accent-strong);
  --gradient:linear-gradient(135deg,var(--color-accent-strong) 0%,var(--color-accent) 100%);
  --bg:var(--color-background-body); --white:var(--color-background-surface);
  --sidebar-bg:var(--color-background-inverted); --dark-bg:var(--color-background-inverted-2);
  --text:var(--color-text-primary); --muted:var(--color-text-secondary); --light-muted:var(--color-text-disabled);
  --border:var(--color-border); --blue:var(--color-info); --gold:var(--color-gold); --green:var(--color-success);
  --green-bg:var(--color-success-soft); --orange:var(--color-warning); --purp:var(--color-purple); --cyan:var(--color-cyan);
  --r:var(--radius-element); --rr:var(--radius-container); --sbw:var(--size-sidebar);
  --shadow:var(--shadow-low); --shadow-md:var(--shadow-med); --gray:var(--color-text-secondary);
}
/* Modo escuro só quando a página pedir (<html data-theme="dark">): o padrão do Elton é claro com sidebar grafite. */
:root[data-theme="dark"] {
  --color-background-body:#111216; --color-background-surface:#1A1C23; --color-background-card:#1A1C23; --color-background-muted:#23262E;
  --color-background-inverted:#0C0D11; --color-background-inverted-2:#08090C;
  --color-text-primary:#F2F3F5; --color-text-secondary:#A3A8B3; --color-text-disabled:#6B7078;
  --color-border:#2A2D36; --color-border-emphasized:#3C404B;
  --color-accent-soft:#3A1418; --color-success-soft:#143A1C; --color-warning-soft:#3A2A0C; --color-info-soft:#13233F; --color-gold-soft:#3A2F0C; --color-purple-soft:#2A1A4A; --color-cyan-soft:#0C2A3A;
  color-scheme:dark;
}

* { margin:0; padding:0; box-sizing:border-box; }
dialog { margin:auto; } /* o reset acima tirava a centralização nativa do <dialog> */
html, body { min-height:100%; background:var(--color-background-body); color:var(--color-text-primary); font:400 var(--text-body-size)/1.5 var(--font-family-body); }
body { -webkit-font-smoothing:antialiased; }
a { color:inherit; }
::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-thumb { background:var(--color-border-emphasized); border-radius:3px; }
h1,h2,h3,h4 { text-wrap:balance; }

/* ── SIDEBAR ── */
.sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:199; }
.sb-overlay.open, .sb-overlay.active { display:block; }
.sidebar {
  position:fixed; top:0; left:0; width:var(--size-sidebar); height:100vh; height:100dvh;
  background:var(--color-background-inverted); color:var(--color-text-on-inverted);
  display:flex; flex-direction:column; z-index:200; transition:transform .25s ease;
  padding:var(--spacing-4); gap:var(--spacing-1); overflow-y:auto;
}
.sb-logo { display:flex; align-items:center; gap:var(--spacing-3); padding:var(--spacing-3) var(--spacing-3) var(--spacing-5); text-decoration:none; color:inherit; }
.pokeball { width:32px; height:32px; border-radius:50%; background:conic-gradient(var(--color-accent) 0 50%, #fff 50%); position:relative; flex-shrink:0; transform:rotate(-90deg); }
.pokeball::after { content:''; position:absolute; inset:36%; background:var(--color-background-inverted-2); border-radius:50%; border:2px solid rgba(255,255,255,.4); }
.sb-logo-txt h2 { font-size:12.5px; font-weight:800; letter-spacing:.06em; line-height:1.25; }
.sb-logo-txt span { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-on-inverted-muted); }
.sb-sec { padding:var(--spacing-4) var(--spacing-3) var(--spacing-2); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-on-inverted-muted); opacity:.8; }
.sb-nav { list-style:none; display:flex; flex-direction:column; gap:var(--spacing-1); }
.sb-nav a, .sb-a {
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-element);
  color:var(--color-text-on-inverted); opacity:.82; text-decoration:none; font-size:13px; font-weight:500; transition:background .15s, opacity .15s;
}
.sb-nav a i, .sb-a i { width:16px; text-align:center; font-size:13px; }
.sb-nav a:hover, .sb-a:hover { background:rgba(255,255,255,.06); opacity:1; }
.sb-nav a.active, .sb-a.active { background:var(--color-accent); color:var(--color-text-on-accent); opacity:1; font-weight:700; }
.sb-n, .sb-bdg { margin-left:auto; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--color-accent); color:#fff; line-height:1.5; }
.sb-nav a.active .sb-n, .sb-a.active .sb-bdg { background:rgba(255,255,255,.22); }
.sb-nav a .sb-n.soft { background:rgba(255,255,255,.12); }
.sb-ft { margin-top:auto; padding:var(--spacing-4) var(--spacing-3) var(--spacing-2); border-top:1px solid var(--color-border-inverted); display:flex; align-items:center; gap:10px; }
.sb-av { width:32px; height:32px; border-radius:50%; background:var(--color-background-inverted-2); border:2px solid var(--color-accent); overflow:hidden; flex-shrink:0; }
.sb-av img { width:100%; height:100%; object-fit:contain; display:block; }
.sb-nm { font-size:12.5px; font-weight:700; line-height:1.3; }
.sb-rl { font-size:10px; color:var(--color-gold); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.sb-ft .sb-out { margin-left:auto; color:var(--color-text-on-inverted-muted); font-size:14px; padding:6px; border-radius:var(--radius-inner); }
.sb-ft .sb-out:hover { background:rgba(255,255,255,.08); color:#fff; }

/* ── TOPBAR ── */
.main { margin-left:var(--size-sidebar); display:flex; flex-direction:column; min-height:100vh; min-width:0; }
.topbar {
  min-height:var(--size-topbar); background:var(--color-background-surface); border-bottom:1px solid var(--color-border);
  padding:var(--spacing-3) var(--spacing-7); display:flex; align-items:center; gap:var(--spacing-4);
  position:sticky; top:0; z-index:100;
}
.topbar-l { display:flex; align-items:center; gap:var(--spacing-4); min-width:0; }
.topbar-r { display:flex; align-items:center; gap:var(--spacing-3); margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.topbar h1 { font-size:var(--text-heading-3-size); font-weight:700; display:flex; align-items:center; gap:var(--spacing-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar h1 i { color:var(--color-accent); }
.topbar .crumb { font-size:12px; color:var(--color-text-secondary); display:flex; gap:var(--spacing-3); align-items:center; }
.hamburger, .mbtn { display:none; height:var(--size-element-md); width:var(--size-element-md); align-items:center; justify-content:center; background:var(--color-background-surface); border:1px solid var(--color-border); color:var(--color-text-primary); border-radius:var(--radius-element); cursor:pointer; font-size:15px; flex-shrink:0; }
.online-pill { background:var(--color-success-soft); color:var(--color-success); padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.odot { width:6px; height:6px; background:var(--color-success); border-radius:50%; animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.tb-link, .btn-ghost {
  height:var(--size-element-md); padding:0 var(--spacing-4); border-radius:var(--radius-element);
  background:var(--color-background-surface); border:1px solid var(--color-border); color:var(--color-text-primary);
  font:600 12.5px/1 var(--font-family-body); text-decoration:none; display:inline-flex; align-items:center; gap:var(--spacing-3); cursor:pointer; white-space:nowrap;
}
.tb-link:hover, .btn-ghost:hover { border-color:var(--color-border-emphasized); background:var(--color-background-muted); }
.tb-link.primary, .btn-red, .btn-send { background:var(--color-accent); color:var(--color-text-on-accent); border-color:transparent; }
.tb-link.primary:hover, .btn-red:hover, .btn-send:hover { background:var(--color-accent-strong); }
.tb-search { height:var(--size-element-md); border:1px solid var(--color-border); border-radius:var(--radius-element); background:var(--color-background-muted); padding:0 var(--spacing-4); display:flex; align-items:center; gap:var(--spacing-3); color:var(--color-text-secondary); min-width:220px; font-size:12.5px; }
.tb-search input { border:0; background:transparent; outline:0; flex:1; min-width:0; font:inherit; color:var(--color-text-primary); }

/* ── CONTENT ── */
.content { padding:var(--spacing-6) var(--spacing-7) var(--spacing-12); flex:1; display:flex; flex-direction:column; gap:var(--spacing-6); }
.sec-title { font-size:var(--text-label-size); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-secondary); display:flex; align-items:center; gap:var(--spacing-3); }
.sec-title i { font-size:12px; color:var(--color-accent); }
.sec-title::after { content:''; flex:1; height:1px; background:var(--color-border); }
.content > .sec-title + * { margin-top:calc(var(--spacing-6) * -1 + var(--spacing-3)); }

/* ── KPI: faixa única com divisores (opção A) ── */
.kpi-grid { display:flex; flex-wrap:wrap; background:var(--color-background-card); border:1px solid var(--color-border); border-radius:var(--radius-container); box-shadow:var(--shadow-low); overflow:hidden; }
.kpi { flex:1 1 150px; min-width:0; padding:var(--spacing-4) var(--spacing-5); display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--color-border); border-bottom:1px solid var(--color-border); margin-bottom:-1px; }
.kpi-ico { width:28px; height:28px; border-radius:var(--radius-inner); display:flex; align-items:center; justify-content:center; font-size:12px; margin-bottom:var(--spacing-2); background:var(--color-background-muted); color:var(--color-text-secondary); }
.kpi-lbl { font-size:var(--text-label-size); font-weight:700; color:var(--color-text-secondary); letter-spacing:.06em; text-transform:uppercase; }
.kpi-val { font-size:24px; font-weight:800; line-height:1.1; color:var(--color-text-primary); font-variant-numeric:tabular-nums; }
.kpi-hint { font-size:11.5px; color:var(--color-text-secondary); }
.kpi-hint.up { color:var(--color-success); font-weight:600; } .kpi-hint.warn { color:var(--color-warning); font-weight:600; }
.c-red .kpi-ico { background:var(--color-accent-soft); color:var(--color-accent); } .c-red .kpi-val { color:var(--color-accent); }
.c-blue .kpi-ico { background:var(--color-info-soft); color:var(--color-info); } .c-blue .kpi-val { color:var(--color-info); }
.c-green .kpi-ico { background:var(--color-success-soft); color:var(--color-success); } .c-green .kpi-val { color:var(--color-success); }
.c-gold .kpi-ico { background:var(--color-gold-soft); color:var(--color-gold); } .c-gold .kpi-val { color:var(--color-gold); }
.c-purp .kpi-ico { background:var(--color-purple-soft); color:var(--color-purple); } .c-purp .kpi-val { color:var(--color-purple); }
.c-cyan .kpi-ico { background:var(--color-cyan-soft); color:var(--color-cyan); } .c-cyan .kpi-val { color:var(--color-cyan); }
.c-orange .kpi-ico { background:var(--color-warning-soft); color:var(--color-warning); } .c-orange .kpi-val { color:var(--color-warning); }

/* ── GRID ── */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-5); }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--spacing-5); }
.g21 { display:grid; grid-template-columns:2fr 1fr; gap:var(--spacing-5); }
.g2 > *, .g3 > *, .g21 > * { min-width:0; }

/* ── CARD ── */
.card { background:var(--color-background-card); border:1px solid var(--color-border); border-radius:var(--radius-container); padding:var(--spacing-5); box-shadow:var(--shadow-low); }
.card-hdr { display:flex; align-items:center; justify-content:space-between; gap:var(--spacing-3); margin:calc(var(--spacing-5) * -1) calc(var(--spacing-5) * -1) var(--spacing-5); padding:var(--spacing-4) var(--spacing-5); border-bottom:1px solid var(--color-border); }
.card-hdr h3, .card > h2 { font-size:var(--text-heading-3-size); font-weight:700; display:flex; align-items:center; gap:var(--spacing-3); }
.card-hdr h3 i, .card > h2 i { color:var(--color-accent); font-size:13px; }
.card > h2 { margin:0 0 var(--spacing-4); }
.card-badge, .tag { background:var(--color-background-muted); font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; color:var(--color-text-secondary); white-space:nowrap; }
.card-badge.ok { background:var(--color-success-soft); color:var(--color-success); }
.card-badge.gold { background:var(--color-gold-soft); color:var(--color-gold); }
.card-badge.warn { background:var(--color-warning-soft); color:var(--color-warning); }
.card-badge.red { background:var(--color-accent-soft); color:var(--color-accent); }

/* ── LINHAS, RANKING, USUÁRIOS ── */
.rank-list { display:flex; flex-direction:column; gap:var(--spacing-3); }
.rank-row { display:flex; align-items:center; gap:9px; }
.rank-n { font-size:11px; font-weight:800; color:var(--color-text-disabled); min-width:16px; }
.rank-info { flex:1; min-width:0; }
.rank-name { font-size:12.5px; font-weight:600; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-bg { height:6px; background:var(--color-background-muted); border-radius:3px; overflow:hidden; }
.rank-fill { height:6px; border-radius:3px; background:var(--color-accent); transition:width .4s ease; }
.rank-val { font-size:12px; font-weight:700; color:var(--color-text-secondary); min-width:28px; text-align:right; font-variant-numeric:tabular-nums; }
.u-list { display:flex; flex-direction:column; }
.u-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--color-border); }
.u-row:last-child { border-bottom:none; }
.u-av { width:32px; height:32px; border-radius:50%; background:var(--color-background-muted); overflow:hidden; flex-shrink:0; }
.u-av img { width:100%; height:100%; object-fit:contain; }
.u-info { flex:1; min-width:0; }
.u-nm { font-size:13px; font-weight:600; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-sub { font-size:11.5px; color:var(--color-text-secondary); }
.u-time { font-size:11.5px; font-weight:600; flex-shrink:0; color:var(--color-text-disabled); }
.u-time.online { color:var(--color-success); }
.cidade-list { display:flex; flex-direction:column; gap:var(--spacing-3); }
.cidade-row { display:flex; align-items:center; gap:9px; font-size:12.5px; }
.cidade-nm { flex:0 0 140px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cidade-bg { flex:1; height:6px; background:var(--color-background-muted); border-radius:3px; overflow:hidden; }
.cidade-fill { height:6px; background:var(--color-purple); border-radius:3px; }
.cidade-n { font-size:12px; font-weight:700; color:var(--color-text-secondary); min-width:24px; text-align:right; font-variant-numeric:tabular-nums; }
.tile-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:var(--spacing-3); }
.tile { background:var(--color-background-muted); border-radius:var(--radius-element); padding:var(--spacing-4); text-align:center; }
.tile-ic { font-size:18px; margin-bottom:4px; }
.tile-v { font-size:20px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.tile-l { font-size:10.5px; color:var(--color-text-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.neg-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--spacing-3); }
.neg-tile { background:var(--color-background-muted); border-radius:var(--radius-element); padding:var(--spacing-4); text-align:center; }
.neg-val { font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.neg-lbl { font-size:10.5px; color:var(--color-text-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.rp { font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.rp-adm { background:var(--color-accent-soft); color:var(--color-accent); } .rp-jog { background:var(--color-info-soft); color:var(--color-info); }
.rp-loja { background:var(--color-success-soft); color:var(--color-success); } .rp-prof { background:var(--color-purple-soft); color:var(--color-purple); }
.vip-ico { color:var(--color-gold); }
.vip-links { display:flex; gap:var(--spacing-3); flex-wrap:wrap; }
.vip-link-btn { display:inline-flex; align-items:center; gap:6px; height:var(--size-element-md); padding:0 var(--spacing-4); border-radius:var(--radius-element); border:1px solid var(--color-border); background:var(--color-background-surface); font-size:12.5px; font-weight:600; text-decoration:none; color:var(--color-text-primary); }
.vip-link-btn:hover { border-color:var(--color-gold); color:var(--color-gold); }

/* ── TABELAS, FORMULÁRIOS, AÇÕES ── */
.t-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.t-wrap table, .card table { width:100%; border-collapse:collapse; font-size:12.5px; }
.t-wrap th, .card th { text-align:left; color:var(--color-text-secondary); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; padding:8px 10px; border-bottom:1px solid var(--color-border); white-space:nowrap; }
.t-wrap td, .card td { padding:10px; border-bottom:1px solid var(--color-border); vertical-align:middle; }
.t-wrap tr:last-child td, .card tr:last-child td { border-bottom:0; }
.td-nm { font-weight:600; } .td-u { font-size:11.5px; color:var(--color-text-secondary); } .td-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
.td-av { width:30px; height:30px; border-radius:50%; background:var(--color-background-muted); overflow:hidden; } .td-av img { width:100%; height:100%; object-fit:contain; }
.form-row { display:grid; gap:var(--spacing-2); margin-bottom:var(--spacing-4); }
.form-row label, .card label, .field label { font-size:var(--text-label-size); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-secondary); }
.in { position:relative; }
.in > i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--color-text-disabled); font-size:13px; pointer-events:none; }
.in.ta > i { top:14px; transform:none; }
.in > input, .in > select, .in > textarea, .form-row input, .form-row select, .form-row textarea, input.inp, select.inp, textarea.inp {
  width:100%; min-height:var(--size-element-lg); padding:9px 12px; border:1px solid var(--color-border); border-radius:var(--radius-element);
  font:inherit; font-size:13.5px; background:var(--color-background-surface); color:var(--color-text-primary);
}
.in > input, .in > select, .in > textarea { padding-left:36px; }
.in > textarea, .form-row textarea { min-height:90px; resize:vertical; }
.in > input:focus, .in > select:focus, .in > textarea:focus, .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px var(--color-accent-soft); }
.btn { border:0; border-radius:var(--radius-element); min-height:var(--size-element-lg); padding:0 var(--spacing-5); font:700 13.5px var(--font-family-body); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.btn-red { width:100%; }
.btn-send { width:100%; min-height:var(--size-element-lg); }
.btn:disabled, .btn-send:disabled { opacity:.5; cursor:not-allowed; }
.msg { padding:10px 14px; border-radius:var(--radius-element); font-size:13px; margin-bottom:var(--spacing-4); display:flex; gap:8px; align-items:flex-start; }
.msg.ok { background:var(--color-success-soft); color:var(--color-success); } .msg.err { background:var(--color-accent-soft); color:var(--color-error); }
.msg.info { background:var(--color-info-soft); color:var(--color-info); } .msg.warn { background:var(--color-warning-soft); color:var(--color-warning); }
.hint { font-size:12px; color:var(--color-text-secondary); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; height:var(--size-element-sm); padding:0 11px; border:1px solid var(--color-border); border-radius:999px; font-size:12px; font-weight:600; cursor:pointer; background:var(--color-background-surface); color:var(--color-text-secondary); text-decoration:none; }
.chip.sel, .chip.active { border-color:var(--color-accent); color:var(--color-accent); background:var(--color-accent-soft); }
.chip input { display:none; }
.empty { text-align:center; padding:var(--spacing-8) var(--spacing-5); color:var(--color-text-disabled); font-size:13px; }
.empty i { font-size:26px; display:block; margin-bottom:8px; color:var(--color-border-emphasized); }
.tipo-pills { display:flex; gap:6px; flex-wrap:wrap; }
.tipo-pill { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--color-background-muted); color:var(--color-text-secondary); cursor:pointer; border:1px solid transparent; }
.tipo-pill.active, .tipo-pill.sel { background:var(--color-accent-soft); color:var(--color-accent); border-color:var(--color-accent); }
.chip.sel i, .tipo-pill.sel i { color:var(--color-accent); }
.action-panel { display:flex; flex-direction:column; gap:var(--spacing-4); }
.ap-hdr { display:flex; align-items:center; gap:10px; }
.ap-hdr-ico { width:32px; height:32px; border-radius:var(--radius-inner); background:var(--color-accent-soft); color:var(--color-accent); display:flex; align-items:center; justify-content:center; }
.notif-preview { background:var(--color-background-muted); border-radius:var(--radius-element); padding:var(--spacing-4); }
.prev-title { font-weight:700; font-size:13px; } .prev-msg { font-size:12.5px; color:var(--color-text-secondary); }
.toast { display:none; position:fixed; bottom:calc(var(--spacing-6) + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%); background:var(--color-background-inverted); color:var(--color-text-on-inverted); padding:10px 16px; border-radius:var(--radius-element); font-size:13px; box-shadow:var(--shadow-high); z-index:500; gap:8px; align-items:center; }
.toast.show { display:flex; }
.toast.ok { background:var(--color-success); } .toast.err { background:var(--color-error); }

/* ── BARRA INFERIOR (mobile) ── */
.adm-bottom { display:none; position:fixed; left:0; right:0; bottom:0; height:calc(var(--size-bottomnav) + env(safe-area-inset-bottom, 0px)); padding:6px 0 calc(6px + env(safe-area-inset-bottom, 0px)); background:var(--color-background-surface); border-top:1px solid var(--color-border); z-index:150; justify-content:space-around; align-items:center; }
.adm-bottom a { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; font-weight:600; color:var(--color-text-secondary); text-decoration:none; min-width:56px; background:none; border:0; font-family:inherit; cursor:pointer; }
.adm-bottom a i { font-size:17px; }
.adm-bottom a.active { color:var(--color-accent); }

@media (max-width:1024px) { .g3 { grid-template-columns:1fr 1fr; } .g21 { grid-template-columns:1fr; } }
@media (max-width:900px) {
  .sidebar { transform:translateX(-100%); box-shadow:none; }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 30px rgba(0,0,0,.3); }
  .main, .main-content { margin-left:0 !important; }
  .hamburger, .mbtn { display:inline-flex; }
  .tb-search { display:none; }
  .topbar { padding:var(--spacing-3) var(--spacing-4); }
  .content { padding:var(--spacing-4) var(--spacing-4) calc(var(--size-bottomnav) + var(--spacing-9)); }
  .g2, .g3 { grid-template-columns:1fr; }
  .neg-grid { grid-template-columns:repeat(2,1fr); }
  .adm-bottom { display:flex; }
  .toast { bottom:calc(var(--size-bottomnav) + var(--spacing-4)); }
}