/* Estilos del panel (complementan el design system de web/ds/). */

/* Variables de respaldo por si el design system no las define */
:root {
  --font-display: var(--font-display, 'Space Grotesk', sans-serif);
  --font-body:    var(--font-body, 'Plus Jakarta Sans', sans-serif);
  --font-mono:    var(--font-mono, 'Space Mono', monospace);
  --shadow-md: 0 8px 28px -12px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7);
  --glass: rgba(11,15,25,0.72);
  --blur: blur(10px);
  --glow-sm: 0 6px 20px -8px var(--accent-shadow, rgba(14,165,233,0.4));
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --scroll-thumb: rgba(255,255,255,0.09);
  --scroll-thumb-hover: rgba(255,255,255,0.16);
}

/* Efectos del modo claro (sombras/glass/scroll). Los colores viven en colors.css. */
:root[data-theme="light"] {
  --glass: rgba(255, 255, 255, 0.85);
  --shadow-md: 0 4px 12px -4px rgba(0,0,0,0.08), 0 2px 6px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);
  --scroll-thumb: rgba(0,0,0,0.15);
  --scroll-thumb-hover: rgba(0,0,0,0.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
input, button, select, textarea { font-family: inherit; outline: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
::-webkit-scrollbar-track { background: transparent; }

.bn-svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bn-row:hover { background: var(--fill-subtle) !important; }
.bn-conv { transition: background-color 0.2s var(--ease); }
.bn-conv:hover { background: var(--border) !important; }
.bn-press { transition: transform .12s var(--ease), background .15s, border-color .15s, box-shadow .15s; }
.bn-press:hover { transform: translateY(-1px); }
@keyframes bn-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

#root, .app-shell { height: 100vh; width: 100%; overflow: hidden; position: relative; }

/* Animación de entrada de mensajes del chat */
@keyframes slide-up-fade {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.msg-enter { animation: slide-up-fade 0.25s var(--ease) backwards; }

/* Spinner (banner de extracto procesándose) */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* Foco del input del chat */
#chat-input { transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
#chat-input:focus {
  border-color: var(--accent-start) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* ─────────────────────────────────────────────────────────────
   Responsive móvil (≤429px). Solo aplica en pantallas chicas:
   en ≥430px NADA de esto entra y el escritorio queda intacto.
   El layout vive inline en app.js (renderShell/renderAside):
   .app-shell es flex-row, el <aside> tiene width inline (248/68px)
   y el header mide 64px. Por eso varias reglas usan !important:
   pisan estilos inline. En móvil: shell en columna, el aside pasa a
   barra horizontal superior (~56px) y la vista ocupa el resto.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 429px) {
  /* El shell de la app pasa de fila a columna (login y app usan .app-shell;
     el login no tiene aside, así que solo le cambia la dirección sin romper). */
  .app-shell {
    flex-direction: column !important;
  }

  /* Host del aside: ya no es columna lateral, ocupa el ancho completo arriba. */
  .app-shell > #aside-host {
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  /* El <aside> se convierte en barra horizontal: alto acotado, scroll-x,
     borde inferior en vez de lateral. width inline (248/68px) → !important. */
  .app-shell > #aside-host > aside {
    width: 100% !important;
    height: 56px !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* La vista principal ocupa lo que queda bajo header (64px) + barra (56px),
     y scrollea su propio contenido (overflow inline es hidden → !important). */
  .app-shell main#view {
    height: calc(100vh - 64px - 56px) !important;
    overflow: auto !important;
  }

  /* Tablas y listas anchas: que scrolleen en X dentro de su contenedor
     en vez de desbordar la página. */
  .app-shell main#view table,
  .app-shell main#view .bn-table,
  .app-shell main#view .bn-scroll-x {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ── Filtro de fecha: el campo visible que genera Flatpickr (altInputClass) ── */
.fp-fecha {
  box-sizing: border-box;
  width: 122px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.fp-fecha:focus { outline: none; border-color: var(--accent-start); }
.fp-fecha::placeholder { color: var(--text-muted); }

/* ── Flatpickr — tema con variables del design system (dark/light automático) ── */
.flatpickr-calendar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months, .flatpickr-month { background: transparent; color: var(--text-primary); fill: var(--text-primary); }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--bg-card); color: var(--text-primary); }
.flatpickr-current-month input.cur-year { color: var(--text-primary); }
.flatpickr-weekdays { background: transparent; }
span.flatpickr-weekday { background: transparent; color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
.flatpickr-days { border: none; }
.flatpickr-day { color: var(--text-body); border-radius: 8px; }
.flatpickr-day:hover { background: var(--accent-tint); border-color: var(--border-accent); }
.flatpickr-day.today { border-color: var(--accent-start); }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--accent-grad); border-color: transparent; color: var(--on-accent); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-muted); opacity: .45; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--text-muted); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent-start); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--text-muted); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--text-muted); }