/* ============================================================
   Soporte Remoto — hoja de estilos única
   Mobile-first. Sin dependencias externas.
   ============================================================ */

:root {
  --bg:        #f4f6f8;
  --surface:   #ffffff;
  --surface-2: #f8fafc;
  --border:    #e4e8ee;
  --border-2:  #eef1f5;
  --text:      #131720;
  --muted:     #667085;
  --faint:     #98a2b3;

  --brand:     #4f46e5;
  --brand-dk:  #4338ca;
  --brand-sf:  #eef2ff;
  --go:        #12a150;
  --go-dk:     #0e8a44;
  --go-sf:     #e8f7ee;
  --warn:      #d97706;
  --warn-sf:   #fef4e6;
  --danger:    #dc2626;
  --danger-sf: #fdeded;

  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --shadow-lg: 0 8px 28px rgba(16,24,40,.12);

  --nav-h:     64px;
  --sidebar-w: 236px;
  --tabular:   "tnum" 1, "lnum" 1;

  color-scheme: light;
}

/* ------------------------------------------------------------------
   Tema oscuro.
   El script del <head> escribe data-theme="dark|light" en <html> antes de
   pintar, resolviendo también el modo automático; por eso la elección
   manual siempre gana sobre la del sistema operativo.
   El bloque @media es el respaldo para quien tenga JavaScript desactivado:
   si cambia un color acá, hay que cambiarlo en los dos lugares.
   ------------------------------------------------------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0d1017;
  --surface:   #161a22;
  --surface-2: #1b2029;
  --border:    #262c37;
  --border-2:  #212630;
  --text:      #e8ecf3;
  --muted:     #98a2b3;
  --faint:     #6c7789;
  --brand:     #7c74f5;
  --brand-dk:  #6a61ee;
  --brand-sf:  #1e1f3d;
  --go:        #21c46a;
  --go-dk:     #17a557;
  --go-sf:     #10291c;
  --warn:      #f0a139;
  --warn-sf:   #2c2113;
  --danger:    #f36a6a;
  --danger-sf: #2e1717;
  --shadow:    0 1px 2px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:        #0d1017;
    --surface:   #161a22;
    --surface-2: #1b2029;
    --border:    #262c37;
    --border-2:  #212630;
    --text:      #e8ecf3;
    --muted:     #98a2b3;
    --faint:     #6c7789;
    --brand:     #7c74f5;
    --brand-dk:  #6a61ee;
    --brand-sf:  #1e1f3d;
    --go:        #21c46a;
    --go-dk:     #17a557;
    --go-sf:     #10291c;
    --warn:      #f0a139;
    --warn-sf:   #2c2113;
    --danger:    #f36a6a;
    --danger-sf: #2e1717;
    --shadow:    0 1px 2px rgba(0,0,0,.3);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.015em; }
a { color: var(--brand); text-decoration: none; }
p { margin: 0 0 10px; }

/* ------------------------------------------------------------ Estructura */
.app { display: flex; min-height: 100vh; }

.sidebar { display: none; }

.main { flex: 1; min-width: 0; }

.container { max-width: 960px; margin: 0 auto; padding: 14px 14px 28px; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 17px; flex: 1; min-width: 0; }
.topbar .sub { font-size: 12px; color: var(--muted); font-weight: 500; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-sf); color: var(--brand);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}

/* ------------------------------------------------------------ Navegación inferior */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: stretch;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--faint); font-size: 10.5px; font-weight: 600;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.tabbar a .ico { font-size: 19px; line-height: 1; }
.tabbar a.on { color: var(--brand); }

/* ------------------------------------------------------------ Tarjetas */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}
.card.flat { box-shadow: none; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-h h2 { font-size: 14px; letter-spacing: .01em; }
.card-h .spacer { flex: 1; }

.section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint);
  margin: 20px 2px 8px;
}
.section-title:first-child { margin-top: 4px; }

/* ------------------------------------------------------------ Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, filter .15s ease, background .15s ease;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-go      { background: var(--go);    border-color: var(--go);    color: #fff; }
.btn-warn    { background: var(--warn-sf); border-color: transparent; color: var(--warn); }
.btn-danger  { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-ghost   { background: transparent; border-color: transparent; color: var(--muted); }
.btn-block   { display: flex; width: 100%; }
.btn-lg      { padding: 16px 22px; font-size: 16px; border-radius: 13px; }
.btn-sm      { padding: 7px 11px; font-size: 13px; border-radius: 9px; }

/* El botón más importante del sistema */
.btn-hero {
  display: flex; width: 100%;
  padding: 26px 20px;
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  border-radius: 18px;
  background: var(--go); border: none; color: #fff;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--go) 65%, transparent);
}
.btn-hero:active { transform: scale(.99); }

/* ------------------------------------------------------------ Cronómetro */
.timer-screen { text-align: center; padding: 18px 6px 6px; }
.timer-client { font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.timer-group  { font-size: 14.5px; color: var(--brand); font-weight: 600; margin-top: 4px; }
.timer-reason { font-size: 14px; color: var(--muted); margin-top: 6px; }

.timer-clock {
  font-size: clamp(52px, 17vw, 76px);
  font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; font-feature-settings: var(--tabular);
  margin: 18px 0 4px; line-height: 1;
}
.timer-clock.paused { color: var(--warn); }

.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--go); margin-right: 7px; vertical-align: middle;
  animation: pulse 2s infinite;
}
.live-dot.paused { background: var(--warn); animation: none; }
@keyframes pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--go) 55%, transparent); }
  50%     { opacity: .75; box-shadow: 0 0 0 6px transparent; }
}

.timer-state { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.timer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }

/* ------------------------------------------------------------ Barra flotante */
.floatbar {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  z-index: 45;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 13px;
  background: #12161d; color: #fff;
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  animation: rise .25s ease;
}
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
.floatbar .fb-client { font-weight: 650; font-size: 14px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floatbar .fb-time {
  font-variant-numeric: tabular-nums; font-feature-settings: var(--tabular);
  font-weight: 700; font-size: 15px; letter-spacing: -.01em;
}
.floatbar .fb-go { font-size: 12px; opacity: .6; }

/* ------------------------------------------------------------ Métricas */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
}
.stat .label { font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint); }
.stat .value {
  font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.stat .value.sm { font-size: 21px; }
.stat .hint { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ------------------------------------------------------------ Listas */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border-2);
  color: inherit; text-decoration: none;
}
.list-item:last-child { border-bottom: none; }
.list-item .body { flex: 1; min-width: 0; }
.list-item .title { font-weight: 620; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .meta { font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .right { text-align: right; flex-shrink: 0; }
.list-item .right .big { font-weight: 700; font-variant-numeric: tabular-nums; }
.list-item .right .small { font-size: 11.5px; color: var(--faint); }
.list-item .rank {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  background: var(--surface-2); color: var(--muted);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

/* Accesos rápidos de inicio en un toque */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.quick button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 13px; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer; font-family: inherit; color: inherit;
  box-shadow: var(--shadow);
}
.quick button:active { transform: scale(.98); }
.quick .q-client { font-weight: 650; font-size: 14px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.quick .q-group { font-size: 12px; color: var(--brand); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ------------------------------------------------------------ Barra de progreso */
.bar { height: 7px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 8px; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--go); transition: width .3s ease; }
.bar.warning > i { background: var(--warn); }
.bar.danger  > i { background: var(--danger); }
.bar.neutral > i { background: var(--faint); }

.plan-row { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.plan-row .used { font-weight: 700; }
.plan-row .of { color: var(--muted); }
.plan-row .pc { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc.ok { color: var(--go); } .pc.warning { color: var(--warn); }
.pc.danger { color: var(--danger); } .pc.neutral { color: var(--faint); }

/* ------------------------------------------------------------ Etiquetas */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 99px;
  font-size: 11.5px; font-weight: 650;
  background: var(--surface-2); color: var(--muted);
}
.tag.ok      { background: var(--go-sf); color: var(--go-dk); }
.tag.warning { background: var(--warn-sf); color: var(--warn); }
.tag.danger  { background: var(--danger-sf); color: var(--danger); }
.tag.brand   { background: var(--brand-sf); color: var(--brand); }

/* ------------------------------------------------------------ Formularios */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 650;
  color: var(--muted); margin-bottom: 6px;
}
.input, select.input, textarea.input {
  width: 100%; padding: 12px 13px;
  font-size: 16px;               /* 16px evita el zoom automático en iOS */
  font-family: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
select.input {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
textarea.input { min-height: 84px; resize: vertical; line-height: 1.45; }
.hint { font-size: 12px; color: var(--faint); margin-top: 5px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  width: 42px; height: 25px; border-radius: 99px; background: var(--border);
  position: relative; transition: background .18s; flex-shrink: 0;
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s;
}
.switch input:checked + .track { background: var(--go); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch span.lbl { font-size: 14px; font-weight: 550; }

/* Selector de opciones en fila (planes, roles) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label {
  padding: 9px 14px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  margin: 0;
}
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label:has(input:checked),
.chips label.on {
  background: var(--brand-sf); border-color: var(--brand); color: var(--brand);
}

/* Lista de selección grande (cliente / grupo) */
.pick { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.pick button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 600; color: inherit;
}
.pick button.on { border-color: var(--brand); background: var(--brand-sf); color: var(--brand); }
.pick button .sub { font-size: 12px; font-weight: 500; color: var(--muted); display: block; margin-top: 1px; }
.pick button.on .sub { color: color-mix(in srgb, var(--brand) 75%, var(--text)); }
.pick .empty { padding: 14px; color: var(--muted); font-size: 14px; text-align: center; }

.steps { display: flex; gap: 6px; margin-bottom: 14px; }
.steps i {
  flex: 1; height: 4px; border-radius: 99px; background: var(--border);
  transition: background .2s;
}
.steps i.on { background: var(--brand); }

/* ------------------------------------------------------------ Tablas */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint);
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--border-2); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
table.data td.nowrap, table.data th.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------ Avisos */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 550; margin-bottom: 12px;
  border: 1px solid transparent;
}
.alert.ok    { background: var(--go-sf); color: var(--go-dk); border-color: color-mix(in srgb, var(--go) 25%, transparent); }
.alert.warn  { background: var(--warn-sf); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.alert.error { background: var(--danger-sf); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert.info  { background: var(--brand-sf); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }

.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty-state .ico { font-size: 34px; margin-bottom: 10px; opacity: .55; }
.empty-state p { font-size: 14px; }

/* ------------------------------------------------------------ Gráfico diario */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 92px; margin-top: 6px; }
.chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.chart .col i {
  display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--brand) 32%, transparent);
}
.chart .col.today i { background: var(--brand); }
.chart-x { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); margin-top: 5px; }

/* ------------------------------------------------------------ Filtros */
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.filters .full { grid-column: 1 / -1; }
details.filter-box > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 650; color: var(--muted); padding: 4px 0;
}
details.filter-box > summary::-webkit-details-marker { display: none; }
details.filter-box[open] > summary { margin-bottom: 12px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.pager .info { font-size: 13px; color: var(--muted); }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.login-card { width: 100%; max-width: 380px; }
.brand-mark {
  width: 54px; height: 54px; border-radius: 15px; margin: 0 auto 16px;
  background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 26px;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--brand) 60%, transparent);
}

.only-desktop { display: none; }
.only-mobile  { display: block; }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.tnum  { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.mt    { margin-top: 12px; }
.mb0   { margin-bottom: 0; }
.flex  { display: flex; align-items: center; gap: 8px; }
.wrap-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================ Escritorio */
@media (min-width: 860px) {
  body { padding-bottom: 0; }

  .tabbar { display: none; }

  .sidebar {
    display: flex; flex-direction: column; gap: 3px;
    width: var(--sidebar-w); flex-shrink: 0;
    padding: 18px 12px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .sidebar .logo {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px 18px; font-weight: 700; font-size: 15.5px; color: var(--text);
  }
  .sidebar .logo .mark {
    width: 30px; height: 30px; border-radius: 9px; background: var(--brand);
    color: #fff; display: grid; place-items: center; font-size: 15px;
  }
  .sidebar a.nav {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: 9px;
    color: var(--muted); font-size: 14px; font-weight: 580; text-decoration: none;
  }
  .sidebar a.nav .ico { font-size: 16px; width: 19px; text-align: center; }
  .sidebar a.nav:hover { background: var(--surface-2); color: var(--text); }
  .sidebar a.nav.on { background: var(--brand-sf); color: var(--brand); font-weight: 650; }
  .sidebar .foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-2); }

  .container { padding: 22px 26px 40px; max-width: 1080px; }
  .topbar { padding: 14px 26px; }
  .topbar h1 { font-size: 19px; }

  .stats { grid-template-columns: repeat(4, 1fr); }
  .quick { grid-template-columns: repeat(3, 1fr); }
  .filters { grid-template-columns: repeat(4, 1fr); }
  .table-wrap { margin: 0; padding: 0; }

  .floatbar { left: auto; right: 26px; bottom: 22px; width: 300px; }

  .btn-hero { max-width: 420px; margin: 0 auto; }
  .timer-actions { max-width: 420px; margin-left: auto; margin-right: auto; }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

  .only-desktop { display: block; }
  .only-mobile  { display: none; }
}

@media (min-width: 560px) and (max-width: 859px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .quick { grid-template-columns: repeat(3, 1fr); }
}

@media print {
  .topbar, .tabbar, .sidebar, .floatbar, .btn { display: none !important; }
  body { background: #fff; padding: 0; }
  .card { box-shadow: none; border-color: #ddd; }
}