/* ============================================================
   NOAK BACKOFFICE — admin surface
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--noak-paper); color: var(--fg-1); font-family: var(--font-body); font-size: 13px; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

.adm {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* ---------- SIDEBAR ---------- */
.adm-sidebar {
  background: var(--noak-ink);
  color: rgba(255,255,255,0.7);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.adm-brand {
  padding: 18px 20px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; color: #fff;
  letter-spacing: 0.04em;
}
.adm-brand img { height: 24px; width: auto; }
.adm-brand small {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; color: var(--noak-orange);
  text-transform: uppercase; font-weight: 700;
  margin-top: 3px;
  align-self: flex-end; margin-left: 4px;
}
.adm-nav {
  flex: 1; overflow-y: auto;
  padding: 12px 8px;
  display: flex; flex-direction: column; gap: 1px;
}
.adm-nav-group { padding: 12px 12px 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.adm-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: rgba(255,255,255,0.75);
  font-size: 13px; font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}
.adm-nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.adm-nav a.on { background: var(--noak-orange); color: #fff; }
.adm-nav a svg { width: 16px; height: 16px; stroke-width: 1.7; flex-shrink: 0; }
.adm-nav a .badge {
  margin-left: auto;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8);
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px; border-radius: 999px;
}
.adm-nav a.on .badge { background: rgba(0,0,0,0.2); color: #fff; }
.adm-user {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 10px;
}
.adm-user .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--noak-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.adm-user .info { line-height: 1.2; flex: 1; }
.adm-user .info .n { font-size: 12px; color: #fff; font-weight: 600; }
.adm-user .info .r { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; }
.adm-user button { background: transparent; border: 0; color: rgba(255,255,255,0.5); padding: 4px; }
.adm-user button:hover { color: #fff; }

/* ── Tipo de cambio (ARS/USD) en el sidebar ── */
.adm-fx { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.adm-fx > svg { width: 15px; height: 15px; color: rgba(255,255,255,0.5); flex: none; }
.adm-fx .fx-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); flex: none; }
.adm-fx input { flex: 1; min-width: 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: #fff; font-family: var(--font-mono); font-size: 12px; padding: 5px 8px; }
.adm-fx input:focus { outline: none; border-color: var(--noak-orange); }
.adm-fx input::placeholder { color: rgba(255,255,255,0.3); }

/* Columna en pesos (ARS) al lado de cada valor USD: oculta salvo que haya TC. */
.ars-col { display: none; }
body.fx-on .ars-col { display: table-cell; }
td.ars-col { color: var(--noak-orange); font-family: var(--font-mono); }
th.ars-col { color: var(--noak-orange); }

/* ---------- MAIN ---------- */
.adm-main { display: flex; flex-direction: column; min-width: 0; }
.adm-topbar {
  background: #fff;
  border-bottom: 1px solid var(--border-2);
  padding: 14px 28px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 40;
}
.adm-topbar .search {
  flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: 8px;
  background: var(--noak-paper);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}
.adm-topbar .search:focus-within { border-color: var(--noak-ink); background: #fff; }
.adm-topbar .search svg { width: 16px; height: 16px; color: var(--fg-3); }
.adm-topbar .search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 13px; }
.adm-topbar .env {
  padding: 4px 10px;
  background: var(--noak-amber);
  color: var(--noak-ink);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  border-radius: 4px;
}
.adm-topbar .actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.adm-topbar .actions button, .adm-topbar .actions a {
  width: 36px; height: 36px;
  border-radius: 6px; background: transparent; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-2);
  position: relative;
}
.adm-topbar .actions button:hover { background: var(--noak-paper); color: var(--noak-ink); }
.adm-topbar .actions svg { width: 18px; height: 18px; }
.adm-topbar .actions .dot {
  position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px; background: var(--noak-orange); border-radius: 50%;
  border: 1.5px solid #fff;
}

.adm-content { padding: 24px 28px 48px; max-width: none; width: 100%; }

.adm-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px;
  gap: 18px; flex-wrap: wrap;
}
.adm-page-head h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 26px; line-height: 1; letter-spacing: -0.01em;
  margin: 4px 0 0; text-transform: none;
}
.adm-page-head .crumb { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em; display: flex; gap: 6px; }
.adm-page-head .crumb a { color: var(--fg-2); }
.adm-page-head .crumb a:hover { color: var(--noak-orange); }
.adm-page-head .actions { display: flex; gap: 8px; align-items: center; }

/* ---------- BUTTONS ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  padding: 8px 14px; border-radius: 6px; border: 0;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; }
.btn.primary { background: var(--noak-orange); color: #fff; }
.btn.primary:hover { background: var(--noak-orange-600); }
.btn.dark { background: var(--noak-ink); color: #fff; }
.btn.dark:hover { background: var(--noak-graphite); }
.btn.outline { background: #fff; border: 1px solid var(--border-1); color: var(--fg-1); }
.btn.outline:hover { border-color: var(--noak-ink); }
.btn.ghost { background: transparent; color: var(--fg-2); }
.btn.ghost:hover { background: var(--noak-paper); color: var(--noak-ink); }
.btn.danger { background: #fff; color: var(--noak-danger); border: 1px solid var(--border-1); }
.btn.danger:hover { background: var(--noak-danger); color: #fff; border-color: var(--noak-danger); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.lg { padding: 11px 20px; font-size: 14px; }
.btn.icon { padding: 8px; }

/* ---------- KPI ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi {
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.kpi .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; justify-content: space-between; }
.kpi .lbl svg { width: 14px; height: 14px; color: var(--fg-3); }
.kpi .val { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--noak-ink); letter-spacing: -0.01em; }
.kpi .delta { font-family: var(--font-mono); font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.kpi .delta.up { color: var(--noak-success); }
.kpi .delta.down { color: var(--noak-danger); }
.kpi .delta svg { width: 12px; height: 12px; }
.kpi.brand { background: var(--noak-orange); color: #fff; border-color: var(--noak-orange); }
.kpi.brand .lbl, .kpi.brand .lbl svg, .kpi.brand .val, .kpi.brand .delta { color: #fff; }
.kpi.brand .lbl { color: rgba(255,255,255,0.7); }
.kpi.brand .delta { color: rgba(255,255,255,0.85); }

/* ---------- CARD / SECTION ---------- */
.card {
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  background: #fff;
}
.card-head h3 { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.02em; margin: 0; text-transform: uppercase; }
.card-head .meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em; }
.card-body { padding: 18px; }
.card-body.tight { padding: 12px; }
.card-body.flush { padding: 0; }

/* ---------- TABLE ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead { background: var(--noak-paper); }
.tbl th {
  text-align: left;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-2);
}
.tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-2);
  color: var(--fg-1);
}
.tbl tbody tr:hover { background: var(--noak-paper); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .id { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); letter-spacing: 0.04em; }
.tbl .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.tbl .actions { display: flex; gap: 4px; justify-content: flex-end; }
.tbl .actions .btn.icon { padding: 6px; background: transparent; }
.tbl .actions .btn.icon:hover { background: var(--noak-cloud); }
.tbl input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--noak-fog, #9AA3AF);
  background: #fff;
  border-radius: 3px; cursor: pointer;
  position: relative; flex-shrink: 0; vertical-align: middle;
}
.tbl input[type="checkbox"]:hover { border-color: var(--noak-orange); }
.tbl input[type="checkbox"]:checked { background: var(--noak-orange); border-color: var(--noak-orange); }
[data-theme="dark"] .tbl input[type="checkbox"] { background: #23262C; border-color: #4A4F58; }
[data-theme="dark"] .tbl input[type="checkbox"]:checked { background: var(--noak-orange); border-color: var(--noak-orange); }
.tbl input[type="checkbox"]:checked::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
}
.tbl .thumb {
  width: 40px; height: 40px;
  background: var(--noak-paper);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 4px;
}
.tbl .thumb.ph { background: repeating-linear-gradient(45deg, var(--noak-paper) 0 5px, var(--noak-cloud) 5px 10px); }
.tbl .thumb img { width: 100%; height: 100%; object-fit: contain; }
.tbl .product-cell { display: flex; align-items: center; gap: 12px; }
.tbl .product-cell .info { line-height: 1.3; }
.tbl .product-cell .name { font-weight: 600; font-size: 13px; }
.tbl .product-cell .sku { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }

/* Status pills */
.pill {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.success { background: rgba(30,158,91,0.12); color: var(--noak-success); }
.pill.warn { background: rgba(242,163,58,0.16); color: #B97200; }
.pill.danger { background: rgba(216,51,31,0.12); color: var(--noak-danger); }
.pill.info { background: rgba(34,102,214,0.12); color: var(--noak-info); }
.pill.neutral { background: var(--noak-cloud); color: var(--fg-2); }
.pill.brand { background: rgba(255,103,31,0.12); color: var(--noak-orange-700); }

/* ---------- TOOLBAR + FILTERS ---------- */
.tbl-toolbar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff;
}
.tbl-toolbar .search { display: flex; align-items: center; gap: 8px; background: var(--noak-paper); border: 1px solid var(--border-2); border-radius: 6px; padding: 6px 10px; flex: 1; max-width: 320px; }
.tbl-toolbar .search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 13px; }
.tbl-toolbar .search svg { width: 14px; height: 14px; color: var(--fg-3); }
.tbl-toolbar .filt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; background: #fff; border: 1px solid var(--border-1); border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--fg-2);
}
.tbl-toolbar .filt:hover { border-color: var(--noak-ink); color: var(--noak-ink); }
.tbl-toolbar .filt.on { background: var(--noak-ink); color: #fff; border-color: var(--noak-ink); }
.tbl-toolbar .filt svg { width: 12px; height: 12px; }
.tbl-toolbar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Pagination */
.adm-pagination { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border-2); background: var(--noak-paper); font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em; }
.adm-pagination .pages { display: flex; gap: 4px; align-items: center; }
.adm-pagination .pages a, .adm-pagination .pages span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 4px; background: #fff; border: 1px solid var(--border-1);
  font-family: var(--font-mono); font-size: 12px; color: var(--noak-ink); font-weight: 600;
}
.adm-pagination .pages .current { background: var(--noak-ink); color: #fff; border-color: var(--noak-ink); }

/* ---------- FORMS ---------- */
.form-card { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 24px; border-bottom: 1px solid var(--border-2); }
.form-card:last-child { border-bottom: 0; }
.form-card .l { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.form-card .l small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--fg-3); margin-top: 4px; letter-spacing: 0; text-transform: none; line-height: 1.5; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field > label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.field > label .req { color: var(--noak-danger); }
.field > input, .field > select, .field > textarea {
  font-family: var(--font-body); font-size: 13px;
  border: 1px solid var(--border-1); border-radius: 6px;
  padding: 9px 11px; background: #fff;
}
.field > input:focus, .field > select:focus, .field > textarea:focus { outline: 0; border-color: var(--noak-ink); }
.field > textarea { min-height: 80px; resize: vertical; }
.field .hint { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); }
.field .err { font-family: var(--font-body); font-size: 11px; color: var(--noak-danger); }
.field-grid { display: grid; gap: 12px; }
.field-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.field-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.field-inline { display: flex; gap: 8px; align-items: stretch; }
.field-inline > * { flex: 1; }

/* Switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { display: none; }
.switch .track {
  width: 36px; height: 20px; background: var(--noak-mist);
  border-radius: 999px;
  position: relative; transition: background var(--t-base);
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: #fff; border-radius: 50%;
  transition: transform var(--t-base);
}
.switch input:checked + .track { background: var(--noak-success); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch .lbl { font-size: 12px; font-weight: 600; }

/* Drop zone */
.dropzone {
  border: 2px dashed var(--noak-mist);
  border-radius: var(--r-md);
  padding: 28px;
  text-align: center;
  background: var(--noak-paper);
  transition: border-color var(--t-base), background var(--t-base);
}
.dropzone:hover { border-color: var(--noak-orange); background: #fff; }
.dropzone .ic { width: 44px; height: 44px; margin: 0 auto 10px; background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--noak-orange); }
.dropzone .t { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.dropzone .h { font-size: 12px; color: var(--fg-3); margin-top: 2px; }

/* Tabs */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border-2);
  padding: 0 18px;
}
.tabs button {
  background: transparent; border: 0;
  padding: 12px 16px;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: var(--fg-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--noak-ink); }
.tabs button.on { color: var(--noak-ink); border-bottom-color: var(--noak-orange); }

/* Sparkline-ish bar chart */
.chart-bars {
  height: 220px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 6px;
  padding: 16px 0;
}
.chart-bars .bar {
  flex: 1; background: var(--noak-cloud); border-radius: 3px 3px 0 0;
  position: relative;
  transition: background var(--t-base);
}
.chart-bars .bar.on { background: var(--noak-orange); }
.chart-bars .bar:hover { background: var(--noak-ink); }
.chart-bars .bar .lbl {
  position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-3);
  letter-spacing: 0.04em;
}

/* Channel donut placeholder */
.donut-row { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.donut-row .swatch { width: 12px; height: 12px; border-radius: 3px; }
.donut-row .name { flex: 1; font-size: 13px; color: var(--fg-2); }
.donut-row .v { font-family: var(--font-mono); font-size: 12px; color: var(--noak-ink); font-weight: 700; }
.donut-row .pct { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); min-width: 36px; text-align: right; }

/* Banner preview tile */
.banner-tile {
  background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.banner-tile .img {
  height: 160px; background: linear-gradient(135deg, #0B0B0C 0%, #2A2C30 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.banner-tile .img.orange { background: linear-gradient(135deg, var(--noak-orange) 0%, var(--noak-orange-600) 100%); }
.banner-tile .img.paper { background: var(--noak-paper); color: var(--noak-ink); }
.banner-tile .img .label {
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; line-height: 1; text-transform: uppercase;
  text-align: center; max-width: 80%;
}
.banner-tile .info { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.banner-tile .info .name { font-weight: 700; font-size: 13px; }
.banner-tile .info .meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.04em; margin-top: 2px; }

/* Empty state */
.empty {
  text-align: center; padding: 64px 24px; color: var(--fg-3);
}
.empty .ic { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--noak-paper); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-3); }
.empty h3 { font-family: var(--font-display); font-weight: 800; font-size: 16px; margin: 0 0 6px; }

/* Misc */
.muted { color: var(--fg-3); }
.row-flex { display: flex; align-items: center; gap: 8px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-row .tag { display: inline-flex; align-items: center; gap: 4px; background: var(--noak-paper); border: 1px solid var(--border-2); padding: 3px 8px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: 0.02em; }

@media (max-width: 1100px) {
  .adm { grid-template-columns: 64px 1fr; }
  .adm-brand span:not(small), .adm-nav a span, .adm-nav-group, .adm-user .info, .adm-user button { display: none; }
  .adm-brand { justify-content: center; }
  .adm-nav a { justify-content: center; padding: 12px; }
}

/* ── Cross-hover en tablas (fila + columna bajo el cursor) ── */
.tbl tbody tr.row-hl > td { background: rgba(255,103,31,0.09) !important; }
.tbl td.col-hl, .tbl th.col-hl { background: rgba(255,103,31,0.06) !important; }
.tbl tbody tr.row-hl > td.col-hl, .tbl td.col-hl.cell-x {
  background: rgba(255,103,31,0.16) !important;
  box-shadow: inset 0 -2px 0 var(--noak-orange);
}

/* ── Marca + pie del sidebar (IA nueva: Analytics · Sandbox) ── */
.adm-brand .brand-meta { display:flex; flex-direction:column; line-height:1.1; gap:3px; }
.adm-brand .brand-meta .bm-name { font-family: var(--font-mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.adm-brand .sb-badge { align-self:flex-start; font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#fff; background:var(--noak-orange); padding:2px 6px; border-radius:4px; }
.adm-nav-foot { margin-top:auto; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; gap:1px; }

/* ── Segmented control de período (compartido) ── */
.seg.period-seg { display:inline-flex; background:var(--noak-paper); border:1px solid var(--border-2); border-radius:999px; padding:3px; gap:2px; }
.seg.period-seg button { background:transparent; border:0; padding:6px 13px; border-radius:999px; font-family:var(--font-body); font-weight:600; font-size:12px; color:var(--fg-2); cursor:pointer; }
.seg.period-seg button.on { background:var(--noak-orange); color:#fff; }
/* Toggle Unidades/Facturación (mismo look que period-seg, sin requerir .seg) */
.metric-seg { display:inline-flex; background:var(--noak-paper); border:1px solid var(--border-2); border-radius:999px; padding:3px; gap:2px; }
.metric-seg button { background:transparent; border:0; padding:6px 13px; border-radius:999px; font-family:var(--font-body); font-weight:600; font-size:12px; color:var(--fg-2); cursor:pointer; white-space:nowrap; }
.metric-seg button.on { background:var(--noak-ink); color:#fff; }
[data-theme="dark"] .metric-seg{ background:#23262C; border-color:#2C2F36; }
[data-theme="dark"] .metric-seg button.on{ background:var(--noak-orange); color:#0F1013; }

/* sortable table headers + median price (compartido) */
.tbl th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
.tbl th.sortable:hover{ color:var(--noak-ink); }
.tbl .pmed{ font-family:var(--font-mono); font-size:11px; color:var(--fg-3); }

/* === Estados vacios guiados (calcado de design/dir-estados-vacios.html) === */
.empty .ic svg{ width:24px; height:24px; }
.empty p{ font-size:13px; color:var(--fg-2); max-width:420px; margin:0 auto; line-height:1.6; }
.empty .cta{ display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.empty .ic.brand{ background:rgba(255,103,31,0.1); color:var(--noak-orange); }
.empty .ic.warn{ background:rgba(201,149,55,0.14); color:#9A6E1F; }
.empty .ic.info{ background:rgba(61,111,184,0.10); color:var(--noak-info); }

/* ============================================================
   MODO OSCURO (opcional) — paleta de design/dir-c-oscuro.html
   Toggle: NOAK.toggleTheme() · persistencia localStorage('noak-theme')
   Default = Dirección B clara (sin data-theme o ="light")
   ============================================================ */
[data-theme="dark"]{
  --noak-paper:#141519;   /* canvas */
  --noak-white:#1C1E23;   /* panel/card */
  --noak-cloud:#23262C;   /* panel-2 / alt */
  --noak-mist:#2C2F36;    /* border */
  --noak-ink:#EEF0F4;     /* texto primario */
  --noak-steel:#A6ACB6;   /* fg-2 */
  --noak-slate:#727884;   /* fg-3 */
  --noak-fog:#5A5E66;
  --noak-orange:#FF7A36;  /* naranja NOAK, +luminancia para contraste sobre oscuro */
  --noak-orange-700:#FFA572;
  --noak-success:#5BD08C;
  --noak-danger:#F0846E;
  --noak-warning:#D9A441;
  --noak-info:#7E97BF;
  --border-1:#2C2F36;
  --border-2:#23262C;
  --border-strong:#3A3E47;
  --bg-1:#1C1E23; --bg-2:#141519; --bg-3:#23262C;
}
[data-theme="dark"] body{ background:#141519; }
[data-theme="dark"] .adm, [data-theme="dark"] .adm-main{ background:#141519; }
[data-theme="dark"] .adm-sidebar{ background:#0F1013; border-right:1px solid #2C2F36; }
/* superficies que en claro estaban hardcodeadas en #fff */
[data-theme="dark"] .adm-topbar{ background:#141519; border-bottom:1px solid #2C2F36; }
[data-theme="dark"] .kpi,
[data-theme="dark"] .card,
[data-theme="dark"] .filterbar,
[data-theme="dark"] .cat-bar,
[data-theme="dark"] .btn.outline,
[data-theme="dark"] .btn.danger,
[data-theme="dark"] .dropzone,
[data-theme="dark"] .dropzone .ic{ background:#1C1E23; border-color:#2C2F36; color:var(--noak-ink); }
[data-theme="dark"] .adm-topbar .search{ background:#1C1E23; border-color:#2C2F36; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .cat-bar select,
[data-theme="dark"] .filterbar select,
[data-theme="dark"] .chip-ctx{ background:#23262C; border-color:#2C2F36; color:var(--noak-ink); }
[data-theme="dark"] .chip-ctx select{ background:transparent; }
[data-theme="dark"] .tbl thead{ background:#0F1013; }
[data-theme="dark"] .tbl th{ color:var(--noak-steel); border-color:#2C2F36; }
[data-theme="dark"] .tbl td{ border-color:#23262C; }
[data-theme="dark"] .tbl tbody tr:hover td{ background:rgba(255,122,54,0.06); }
[data-theme="dark"] .btn.primary{ background:var(--noak-orange); color:#0F1013; }
[data-theme="dark"] .btn.primary:hover{ background:#93A8CC; }
/* donut: el agujero central usaba #fff */
[data-theme="dark"] .donut::after{ background:#1C1E23; }
/* el .ctr NO es circular: solo color, sin fondo (sino queda un cuadrado) */
[data-theme="dark"] .donut .ctr{ background:transparent; }
/* KPI de marca conserva su gradiente distintivo */
[data-theme="dark"] .kpi.brand{ background:linear-gradient(135deg,#C7470E,#7A2D08)!important; border-color:#C7470E; }
[data-theme="dark"] .kpi.brand .val,[data-theme="dark"] .kpi.brand .lbl{ color:#fff!important; }
/* titulos de card legibles en oscuro */
[data-theme="dark"] .card-head h3{ color:var(--noak-ink); }
/* segmented control de período */
[data-theme="dark"] .seg, [data-theme="dark"] .seg.period-seg{ background:#23262C; border-color:#2C2F36; }
[data-theme="dark"] .seg button.on, [data-theme="dark"] .seg.period-seg button.on{ background:var(--noak-orange); color:#0F1013; }
/* sortable / minibars / rk siguen el accent vía var(--noak-orange) */
[data-theme="dark"] .tbl .minibar{ background:#23262C; }
/* pills */
[data-theme="dark"] .pill.neutral{ background:#23262C; }
/* empty-state icon base */
[data-theme="dark"] .empty .ic{ background:#23262C; }
/* notas/info boxes con fondo claro fijo */
[data-theme="dark"] .note{ background:rgba(255,122,54,0.08); border-color:rgba(255,122,54,0.22); }

/* columnas redimensionables a mano (handle en el borde del th) */
.tbl thead th .col-resize-handle{ position:absolute; top:0; right:0; width:7px; height:100%; cursor:col-resize; user-select:none; z-index:2; }
.tbl thead th .col-resize-handle:hover{ background:var(--noak-orange); opacity:0.45; }

/* tooltip de graficos (donuts/barras) */
.noak-tip{ position:fixed; z-index:9999; pointer-events:none; background:var(--noak-ink); color:#fff; font-family:var(--font-body); font-size:12px; line-height:1.45; padding:7px 10px; border-radius:7px; box-shadow:0 6px 20px rgba(0,0,0,0.25); max-width:240px; }
.noak-tip b{ color:#fff; font-weight:700; }
[data-theme="dark"] .noak-tip{ background:#0F1013; border:1px solid #2C2F36; }

/* al redimensionar columnas (table-layout:fixed) las celdas recortan su contenido para no solaparse */
.tbl.col-resized td, .tbl.col-resized th{ overflow:hidden; }
.tbl.col-resized td .product-cell .name, .tbl.col-resized td .product-cell .seller{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl.col-resized td .brandcell .b, .tbl.col-resized td .brandcell .mod{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* selector de categoria en cascada (Rubro -> Subrubro -> Hoja) */
.cat-cascade{ display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cat-cascade .cc-sel{ font-family:var(--font-body); font-size:12.5px; font-weight:600; border:1px solid var(--border-1); border-radius:6px; padding:6px 10px; background:#fff; color:var(--noak-ink); max-width:230px; }
[data-theme="dark"] .cat-cascade .cc-sel{ background:#23262C; border-color:#2C2F36; color:var(--noak-ink); }

/* modo oscuro: encabezados que quedaban blancos → oscuros con texto claro */
[data-theme="dark"] .card-head{ background:#23262C; border-bottom-color:#2C2F36; }
[data-theme="dark"] .card-head h3{ color:#fff; }
[data-theme="dark"] .tbl-toolbar{ background:#23262C; border-color:#2C2F36; }
[data-theme="dark"] .tbl-toolbar .filt{ background:#1C1E23; border-color:#2C2F36; color:var(--noak-steel); }
[data-theme="dark"] .tbl-toolbar .filt:hover{ border-color:var(--noak-orange); color:#fff; }
[data-theme="dark"] .tbl-toolbar .filt.on{ background:var(--noak-orange); color:#0F1013; border-color:var(--noak-orange); }
[data-theme="dark"] .tbl-toolbar .search{ background:#1C1E23; border-color:#2C2F36; }
[data-theme="dark"] .adm-page-head h1{ color:#fff; }
[data-theme="dark"] .filt-pop{ background:#1C1E23; border:1px solid #2C2F36; }
[data-theme="dark"] .filt-pop .opt{ color:var(--noak-steel); }
[data-theme="dark"] .filt-pop .opt:hover, [data-theme="dark"] .filt-pop .opt.sel{ background:rgba(255,122,54,0.16); color:#fff; }

/* modo oscuro: superficies propias de Resumen / Calculadora / Plan que estaban en #fff */
[data-theme="dark"] .ranklist,
[data-theme="dark"] .det-head,
[data-theme="dark"] .mini-kpi,
[data-theme="dark"] .tl-chip,
[data-theme="dark"] .fc-card,
[data-theme="dark"] .sku-row input,
[data-theme="dark"] .sku-row select,
[data-theme="dark"] .buy-note .lead,
[data-theme="dark"] .buy-callout .lead-pill,
[data-theme="dark"] .rl-head select{ background:#1C1E23 !important; border-color:#2C2F36 !important; color:var(--noak-ink); }
[data-theme="dark"] .empty{ background:#1C1E23 !important; border-color:#2C2F36 !important; }
[data-theme="dark"] .reco .btn.light{ background:#23262C !important; color:#fff !important; }
[data-theme="dark"] .ranklist .rl-head,[data-theme="dark"] .det-head h2,[data-theme="dark"] .mini-kpi .v{ color:var(--noak-ink); }
[data-theme="dark"] .season-tbl th,[data-theme="dark"] .season-tbl td{ border-color:#2C2F36; }
[data-theme="dark"] .pct-in,[data-theme="dark"] .season-tbl input{ background:#23262C; border-color:#2C2F36; color:var(--noak-ink); }
/* band lectura del mes / secciones claras */
[data-theme="dark"] .band,[data-theme="dark"] .lectura,[data-theme="dark"] .insight,[data-theme="dark"] .reco{ background:#1C1E23; border-color:#2C2F36; }
[data-theme="dark"] .insight-band{ background:#1C1E23 !important; border:1px solid #2C2F36; }
[data-theme="dark"] .insight-band, [data-theme="dark"] .insight-band *{ color:#EEF0F4; }
[data-theme="dark"] .insight-band .eyebrow{ color:var(--noak-orange-700); }
[data-theme="dark"] .hl,[data-theme="dark"] .act-card{ background:#1C1E23 !important; border-color:#2C2F36 !important; }
[data-theme="dark"] .hl *,[data-theme="dark"] .act-card *{ color:var(--noak-ink); }
[data-theme="dark"] .act-card .btn.primary, [data-theme="dark"] .act-card .btn.primary *{ color:#0F1013; }
/* tendencias: cards de oportunidad en oscuro */
[data-theme="dark"] .opp-card{ background:#1C1E23 !important; border-color:#2C2F36 !important; }
[data-theme="dark"] .opp-card .nm{ color:#fff; }
/* reordenar columnas arrastrando el encabezado */
.tbl thead th[draggable="true"]{ cursor:grab; }
.tbl thead th.col-dragging{ opacity:0.5; }
.tbl thead th.col-drop-target{ box-shadow:inset 3px 0 0 var(--noak-orange); }
/* Top100: selector de tipo editable por fila */
.tbl select.rowtipo{ font-family:var(--font-body); font-size:11px; font-weight:600; border:1px solid var(--border-1); border-radius:6px; padding:4px 6px; background:var(--noak-paper); color:var(--noak-ink); max-width:130px; }
[data-theme="dark"] .tbl select.rowtipo{ background:#23262C; border-color:#2C2F36; color:#EEF0F4; }
/* Top100: strip de KPIs (catálogo/cuotas/envío/full) */
.kpi-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:14px 16px; border-bottom:1px solid var(--border-2); }
@media (max-width:900px){ .kpi-strip{ grid-template-columns:repeat(2,1fr); } }
.kpi-strip .kc{ background:var(--noak-paper); border:1px solid var(--border-2); border-radius:var(--r-sm); padding:11px 13px; }
.kpi-strip .kc-t{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-3); margin-bottom:8px; }
.kpi-strip .kc-bar{ height:7px; background:var(--noak-mist); border-radius:4px; overflow:hidden; }
.kpi-strip .kc-bar span{ display:block; height:100%; background:var(--noak-orange); }
.kpi-strip .kc-row{ display:flex; justify-content:space-between; margin-top:7px; font-size:11.5px; color:var(--fg-2); }
.kpi-strip .kc-row b{ color:var(--noak-ink); font-family:var(--font-mono); }
.kpi-strip .kc-row .b b{ color:var(--noak-steel); }
.kpi-strip .kc-x{ font-size:10px; color:var(--fg-3); margin-top:5px; font-family:var(--font-mono); }
[data-theme="dark"] .kpi-strip{ border-color:#2C2F36; }
[data-theme="dark"] .kpi-strip .kc{ background:#1C1E23; border-color:#2C2F36; }
[data-theme="dark"] .kpi-strip .kc-row b{ color:#fff; }

/* ============================================================
   MODO DÍA (claro): cards/KPIs con fondo gris + relieve 3D + hover,
   y encabezados de tabla en negro con letra blanca para marcar
   dónde empieza cada tabla. Scopeado a [data-theme="light"] para
   no afectar el modo oscuro.
   ============================================================ */
[data-theme="light"] .kpi,
[data-theme="light"] .card,
[data-theme="light"] .opp-card,
[data-theme="light"] .ranklist,
[data-theme="light"] .detail > .card {
  background: #FFFFFF;                /* card blanca elevada (relieve por sombra) */
  border: 1px solid #E6EAF0;
  box-shadow: 0 1px 2px rgba(20,24,40,0.06), 0 6px 16px -6px rgba(20,24,40,0.12);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* relieve 3D al pasar el mouse */
[data-theme="light"] .kpi:hover,
[data-theme="light"] .card:hover,
[data-theme="light"] .opp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(20,24,40,0.10), 0 16px 30px -8px rgba(20,24,40,0.22);
  border-color: #C9D0DA;
}
/* la franja de título de la card mantiene el gris (transparente) */
[data-theme="light"] .card-head { background: transparent; border-bottom-color: #DfE3EA; }
/* el cuerpo no pinta blanco encima del gris */
[data-theme="light"] .card-body { background: transparent; }
/* KPI destacado (naranja) conserva su color, solo suma relieve */
[data-theme="light"] .kpi.brand { background: var(--noak-orange); border-color: var(--noak-orange); }

/* Encabezados de tabla: negro con texto blanco */
[data-theme="light"] .tbl thead { background: var(--noak-ink); }
[data-theme="light"] .tbl thead th {
  color: #fff;
  border-bottom-color: var(--noak-ink);
}
[data-theme="light"] .tbl thead th svg { color: #fff; }
[data-theme="light"] .tbl th.sortable:hover { color: #fff; opacity: .85; }
/* las filas siguen legibles sobre el gris de la card */
[data-theme="light"] .tbl tbody tr { background: #FBFCFE; }
[data-theme="light"] .tbl tbody tr:nth-child(even) { background: #F4F6F9; }
[data-theme="light"] .tbl tbody tr:hover { background: #FFF3EA; }

/* ============================================================
   SIDEBAR COLAPSABLE + FIJABLE
   - .sb-toggle: botón en el encabezado del panel
   - .adm.sb-collapsed: riel de 64px; al hacer hover se expande como
     overlay (no empuja el contenido) para dar más pantalla al análisis.
   ============================================================ */
.adm-brand { position: relative; }
/* monograma NK (solo visible en el riel colapsado) */
.brand-mono {
  display: none; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px; background: var(--noak-orange); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: 0.02em; align-items: center; justify-content: center;
}
.sb-toggle {
  margin-left: auto; cursor: pointer; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sb-toggle:hover { color: #fff; background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.30); }
.sb-toggle svg { width: 18px; height: 18px; }

/* ---- modo colapsado (riel) ---- */
.adm.sb-collapsed { grid-template-columns: 64px 1fr; }
/* Riel de 64px: el grid reserva 64px (el contenido NO queda tapado en reposo).
   El sidebar es fixed para poder expandirse al hover como OVERLAY flotante
   (sin empujar las tablas) y volver al riel al salir el mouse. */
.adm.sb-collapsed .adm-sidebar {
  position: fixed; left: 0; top: 0; height: 100vh; width: 64px;
  z-index: 60; overflow-x: hidden; overflow-y: auto;
  transition: width .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.adm.sb-collapsed .adm-sidebar { grid-column: 1; }
.adm.sb-collapsed .adm-main { grid-column: 2; }
/* en riel: ocultar textos y el logo ancho (wordmark), centrar íconos.
   El logo se oculta para que no se recorte en 64px; reaparece al expandir. */
.adm.sb-collapsed .adm-nav a span,
.adm.sb-collapsed .adm-nav-group,
.adm.sb-collapsed .adm-user .info,
.adm.sb-collapsed .adm-brand img,
.adm.sb-collapsed .adm-brand .brand-meta { display: none; }
.adm.sb-collapsed .adm-nav a { justify-content: center; padding: 10px; }
/* en riel: monograma NK arriba + botón abajo, apilados y centrados */
.adm.sb-collapsed .brand-mono { display: flex; }
.adm.sb-collapsed .adm-brand { flex-direction: column; justify-content: center; align-items: center; padding: 14px 8px; gap: 8px; }
.adm.sb-collapsed .adm-user { justify-content: center; padding: 12px 8px; }
.adm.sb-collapsed .adm-fx .fx-lbl, .adm.sb-collapsed .adm-fx input { display: none; }
.adm.sb-collapsed .adm-fx { justify-content: center; padding: 10px 8px; }
.adm.sb-collapsed .sb-toggle { margin-left: 0; }

/* Al pasar el mouse, se expande automáticamente como OVERLAY flotante (240px)
   y revela los textos. Es temporal (flotante con sombra fuerte): al sacar el
   mouse vuelve al riel. No empuja el contenido. */
.adm.sb-collapsed .adm-sidebar:hover { width: 240px; box-shadow: 8px 0 32px rgba(0,0,0,0.40); }
.adm.sb-collapsed .adm-sidebar:hover .adm-nav a span,
.adm.sb-collapsed .adm-sidebar:hover .adm-nav-group { display: inline; }
.adm.sb-collapsed .adm-sidebar:hover .adm-user .info,
.adm.sb-collapsed .adm-sidebar:hover .adm-brand .brand-meta { display: flex; }
.adm.sb-collapsed .adm-sidebar:hover .adm-brand img { display: block; }
.adm.sb-collapsed .adm-sidebar:hover .brand-mono { display: none; }
.adm.sb-collapsed .adm-sidebar:hover .adm-brand { flex-direction: row; justify-content: flex-start; padding: 18px 20px; gap: 10px; }
.adm.sb-collapsed .adm-sidebar:hover .adm-nav a { justify-content: flex-start; padding: 9px 12px; }
.adm.sb-collapsed .adm-sidebar:hover .adm-user { justify-content: flex-start; padding: 12px 16px; }
.adm.sb-collapsed .adm-sidebar:hover .adm-fx .fx-lbl, .adm.sb-collapsed .adm-sidebar:hover .adm-fx input { display: block; }
.adm.sb-collapsed .adm-sidebar:hover .adm-fx { justify-content: flex-start; padding: 10px 16px; }

/* ============================================================
   RESPONSIVE — tablet y móvil
   Los layouts de las páginas usan grids inline; acá los apilamos
   con overrides dirigidos (style*=) sin tocar cada HTML.
   ============================================================ */

/* ── Tablet (≤1024px): KPIs de 4-5 columnas pasan a 2 ── */
@media (max-width: 1024px) {
  .adm-content { padding: 18px 16px 40px; }
  .adm-topbar { padding: 12px 16px; }
  .adm-content [style*="repeat(4,1fr)"],
  .adm-content [style*="repeat(4, 1fr)"],
  .adm-content [style*="repeat(5,1fr)"],
  .adm-content [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── Móvil (≤900px): todo a una columna + tablas scrolleables ── */
@media (max-width: 900px) {
  .adm-topbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .adm-topbar .search { min-width: 0; flex: 1 1 160px; }
  .adm-topbar .actions { margin-left: 0; flex-wrap: wrap; }
  .adm-content { padding: 12px 10px 64px; }

  /* Layouts de 2-3 columnas (inline) se apilan. Quedan afuera a propósito
     los grids "anchos" de plan (repeat(12) y la fila con columnas en px). */
  .adm-content [style*="grid-template-columns:1fr 1fr"],
  .adm-content [style*="grid-template-columns: 1fr 1fr"],
  .adm-content [style*="1.4fr 1fr"],
  .adm-content [style*="1fr 1.4fr"],
  .adm-content [style*="repeat(2,1fr)"],
  .adm-content [style*="repeat(2, 1fr)"],
  .adm-content [style*="repeat(3,1fr)"],
  .adm-content [style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }

  /* KPIs siguen 2-up en móvil */
  .adm-content [style*="repeat(4,1fr)"],
  .adm-content [style*="repeat(4, 1fr)"],
  .adm-content [style*="repeat(5,1fr)"],
  .adm-content [style*="repeat(5, 1fr)"],
  .kpi-strip { grid-template-columns: repeat(2,1fr) !important; }

  /* Tablas: scroll horizontal con inercia (el !important le gana al
     overflow:visible inline de top100; en móvil prima poder scrollear). */
  .tbl-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .tbl { min-width: 600px; }

  /* El encabezado sticky no convive con el scroll horizontal móvil: queda
     flotando sobre los datos (bug reportado en Top100). En móvil va estático. */
  .tbl thead, .tbl thead th, .tbl-wrap .tbl thead th { position: static !important; }

  .seg.period-seg, .metric-seg { flex-wrap: wrap; }
}

/* ── Versión móvil simplificada (≤768px): solo 4 vistas en el menú ──
   Top 100 / Marcas / Vendedores / Plan de compras. El resto se oculta
   (y noak-helpers.js redirige las páginas -noak no permitidas a Top 100). */
@media (max-width: 768px) {
  .adm-nav a { display: none; }
  .adm-nav a[href="/top100-noak"],
  .adm-nav a[href="/marcas-noak"],
  .adm-nav a[href="/vendedores-noak"],
  .adm-nav a[href="/plan-noak"] { display: flex; }
  .adm-nav-group, .adm-nav-foot { display: none; }
}

/* ── Teléfono (≤520px): compactar tipografía y topbar ── */
@media (max-width: 520px) {
  html, body { font-size: 12.5px; }
  .adm-topbar .env { display: none; }
  .adm-content { padding: 10px 8px 56px; }
  .tbl { min-width: 520px; }
}