/* ============================================================
   ArgenPanel — Design System
   Theme: Warm Obsidian — Dark warm tones with orange accents
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Dark by default → native controls (select option popups, date pickers, scrollbars) render
     in dark mode. The light theme flips this to `light` below. This is what makes native <select>
     dropdowns readable instead of dark-on-dark. */
  color-scheme: dark;
  --bg-base:      #1a1614;
  --bg-surface:   #262220;
  --bg-elevated:  #352f2d;
  --bg-hover:     #46403d;
  --bg-active:    #524c48;

  --border:       #46403d;
  --border-light: #352f2d;
  --border-focus: #f97316;

  --text-primary:   #fafaf9;
  --text-secondary: #a8a29e;
  --text-muted:     #78716c;
  --text-inverse:   #1a1614;

  --accent-orange:  #f97316;
  --accent-warm:    #fb923c;
  --accent-gold:    #fbbf24;
  --accent-blue:    #38bdf8;
  --accent-red:     #ef4444;
  --accent-green:   #4ade80;
  --accent-purple:  #c084fc;

  --shift-night:    #818cf8;
  --shift-morning:  #fbbf24;
  --shift-afternoon:#4ade80;

  --status-present: #4ade80;
  --status-late:    #fbbf24;
  --status-absent:  #ef4444;
  --status-leave:   #c084fc;
  --status-pending: #38bdf8;

  --font-ui: 'Inter', sans-serif;
  --font-mono: 'Inter', sans-serif; /* legacy alias — JS inline styles still reference this */

  --radius-sm:  6px;
  --radius-md:  8px;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  --accent-primary: var(--accent-orange);

  /* ── Alias de variables que el código usa pero nunca se definieron ──
     ~400 estilos de js/ piden estos nombres (--border-subtle, --bg-card, --accent, --text…) y no
     existían. Sin fallback, la declaración quedaba inválida y el navegador la tiraba (bordes que no se
     dibujaban, fondos transparentes); con fallback, el color era fijo y no seguía el tema. Se apuntan
     a los tokens reales, así cambian con el tema. Código NUEVO: usar los tokens de arriba, no estos. */
  --border-subtle: var(--border-light);
  --border-color:  var(--border);
  --bg-card:       var(--bg-surface);
  --bg-secondary:  var(--bg-surface);
  --surface:       var(--bg-surface);
  --bg-primary:    var(--bg-base);
  --bg-tertiary:   var(--bg-elevated);
  --bg-input:      var(--bg-elevated);
  --text:          var(--text-primary);
  --text-tertiary: var(--text-muted);
  --accent:        var(--accent-orange);
  --danger:        var(--accent-red);
  --warning:       var(--accent-gold);
  --accent-primary-rgb: 249, 115, 22;   /* se usa como rgba(var(...), a): fijo, no sigue el tema */

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.2);
  --shadow:     0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 20px rgba(249,115,22,0.25);
  --logo-icon-filter: hue-rotate(210deg) saturate(1.8) brightness(1);

  --nav-width: 228px;
  --topbar-h:  40px;   /* Topbar Fina: barra de una sola línea */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
}

/* ── Theme: Midnight Ocean — deep navy, electric blue accent ── */
[data-theme="midnight-blue"] {
  --bg-base:      #080e1a;
  --bg-surface:   #0f1828;
  --bg-elevated:  #162238;
  --bg-hover:     #1e2e4a;
  --bg-active:    #283c5e;
  --border:       #1e2e4a;
  --border-light: #162238;
  --border-focus: #2196f3;
  --text-primary:   #e3eaf4;
  --text-secondary: #7a92b0;
  --text-muted:     #4a6280;
  --text-inverse:   #080e1a;
  --accent-orange:  #2196f3;
  --accent-warm:    #64b5f6;
  --accent-gold:    #ffc107;
  --accent-blue:    #2196f3;
  --accent-red:     #ef5350;
  --accent-green:   #66bb6a;
  --accent-purple:  #ab47bc;
  --accent-primary: var(--accent-orange);
  --shadow-glow: 0 0 22px rgba(33,150,243,0.3);
  --logo-gradient: linear-gradient(135deg, #2196f3, #64b5f6);
  --logo-text-gradient: linear-gradient(135deg, #e3eaf4, #2196f3);
  --logo-shadow: 0 2px 10px rgba(33,150,243,0.3);
  --logo-icon-filter: hue-rotate(30deg) brightness(1.1);
}

/* ── Theme: Emerald Matrix — hacker green on black ────────── */
[data-theme="emerald-night"] {
  --bg-base:      #050e08;
  --bg-surface:   #0a1a10;
  --bg-elevated:  #10281a;
  --bg-hover:     #183824;
  --bg-active:    #20482e;
  --border:       #183824;
  --border-light: #10281a;
  --border-focus: #00e676;
  --text-primary:   #d0f5e0;
  --text-secondary: #6daa82;
  --text-muted:     #3d7a54;
  --text-inverse:   #050e08;
  --accent-orange:  #00e676;
  --accent-warm:    #69f0ae;
  --accent-gold:    #ffee58;
  --accent-blue:    #40c4ff;
  --accent-red:     #ff5252;
  --accent-green:   #00e676;
  --accent-purple:  #b388ff;
  --accent-primary: var(--accent-orange);
  --shadow-glow: 0 0 24px rgba(0,230,118,0.3);
  --logo-gradient: linear-gradient(135deg, #00e676, #69f0ae);
  --logo-text-gradient: linear-gradient(135deg, #d0f5e0, #00e676);
  --logo-shadow: 0 2px 10px rgba(0,230,118,0.3);
  --logo-icon-filter: hue-rotate(-30deg) saturate(1.5) brightness(1.1);
}

/* ── Theme: Royal Velvet — deep plum, gold accent ─────────── */
[data-theme="royal-purple"] {
  --bg-base:      #10081a;
  --bg-surface:   #1a1028;
  --bg-elevated:  #261838;
  --bg-hover:     #34224a;
  --bg-active:    #422c5e;
  --border:       #34224a;
  --border-light: #261838;
  --border-focus: #e040fb;
  --text-primary:   #f3e5f5;
  --text-secondary: #ab8cc0;
  --text-muted:     #6d5080;
  --text-inverse:   #10081a;
  --accent-orange:  #e040fb;
  --accent-warm:    #ea80fc;
  --accent-gold:    #ffd740;
  --accent-blue:    #448aff;
  --accent-red:     #ff5252;
  --accent-green:   #69f0ae;
  --accent-purple:  #e040fb;
  --accent-primary: var(--accent-orange);
  --shadow-glow: 0 0 22px rgba(224,64,251,0.35);
  --logo-gradient: linear-gradient(135deg, #e040fb, #ea80fc);
  --logo-text-gradient: linear-gradient(135deg, #f3e5f5, #e040fb);
  --logo-shadow: 0 2px 10px rgba(224,64,251,0.3);
  --logo-icon-filter: hue-rotate(110deg) saturate(1.8) brightness(1.1);
}

/* ── Theme: Neon Cyberpunk — void black, hot pink neon ────── */
[data-theme="neon-cyber"] {
  --bg-base:      #05050a;
  --bg-surface:   #0c0c16;
  --bg-elevated:  #141422;
  --bg-hover:     #1e1e32;
  --bg-active:    #282842;
  --border:       #1e1e32;
  --border-light: #141422;
  --border-focus: #ff1493;
  --text-primary:   #e8e8ff;
  --text-secondary: #7878aa;
  --text-muted:     #484878;
  --text-inverse:   #05050a;
  --accent-orange:  #ff1493;
  --accent-warm:    #ff69b4;
  --accent-gold:    #ffea00;
  --accent-blue:    #00ffff;
  --accent-red:     #ff1744;
  --accent-green:   #00ff87;
  --accent-purple:  #d500f9;
  --accent-primary: var(--accent-orange);
  --shadow-glow: 0 0 28px rgba(255,20,147,0.4);
  --logo-gradient: linear-gradient(135deg, #ff1493, #ff69b4);
  --logo-text-gradient: linear-gradient(135deg, #e8e8ff, #ff1493);
  --logo-shadow: 0 2px 10px rgba(255,20,147,0.3);
  --logo-icon-filter: hue-rotate(150deg) saturate(2) brightness(1.1);
}

/* ── Theme: Sakura Twilight — mauve dusk, cherry blossom pink */
[data-theme="sakura-dusk"] {
  --bg-base:      #160e16;
  --bg-surface:   #221622;
  --bg-elevated:  #302030;
  --bg-hover:     #402c40;
  --bg-active:    #503850;
  --border:       #402c40;
  --border-light: #302030;
  --border-focus: #f48fb1;
  --text-primary:   #fce4ec;
  --text-secondary: #c48da0;
  --text-muted:     #7a5468;
  --text-inverse:   #160e16;
  --accent-orange:  #f48fb1;
  --accent-warm:    #f8bbd0;
  --accent-gold:    #fff176;
  --accent-blue:    #80deea;
  --accent-red:     #ef9a9a;
  --accent-green:   #a5d6a7;
  --accent-purple:  #ce93d8;
  --accent-primary: var(--accent-orange);
  --shadow-glow: 0 0 20px rgba(244,143,177,0.3);
  --logo-gradient: linear-gradient(135deg, #f48fb1, #f8bbd0);
  --logo-text-gradient: linear-gradient(135deg, #fce4ec, #f48fb1);
  --logo-shadow: 0 2px 10px rgba(244,143,177,0.3);
  --logo-icon-filter: hue-rotate(160deg) saturate(1.5) brightness(1.2);
}

/* ── Theme: Blood Moon — near-black red, crimson accent ───── */
[data-theme="blood-moon"] {
  --bg-base:      #0e0606;
  --bg-surface:   #1a0c0c;
  --bg-elevated:  #281414;
  --bg-hover:     #381c1c;
  --bg-active:    #482424;
  --border:       #381c1c;
  --border-light: #281414;
  --border-focus: #f44336;
  --text-primary:   #ffebee;
  --text-secondary: #c08080;
  --text-muted:     #7a4a4a;
  --text-inverse:   #0e0606;
  --accent-orange:  #f44336;
  --accent-warm:    #e57373;
  --accent-gold:    #ffb74d;
  --accent-blue:    #4fc3f7;
  --accent-red:     #f44336;
  --accent-green:   #81c784;
  --accent-purple:  #ba68c8;
  --accent-primary: var(--accent-orange);
  --shadow-glow: 0 0 24px rgba(244,67,54,0.35);
  --logo-gradient: linear-gradient(135deg, #f44336, #e57373);
  --logo-text-gradient: linear-gradient(135deg, #ffebee, #f44336);
  --logo-shadow: 0 2px 10px rgba(244,67,54,0.3);
  --logo-icon-filter: hue-rotate(180deg) saturate(2) brightness(1.1);
}

/* ── Theme: Titanium — neutral grey, white accent ─────────── */
[data-theme="titanium"] {
  --bg-base:      #111214;
  --bg-surface:   #1a1b1e;
  --bg-elevated:  #232528;
  --bg-hover:     #2e3034;
  --bg-active:    #3a3c40;
  --border:       #2e3034;
  --border-light: #232528;
  --border-focus: #90a4ae;
  --text-primary:   #eceff1;
  --text-secondary: #90a4ae;
  --text-muted:     #607d8b;
  --text-inverse:   #111214;
  --accent-orange:  #90a4ae;
  --accent-warm:    #b0bec5;
  --accent-gold:    #ffd54f;
  --accent-blue:    #4fc3f7;
  --accent-red:     #ef5350;
  --accent-green:   #66bb6a;
  --accent-purple:  #ab47bc;
  --accent-primary: var(--accent-orange);
  --shadow-glow: 0 0 18px rgba(144,164,174,0.25);
  --logo-gradient: linear-gradient(135deg, #90a4ae, #b0bec5);
  --logo-text-gradient: linear-gradient(135deg, #eceff1, #90a4ae);
  --logo-shadow: 0 2px 10px rgba(144,164,174,0.25);
  --logo-icon-filter: saturate(0.3) brightness(1.2);
}

/* ── Theme: Light SaaS — clean white/gray with blue accent ── */
[data-theme="light-saas"] {
  color-scheme: light;   /* native controls render light (overrides the dark default on :root) */
  --bg-base:      #f5f5f5;
  --bg-surface:   #ffffff;
  --bg-elevated:  #f8f9fa;
  --bg-hover:     #eef0f2;
  --bg-active:    #e2e5e9;
  --border:       #d1d5db;
  --border-light: #e5e7eb;
  --border-focus: #3b82f6;
  --text-primary:   #111827;
  --text-secondary: #4b5563;
  --text-muted:     #9ca3af;
  --text-inverse:   #ffffff;
  --accent-orange:  #3b82f6;
  --accent-warm:    #60a5fa;
  --accent-gold:    #f59e0b;
  --accent-blue:    #3b82f6;
  --accent-red:     #ef4444;
  --accent-green:   #22c55e;
  --accent-purple:  #8b5cf6;
  --accent-primary: var(--accent-orange);
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow:     0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 20px rgba(59,130,246,0.15);
  --logo-gradient: linear-gradient(135deg, #3b82f6, #60a5fa);
  --logo-text-gradient: linear-gradient(135deg, #111827, #3b82f6);
  --logo-shadow: 0 2px 10px rgba(59,130,246,0.2);
  --logo-icon-filter: hue-rotate(30deg) saturate(1.2) brightness(0.9);
  --shift-night: #6366f1;
  --shift-morning: #f59e0b;
  --shift-afternoon: #22c55e;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; overflow-x: hidden; }
body {
  font-family: var(--font-ui);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent-orange); text-decoration: none; }
button { cursor: pointer; font-family: var(--font-ui); }
input, select, textarea { font-family: var(--font-ui); }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-focus); }

/* ── Layout Shell ───────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
}

/* ── Sidebar Nav ────────────────────────────────────────────── */
.sidebar {
  width: var(--nav-width);
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: width 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark {
  width: 36px; height: 36px;
  background: transparent;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.logo-icon {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: var(--logo-icon-filter, none);
}

.logo-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.logo-sub {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 1px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  overflow-y: auto;
  /* Reserva SIEMPRE el espacio del scrollbar: al abrir una categoría el scroll
     aparece/desaparece y sin esto todo el contenido salta ~6px horizontales. */
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Fade items out toward the bottom so they don't visually clash with the
     "Fichar entrada" button below — softer contrast as tabs approach it. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
}

/* ── Nav Categories (collapsible groups — mockup v4 style) ── */
.nav-category {
  display: flex;
  flex-direction: column;
}
.nav-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: all 0.15s;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  position: relative;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.nav-category:not(.collapsed) > .nav-cat-header { color: var(--text-primary); }
.nav-cat-header:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.nav-cat-header .nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-secondary);
  opacity: 0.8;
}
.nav-cat-header:hover .nav-icon { opacity: 1; }
.nav-cat-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
/* Chevron en caja: apunta a la derecha, rota 90° al abrir (estilo mockup 18) */
.nav-cat-chevron {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  color: var(--text-muted);
  transition: transform 0.18s ease, background 0.12s, color 0.12s;
}
.nav-cat-header:hover .nav-cat-chevron { background: var(--bg-hover); color: var(--text-primary); }
.nav-cat-chevron svg, .nav-cat-chevron i { width: 15px; height: 15px; }
.nav-category:not(.collapsed) .nav-cat-chevron {
  transform: rotate(90deg);
  color: var(--accent-orange);
}
/* Blob ROJO de notificaciones (solo Operaciones); se oculta al abrir — los badges por sub-item toman el relevo */
.nav-cat-notif {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--accent-red);
  border-radius: 9px;
  padding: 1px 7px;
  transition: opacity 0.15s;
}
.nav-category:not(.collapsed) .nav-cat-notif { opacity: 0; }

/* En el rail colapsado el blob se superpone al icono, arriba a la derecha, como cualquier badge
   de notificación. Antes seguía siendo un hermano del icono en el flex, así que se dibujaba AL
   LADO y ensanchaba la fila: el icono se corría a la izquierda y el rail quedaba torcido. */
.sidebar.collapsed .nav-cat-header { position: relative; }
.sidebar.collapsed .nav-cat-notif {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: 4px;           /* apenas a la derecha del icono, no del centro de la fila */
  padding: 0 4px;
  min-width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  border-radius: 8px;
  /* Aro del color del fondo de la barra (.sidebar usa --bg-surface): despega el blob del icono
     cuando se le monta encima, si no los dos rojos/grises se tocan y se lee como una mancha. */
  box-shadow: 0 0 0 2px var(--bg-surface);
  pointer-events: none;
}

/* (La fila "Secciones" con expandir/colapsar todo fue removida — quedan solo las categorías) */
.nav-cat-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  /* Sin márgenes a la derecha: los items llegan hasta el borde del sidebar
     para que los labels largos no queden recortados a 228px. */
  padding: 4px 0 4px 10px;
  margin: 2px 0 4px 14px;
  background: transparent;
  border-radius: 0;
  border: none;
  border-left: 2px solid var(--border);
  /* Abrir: fade+slide barato (solo opacity/transform, sin animar layout).
     Cerrar: display:none instantáneo — animar max-height rendía mal y dejaba
     los sub-items visibles mientras se cerraba. */
  animation: navCatIn 0.16s ease;
}
@keyframes navCatIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.nav-cat-items:has(.nav-item.active) {
  border-left-color: var(--accent-orange);
}
.nav-cat-items .nav-item {
  font-size: 13px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  /* Una sola línea: los labels largos se recortan en vez de envolver (ancho 228px) */
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
/* Dentro de una categoría el item activo no lleva la barrita naranja ::before:
   junto al riel del grupo formaba un "contenedor" doble y robaba ancho visual. */
.nav-cat-items .nav-item.active::before { display: none; }
.nav-category.collapsed .nav-cat-items {
  display: none;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.nav-item.active {
  background: rgba(249,115,22,0.1);
  color: var(--accent-orange);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--accent-orange);
  border-radius: 0 2px 2px 0;
}
.nav-item .nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.7;
}
.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
  color: var(--text-primary);
  opacity: 1;
}
.nav-badge {
  margin-left: auto;
  background: var(--accent-red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.nav-badge.blue { background: var(--accent-blue); }
.nav-badge.amber { background: var(--accent-gold); color: #000; }
/* Los badges del menú llevan `class="nav-badge badge badge-danger"`, y la regla genérica `.badge`
   está MÁS ABAJO en el archivo (padding 4px 12px, radio 20px, 12px de fuente). Con la misma
   especificidad gana la última, así que el blob del sidebar salía con el cuerpo de un badge de
   contenido: demasiado ancho para la fila, y como el item recorta con overflow:hidden terminaba
   cortado por el borde. Se sube la especificidad para que mande la versión del menú.
   Y `flex-shrink:0`: sin eso el badge se aplasta antes que el texto y queda un óvalo deforme —
   lo que tiene que recortarse es la etiqueta, no el número. */
.nav-item > .nav-badge,
.nav-cat-header > .nav-badge {
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  min-width: 18px;
  gap: 0;
  flex-shrink: 0;
  text-align: center;
  justify-content: center;
}

/* ── Sidebar Collapse Button ─────────────────────────────── */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  width: calc(100% - 16px);
  margin: 4px 8px;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--accent-orange);
}
.sidebar-collapse-btn .nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* ── Sidebar Collapsed State ─────────────────────────────── */
.sidebar.collapsed {
  width: 60px;
  overflow: visible;
}
.sidebar.collapsed ~ .sidebar-overlay ~ .main-content,
.sidebar.collapsed ~ .main-content {
  margin-left: 60px;
}

/* Hide all text labels */
.sidebar.collapsed .nav-text,
.sidebar.collapsed .logo-text,
.sidebar.collapsed .logo-sub,
.sidebar.collapsed .nav-cat-text,
.sidebar.collapsed .nav-cat-chevron {
  display: none;
}

/* Rotate collapse icon to point right */
.sidebar.collapsed .sidebar-collapse-btn .nav-icon {
  transform: rotate(180deg);
}

/* Logo area: center the AP mark */
.sidebar.collapsed .sidebar-logo {
  justify-content: center;
  padding: 16px 8px 12px;
  gap: 0;
}
.sidebar.collapsed .sidebar-logo > div:not(.logo-mark) {
  display: none;
}

/* Nav area: tighter padding, overflow visible for tooltips */
.sidebar.collapsed .sidebar-nav {
  padding: 8px 4px;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
}

/* Nav items: center icons. Flow/Globales items carry a RAW text label (no .nav-text
   span), so we zero the font to hide it — the icon keeps its fixed width/height. */
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 10px 0;
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar.collapsed .nav-item .nav-icon { font-size: 16px; }
/* Hide inline label spans + badges so only the icon shows in the rail */
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-item .nav-badge,
.sidebar.collapsed .nav-item .nav-ordenes-badge { display: none; }
.sidebar.collapsed .nav-item.active::before {
  top: 4px;
  bottom: 4px;
}

/* Category headers: center icons */
.sidebar.collapsed .nav-cat-header {
  justify-content: center;
  padding: 10px 0;
}

/* Collapse button: center */
.sidebar.collapsed .sidebar-collapse-btn {
  justify-content: center;
  padding: 8px 0;
  width: calc(100% - 8px);
  margin: 4px 4px;
}

/* Hide sub-items in collapsed sidebar */
.sidebar.collapsed .nav-cat-items {
  display: none !important;
}

/* Show sub-items as flyout on category hover */
.sidebar.collapsed .nav-category {
  position: relative;
}
.sidebar.collapsed .nav-category:hover .nav-cat-items {
  display: flex !important;
  position: absolute;
  left: 100%;
  top: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  min-width: 180px;
  max-height: none !important;
  box-shadow: var(--shadow-lg);
  margin: 0;
  border-left: none;
  z-index: 200;
}
.sidebar.collapsed .nav-category:hover .nav-cat-items .nav-item {
  justify-content: flex-start;
  padding: 8px 12px;
}

/* ── Nav-single: standalone items wrapped as categories for collapsed flyout ── */
/* When expanded: look like regular nav-items, hide sub-items */
.nav-single .nav-cat-items { display: none; }
.nav-single .nav-cat-header { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-top: 0; }
.nav-single .nav-cat-header:hover { color: var(--text-primary); }
.nav-single .nav-cat-header .nav-icon { opacity: 0.7; }
.nav-single .nav-cat-header:hover .nav-icon { opacity: 1; }
.nav-single .nav-cat-header.active { background: rgba(249,115,22,0.1); color: var(--accent-orange); }
.nav-single .nav-cat-header.active .nav-icon { color: var(--text-primary); opacity: 1; }
.nav-single .nav-cat-header.active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; background: var(--accent-orange); border-radius: 0 2px 2px 0;
}
/* When collapsed: show flyout on hover (inherited from .nav-category rules) */
.sidebar.collapsed .nav-single .nav-cat-items { display: none !important; }
.sidebar.collapsed .nav-single:hover .nav-cat-items { display: flex !important; }

/* (El switcher Ops/Markets y los flows fueron reemplazados por las categorías colapsables .nav-category) */
.nav-flow-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 8px;
  opacity: 0.7;
}
.nav-section-label {
  padding: 6px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nav-global-label { padding-left: 10px; }
/* Global category header container — sits on top of the Global list. */
.nav-global-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 6px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.nav-global-header .nav-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; color: var(--accent-orange); }
.nav-global-header-text { flex: 1; }
/* Global container — matches the top-category box. */
.nav-global {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  margin: 0 2px;
}

/* Collapsible groups inside Globales (Proyectos Pendientes / Generales) */
.nav-group { display: flex; flex-direction: column; }
.nav-group + .nav-group { margin-top: 6px; }
.nav-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
}
.nav-group-header:hover { color: var(--text-secondary); }
.nav-group-title { flex: 1; }
.nav-group-chevron { font-size: 9px; opacity: 0.55; transition: transform 0.2s ease; flex-shrink: 0; }
.nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.nav-group.collapsed .nav-group-items { display: none; }

/* Collapsed sidebar (feature disabled): icon-only fallbacks */
.sidebar.collapsed .nav-section-label { text-align: center; font-size: 8.5px; padding: 6px 0 4px; }
.sidebar.collapsed .nav-global-label { padding-left: 0; }
.sidebar.collapsed .nav-global-header,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-group-header { display: none; }
.sidebar.collapsed .nav-group.collapsed .nav-group-items { display: flex; }

/* Sidebar footer in collapsed */
/* En el rail sólo sobrevive el reloj (la fecha y el turno se ocultan abajo), pero el footer seguía
   siendo un flex alineado a la izquierda: el reloj quedaba pegado al borde y descentrado respecto
   de los iconos, que sí están centrados. */
.sidebar.collapsed .sidebar-footer {
  padding: 6px 4px;
  justify-content: center;
  gap: 0;
  text-align: center;
}
.sidebar.collapsed .sidebar-clock {
  font-size: 10px;
}
.sidebar.collapsed .sidebar-date,
.sidebar.collapsed .shift-indicator,
.sidebar.collapsed #week-badge {
  display: none;
}


/* Sidebar collapsed tooltip — styled via JS (appended to body) */
.sidebar-tooltip {
  position: fixed;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  z-index: 99999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  pointer-events: none;
  border: 1px solid var(--border);
}

/* Footer compacto: una sola línea reloj · fecha · turno (mockup 18) */
.sidebar-footer {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sidebar-clock {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.sidebar-date {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shift-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius);
  font-size: 10.5px;
  font-weight: 600;
  flex-shrink: 0;
}
.shift-indicator.night     { background: rgba(129,140,248,0.12); color: var(--shift-night); }
.shift-indicator.morning   { background: rgba(251,191,36,0.12);  color: var(--shift-morning); }
.shift-indicator.afternoon { background: rgba(74,222,128,0.12);  color: var(--shift-afternoon); }
.shift-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* ── Main Content ───────────────────────────────────────────── */
.main-content {
  margin-left: var(--nav-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  overflow-x: hidden;
  transition: margin-left 0.25s var(--ease-out);
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  min-height: var(--topbar-h);
  background: rgba(38,34,32,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin: 0;
  line-height: 1.2;
}
.topbar-subtitle {
  display: none;   /* Topbar Fina: ocultamos el subtítulo para dejar una sola línea (40px) */
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
/* ── Topbar Search Bar ──────────────────────────────────────── */
.tb-search { flex: 1; justify-content: center; }
.tb-search:hover { border-color: var(--border-focus); }
.tb-search:hover span { color: var(--text-secondary); }

/* ── Topbar Pills Layout ────────────────────────────────────── */
.topbar-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 16px;
}
/* Search ancha y centrada en el espacio libre entre el título y los accesos rápidos */
.tb-search {
  flex: 1;
  max-width: 440px;
  min-width: 0;
  margin: 0 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s;
}
.tb-search:hover { border-color: var(--text-muted); }
.tb-search svg, .tb-search i { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.tb-search-ph {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-search kbd {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: var(--font-ui);
}
@media (max-width: 1100px) {
  .tb-search { flex: 0 0 auto; margin: 0 8px; }
  .tb-search-ph { display: none; }
  .tb-search kbd { margin-left: 0; }
}
.tb-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: all 0.15s;
}
.tb-pill:hover {
  border-color: var(--bg-active);
  background: var(--bg-elevated);
}
.tb-pill .sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.tb-pill.week {
  color: var(--accent-orange);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.tb-pill.week:empty {
  display: none;
}
.tb-pill.user {
  gap: 8px;
  padding: 5px 6px 5px 14px;
}
.tb-pill.user .user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.tb-pill.logout {
  background: transparent;
  border-color: rgba(239,68,68,0.25);
  color: var(--accent-red);
  font-weight: 700;
  cursor: pointer;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: 11px;
}
.tb-pill.logout:hover {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.4);
}
/* Topbar shortcut pills (Ordenes, Mensajes, Comprar) */
.tb-pill.tb-shortcut {
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all 0.15s;
  border-radius: var(--radius-sm);
}
.tb-pill.tb-shortcut:hover {
  filter: brightness(1.2);
  background: var(--bg-elevated);
}

/* Marketplace horizontal tabs (comparador v4) */
.mp-htab {
  transition: background 0.15s;
}
.mp-htab:hover {
  background: var(--bg-elevated) !important;
}

/* ── Page Content ───────────────────────────────────────────── */
.page {
  display: none;
  flex: 1;
  padding: 24px;
  animation: fadeIn 0.2s var(--ease-out);
}
.page.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-ui);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  outline: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* El acento del TEMA, no el naranja fijo: cada tema redefine --accent-orange / --accent-warm
   (Midnight Ocean los pone en azul, Light SaaS también) y con #f97316 clavado el botón principal
   quedaba naranja en los 9. La primera box-shadow es el respaldo para navegadores sin color-mix. */
.btn-primary {
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-warm));
  color: var(--text-inverse);
  box-shadow: 0 2px 10px rgba(249,115,22,0.2);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-orange) 20%, transparent);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 18px rgba(249,115,22,0.3);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent-orange) 30%, transparent);
  opacity: 0.95;
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.btn-danger {
  background: rgba(239,68,68,0.12);
  color: var(--accent-red);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(239,68,68,0.2);
}

.btn-success {
  background: rgba(74,222,128,0.12);
  color: var(--accent-green);
}
.btn-success:hover:not(:disabled) {
  background: rgba(74,222,128,0.2);
}

.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-icon { padding: 7px; }

/* Week tab buttons for rotation schedules */
.week-tab-btn {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: none;
  transition: all 0.15s;
  cursor: pointer;
}
.week-tab-btn:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.week-tab-btn.active {
  background: var(--accent-orange);
  color: var(--text-inverse);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(249,115,22,0.2);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent-orange) 20%, transparent);
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body { padding: 20px; }
.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title .icon { color: var(--text-muted); }

/* ── Stats Row ──────────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--accent-color, var(--accent-orange));
  transition: all 0.2s;
}
.stat-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.stat-value {
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.stat-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.stat-icon {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 20px;
  opacity: 0.2;
}

/* ── Progress Bar ──────────────────────────────────────────── */
.progress-bar {
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
}
.progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-orange), var(--accent-gold));
  transition: width 0.5s;
}

/* ── Dashboard Layout ──────────────────────────────────────── */
.dash-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}
.dash-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.dash-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Stat Cards Row ────────────────────────────────────────── */
.dash-top-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  margin-bottom: 20px;
}
.dash-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.dash-encargados-panel {
  width: 260px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border-left: 3px solid #22c55e;
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.dash-encargados-panel .dash-panel-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
@media (max-width: 1100px) {
  .dash-top-row { grid-template-columns: 1fr; }
  .dash-encargados-panel { width: 100%; }
  .dash-stat-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dash-stat-cards { grid-template-columns: 1fr; }
}
.stat-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.stat-number {
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.stat-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.stat-badge-blue  { background: rgba(56,189,248,0.12); color: var(--accent-blue); }
.stat-badge-amber { background: rgba(245,158,11,0.12); color: var(--accent-gold); }
.stat-badge-green { background: rgba(52,211,153,0.12); color: var(--accent-green); }

/* ── Mid Row (Shifts + Wallet) ─────────────────────────────── */
.dash-mid-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 1000px) {
  .dash-mid-row { grid-template-columns: 1fr; }
}

.dash-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.dash-mid-row .dash-panel { margin-bottom: 0; }

.dash-panel-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-elevated);
}
.dash-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
}

/* Shifts panel */
.dash-panel-shifts .dash-shifts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.dash-panel-shifts .ops-card {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border);
}
.dash-panel-shifts .ops-card:last-child { border-right: none; }
.dash-panel-shifts .ops-card.current {
  box-shadow: inset 0 0 20px rgba(52, 211, 153, 0.1);
  filter: none;
  opacity: 1;
  background: rgba(52, 211, 153, 0.04);
  border-right-color: rgba(52, 211, 153, 0.3);
  position: relative;
}
.dash-panel-shifts .ops-card.current::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.3), 0 0 24px rgba(52, 211, 153, 0.15);
  pointer-events: none;
}
.dash-panel-shifts .ops-card.next { box-shadow: none; opacity: 0.7; }
.dash-panel-shifts .ops-card.prev { box-shadow: none; opacity: 0.7; }

/* Wallet panel */
.dash-panel-wallet {
  display: flex;
  flex-direction: column;
}
.dash-panel-wallet #wallet-balances-content {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  max-height: 360px;
}

/* Sales content padding */
.dash-panel #today-biggest-sales-content {
  padding: 10px;
}

/* ── Quick Access Row ──────────────────────────────────────── */
.dash-qa-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0 4px;
}
.dash-qa-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-right: 4px;
}
.qa-pill {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  background: rgba(128,128,128,0.1);
  color: var(--qa-color);
  border: 1px solid rgba(128,128,128,0.15);
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .qa-pill {
    background: color-mix(in srgb, var(--qa-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--qa-color) 20%, transparent);
  }
  .qa-pill:hover {
    background: color-mix(in srgb, var(--qa-color) 20%, transparent);
  }
}
.qa-pill:hover {
  transform: translateY(-1px);
}

/* ── Online User Pills ─────────────────────────────────────── */
.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(128,128,128,0.1);
  color: var(--pill-color);
  border: 1px solid rgba(128,128,128,0.15);
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .online-pill {
    background: color-mix(in srgb, var(--pill-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--pill-color) 20%, transparent);
  }
}
.online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

/* ── Operations Center ──────────────────────────────────────── */
.ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.ops-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}
.ops-card.current {
  box-shadow: var(--shadow);
}
.ops-card.next {
  opacity: 0.7;
}
.ops-card.prev {
  opacity: 0.7;
}

.ops-card-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}
.ops-card-header.current { background: rgba(249,115,22,0.08); }
.ops-card-header.prev    { background: rgba(139,148,158,0.05); }
.ops-card-header.next    { background: rgba(251,146,60,0.06); }

.ops-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.ops-card-label.current { color: var(--accent-orange); }
.ops-card-label.prev    { color: var(--text-muted); }
.ops-card-label.next    { color: var(--accent-warm); }

.ops-card-shift {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

.ops-card-body { padding: 6px 10px 8px; }

.ops-dept-row {
  margin-bottom: 5px;
}
.ops-dept-row:last-child { margin-bottom: 0; }

.ops-dept-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ops-headcount {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}
.ops-headcount.full  { background: rgba(74,222,128,0.12); color: var(--accent-green); }
.ops-headcount.part  { background: rgba(251,191,36,0.12); color: var(--accent-gold); }
.ops-headcount.empty { background: rgba(239,68,68,0.12); color: var(--accent-red); }

.ops-emp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.emp-chip {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 2px;
}
.emp-chip.present  { background: rgba(74,222,128,0.1);  color: var(--accent-green); }
.emp-chip.late     { background: rgba(251,191,36,0.1);  color: var(--accent-gold); }
.emp-chip.absent   { background: rgba(239,68,68,0.1);   color: var(--accent-red); }
.emp-chip.scheduled{ background: rgba(249,115,22,0.08); color: var(--accent-warm); }
.emp-chip.off      { background: rgba(74,85,104,0.2);   color: var(--text-muted); }
.chip-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ── Live Feed ──────────────────────────────────────────────── */
.live-feed {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.feed-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feed-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  animation: pulse 1.5s infinite;
}
.feed-list {
  max-height: 280px;
  overflow-y: auto;
}
.feed-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(70,64,61,0.5);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  transition: background 0.15s;
  animation: slideIn 0.3s var(--ease-out);
}
.feed-item:hover { background: var(--bg-elevated); }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.feed-item:last-child { border-bottom: none; }
.feed-time {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--text-muted);
  min-width: 42px;
}
.feed-badge {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.feed-badge.in   { background: rgba(74,222,128,0.15); color: var(--accent-green); }
.feed-badge.out  { background: rgba(139,148,158,0.15); color: var(--text-muted); }
.feed-badge.late { background: rgba(251,191,36,0.15); color: var(--accent-gold); }
.feed-badge.abs  { background: rgba(239,68,68,0.15); color: var(--accent-red); }
.feed-emp { color: var(--text-primary); font-weight: 500; }
.feed-detail { color: var(--text-muted); }

/* ── Schedule Calendar ──────────────────────────────────────── */
.calendar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.week-label {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 200px;
  text-align: center;
}

.schedule-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}
.schedule-table th {
  background: var(--bg-elevated);
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.schedule-table th.day-header {
  text-align: center;
  min-width: 120px;
}
.schedule-table th.today-col {
  color: var(--accent-orange);
  background: rgba(249,115,22,0.08);
}
.schedule-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  vertical-align: top;
}
.schedule-table td:last-child { border-right: none; }
.schedule-table tr:last-child td { border-bottom: none; }

.shift-row-label {
  padding: 8px 12px !important;
  white-space: nowrap;
}
.shift-row-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
}
.shift-row-tag.night     { background: rgba(129,140,248,0.1);  color: var(--shift-night); }
.shift-row-tag.morning   { background: rgba(251,191,36,0.1);   color: var(--shift-morning); }
.shift-row-tag.afternoon { background: rgba(52,211,153,0.1);   color: var(--shift-afternoon); }

.sched-cell {
  min-height: 60px;
  position: relative;
  transition: background 0.15s;
}
.sched-cell.today-col { background: rgba(249,115,22,0.03); }
.sched-cell:hover { background: var(--bg-hover); }

.sched-emp-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
}
.sched-emp-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: default;
  transition: all 0.1s;
  border: 1px solid transparent;
}
.sched-emp-tag:hover { border-color: var(--accent-red); color: var(--accent-red); }
.sched-emp-tag .remove-btn {
  opacity: 0;
  background: none;
  border: none;
  color: currentColor;
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  transition: opacity 0.1s;
}
.sched-emp-tag:hover .remove-btn { opacity: 1; }

.sched-cap {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 4px;
  font-variant-numeric: tabular-nums;
}
.sched-cap.warn  { color: var(--accent-gold); }
.sched-cap.full  { color: var(--accent-red); }

.add-emp-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border);
  width: 100%;
  transition: all 0.15s;
  margin-top: 2px;
}
.add-emp-btn:hover { border-color: var(--accent-orange); color: var(--accent-orange); background: rgba(249,115,22,0.05); }
.sched-cell.full .add-emp-btn { display: none; }

/* ── Employee Table ─────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table thead th {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr {
  border-bottom: 1px solid var(--border-light);   /* antes rgba fijo del tema cálido: en Light SaaS no se veía */
  transition: background 0.1s;
}
.data-table tbody tr:hover { background: var(--bg-elevated); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table td { padding: 14px 16px; font-size: 14px; vertical-align: middle; }

.emp-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-active);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
  border: 2px solid var(--border);
}

.emp-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.emp-name { font-weight: 600; color: var(--text-primary); }
.emp-discord { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.dept-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  margin: 1px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.status-badge.active   { background: rgba(74,222,128,0.12);  color: var(--accent-green); }
.status-badge.inactive { background: rgba(74,85,104,0.2);    color: var(--text-muted); }
.status-badge.present  { background: rgba(74,222,128,0.12);  color: var(--accent-green); }
.status-badge.late     { background: rgba(251,191,36,0.12);  color: var(--accent-gold); }
.status-badge.absent   { background: rgba(239,68,68,0.12);   color: var(--accent-red); }
.status-badge.leave    { background: rgba(192,132,252,0.12); color: var(--accent-purple); }
.status-badge.pending  { background: rgba(56,189,248,0.12);  color: var(--accent-blue); }
.status-badge.approved { background: rgba(74,222,128,0.12);  color: var(--accent-green); }
.status-badge.denied   { background: rgba(239,68,68,0.12);   color: var(--accent-red); }

/* ── Forms / Modals ─────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.15s;
}
.modal {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.2s var(--ease-out);
}
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 1100px; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.modal-body { padding: 20px 24px; }
.modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-control, .form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  outline: none;
  transition: all 0.15s;
}
.form-control:focus, .form-input:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-orange) 15%, transparent);
}
.form-control::placeholder, .form-input::placeholder { color: var(--text-muted); }
textarea.form-control {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-ui);
  line-height: 1.5;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
}
.checkbox-pill input { display: none; }
.checkbox-pill.checked {
  border-color: var(--accent-orange);
  background: rgba(249,115,22,0.1);
  color: var(--accent-orange);
}
.checkbox-pill:hover { border-color: var(--accent-orange); }

/* ── Search & Filters ───────────────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.search-input-wrap {
  position: relative;
  flex: 1;
  max-width: 320px;
}
.search-input-wrap .search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
}
.search-input:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-surface);
  padding: 4px;
  border-radius: var(--radius-lg);
  width: fit-content;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.tab-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-ui);
}
.tab-btn:hover:not(.active) { color: var(--text-primary); background: var(--bg-elevated); }
.tab-btn.active {
  background: var(--accent-orange);
  color: var(--text-inverse);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(249,115,22,0.2);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent-orange) 20%, transparent);
}

/* ── Alerts / Toast ─────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* ── Carril lateral: esquivar el blob de Mensajería ──────────────
   El blob (right:22 bottom:22, 58×58) y esta pila comparten la esquina, y el blob va en z-index
   99000 contra 9999 de acá — así que el toast más nuevo, que es el último de la columna, quedaba
   justo debajo. La pila se corre a la izquierda de la columna del blob (58 + 14 de aire) y conserva
   todo el alto para apilar. Las clases las pone messaging.js según el blob esté visible o no. */
html.msg-blob-on .toast-container { right: 92px; }
/* Con el panel abierto no alcanza con correrse al costado: el panel ocupa esa misma franja en
   vertical (right:22, desde bottom:92 hacia arriba), así que la pila además arranca por encima.
   --msg-panel-top lo publica messaging.js, que es quien conoce el alto real (es redimensionable). */
html.msg-panel-on .toast-container { bottom: var(--msg-panel-top, 92px); }
/* Angosto: una tarjeta mide 380px y al costado del blob ya no entra → vuelve al carril de arriba. */
@media (max-width: 560px) {
  html.msg-blob-on .toast-container { right: 12px; bottom: 92px; }
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  animation: slideInRight 0.3s var(--ease-out);
  min-width: 260px;
  max-width: 360px;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast.success { border-color: rgba(52,211,153,0.3); }
.toast.error   { border-color: rgba(248,113,113,0.3); }
.toast.warning { border-color: rgba(245,158,11,0.3); }
.toast.info    { border-color: rgba(96,165,250,0.3); }
.toast .toast-icon { font-size: 16px; }
.toast.success .toast-icon { color: var(--accent-green); }
.toast.error   .toast-icon { color: var(--accent-red); }
.toast.warning .toast-icon { color: var(--accent-gold); }
.toast.info    .toast-icon { color: #60a5fa; }
/* Rich message-notification card: big marketplace logo + text column (no ✓/ℹ icon). */
.toast-rich { max-width: 380px; padding: 12px 14px; }
/* ✕ close button in the card's top-right corner (toasts auto-dismiss after 8s; this closes early). */
.toast-rich-close {
  position: absolute; top: -3px; right: -3px;
  width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px;
  background: rgba(127,127,127,0.16); color: var(--text-secondary);
  font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.toast-rich-close:hover { background: rgba(127,127,127,0.34); color: var(--text-primary); }

/* ── Dispute Toast ─────────────────────────────────────────── */
@keyframes _disputePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%      { transform: scale(1.1); box-shadow: 0 0 12px 4px rgba(239,68,68,0.3); }
}
.toast-dispute {
  animation: slideInRight 0.3s var(--ease-out), _disputeGlow 2s ease-in-out infinite !important;
}
@keyframes _disputeGlow {
  0%, 100% { box-shadow: 0 8px 32px rgba(239,68,68,0.3); }
  50%      { box-shadow: 0 8px 40px rgba(239,68,68,0.6); }
}

/* ── Order Toast (in-app new order notification) ────────────── */
#order-toast-container {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.order-toast {
  width: 340px;
  background: rgba(22,27,34,0.97);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
  overflow: hidden;
  pointer-events: all;
  animation: orderToastIn 0.25s cubic-bezier(0.22,1,0.36,1);
}
.order-toast.dismissing {
  animation: orderToastOut 0.2s ease-in forwards;
}
@keyframes orderToastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes orderToastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(24px) scale(0.97); }
}
.order-toast-accent {
  height: 3px;
  width: 100%;
}
.order-toast-body {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px 10px;
}
.order-toast-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}
.order-toast-text { flex: 1; min-width: 0; }
.order-toast-title {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.93);
  line-height: 1.3;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-toast-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.48);
  line-height: 1.4;
  /* Varias filas (marketplace · qty · USD / título · comprador · #id) y cada una puede envolver
     hasta 2 líneas antes de recortar — antes era nowrap + "…" a los 90 caracteres. */
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.order-toast-title + .order-toast-sub { color: rgba(255,255,255,0.68); }
.order-toast-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.28);
  font-size: 15px;
  cursor: pointer;
  padding: 0 0 0 4px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: -1px;
}
.order-toast-close:hover { color: rgba(255,255,255,0.65); }
.order-toast-actions {
  display: flex;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.order-toast-btn {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.55);
  font-size: 11.5px;
  font-family: var(--font-ui);
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background .12s, color .12s;
}
.order-toast-btn:last-child { border-right: none; }
.order-toast-btn.primary { color: #60a5fa; font-weight: 600; }
.order-toast-btn:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.order-toast-btn.primary:hover { background: rgba(96,165,250,0.08); color: #93c5fd; }
.order-toast-progress {
  height: 2px;
  background: rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
}
.order-toast-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* ── Empty States ───────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.empty-state .icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
.empty-state h3 { font-size: 15px; color: var(--text-secondary); margin-bottom: 6px; }
.empty-state p  { font-size: 13px; }

/* ── Herramientas › Componentes (vitrina del sistema de diseño) ──────────────────────────────
   Muestra los componentes REALES con las clases globales, así cambian con el tema elegido. Acá
   sólo vive el armado de la vitrina; cada componente se estila donde siempre. */
.est-comp > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--text-primary); }
.est-comp > summary::-webkit-details-marker { display: none; }
.est-comp > summary .est-caret { display: inline-flex; color: var(--text-muted); transition: transform 0.15s; }
.est-comp[open] > summary .est-caret { transform: rotate(90deg); }
.est-comp-sub { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.est-grupo { margin-top: 20px; }
.est-grupo-tit { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin-bottom: 10px; }
.est-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.est-fila + .est-fila { margin-top: 8px; }
.est-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.est-swatches + .est-grupo-tit { margin-top: 12px; }
.est-sw { display: flex; align-items: center; gap: 8px; padding: 6px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-base); }
.est-sw-color { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm);
  border: 1px solid var(--border); }
.est-sw-nom { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.est-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.est-demo-out { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* ── Misc utilities ─────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.text-muted { color: var(--text-muted); }
.text-sm    { font-size: 12px; }
.text-xs    { font-size: 11px; }
.font-mono  { font-variant-numeric: tabular-nums; }
.font-bold  { font-weight: 700; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Dept color dots ────────────────────────────────────────── */
.dept-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ── Penalty badge ──────────────────────────────────────────── */
.penalty-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
}
.penalty-badge.owed { background: rgba(239,68,68,0.12); color: var(--accent-red); }
.penalty-badge.clear{ background: rgba(74,222,128,0.12); color: var(--accent-green); }

/* ── Requests sidebar ───────────────────────────────────────── */
.request-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.request-item:last-child { border-bottom: none; }
.request-item:hover { background: var(--bg-hover); }
.request-info { flex: 1; min-width: 0; }
.request-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.request-meta  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.request-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Dept settings ──────────────────────────────────────────── */
.dept-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  transition: all 0.15s;
}
.dept-card:hover { border-color: var(--accent-orange); }
.dept-card-info { flex: 1; }
.dept-card-name { font-weight: 600; font-size: 13px; }
.dept-card-meta { font-size: 11px; color: var(--text-muted); }

/* ── Color picker ───────────────────────────────────────────── */
.color-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.color-swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
}
.color-swatch.selected,
.color-swatch:hover { border-color: white; transform: scale(1.15); }

/* ── Data Analysis ──────────────────────────────────────────── */
.data-table-container {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.alert {
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.alert strong {
  color: var(--accent-orange);
  font-weight: 600;
}

.alert code {
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--accent-warm);
}

/* ── Sync Options ───────────────────────────────────────────── */
.sync-option:hover {
  border-color: var(--accent-orange) !important;
  background: rgba(249, 115, 22, 0.03) !important;
}

.sync-option input[type="radio"]:checked {
  accent-color: var(--accent-orange);
}

.modal-lg {
  max-width: 680px;
}

/* ── Analytics Control ──────────────────────────────────────── */
.analytics-filters {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

/* ── Compact analytics toolbar ── */
.an-toolbar {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.an-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.an-filter-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}
.an-filter-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  white-space: nowrap;
}
.an-select {
  padding: 5px 28px 5px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.15s;
}
.an-select:focus { border-color: var(--accent-orange); }
.an-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.an-dept-pills { display: flex; gap: 4px; }
.an-dept {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--dc) 40%, transparent);
  border-radius: 12px;
  background: transparent;
  color: var(--dc);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-ui);
  white-space: nowrap;
}
.an-dept:hover { background: color-mix(in srgb, var(--dc) 15%, transparent); }
.an-selector-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.an-search {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 11px;
  font-family: var(--font-ui);
  outline: none;
  width: 160px;
  flex-shrink: 0;
}
.an-search:focus { border-color: var(--accent-orange); }
.an-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}
.an-chip {
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-ui);
  white-space: nowrap;
}
.an-chip:hover { border-color: var(--accent-orange); color: var(--text-secondary); }
.an-chip.active { border-color: var(--accent-orange); background: rgba(249,115,22,0.12); color: var(--accent-orange); }

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.filter-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.form-select {
  width: 100%;
  padding: 10px 14px;
  padding-right: 32px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
  outline: none;
  transition: all 0.15s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.form-select:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-orange) 15%, transparent);
}

.analytics-status {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.analytics-chart-container {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-height: 500px;
  position: relative;
}

.analytics-chart-container canvas {
  max-height: 500px;
}

#analytics-chart-container {
  padding: 24px;
  min-height: 500px;
}

#analytics-chart-container h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

#analytics-chart-container h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 12px;
  color: var(--text-secondary);
}

.checkbox-label:hover {
  border-color: var(--accent-orange);
  background: var(--bg-hover);
  color: var(--text-primary);
}

.checkbox-label input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--accent-orange);
}

.checkbox-label input[type="checkbox"]:checked + span {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Extra Metrics Cards ────────────────────────────────────── */
.metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.metric-card:hover {
  border-color: var(--accent-orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.metric-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin: 0;
}

.metric-value {
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.metric-details {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.metric-details div {
  margin: 2px 0;
}

.page-header h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.page-header p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 4px 0 0 0;
}

/* ── Calendar Styles ────────────────────────────────────────── */
.calendar-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.calendar-header-row {
  display: contents;
}

.calendar-day-header {
  padding: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calendar-day {
  min-height: 200px;
  padding: 8px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s var(--ease-out);
  cursor: pointer;
  overflow: hidden;
}

.calendar-day:hover {
  border-color: var(--accent-orange);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
  transform: translateY(-2px);
}

.calendar-day-empty {
  background: transparent;
  border: none;
  min-height: 0;
  cursor: default;
}

.calendar-day-empty:hover {
  transform: none;
  box-shadow: none;
}

.calendar-day-today {
  border: 2px solid var(--accent-orange);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0.05) 100%);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.calendar-day-number {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.calendar-shifts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.calendar-shift {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.calendar-shift-label {
  padding: 6px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  min-width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.calendar-shift-label.morning {
  background: rgba(251,191,36,0.15);
  color: var(--shift-morning);
  border: 1px solid rgba(251,191,36,0.3);
}

.calendar-shift-label.afternoon {
  background: rgba(74,222,128,0.15);
  color: var(--shift-afternoon);
  border: 1px solid rgba(74,222,128,0.3);
}

.calendar-shift-label.night {
  background: rgba(129,140,248,0.15);
  color: var(--shift-night);
  border: 1px solid rgba(129,140,248,0.3);
}

.calendar-shift-employees {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  min-height: 26px;
  overflow: hidden;
}

/* New employee badge design with department prefix */
.cal-emp-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 3px;
  border-radius: 5px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.15s var(--ease-out);
}

.cal-emp-badge:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.cal-emp-dept {
  padding: 2px 5px;
  border-radius: 3px;
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}

.cal-emp-name {
  font-weight: 600;
  white-space: nowrap;
}

.cal-empty {
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  padding: 4px;
}

/* Compact ops cards for calendar */
.ops-card.compact {
  padding: 10px;
}

.ops-card-header.compact {
  padding: 6px 10px;
  margin: -10px -10px 8px -10px;
}

.ops-card-label {
  font-size: 11px;
}

.ops-card-body.compact {
  padding: 0;
  gap: 6px;
}

.ops-dept-row.compact {
  padding: 6px 8px;
  gap: 8px;
  align-items: center;
}

.ops-dept-row.compact .ops-dept-name {
  gap: 6px;
}

.ops-dept-row.compact .dept-dot {
  width: 8px;
  height: 8px;
}

.emp-chip.compact {
  padding: 4px 8px;
  font-size: 11px;
}

/* Ultra-compact ops cards for calendar shift status */
.ops-card.ultra-compact {
  padding: 8px;
}

.ops-card-header.ultra-compact {
  padding: 4px 8px;
  margin: -8px -8px 6px -8px;
  min-height: 28px;
}

.ops-card-body.ultra-compact {
  padding: 0;
  gap: 4px;
  display: flex;
  flex-direction: column;
}

/* Dashboard shifts: 2-col grid of dept mini-cards */
.dash-panel-shifts .ops-card-body.ultra-compact {
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ops-dept-row.ultra-compact {
  padding: 4px 6px;
  gap: 6px;
  align-items: center;
  display: flex;
  flex-direction: row;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  transition: all 0.15s var(--ease-out);
}

.ops-dept-row.ultra-compact:hover {
  background: var(--bg-hover);
}

.ops-dept-row.ultra-compact .dept-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
}

.emp-chip.ultra-compact {
  padding: 3px 6px;
  font-size: 10px;
  margin-left: auto;
}

/* ── Department mini-cards (Dashboard Turnos Hoy) ──────────── */
.ops-dept-card {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 6px 10px;
  transition: all 0.15s var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ops-dept-card:hover {
  background: var(--bg-hover);
}
.ops-dept-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ops-dept-card-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1;
}
.ops-dept-card-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ops-dept-card-worker {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

/* Badge styles */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.badge-green  { background: rgba(74,222,128,0.12); color: var(--accent-green); }
.badge-red    { background: rgba(239,68,68,0.12);  color: var(--accent-red); }
.badge-amber  { background: rgba(251,191,36,0.12); color: var(--accent-gold); }
.badge-orange { background: rgba(249,115,22,0.12); color: var(--accent-orange); }
.badge-blue   { background: rgba(56,189,248,0.12); color: var(--accent-blue); }
.badge-purple { background: rgba(192,132,252,0.12); color: var(--accent-purple); }
.badge-dot    { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.badge-success {
  background: rgba(52, 211, 153, 0.15);
  color: var(--accent-green);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.badge-muted {
  background: rgba(74, 85, 104, 0.15);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ── Sub-tab navigation ────────────────────────────────────── */
.sub-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
}
.sub-tab-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s;
}
.sub-tab-btn.active {
  border-bottom-color: var(--accent-primary);
  color: var(--accent-primary);
}
.sub-tab-btn:hover:not(.active) {
  color: var(--text-secondary);
}

@keyframes estilos-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Filter bar ────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.filter-bar label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Toolbar (page-level action bar) ─────────────────────── */
.page-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}

/* ── Stat/Summary box ──────────────────────────────────────── */
.stat-box {
  padding: 16px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.stat-box-value {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stat-box-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* ── Category badge (pill) ─────────────────────────────────── */
.cat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-size: 10px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Surveillance Panel ───────────────────────────────────── */
.surv-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.surv-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.surv-stat .live-dot { width: 8px; height: 8px; }
.surv-panel {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  min-height: 500px;
}
.surv-user-section,
.surv-feed-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.surv-section-title {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated);
}
.surv-section-title .live-dot { width: 6px; height: 6px; }
.surv-user-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  max-height: calc(100vh - 320px);
}
.surv-user-card {
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.2s;
}
.surv-user-card:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}
.surv-user-card.offline { opacity: 0.45; }
.surv-user-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.surv-user-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.surv-dot-online {
  background: var(--accent-green);
  box-shadow: 0 0 6px rgba(74,222,128,0.5);
  animation: pulse 1.5s infinite;
}
.surv-dot-offline { background: var(--text-muted); }
.surv-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surv-user-page {
  font-size: 11px;
  color: var(--accent-blue);
  margin-bottom: 2px;
  padding-left: 14px;
}
.surv-user-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 14px;
}
.surv-user-role {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.surv-user-time {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.surv-feed {
  overflow-y: auto;
  flex: 1;
  max-height: calc(100vh - 320px);
}
.surv-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(70,64,61,0.3);
  animation: slideIn 0.3s var(--ease-out);
  transition: background 0.1s;
}
.surv-feed-item:hover { background: var(--bg-elevated); }
.surv-feed-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  margin-top: 2px;
}
.surv-feed-content { flex: 1; min-width: 0; }
.surv-feed-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.surv-feed-user { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.surv-feed-action { font-size: 12px; color: var(--text-secondary); }
.surv-feed-detail {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
}
.surv-feed-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.surv-feed-time {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .surv-panel { grid-template-columns: 1fr; }
  .surv-user-grid { grid-template-columns: repeat(3, 1fr); max-height: 200px; }
  .surv-feed { max-height: 400px; }
}

/* ── Marketplace Custom Dropdown ──────────────────────────── */
.mp-custom-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  z-index: 50;
  margin-top: 2px;
}
.mp-dd-header {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  background: var(--bg-surface);
}
.mp-dd-item {
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mp-dd-item:hover {
  background: var(--bg-hover);
}
.mp-dd-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── Department-Games chip hover ─────────────────────────────── */
.dept-game-chip:hover {
  opacity: 0.8;
  transform: scale(1.02);
}

/* ── Hamburger Button (hidden on desktop) ──────────────────── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: all 0.2s;
}

/* ── Analytics Mobile: Monthly Comparison Cards ───────────── */
.ac-mobile-cards { display: none; }

.ac-comp-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 10px;
}
.ac-comp-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr;
  gap: 0;
  font-size: 11px;
}
.ac-comp-row {
  display: contents;
}
.ac-comp-row > span {
  padding: 5px 4px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ac-comp-row > span:first-child {
  text-align: left;
  font-size: 10px;
}
.ac-comp-header > span {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 4px 4px 6px;
}

/* ── Planillas Mobile Cards ────────────────────────────────── */
.plan-mobile-list { display: none; }

.plan-mobile-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}
.plan-mobile-card:active { border-color: var(--accent-primary); }
.plan-mobile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
}
.plan-mobile-details {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.plan-mobile-card.expanded .plan-mobile-details { display: block; }
.plan-mobile-card.expanded .emp-mobile-dots { color: var(--accent-primary); }

/* ── Marketplace Mobile Cards (Price History) ─────────────── */
.ph-mobile-list { display: none; }

.ph-mobile-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.ph-mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ph-mobile-game {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}
.ph-mobile-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}
.ph-mobile-label {
  color: var(--text-muted);
  font-size: 11px;
}
.ph-mobile-value {
  color: var(--text-secondary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── Sidebar Overlay ───────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* ── Employee Mobile Cards ──────────────────────────────────── */
.emp-mobile-list { display: none; }

.emp-mobile-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}
.emp-mobile-card:active { border-color: var(--accent-primary); }
.emp-mobile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
}
.emp-mobile-dots {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1;
  letter-spacing: 1px;
}
.emp-mobile-details {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.emp-mobile-card.expanded .emp-mobile-details { display: block; }
.emp-mobile-card.expanded .emp-mobile-dots { color: var(--accent-primary); }

/* ── Responsive: Tablet ────────────────────────────────────── */
@media (max-width: 1100px) {
  .ops-grid { grid-template-columns: 1fr 1fr; }
  .calendar-day { min-height: 160px; }
}

/* ── Responsive: Mobile (≤768px) ───────────────────────────── */
@media (max-width: 768px) {
  /* Show hamburger */
  .hamburger-btn { display: flex; }

  /* Sidebar: off-screen by default, slides in when open */
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
    width: min(280px, 80vw);
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }

  /* Main content: full width */
  .main-content { margin-left: 0 !important; }

  /* ── Reset collapsed sidebar on mobile — always show full sidebar ── */
  .sidebar.collapsed { width: min(280px, 80vw); overflow: hidden; }
  .sidebar-collapse-btn { display: none !important; }

  /* Undo all desktop collapsed text hiding */
  .sidebar.collapsed .nav-text,
  .sidebar.collapsed .logo-text,
  .sidebar.collapsed .logo-sub,
  .sidebar.collapsed .nav-cat-text,
  .sidebar.collapsed .nav-cat-chevron { display: unset !important; }

  /* Reset nav layout to normal (undo collapsed icon-only mode) */
  .sidebar.collapsed .sidebar-nav { padding: 12px 8px; overflow-y: auto; }
  .sidebar.collapsed .sidebar-logo { justify-content: flex-start; padding: 20px 20px 16px; }
  .sidebar.collapsed .sidebar-logo > div:not(.logo-mark) { display: block !important; }
  .sidebar.collapsed .nav-item { justify-content: flex-start; padding: 10px 14px; }
  .sidebar.collapsed .nav-cat-header { justify-content: flex-start; padding: 10px 14px; }
  .sidebar.collapsed .sidebar-footer { padding: 12px; }
  .sidebar.collapsed .sidebar-clock { font-size: 22px; }
  .sidebar.collapsed .sidebar-date,
  .sidebar.collapsed .shift-indicator,
  .sidebar.collapsed #week-badge { display: unset !important; }

  /* Reset nav-cat-items: undo collapsed flyout, restore normal inline */
  .sidebar.collapsed .nav-cat-items {
    display: flex !important;
    position: static !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin-left: 21px !important;
    padding-left: 14px !important;
    border-left: 1px solid var(--border) !important;
    min-width: auto !important;
    max-height: 400px !important;
    z-index: auto !important;
    padding: 0 !important;
    padding-left: 14px !important;
  }
  .sidebar.collapsed .nav-category { position: static !important; }
  /* Keep nav-single sub-items hidden on mobile (they navigate directly) */
  .sidebar.collapsed .nav-single .nav-cat-items { display: none !important; }
  .sidebar.collapsed .nav-category:hover .nav-cat-items {
    position: static !important;
    left: auto !important;
    top: auto !important;
  }
  .sidebar.collapsed .nav-category.collapsed .nav-cat-items { max-height: 0 !important; }

  /* Bigger touch targets on mobile */
  .nav-item { padding: 12px 14px; font-size: 14px; min-height: 44px; }
  .nav-cat-header { padding: 12px 14px; min-height: 44px; }
  .nav-cat-items .nav-item { padding: 10px 14px; min-height: 40px; }

  /* Topbar */
  .topbar {
    padding: 0 12px;
    gap: 8px;
    height: auto;
    min-height: var(--topbar-h);
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .topbar-title { font-size: 16px; }
  .topbar-subtitle { font-size: 10px; }
  .topbar-pills {
    gap: 4px;
  }
  /* Hide search bar and acceso rapido pills on mobile — too wide */
  .tb-search { display: none !important; }
  .tb-pill.ar-main,
  .tb-pill.acceso-rapido,
  .tb-pill.tb-shortcut { display: none !important; }
  .tb-pill.user { padding: 4px 5px 4px 10px; gap: 5px; }
  .tb-pill.user .user-name { font-size: 11px; }
  .tb-pill.user .cat-badge { font-size: 8px; padding: 1px 5px; }
  .tb-pill.logout { font-size: 10px; padding: 4px 8px; }

  /* Page content: less padding */
  .page { padding: 12px; }

  /* Grids */
  .ops-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* Calendar grid */
  .calendar-grid { gap: 4px; }
  .calendar-day { min-height: 100px; padding: 4px; }
  .calendar-day-number { font-size: 11px; margin-bottom: 4px; }
  .calendar-day-header { padding: 6px 2px; font-size: 9px; }
  .calendar-shifts { gap: 4px; }
  .calendar-shift { gap: 3px; }
  .cal-emp-badge { font-size: 8px; padding: 2px 3px; }
  .cal-emp-badge-detailed { font-size: 8px !important; padding: 2px 4px !important; }
  .cal-emp-dept { font-size: 7px; padding: 1px 3px; }
  .calendar-shift-label { min-width: 18px; height: 18px; font-size: 9px; padding: 2px; }
  .calendar-shift-employees { gap: 2px; min-height: 18px; }
  .calendar-employee { font-size: 9px; padding: 1px 4px; }
  .calendar-controls { gap: 6px; flex-wrap: wrap; justify-content: center; }
  .calendar-controls h3 { font-size: 14px !important; order: -1; width: 100%; text-align: center; }

  /* Rankings mobile — toolbar reflows into 3 rows:
     row 1: stats (left) + view switcher (right)
     row 2: filter input (full width)
     row 3: watcher tabs (horizontally scrollable) */
  .rank-toolbar { flex-wrap: wrap; gap: 6px; overflow: visible; }
  .rank-stats { order: 1; flex-shrink: 0; }
  .rank-toolbar-right { order: 2; margin-left: auto !important; }
  #rank-filter { order: 3; width: 100% !important; min-width: 0; }
  #rank-watcher-tabs { order: 4; width: 100%; overflow-x: auto !important; overflow-y: hidden; flex-shrink: 0; }
  /* Cards grid: single column on narrow screens */
  #rank-view-content > div[style*="grid"] { grid-template-columns: 1fr !important; }
  /* TopUps offer table: min-width so columns don't collapse */
  #mp-pub-topups-content table { min-width: 460px; }
  /* TopUps filter toolbar: cooldown section loses border when it wraps */
  .pub-topup-cooldown { border-left: none !important; padding-left: 0 !important; }
  /* TopUps game card header: chips wrap below game name */
  .pub-topup-hdr { flex-wrap: wrap !important; gap: 6px; }
  .pub-topup-hdr-right { flex-basis: 100%; flex-wrap: wrap; gap: 4px; }
  /* Hide verbose gameId meta on small screens */
  .pub-topup-meta { display: none; }

  /* Shift info cards: ultra-compact on mobile */
  .ops-grid { gap: 8px; margin-bottom: 12px; }
  .ops-card { border-radius: var(--radius); }
  .ops-card.ultra-compact { padding: 4px; }
  .ops-card-header.ultra-compact { padding: 3px 6px; margin: -4px -4px 4px -4px; min-height: 22px; }
  .ops-card-label { font-size: 8px !important; letter-spacing: 1px; }
  .ops-card-shift { font-size: 9px !important; }
  .ops-card-body.ultra-compact { gap: 2px; }
  .ops-dept-row.ultra-compact { padding: 2px 4px; gap: 4px; }
  .ops-dept-row.ultra-compact span { font-size: 9px !important; }
  .emp-chip.ultra-compact { padding: 2px 4px !important; font-size: 9px !important; }

  /* Employee filter checkboxes: tighter */
  #calendar-employee-checkboxes {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 4px !important;
    padding: 8px !important;
  }
  .checkbox-label { padding: 5px 6px !important; font-size: 12px !important; }

  /* Section spacing */
  .section-header { margin-bottom: 8px !important; }
  .section-title { font-size: 13px !important; }

  /* Modals: full-screen on mobile */
  .modal-overlay { padding: 8px; align-items: center; padding-top: 20px; }
  .modal-overlay:has(.modal-lg), .modal-overlay:has(.modal-xl) { align-items: flex-start; }
  .modal { max-width: 100%; border-radius: var(--radius-lg); }
  .modal-lg { max-width: 100%; }
  .modal-xl { max-width: 100%; }
  .modal-header { padding: 16px; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px; }

  /* Tables: scrollable inside their wraps — min-widths ensure columns don't collapse */
  .data-table { min-width: 500px; }
  .schedule-table { min-width: 600px; }
  .schedule-table th.day-header { min-width: 80px; }

  /* Employees: cards on mobile, table on desktop */
  .emp-desktop-table { display: none; }
  .emp-mobile-list { display: block; }

  /* Planillas: cards on mobile, table on desktop */
  .plan-desktop-table { display: none; }
  .plan-mobile-list { display: block; }

  /* Price History: cards on mobile, table on desktop */
  .ph-desktop-table { display: none; }
  .ph-mobile-list { display: block; }

  /* Analytics: monthly comparison cards on mobile, table on desktop */
  .ac-desktop-table { display: none; }
  .ac-mobile-cards { display: block; }

  /* Analytics: game metrics compact on mobile */
  .ac-game-metrics-wrap { padding: 12px !important; }
  .ac-metrics-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 8px !important; }
  .ac-metrics-grid .metric-card { padding: 10px !important; }
  .ac-metrics-grid .metric-value { font-size: 16px !important; }
  .ac-metrics-grid .metric-title { font-size: 9px !important; }

  /* Analytics: chart container tighter padding */
  #analytics-chart-container { padding: 0 !important; }
  #analytics-chart-container canvas { max-height: 280px; }

  /* Analytics: agent/game checkboxes compact */
  #agent-checkboxes, #game-checkboxes {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 6px !important;
  }

  /* Marketplace header: stack on mobile */
  #mp-header-actions { flex-wrap: wrap; justify-content: flex-end; }
  #mp-header-actions .btn { font-size: 11px; padding: 6px 10px; }

  /* Price history filter panel: compact on mobile */
  .ph-filter-panel { flex-wrap: wrap !important; gap: 8px !important; padding: 12px !important; }
  .ph-filter-panel .filter-group { flex: 1 1 140px !important; min-width: 0 !important; }

  /* Filter bars: stack vertically */
  .filter-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .analytics-filters { flex-direction: column; gap: 10px; padding: 12px; }
  .filter-group { min-width: 100%; }
  .search-bar { flex-wrap: wrap; }
  .search-input-wrap { max-width: 100%; }

  /* Inputs: prevent iOS auto-zoom (min 16px) */
  input, select, textarea, .form-control, .form-select, .form-input {
    font-size: 16px !important;
  }

  /* Buttons: larger touch targets */
  .btn { padding: 9px 14px; font-size: 13px; }
  .btn-sm { padding: 6px 12px; font-size: 12px; }

  /* Page toolbar: wrap */
  .page-toolbar { flex-wrap: wrap; gap: 8px; }

  /* Sub-tabs: scrollable */
  .sub-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sub-tab-btn { white-space: nowrap; padding: 8px 14px; font-size: 12px; }

  /* Toast: full width on mobile */
  .toast-container { left: 12px; right: 12px; bottom: 12px; }
  .toast { min-width: auto; max-width: 100%; }

  /* Login card */
  .login-card { width: 90%; max-width: 340px; padding: 28px 24px; }

  /* Stat cards */
  .stat-value { font-size: 22px; }
  .metric-value { font-size: 22px; }

  /* Comisiones page: stack layout */
  .com-layout {
    flex-direction: column !important;
    height: auto !important;
  }
  .com-game-panel {
    width: 100% !important;
    min-width: 0 !important;
    position: static !important;
  }
  .com-cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Indonesia IDR converter: stack on mobile */
  .com-idr-grid {
    grid-template-columns: 1fr !important;
  }

  /* PA Competir: stack game sections on mobile */
  .pa-competir-grid {
    grid-template-columns: 1fr !important;
  }

  /* Marketplace filters: 2-column grid on mobile */
  .mp-filter-panel {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    padding: 12px !important;
  }
  .mp-filter-panel .filter-group { min-width: 0 !important; }
  .mp-filter-panel .btn { min-height: 38px; }

  /* Platform ranking: tighter on mobile */
  #mp-platform-chart { padding: 8px !important; }

  /* Sellers panel: tighter on mobile */
  #mp-sellers-panel { padding: 10px !important; }

  /* Dashboard: wallet on top, turnos stacked below */
  .dash-top-row {
    flex-direction: column !important;
  }
  .dash-wallet-col {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .dash-right-col {
    width: 100% !important;
  }
  .dash-shifts-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  .dash-sales-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Generic responsive 2-col → 1-col */
  .responsive-2col {
    grid-template-columns: 1fr !important;
  }

  /* Marketplaces: sellers grid 4-col → 2-col on mobile */
  .mp-sellers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Marketplaces: chart+sellers sidebar → stack */
  .mp-charts-row {
    grid-template-columns: 1fr !important;
  }

  /* Settings: 2-col → 1-col */
  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  /* Swap request form: 3-col → 1-col */
  .swap-form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Log tables: reduce column widths */
  .log-table th,
  .log-table td {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
  .log-table th {
    white-space: nowrap;
  }

  /* Table scroll indicator: right-edge fade on scrollable tables */
  .table-scroll-wrap {
    position: relative;
  }
  .table-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--bg-surface));
    pointer-events: none;
    opacity: 0.7;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  /* Metric card titles: bump from 10px inline */
  .metric-title {
    font-size: 11px !important;
  }

  /* Section headers: stack on mobile */
  .section-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }

  /* Tabs: horizontally scrollable */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    /* .tabs trae width:fit-content, así que la CAJA misma medía 497px en una pantalla de 393:
       su propio overflow-x:auto no servía de nada porque lo que se pasaba era el elemento, no
       su contenido. Con el tope, el scroll interno por fin funciona. */
    max-width: 100%;
  }
  .tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Messaging: chat tabs scrollable on mobile */
  .msg-tab-btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
    white-space: nowrap;
  }

  /* Herramientas: theme cards stack on mobile */
  .estilos-theme-card {
    min-width: 140px !important;
  }

  /* Acceso Rapido: modal full-width on mobile */
  .ar-modal {
    width: 95vw;
    max-height: 80vh;
  }
  .ar-config-slot {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Tooltips: disable on touch — they block taps */
  [data-tooltip]::after {
    display: none !important;
  }

  /* Safe area insets for notch devices */
  .topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .toast-container {
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* Prevent body horizontal scroll */
  .main-content {
    overflow-x: hidden;
  }
}

/* ── Touch device: hover alternatives ──────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover-only tooltip popups on touch */
  [data-tooltip]::after {
    display: none !important;
  }
  /* Make tap targets more generous */
  .btn-sm {
    min-height: 36px;
  }
  /* Remove hover color shifts that flash on tap */
  .nav-item:hover {
    background: transparent;
  }
  .nav-item:active {
    background: var(--bg-hover);
  }
}

/* ── Responsive: Small Mobile (≤480px) ─────────────────────── */
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }
  .calendar-grid { grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .calendar-day { min-height: 80px; padding: 3px; }
  .calendar-day-number { font-size: 10px; margin-bottom: 3px; }
  .calendar-day-header { padding: 4px 1px; font-size: 8px; }
  .calendar-shift { gap: 2px; }
  .calendar-shift-label { min-width: 14px; height: 14px; font-size: 8px; padding: 1px; }
  .calendar-shift-employees { gap: 1px; min-height: 14px; }
  .cal-emp-badge { font-size: 7px; padding: 1px 2px; }
  .cal-emp-badge-detailed { font-size: 7px !important; padding: 1px 2px !important; }
  .cal-emp-dept { display: none; }
  .topbar-title { font-size: 14px; }

  /* Shift cards: even tighter */
  .ops-card-header.ultra-compact { padding: 2px 4px; min-height: 20px; }
  .ops-dept-row.ultra-compact { padding: 1px 3px; }
  .ops-card.current { box-shadow: var(--shadow); }
  .ops-card.next, .ops-card.prev { box-shadow: none; }

  /* Employee filter: 2 columns min */
  #calendar-employee-checkboxes {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Comisiones: PA inputs stack */
  #com-pa-price, #com-pa-qty {
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  /* Sellers grid: 2-col → 1-col on very small screens */
  .mp-sellers-grid {
    grid-template-columns: 1fr !important;
  }
  .dash-sales-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Price history summary: tighter on small screens */
  #ph-summary {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    gap: 6px !important;
  }
  #ph-summary .stat-box { padding: 8px !important; }

  /* Analytics: comparison card even tighter */
  .ac-comp-card { padding: 10px; }
  .ac-comp-grid { font-size: 10px; }
  .ac-comp-row > span { padding: 4px 2px; }
  .ac-comp-header > span { font-size: 8px; }
  .ac-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ac-metrics-grid .metric-value { font-size: 14px !important; }
  #ph-summary .stat-box-value { font-size: 16px !important; }
  #ph-summary .stat-box-label { font-size: 9px !important; }

  /* Planillas mobile: smaller cards */
  .plan-mobile-row { padding: 10px 12px; }
  .plan-mobile-details { padding: 0 12px 12px; }
}

/* ── Custom Tooltips ──────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--bg-hover);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
}
[data-tooltip]:hover::after {
  opacity: 1;
}

/* ── Rankings layout (fill available space) ───────────────── */
#page-marketplaces.page.active { display:flex; flex-direction:column; }
#mp-publicaciones-panel.mp-panel-active { display:flex !important; flex-direction:column; flex:1; min-height:0; }
#pub-subtab-watchers-content { display:flex; flex-direction:column; flex:1; min-height:0; }
#pub-subtab-topups-content { display:flex; flex-direction:column; flex:1; min-height:0; }
#mp-pub-content { display:flex; flex-direction:column; flex:1; min-height:0; }
#mp-pub-topups-content { display:flex; flex-direction:column; flex:1; min-height:0; }
#rank-view-content { flex:1; display:flex; flex-direction:column; min-height:0; }
#rank-view-content > div { flex:1; min-height:0; }

/* ── Offer toggle table ────────────────────────────────────── */
#ofr-toggle-list table tbody tr { border-bottom:1px solid var(--border); transition:background 0.1s; }
#ofr-toggle-list table tbody tr:last-child { border-bottom:none; }
#ofr-toggle-list table tbody tr:hover { background:var(--bg-hover); }

/* ── Rankings toolbar ──────────────────────────────────────── */
.rank-toolbar { display:flex; align-items:center; gap:4px; padding:8px 0 4px; border-bottom:1px solid var(--border); margin-bottom:10px; flex-wrap:nowrap; overflow:hidden; }
.rank-stats { font-size:12px; color:var(--text-muted); }
#rank-filter { padding:4px 10px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-elevated); color:var(--text-primary); font-size:12px; width:min(180px, 100%); }
#rank-filter::placeholder { color:var(--text-muted); }
.rank-view-switcher { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.rank-view-btn { padding:4px 10px; font-size:14px; background:var(--bg-elevated); color:var(--text-muted); border:none; cursor:pointer; transition:all 0.15s; line-height:1; }
.rank-view-btn:not(:last-child) { border-right:1px solid var(--border); }
.rank-view-btn:hover { color:var(--text-primary); background:var(--bg-hover); }
.rank-view-btn.active { color:var(--accent); background:rgba(249,115,22,0.1); }

/* ── Rankings Tabla ──────────────────────────────────────────── */
.rank-table-wrap { overflow-x:auto; max-height:calc(100vh - 130px); overflow-y:auto; }
.rank-table { width:100%; min-width:620px; border-collapse:collapse; font-size:13px; }
.rank-table th { position:sticky; top:0; background:var(--bg-elevated); padding:8px 6px; font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.3px; border-bottom:2px solid var(--border); border-left:2px solid var(--border); z-index:3; }
.rank-table th:nth-child(-n+3) { border-left:none; }
.rank-table th:first-child { text-align:center; }
.rank-t-row { border-bottom:1px solid var(--border); }
.rank-t-row:hover { background:var(--bg-hover); }
.rank-t-row[data-filtered="true"] { display:none; }
.rank-t-row--group-start { border-top:3px solid var(--accent-blue); }
.rank-t-row--group-start > .rank-t-game { }
.rank-t-game { font-weight:700; padding:4px 12px; vertical-align:middle; text-align:center; border-right:1px solid var(--border); font-size:13px; color:var(--text-primary); white-space:nowrap; }
.rank-t-server { padding:3px 8px; color:var(--text-primary); font-size:12px; white-space:nowrap; border-right:1px solid var(--border); min-width:60px; }
.rank-t-cell { padding:3px 4px; white-space:nowrap; text-align:center; border-left:2px solid var(--border); }
.rank-t-cell-layout { display:flex; align-items:center; gap:3px; width:100%; }
.rank-t-cell-inner { display:flex; align-items:center; gap:3px; cursor:pointer; flex:1; min-width:0; }
.rank-t-cell-inner:hover { opacity:0.8; }
.rank-t-cell-actions { display:flex; align-items:center; gap:1px; flex-shrink:0; min-width:72px; justify-content:flex-end; }
.rank-t-pos { font-weight:800; font-size:14px; min-width:26px; text-align:right; flex-shrink:0; }
.rank-t-price { font-size:12px; font-family:var(--font-mono); text-align:left; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rank-t-wbtn { display:inline-flex; align-items:center; justify-content:center; min-width:22px; min-height:22px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-surface); cursor:pointer; font-size:12px; font-weight:700; line-height:1; vertical-align:middle; margin:0; padding:2px 3px; transition:background 0.15s,border-color 0.15s; }
.rank-t-wbtn:hover { filter:brightness(1.15); }
.rank-t-wbtn--active { color:#22c55e; border-color:rgba(34,197,94,0.3); background:rgba(34,197,94,0.06); }
.rank-t-wbtn--active:hover { background:rgba(34,197,94,0.15); border-color:#22c55e; }
.rank-t-wbtn--paused { color:#f59e0b; border-color:rgba(245,158,11,0.3); background:rgba(245,158,11,0.06); }
.rank-t-wbtn--paused:hover { background:rgba(245,158,11,0.15); border-color:#f59e0b; }
.rank-t-wbtn--error { color:#ef4444; border-color:rgba(239,68,68,0.3); background:rgba(239,68,68,0.06); }
.rank-t-wbtn--error:hover { background:rgba(239,68,68,0.15); border-color:#ef4444; }
.rank-t-wbtn--edit { color:var(--text-muted); border-color:var(--border); background:var(--bg-surface); font-size:12px; }
.rank-t-wbtn--edit:hover { color:#f97316; background:rgba(249,115,22,0.1); border-color:rgba(249,115,22,0.4); }
.rank-t-wbtn--del { color:var(--text-muted); border-color:var(--border); background:var(--bg-surface); font-size:10px; }
.rank-t-wbtn--del:hover { color:#ef4444; background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.4); }

/* Table style 2: Roomy */
.rank-table--roomy { font-size:14px; }
.rank-table--roomy .rank-t-row { border-bottom:1px solid var(--border); }
.rank-table--roomy .rank-t-pos { font-size:16px; }
.rank-table--roomy .rank-t-price { font-size:14px; }
.rank-table--roomy .rank-t-game { font-size:14px; padding:8px 14px; }
.rank-table--roomy .rank-t-server { font-size:13px; padding:8px 12px; }
/* Table style 3: Heatmap — cell bg set inline, stronger row lines */
.rank-table--heatmap .rank-t-row { border-bottom:1px solid var(--border); }
.rank-table--heatmap .rank-t-cell { transition:background 0.15s; }

@media (max-width:960px) {
  .rank-table { font-size:12px; }
}

/* ── Crear Ofertas Panel ──────────────────────────────────── */
.crear-selector-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.crear-form-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.crear-form-header {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crear-form-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.crear-form-body {
  padding: 10px 12px;
}
.crear-field-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
/* Compact overrides scoped to crear forms */
.crear-form-card .form-group {
  margin-bottom: 6px;
}
.crear-form-card .form-label {
  font-size: 11px;
  margin-bottom: 2px;
}
.crear-form-card .form-control,
.crear-form-card .form-input {
  padding: 5px 8px;
  font-size: 12px;
}
.crear-form-card textarea.form-control {
  min-height: 36px;
  line-height: 1.4;
}
.crear-form-card .btn {
  padding: 5px 10px;
  font-size: 11px;
}
.crear-form-card .btn-primary {
  padding: 6px 16px;
}
@media (max-width: 768px) {
  .crear-field-row { flex-direction: column; }
}

/* ── Crear Ofertas: Section cards ─────────────────────────── */
.crear-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  margin-bottom: 12px;
  overflow: hidden;
}
.crear-section-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
}
.crear-section-header .badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.crear-section-body {
  padding: 12px;
}
.crear-section-body .form-group { margin-bottom: 8px; }
.crear-section-body .form-group:last-child { margin-bottom: 0; }
.crear-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
}
.crear-mode-toggle button {
  padding: 6px 16px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.crear-mode-toggle button.active {
  background: var(--accent-blue);
  color: #fff;
}
.crear-mode-toggle button:hover:not(.active) {
  background: var(--bg-surface);
  color: var(--text-primary);
}
/* Bulk upload table */
.crear-bulk-table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
}
.crear-bulk-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
}
.crear-bulk-table td {
  padding: 5px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  color: var(--text-secondary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crear-bulk-table tr:hover td { background: var(--bg-surface); }
.crear-bulk-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.crear-bulk-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-surface);
  overflow: hidden;
  margin-bottom: 6px;
}
.crear-bulk-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent-blue);
  transition: width 0.3s ease;
  width: 0%;
}
/* Image upload preview */
.crear-img-preview {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
/* Visible borders on inputs/selects inside crear sections */
.crear-section .form-control,
.crear-section .form-input {
  border: 1px solid var(--border);
}
.crear-section .form-control:focus,
.crear-section .form-input:focus {
  border-color: var(--accent-orange);
}
.crear-section select.form-control {
  cursor: pointer;
}

/* ── Vendedores copy-on-click cells ───────────────────────── */
.mp-copy-cell {
  transition: background 0.15s, opacity 0.15s;
  border-radius: 3px;
  padding: 0 2px;
}
.mp-copy-cell:hover {
  background: rgba(255,255,255,0.06);
  opacity: 0.85;
}

/* ── Acceso Rapido — Topbar Buttons ─────────────────────────── */
.tb-pill.ar-main {
  cursor: pointer;
  padding: 6px 8px;
  color: var(--text-muted);
  transition: all 0.2s;
  display: flex;
  align-items: center;
}
.tb-pill.ar-main:hover {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
  background: var(--bg-elevated);
}
.tb-pill.acceso-rapido {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s;
  min-width: 32px;
  text-align: center;
  white-space: nowrap;
}
.tb-pill.acceso-rapido.empty-slot {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 400;
  min-width: 32px;
  opacity: 0.6;
}
.tb-pill.acceso-rapido.empty-slot:hover {
  opacity: 1;
  color: var(--accent-orange);
  border-color: var(--accent-orange);
}
.tb-pill.acceso-rapido.has-shortcut:hover {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
  background: var(--bg-elevated);
}

/* ── Acceso Rapido — Config Section ─────────────────────────── */
.ar-config-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.ar-config-slot.has-value {
  border-color: var(--accent-orange);
  border-left: 3px solid var(--accent-orange);
}
.ar-config-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.ar-config-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: all 0.15s;
}
.ar-config-btn:hover {
  background: var(--bg-hover);
}
.ar-config-btn.add {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
}
.ar-config-btn.add:hover {
  background: rgba(249,115,22,0.1);
}
.ar-config-btn.remove {
  color: #ef4444;
  border-color: #ef4444;
  font-size: 14px;
  padding: 2px 8px;
}
.ar-config-btn.remove:hover {
  background: rgba(239,68,68,0.1);
}

/* ── Acceso Rapido — Modal ──────────────────────────────────── */
#acceso-rapido-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.ar-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 360px;
  max-width: 90vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.ar-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ar-modal-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 50vh;
}
.ar-modal-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}
.ar-modal-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}
.ar-modal-search {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.ar-modal-search:focus {
  border-color: var(--accent-orange);
}
.ar-modal-search::placeholder {
  color: var(--text-muted);
}

/* ── Markets Offer IDs ─────────────────────────────────────── */
.moi-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.moi-content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 900px) { .moi-content { grid-template-columns: 1fr; } }
.moi-loading, .moi-error { color: var(--text-muted); padding: 24px; text-align: center; }
.moi-error { color: var(--accent-red); }

.moi-marketplace { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; }
.moi-mp-header {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  cursor: pointer; user-select: none; background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light);
}
.moi-mp-header:hover { background: var(--bg-hover); }
.moi-mp-name { font-weight: 600; font-size: 15px; color: var(--accent-orange); }
.moi-mp-count { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.moi-mp-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }

.moi-chevron { color: var(--text-muted); font-size: 12px; transition: transform 0.15s; display: inline-block; width: 14px; }
.moi-chevron.open { transform: rotate(90deg); }

.moi-type-section { background: var(--bg-base); border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden; }
.moi-type-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  cursor: pointer; user-select: none;
}
.moi-type-header:hover { background: var(--bg-hover); }
.moi-type-name { font-weight: 500; font-size: 13px; color: var(--text-primary); }
.moi-type-count { font-size: 11px; color: var(--text-muted); }
.moi-type-body { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 4px; }

.moi-game { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 5px; overflow: hidden; }
.moi-game-header {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  cursor: pointer; user-select: none; font-size: 13px;
}
.moi-game-header:hover { background: var(--bg-hover); }
.moi-game-name { font-weight: 500; color: var(--text-primary); }
.moi-val-badge {
  font-size: 10px; color: var(--text-muted); background: var(--bg-elevated);
  padding: 1px 6px; border-radius: 3px; margin-left: 4px;
}
.moi-game-body { padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 3px; }

.moi-val-row { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.moi-val-empty { color: var(--text-muted); font-style: italic; font-size: 12px; }

.moi-input {
  flex: 1; min-width: 0; padding: 4px 8px; font-size: 12px; font-family: 'Consolas', 'Monaco', monospace;
  background: var(--bg-base); border: 1px solid var(--border-light); border-radius: 4px;
  color: var(--text-primary); outline: none;
}
.moi-input:focus { border-color: var(--accent-orange); }
.moi-input.moi-saved { border-color: var(--accent-green); background: rgba(74, 222, 128, 0.08); }
.moi-input-key { max-width: 140px; }

.moi-save-btn {
  padding: 3px 10px; font-size: 11px; font-weight: 500; cursor: pointer;
  background: var(--accent-orange); color: var(--text-inverse); border: none; border-radius: 4px;
  white-space: nowrap;
}
.moi-save-btn:hover { filter: brightness(1.1); }

.moi-del-btn, .moi-del-btn-sm {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 13px; padding: 2px 4px; border-radius: 3px; line-height: 1;
}
.moi-del-btn:hover, .moi-del-btn-sm:hover { color: var(--accent-red); background: rgba(239,68,68,0.1); }
.moi-del-btn { margin-left: auto; }

.moi-add-btn {
  margin-left: auto; background: none; border: 1px solid var(--border-light);
  color: var(--accent-green); cursor: pointer; font-size: 16px; width: 24px; height: 24px;
  border-radius: 4px; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.moi-add-btn:hover { background: rgba(74, 222, 128, 0.1); border-color: var(--accent-green); }

.moi-add-row { padding-top: 4px; border-top: 1px dashed var(--border-light); margin-top: 4px; }

.moi-arr-idx { font-size: 11px; color: var(--text-muted); min-width: 28px; font-family: monospace; }
.moi-kv-key { font-size: 12px; color: var(--text-secondary); min-width: 80px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* ============================================================
   PHASE 2+4 — SubTabs, Separators, Skeletons, Badges,
   Command Palette, Notification Center, Breadcrumbs, Compact
   ============================================================ */

/* ── SubTabs Component ───────────────────────────────────────── */
.subtabs-bar {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.subtabs-bar::-webkit-scrollbar { display: none; }
.subtabs-bar.sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
}
.subtab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
}
.subtab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.subtab.active {
  background: var(--accent-primary);
  color: var(--text-inverse);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.subtab-badge {
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ef4444;
  color: white;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
  flex-shrink: 0;
}
.subtab.active .subtab-badge {
  background: rgba(255,255,255,0.3);
  color: var(--text-inverse);
}
.subtabs-bar.subtabs-sm .subtab { padding: 6px 12px; font-size: 12px; }

/* ── Comparador Game Tabs (inline with header) ───────────── */
.comp-tabs-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0;
}
.comp-tabs-bar::-webkit-scrollbar { display: none; }
.comp-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-ui);
  line-height: 1;
}
.comp-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-focus, var(--border));
}
.comp-tab.active {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border-color: var(--accent-primary);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.comp-tab-close {
  font-size: 14px;
  line-height: 1;
  opacity: 0.55;
  margin-left: 2px;
  transition: opacity 0.1s, color 0.1s;
  display: inline-flex;
  align-items: center;
}
.comp-tab:hover .comp-tab-close { opacity: 0.85; }
.comp-tab-close:hover { opacity: 1 !important; color: #ef4444; }
.comp-tab.active .comp-tab-close { opacity: 0.7; color: var(--text-inverse); }
.comp-tab.active .comp-tab-close:hover { opacity: 1 !important; color: #fca5a5; }
.comp-tab-add {
  padding: 4px 8px;
  border-style: dashed;
  color: var(--text-muted);
}
.comp-tab-add:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  border-style: solid;
  background: var(--bg-hover);
}

/* Subtab content panel animation */
.subtab-panel {
  animation: subtab-slide-in 0.15s ease;
}
@keyframes subtab-slide-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sidebar Separators ──────────────────────────────────────── */
.nav-separator {
  border-top: 1px solid var(--border-light);
  margin: 8px 16px 4px;
  padding-top: 8px;
}
.nav-separator span {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.sidebar.collapsed .nav-separator span { display: none; }
.sidebar.collapsed .nav-separator { margin: 8px 8px 4px; }

/* ── Breadcrumb Bar ──────────────────────────────────────────── */
.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 0;
  margin-top: -2px;
}
.breadcrumb-item {
  cursor: pointer;
  transition: color 0.15s;
}
.breadcrumb-item:hover {
  color: var(--accent-primary);
}
.breadcrumb-sep {
  margin: 0 2px;
  opacity: 0.4;
  font-size: 9px;
}
.breadcrumb-current {
  color: var(--text-secondary);
  font-weight: 600;
  cursor: default;
}

/* ── Skeleton Loaders ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius);
}
@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text   { height: 14px; margin-bottom: 8px; }
.skeleton-title  { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-card   { height: 120px; margin-bottom: 12px; }
.skeleton-row    { height: 40px; margin-bottom: 4px; border-radius: var(--radius-sm); }
.skeleton-circle { border-radius: 50%; }

/* ── Unified Badge Component ─────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  line-height: 1;
  flex-shrink: 0;
}
.badge-danger  { background: #ef4444; color: white; }
.badge-warning { background: #f59e0b; color: white; }
.badge-success { background: #22c55e; color: white; }
.badge-info    { background: #3b82f6; color: white; }
.badge-muted   { background: var(--bg-elevated); color: var(--text-muted); }

/* ── Command Palette (Ctrl+K) ────────────────────────────────── */
.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: cmd-fade-in 0.1s ease;
}
@keyframes cmd-fade-in { from { opacity: 0; } to { opacity: 1; } }

.cmd-palette {
  width: 520px;
  max-width: 90vw;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0,0,0,0.3);
  overflow: hidden;
  animation: cmd-slide-in 0.15s var(--ease-out);
}

/* ── Ctrl+K — Columna "Mas visitadas" ────────────────────────
   Buscador arriba a todo lo ancho; debajo, resultados (70%) + mas visitadas (30%).
   Solo aparece cuando el usuario YA tiene visitas registradas: sin historial el palette queda
   igual que siempre (520px, una sola columna). */
.cmd-palette.has-side { width: 760px; }
.cmd-palette-body {
  display: flex;
  align-items: stretch;
  max-height: 360px;     /* el alto lo manda la caja, no cada columna: las dos miden igual */
}
.cmd-palette.has-side .cmd-palette-results {
  flex: 1 1 70%;
  min-width: 0;          /* sin esto un label largo estira la columna y se come el 30% */
  max-height: none;      /* lo fija .cmd-palette-body */
}
.cmd-palette-side {
  flex: 0 0 30%;
  min-width: 0;
  border-left: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: 12px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmd-side-title {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0 8px 8px;
}
.cmd-side-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  min-height: 0;
}
.cmd-side-list::-webkit-scrollbar { width: 4px; }
.cmd-side-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.cmd-side-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-ui);
  text-align: left;
  text-decoration: none;   /* es un <a href> (Ctrl+clic → pestaña nueva) */
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.cmd-side-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.cmd-side-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmd-side-kbd {
  flex-shrink: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 9px;
  color: var(--text-muted);
}
/* En pantallas angostas la columna estorba mas de lo que ayuda: el palette vuelve a una sola. */
@media (max-width: 800px) {
  .cmd-palette.has-side { width: 520px; }
  .cmd-palette-side { display: none; }
  .cmd-palette.has-side .cmd-palette-results { flex: 1 1 100%; }
}
@keyframes cmd-slide-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cmd-palette-input {
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--font-ui);
  outline: none;
}
.cmd-palette-input::placeholder { color: var(--text-muted); }
.cmd-palette-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}
.cmd-palette-results::-webkit-scrollbar { width: 4px; }
.cmd-palette-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.cmd-result {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.1s;
}
.cmd-result:hover, .cmd-result.selected {
  background: var(--bg-hover);
}
.cmd-result-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}
.cmd-result.selected .cmd-result-icon {
  background: var(--accent-primary);
  color: var(--text-inverse);
}
.cmd-result-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.cmd-result-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.cmd-cat-header {
  padding: 6px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.cmd-cat-header:first-child { border-top: none; margin-top: 0; }
.cmd-palette-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 16px;
}
.cmd-palette-footer kbd {
  background: var(--bg-elevated);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  border: 1px solid var(--border);
}

/* ── Notification Center ─────────────────────────────────────── */
@keyframes notif-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  gap: 10px;
  transition: background 0.1s;
}
.notif-item:hover { background: var(--bg-hover); }
.notif-item.unread { background: rgba(245, 158, 11, 0.10); border-left: 3px solid #f59e0b; }
.notif-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.notif-item-msg { font-size: 11px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Notificaciones full tab (under Chat Plataformas) */
#notif-col-orders .notif-item,
#notif-col-messages .notif-item { padding: 14px 16px; border-bottom: 1px solid var(--border); border-radius: 0; }
#notif-col-orders .notif-item:last-child,
#notif-col-messages .notif-item:last-child { border-bottom: none; }
#notif-col-orders .notif-item.unread,
#notif-col-messages .notif-item.unread { background: rgba(245, 158, 11, 0.10); border-left: 3px solid #f59e0b; }
#notif-col-orders .notif-item-msg,
#notif-col-messages .notif-item-msg { white-space: normal; }
#notif-col-orders .notif-item-title,
#notif-col-messages .notif-item-title { font-size: 14px; }
#notif-col-orders .notif-item-time,
#notif-col-messages .notif-item-time { font-size: 11px; }

/* Centro de Atencion filter buttons */
.notif-filter-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all 0.15s;
}
.notif-filter-btn:hover { border-color: var(--accent-orange); color: var(--text-secondary); }
.notif-filter-btn.active {
  border-color: var(--accent-orange);
  background: rgba(249,115,22,0.1);
  color: var(--accent-orange);
}

/* ══════════════════════════════════════════════════════════════
   UX AUDIT v4 — New Component Styles
   ══════════════════════════════════════════════════════════════ */

/* ── Marketplace color vars ─────────────────────────────────── */
:root {
  --eldorado: #eab308;
  --g2g: #ef4444;
  --gameboost: #3b82f6;
  --pa: #27A6F5;
}

/* ── Dashboard v4: Header ───────────────────────────────────── */
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dash-head h2 { font-size: 18px; font-weight: 700; }
.dash-refresh { padding: 5px 12px; font-size: 11px; font-weight: 600; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); }
.dash-refresh:hover { border-color: var(--accent-orange); color: var(--text-primary); }

/* ── Dashboard v4: Attention Banner ─────────────────────────── */
.attn { background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(251,191,36,0.06)); border: 1px solid rgba(239,68,68,0.15); border-radius: var(--radius); padding: 10px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.attn-icon { width: 32px; height: 32px; background: rgba(239,68,68,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.attn-items { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
.attn-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); cursor: pointer; }
.attn-c { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; }
.attn-c.r { background: #ef4444; color: #fff; }
.attn-c.y { background: #fbbf24; color: var(--text-inverse); }
.attn-c.b { background: #38bdf8; color: var(--text-inverse); }

/* ── Dashboard v4: KPIs ─────────────────────────────────────── */
.kpi-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.kpi-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.kpi-val { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi-cmp { display: flex; gap: 12px; margin-top: 8px; font-size: 10px; color: var(--text-muted); }
.up { color: #4ade80; font-weight: 600; }
.dn { color: #ef4444; font-weight: 600; }
.fl { color: #fbbf24; font-weight: 600; }
.opills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.opill { font-size: 10px; padding: 2px 8px; background: var(--bg-surface); border-radius: 10px; color: var(--text-secondary); display: flex; align-items: center; gap: 3px; }

/* ── Dashboard v4: Turnos + Finanzas Row ─────────────────────── */
.mid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.panel-title { font-size: 14px; font-weight: 700; }
.panel-action { font-size: 11px; color: var(--accent-orange); cursor: pointer; }
.panel-action:hover { color: var(--accent-warm); }
.shift-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.shift-card:last-child { margin-bottom: 0; }
.shift-card.cur { border-color: var(--accent-orange); background: rgba(249,115,22,0.04); }
.s-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.s-info { flex: 1; }
.s-name { font-size: 12px; font-weight: 600; }
.s-workers { font-size: 10px; color: var(--text-muted); }
.s-tag { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.w-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--bg-surface); border-radius: 6px; margin-bottom: 4px; }
.w-row:last-child { margin-bottom: 0; }
.w-plat { font-size: 11px; color: var(--text-secondary); }
.w-amt { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.w-sec { font-size: 9px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; margin-bottom: 6px; margin-top: 10px; }
.w-sec:first-child { margin-top: 0; }

/* ── Dashboard v4: Sales Section ─────────────────────────────── */
.sales-section { margin-bottom: 16px; }
.sales-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sales-head h3 { font-size: 14px; font-weight: 700; }
.date-nav { display: flex; align-items: center; gap: 4px; }
.date-btn { padding: 4px 8px; font-size: 11px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); border-radius: 4px; cursor: pointer; font-family: var(--font-ui); }
.date-btn:hover { border-color: var(--accent-orange); color: var(--text-secondary); }
.date-btn.active { color: var(--accent-orange); border-color: var(--accent-orange); }

/* ── Dashboard v4: Projection Panel ─────────────────────────── */
.proj-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 0; }
.proj-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.proj-head h3 { font-size: 14px; font-weight: 700; }
.proj-month { font-size: 11px; color: var(--accent-orange); font-weight: 600; }
.proj-bar { height: 14px; background: var(--bg-active); border-radius: 7px; position: relative; overflow: hidden; margin-bottom: 6px; }
.proj-bar-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, #f97316, #fb923c); position: relative; }
.proj-bar-fill::after { content: ''; position: absolute; right: 0; top: -2px; bottom: -2px; width: 3px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,0.5); }
.proj-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-bottom: 14px; }
.proj-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.ps { text-align: center; }
.ps-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.ps-val { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ── Dashboard v4: Donut + Horizontal Bars ───────────────────── */
.sales-viz { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.donut-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-container { position: relative; width: 180px; height: 180px; }
.donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.donut-total-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.donut-total-value { font-size: 22px; font-weight: 800; color: #4ade80; font-variant-numeric: tabular-nums; }
.donut-total-count { font-size: 10px; color: var(--text-muted); }
.donut-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; width: 100%; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.legend-name { color: var(--text-secondary); flex: 1; }
.legend-pct { color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.legend-val { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; }
.hbar-chart { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.hbar-row { display: grid; grid-template-columns: 100px 1fr 80px 50px; gap: 10px; align-items: center; }
.hbar-name { font-size: 12px; font-weight: 600; text-align: right; }
.hbar-track { height: 28px; background: var(--bg-active); border-radius: 6px; position: relative; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-size: 10px; font-weight: 700; color: var(--text-inverse); min-width: 30px; transition: width 0.5s ease; }
.hbar-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.hbar-ops { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: center; }

/* ── Dashboard v4: Trend Chart ───────────────────────────────── */
.trend-chart { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; position: relative; }
.trend-label { font-size: 10px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; }
.chart-svg { width: 100%; }
.chart-svg text { font-family: 'Inter', sans-serif; }
.chart-legend { display: flex; gap: 16px; margin-top: 8px; justify-content: center; }
.chart-legend-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-muted); }
.chart-legend-line { width: 16px; height: 2px; border-radius: 1px; }

/* ── Comparador v5: Summary Cards Row ────────────────────────── */
.mp-summary-row { display: flex; gap: 8px; margin-bottom: 12px; }
.mp-summary-card {
  flex: 1; padding: 8px 12px; position: relative;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: all 0.15s;
}
.mp-summary-card:hover { background: var(--bg-elevated); }
.mp-tab-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.mp-label { font-size: 7px; font-weight: 800; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; }
.label-best { background: #4ade80; color: var(--text-inverse); }
.label-reventa { background: #a855f7; color: #fff; }

/* ── Comparador v5: 4-Column Grid ────────────────────────────── */
.mp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 1200px) { .mp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .mp-grid { grid-template-columns: 1fr; } }

.mp-col {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.mp-col-head {
  padding: 8px 12px; display: flex; flex-direction: column; gap: 0;
  border-bottom: 2px solid var(--border);
}
.mp-col-badge {
  font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 4px;
  color: #fff; text-transform: uppercase; letter-spacing: 0.3px;
}
.mp-col-count { font-size: 10px; color: var(--text-muted); }
.watcher-btn {
  padding: 4px 10px; font-size: 10px; font-weight: 700; border-radius: var(--radius-sm);
  border: none; color: #fff;
  cursor: pointer; transition: opacity 0.15s; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.watcher-btn:hover { opacity: 0.85; }

/* Boton "Offers" del encabezado de columna: ocupa el lugar donde antes iba el
   label de puesto, y conserva su color (verde = tenemos oferta, gris = sin oferta). */
.mp-offers-btn {
  margin-left: auto; padding: 2px 7px; font-size: 9px; font-weight: 700;
  border: none; border-radius: 3px; cursor: pointer; font-family: inherit;
  white-space: nowrap; letter-spacing: 0.3px; transition: filter 0.15s;
}
.mp-offers-btn:hover { filter: brightness(1.3); }

/* ── Toplist: modal de Offer IDs ─────────────────────────────── */
.tlo-body { display: flex; flex-direction: column; gap: 12px; }
.tlo-head { display: flex; gap: 24px; flex-wrap: wrap; }
.tlo-head div, .tlo-kv div { display: flex; flex-direction: column; gap: 2px; }
.tlo-head span, .tlo-kv span {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.tlo-head b { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.tlo-kv { display: flex; gap: 24px; flex-wrap: wrap; }
.tlo-kv b { font-size: 13px; font-family: var(--font-mono); color: var(--text-primary); }
.tlo-path {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elevated); font-size: 11px; font-family: var(--font-mono);
}
.tlo-path code { color: var(--text-muted); }
.tlo-seg { color: var(--text-primary); font-weight: 600; }
.tlo-arrow { color: var(--text-muted); }
.tlo-textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elevated); color: var(--text-primary);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
}
.tlo-add { display: flex; gap: 8px; align-items: center; }
.tlo-add input {
  flex: 1; padding: 8px 12px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elevated); color: var(--text-primary);
  font-family: var(--font-mono); font-size: 12px;
}
.tlo-note {
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 11px; line-height: 1.5;
  color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border);
}
.tlo-note-info { border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.08); }
.tlo-note-warn { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.09); }
.tlo-note code { font-family: var(--font-mono); font-size: 10px; word-break: break-all; }
/* "Conectar ID": nuestra oferta encontrada en Raw Data, para confirmar (js/toplist-offers.js) */
.tlo-sug { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-surface); border: 1px solid var(--border); }
.tlo-sug-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-primary); }
.tlo-sug-main code { font-size: 11px; color: var(--text-secondary); }
.tlo-sug-main a { font-size: 11px; font-weight: 600; color: var(--accent-orange, #f97316); text-decoration: none; }
.tlo-sug-dim { color: var(--text-muted); font-size: 10.5px; }
.tlo-sug .btn { white-space: nowrap; flex: none; }
@media (max-width: 520px) { .tlo-sug { flex-direction: column; align-items: stretch; } }
.tlo-status { padding: 8px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; }
.tlo-status-info { color: var(--text-muted); background: var(--bg-elevated); }
.tlo-status-error { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

/* ── Comparador v5: Our Offer Strip ──────────────────────────── */
.our-strip {
  padding: 5px 12px; display: flex; align-items: center; gap: 6px;
  background: rgba(74,222,128,0.03); border-bottom: 1px solid var(--border);
  font-size: 10px; flex-wrap: wrap;
}
.our-strip-tag { font-size: 8px; font-weight: 800; color: #4ade80; text-transform: uppercase; letter-spacing: 0.5px; }
.our-strip-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.our-strip-label { color: var(--text-muted); font-size: 9px; }
.our-strip-sep { width: 1px; height: 14px; background: var(--border); flex-shrink: 0; }

/* ── Comparador v5: Sellers Table ────────────────────────────── */
.sellers-wrap { flex: 1; overflow-y: auto; max-height: 360px; }
.sellers-wrap table { width: 100%; border-collapse: collapse; }
.sellers-wrap th {
  text-align: left; padding: 5px 8px; font-size: 8px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600; letter-spacing: 0.3px;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
.sellers-wrap th.r { text-align: right; }
.sellers-wrap td {
  padding: 4px 8px; font-size: 11px; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light, var(--border)); font-variant-numeric: tabular-nums;
}
.sellers-wrap td.r { text-align: right; font-weight: 600; }
.sellers-wrap tr:hover td { background: var(--bg-hover, var(--bg-elevated)); }
.sellers-wrap .us td { background: rgba(74,222,128,0.06); }
.sellers-wrap .us .seller { color: #4ade80; font-weight: 700; }
.seller {
  font-weight: 600; color: var(--text-primary); cursor: pointer;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;
}
.seller:hover { color: var(--accent-orange); }
.rk { width: 22px; text-align: center; font-weight: 700; font-size: 10px; }

/* ── Comparador v5: Price Editor Strip ───────────────────────── */
.price-strip {
  padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--bg-elevated); flex-shrink: 0;
}

/* ── Comparador v5: Add Game Button ──────────────────────────── */
.mp-add-game-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; margin-top: 12px;
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  background: var(--bg-surface); color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s;
  font-family: var(--font-ui);
}
.mp-add-game-btn:hover { border-color: var(--accent-orange); color: var(--accent-orange); background: rgba(249,115,22,0.04); }

/* ── Comparador v4: Watcher Modal ────────────────────────────── */
.watcher-modal {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); position: relative;
}
.watcher-modal h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.watcher-close { position: absolute; top: 16px; right: 16px; background: var(--bg-elevated); border: none; border-radius: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; }
.watcher-field { margin-bottom: 14px; }
.watcher-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 6px; display: block; }
.watcher-input { width: 100%; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-size: 14px; font-family: inherit; }
.watcher-input:focus { outline: none; border-color: var(--accent-orange); box-shadow: 0 0 0 3px rgba(249,115,22,0.15); }
.watcher-hint { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.watcher-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ── Attention Center (Notificaciones v4) ────────────────────── */
.attn-center { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.attn-header { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.attn-header h2 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.attn-count-total { background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.attn-filters { display: flex; gap: 4px; }
.attn-filter {
  padding: 5px 12px; font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px;
  cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 4px;
  font-family: var(--font-ui);
}
.attn-filter:hover { color: var(--text-secondary); border-color: var(--accent-orange); }
.attn-filter.active { color: var(--accent-orange); border-color: var(--accent-orange); background: rgba(249,115,22,0.1); }
.attn-filter .f-count { font-size: 9px; background: var(--bg-active); padding: 1px 5px; border-radius: 8px; }
.attn-filter.active .f-count { background: rgba(249,115,22,0.2); }
.attn-list { padding: 8px; }
.attn-item-v4 {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border-radius: var(--radius); cursor: pointer; transition: background 0.15s; position: relative;
}
.attn-item-v4:hover { background: var(--bg-elevated); }
.attn-item-v4.read { opacity: 0.55; }
.attn-item-v4.read:hover { opacity: 0.8; }
.attn-item-v4 + .attn-item-v4 { border-top: 1px solid var(--border-light); }
.attn-icon-wrap { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.attn-icon-wrap i { width: 18px; height: 18px; }
.attn-body { flex: 1; min-width: 0; }
.attn-title-v4 { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.attn-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.attn-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.attn-time-v4 { font-size: 10px; color: var(--text-muted); }
.attn-source { font-size: 9px; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.attn-action {
  padding: 5px 10px; font-size: 11px; font-weight: 600; border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-secondary); border-radius: var(--radius-sm);
  cursor: pointer; flex-shrink: 0; align-self: center; transition: all 0.15s;
  font-family: var(--font-ui);
}
.attn-action:hover { border-color: var(--accent-orange); color: var(--accent-orange); }
.attn-action.primary { background: var(--accent-orange); color: var(--text-inverse); border-color: var(--accent-orange); }
.priority-dot { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; }
.priority-high { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.4); }
.priority-medium { background: #fbbf24; }
.priority-low { background: #38bdf8; }

/* ── Audit Sheets: Row check + Column select (Mockup 11) ─────── */
.as-row-check {
  width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all 0.15s; margin: 0 auto;
}
.as-row-check:hover { border-color: #4ade80; }
.as-row-checked td { text-decoration: line-through; text-decoration-color: rgba(74,222,128,0.5); color: var(--text-muted) !important; background: rgba(74,222,128,0.03) !important; }
.as-row-checked td:first-child { text-decoration: none; }
.as-row-checked .as-row-check { background: #4ade80; border-color: #4ade80; }
.as-row-checked .as-row-check::after { content: '✓'; color: var(--text-inverse); font-size: 10px; font-weight: 700; }
.as-col-selected { color: #3b82f6 !important; position: relative; }
.as-col-highlight { background: rgba(59,130,246,0.06) !important; color: #3b82f6 !important; font-weight: 600 !important; }

/* ── Unified Page Container (Mockup 03 — Analitica) ─────────── */
.unified-page {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.unified-header { padding: 20px 24px 0; }
.unified-header h2 { font-size: 20px; font-weight: 700; }
.unified-header p { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.unified-tabs {
  display: flex; gap: 0; padding: 16px 24px 0; border-bottom: 1px solid var(--border);
}
.unified-tab {
  padding: 10px 20px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 6px; background: none; border-top: none;
  border-left: none; border-right: none; font-family: var(--font-ui);
}
.unified-tab:hover { color: var(--text-secondary); }
.unified-tab.active { color: var(--accent-orange); border-bottom-color: var(--accent-orange); }
.unified-tab i { width: 14px; height: 14px; }
.unified-body { padding: 20px 24px; }

/* ── Unified Button System (Mockup 06) ───────────────────────── */
.btn-new {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui);
  font-weight: 600; border: none; border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.15s; line-height: 1;
}
.btn-new i { flex-shrink: 0; }
/* Sizes */
.btn-xs { padding: 4px 8px; font-size: 11px; border-radius: 4px; }
.btn-xs i { width: 12px; height: 12px; }
.btn-sm-new { padding: 6px 12px; font-size: 12px; }
.btn-sm-new i { width: 14px; height: 14px; }
.btn-md { padding: 8px 16px; font-size: 13px; }
.btn-md i { width: 15px; height: 15px; }
.btn-lg-new { padding: 10px 20px; font-size: 14px; }
.btn-lg-new i { width: 16px; height: 16px; }
/* Variants */
.btn-primary-new { background: var(--accent-orange); color: var(--text-inverse); }
.btn-primary-new:hover { background: var(--accent-warm); }
.btn-secondary-new { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); }
.btn-secondary-new:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-ghost-new { background: transparent; color: var(--text-secondary); }
.btn-ghost-new:hover { background: var(--bg-elevated); color: var(--text-primary); }
.btn-danger-new { background: #ef4444; color: #fff; }
.btn-danger-new:hover { background: #dc2626; }
.btn-success-new { background: #4ade80; color: var(--text-inverse); }
.btn-success-new:hover { background: #22c55e; }
.btn-outline-danger { background: transparent; color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.btn-outline-danger:hover { background: rgba(239,68,68,0.1); }

/* ── Unified Form Labels (Mockup 06) ─────────────────────────── */
.form-label-new {
  font-size: 10px; color: var(--text-muted); text-transform: uppercase;
  font-weight: 600; letter-spacing: 0.5px; margin-bottom: 6px; display: block;
}
.form-required { color: #ef4444; }

/* ── Agente Unificado (Mockup 09) ────────────────────────────── */
.equipo-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.equipo-tab { padding: 10px 20px; font-size: 13px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; background: none; border-left: none; border-right: none; border-top: none; font-family: var(--font-ui); }
.equipo-tab:hover { color: var(--text-secondary); }
.equipo-tab.active { color: var(--accent-orange); border-bottom-color: var(--accent-orange); }
.equipo-tab i { width: 14px; height: 14px; }
.equipo-tab .eq-badge { font-size: 9px; background: var(--bg-active); padding: 1px 5px; border-radius: 8px; margin-left: 2px; }

.agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1000px) { .agent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .agent-grid { grid-template-columns: 1fr; } }
.agent-card { background: var(--bg-elevated); border: 0.5px solid var(--border); border-radius: 12px; padding: 18px; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.agent-card:hover { border-color: rgba(249,115,22,0.45); transform: translateY(-1px); }
.agent-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.emp-avatar-wrap { position: relative; flex-shrink: 0; }
.agent-status-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: #1D9E75; border: 2px solid var(--bg-elevated); }
.agent-identity { flex: 1; min-width: 0; }
.agent-name { font-weight: 500; font-size: 15px; margin: 0; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-role { font-size: 13px; color: var(--text-secondary); margin: 2px 0 0; }
.agent-shift-pill { font-size: 11px; padding: 4px 10px; border-radius: 999px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; }
.agent-shift-pill i { width: 12px; height: 12px; }
.agent-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.agent-stat { background: var(--bg-surface); border-radius: 8px; padding: 10px; }
.agent-stat-label { font-size: 11px; color: var(--text-secondary); margin: 0 0 4px; }
.agent-stat-val { font-size: 18px; font-weight: 500; margin: 0; color: var(--text-primary); }
.agent-stat-val--small { font-size: 14px; padding-top: 3px; }
.agent-stat-val--success { color: #1D9E75; }
.agent-stat-val--danger { color: #ef4444; }
.agent-shift-info { border-top: 0.5px solid var(--border); padding-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.agent-shift-info i { width: 14px; height: 14px; flex-shrink: 0; }

/* Detail panel */
.detail-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.detail-header { padding: 20px 24px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); }
.detail-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #f97316, #fbbf24); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; color: var(--text-inverse); flex-shrink: 0; }
.detail-info { flex: 1; }
.detail-name { font-size: 18px; font-weight: 700; }
.detail-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 12px; }
.detail-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
.detail-tab { padding: 10px 18px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 5px; background: none; border-left: none; border-right: none; border-top: none; font-family: var(--font-ui); }
.detail-tab:hover { color: var(--text-secondary); }
.detail-tab.active { color: var(--accent-orange); border-bottom-color: var(--accent-orange); }
.detail-tab i { width: 13px; height: 13px; }
.detail-body { padding: 20px 24px; }

/* Schedule rows */
.sched-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-elevated); border-radius: 6px; margin-bottom: 4px; }
.sched-day { font-size: 11px; font-weight: 600; min-width: 100px; }
.sched-shift { font-size: 11px; padding: 3px 10px; border-radius: 4px; font-weight: 600; }
.sched-time { font-size: 10px; color: var(--text-muted); margin-left: auto; }

/* Team calendar table */
.team-cal { width: 100%; border-collapse: collapse; }
.team-cal th { padding: 8px 6px; font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; text-align: center; border-bottom: 1px solid var(--border); }
.team-cal td { padding: 6px; text-align: center; border-bottom: 1px solid var(--border-light); }
.team-cal .agent-col { text-align: left; font-size: 12px; font-weight: 600; padding-left: 10px; min-width: 120px; }
.team-cal .shift-cell { font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 4px; display: inline-block; min-width: 28px; }

/* ── Compact Mode ────────────────────────────────────────────── */
body.compact .card { padding: 12px; }
body.compact .stat-card { padding: 12px; }
body.compact table td, body.compact table th { padding: 6px 10px; font-size: 12px; }
body.compact .section-title { font-size: 14px; margin-bottom: 8px; }
body.compact .subtab { padding: 6px 12px; font-size: 12px; }
body.compact .filter-group label { font-size: 10px; }
body.compact .form-input, body.compact .form-select { padding: 6px 10px; font-size: 12px; }

/* ── Sidebar Collapsed Tooltips ──────────────────────────────── */
.sidebar.collapsed .nav-cat-header {
  position: relative;
}
.sidebar.collapsed .nav-cat-header[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  white-space: nowrap;
  z-index: 100;
  color: var(--text-primary);
  box-shadow: var(--shadow);
  pointer-events: none;
}

/* ── Sidebar Aggregate Badge (collapsed) ─────────────────────── */
.nav-cat-badge {
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ef4444;
  color: white;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Page Transition ─────────────────────────────────────────── */
.page {
  animation: page-fade-in 0.15s ease;
}
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Sidebar Favorites ───────────────────────────────────────── */
.nav-pin-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  font-size: 12px;
  transition: all 0.15s;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-item:hover .nav-pin-btn { opacity: 0.6; }
.nav-pin-btn:hover { opacity: 1 !important; color: var(--accent-gold); }
.nav-pin-btn.pinned { opacity: 1; color: var(--accent-gold); }
.sidebar.collapsed .nav-pin-btn { display: none; }

.nav-pinned-section {
  padding: 0 8px 4px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}
.nav-pinned-section .nav-item {
  font-size: 12px;
  padding: 6px 12px;
}
.nav-pinned-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 12px 2px;
  font-weight: 600;
}
.sidebar.collapsed .nav-pinned-section { display: none; }

/* ── Ordenes Panel ──────────────────────────────────────────── */

.ordenes-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.ordenes-header-left {
  display: flex; align-items: center; gap: 10px;
}

.ordenes-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: ordenes-pulse 1.5s ease-in-out infinite;
}
@keyframes ordenes-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* ── Search bar ── */
/* ── Order Cards v2: Grid + ocard (Mockup 13) ───────────────── */
.ordenes-grid-toggle { display:flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-left:auto; }
.ordenes-grid-toggle button {
  padding:5px 10px; font-size:10px; font-weight:700; border:none;
  background:var(--bg-elevated); color:var(--text-muted); cursor:pointer;
  transition:all .15s; font-family:var(--font-ui); display:flex; align-items:center; gap:4px;
}
.ordenes-grid-toggle button + button { border-left:1px solid var(--border); }
.ordenes-grid-toggle button:hover { color:var(--text-secondary); }
.ordenes-grid-toggle button.active { background:var(--accent-orange); color:var(--text-inverse); }

.ordenes-grid { display:grid; gap:10px; }
.ordenes-grid.og1 { grid-template-columns:1fr; }
.ordenes-grid.og2 { grid-template-columns:repeat(2,1fr); }
.ordenes-grid.og3 { grid-template-columns:repeat(2,1fr); } /* 3x removed — legacy value falls back to 2x */

/* ── Ordenes two-panel split: incoming (70%) | other-staff (30%) ── */
.ordenes-split { display:flex; gap:14px; align-items:flex-start; }
.ordenes-main { flex:1 1 70%; min-width:0; }
.ordenes-others-panel {
  flex:0 0 30%;
  max-width:360px;
  min-width:230px;
  position:sticky;
  top:8px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 150px);
}
.ordenes-others-head {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--border);
  font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--text-secondary);
  text-transform:uppercase;
}
.ordenes-others-head .oo-count { margin-left:auto; background:var(--bg-elevated); color:var(--text-muted); font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; }
.ordenes-others-list { overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:4px; }
.oo-empty { color:var(--text-muted); font-size:12px; text-align:center; padding:22px 10px; }
.oo-row { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:var(--radius-sm); background:var(--bg-base); border:1px solid var(--border-light); }
.oo-row:hover { background:var(--bg-hover); }
.oo-mp { width:20px; height:20px; border-radius:4px; object-fit:contain; flex-shrink:0; }
.oo-body { flex:1; min-width:0; }
.oo-line1 { font-size:12px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oo-qty { color:var(--text-muted); font-weight:500; }
.oo-line2 { display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--text-muted); margin-top:1px; }
.oo-op { display:inline-flex; align-items:center; gap:3px; }
.oo-amt { color:var(--accent-green); font-weight:700; }
.oo-status { font-size:9px; font-weight:700; padding:2px 6px; border-radius:20px; flex-shrink:0; text-transform:uppercase; }
.oo-st-pend { background:rgba(251,191,36,0.15); color:#fbbf24; }
.oo-st-reg { background:rgba(74,222,128,0.15); color:#4ade80; }
.oo-st-cancel { background:rgba(239,68,68,0.15); color:#ef4444; }
.oo-reassign { width:24px; height:24px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); cursor:pointer; }
.oo-reassign:hover { background:var(--bg-elevated); color:var(--accent-orange); }

/* Stack panels when the viewport is too narrow for a comfortable 70/30 split */
@media (max-width:1100px) {
  .ordenes-split { flex-direction:column; }
  .ordenes-main { flex:1 1 auto; width:100%; }
  .ordenes-others-panel { flex:1 1 auto; width:100%; max-width:none; position:static; max-height:none; }
  .ordenes-others-list { max-height:320px; }
}

.ocard {
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  border-top:3px solid var(--mp-color);
}
.ocard-cat-bottom { display:none; }
.ocard-bottom { display:contents; }

/* 2x/3x: vertical card (default) */
.ocard-header { padding:10px 12px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); position:relative; }
.ocard-tu-margin-pill { position:absolute; left:50%; transform:translateX(-50%); font-size:10px; font-weight:700; padding:2px 10px; border-radius:20px; border:1px solid transparent; pointer-events:none; white-space:nowrap; letter-spacing:0.3px; }
.ocard-header-link { cursor:pointer; border:1px solid transparent; border-bottom:1px solid var(--border); border-radius:var(--radius-lg) var(--radius-lg) 0 0; transition:border-color .15s, background .15s; }
.ocard-header-link:hover { border-color:var(--accent-orange, #f97316); background:rgba(249,115,22,0.04); }
.ocard-logos { display:flex; align-items:center; position:relative; flex-shrink:0; width:48px; height:34px; }
.ocard-logo-game { width:34px; height:34px; border-radius:8px; object-fit:cover; border:2px solid var(--bg-surface); z-index:1; background:var(--bg-elevated); }
.ocard-logo-mp { width:20px; height:20px; border-radius:5px; object-fit:cover; border:2px solid var(--bg-surface); position:absolute; bottom:-2px; right:0; z-index:2; background:var(--bg-elevated); }
.ocard-hinfo { flex:1; min-width:0; }
.ocard-game { font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ocard-meta { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--text-muted); margin-top:1px; min-width:0; overflow:hidden; }
.ocard-mpname { font-weight:700; }
.ocard-id { font-family:monospace; cursor:pointer; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ocard-id:hover { color:var(--accent-orange); }
.ocard-time { font-size:9px; font-weight:700; color:var(--accent-orange); flex-shrink:0; white-space:nowrap; background:rgba(249,115,22,0.1); border:1px solid rgba(249,115,22,0.25); border-radius:20px; padding:2px 8px; }
.ocard-header-right { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }
.ocard-cat { font-size:8px; font-weight:700; padding:2px 6px; border-radius:3px; background:var(--bg-elevated); color:var(--text-muted); border:1px solid var(--border); display:flex; align-items:center; gap:3px; text-transform:uppercase; white-space:nowrap; }
.ocard-cat i { width:9px; height:9px; }
.ocard-topbar-actions { display:flex; gap:3px; }
.ocard-micro-btn {
  width:22px; height:22px; border-radius:4px; border:1px solid var(--border);
  background:var(--bg-elevated); color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s; padding:0;
}
.ocard-micro-btn i { width:10px; height:10px; }
.ocard-micro-btn:hover { border-color:var(--accent-orange); color:var(--text-primary); }
.ocard-micro-btn.danger:hover { border-color:#ef4444; color:#ef4444; }
.ocard-info { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 16px; padding:8px 12px; background:var(--bg-elevated); flex:1; }
.ocard-field { padding:4px 0; min-width:0; }
.ocard-fl { font-size:8px; color:var(--text-muted); text-transform:uppercase; font-weight:600; letter-spacing:0.3px; }
.ocard-fv { font-size:12px; font-weight:600; color:var(--text-primary); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; max-width:100%; }
.ocard-fv.copy { cursor:pointer; }
.ocard-fv.copy:hover { color:var(--accent-orange); }
.ocard-field.full { grid-column:span 2; }
.ocard-actions { padding:8px 10px; display:flex; gap:4px; flex-wrap:wrap; border-top:1px solid var(--border); background:var(--bg-surface); }
.ocard-btn { flex:1 0 auto; padding:6px 8px; font-size:13px; font-weight:700; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px; transition:all .15s; font-family:var(--font-ui); white-space:nowrap; }
.ocard-btn:hover { border-color:var(--accent-orange); color:var(--text-primary); }
.ocard-btn i, .ocard-btn svg { width:14px; height:14px; flex-shrink:0; }
.ocard-btn.primary { background:var(--accent-orange); border-color:var(--accent-orange); color:var(--text-inverse); }
.ocard-btn.primary:hover { opacity:0.85; }
.ocard-btn.registered { background:rgba(34,197,94,0.1); border-color:rgba(34,197,94,0.3); color:#4ade80; }
.ocard-btn.ocard-workspace { background:rgba(249,115,22,0.12); border-color:rgba(249,115,22,0.4); color:#f97316; }
.ocard-btn.ocard-workspace:hover { background:rgba(249,115,22,0.25); border-color:#f97316; }
.ocard.done { opacity:0.6; }
.ocard.done:hover { opacity:0.85; }
.ocard-cancelled-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.6); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:5; cursor:pointer; border-radius:var(--radius-lg); gap:6px; }
.ocard-cancelled-overlay > span { color:#ef4444; font-weight:800; font-size:28px; letter-spacing:4px; }
.ocard-cancelled-by { display:flex; align-items:center; gap:6px; }
.ocard-cancelled-by img { width:22px; height:22px; border-radius:50%; border:2px solid #ef4444; }
.ocard-cancelled-by span { color:#fca5a5; font-size:11px; font-weight:600; }
.ocard-registered-overlay {
  position:absolute; inset:0; background:rgba(26,22,20,0.72); display:flex;
  align-items:center; justify-content:center; gap:10px; z-index:3;
  font-size:24px; color:#4ade80; font-weight:700; border-radius:var(--radius-lg);
  transition:opacity .15s; flex-direction:column;
}
.ocard-registered-overlay img { width:40px; height:40px; border-radius:50%; border:2px solid #4ade80; }
.ocard-reg-name { font-size:13px; font-weight:700; color:#4ade80; }
.ocard-revive-btn {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(34,197,94,0.15); border:1px solid rgba(74,222,128,0.5);
  color:#4ade80; font-size:11px; font-weight:700; letter-spacing:0.4px;
  padding:5px 14px; border-radius:6px; cursor:pointer;
  transition:background .15s, border-color .15s, transform .1s;
}
.ocard-revive-btn:hover { background:rgba(34,197,94,0.3); border-color:#4ade80; transform:scale(1.04); }
.ocard-revive-btn:active { transform:scale(0.97); }
.ocard-proof-done .ocard-btn { border-color:rgba(34,197,94,0.3); color:#4ade80; }

/* ── Ordenes Toolbar v2 (Mockup 14) ──────────────────────────── */
.ordenes-toolbar {
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:10px 14px; display:flex; flex-direction:column; gap:8px; margin-bottom:10px;
}
.otb-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.otb-sep { width:1px; height:22px; background:var(--border); flex-shrink:0; }
.otb-label { font-size:8px; color:var(--text-muted); text-transform:uppercase; font-weight:700; letter-spacing:0.5px; flex-shrink:0; }
.otb-search {
  display:flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-elevated); min-width:160px; flex-shrink:0;
}
.otb-search input { border:none; background:none; color:var(--text-primary); font-size:12px; font-family:var(--font-ui); outline:none; flex:1; min-width:0; }
.otb-search kbd { font-size:9px; color:var(--text-muted); background:var(--bg-surface); padding:1px 5px; border-radius:3px; border:1px solid var(--border); font-family:inherit; }
.otb-mp {
  width:30px; height:30px; border-radius:6px; border:2px solid var(--border);
  background:var(--bg-elevated); cursor:pointer; overflow:hidden; transition:all .15s;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.otb-mp:hover { border-color:var(--mp-c); }
.otb-mp.active { border-color:var(--mp-c); box-shadow:0 0 8px rgba(0,0,0,0.3); }
.otb-mp img { width:100%; height:100%; object-fit:cover; }
.otb-status {
  padding:5px 12px; font-size:10px; font-weight:600; border:1px solid var(--border);
  border-radius:20px; background:transparent; color:var(--text-muted); cursor:pointer;
  transition:all .15s; font-family:var(--font-ui); white-space:nowrap;
}
.otb-status:hover { border-color:var(--text-secondary); color:var(--text-secondary); }
.otb-status.active { border-color:var(--accent-orange); background:rgba(249,115,22,0.1); color:var(--accent-orange); }
.otb-right { display:flex; gap:6px; margin-left:auto; align-items:center; }
.otb-icon-btn {
  width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg-elevated); color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s; padding:0;
}
.otb-icon-btn:hover { border-color:var(--accent-orange); color:var(--text-primary); }
.otb-games {
  display:flex; gap:4px; overflow-x:auto; padding-bottom:2px; flex:1;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.otb-games::-webkit-scrollbar { height:3px; }
.otb-games::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.otb-game {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:3px 6px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-elevated); cursor:pointer; transition:all .15s;
  flex-shrink:0; min-width:44px; font-family:var(--font-ui);
}
.otb-game:hover { border-color:var(--accent-orange); }
.otb-game.active { border-color:var(--accent-orange); background:rgba(249,115,22,0.1); }
.otb-game img { width:22px; height:22px; border-radius:4px; object-fit:cover; }
.otb-game span { font-size:7px; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.otb-game.active span { color:var(--accent-orange); }
.otb-cat {
  padding:4px 10px; font-size:10px; font-weight:600; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-muted);
  cursor:pointer; transition:all .15s; font-family:var(--font-ui); white-space:nowrap;
}
.otb-cat:hover { border-color:var(--accent-orange); color:var(--text-secondary); }
.otb-cat.active { border-color:var(--accent-orange); background:rgba(249,115,22,0.1); color:var(--accent-orange); }

/* Legacy (keep for compatibility) */
.ordenes-searchbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.ordenes-search-input-wrap {
  position: relative; display: flex; align-items: center;
}
.ordenes-search-icon {
  position: absolute; left: 12px;
  width: 14px; height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
.ordenes-search-input {
  width: 100%; padding: 8px 80px 8px 34px;
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ordenes-search-input::placeholder { color: var(--text-muted); font-weight: 400; }
.ordenes-search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.ordenes-search-kbd {
  position: absolute; right: 10px;
  font-size: 10px; font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  pointer-events: none;
  font-family: inherit;
}
.ordenes-search-clear {
  position: absolute; right: 10px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: var(--bg-elevated);
  border-radius: 50%; cursor: pointer;
  color: var(--text-muted);
  transition: all 0.12s;
}
.ordenes-search-clear:hover { color: var(--text-primary); background: var(--border); }

/* Game icon filters */
.ordenes-game-filters {
  display: flex; align-items: center; gap: 10px;
  flex: 1; overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 4px;
  flex-wrap: wrap;
}
.ordenes-game-filters::-webkit-scrollbar { display: none; }
.ordenes-game-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.12s;
  padding: 4px 6px 3px;
  min-width: fit-content;
}
.ordenes-game-btn img {
  width: 20px; height: 20px;
  border-radius: 3px; object-fit: cover;
}
.ordenes-game-btn span {
  font-size: 9px; font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1;
}
.ordenes-game-btn:hover { border-color: var(--border); }
.ordenes-game-btn.active {
  border-color: var(--accent-blue);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--accent-blue);
}
.ordenes-game-btn.active span { color: var(--text-primary); }

/* Marketplace icon filters */
.ordenes-mp-filters {
  display: flex; align-items: center; gap: 4px;
}
.ordenes-mp-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.12s;
}
.ordenes-mp-btn:hover { border-color: var(--border); }
.ordenes-mp-btn.active {
  border-color: var(--mp-color);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--mp-color);
}

.ordenes-refresh-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.12s;
}
.ordenes-refresh-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }

.ordenes-list {
  display: flex; flex-direction: column; gap: 8px;
}

#ordenes-pagination {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 16px; padding: 8px 0;
}

.orden-card {
  display: flex; flex-direction: column;
  padding: 0; /* single row uses orden-row-top padding */
  background: var(--orden-bg);
  border: 1px solid var(--orden-border);
  border-left: 4px solid var(--orden-color);
  border-radius: var(--radius-md);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  animation: orden-slide-in 0.3s ease-out;
  overflow: hidden;
}
.orden-card:hover {
  background: var(--bg-elevated);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
@keyframes orden-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.orden-delete-btn {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  width: 16px; height: 16px; padding: 0; border: none;
  background: transparent; color: var(--text-muted);
  font-size: 14px; line-height: 16px; text-align: center;
  cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s;
  border-radius: 50%;
}
.orden-card:hover .orden-delete-btn { opacity: 0.5; }
.orden-delete-btn:hover { opacity: 1 !important; color: #ef4444; background: rgba(239,68,68,0.1); }

/* ── 3-column card layout: [icons] [fields x2 rows] [buttons] ── */
.orden-layout {
  display: flex; align-items: stretch;
  padding: 10px 14px; gap: 12px;
}
.orden-left {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.orden-center {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.orden-right {
  display: flex; align-items: center;
  flex-shrink: 0;
}
.orden-mp-badge {
  width: 24px; height: 24px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.orden-game-img {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.orden-fields {
  display: flex; align-items: center; gap: 20px;
  min-width: 0;
}
.orden-field {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 0 0 12%;
  box-sizing: border-box;
}
.orden-field-wide { flex: 1 0 18%; }
.orden-field-label {
  font-size: 9px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.orden-field-value {
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.orden-field-value.orden-loading {
  width: 60px; height: 14px;
  border-radius: 3px;
  background: var(--bg-elevated);
  animation: skel-shimmer 1.5s ease-in-out infinite;
}
.orden-field-right { align-items: flex-end; }
.orden-field-right .orden-field-label { text-align: right; }
.orden-field-value.orden-usd { color: #22c55e; font-weight: 700; }
.orden-field-value.orden-unit { color: var(--text-secondary); font-weight: 500; font-size: 11px; }
.orden-time-val { font-size: 10px; color: var(--text-muted); }
.orden-actions {
  display: flex; flex-direction: column; gap: 3px;
  flex-wrap: wrap; max-height: 52px; align-content: flex-start;
}

.orden-id {
  font-family: monospace; font-size: 11px; color: var(--text-secondary);
  cursor: pointer;
}
.orden-id:hover { color: var(--text-primary); }

.orden-category {
  font-size: 10px; color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap; display: inline-block;
  max-width: 100%;
}

.orden-char-name {
  display: inline-flex; align-items: center; gap: 3px;
  cursor: pointer;
}
.orden-char-name:hover { color: var(--accent-blue); }

/* Action buttons */
.orden-action-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 6px; border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.orden-action-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--text-muted);
}
.orden-action-demand:hover  { border-color: #f59e0b; color: #f59e0b; }
.orden-action-comprar:hover { border-color: #eab308; color: #eab308; }
.orden-action-chat:hover    { border-color: #3b82f6; color: #3b82f6; }
.orden-action-pruebas:hover { border-color: #27A6F5; color: #27A6F5; }
.orden-action-registrar:hover { border-color: #22c55e; color: #22c55e; }
.orden-action-macro:hover { border-color: #a855f7; color: #a855f7; }
.orden-action-copy:hover { border-color: #94a3b8; color: #94a3b8; }
.orden-action-workspace {
  background: rgba(249,115,22,0.12); color: #f97316;
  border-color: rgba(249,115,22,0.4);
}
.orden-action-workspace:hover { background: rgba(249,115,22,0.25); border-color: #f97316; color: #f97316; }
.orden-action-rescrape:hover { border-color: #38bdf8; color: #38bdf8; }
.orden-action-pruebas.orden-proof-done {
  border-color: #22c55e; color: #22c55e;
  background: rgba(34,197,94,0.1);
  opacity: 0.8; cursor: pointer;
}
.orden-action-pruebas.orden-proof-uploading {
  border-color: #f59e0b; color: #f59e0b;
  background: rgba(245,158,11,0.1);
  cursor: pointer;
}
.orden-action-pruebas.orden-proof-error {
  border-color: #ef4444; color: #ef4444;
  background: rgba(239,68,68,0.1);
  cursor: pointer;
}
/* Pruebas subidas pero la orden NO quedó entregada. Ámbar y con borde marcado: no es un éxito
   (verde) ni una falla de subida (rojo) — es una orden que todavía hay que entregar. */
.orden-action-pruebas.orden-proof-sinentrega {
  border-color: #f59e0b; color: #f59e0b;
  background: rgba(245,158,11,0.14);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.35);
  cursor: pointer;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.orden-action-registrar.orden-registered {
  border-color: #22c55e; color: #22c55e;
  background: rgba(34,197,94,0.1);
  opacity: 0.8; cursor: pointer;
}
.orden-action-registrar.orden-registered:hover {
  border-color: #ef4444; color: #ef4444;
  background: rgba(239,68,68,0.1);
}

/* Registered order card — reduced opacity */
.orden-card.orden-card-registered {
  transition: opacity 0.2s;
}
.orden-card.orden-card-registered > .orden-layout,
.orden-card.orden-card-registered > .orden-delete-btn {
  opacity: 0.2;
  transition: opacity 0.2s;
}
.orden-card.orden-card-registered:hover > .orden-layout,
.orden-card.orden-card-registered:hover > .orden-delete-btn {
  opacity: 0.6;
}

/* Cancelled order card */
.orden-card.orden-card-cancelled {
  opacity: 0.2;
  transition: opacity 0.2s;
}
.orden-card.orden-card-cancelled:hover {
  opacity: 0.6;
}
.orden-cancelled-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  gap: 8px;
}
.orden-cancelled-overlay > span {
  font-size: 56px;
  font-weight: 900;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 8px;
  cursor: pointer;
  opacity: 0.7;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.orden-cancelled-by { display:flex; align-items:center; gap:8px; }
.orden-cancelled-by img { width:28px; height:28px; border-radius:50%; border:2px solid #ef4444; }
.orden-cancelled-by span { color:#fca5a5; font-size:13px; font-weight:600; }

/* Registered overlay */
.orden-registered-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
  transition: opacity .15s;
}
.orden-registered-overlay img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(34,197,94,0.5);
  object-fit: cover;
}
.orden-registered-overlay span {
  font-size: 16px;
  font-weight: 700;
  color: #22c55e;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Cancel button style */
.orden-action-cancel {
  color: #ef4444 !important;
  border-color: rgba(239,68,68,0.3) !important;
}
.orden-action-cancel:hover {
  background: rgba(239,68,68,0.1) !important;
  border-color: #ef4444 !important;
}

/* Red dot badge next to Ordenes nav item */
.nav-ordenes-badge {
  display: inline-block;
  width: 8px; height: 8px;
  background: #ef4444;
  border-radius: 50%;
  /* Push to the right edge + vertically center (via .nav-item's flex align-items:center),
     matching the Mensajes red badge (.nav-badge margin-left:auto) instead of hugging the label. */
  margin-left: auto;
  flex-shrink: 0;
  animation: ordenes-badge-pulse 1.5s ease-in-out infinite;
}
@keyframes ordenes-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

.orden-offer-title {
  font-size: 11px; color: var(--text-muted); font-style: italic;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* New order highlight animation */
.orden-card-new {
  animation: orden-new-glow 2s ease-out;
}
@keyframes orden-new-glow {
  0% { box-shadow: 0 0 0 2px var(--orden-color), 0 0 16px 4px var(--orden-border); }
  100% { box-shadow: none; }
}

/* Skeleton loading */
.skel-block {
  display: inline-block;
  border-radius: 4px;
  background: var(--bg-elevated);
}
@keyframes skel-shimmer {
  0% { opacity: 0.4; }
  50% { opacity: 0.7; }
  100% { opacity: 0.4; }
}
.orden-skeleton { pointer-events: none; }

/* Responsive */
@media (max-width: 1200px) {
  .orden-layout { flex-wrap: wrap; }
  .orden-center { min-width: min(300px, 100%); }
  .orden-actions { flex-direction: row; max-height: none; }
}

/* ── Ordenes toolbar: tablet ───────────────────────────────────── */
@media (max-width: 900px) {
  /* Row 1: let search grow, hide grid toggle text, wrap cats */
  .ordenes-toolbar .otb-row:first-child .ordenes-grid-toggle button { font-size: 10px; padding: 4px 7px; }
  .otb-cats { flex-wrap: wrap !important; gap: 3px !important; }
  /* Row 2: games bar takes full width, rest wraps below */
  .ordenes-toolbar .otb-row:last-child { flex-wrap: wrap; row-gap: 6px; }
  .otb-games { order: -1; width: 100%; flex: 1 1 100%; }
}

/* ── Ordenes toolbar: mobile ───────────────────────────────────── */
@media (max-width: 768px) {
  .ordenes-toolbar { padding: 8px 10px; gap: 6px; }

  /* Row 1: stack search full-width, then cats + grid toggle in one line */
  .ordenes-toolbar .otb-row:first-child {
    flex-wrap: wrap;
    gap: 6px;
  }
  .ordenes-toolbar .otb-row:first-child .otb-search {
    flex: 1 1 100%;
    min-width: 0;
  }
  .ordenes-toolbar .otb-row:first-child .otb-search input { font-size: 16px; } /* prevent iOS zoom */
  .ordenes-toolbar .otb-row:first-child .otb-icon-btn { display: none; } /* hide lookup on mobile */
  .ordenes-toolbar .otb-row:first-child .otb-sep:first-of-type { display: none; }
  .ordenes-toolbar .otb-row:first-child .otb-label { font-size: 7px; }
  .otb-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 3px !important; }
  .otb-cats::-webkit-scrollbar { display: none; }
  .otb-cat { font-size: 9px; padding: 3px 8px; white-space: nowrap; }
  .ordenes-grid-toggle { margin-left: auto; }
  .ordenes-grid-toggle button { font-size: 9px; padding: 3px 6px; }

  /* Row 2: games bar scrolls horizontally (full row), then mp + status below */
  .ordenes-toolbar .otb-row:last-child {
    flex-wrap: wrap;
    row-gap: 6px;
    align-items: center;
  }
  .otb-games {
    order: -1;
    width: 100%;
    flex: 1 1 100%;
  }
  .ordenes-toolbar .otb-row:last-child .otb-sep { display: none; }
  .ordenes-toolbar .otb-row:last-child .otb-label { display: none; }

  /* MP + status filters: wrap together */
  .otb-mp { width: 26px; height: 26px; border-radius: 5px; }
  .otb-status { font-size: 9px; padding: 4px 9px; }

  /* Order cards */
  .ordenes-searchbar { flex-wrap: wrap; gap: 6px; }
  .ordenes-search-input-wrap { flex: 1 1 100% !important; min-width: 0 !important; }
  .ordenes-game-filters { flex: 1 1 100%; gap: 6px; }
  .ordenes-mp-filters { gap: 3px; }
  .ordenes-mp-btn { width: 28px; height: 28px; }
  .orden-layout { padding: 8px 10px; gap: 8px; }
  .orden-left { gap: 6px; }
  .orden-game-img { width: 26px; height: 26px; }
  .orden-mp-badge { width: 20px; height: 20px; }
  .orden-center { min-width: 0; }
  .orden-fields { gap: 10px; flex-wrap: wrap; }
  .orden-field { flex: 1 1 auto; min-width: 70px; }
  .orden-field-wide { flex: 1 1 auto; min-width: 90px; }
  .orden-field-label { font-size: 8px; }
  .orden-field-value { font-size: 11px; }
  .orden-actions { flex-direction: row; max-height: none; flex-wrap: wrap; gap: 4px; }
  .orden-action-btn span { display: none; }
  .orden-action-btn { padding: 5px; }

  /* 2-col grid on mobile */
  .ordenes-grid.og3 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  /* Full-column grid only */
  .ordenes-grid.og2,
  .ordenes-grid.og3 { grid-template-columns: 1fr !important; }

  .orden-layout { flex-direction: column; padding: 8px; gap: 6px; }
  .orden-left { width: 100%; }
  .orden-right { width: 100%; }
  .orden-center { width: 100%; }
  .orden-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 10px !important;
  }
  .orden-field { min-width: 0 !important; }
  .orden-field-wide { grid-column: 1 / -1 !important; }
  .orden-actions { justify-content: flex-start; gap: 4px; }
  .orden-action-btn { padding: 6px 7px; min-height: 32px; }
  .orden-action-btn span { display: none !important; }

  .ordenes-game-btn { padding: 3px 4px 2px; }
  .ordenes-game-btn img { width: 18px; height: 18px; }
  .ordenes-game-btn span { font-size: 8px; }

  /* Fetch completadas button: icon only */
  #btn-fetch-completed span,
  #btn-fetch-completed { font-size: 9px; padding: 3px 6px; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE OVERHAUL — iOS-first responsive rebuild
   ════════════════════════════════════════════════════════════════ */

/* ── Global: prevent any lateral scroll ─────────────────────── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  .page {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* ── Topbar: pill overflow control ── */
  .topbar-pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 1;
    min-width: 0;
    scrollbar-width: none;
  }
  .topbar-pills::-webkit-scrollbar { display: none; }

  /* ── Ordenes: complete card reflow ── */
  .orden-layout {
    flex-direction: column !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  .orden-left {
    width: 100% !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  .orden-center {
    width: 100% !important;
    min-width: 0 !important;
  }
  .orden-right {
    width: 100% !important;
  }
  .orden-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px 10px !important;
    flex-wrap: unset !important;
  }
  .orden-field {
    flex: unset !important;
    min-width: 0 !important;
  }
  .orden-field-wide {
    grid-column: 1 / -1 !important;
    flex: unset !important;
  }
  .orden-field-label { font-size: 8px !important; }
  .orden-field-value { font-size: 11px !important; white-space: normal !important; }
  .orden-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-height: none !important;
    justify-content: flex-start !important;
  }
  .orden-action-btn {
    padding: 6px 8px !important;
    min-height: 32px !important;
  }
  .orden-action-btn span { display: inline !important; font-size: 10px !important; }

  /* ── Comparador: filter panel stacked ── */
  .mp-filter-panel {
    flex-direction: column !important;
    display: flex !important;
    grid-template-columns: unset !important;
  }
  .mp-filter-panel .filter-group {
    width: 100% !important;
    flex: unset !important;
    min-width: 0 !important;
  }
  .mp-filter-panel .btn {
    width: 100% !important;
  }

  /* ── Comparador: chart & sellers ── */
  #mp-platform-chart {
    padding: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #mp-platform-chart canvas {
    max-height: 200px !important;
  }
  #mp-sellers-panel {
    padding: 8px !important;
    overflow-x: hidden !important;
  }
  .mp-sellers-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Messaging: iframes touch-friendly ── */
  #msg-frame-marketplaces,
  #msg-frame-intercom,
  #msg-frame-whatsapp,
  #msg-frame-telegram {
    height: calc(100vh - 160px) !important;
    border-radius: 8px !important;
  }

  /* ── Messaging: header bar stacked ── */
  #page-messaging > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #page-messaging > div:first-child > div:last-child {
    justify-content: flex-start !important;
  }

  /* ── Comprar Eldorado: stack columns ── */
  #page-comprar-eldorado > div:first-child {
    flex-direction: column !important;
    gap: 16px !important;
  }
  #page-comprar-eldorado > div:first-child > div {
    min-width: 0 !important;
    width: 100% !important;
  }
  #eld-console {
    height: 200px !important;
    font-size: 11px !important;
  }

  /* ── Notificaciones: stack two columns ── */
  #page-notificaciones > div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #notif-col-orders,
  #notif-col-messages {
    height: auto !important;
    max-height: 50vh !important;
  }

  /* ── Comisiones: IDR inputs ── */
  .com-layout {
    flex-direction: column !important;
    height: auto !important;
  }
  .com-game-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: static !important;
  }

  /* ── Horas/Ausencias & Horarios: overflow control ── */
  .schedule-table-wrap,
  .table-scroll-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }

  /* ── Analytics: chart overflow ── */
  #analytics-chart-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Logs: table overflow ── */
  .log-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }

  /* ── Settings: form groups ── */
  .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Estilos/Herramientas: sound cards ── */
  .estilos-theme-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ── Audit Sheets: stack table + chart ── */
  #as-combined-container {
    flex-direction: column !important;
  }
  #as-chart-container {
    width: 100% !important;
    flex-shrink: 1 !important;
  }
  #as-history-section > div:first-child {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #as-history-section input {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* ── My Transactions: compact ── */
  #page-mis-transacciones .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* ── Surveillance panel: stack ── */
  .surv-panel {
    grid-template-columns: 1fr !important;
  }

  /* ── Generic: wide inline elements ── */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-break: break-all;
  }
  table {
    max-width: 100%;
  }

  /* ── All tables: horizontal scroll wrapper ── */
  [style*="overflow-x:auto"],
  [style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }

  /* ── Breadcrumb: compact ── */
  .breadcrumb {
    font-size: 11px !important;
    gap: 4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── All flex containers with inline gap: prevent overflow ── */
  [style*="display:flex"] {
    max-width: 100%;
  }

  /* ── Inline fixed-width inputs: clamp ── */
  input[style*="width:160px"],
  input[style*="width:140px"],
  input[style*="width:120px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Small phone (≤ 390px — iPhone SE, iPhone mini) ─────────── */
@media (max-width: 390px) {
  .ordenes-game-btn {
    padding: 2px 3px 1px !important;
  }
  .ordenes-game-btn img {
    width: 16px !important;
    height: 16px !important;
  }
  .ordenes-game-btn span {
    font-size: 7px !important;
  }
  .orden-fields {
    grid-template-columns: 1fr 1fr !important;
  }
  .orden-field-wide {
    grid-column: 1 / -1 !important;
  }
  .orden-action-btn span {
    display: none !important;
  }
  .topbar-title {
    font-size: 13px !important;
  }
  .topbar-subtitle {
    font-size: 9px !important;
  }
  .page {
    padding: 8px !important;
  }
  .stat-number {
    font-size: 22px !important;
  }
  .dash-stat-cards {
    grid-template-columns: 1fr !important;
  }

  /* Notificaciones: full stack */
  #notif-col-orders,
  #notif-col-messages {
    max-height: 40vh !important;
  }

  /* Comparador: even tighter */
  #mp-platform-chart canvas {
    max-height: 160px !important;
  }

  /* Messaging iframe height */
  #msg-frame-marketplaces,
  #msg-frame-intercom,
  #msg-frame-whatsapp,
  #msg-frame-telegram {
    height: calc(100vh - 140px) !important;
  }
}

/* ── iOS: prevent overscroll bounce showing white bg ─────────── */
@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available;
  }
  body {
    min-height: -webkit-fill-available;
    -webkit-overflow-scrolling: touch;
  }
  /* Fix iOS input zoom — already covered by font-size: 16px rule above */
  /* Sticky position fix for iOS Safari */
  .topbar {
    position: -webkit-sticky;
    position: sticky;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ORDER WORKSPACE — Unified Order + Chat + Provider overlay
   ═══════════════════════════════════════════════════════════════ */

.ows-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ows-workspace {
  width: 100%; max-width: 1400px; height: 85vh; max-height: 750px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 64px rgba(0,0,0,0.5);
}

/* ── Top tab bar ── */
.ows-topbar {
  display: flex; align-items: center;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ows-tabs { display: flex; flex: 1; overflow-x: auto; }
.ows-tab {
  padding: 9px 14px; font-size: 11px; font-weight: 600;
  color: var(--text-muted); border-right: 1px solid var(--border);
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: all 0.15s; position: relative;
}
.ows-tab:hover { background: var(--bg-hover, #46403d); color: var(--text-secondary); }
.ows-tab.active {
  background: var(--bg-surface); color: var(--text-primary);
  border-bottom: 2px solid var(--accent, #f97316);
}
.ows-tab-sc-pair { border-left: 2px solid var(--accent, #f97316); }
.ows-tab-sc-pair:not(.active) { color: var(--accent, #f97316); opacity: 0.75; }
.ows-tab-sc-pair:not(.active):hover { opacity: 1; }
.ows-tab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ows-tab-label { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.ows-tab-close { opacity: 0.4; cursor: pointer; display: flex; }
.ows-tab-close:hover { opacity: 1; }
.ows-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  animation: owsPulse 2s infinite; flex-shrink: 0;
}
@keyframes owsPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,0.4);} 50%{opacity:0.6;box-shadow:0 0 0 4px rgba(74,222,128,0);} }
.ows-unread-badge {
  background: #ef4444; color: #fff; font-size: 8px; font-weight: 800;
  padding: 1px 5px; border-radius: 8px; animation: owsPulse 2s infinite;
}
.ows-topbar-actions { display: flex; gap: 2px; padding: 0 8px; }
.ows-minimize-btn, .ows-close-all-btn {
  padding: 5px 8px; background: transparent; border: none;
  color: var(--text-muted); cursor: pointer; border-radius: 4px; display: flex;
}
.ows-minimize-btn:hover, .ows-close-all-btn:hover { background: var(--bg-hover, #46403d); color: var(--text-primary); }

/* ── Body: 3-panel split ── */
.ows-body { display: flex; flex: 1; min-height: 0; }

/* ── Order panel (left) ── */
.ows-order-panel {
  width: 280px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0;
  background: var(--bg-base, #1a1614);
}
.ows-order-header {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.ows-mp-badge {
  font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 4px;
  color: #fff; text-transform: uppercase;
}
.ows-order-id { font-size: 11px; font-weight: 700; font-family: monospace; }
.ows-order-status {
  margin-left: auto; font-size: 9px; font-weight: 700; padding: 2px 8px;
  border-radius: 4px; white-space: nowrap;
}
.ows-order-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.ows-order-field { margin-bottom: 10px; }
.ows-field-label {
  font-size: 9px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;
}
.ows-field-val { font-size: 12px; font-weight: 600; word-break: break-word; }
.ows-offer-title { font-size: 11px; color: var(--text-secondary); max-height: 40px; overflow: hidden; text-overflow: ellipsis; }
.ows-copyable { cursor: pointer; }
.ows-copyable:hover { color: var(--accent, #f97316); }
.ows-order-divider { height: 1px; background: var(--border); margin: 12px 0; }
.ows-order-actions { display: flex; flex-direction: column; gap: 5px; }
.ows-action-btn {
  padding: 7px 10px; font-size: 10px; font-weight: 600;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-secondary);
  cursor: pointer; font-family: inherit; display: flex;
  align-items: center; gap: 6px; transition: all 0.15s;
}
.ows-action-btn i { width: 13px; height: 13px; }
.ows-action-btn:hover { border-color: var(--accent, #f97316); color: var(--accent, #f97316); }
.ows-action-primary {
  background: var(--accent, #f97316); color: var(--text-inverse, #1a1614);
  border-color: var(--accent, #f97316);
}
.ows-action-primary:hover { opacity: 0.85; color: var(--text-inverse, #1a1614); }
.ows-action-discord { border-color: #5865f2; color: #5865f2; }
.ows-action-discord:hover { background: rgba(88,101,242,0.1); border-color: #5865f2; color: #5865f2; }

/* ── Chat panel (center) ── */
.ows-chat-panel {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.ows-chat-header {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  background: var(--bg-elevated);
}
.ows-chat-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 700;
  font-size: 11px; color: #fff; flex-shrink: 0;
}
.ows-chat-info { flex: 1; min-width: 0; }
.ows-chat-name { font-size: 13px; font-weight: 700; }
.ows-chat-meta { font-size: 10px; color: var(--text-muted); }
.ows-chat-header-actions { display: flex; gap: 4px; }
.ows-header-btn {
  padding: 4px 8px; border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); border-radius: 4px; cursor: pointer; display: flex;
}
.ows-header-btn i { width: 12px; height: 12px; }
.ows-header-btn:hover { border-color: var(--accent, #f97316); color: var(--accent, #f97316); }

.ows-live-strip {
  padding: 4px 14px; display: flex; align-items: center; gap: 6px;
  background: rgba(74,222,128,0.04); border-bottom: 1px solid var(--border);
  flex-shrink: 0; font-size: 10px; color: var(--text-muted);
}
.ows-live-indicator {
  width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  animation: owsPulse 2s infinite;
}

.ows-chat-messages {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.ows-chat-loading {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; color: var(--text-muted); font-size: 12px;
}
.ows-spinner {
  width: 24px; height: 24px; border: 3px solid var(--bg-surface);
  border-top-color: var(--accent, #f97316); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.ows-chat-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; color: var(--text-muted); font-size: 12px;
}

/* Messages */
.ows-msg {
  max-width: 72%; padding: 9px 13px; border-radius: 12px;
  font-size: 12px; line-height: 1.5; word-break: break-word;
}
.ows-msg-in {
  background: var(--bg-elevated); align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.ows-msg-out {
  background: rgba(249,115,22,0.12); align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.ows-msg-discord { background: rgba(88,101,242,0.12); }
.ows-msg-sender {
  font-size: 9px; font-weight: 700; color: var(--text-muted);
  margin-bottom: 2px; text-transform: uppercase;
}
.ows-msg-time { font-size: 9px; color: var(--text-muted); margin-top: 3px; text-align: right; }

@keyframes ows-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.7; }
}
.ows-send-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-muted); animation: ows-pulse 1s ease-in-out infinite;
}

.ows-chat-input-bar {
  padding: 10px 14px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: var(--bg-elevated);
}
.ows-chat-input {
  flex: 1; padding: 9px 12px; background: var(--bg-base, #1a1614);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-primary); font-family: inherit; font-size: 12px; outline: none;
}
.ows-chat-input:focus { border-color: var(--accent, #f97316); }
.ows-chat-input::placeholder { color: var(--text-muted); }
.ows-send-btn {
  padding: 9px 14px; background: var(--accent, #f97316);
  color: var(--text-inverse, #1a1614); border: none; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center;
}
.ows-send-btn i { width: 14px; height: 14px; }
.ows-send-btn:hover { opacity: 0.85; }

/* ── Intercom rich input bar ── */
.ows-ic-input-wrap { border-top:1px solid var(--border);background:var(--bg-elevated);display:flex;flex-direction:column;flex-shrink:0; }
.ows-ic-mode-bar { display:flex;gap:0;border-bottom:1px solid var(--border); }
.ows-ic-mode-btn { padding:6px 14px;font-size:11px;font-weight:600;border:none;background:none;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.15s; }
.ows-ic-mode-btn.active { color:var(--text-primary);border-bottom-color:var(--accent,#f97316); }
.ows-ic-mode-btn:hover:not(.active) { color:var(--text-secondary); }
.ows-ic-textarea { width:100%;box-sizing:border-box;padding:10px 14px;background:transparent;border:none;outline:none;resize:none;color:var(--text-primary);font-family:inherit;font-size:13px;min-height:40px;max-height:120px;overflow-y:auto;line-height:1.5; }
.ows-ic-textarea.ows-ic-note { background:rgba(245,158,11,0.04);color:#f59e0b; }
.ows-ic-textarea::placeholder { color:var(--text-muted); }
.ows-ic-toolbar { display:flex;align-items:center;gap:6px;padding:6px 10px;border-top:1px solid var(--border); }
.ows-ic-tool-btn { padding:5px 10px;background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);cursor:pointer;font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px;transition:all 0.15s; }
.ows-ic-tool-btn:hover { color:var(--text-primary);border-color:var(--text-muted); }
.ows-ic-macro-item { padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background 0.1s; }
.ows-ic-macro-item:hover { background:var(--bg-active); }
.ows-ic-macro-item:last-child { border-bottom:none; }
.ows-msg-note { background:rgba(245,158,11,0.08)!important;border-color:rgba(245,158,11,0.2)!important; }
.ows-msg-body-html { font-size:12px;line-height:1.5;word-break:break-word; }
.ows-msg-body-html p { margin:0 0 4px; }
.ows-msg-body-html a { color:var(--accent-primary); }

/* ── Provider panel (right) ── */
.ows-provider-panel {
  width: 280px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0;
  background: var(--bg-base, #1a1614);
}
.ows-provider-header {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.ows-discord-icon {
  width: 26px; height: 26px; border-radius: 50%; background: #5865f2;
  display: flex; align-items: center; justify-content: center;
}
.ows-discord-icon i { width: 13px; height: 13px; color: #fff; }
.ows-provider-name { font-size: 12px; font-weight: 700; flex: 1; }
.ows-provider-context {
  padding: 8px 12px; background: rgba(88,101,242,0.05);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ows-provider-messages {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.ows-provider-input-bar {
  padding: 8px 10px; border-top: 1px solid var(--border);
  display: flex; gap: 6px; flex-shrink: 0;
}
.ows-provider-input {
  flex: 1; padding: 7px 10px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-primary); font-family: inherit; font-size: 11px; outline: none;
}
.ows-provider-input:focus { border-color: #5865f2; }
.ows-provider-send {
  padding: 7px 10px; background: #5865f2; color: #fff;
  border: none; border-radius: 6px; cursor: pointer; display: flex; align-items: center;
}
.ows-provider-send i { width: 12px; height: 12px; }

/* ── Provider modal ── */
.ows-modal-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.5); display: flex;
  align-items: center; justify-content: center;
}
.ows-provider-modal {
  width: 460px; max-width: 95vw; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.ows-pm-header {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.ows-pm-header h3 { font-size: 14px; font-weight: 700; flex: 1; }
.ows-pm-close { cursor: pointer; color: var(--text-muted); display: flex; }
.ows-pm-close:hover { color: var(--text-primary); }
.ows-pm-search {
  margin: 10px 18px; padding: 8px 12px; background: var(--bg-base, #1a1614);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-primary); font-family: inherit; font-size: 12px;
  width: calc(100% - 36px); outline: none;
}
.ows-pm-search:focus { border-color: #5865f2; }
.ows-pm-list { padding: 6px 10px; max-height: 260px; overflow-y: auto; }
.ows-pm-item {
  padding: 9px 10px; display: flex; align-items: center; gap: 10px;
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.ows-pm-item:hover { background: var(--bg-hover, #46403d); }
.ows-pm-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 700;
  font-size: 11px; color: #fff; flex-shrink: 0;
}
.ows-pm-info { flex: 1; min-width: 0; }
.ows-pm-name { font-size: 12px; font-weight: 600; }
.ows-pm-games { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.ows-pm-game {
  font-size: 8px; padding: 1px 6px; border-radius: 3px;
  background: var(--bg-active, #524c48); color: var(--text-muted); font-weight: 600;
}
.ows-pm-status {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ows-pm-status.online { background: #4ade80; }
.ows-pm-status.offline { background: var(--text-muted); }
.ows-pm-manual {
  padding: 10px 18px; border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}

/* ── Workspace nav badge ── */
.ows-nav-badge {
  font-size: 8px; font-weight: 800; background: #f97316;
  color: #fff; padding: 1px 5px; border-radius: 8px; margin-left: 4px;
}

/* ── Resize handle between panels ── */
.ows-resize-handle {
  width: 5px; cursor: col-resize; background: transparent;
  flex-shrink: 0; position: relative; z-index: 5;
  transition: background 0.15s;
}
.ows-resize-handle:hover, .ows-resize-handle:active {
  background: var(--accent, #f97316);
}

/* ── Discord-style messages ── */
.ows-dc-msg {
  display: flex; gap: 10px; padding: 3px 12px;
  transition: background 0.1s;
}
.ows-dc-msg:hover { background: rgba(255,255,255,0.02); }
.ows-dc-msg.compact { padding-left: 58px; position: relative; }
.ows-dc-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  margin-top: 2px; object-fit: cover;
}
.ows-dc-content { flex: 1; min-width: 0; }
.ows-dc-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.ows-dc-author { font-size: 12px; font-weight: 600; cursor: pointer; }
.ows-dc-author:hover { text-decoration: underline; }
.ows-dc-bot-tag {
  font-size: 8px; font-weight: 700; background: #5865f2; color: #fff;
  padding: 1px 4px; border-radius: 3px; text-transform: uppercase;
}
.ows-dc-time { font-size: 10px; color: var(--text-muted); }
.ows-dc-text {
  font-size: 12px; color: var(--text-secondary); line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.ows-dc-compact-time {
  position: absolute; left: 12px; top: 4px;
  font-size: 9px; color: transparent; width: 38px; text-align: right;
}
.ows-dc-msg.compact:hover .ows-dc-compact-time { color: var(--text-muted); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .ows-order-panel { width: 220px; }
  .ows-provider-panel { width: 220px; }
}
@media (max-width: 700px) {
  .ows-overlay { padding: 8px; }
  .ows-workspace { height: 95vh; max-height: unset; }
  .ows-order-panel { display: none; }
  .ows-provider-panel { width: 100%; position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; }
}

/* ── Dashboard: Mobile Responsiveness ───────────────────────── */
@media (max-width: 768px) {
  /* Reduce page padding on mobile */
  .page { padding: 12px; }

  /* KPI row: 2×2 instead of 4×1 */
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 12px; }
  .kpi-val { font-size: 22px; }
  .kpi-cmp { gap: 6px; flex-wrap: wrap; }

  /* "En Linea" pill list: smaller pills, more wrap room */
  .opills { gap: 3px; }
  .online-pill { font-size: 9px; padding: 2px 6px; }

  /* Sales section header: wrap on narrow screens */
  .sales-head { flex-wrap: wrap; gap: 6px; }
  .sales-head > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

  /* Ventas por Juego: donut + legend stacked above the bar chart */
  .sales-viz { grid-template-columns: 1fr; gap: 12px; }
  .donut-wrap { flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
  .donut-container { width: 150px; height: 150px; flex-shrink: 0; }
  .donut-total-value { font-size: 17px; }
  .donut-legend { margin-top: 0; flex: 1; min-width: 120px; }
  .legend-item { font-size: 10px; gap: 4px; }
  .legend-val { min-width: 42px; font-size: 10px; }

  /* Horizontal bar chart: drop useless ops "—" column */
  .hbar-row { grid-template-columns: 72px 1fr 62px; gap: 6px; }
  .hbar-ops { display: none; }
  .hbar-name { font-size: 11px; }
  .hbar-val { font-size: 11px; }
  .hbar-fill { font-size: 9px; padding-left: 6px; }

  /* Projection panel: header wraps, stats go 3 cols */
  .proj-head { flex-wrap: wrap; gap: 4px; }
  .proj-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .proj-labels { flex-wrap: wrap; gap: 2px; font-size: 9px; }
  .ps-val { font-size: 14px; }

  /* Turnos + Finanzas: single column */
  .mid-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .page { padding: 8px; }

  /* KPI: slightly smaller values */
  .kpi { padding: 10px; }
  .kpi-val { font-size: 20px; }

  /* Donut: shrink a bit more, keep row layout */
  .donut-container { width: 130px; height: 130px; }
  .donut-total-value { font-size: 15px; }

  /* Bar chart name column tighter */
  .hbar-row { grid-template-columns: 62px 1fr 56px; gap: 5px; }
  .hbar-name { font-size: 10px; }

  /* Projection stats: 2 cols + last item spans both */
  .proj-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .proj-stats .ps:last-child { grid-column: span 2; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
  .ps-val { font-size: 13px; }
  .ps-label { font-size: 8px; }

  /* Sales head: stack title and nav */
  .sales-head { flex-direction: column; align-items: flex-start; }
}

/* ── Mobile Topbar Menu ──────────────────────────────────────── */

/* Toggle button — hidden on desktop, shown on mobile */
#tb-mobile-menu-btn { display: none; }
#tb-mobile-menu-btn.active { background: var(--bg-active); border-color: var(--accent-orange); }

/* Backdrop */
#tb-mobile-menu-backdrop {
  position: fixed; inset: 0;
  top: var(--topbar-h);
  background: rgba(0,0,0,.45);
  z-index: 199;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
#tb-mobile-menu-backdrop.open { opacity: 1; pointer-events: all; }

/* Dropdown panel */
#tb-mobile-menu {
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  z-index: 200;
  transform: translateY(-8px);
  opacity: 0; pointer-events: none;
  transition: transform .2s cubic-bezier(.4,0,.2,1), opacity .18s;
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
#tb-mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; }

/* User section */
.tbm-user {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--bg-elevated);
}
.tbm-user .user-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.tbm-user .cat-badge { font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.tbm-user img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* Divider */
.tbm-divider { height: 1px; background: var(--border); margin: 0; }

/* Section label */
.tbm-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
  padding: 10px 16px 4px;
}

/* Action items */
.tbm-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: transparent; border: none;
  color: var(--text-primary); font-size: 14px; font-family: var(--font-ui);
  cursor: pointer; text-align: left;
  transition: background .12s;
}
.tbm-item:hover, .tbm-item:active { background: var(--bg-elevated); }
.tbm-item-icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--text-muted);
}
.tbm-item:hover .tbm-item-icon { border-color: var(--accent-orange); color: var(--accent-orange); background: rgba(249,115,22,.08); }
.tbm-item-label { flex: 1; font-weight: 500; }
.tbm-danger .tbm-item-label, .tbm-danger .tbm-item-icon { color: var(--accent-red); }
.tbm-danger .tbm-item-icon { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.06); }
.tbm-danger:hover .tbm-item-icon { border-color: var(--accent-red); background: rgba(239,68,68,.12); }

/* Notification badge */
.tbm-badge {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* Keyboard hint */
.tbm-kbd {
  font-size: 10px; color: var(--text-muted);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 3px; padding: 2px 5px;
  font-family: var(--font-ui); font-weight: 600;
}

/* Shortcuts grid */
.tbm-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px 16px 12px;
}
.tbm-shortcut {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 11px; font-weight: 600;
  font-family: var(--font-ui); cursor: pointer;
  transition: all .15s; text-align: center; line-height: 1.2;
}
.tbm-shortcut:hover, .tbm-shortcut:active { border-color: var(--accent-orange); background: rgba(249,115,22,.06); color: var(--text-primary); }
.tbm-shortcut span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tbm-no-shortcuts { font-size: 12px; color: var(--text-muted); padding: 8px 16px 12px; display: block; }

@media (max-width: 768px) {
  /* Show menu button, hide all other topbar pill children */
  .topbar-pills > *:not(#tb-mobile-menu-btn) { display: none !important; }
  #tb-mobile-menu-btn { display: flex; position: relative; }
}


/* ================================================================
   Notes System
   ================================================================ */

/* User dropdown in topbar */
.tb-user-dropdown-wrap { position: relative; display: flex; align-items: center; }
.tb-user-toggle { cursor: pointer !important; user-select: none; }
.tb-user-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 2000;
  padding: 4px 0;
  animation: fadeInDown .12s ease;
}
.tb-user-dropdown-menu.open { display: block; }
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tb-user-dropdown-item {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 8px 14px; font-size: 12px; font-family: var(--font-ui); font-weight: 500;
  color: var(--text-secondary); background: none; border: none; cursor: pointer;
  text-align: left; transition: background .12s, color .12s;
}
.tb-user-dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.tb-udropdown-logout { color: var(--accent-red) !important; }
.tb-udropdown-logout:hover { background: rgba(239,68,68,.1) !important; }
.tb-user-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
.tb-user-dropdown-label {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 14px 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
}
.tb-udropdown-viewas-exit { color: var(--accent-orange) !important; }
.tb-udropdown-viewas-exit:hover { background: rgba(249,115,22,.1) !important; }

/* ── "Ver como" — overlay de carga + banner de vista activa ── */
.viewas-loading {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: var(--bg-base);
  animation: fadeInDown 0.15s ease;
}
.viewas-loading-spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--border);
  border-top-color: var(--accent-orange);
  border-radius: 50%;
  animation: viewasSpin 0.8s linear infinite;
}
@keyframes viewasSpin { to { transform: rotate(360deg); } }
.viewas-loading-text { font-size: 13px; font-weight: 600; color: var(--text-secondary); font-family: var(--font-ui); }
.viewas-banner {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 9000;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-orange);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12px; font-family: var(--font-ui);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
.viewas-banner b { color: var(--accent-orange); font-weight: 700; }
.viewas-banner:hover { background: var(--bg-hover); }
.viewas-banner-exit { text-decoration: underline; color: var(--text-primary); }

/* Stock topbar pill */
.stock-pill-wrap { position: relative; display: flex; align-items: center; }
.stock-pill-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px;
  font-size: 9px; font-weight: 700; text-align: center;
  border-radius: 8px; background: #22c55e; color: #0b1220;
  border: 1px solid var(--bg-base, #0b1220);
}
/* Punto de "stock sin ver". Va del lado IZQUIERDO, opuesto al badge verde de la esquina derecha
   (que cuenta juegos con stock en línea): son dos cosas distintas y superpuestas no se leerían.
   Naranja y latiendo — es una oportunidad con reloj, no un contador más. */
.stock-pill-dot {
  position: absolute; top: -5px; left: -6px;
  min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px;
  font-size: 9px; font-weight: 800; text-align: center;
  border-radius: 8px; background: #f97316; color: #1a0f05;
  border: 1px solid var(--bg-base, #0b1220);
  animation: stock-dot-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stock-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,.55); }
  50%      { box-shadow: 0 0 0 5px rgba(249,115,22,0); }
}
@media (prefers-reduced-motion: reduce) { .stock-pill-dot { animation: none; } }

.stock-pill-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  width: 300px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 2000; overflow: hidden; animation: fadeInDown .12s ease;
}
.stock-pill-menu.open { display: block; }
.stock-pill-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text-primary);
}
.stock-pill-viewall { font-size: 11px; font-weight: 600; color: var(--accent-primary); text-decoration: none; cursor: pointer; }
.stock-pill-viewall:hover { text-decoration: underline; }
.stock-pill-body { max-height: 360px; overflow-y: auto; padding: 4px 0; }
.stock-pill-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 14px; cursor: pointer; transition: background .12s;
}
.stock-pill-row:hover { background: var(--bg-hover); }
.stock-pill-logo {
  width: 30px; height: 30px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
  background: var(--bg-surface);
}
.stock-pill-logo-fallback {
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  border: 1px solid var(--border);
}
.stock-pill-game { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.stock-pill-game-name {
  display: flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden;
}
.stock-pill-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stock-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; margin-right: 5px; }
.stock-pill-line2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stock-pill-server {
  min-width: 0; font-size: 10px; font-weight: 600; letter-spacing: .2px;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stock-pill-game-sub { font-size: 10px; color: var(--text-muted); }
.stock-pill-amt { font-size: 13px; font-weight: 700; color: #22c55e; white-space: nowrap; flex-shrink: 0; margin-left: auto; }
.stock-pill-empty { padding: 22px 14px; text-align: center; font-size: 12px; color: var(--text-muted); }

/* Accesos Rápidos consolidated dropdown */
.ar-dropdown-wrap { position: relative; display: flex; align-items: center; }
.ar-toggle-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px;
  font-size: 9px; font-weight: 700; text-align: center;
  border-radius: 8px; background: var(--accent-primary, #6366f1); color: #fff;
  border: 1px solid var(--bg-base, #0b1220);
}
.ar-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  width: 248px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 2000; overflow: hidden; padding: 4px 0; animation: fadeInDown .12s ease;
}
.ar-dropdown-menu.open { display: block; }
.ar-dropdown-header {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px 8px; margin-bottom: 2px; border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted);
}
.ar-dropdown-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 14px; font-size: 12px; font-family: var(--font-ui); font-weight: 600;
  color: var(--text-secondary); background: none; border: none; cursor: pointer;
  text-align: left; transition: background .12s, color .12s;
}
.ar-dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.ar-dropdown-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-dropdown-empty { color: var(--text-muted); font-weight: 500; }
.ar-dropdown-kbd {
  font-size: 8px; opacity: .7; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 2px; padding: 1px 4px; flex-shrink: 0;
}
.ar-dropdown-edit { color: var(--text-muted); opacity: 0; flex-shrink: 0; transition: opacity .12s, color .12s; }
.ar-dropdown-item:hover .ar-dropdown-edit { opacity: .65; }
.ar-dropdown-edit:hover { color: var(--accent-primary) !important; opacity: 1 !important; }

/* Notes topbar pill */
.notes-pill { font-size: 12px; gap: 5px; }

/* Notes nav badge */
#notas-nav-badge {
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  line-height: 16px; text-align: center; border-radius: 8px; padding: 0 4px;
}

/* Toast container */
#notes-toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 9000;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none; max-width: 340px;
}

/* Notes toast */
.notes-toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-left: 3px solid var(--accent-orange); border-radius: var(--radius-sm);
  padding: 10px 14px; font-family: var(--font-ui); pointer-events: all;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); opacity: 0; transform: translateX(20px);
  transition: opacity .22s ease, transform .22s ease; max-width: 340px;
}
.notes-toast--show { opacity: 1; transform: translateX(0); }
.notes-toast--alto         { border-left-color: #ef4444; }
.notes-toast--intermedio   { border-left-color: #f59e0b; }
.notes-toast--bajo         { border-left-color: #22c55e; }
.notes-toast-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.notes-toast-body { flex: 1; min-width: 0; }
.notes-toast-title { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-toast-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notes-toast-time { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.notes-toast-close { flex-shrink: 0; background: none; border: none; color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 0; line-height: 1; margin-top: 1px; }
.notes-toast-close:hover { color: var(--text-primary); }

/* Notes page */
.notes-page { padding: 24px; max-width: 860px; margin: 0 auto; }
.notes-admin-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.notes-admin-bar-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); flex: 1; }
.notes-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 48px 16px; font-family: var(--font-ui); }
.notes-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 24px 0 10px; }

/* Note card */
.notes-list { display: flex; flex-direction: column; gap: 10px; }
.notes-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  font-family: var(--font-ui); transition: border-color .15s; position: relative;
}
.notes-card--unread { border-left: 3px solid var(--accent-orange); background: var(--bg-elevated); }
.notes-card--closed { opacity: .55; }
.notes-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.notes-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-orange); flex-shrink: 0; }
.notes-priority-badge { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 2px 6px; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.notes-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); flex: 1; }
.notes-card-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.notes-action-btn {
  font-size: 11px; font-family: var(--font-ui); font-weight: 600;
  padding: 3px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-secondary); cursor: pointer; transition: all .12s;
}
.notes-action-btn:hover { border-color: var(--accent-orange); color: var(--text-primary); }
.notes-action-btn--del:hover { border-color: var(--accent-red); color: var(--accent-red); }
.notes-card-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.notes-card-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
.notes-target-chip { font-size: 10px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted); font-weight: 600; }

/* Notes skeleton */
.notes-skeleton-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; animation: notesPulse 1.4s ease-in-out infinite; }
.notes-skeleton-line { height: 12px; border-radius: 4px; background: var(--bg-hover); margin-bottom: 8px; }
@keyframes notesPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Notes modal */
.notes-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: notesFadeIn .15s ease;
}
@keyframes notesFadeIn { from { opacity: 0; } to { opacity: 1; } }
.notes-modal {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto; font-family: var(--font-ui);
  animation: notesSlideUp .15s ease;
}
@keyframes notesSlideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.notes-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.notes-modal-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.notes-modal-close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; padding: 0; line-height: 1; }
.notes-modal-close:hover { color: var(--text-primary); }
.notes-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.notes-modal-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.notes-modal-input, .notes-modal-textarea {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-ui);
  font-size: 13px; padding: 8px 12px; transition: border-color .15s; box-sizing: border-box;
}
.notes-modal-input:focus, .notes-modal-textarea:focus { outline: none; border-color: var(--accent-orange); }
.notes-modal-textarea { resize: vertical; min-height: 90px; }

/* Priority radio */
.notes-prio-group { display: flex; gap: 8px; }
.notes-prio-option {
  flex: 1; padding: 7px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-secondary); font-size: 11px; font-weight: 700;
  text-align: center; cursor: pointer; transition: all .12s; text-transform: uppercase; font-family: var(--font-ui);
}
.notes-prio-option.selected { border-color: var(--accent-orange); background: rgba(249,115,22,.12); color: var(--text-primary); }

/* Target chips in modal */
.notes-chips-wrap { display: flex; gap: 6px; flex-wrap: wrap; }
.notes-chip {
  font-size: 11px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-muted); cursor: pointer; font-weight: 600;
  transition: all .12s; font-family: var(--font-ui);
}
.notes-chip.selected { border-color: var(--accent-orange); background: rgba(249,115,22,.12); color: var(--text-primary); }
.notes-chip--all.selected { border-color: #22c55e; background: rgba(34,197,94,.12); color: #4ade80; }
.notes-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); }

/* Analytics modal */
.notes-analytics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.notes-analytics-stat { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; font-family: var(--font-ui); }
.notes-analytics-stat-val { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.notes-analytics-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.notes-analytics-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-ui); }
.notes-analytics-table th { padding: 6px 10px; text-align: left; color: var(--text-muted); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
.notes-analytics-table td { padding: 7px 10px; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); }
.notes-analytics-table tr:last-child td { border-bottom: none; }
.notes-analytics-per-note { display: flex; flex-direction: column; gap: 16px; }
.notes-analytics-note-block { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.notes-analytics-note-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }

/* Notes toolbar (search + priority filters) */
.notes-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.notes-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 180px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  transition: border-color .15s;
}
.notes-search-wrap:focus-within { border-color: var(--accent-orange); }
.notes-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-ui);
}
.notes-search-input::placeholder { color: var(--text-muted); }
.notes-prio-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.notes-prio-filter {
  font-size: 11px;
  font-family: var(--font-ui);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.notes-prio-filter:hover { border-color: var(--accent-orange); color: var(--text-primary); }
.notes-prio-filter.active { border-color: var(--accent-orange); background: rgba(249,115,22,.12); color: var(--text-primary); }

/* User row format */
.notes-rows { display: flex; flex-direction: column; gap: 4px; }
.notes-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-ui);
  transition: background .12s, border-color .12s;
}
.notes-row { cursor: pointer; }
.notes-row:hover { background: var(--bg-elevated); border-color: var(--border-focus); }
.notes-row--unread { border-left-width: 3px; background: var(--bg-elevated); }
.notes-row--expanded { align-items: start; }
.notes-row--expanded .notes-row-title span { white-space: normal; text-overflow: clip; }
.notes-row--expanded .notes-row-desc { white-space: normal; text-overflow: clip; }
.notes-row-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  min-width: 0;
}
.notes-row-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.notes-row-desc {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.notes-row-prio { display: flex; justify-content: flex-end; }

@media (max-width: 600px) {
  .notes-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .notes-row-desc { grid-column: 1 / -1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .notes-prio-filters { gap: 4px; }
  .notes-prio-filter { font-size: 10px; padding: 3px 7px; }
}

/* Skeleton inner classes */
.notes-skeleton-wrap { padding: 24px; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.notes-sk-title { width: 50%; }
.notes-sk-body { width: 85%; }

/* Card title row */
.notes-card-title-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }

/* Target grid in modal */
.notes-target-grid { display: flex; flex-wrap: wrap; gap: 6px; }

/* Admin closed section */
.notes-admin-closed-section { margin-top: 20px; }
.notes-show-closed-btn {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-family: var(--font-ui);
  font-weight: 600; color: var(--text-muted); background: none; border: none;
  cursor: pointer; padding: 6px 0; transition: color .12s;
}
.notes-show-closed-btn:hover { color: var(--text-secondary); }

/* Inline card analytics */
.notes-card-ana-sep { border-top: 1px solid var(--border-light); margin: 8px 0 6px; }
.notes-card-ana { font-family: var(--font-ui); }
.notes-card-ana-stats { gap: 14px; margin-bottom: 6px; }
.notes-card-ana-stats .notes-analytics-stat-n { font-size: 16px; }
.notes-card-ana-stats .notes-analytics-stat { min-width: 40px; }

/* Analytics list */
.notes-analytics-list { display: flex; flex-direction: column; gap: 16px; }
.notes-analytics-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-family: var(--font-ui); }
.notes-analytics-card-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.notes-analytics-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); flex: 1; }
.notes-analytics-card-status { font-size: 11px; font-weight: 600; }
.notes-analytics-stats { display: flex; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.notes-analytics-stat { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.notes-analytics-stat-n { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.notes-analytics-stat span:last-child { font-size: 10px; color: var(--text-muted); text-align: center; }
.notes-analytics-users { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border-light); padding-top: 8px; }
.notes-analytics-user-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.notes-analytics-username { flex: 1; color: var(--text-secondary); font-weight: 600; }
.notes-analytics-count { color: var(--text-muted); }
.notes-analytics-last { color: var(--text-muted); font-size: 11px; }

@media (max-width: 600px) {
  .notes-page { padding: 12px; }
  .notes-skeleton-wrap { padding: 12px; }
  .notes-analytics-grid { grid-template-columns: repeat(2, 1fr); }
  .notes-modal { max-height: 100dvh; border-radius: 0; }
  .notes-prio-group { flex-direction: column; }
}

/* ── Seguimiento Compras ──────────────────────────────────────── */
.sc-page { padding: 16px 24px 24px; }

.sc-form-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.sc-side-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* List container */
#sc-list { display: flex; flex-direction: column; gap: 8px; }

/* Card */
.sc-entry {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color .15s;
}
.sc-entry:hover { border-color: var(--border-focus, var(--accent)); }

/* Card header */
.sc-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--border);
}
.sc-entry-title { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; }
.sc-entry-icon { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; }
.sc-entry-label { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-entry-date { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.sc-entry-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Card buttons */
.sc-btn { font-family: inherit; cursor: pointer; border: none; transition: opacity .15s, background .15s; }
.sc-btn:hover { opacity: 0.85; }
.sc-btn-primary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; font-size: 11px;
  background: var(--accent, #f97316); color: #fff;
  border-radius: 7px; font-weight: 500;
}
.sc-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; color: var(--text-muted);
  border: 0.5px solid var(--border); border-radius: 7px;
}
.sc-btn-icon:hover { background: var(--bg-surface); color: var(--text-primary); }

/* Card body */
.sc-entry-body { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.sc-entry-body--solo { grid-template-columns: 1fr; }

.sc-side {
  background: var(--bg-surface, rgba(0,0,0,0.2));
  border-radius: 7px;
  padding: 10px 12px;
  min-width: 0;
}
.sc-side-header { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.sc-side-arrow { width: 12px; height: 12px; flex-shrink: 0; }
.sc-side-arrow--venta { color: #ef4444; }
.sc-side-arrow--compra { color: #22c55e; }
.sc-side-label {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted);
}

.sc-mp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 500;
  padding: 2px 7px; border-radius: 999px;
  margin-bottom: 5px; white-space: nowrap;
}
.sc-mp-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

.sc-id-code {
  display: block;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer;
  padding: 3px 5px; margin: 0 -5px;
  border-radius: 4px;
  transition: background .15s, color .15s;
  user-select: all;
}
.sc-id-code:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }

.sc-divider { display: flex; align-items: center; justify-content: center; padding: 0 2px; }
.sc-divider-node {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-surface); border: 0.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.sc-divider-node svg { width: 12px; height: 12px; }

.sc-empty { padding: 36px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.sc-empty p { margin: 0; }

@media (max-width: 640px) {
  .sc-entry-body { grid-template-columns: 1fr; }
  .sc-divider { display: none; }
  .sc-page { padding: 12px; }
}

/* SC field flash when pre-filled from workspace */
@keyframes sc-field-flash-kf {
  0%   { box-shadow: 0 0 0 0 rgba(249,115,22,0.7), 0 0 0 3px rgba(249,115,22,0.4); background: rgba(249,115,22,0.15); }
  60%  { box-shadow: 0 0 0 6px rgba(249,115,22,0.15), 0 0 0 3px rgba(249,115,22,0.2); background: rgba(249,115,22,0.08); }
  100% { box-shadow: none; background: transparent; }
}
.sc-field-flash {
  animation: sc-field-flash-kf 0.9s ease-out forwards;
  border-color: #f97316 !important;
  outline: none;
}

/* Notes user layout — main + guide sidebar */
.notes-page--user {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 1080px;
  padding: 24px;
  margin: 0 auto;
}
.notes-user-main { flex: 1; min-width: 0; }

.notes-guide-sidebar {
  width: 228px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  font-family: var(--font-ui);
}
.notes-guide-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.notes-guide-section { margin-bottom: 4px; }
.notes-guide-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* Priority items */
.notes-guide-prio-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.notes-guide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.notes-guide-prio-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.notes-guide-prio-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 1px;
}

/* Use-case items */
.notes-guide-use-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 11px;
}
.notes-guide-use-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.notes-guide-use-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 1px;
}

/* Tip row at the bottom */
.notes-guide-tip {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
}

@media (max-width: 860px) {
  .notes-page--user { flex-direction: column; }
  .notes-guide-sidebar { width: 100%; position: static; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE SAFETY NET — responsive audit.
   Catches inline-styled tabs & modals that don't self-handle small screens,
   without touching each renderer. Phone-scoped, so desktop layout is untouched.
   Complements the shell/sidebar/topbar responsive rules already above.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1) Kill whole-page horizontal scroll — the most common mobile break on
        inline-styled pages (one slightly-too-wide element shifts the layout). */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* 2) Media & embeds never overflow their container. */
  img, video, canvas, iframe { max-width: 100%; }

  /* 3) Every table becomes its own horizontal scroller. main-content clips
        x-overflow on mobile, so an unwrapped wide table would otherwise be cut
        off; this keeps all columns reachable by swiping the table. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* 4) Long unbreakable strings (wallets, tx hashes, order ids, urls) wrap
        instead of forcing the card/modal wider than the screen. */
  pre { white-space: pre-wrap; }
  pre, code { overflow-wrap: anywhere; word-break: break-word; }

  /* 5) Comfortable page gutters (desktop uses 24px). */
  .page { padding: 16px 12px; }

  /* 6) Modal/overlay content always fits the screen and scrolls, never runs off it.
        Covers every overlay convention in the app (id ending "-overlay", or a class
        containing "overlay"). Caps width + height and enables scroll on both axes. */
  [id$="-overlay"] > *, [class*="overlay"] > * {
    max-width: 96vw !important; max-height: 92vh; overflow: auto;
  }
}

@media (max-width: 480px) {
  /* 7) 16px inputs stop iOS Safari from auto-zooming the page on focus; keeps a
        roomy tap target. Excludes toggles/sliders which shouldn't be resized. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px; }
}

/* 8) Collapse fixed-count inline grids (repeat(2..6, …)) that can't auto-collapse.
      Requires BOTH the grid property and a repeat(N) so only real column grids are hit;
      auto-fit / auto-fill grids already reflow and are left alone. */
@media (max-width: 600px) {
  [style*="grid-template-columns"][style*="repeat(3"],
  [style*="grid-template-columns"][style*="repeat(4"],
  [style*="grid-template-columns"][style*="repeat(5"],
  [style*="grid-template-columns"][style*="repeat(6"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 460px) {
  [style*="grid-template-columns"][style*="repeat(2"] { grid-template-columns: 1fr !important; }
}

/* ── iPhone safe-area insets (notch / Dynamic Island / home indicator) ──────────
   The page uses viewport-fit=cover, so fixed/edge chrome must inset itself. env()
   resolves to 0 on non-notch devices, so this is inert on desktop. */
@supports (padding: max(0px, env(safe-area-inset-top))) {
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); }
  .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .main-content { padding-bottom: env(safe-area-inset-bottom); }
  /* Sidebar clock-in / bottom action button clears the home indicator. */
  .fichar-sidebar-btn { margin-bottom: max(0px, env(safe-area-inset-bottom)); }
  /* Full-screen modal overlays: keep content off the island + indicator. */
  [id$="-overlay"], [class*="overlay"] { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Phones ≤480px (covers iPhone 15 Pro @ 393pt): deeper content adaptations ── */
@media (max-width: 480px) {
  /* Inline min-widths on content/modal boxes are the main cause of "wider than the
     screen" rows on a phone — let those boxes shrink to fit. Scoped to page & modal
     content so the sidebar/topbar chrome is untouched; tables keep their min-width so
     they stay horizontally scrollable (safety-net rule #3) instead of cramming. */
  :where(.page, [class*="overlay"], [id$="-overlay"]) [style*="min-width"]:not(table):not(th):not(td) { min-width: 0 !important; }

  /* Slightly tighter gutters and headings so dense tabs breathe. */
  .page { padding: 14px 10px; }
  .page h1 { font-size: 20px; }
  .page h2 { font-size: 17px; }
  .page h3 { font-size: 15px; }
}

/* ── iPhone 15 Pro / very small (≤430px): neutralize any leftover fixed widths on
     content containers so a single stray element can't force a horizontal shift. ── */
@media (max-width: 430px) {
  :where(.page, [class*="overlay"], [id$="-overlay"]) [style*="flex-basis"] { flex-basis: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE SAFETY NET — parte 2 (auditoría 2026-08-23).
   La parte 1 (reglas 1-8, arriba) neutraliza min-width y flex-basis inline, pero
   quedaban afuera los tres patrones inline MÁS frecuentes del panel, medidos sobre
   js/*.js: `width:NNNpx` (481), `display:flex` sin flex-wrap (1945) y
   `white-space:nowrap` (580). Son inline, así que no hay forma de arreglarlos
   archivo por archivo sin tocar miles de líneas: se neutralizan acá, con el mismo
   criterio que la parte 1 (sólo teléfono, sólo contenido de páginas y modales, el
   chrome del shell no se toca).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 9) Ancho fijo inline. La regla 1 pone overflow-x:hidden en <body>, así que una caja
        con `width:420px` en un teléfono de 393px no queda sólo fea: queda RECORTADA y su
        contenido es inalcanzable. Se usa max-width y NO width:auto a propósito — sólo
        limita lo que se pasa de ancho y deja intactos avatares, íconos y swatches, que
        son más chicos que su contenedor. Un max-width inline propio sigue ganando (el
        estilo inline tiene más especificidad), así que nada pierde su tope pensado. */
  :where(.page, [class*="overlay"], [id$="-overlay"]) [style*="width:"]:not(table):not(th):not(td) {
    max-width: 100%;
  }

  /* 10) Filas flex inline que envuelven. Sin flex-wrap, una fila de 4 botones o de
         chips empuja la tarjeta más ancha que la pantalla. Va SIN !important: si el
         componente define su propio flex-wrap en una hoja de estilos, sigue mandando. */
  :where(.page, [class*="overlay"], [id$="-overlay"]) [style*="display:flex"]:not([style*="flex-wrap"]) {
    flex-wrap: wrap;
  }

  /* 11) Los hijos de un flex pueden achicarse de verdad. min-width:auto es el default y
         es LA razón por la que un texto largo se niega a comprimirse y estira la fila. */
  :where(.page, [class*="overlay"], [id$="-overlay"]) [style*="display:flex"] > * { min-width: 0; }
}

@media (max-width: 480px) {
  /* 12) nowrap pasa a wrap en teléfono — EXCEPTO el patrón de truncado (nowrap + ellipsis):
         ahí dejar que envuelva anula el "…" y dispara el alto de la fila, que es peor. */
  :where(.page, [class*="overlay"], [id$="-overlay"]) [style*="white-space:nowrap"]:not([style*="ellipsis"]) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* 13) Grids inline con tracks fijos en px (los repeat(N) ya los cubre la regla 8, y los
         minmax/auto-fit reflowean solos). */
  :where(.page, [class*="overlay"], [id$="-overlay"]) [style*="grid-template-columns"]:not([style*="repeat"]):not([style*="minmax"]) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  /* 14) Un <select> se dimensiona según su opción MÁS LARGA, así que un filtro con nombres de
         juego largos medía 642px dentro de una pantalla de 393 y quedaba recortado. Los form
         controls nunca deberían pasarse de su contenedor en teléfono. (Los <input> ya heredan
         width del layout; el problema es específico de select por el ancho de sus opciones.) */
  select, input, textarea, button { max-width: 100%; }
}

@media (max-width: 768px) {
  /* 15) Cadenas largas sin espacios (URLs, wallets, hashes, ids de orden) dentro de CUALQUIER
         contenedor, no sólo <pre>/<code> como en la regla 4. Importa más de lo que parece: con
         `anywhere` la palabra deja de contar para el ancho MÍNIMO del contenedor, así que un flex
         o un grid recién ahí puede achicarse. Sin esto, una URL de Facebook dentro de un árbol con
         96px de sangría hacía que toda la tarjeta midiera 388px en una pantalla de 393. */
  :where(.page, [class*="overlay"], [id$="-overlay"]) { overflow-wrap: anywhere; }
}

/* ── Difusión Redes: árbol Foro › Categoría › Juego › Idioma › Links ───────────
   La sangría está inline y escala 16 → 36 → 56 → 76 → 96px. En un teléfono de 393px eso deja
   ~230px útiles y la tarjeta terminaba midiendo 388px (recortada por el overflow-x:hidden del
   body). Se comprime la sangría en pantallas chicas — la jerarquía se sigue leyendo. Va con
   !important porque el padding original es un atributo style inline. */
@media (max-width: 768px) {
  .dif-cat-header   { padding-left: 18px !important; padding-right: 10px !important; }
  .dif-game-header  { padding-left: 26px !important; padding-right: 10px !important; }
  .dif-lang-header  { padding-left: 34px !important; padding-right: 10px !important; }
  .dif-links-list   { padding-left: 42px !important; padding-right: 10px !important; }
  .dif-forum-header { padding-left: 10px !important; padding-right: 10px !important; }
  .dif-forum-block, .dif-cat-block, .dif-game-block { min-width: 0; }
}

/* ── Reparación de orden de cascada ────────────────────────────────────────────
   `.rank-toolbar` (Toplist/Undercutters) tiene su versión móvil en la línea ~3682, DENTRO de un
   @media (max-width:768px)… pero la regla de escritorio de la línea ~4120 declara
   flex-wrap:nowrap y viene DESPUÉS en el archivo. Las media queries no suman especificidad, así
   que ganaba la última: la versión móvil era código muerto y la barra se salía de la pantalla.
   Al ir al final del archivo, esta sí se aplica. (Mismo patrón a revisar si aparecen otras
   reglas móviles que "no hacen nada": casi siempre es orden de cascada, no el media query.) */
@media (max-width: 768px) {
  .rank-toolbar { flex-wrap: wrap !important; overflow: visible !important; }
}

/* ── Undercutters › TopUps: setup (izq) + historial (der) en dos tarjetas ──────
   La pestaña tenía el historial apilado abajo de todo, así que había que scrollear la lista
   entera de juegos para verlo. Ahora van lado a lado: el setup ocupa el ancho sobrante y el
   historial queda en una columna fija a la derecha, pegada (sticky) con su propio scroll — se
   puede leer quién tocó qué mientras se edita un watcher.
   Rompe a una sola columna cuando el ancho ya no alcanza para las dos (≤1180px). */
.uc-tu-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  gap: 14px;
  align-items: start;
}
@media (min-width: 1700px) {
  .uc-tu-split { grid-template-columns: minmax(0, 1fr) minmax(400px, 520px); }
}
@media (max-width: 1180px) {
  .uc-tu-split { grid-template-columns: minmax(0, 1fr); }
}

.uc-tu-card {
  min-width: 0;               /* sin esto el contenido ancho estira la columna del grid */
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.uc-tu-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.uc-tu-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.uc-tu-card-body { padding: 12px; min-width: 0; }
/* El setup no recorta: adentro hay dropdowns/tooltips que asoman fuera de la tarjeta. El header
   redondea sus propias esquinas para que se siga viendo como tarjeta sin el overflow:hidden. */
.uc-tu-setup { overflow: visible; }
.uc-tu-setup > .uc-tu-card-head { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }

/* Historial: alto acotado + scroll propio, así 150 filas no estiran la tarjeta hasta el infinito
   ni empujan la columna de setup. El sticky es un extra: si algún ancestro con overflow lo anula
   (html / body / .main-content llevan overflow-x:hidden), la tarjeta queda al tope de la fila del
   grid, que es igual de usable — por eso el alto se acota en el body y no acá. */
.uc-tu-hist {
  position: sticky;
  top: 10px;
}
.uc-tu-hist-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.uc-tu-hist-body {
  flex: 1;
  min-height: 0;
  max-height: calc(100vh - 230px);
  overflow: auto;
  padding: 10px 12px 12px;
}
/* ── Que NINGUNA de las dos tarjetas scrollee de costado ──────────────────────────────────────
   Las dos tablas nacieron para ocupar el ancho completo de la pestaña; en media pantalla cada una
   pedía más de lo que tiene y aparecían dos scrollbars horizontales. En vez de dejarlas scrollear,
   se compactan: `table-layout: fixed` reparte el ancho disponible por porcentajes en lugar de por
   el contenido, y lo que no entra se corta con ellipsis. Nada se pierde — cada celda recortable
   lleva su texto completo en el `title`. Los wrappers conservan su overflow-x como red de
   seguridad, pero en la práctica ya no se activa. */

/* Historial (columna derecha) */
.uc-tu-hist-body .uc-hist-table {
  table-layout: fixed;
  width: 100%;
}
.uc-tu-hist-body .uc-hist-table td,
.uc-tu-hist-body .uc-hist-table th { padding-left: 7px !important; padding-right: 7px !important; }
.uc-tu-hist-body .uc-hist-table .uch-when   { width: 15%; }
.uc-tu-hist-body .uc-hist-table .uch-action { width: 13%; }
.uc-tu-hist-body .uc-hist-table .uch-game   { width: 17%; }
.uc-tu-hist-body .uc-hist-table .uch-label  { width: 14%; }
.uc-tu-hist-body .uc-hist-table .uch-changes{ width: 27%; }
.uc-tu-hist-body .uc-hist-table .uch-user   { width: 14%; }
/* Juego, label y usuario: una línea, cortada con "…" (el nombre completo va en el title).
   Sólo en las celdas — los encabezados se dejan envolver, si no "JUEGO / MARCA" se cortaría. */
.uc-tu-hist-body .uc-hist-table td.uch-game,
.uc-tu-hist-body .uc-hist-table td.uch-label,
.uc-tu-hist-body .uc-hist-table td.uch-user {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uc-tu-hist-body .uc-hist-table th { white-space: normal; line-height: 1.25; }
/* Los chips de "Cambios" son lo único que no puede partirse: se los deja envolver entre sí y, si
   uno solo no entra, que corte adentro en vez de estirar la columna. */
.uc-tu-hist-body .uc-hist-table .uch-changes { overflow: hidden; }
.uc-tu-hist-body .uc-hist-table .uch-changes > span {
  max-width: 100%;
  overflow: hidden;
  vertical-align: top;
}

/* Cabecera de cada juego: nace como una sola fila sin wrap, con los chips de watchers en
   flex-shrink:0 — en media pantalla se salía y quedaba recortada por el overflow:hidden de la
   tarjeta. Ahora envuelve a una segunda línea. El "gameId · N offers" se oculta: es lo único con
   nowrap que no aporta nada acá (el dato sigue en la tabla de abajo y en el modal). */
.uc-tu-setup .pub-topup-hdr { flex-wrap: wrap; gap: 6px; row-gap: 6px; }
.uc-tu-setup .pub-topup-hdr-right { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.uc-tu-setup .pub-topup-meta { display: none; }

/* Undercutters TopUps (columna izquierda) */
.uc-tu-setup .pub-topup-offers { table-layout: fixed; width: 100%; }
.uc-tu-setup .pub-topup-offers td,
.uc-tu-setup .pub-topup-offers th { padding-left: 6px !important; padding-right: 6px !important; }
.uc-tu-setup .pub-topup-offers .tu-col-label   { width: 14%; }
.uc-tu-setup .pub-topup-offers .tu-col-actions { width: 13%; }
.uc-tu-setup .pub-topup-offers .tu-col-offerid { width: 15%; }
.uc-tu-setup .pub-topup-offers .tu-col-env     { width: 6%; }
.uc-tu-setup .pub-topup-offers .tu-col-precio  { width: 10%; }
.uc-tu-setup .pub-topup-offers .tu-col-comp    { width: 12%; }
.uc-tu-setup .pub-topup-offers .tu-col-target  { width: 10%; }
.uc-tu-setup .pub-topup-offers .tu-col-estado  { width: 20%; }
.uc-tu-setup .pub-topup-offers td.tu-col-label,
.uc-tu-setup .pub-topup-offers td.tu-col-offerid,
.uc-tu-setup .pub-topup-offers td.tu-col-env {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uc-tu-setup .pub-topup-offers th { white-space: normal; line-height: 1.25; }
/* Estado y nombre del vendedor #1: pueden ser largos, se recortan (texto completo en el title). */
.uc-tu-setup .pub-topup-offers td.tu-col-estado > span,
.uc-tu-setup .pub-topup-offers .tu-comp-seller {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Los botones (✎ ⏸ ✕ 🔗) envuelven a una segunda fila en vez de desbordar la celda: el
   min-width:72px original garantizaba scroll horizontal apenas la columna se achicaba. */
.uc-tu-setup .pub-topup-offers .rank-t-cell-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
}

/* Apilado: la tarjeta ya no compite por alto con nada, se deja crecer. */
@media (max-width: 1180px) {
  .uc-tu-hist { position: static; }
  .uc-tu-hist-body { max-height: none; overflow: visible; }
}
@media (max-width: 768px) {
  .uc-tu-split { gap: 10px; }
  .uc-tu-card-head, .uc-tu-hist-filters { padding: 8px 10px; }
  .uc-tu-card-body, .uc-tu-hist-body { padding: 10px; }
  .uc-tu-hist-filters > * { flex: 1 1 100% !important; }
  /* En teléfono repartir 6-8 columnas por porcentaje deja celdas de 40px ilegibles. Se vuelve al
     ancho natural y el wrapper scrollea, que es el patrón normal de tabla en pantalla chica. */
  .uc-tu-hist-body .uc-hist-table,
  .uc-tu-setup .pub-topup-offers { table-layout: auto; }
  .uc-tu-hist-body .uc-hist-table th,
  .uc-tu-hist-body .uc-hist-table td,
  .uc-tu-setup .pub-topup-offers th,
  .uc-tu-setup .pub-topup-offers td { width: auto; }
  .uc-tu-setup .pub-topup-meta { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   NOVEDADES — la edición periódica (js/novedades.js · mockup novedades-1-edicion.html).
   Layout editorial: masthead + nota principal + columna lateral.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
/* Ocupa TODO el ancho de la pestaña: la edición es dens<a en datos y a 1180px desperdiciaba
   media pantalla en monitores anchos. El ancho lo pone el contenedor de la página. */
.nv-wrap { width: 100%; max-width: none; margin: 0; }

.nv-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 12px;
  margin-bottom:12px; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); }
.nv-barsp { margin-left:auto; }
.nv-seg { display:flex; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden; }
.nv-seg span { padding:5px 13px; font-size:11px; font-weight:700; color:var(--text-muted);
  cursor:pointer; user-select:none; }
.nv-seg span.on { background:var(--accent-orange); color:#1a1210; }
/* Selector de período: mismo control que el de vistas pero en azul, para que no se lea
   como si fuera otra pestaña. El activo elegido acá cambia QUÉ se mide, no QUIÉN. */
.nv-range span.on { background:#3b82f6; color:#fff; }
.nv-people { display:flex; align-items:center; gap:6px; }
.nv-select { padding:5px 9px; font-size:12px; font-weight:600; background:var(--bg-elevated);
  color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:inherit; min-width:190px; }
.nv-nav-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 9px;
  background:var(--bg-elevated); color:var(--text-secondary); border:1px solid var(--border);
  border-radius:var(--radius-sm); cursor:pointer; }
.nv-nav-btn:hover:not(:disabled) { background:var(--bg-hover); color:var(--text-primary); }
.nv-nav-btn:disabled { opacity:.4; cursor:default; }
.nv-nav-btn i { width:14px; height:14px; }
.nv-count { font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.nv-month { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.06em; }

.nv-note { display:flex; gap:9px; align-items:flex-start; padding:9px 12px; margin-bottom:14px;
  font-size:11.5px; line-height:1.5; background:rgba(56,189,248,.07);
  border:1px solid rgba(56,189,248,.28); border-radius:var(--radius-sm); color:var(--text-secondary); }
.nv-note i { width:15px; height:15px; flex-shrink:0; color:var(--accent-blue); margin-top:1px; }
.nv-note b { color:var(--text-primary); }

.nv-mast { border-bottom:2px solid var(--border); padding-bottom:14px; margin-bottom:20px; }
.nv-mast-top { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.nv-title { font-size:clamp(26px, 3.2vw, 40px); font-weight:900; letter-spacing:-.03em; line-height:1;
  color:var(--text-primary); }
.nv-title span { color:var(--accent-orange); }
.nv-issue { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); padding-bottom:5px; }
.nv-dek { margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--text-secondary);
  max-width:760px; }
.nv-dek b { color:var(--text-primary); }

/* Columna principal fluida + lateral que crece con la pantalla. En pantallas muy anchas la
   lateral se ensancha en vez de dejar un río de espacio vacío; abajo de 1080px se apila. */
.nv-grid { display:grid; grid-template-columns:minmax(0,1fr) clamp(300px, 24vw, 420px);
  gap:20px; align-items:start; }
@media (max-width:1080px) { .nv-grid { grid-template-columns:minmax(0,1fr); } }
/* Las tablas anchas scrollean dentro de su tarjeta, nunca empujan la página. */
.nv-wrap .card { overflow-x:auto; }
.nv-lead, .nv-grid > * { min-width:0; }

.nv-sec { margin-bottom:22px; }
/* Esqueleto de la edición entera y el aviso "actualizando…" (2026-10-14). */
.nv-sk-fila { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--border-light, var(--border)); }
.nv-sk-fila:last-child { border-bottom:0; }
.nv-sk .nv-lead > div .skeleton { display:block; }
.nv-fresco { color:var(--text-muted); }
.nv-fresco.err { color:var(--accent-orange); }
.nv-gira { animation: nv-gira 1s linear infinite; }
@keyframes nv-gira { to { transform: rotate(360deg); } }
.nv-kicker { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent-orange); margin-bottom:8px; }
.nv-kicker i { width:12px; height:12px; }
.nv-kicker .rule { flex:1; height:1px; background:var(--border); }
.nv-kicker .hint { font-size:9.5px; font-weight:600; color:var(--text-muted); letter-spacing:.04em; }
.nv-hint { margin-top:9px; font-size:10.5px; line-height:1.55; color:var(--text-muted); }
.nv-hint b { color:var(--text-secondary); }

.nv-wrap .card { background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:16px; }

/* El default son 4 tarjetas (vista Dueño). La vista de la persona tiene 3, y con el grid
   fijo en 4 quedaba una celda vacía a la derecha: como el separador se dibuja con gap sobre
   un fondo de borde, esa celda no se leía como espacio sino como una tarjeta en blanco.
   `.cols-3` la saca. Si alguna vista queda en 2, agregar el modificador correspondiente. */
.nv-lead { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin:14px 0; }
.nv-lead.cols-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:760px) { .nv-lead, .nv-lead.cols-3 { grid-template-columns:repeat(2,1fr); } }
.nv-lead > div { background:var(--bg-surface); padding:14px 15px; }
.nv-lead .lbl { font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:6px; }
.nv-lead .val { font-size:26px; font-weight:800; color:var(--text-primary); line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.nv-lead .val.pos { color:var(--accent-green); }
.nv-lead .val.neg { color:var(--accent-red); }
.nv-lead .val .of { font-size:15px; color:var(--text-muted); font-weight:700; }
.nv-lead .sub { margin-top:6px; font-size:11px; color:var(--text-muted); }

.nv-wrap .mini { width:100%; border-collapse:collapse; font-size:12px; }
.nv-wrap .mini td { padding:6px 0; border-bottom:1px solid var(--border-light); }
.nv-wrap .mini tr:last-child td { border-bottom:none; }
.nv-wrap .mini .g { font-weight:700; color:var(--text-primary); }
.nv-wrap .mini .n { text-align:right; color:var(--text-secondary);
  font-variant-numeric:tabular-nums; }
/* Puntos clave: las celdas de .mini tenian padding horizontal 0, asi que "Ganancia" y "Juego"
   quedaban pegadas ($134DONUTSMP). Se separa solo en las tablas de puntos clave para no tocar
   las mini de las otras tarjetas, que son de dos columnas y no lo necesitan. */
.nv-wrap .keytbl { table-layout:auto; }
.nv-wrap .keytbl th { padding:4px 10px 6px; font-size:9.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); font-weight:700; white-space:nowrap; }
.nv-wrap .keytbl td { padding:6px 10px; white-space:nowrap; }
.nv-wrap .keytbl td:first-child, .nv-wrap .keytbl th:first-child { padding-left:2px; }
.nv-wrap .keytbl td:last-child,  .nv-wrap .keytbl th:last-child  { padding-right:2px; }
.nv-wrap .keytbl .gan { padding-right:16px; }              /* respira antes del juego */
.nv-wrap .keytbl .juego { max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.nv-wrap .keytbl .oidcell { max-width:170px; }
.nv-wrap .oid { font-family:var(--font-mono,monospace); font-size:10.5px; color:var(--text-secondary);
  background:var(--bg-elevated); border-radius:4px; padding:2px 6px; cursor:pointer; }
.nv-wrap .oid:hover { color:var(--accent-orange); }
.nv-wrap .oid.copied { color:var(--accent-green); }
.nv-wrap .oid-go { margin-left:5px; color:var(--accent-orange); text-decoration:none; font-size:11px; }
.nv-wrap .oid-go:hover { text-decoration:underline; }
/* "Juegos: cuánto facturan vs cuánto dejan" (vista del dueño): una tabla, cada juego en su fila y
   sus categorías debajo, más chicas y corridas. */
.nv-gp { width:100%; border-collapse:collapse; font-size:12px; }
.nv-gp th { padding:6px 10px; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); text-align:right; border-bottom:1px solid var(--border); white-space:nowrap; }
.nv-gp td { padding:7px 10px; text-align:right; color:var(--text-secondary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.nv-gp th.lft, .nv-gp td.lft { text-align:left; }
.nv-gp tr.gp-juego td { border-top:1px solid var(--border-light); color:var(--text-primary); font-weight:700; }
.nv-gp tbody tr.gp-juego:first-child td { border-top:none; }
.nv-gp tr.gp-cat td { padding-top:3px; padding-bottom:3px; font-size:11px; }
.nv-gp tr.gp-cat td small { font-size:9.5px; color:var(--text-muted); }
.nv-gp .gp-ind { display:inline-block; padding-left:32px; color:var(--text-muted); font-weight:600; }
.nv-gp .gp-ind::before { content:'↳'; margin:0 6px 0 -14px; color:var(--text-muted); }
.nv-gp td.neg { color:var(--accent-red); }
/* Los dos bloques de la tabla (Juegos · Gift Cards) y las marcas que se abren para ver sus SKUs. */
.nv-gp tr.gp-sec td { padding-top:14px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-orange); border-top:none; }
.nv-gp tbody:first-of-type tr.gp-sec:first-child td { padding-top:8px; }
.nv-gp tr.gp-sec small { margin-left:6px; font-size:9.5px; font-weight:600; letter-spacing:.03em; text-transform:none; color:var(--text-muted); }
.nv-gp tr.gp-sec-tot td { color:var(--accent-orange); font-weight:800; border-bottom:1px solid var(--border); }
.nv-gp tr.gp-sec-tot td:first-child { color:var(--accent-orange); }
.nv-gp tr.gp-marca { cursor:pointer; }
.nv-gp tr.gp-marca:hover td { background:var(--bg-hover); }
.nv-gp .gp-flecha { display:inline-block; width:12px; font-style:normal; color:var(--text-muted); transition:transform .12s; }
.nv-gp tr.gp-marca.abierto .gp-flecha { transform:rotate(90deg); }
.nv-gp .gp-det { display:block; font-size:9.5px; font-weight:500; color:var(--text-muted); margin-top:1px; }
.nv-gp tr.gp-sku td { font-size:10.5px; }
.nv-gp .mg { min-width:46px; }
.nv-gp tr.gp-cat .mg { font-size:10px; padding:1px 5px; }
.nv-wrap .kjg { display:flex; align-items:center; gap:8px; min-width:0; }
.nv-wrap .kjg span { overflow:hidden; text-overflow:ellipsis; }
.nv-wrap .kjg .nv-glogo { width:20px; height:20px; }
.nv-mk.solo { padding:2px; }
.nv-mk.solo img { width:18px; height:18px; }
/* "Por marketplace" y "Sin órdenes hace…" del staff. */
/* Cantidad y % en DOS columnas de ancho fijo, alineadas a la derecha: juntas en una celda, cada fila
   empezaba donde le daba el largo del número y no quedaban una debajo de la otra. */
.nv-wrap .row.mkrow { grid-template-columns:118px minmax(0,1fr) 46px 42px; gap:8px; }
.nv-wrap .row.mkrow .nm { display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; }
.nv-wrap .row.mkrow .nm img { width:16px; height:16px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.nv-wrap .row.mkrow .vp { font-size:10.5px; font-weight:600; text-align:right; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.nv-wrap .sleep .nv-glogo { width:22px; height:22px; }

.nv-wrap .mini thead th { font-size:9px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted); padding:0 0 5px; text-align:left;
  border-bottom:1px solid var(--border-light,var(--border)); }
.nv-wrap .mini thead th.n { text-align:right; }
/* Lista de juegos con scroll. La altura da para ~15 filas (fila ~25px + encabezado); el
   encabezado queda fijo para que al scrollear se siga sabiendo que columna es cual. */
.nv-wrap .gamesbox { max-height:400px; overflow-y:auto; }
/* Sello de "esto sale del snapshot guardado". Discreto pero siempre visible: la alternativa
   es que un mes cerrado se lea como recien calculado. */
.nv-bar .nv-snap { display:inline-flex; align-items:center; gap:4px; font-size:10px;
  color:var(--text-muted); background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:5px; padding:2px 7px; white-space:nowrap; cursor:help; }
.nv-bar .nv-snap i { width:11px; height:11px; }
.nv-wrap .gamesbox thead th { position:sticky; top:0; background:var(--bg-surface); z-index:1; }
/* Fila que no es una persona ("Sin asignar"): se muestra para que la columna cierre contra el
   total de la empresa, pero no compite visualmente con los operadores reales. */
.nv-wrap .mini tr.muted .g { font-weight:600; color:var(--text-muted); font-style:italic; }
.nv-wrap .mini tr.muted .n { color:var(--text-muted); }
.nv-wrap .mini .g small { font-weight:600; color:var(--text-muted); font-size:9.5px; cursor:help; }
/* Sugerencia: juegos que mueve el turno y esta persona no. */
.nv-wrap .gapbox { margin-top:12px; padding:10px 11px; border-radius:8px;
  background:rgba(249,115,22,.07); border:1px solid rgba(249,115,22,.22); }
.nv-wrap .gaph { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; color:var(--accent-orange); }
.nv-wrap .gaph i { width:13px; height:13px; }
.nv-wrap .gapt { font-size:11px; color:var(--text-secondary); line-height:1.5; margin:5px 0 8px; }
.nv-wrap .gaptbl td { padding:4px 0; }
/* La tarjeta del hueco de juegos ahora es una sección propia arriba de los KPI. */
.nv-wrap .gapcard .gapt { margin-top:0; }
/* Lectura del propio puntaje, en vez de la posición contra los compañeros. */
.kpi-tbl .howtag { font-size:10px; font-weight:800; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.kpi-tbl .howtag.ok { color:var(--accent-green); background:rgba(34,197,94,.13); }
.kpi-tbl .howtag.warn { color:var(--accent-warm,#f59e0b); background:rgba(245,158,11,.13); }
.kpi-tbl .howtag.bad { color:var(--accent-red); background:rgba(239,68,68,.13); }
.nv-wrap .gaptbl b.zero { color:var(--accent-red); }

/* Comparación contra el mes anterior: puntaje viejo + cuánto se movió. */
.nv-wrap .nv-delta { font-size:10.5px; font-weight:800; margin-left:6px; white-space:nowrap;
  font-variant-numeric:tabular-nums; padding:1px 6px; border-radius:20px; vertical-align:middle; }
.nv-wrap .nv-delta.up   { color:var(--accent-green); background:rgba(34,197,94,.13); }
.nv-wrap .nv-delta.down { color:var(--accent-red);   background:rgba(239,68,68,.13); }
.nv-wrap .nv-delta.flat { color:var(--text-tertiary,#8b8b8b); background:rgba(140,140,140,.13); }
.kpi-tbl .prevsc { font-size:12px; font-weight:700; color:var(--text-tertiary,#8b8b8b);
  font-variant-numeric:tabular-nums; }

.nv-wrap .delta { font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; }
.nv-wrap .delta.up { color:var(--accent-green); }
.nv-wrap .delta.dn { color:var(--accent-red); }

.nv-wrap .rows { display:flex; flex-direction:column; gap:9px; }
.nv-wrap .row { display:grid; grid-template-columns:126px 1fr 82px; align-items:center; gap:10px; }
.nv-wrap .row .nm { font-size:11.5px; font-weight:700; color:var(--text-secondary); }
.nv-wrap .row .nm.me { color:var(--accent-orange); }
.nv-wrap .row .br { height:19px; background:var(--bg-elevated); border-radius:5px; overflow:hidden; }
.nv-wrap .row .br i { display:block; height:100%; background:var(--bg-active); border-radius:5px; }
.nv-wrap .row .br i.me { background:linear-gradient(90deg,var(--accent-orange),var(--accent-warm)); }
.nv-wrap .row .vl { font-size:11.5px; font-weight:800; text-align:right; color:var(--text-primary);
  font-variant-numeric:tabular-nums; }

.nv-wrap .sleep { display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--border-light); }
.nv-wrap .sleep:last-child { border-bottom:none; }
.nv-wrap .sleep .d { width:44px; text-align:center; font-size:14px; font-weight:800;
  color:var(--accent-red); font-variant-numeric:tabular-nums; }
.nv-wrap .sleep .d small { display:block; font-size:9px; font-weight:600; color:var(--text-muted); }
.nv-wrap .sleep .g { font-size:12.5px; font-weight:700; color:var(--text-primary); }
.nv-wrap .sleep .m { font-size:10.5px; color:var(--text-muted); }

/* Tabla de KPIs de la vista individual */
.kpi-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.kpi-tbl thead th { padding:7px 8px; font-size:9px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-muted); text-align:center; white-space:nowrap;
  border-bottom:1px solid var(--border); }
.kpi-tbl thead th.lft, .kpi-tbl td.lft { text-align:left; }
.kpi-tbl td { padding:8px; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.kpi-tbl tbody tr:last-child td { border-bottom:none; }
.kpi-tbl .kn { font-size:12px; font-weight:700; color:var(--text-primary); }
.kpi-tbl .kk { font-size:9.5px; color:var(--text-muted); font-family:var(--font-mono); }
.kpi-tbl .n { text-align:center; font-variant-numeric:tabular-nums; color:var(--text-secondary); }
.kpi-tbl .rank { font-size:13px; font-weight:800; color:var(--text-primary); }
.kpi-tbl .rank small { font-size:9.5px; font-weight:600; color:var(--text-muted); }
.kpi-tbl .score { display:inline-block; min-width:38px; padding:3px 8px; border-radius:5px;
  font-size:12px; font-weight:800; }
.kpi-tbl .score.ok { background:rgba(74,222,128,.14); color:var(--accent-green); }
.kpi-tbl .score.warn { background:rgba(251,191,36,.15); color:var(--accent-gold); }
.kpi-tbl .score.bad { background:rgba(239,68,68,.14); color:#f87171; }

.posbig { font-size:42px; font-weight:900; line-height:1; letter-spacing:-.03em;
  color:var(--accent-orange); font-variant-numeric:tabular-nums; }
.posbig small { font-size:16px; font-weight:700; color:var(--text-muted); }
.nv-wrap .sep { height:1px; background:var(--border); margin:14px 0; }
.posrow { display:flex; justify-content:space-between; align-items:center; padding:5px 0;
  font-size:11.5px; color:var(--text-secondary); }
.posrow b { color:var(--text-primary); font-variant-numeric:tabular-nums; }

.nv-empty { display:flex; gap:12px; align-items:flex-start; padding:22px;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  font-size:13px; color:var(--text-secondary); line-height:1.6; }
.nv-empty i { width:20px; height:20px; color:var(--text-muted); flex-shrink:0; margin-top:2px; }
.nv-empty b { color:var(--text-primary); }
.nv-empty.err { border-color:rgba(239,68,68,.35); }
.nv-empty.err i { color:var(--accent-red); }


/* Columna Recomendacion de la tabla de KPIs: una etiqueta por tramo + el consejo del KPI. */
/* Nota al pie de "Tus KPIs", pero puesta arriba: un puntaje bajo se lee antes que cualquier
   aclaracion, asi que si esto fuera abajo llegaria tarde. */
.nv-wrap .kpinota { font-size:11.5px; line-height:1.55; color:var(--text-secondary);
  padding:10px 12px; margin-bottom:11px; border-radius:8px;
  background:rgba(99,102,241,.07); border:1px solid rgba(99,102,241,.22); }
.kpi-tbl td.reco { max-width:420px; }
.recotag { display:inline-block; margin-bottom:4px; padding:2px 7px; border-radius:4px;
  font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.recotag.bajo { background:rgba(239,68,68,.14); color:#f87171; }
.recotag.medio { background:rgba(251,191,36,.15); color:var(--accent-gold); }
.recotag.alto { background:rgba(74,222,128,.14); color:var(--accent-green); }
.recotag.sin_medir { background:var(--bg-elevated); color:var(--text-muted); }
.recotxt { display:block; font-size:11px; line-height:1.5; color:var(--text-secondary); }
@media (max-width:900px) { .kpi-tbl td.reco { max-width:260px; } .recotxt { font-size:10.5px; } }

/* ── Novedades · Puntos clave (rentabilidad por orden, vista de dueno) ── */
.nv-keys { margin-top:6px; }
.keygrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:14px;
  margin-bottom:14px; }
.nv-keys .card { margin-bottom:14px; }
.nv-keys .card.bad { border-color:rgba(239,68,68,.32); background:rgba(239,68,68,.04); }
.keyh { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:11px;
  font-size:12px; font-weight:800; color:var(--text-primary); }
.keyh i { width:14px; height:14px; color:var(--accent-orange); }
.keyh .sub { font-size:10px; font-weight:600; color:var(--text-muted); }
.keytbl thead th { padding:5px 6px; font-size:9px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted); text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--border); }
.keytbl thead th.lft { text-align:left; }
.keytbl td { padding:6px; }
.keytbl td.lft { text-align:left; }
.mg { display:inline-block; min-width:52px; padding:2px 6px; border-radius:4px; font-size:11px;
  font-weight:800; text-align:center; font-variant-numeric:tabular-nums; }
.mg.ok { background:rgba(74,222,128,.14); color:var(--accent-green); }
.mg.low { background:rgba(251,191,36,.14); color:var(--accent-gold); }
.mg.neg { background:rgba(239,68,68,.16); color:#f87171; }
.nomatch { font-size:10px; color:var(--text-muted); font-style:italic; }
.mk { font-size:9.5px; font-weight:800; padding:2px 6px; border-radius:3px;
  background:var(--bg-elevated); color:var(--text-secondary); letter-spacing:.03em; }
.nv-warn { display:flex; gap:9px; align-items:flex-start; padding:10px 12px; margin-bottom:14px;
  font-size:11.5px; line-height:1.55; background:rgba(251,191,36,.07);
  border:1px solid rgba(251,191,36,.3); border-radius:var(--radius-sm); color:var(--text-secondary); }
.nv-warn i { width:15px; height:15px; flex-shrink:0; color:var(--accent-gold); margin-top:1px; }
.nv-warn b { color:var(--text-primary); }
/* Novedades ▸ KPIs del turno (vista del operador). Naranja de base, no rojo: un KPI bajo del turno es
   "por acá conviene empezar", no una alarma. */
.nv-lead.cols-2 { grid-template-columns:repeat(2,1fr); }
/* Novedades ▸ Tu mes: resumen + tus 3 juegos más fuertes arriba, y la tabla de los juegos del turno. */
.nv-top { display:grid; grid-template-columns:minmax(0,1.1fr) repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:12px; }
@media (max-width:1250px) { .nv-top { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px) { .nv-top { grid-template-columns:minmax(0,1fr); } }
.nv-top > div { background:var(--bg-surface); padding:14px 15px; min-width:0; }
.nv-top .lbl { font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
.nv-top .val { display:flex; align-items:center; font-size:26px; font-weight:800; color:var(--text-primary); line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.nv-top .sub { margin-top:6px; font-size:11px; color:var(--text-muted); display:flex; align-items:center; flex-wrap:wrap; }
.nv-top-res { background:color-mix(in srgb, var(--accent-orange) 6%, var(--bg-surface)) !important; }
.nv-top-g .hd { display:flex; align-items:center; gap:8px; margin-bottom:8px; min-width:0; }
.nv-top-g .hd .nm { font-size:12.5px; font-weight:800; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-top-g .hd .pos { margin-left:auto; font-size:10px; font-weight:800; color:var(--accent-orange); }
.nv-top-g .mks { margin-top:9px; display:flex; flex-wrap:wrap; gap:4px; }
.nv-top-g.vacio { display:flex; align-items:center; font-size:12px; color:var(--text-muted); grid-column:span 3; }
.nv-glogo { width:22px; height:22px; border-radius:6px; object-fit:cover; flex-shrink:0; background:var(--bg-elevated); }
.nv-glogo.ph { display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--text-muted); }
.nv-mk { display:inline-flex; align-items:center; gap:4px; padding:2px 7px 2px 3px; border-radius:12px; background:var(--bg-elevated);
  font-size:11px; font-weight:700; color:var(--text-secondary); font-variant-numeric:tabular-nums; white-space:nowrap; cursor:help; }
.nv-mk img { width:15px; height:15px; border-radius:50%; object-fit:cover; }
.nv-mk b { font-size:8.5px; color:var(--text-muted); }
.nv-pct { display:inline-block; margin-left:7px; padding:1px 6px; border-radius:10px; font-size:10.5px; font-weight:800;
  letter-spacing:0; line-height:1.5; white-space:nowrap; cursor:help; font-variant-numeric:tabular-nums; }
.nv-pct.up { color:var(--accent-green); background:rgba(34,197,94,.13); }
.nv-pct.down { color:var(--accent-red); background:rgba(239,68,68,.13); }
.nv-pct.flat { color:var(--text-muted); background:rgba(140,140,140,.13); }
.nv-pct.nuevo { color:var(--accent-orange); background:color-mix(in srgb, var(--accent-orange) 15%, transparent); }
.nv-jt-card { padding:0 !important; overflow:hidden; }
.nv-jt-scroll.largo { max-height:600px; overflow-y:auto; }
.nv-jt { width:100%; border-collapse:collapse; font-size:12px; }
.nv-jt thead th { position:sticky; top:0; z-index:1; background:var(--bg-surface); padding:9px 10px; font-size:9px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); text-align:right; border-bottom:1px solid var(--border); white-space:nowrap; }
.nv-jt th.lft, .nv-jt td.lft { text-align:left; }
.nv-jt td { padding:8px 10px; border-bottom:1px solid var(--border-light); vertical-align:middle; text-align:right;
  color:var(--text-secondary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.nv-jt tbody tr:last-child td { border-bottom:none; }
.nv-jt td b { color:var(--text-primary); font-weight:800; }
.nv-jt td small { display:block; margin-top:2px; font-size:10px; color:var(--text-muted); }
.nv-jt td.mks { white-space:normal; }
.nv-jt td.mks .nv-mk { margin:1px 3px 1px 0; }
.nv-jt .cero { color:var(--text-muted); }
.nv-jt .jg { display:flex; align-items:center; gap:9px; min-width:0; }
.nv-jt .jgt { min-width:0; }
.nv-jt .jgt .nm { font-weight:700; color:var(--text-primary); white-space:normal; }
.nv-jt tr.sin .jgt .nm { color:var(--text-secondary); font-weight:600; }
.nv-jt .cats { margin-top:3px; display:flex; gap:4px; flex-wrap:wrap; }
.nv-cat { font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted);
  border:1px solid var(--border); border-radius:4px; padding:0 5px; }
.nv-sumar { margin-left:7px; font-size:9.5px; font-weight:800; color:var(--accent-orange); white-space:nowrap; cursor:help;
  background:color-mix(in srgb, var(--accent-orange) 15%, transparent); border-radius:4px; padding:1px 6px; }
.nv-jt-nota { display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-top:1px solid var(--border);
  font-size:10.5px; line-height:1.55; color:var(--text-muted); }
.nv-jt-nota i { width:13px; height:13px; flex-shrink:0; color:var(--accent-gold); margin-top:2px; }
.nv-jt-nota b { color:var(--text-secondary); }
/* En el teléfono cada juego es un bloque: el juego arriba, los números en una fila y los marketplaces abajo. */
@media (max-width:760px) {
  .nv-jt thead { display:none; }
  .nv-jt, .nv-jt tbody { display:block; }
  .nv-jt tr { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px 10px; padding:10px 12px; border-bottom:1px solid var(--border-light); }
  .nv-jt td { display:block; padding:0; border:none; text-align:left; white-space:normal; }
  .nv-jt td:nth-child(1) { grid-column:1 / -1; }
  .nv-jt td.mks { grid-column:1 / -1; grid-row:3; }
}
/* La tendencia del staff tiene cinco columnas en una columna angosta. */
.nv-wrap .nv-trend { font-size:11.5px; }
.nv-wrap .nv-trend td.n, .nv-wrap .nv-trend th.n { padding-left:6px; white-space:nowrap; }
.nv-wrap .nv-trend td.g { min-width:92px; }   /* en el teléfono, la tarjeta se corre de costado antes que partir el nombre en tres */
.nv-lead > div[title] { cursor:help; }
.nv-empezar { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
.nv-empezar .emp { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  border-left:3px solid var(--accent-orange); padding:10px 12px; }
.nv-empezar .emp.ok { border-left-color:var(--accent-green); }
.nv-empezar .emp .t { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  color:var(--text-primary); cursor:help; }
.nv-empezar .emp .v { margin-top:3px; font-size:11px; color:var(--text-muted); }
.nv-empezar .emp .c { margin-top:6px; font-size:12px; line-height:1.5; color:var(--text-secondary); }
.nv-empezar .score, .kpi-tbl .score { font-variant-numeric:tabular-nums; }
.nv-empezar .score { padding:1px 7px; border-radius:5px; font-size:11px; font-weight:800; }
.nv-empezar .score.warn, .kpi-tbl.turno .score.warn { background:rgba(251,191,36,.15); color:var(--accent-gold); }
.nv-empezar .score.ok { background:rgba(74,222,128,.14); color:var(--accent-green); }
.nv-empezar .score.bad, .kpi-tbl.turno .score.bad, .kpi-tbl.turno .recotag.bajo {
  background:color-mix(in srgb, var(--accent-orange) 16%, transparent); color:var(--accent-orange); }
.kpi-tbl.turno .kn[title] { cursor:help; text-decoration:underline dotted var(--text-muted); text-underline-offset:3px; }
.kpi-tbl.turno .kv { display:block; cursor:help; }
.kpi-tbl.turno .kv b { font-weight:700; color:var(--text-primary); white-space:nowrap; }
.kpi-tbl.turno .kv small { display:block; margin-top:2px; font-size:10.5px; color:var(--text-muted); }
/* En el teléfono la tabla de cinco columnas aplastaba el nombre del KPI a una letra por renglón: cada
   KPI pasa a ser un bloque (nombre y valor a la izquierda, puntaje a la derecha, el consejo abajo). La
   columna "vs mes anterior" sin su encabezado no se entiende: ahí se esconde. */
@media (max-width:760px) {
  .kpi-tbl.turno thead { display:none; }
  .kpi-tbl.turno, .kpi-tbl.turno tbody { display:block; }
  .kpi-tbl.turno tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px;
    padding:10px 0; border-bottom:1px solid var(--border-light); }
  .kpi-tbl.turno tbody tr:last-child { border-bottom:none; }
  .kpi-tbl.turno td { display:block; padding:0; border:none; }
  .kpi-tbl.turno td:nth-child(1) { grid-column:1; grid-row:1; }
  .kpi-tbl.turno td:nth-child(2) { grid-column:1; grid-row:2; }
  .kpi-tbl.turno td:nth-child(3) { grid-column:2; grid-row:1 / span 2; align-self:center; }
  .kpi-tbl.turno td:nth-child(4) { display:none; }
  .kpi-tbl.turno td.reco { grid-column:1 / -1; grid-row:3; max-width:none; margin-top:4px; }
  .kpi-tbl.turno .kv b { white-space:normal; }
}
@media (hover:none) { .nv-kicker .hint.solo-mouse { display:none; } }
@media (max-width:900px) {
  .keygrid { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   TAREAS — tablero kanban (js/tareas.js)                                 2026-09-29
   Las 5 columnas son los 5 estados. En el celular se apilan (una sola columna) en vez
   de scrollear de costado: arrastrar de a una columna en pantalla chica no se puede.
   ══════════════════════════════════════════════════════════════════════════════════ */
.tareas-tablero {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.tareas-col {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
  min-width: 0;                       /* minmax(0,1fr) + esto = las tarjetas cortan el texto
                                         en vez de estirar la columna */
  transition: background 0.15s, border-color 0.15s;
}
.tareas-col.encima {
  border-color: var(--accent-orange);
  background: var(--bg-elevated);
}
.tareas-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 8px;
}
.tareas-col-n {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-radius: 999px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.tareas-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 70px;                   /* una columna vacía tiene que poder recibir una tarjeta */
}
/* El Tablero entra justo en la ventana (2026-10-02): la página no scrollea —la barra de "Nueva tarea"
   y el buscador quedan arriba— y cada columna scrollea por adentro. El alto lo pone _ajustarAlto() de
   js/tareas.js (style.height = lo que queda de la ventana); en el teléfono (≤ 768 px) no se aplica. */
.tareas-tablero.tareas-fit {
  align-items: stretch;
  grid-auto-rows: minmax(0, 1fr);     /* con 3 columnas (≤ 1200 px) son dos filas: se reparten el alto */
}
.tareas-fit .tareas-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tareas-fit .tareas-col-head { flex-shrink: 0; }
.tareas-fit .tareas-col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 3px;                       /* que el scroll no corte el halo de la tarjeta elegida (.sel) */
  margin: -3px;
  scrollbar-width: thin;
}
/* Con alto fijo, una lista flex ACHICA a sus hijos en vez de scrollear: las tarjetas no se encogen. */
.tareas-fit .tareas-col-body > * { flex-shrink: 0; }
/* Buscador: ocupa el hueco entre lo de la izquierda (Nueva tarea, contadores) y lo de la derecha
   (categoría, archivadas, recargar), centrado en él. */
.tareas-buscar-wrap {
  flex: 1 1 220px;
  min-width: 180px;
  display: flex;
  justify-content: center;
}
.tareas-buscar {
  width: 100%;
  max-width: 520px;
  padding: 6px 12px;
  font-size: 12px;
}
.tareas-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 11px;
  cursor: grab;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.tareas-card:hover { background: var(--bg-hover); border-color: var(--border-light); }
.tareas-card.sel {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.tareas-card.arrastrando { opacity: 0.4; cursor: grabbing; }
.tareas-card.arch { opacity: 0.55; }
.tareas-card:active { cursor: grabbing; }
.tareas-cron {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #38bdf8;
  font-variant-numeric: tabular-nums;  /* sin esto el reloj "salta" de ancho cada segundo */
}
/* La tecla del botón "Nueva tarea". En el celular no hay teclado: se esconde. */
.tareas-kbd {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.22);
}
/* Botones rápidos de la tarjeta (◀ / ▶ por el camino principal, Postergar, Cancelar, Reabrir).
   En la compu flotan abajo a la derecha y aparecen al pasar el mouse, al elegir la tarjeta o con
   el foco del teclado (no ocupan alto); en un táctil no hay hover: van siempre, en su renglón. */
.tareas-card { position: relative; }
.tareas-acc {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 3px;
  padding: 2px;
  border-radius: 6px;
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  cursor: default;
}
.tareas-card:hover .tareas-acc,
.tareas-card.sel .tareas-acc,
.tareas-card:focus-within .tareas-acc { opacity: 1; pointer-events: auto; }
.tareas-card.arrastrando .tareas-acc { opacity: 0; pointer-events: none; }
.tareas-acc-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  min-width: 22px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}
.tareas-acc-btn:hover { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); }
.tareas-acc-btn:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 1px; }
.tareas-acc-btn i, .tareas-acc-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.tareas-acc-adelante { color: var(--accent-orange); }
.tareas-acc-cancelar:hover { color: #ef4444; }
.tareas-acc-postergar:hover { color: #fbbf24; }
@media (hover: none) {
  .tareas-acc {
    position: static;
    opacity: 1;
    pointer-events: auto;
    justify-content: flex-end;
    margin-top: 8px;
    background: transparent;
    border: none;
    padding: 0;
  }
  .tareas-acc-btn { height: 30px; min-width: 30px; }   /* dedo, no mouse */
}
/* Una tarea que ya se ve pero el server todavía está creando: no se arrastra ni se abre. */
.tareas-card.guardando { opacity: 0.7; cursor: progress; }
.tareas-card.guardando:hover { background: var(--bg-elevated); border-color: var(--border); }
/* Archivos de una tarea recién creada que siguen subiendo en segundo plano. */
.tareas-subiendo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-orange);
}
/* El clip con la cantidad de archivos, en la tarjeta y en la lista. */
.tareas-clip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Nueva tarea: la categoría es una fila de botones (uno por categoría + "Nueva") ──
   --cat es el color de cada categoría: tiñe su ícono, y el borde y el fondo cuando está elegida. */
.tareas-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tareas-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tareas-cat svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--cat, var(--text-muted)); }
.tareas-cat:hover { border-color: var(--cat, var(--border-light)); color: var(--text-primary); }
.tareas-cat:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 1px; }
.tareas-cat.on {
  border-color: var(--cat, var(--accent-orange));
  background: var(--bg-hover);
  background: color-mix(in srgb, var(--cat, var(--accent-orange)) 18%, transparent);
  color: var(--text-primary);
}
.tareas-cat-sin {                     /* "Sin categoría": un aro vacío en lugar de ícono */
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border: 1.5px dashed var(--text-muted);
  border-radius: 50%;
}
.tareas-cat-mas {                     /* "Nueva": crea una categoría ahí mismo */
  --cat: var(--accent-orange);
  border-style: dashed;
  color: var(--accent-warm, var(--accent-orange));
}
.tareas-cat-nueva {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 260px;
  min-width: 0;
}
.tareas-cat-nueva .form-control { flex: 1 1 auto; min-width: 0; padding: 6px 10px; font-size: 12px; }
.tareas-cat-error { flex-basis: 100%; font-size: 11px; color: var(--accent-red); }

/* ── Archivos de una tarea (el modal) ── */
.tareas-adj-zona {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.tareas-adj-zona.encima {            /* se está arrastrando un archivo encima del modal */
  border-color: var(--accent-orange);
  background: var(--bg-elevated);
}
.tareas-adj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.tareas-adj {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
  min-width: 0;                       /* un nombre largo corta con "…" en vez de estirar la grilla */
}
.tareas-adj-vista {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  background: var(--bg-surface);
  color: var(--text-muted);
  text-decoration: none;
}
a.tareas-adj-vista[href]:hover { color: var(--text-primary); }
.tareas-adj-vista img,
.tareas-adj-vista video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tareas-adj-vista video { object-fit: contain; background: #000; }
.tareas-adj-pie { padding: 6px 8px; }
.tareas-adj-nombre {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tareas-adj-meta {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.tareas-adj-pend {                    /* elegido, todavía sin subir */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
}
.tareas-adj-pend:last-child { border-bottom: 0; }
.tareas-adj-pend-nombre {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tareas-adj-pend-estado { color: var(--text-muted); white-space: nowrap; }
.tareas-adj-pend.mal,
.tareas-adj-pend.mal .tareas-adj-pend-estado { color: var(--accent-red); }
.tareas-adj-pend.mal .tareas-adj-pend-estado { white-space: normal; }

@media (max-width: 1200px) {
  .tareas-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .tareas-tablero { grid-template-columns: 1fr; }
  .tareas-col { padding: 8px; }
  .tareas-col-body { min-height: 0; }
  .tareas-kbd { display: none; }
  .tareas-adj-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   ENCABEZADOS FIJOS ARRIBA (2026-10-02, pedido del dueño: "que no se pierdan al bajar")
   La .topbar (título de cada pestaña) ya era position:sticky, pero NO se pegaba: html, body,
   .app-shell, .main-content (y .page en el celular) llevan overflow-x:hidden para que nada empuje la
   página de costado, y overflow:hidden convierte a ese ancestro en un contenedor de scroll que nunca
   scrollea — el sticky se pega a él y no a la ventana. overflow-x:clip recorta igual pero NO crea
   contenedor de scroll, así el sticky vuelve a andar. Un navegador sin `clip` (Safari < 16) se queda
   con el hidden de siempre: nada se rompe, sólo no se pega.
   Debajo de la topbar se pegan también las barras de subpestañas (.subtabs-bar) y los paneles que ya
   eran sticky a nivel página, corridos por el alto REAL de la topbar (--topbar-sticky-h, lo mide
   index.html: en el celular la topbar ocupa dos renglones).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
@supports (overflow-x: clip) {
  html, body, .app-shell, .main-content { overflow-x: clip !important; }
  @media (max-width: 768px) {
    html, body { overflow-x: clip !important; }
    .page { overflow-x: clip; }
  }
}
.subtabs-bar,
.subtabs-bar.sticky {
  position: sticky;
  top: var(--topbar-sticky-h, var(--topbar-h));
  z-index: 40;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(12px);
}
/* Dentro de un modal o de una tarjeta con su propio scroll la barra no tiene por qué correrse. */
.modal .subtabs-bar, .modal-overlay .subtabs-bar { position: static; }
.ordenes-others-panel { top: calc(var(--topbar-sticky-h, var(--topbar-h)) + 8px); }
.notes-guide-sidebar { top: calc(var(--topbar-sticky-h, var(--topbar-h)) + 24px); }
.uc-tu-hist { top: calc(var(--topbar-sticky-h, var(--topbar-h)) + 10px); }