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


/* ─── AURA v9.0 — Design System ────────────────────────────────────────────
   Aesthetic: Bloomberg Terminal × Neural Network × WhatsApp 
   ─────────────────────────────────────────────────────────────────────── */
:root {
  /* --bg-void: raiz, el mas oscuro */
  --bg-void:     #080808;
  /* --bg-base: fondo de pantalla */
  --bg-base:     #0e0e0e;
  /* --bg-raised: cards, panels */
  --bg-raised:   #141414;
  /* --bg-surface: paneles inline, headers, cards de tabla, modales (oscuro solido) */
  --bg-surface:  #1a1a1a;
  /* --bg-elevated: hover states, dropdowns */
  --bg-elevated: #1c1c1c;
  /* --bg-overlay: modales y drawers */
  --bg-overlay:  #222222;

  /* Texto - Mejorando contraste */
  --text-primary:   #FFFFFF;
  --text-secondary: #B4B4B4;
  --text-muted:     #8A8A8A;
  --text-disabled:  #666666;

  /* Dorado reservado para: CTAs primarios, elementos de IA activa, notificaciones importantes */
  --gold-bright: #F0D78C;
  --gold:        #E4C97A;
  --gold-dim:    rgba(201,168,76,0.15);
  --gold-border: rgba(201,168,76,0.30);
  --gold-glow:   rgba(201,168,76,0.10);

  /* Estados */
  --success:  #22c55e;
  --success-bg: rgba(34,197,94,0.15);
  --success-border: rgba(34,197,94,0.3);
  --warning:  #f59e0b;
  --warning-bg: rgba(245,158,11,0.15);
  --warning-border: rgba(245,158,11,0.3);
  --danger:   #ef4444;
  --danger-bg: rgba(239,68,68,0.15);
  --danger-border: rgba(239,68,68,0.3);
  --info:     #3b82f6;
  --info-bg: rgba(59,130,246,0.15);
  --info-border: rgba(59,130,246,0.3);

  /* Alias para consistencia — error/warn son más intuitivos que danger */
  --error: var(--danger);
  --error-bg: var(--danger-bg);
  --error-border: var(--danger-border);
  --warn: var(--warning);
  --warn-bg: var(--warning-bg);
  --warn-border: var(--warning-border);

  /* Alias para bg-card (usado en RecordsView, FeatureGate) */
  --bg-card: var(--bg-surface);

  /* Border subtle (usado en NotificationFeed, MemoryPanel, Copilot*, ActionCard) */
  --border-subtle: var(--border);

  /* Info glow (usado en CampaignsView) */
  --info-glow: rgba(59,130,246,0.15);

  /* Temperatura — propio, no reutilizar los de estado */
  --temp-frio:      #3b82f6;
  --temp-tibio:     #f59e0b;
  --temp-caliente:  #f97316;
  --temp-cierre:    #ef4444;
  --temp-en-riesgo: #8b5cf6;

  /* Temperatura Backgrounds */
  --temp-frio-bg:      rgba(59, 130, 246, 0.12);
  --temp-tibio-bg:     rgba(245, 158, 11, 0.12);
  --temp-caliente-bg:  rgba(249, 115, 22, 0.12);
  --temp-cierre-bg:    rgba(239, 68, 68, 0.12);
  --temp-en-riesgo-bg: rgba(139, 92, 246, 0.12);
  --temp-calido-bg:    rgba(249, 115, 22, 0.12);
  --temp-listo-bg:     rgba(34, 197, 94, 0.12);

  /* Card Layout Tokens */
  --card-padding: 24px 28px;
  --card-radius: 16px;

  /* Bordes */
  --border:       rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.12);

  /* Sombras — en dark mode la sombra no es negra sino de color */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-gold: 0 0 24px rgba(201,168,76,0.08);

  /* Espaciado — 4px base */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radios */
  --radius-card:    var(--card-radius);
  --radius-lg:      var(--card-radius);
  --radius-modal:  16px;
  --radius-pill:     6px;
  --radius-input:   8px;
  --radius-btn:      8px;
  --radius-avatar:  50%;

  /* Tipografia */
  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Montserrat', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Motion */
  --duration-micro:   120ms;
  --duration-ui:       200ms;
  --duration-page:     250ms;
  --duration-data:     600ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index System — nunca hardcodear z-index fuera de estas variables */
  --z-base:      1;
  --z-raised:    10;
  --z-sticky:    100;
  --z-drawer:    200;
  --z-modal:     300;
  --z-popover:   380;
  --z-toast:     400;
  --z-overlay:   500;
  --z-copilot:   600;   /* encima de overlay */

  /* Layout */
  --sidebar-w: 260px;
  --sidebar-rail-w: 64px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { 
  font-size: 16px; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  background-color: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;

  min-height: 100vh;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9a84c' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.38 2.79a.5.5 0 0 0-.88.42z'/%3E%3Cpath fill='%23e4c97a' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.38 2.79a.5.5 0 0 0-.88.42z' opacity='.5'/%3E%3C/svg%3E") 0 0, auto;
}
@media (max-width: 768px) {
  body { cursor: auto !important; }
}
a, button, input, textarea, select {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9a84c' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.38 2.79a.5.5 0 0 0-.88.42z'/%3E%3Cpath fill='%23e4c97a' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.38 2.79a.5.5 0 0 0-.88.42z' opacity='.5'/%3E%3C/svg%3E") 0 0, pointer;
}
@media (max-width: 768px) {
  a, button, input, textarea, select { cursor: auto !important; }
}
/* ── Background — solid void, no decorative mesh ── */
h1, h2, h3, h4, h5, h6 { 
  font-family: var(--font-display); 
  font-weight: 700;
  line-height: 1.1; 
  letter-spacing: -0.02em; 
}
.text-display  { font-size: clamp(2.2rem, 7vw, 4.5rem); font-weight: 900; }
.text-headline { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 800; }
.text-title    { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 600; }
.text-label    { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.text-gold { background: linear-gradient(135deg, var(--gold-dim), var(--gold-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
::-webkit-scrollbar { width: 4px; height: 4px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-muted); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
::selection { background: var(--gold); color: #000; }
::-moz-selection { background: var(--gold); color: #000; }
:focus-visible { outline: 1.5px solid var(--gold);
  outline-offset: 2px; border-radius: var(--radius-sm); }
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--duration) var(--ease-out); padding: var(--card-padding); }
.card:hover { border-color: var(--border-hover); }
.card-raised { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--card-padding); }
.card-gold { background: var(--gold-glow);
  border: 1px solid var(--gold-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-gold); padding: var(--card-padding); }
.glass { background: rgba(255,255,255,0.025); border: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-dim), var(--gold-bright));
  color: #080809;
  border: none;
  font-family: var(--font-body);
  transition: all 200ms;
}
.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 24px var(--gold-glow);
}
.btn-primary:disabled {
  background: var(--bg-overlay);
  color: var(--text-muted);
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}
.btn-secondary {
  background: var(--bg-overlay);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  transition: all 200ms;
}
.btn-secondary:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.glass-panel {
  background: rgba(13, 13, 18, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.05);
  border-radius: var(--radius-lg);
  min-width: 0; /* FIX 2026-08-25: permite que flex items con tablas anchas encojan
                   sin esto, los flex column parents (motion.div en cada vista)
                   hacen que las tablas se desborden del viewport aunque el wrapper
                   tenga overflowX:auto. Root cause en DashboardLayout.tsx:197. */
}
/* FIX 2026-08-25: tablas inline (LeadsView, StockView, TeamView, etc.) sin
   clase glass-panel ni wrapper EntityTable deben poder encojerse dentro de
   sus flex column parents. Sin min-width:0 heredan min-content. */
#dashboard-content table {
  min-width: 0;
}
/* FIX 2026-08-25: cada vista renderiza un <motion.div> flex column. Por
   default sus flex items tienen min-width:auto (= min-content). Cuando una
   tabla adentro mide más que el viewport (típico: laptop 1280-1366px),
   el flex item no se encoje y la tabla se sale del vw aunque su wrapper
   tenga overflowX:auto. Forzar min-width:0 en el contenedor de cada vista
   resuelve el bug universalmente sin tocar las 11 vistas afectadas. */
#dashboard-content > div {
  min-width: 0;
}
/* FIX 2026-08-25 (Luciano): scrollbar SIEMPRE visible en wrappers de tabla.
   Razón: con overflowX:auto el scrollbar solo aparece durante el scroll
   (Mac/trackpad especialmente) y los usuarios no se dan cuenta de que hay
   columnas cortadas. EntityTable.tsx ya pasó a overflowX:scroll + overflowY:hidden.
   Acá hacemos el scrollbar visible y diseno consistente con el tema dark. */
.glass-panel::-webkit-scrollbar,
[id="dashboard-content"] div[style*="overflowX"]::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.glass-panel::-webkit-scrollbar-track,
[id="dashboard-content"] div[style*="overflowX"]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}
.glass-panel::-webkit-scrollbar-thumb,
[id="dashboard-content"] div[style*="overflowX"]::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.4);  /* gold */
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.glass-panel::-webkit-scrollbar-thumb:hover,
[id="dashboard-content"] div[style*="overflowX"]::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 168, 76, 0.7);  /* gold-bright */
  background-clip: padding-box;
  border: 2px solid transparent;
}
/* Firefox */
.glass-panel,
[id="dashboard-content"] div[style*="overflowX"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 76, 0.5) rgba(255, 255, 255, 0.02);
}
.noise-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.input {
  width: 100%; padding: 10px 13px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-body); outline: none;
  transition: border-color var(--duration), box-shadow var(--duration);
  box-sizing: border-box;
}
.input:hover { border-color: var(--border-hover); }
.input:focus { border-color: var(--gold-border);
  box-shadow: 0 0 0 3px var(--gold-glow); }
.input::placeholder { color: var(--text-muted); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  flex-shrink: 0; }
.status-dot.online  { background: var(--success); box-shadow: 0 0 6px var(--success); }
.status-dot.offline { background: var(--text-muted);
}
.status-dot.error   { background: var(--error); }
.status-dot.pulse   { background: var(--gold); animation: pulse-gold 1.8s infinite; }
.skeleton { background: var(--bg-raised);
  border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.skeleton::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.temp-badge { display: inline-flex;
  align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
}
.temp-frio              { color: var(--temp-frio);    background: var(--temp-frio-bg);
}
.temp-tibio             { color: var(--temp-tibio);   background: var(--temp-tibio-bg);
}
.temp-calido            { color: var(--temp-calido);  background: var(--temp-calido-bg);
}
.temp-caliente          { color: var(--temp-caliente);background: var(--temp-caliente-bg);
}
.temp-muy_caliente      { color: var(--temp-caliente);background: var(--temp-caliente-bg); }
.temp-listo_para_comprar{ color: var(--temp-listo);   background: var(--temp-listo-bg);
}
.temp-cierre            { color: var(--temp-listo);   background: var(--temp-listo-bg);
}
.live-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--success); letter-spacing: 0.08em; }
.live-indicator::before { content: '';
  display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse-success 1.6s infinite; }
.score-bar { height: 4px; border-radius: 999px;
  background: var(--bg-muted); overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 999px; transition: width 0.8s var(--ease-out); }
.tab-bar { display: flex; background: var(--bg-overlay);
  border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.tab-item { flex: 1; padding: 7px 14px; border-radius: var(--radius-sm); border: none; background: transparent;
  color: var(--text-muted); font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--duration); text-align: center; }
.tab-item.active { background: var(--bg-raised);
  color: var(--text-primary); box-shadow: var(--shadow-sm); }
.tab-item:hover:not(.active) { color: var(--text-secondary); }
.bubble-user { background: linear-gradient(135deg, rgba(138,109,42,0.55), rgba(138,109,42,0.28)); border: 1px solid var(--gold-border);
  border-radius: 14px 14px 4px 14px; padding: 9px 13px; font-size: 13px; line-height: 1.55; color: var(--text-primary); max-width: 75%; }
.bubble-agent { background: var(--bg-overlay);
  border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 9px 13px; font-size: 13px; line-height: 1.55; color: var(--text-primary); max-width: 75%;
}
/* ── Markdown & Tables ── */
.markdown-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.2);
}
.markdown-body th {
  background: rgba(255,255,255,0.05);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary);
  font-size: 13px;
}
.markdown-body td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font-size: 13px;
}
.markdown-body tr:last-child td {
  border-bottom: none;
}
.markdown-body p { margin-bottom: 12px; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body ul, .markdown-body ol { margin-bottom: 12px; padding-left: 20px; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 20px; margin-bottom: 12px; }
.page-header { margin-bottom: 16px; }
.page-header .eyebrow { font-size: 10px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px;
}
.page-header h1 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }
.section-label { font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--text-muted); text-transform: uppercase; padding: 0 12px; margin: 8px 0 4px; }
.empty-state { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 32px 16px; text-align: center; color: var(--text-muted); }
.empty-state svg { opacity: 0.35; margin-bottom: 4px;
}
.empty-state p { font-size: 13px; line-height: 1.6; }
.gold-shimmer { position: relative; overflow: hidden; }
.gold-shimmer::before { content: ''; position: absolute;
  top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(201,168,76,0.08), transparent); transform: skewX(-15deg); transition: left 0.5s var(--ease-out);
  pointer-events: none; }
.gold-shimmer:hover::before { left: 125%; }
.animate-spin  { animation: spin 1s linear infinite;
}
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-blink { animation: blink 1.4s ease-in-out infinite;
}
.animate-heat-pulse { animation: heat-pulse 2s ease-in-out infinite; }
.animate-shimmer { background: linear-gradient(90deg, transparent, rgba(201,168,76,0.08), transparent); background-size: 200% 100%;
  animation: shimmer 2s infinite; }
/* ── Aura "pensando" shimmer (gold sheen sweeping across active states) ──
   Sheen suave en dorado que cruza el elemento activo (copiloto / analista)
   sugiriendo movimiento sin saturar la UI. Overlay pseudo-element para no
   tocar el color de fondo del pill / texto del step. */
@keyframes aura-pensando-sheen {
  0%   { transform: translateX(-110%); }
  60%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}
.aura-pensando {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.aura-pensando::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(232,200,106,0.22) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  animation: aura-pensando-sheen 1.8s ease-in-out infinite;
  border-radius: inherit;
  z-index: 1;
}
.aura-pensando > * { position: relative; z-index: 2; }
.aura-active-step {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.aura-active-step::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 32%,
    rgba(240,215,140,0.28) 50%,
    transparent 68%
  );
  transform: translateX(-110%);
  animation: aura-pensando-sheen 1.6s ease-in-out infinite;
  border-radius: inherit;
  z-index: 1;
}
.aura-active-step > * { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .aura-pensando::after,
  .aura-active-step::after {
    animation: none;
    opacity: 0;
  }
}
.notif-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--error);
  border: 2px solid var(--bg-surface); }
.channel-wa { color: #22c55e; }
.channel-ig { color: #ec4899; }
.channel-fb { color: #60a5fa;
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center;
  }
}
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.35);
  }
  50%       { box-shadow: 0 0 0 6px rgba(201,168,76,0);
  }
}
@keyframes pulse-success {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.4);
  }
  50%       { box-shadow: 0 0 0 5px rgba(52,211,153,0);
  }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px);
  }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink {
  0%, 100% { opacity: 1;
  }
  50%       { opacity: 0.2;
  }
}
@keyframes heat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0); border-color: rgba(244,63,94,0.3);
  }
  50%       { box-shadow: 0 0 16px rgba(244,63,94,0.25); border-color: rgba(244,63,94,0.6);
  }
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0;
  }
}
@keyframes premium-pulse {
  0% { opacity: 0.6; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.6; transform: scale(0.98); }
}
.loading-pulse {
  animation: premium-pulse 2s ease-in-out infinite;
}
/* ── Copilot ring pulse (attention indicator) ── */
@keyframes copilot-ring {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(201,168,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}
.copilot-ring-attention {
  animation: copilot-ring 2s ease-out infinite;
}
.overlay-loading {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 6, 0.7);
  backdrop-filter: blur(8px);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: var(--radius-lg);
}
/* ── Sidebar Rail Mode (icon + label below, ≥1280px) ── */
[data-sidebar-rail] .sidebar-desktop {
  width: 80px !important;
}
/* Show labels in rail mode (already visible via flex-direction: column) */
[data-sidebar-rail] .sidebar-nav-item .nav-label {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  word-break: break-word !important;
}
/* Center icon and label in rail mode */
[data-sidebar-rail] .sidebar-nav-item {
  justify-content: center !important;
  padding: 8px 4px !important;
  width: 100% !important;
}
/* Hide badges and chevron in rail mode */
[data-sidebar-rail] .sidebar-nav-item .sidebar-badge,
[data-sidebar-rail] .sidebar-nav-item .sidebar-active-chevron,
[data-sidebar-rail] .sidebar-section-label {
  display: none !important;
}
/* User card: avatar-only in rail mode */
[data-sidebar-rail] .sidebar-user-name,
[data-sidebar-rail] .sidebar-user-plan {
  display: none !important;
}
/* PWA install + signout: icon-only in rail mode */
[data-sidebar-rail] .sidebar-install-btn span,
[data-sidebar-rail] .sidebar-signout-btn span {
  display: none !important;
}
[data-sidebar-rail] .sidebar-install-btn,
[data-sidebar-rail] .sidebar-signout-btn {
  justify-content: center !important;
  padding: 10px 0 !important;
}
/* NeuralPulse stays centered in rail mode */
[data-sidebar-rail] .sidebar-neural-pulse {
  justify-content: center !important;
  padding: 8px 0 !important;
}
canvas { cursor: crosshair; }
/* ── Form Selects ── */
select {
  background: var(--bg-raised);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  font-size: 13px;
  font-family: var(--font-body);
  appearance: none;
  -webkit-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='%239a9890' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
select option,
select optgroup {
  background: #06060A !important;
  color: var(--text-primary) !important;
}
/* Firefox */
select option {
  background: #06060A !important;
  color: var(--text-primary) !important;
}
/* Webkit/Chrome forced */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select option, select optgroup {
    background: #06060A !important;
    color: var(--text-primary) !important;
  }
}
/* ── Mobile Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
  }

  /* Ocultar sidebar desktop en mobile (drawer maneja la nav) */
  .sidebar-desktop {
    display: none !important;
  }

  /* Restore normal cursor on touch devices */
  body, body.demo-cursor, body.no-cursor,
  a, button, input, textarea, select,
  body.demo-cursor a, body.demo-cursor button,
  body.demo-cursor input, body.demo-cursor textarea,
  body.demo-cursor select, body.demo-cursor [role="button"],
  body.no-cursor a, body.no-cursor button,
  body.no-cursor input, body.no-cursor textarea,
  body.no-cursor select, body.no-cursor [role="button"] {
    cursor: auto !important;
  }

  /* Bubbles wider on mobile */
  .bubble-user, .bubble-agent {
    max-width: 92% !important;
  }

  /* Container padding */
  .container {
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
  }

  /* Tab bar scroll on mobile */
  .tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 4px;
  }
  .tab-item {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 16px;
  }

  /* Page header compact */
  .page-header {
    margin-bottom: var(--space-md);
  }
  .page-header h1 {
    font-size: 1.4rem !important;
  }

  /* Inputs: 16px para evitar zoom automático en iOS */
  input, textarea, select, .input {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }

  /* Glass panels — menos padding en mobile */
  .glass-panel {
    border-radius: 14px;
  }

  /* Modales: safe-area + scroll vertical */
  [role="dialog"], .modal-content {
    max-height: 94vh;
    width: 95vw !important;
    margin: 0 auto;
  }

  /* Botones touch-friendly: min 44px alto */
  button, [role="button"], .btn {
    min-height: 44px;
    padding: 10px 20px !important;
  }

  /* Evitar overflow horizontal en mobile */
  body, #root {
    overflow-x: hidden;
    position: relative;
  }
}
@media (max-width: 480px) {
  .page-header h1 {
    font-size: 1.1rem !important;
  }
}
/* ── Tablet adjustments ── */
@media (min-width: 769px) and (max-width: 1279px) {
  :root {
    --sidebar-w: 200px;
  }
}
/* ── Gold System Cursor (para demo modal y no-landing) ── */
body.demo-cursor,
body.no-cursor,
body.demo-cursor a,
body.demo-cursor button,
body.demo-cursor input,
body.demo-cursor textarea,
body.demo-cursor select,
body.demo-cursor [role="button"],
body.no-cursor a,
body.no-cursor button,
body.no-cursor input,
body.no-cursor textarea,
body.no-cursor select,
body.no-cursor [role="button"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9a84c' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.38 2.79a.5.5 0 0 0-.88.42z'/%3E%3Cpath fill='%23e4c97a' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.38 2.79a.5.5 0 0 0-.88.42z' opacity='.5'/%3E%3C/svg%3E") 0 0, auto !important;
}
/* ── Skeleton shimmer (opacity-based) ── */
@keyframes shimmer {
  0% { opacity: 0.4; }
  50% { opacity: 0.7; }
  100% { opacity: 0.4; }
}
.skeleton-row {
  height: 48px;
  margin-bottom: 8px;
}
.skeleton-card {
  height: 120px;
  margin-bottom: 12px;
}