/* ════════════════════════════════════════════════════════════════════════════
   TheWaveRadar — UI v2 (FASE 2A)
   Terminal financiero pro: tokens, motion sobrio, componentes.
   Spec: docs/UI-V2-DESIGN.md (§2 tokens, §3 componentes, §5.3 paleta).
   Carga DESPUÉS de los 6 css v1 — solo extiende, nunca redefine variables v1.
   Reglas duras: solo se anima transform / opacity / box-shadow / color /
   background-color. Hover y press responden en --tw-dur-fast (<150ms).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── §2.2 Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Texto: variables ya usadas en vistas pero nunca declaradas (auditoría §2.1) */
  --tw-text-head: #f2f4f7;
  --tw-text-main: #d3d7de;
  --tw-bg-hover:  rgba(255,255,255,.045);
  --tw-success:   #22c55e;

  /* Fuente mono para números (tabular). Sin CDN: stack de sistema. */
  --tw-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono',
                  'Roboto Mono', Menlo, Consolas, monospace;

  /* Fases como estados de juego (§2.3) */
  --tw-phase-accelerating:    #22c55e;
  --tw-phase-accelerating-bg: rgba(34,197,94,.12);
  --tw-phase-mature:          #38bdf8;
  --tw-phase-mature-bg:       rgba(56,189,248,.12);
  --tw-phase-emerging:        #a78bfa;
  --tw-phase-emerging-bg:     rgba(167,139,250,.12);
  --tw-phase-exhausting:      #f87171;
  --tw-phase-exhausting-bg:   rgba(248,113,113,.12);
  --tw-phase-dormant:         #64748b;
  --tw-phase-dormant-bg:      rgba(100,116,139,.12);

  /* Elevación (4 niveles; --tw-shadow-sm/md de base.css siguen vivos) */
  --tw-elev-0: none;
  --tw-elev-1: 0 1px 2px rgba(0,0,0,.35);
  --tw-elev-2: 0 4px 14px rgba(0,0,0,.35);
  --tw-elev-3: 0 12px 32px rgba(0,0,0,.45);
  --tw-elev-4: 0 24px 60px rgba(0,0,0,.6);
  --tw-glow-up:   0 0 0 1px rgba(34,197,94,.35), 0 0 14px rgba(34,197,94,.22);
  --tw-glow-down: 0 0 0 1px rgba(239,68,68,.35), 0 0 14px rgba(239,68,68,.22);

  /* Motion (curvas + duraciones) */
  --tw-ease-out:    cubic-bezier(.22, 1, .36, 1);    /* entradas (snappy) */
  --tw-ease-in:     cubic-bezier(.4, 0, 1, 1);       /* salidas */
  --tw-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* pops con overshoot */
  --tw-dur-fast:  120ms;   /* hover/press: SIEMPRE <150ms */
  --tw-dur-base:  200ms;   /* cards, chips, toasts in */
  --tw-dur-view:  260ms;   /* transición de vista del router */
  --tw-dur-slow:  450ms;   /* count-up corto, sparkline draw */
  --tw-dur-count: 700ms;   /* count-up de scores */
}

/* ── Focus visible (a11y, motion regla 4) ───────────────────────────────── */
.tw-btn:focus-visible,
.tw-chip:focus-visible,
[data-chart-ticker]:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tw-accent);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   §2.3 Fases — badge con identidad por fase (color + forma, sin animación idle)
   Clases que pinta 2B: tw-phase-badge tw-phase--<accelerating|mature|emerging|exhausting|dormant>
   ════════════════════════════════════════════════════════════════════════ */
.tw-phase--accelerating { --phase-c: var(--tw-phase-accelerating); --phase-bg: var(--tw-phase-accelerating-bg); }
.tw-phase--mature       { --phase-c: var(--tw-phase-mature);       --phase-bg: var(--tw-phase-mature-bg); }
.tw-phase--emerging     { --phase-c: var(--tw-phase-emerging);     --phase-bg: var(--tw-phase-emerging-bg); }
.tw-phase--exhausting   { --phase-c: var(--tw-phase-exhausting);   --phase-bg: var(--tw-phase-exhausting-bg); }
.tw-phase--dormant      { --phase-c: var(--tw-phase-dormant);      --phase-bg: var(--tw-phase-dormant-bg); }

.tw-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--phase-c, var(--tw-text-mute));
  background: var(--phase-bg, rgba(255,255,255,.05));
  border: 1px solid color-mix(in srgb, var(--phase-c, #9ca3af) 35%, transparent);
}

/* PO-4 (2026-06-12): eliminadas las 3 animaciones idle infinitas de badges
   (tw-pulse / tw-glow-soft / tw-fade-idle). La fase se lee por color + forma.
   El motion funcional (tick-flash, hover, transición de vista) sigue abajo. */

/* Fix del bug v1: .tw-tag-phase (base.css:258) era verde para TODAS las fases.
   Genérico → neutro; el color real lo pone .tw-phase--x cuando 2B añade la clase. */
.tw-tag-phase {
  background: var(--phase-bg, rgba(255,255,255,.06));
  color: var(--phase-c, var(--tw-text-mute));
  border-color: color-mix(in srgb, var(--phase-c, #9ca3af) 30%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════
   §2.4 Números en mono tabular (sin tocar JS: por selector existente)
   ════════════════════════════════════════════════════════════════════════ */
.tw-num,
.tw-narr-card-score,
.tw-hist-score,
.tw-rot-score,
.tw-score-metric-value,
.tw-macro-val,
.tw-macro-value,
.tw-etf-score-ring,
.tw-ticker-modal-symbol,
.tw-disc-score,
.tw-analyzer-price-val,
.tw-cta-metric-value,
.tw-mini-score,
.tw-opp-hero-tick,
.tw-leader-tick,
.tw-earn-sym {
  font-family: var(--tw-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

/* ════════════════════════════════════════════════════════════════════════
   §3.1 Cards — hover lift + press (<100ms, solo transform/borde/sombra)
   ════════════════════════════════════════════════════════════════════════ */
.tw-narr-card,
.tw-mini-card,
.tw-hist-card,
.tw-rot-card,
.tw-etf-card,
.tw-opp-row {
  transition:
    transform var(--tw-dur-fast) var(--tw-ease-out),
    border-color var(--tw-dur-fast) var(--tw-ease-out),
    box-shadow var(--tw-dur-fast) var(--tw-ease-out),
    background-color var(--tw-dur-fast) var(--tw-ease-out);
  will-change: transform;
}
.tw-narr-card:hover,
.tw-mini-card:hover,
.tw-hist-card:hover,
.tw-rot-card:hover,
.tw-etf-card:hover,
.tw-opp-row:hover {
  transform: translateY(-2px);
  border-color: var(--tw-border-str);
  box-shadow: var(--tw-elev-2);
}
.tw-narr-card:active,
.tw-mini-card:active,
.tw-hist-card:active,
.tw-rot-card:active,
.tw-etf-card:active,
.tw-opp-row:active {
  transform: translateY(0) scale(.99);
}
/* Las cards bloqueadas (paywall) no levitan */
.tw-mini-card.is-locked:hover,
.tw-mini-card.is-locked:active {
  transform: none;
  box-shadow: none;
}
/* Cards con fase: borde izquierdo 3px del color de fase (clase la pone 2B) */
.tw-narr-card.tw-phase--accelerating,
.tw-narr-card.tw-phase--mature,
.tw-narr-card.tw-phase--emerging,
.tw-narr-card.tw-phase--exhausting,
.tw-narr-card.tw-phase--dormant,
.tw-mini-card.tw-phase--accelerating,
.tw-mini-card.tw-phase--mature,
.tw-mini-card.tw-phase--emerging,
.tw-mini-card.tw-phase--exhausting,
.tw-mini-card.tw-phase--dormant {
  border-left: 3px solid var(--phase-c);
}

/* ════════════════════════════════════════════════════════════════════════
   §3.3 Botones — press feedback, .tw-btn-sm formal, pop del favorito
   ════════════════════════════════════════════════════════════════════════ */
.tw-btn {
  transition:
    transform var(--tw-dur-fast) var(--tw-ease-out),
    background-color var(--tw-dur-fast) var(--tw-ease-out),
    border-color var(--tw-dur-fast) var(--tw-ease-out),
    color var(--tw-dur-fast) var(--tw-ease-out),
    box-shadow var(--tw-dur-fast) var(--tw-ease-out);
}
.tw-btn:active { transform: translateY(0) scale(.97); }

/* Variante usada en chart-trend.js:104 pero nunca definida en CSS (auditoría §3.3) */
.tw-btn-sm {
  padding: 6px 12px;
  font-size: .8rem;
  border-radius: 8px;
}

/* Pop con overshoot al marcar favorito */
@keyframes tw-pop {
  0%   { transform: scale(.6); }
  100% { transform: scale(1); }
}
.tw-fav-btn { transition: transform var(--tw-dur-fast) var(--tw-ease-out), border-color var(--tw-dur-fast), background-color var(--tw-dur-fast); }
.tw-fav-btn:active { transform: scale(.92); }
.tw-fav-btn.is-active .tw-fav-star {
  display: inline-block;
  animation: tw-pop var(--tw-dur-base) var(--tw-ease-spring);
}

/* ════════════════════════════════════════════════════════════════════════
   §3.4 Tablas y filas de datos — hover, affordance de ticker, thead sticky
   ════════════════════════════════════════════════════════════════════════ */
.tw-opp-row,
.tw-fav-row,
.tw-earn-row,
.tw-disc-table tbody tr {
  transition: background-color var(--tw-dur-fast) var(--tw-ease-out);
}
.tw-fav-row:hover,
.tw-earn-row:hover,
.tw-disc-table tbody tr:hover {
  background: var(--tw-bg-hover);
}

/* Affordance universal "esto abre el chart" */
[data-chart-ticker] { cursor: pointer; }

/* Ticker unificado en celdas/chips (2B lo añade junto a data-chart-ticker) */
.tw-tk {
  font-family: var(--tw-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  color: var(--tw-text-head);
  cursor: pointer;
  transition: color var(--tw-dur-fast) var(--tw-ease-out);
}
.tw-tk:hover {
  color: var(--tw-accent);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Thead pegajoso en la tabla de descubrimiento (CSS only) */
.tw-disc-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tw-bg-elev);
}

/* ════════════════════════════════════════════════════════════════════════
   Glow de cambios — tick-flash de precios/scores (lo dispara twUiFx, 2B)
   ════════════════════════════════════════════════════════════════════════ */
@keyframes tw-flash-up-kf {
  0%   { background-color: rgba(34,197,94,.16); box-shadow: var(--tw-glow-up); }
  100% { background-color: transparent; box-shadow: none; }
}
@keyframes tw-flash-down-kf {
  0%   { background-color: rgba(239,68,68,.16); box-shadow: var(--tw-glow-down); }
  100% { background-color: transparent; box-shadow: none; }
}
.tw-flash-up   { animation: tw-flash-up-kf 600ms var(--tw-ease-out); border-radius: 4px; }
.tw-flash-down { animation: tw-flash-down-kf 600ms var(--tw-ease-out); border-radius: 4px; }

/* ════════════════════════════════════════════════════════════════════════
   §3.2 Ticker-modal hub — fila de enlaces internos (markup lo pinta 2B)
   ════════════════════════════════════════════════════════════════════════ */
.tw-ticker-modal-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--tw-border);
  flex-shrink: 0;
}
.tw-ticker-modal-links a,
.tw-ticker-modal-links button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  font-family: inherit;
  color: var(--tw-text-main);
  background: var(--tw-bg-soft);
  border: 1px solid var(--tw-border);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--tw-dur-fast) var(--tw-ease-out),
    border-color var(--tw-dur-fast) var(--tw-ease-out),
    color var(--tw-dur-fast) var(--tw-ease-out),
    background-color var(--tw-dur-fast) var(--tw-ease-out),
    box-shadow var(--tw-dur-fast) var(--tw-ease-out);
}
.tw-ticker-modal-links a:hover,
.tw-ticker-modal-links button:hover {
  transform: translateY(-1px);
  color: var(--tw-text-head);
  border-color: var(--tw-border-str);
  box-shadow: var(--tw-elev-1);
}
.tw-ticker-modal-links a:active,
.tw-ticker-modal-links button:active {
  transform: translateY(0) scale(.97);
}

/* ════════════════════════════════════════════════════════════════════════
   §3.6 Toasts — contenedor #tw-toast-stack lo crea twUiFx (2B) desde JS
   ════════════════════════════════════════════════════════════════════════ */
#tw-toast-stack {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
@keyframes tw-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tw-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(92vw, 420px);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tw-text-head);
  background: var(--tw-bg-elev);
  border: 1px solid var(--tw-border-str);
  box-shadow: var(--tw-elev-3);
  animation: tw-toast-in var(--tw-dur-base) var(--tw-ease-out);
  transition: opacity var(--tw-dur-base) var(--tw-ease-in), transform var(--tw-dur-base) var(--tw-ease-in);
}
.tw-toast.is-leaving { opacity: 0; transform: translateY(8px); }
.tw-toast--ok   { border-color: rgba(34,197,94,.45);  box-shadow: var(--tw-elev-3), 0 0 12px rgba(34,197,94,.15); }
.tw-toast--warn { border-color: rgba(217,119,6,.55);  box-shadow: var(--tw-elev-3), 0 0 12px rgba(217,119,6,.15); }
.tw-toast--info { border-color: rgba(8,145,178,.55); }

/* ════════════════════════════════════════════════════════════════════════
   §3.7 Transición de vistas del router (hook en app.js mount())
   ════════════════════════════════════════════════════════════════════════ */
@keyframes tw-view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
#tw-root.tw-view-enter {
  animation: tw-view-in var(--tw-dur-view) var(--tw-ease-out);
}

/* ════════════════════════════════════════════════════════════════════════
   §5.3 Paleta de comandos (Cmd/Ctrl+K) — shell CSS; el DOM lo crea 2B.
   Contrato de clases 2A↔2B: tw-cp-backdrop / tw-cp / tw-cp-input /
   tw-cp-list / tw-cp-item (.is-active) / tw-cp-section. NO renombrar.
   ════════════════════════════════════════════════════════════════════════ */
.tw-cp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9300;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(40px, 14vh, 140px) 16px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tw-dur-base) var(--tw-ease-out);
}
.tw-cp-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}
@keyframes tw-cp-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tw-cp {
  width: 100%;
  max-width: 560px;
  max-height: min(60vh, 480px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--tw-bg-elev);
  border: 1px solid var(--tw-border-str);
  border-radius: var(--tw-radius-lg);
  box-shadow: var(--tw-elev-4);
}
.tw-cp-backdrop.is-open .tw-cp {
  animation: tw-cp-in var(--tw-dur-base) var(--tw-ease-out);
}
.tw-cp-input {
  width: 100%;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--tw-text-head);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--tw-border);
  outline: none;
}
.tw-cp-input::placeholder { color: var(--tw-text-soft); }
.tw-cp-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  margin: 0;
  list-style: none;
}
.tw-cp-section {
  padding: 8px 12px 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tw-text-soft);
}
.tw-cp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border-left: 2px solid transparent;
  font-size: .9rem;
  color: var(--tw-text-main);
  cursor: pointer;
  transition: background-color var(--tw-dur-fast) var(--tw-ease-out), border-color var(--tw-dur-fast) var(--tw-ease-out);
}
.tw-cp-item:hover {
  background: var(--tw-bg-hover);
}
.tw-cp-item.is-active {
  background: var(--tw-bg-hover);
  border-left-color: var(--tw-accent);
  color: var(--tw-text-head);
}
.tw-cp-item .tw-tk,
.tw-cp-item .tw-num { color: inherit; }
.tw-cp-empty {
  padding: 18px 14px;
  font-size: .85rem;
  color: var(--tw-text-mute);
  text-align: center;
}
.tw-cp-hint {
  padding: 8px 14px;
  border-top: 1px solid var(--tw-border);
  font-size: .7rem;
  color: var(--tw-text-soft);
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}
.tw-cp-hint kbd {
  font-family: var(--tw-font-mono);
  font-size: .68rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--tw-bg-soft);
  border: 1px solid var(--tw-border);
  color: var(--tw-text-mute);
}

/* ════════════════════════════════════════════════════════════════════════
   §3.10 Jerarquía del dato (PO-8 [A], QA lote 1 2026-06-12)
   En la mini-card del home, score y cambio % son los elementos de mayor
   peso visual tras el nombre (criterio: legible en <3 s). El label de fase
   toma el color de su token --phase-c (identidad dormant incluida, PO-5).
   ════════════════════════════════════════════════════════════════════════ */
.tw-mini-card-bottom { align-items: center; }
.tw-mini-card .tw-mini-score {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tw-text-head);
}
.tw-mini-card .tw-mini-arrow { font-weight: 700; }
.tw-mini-card .tw-mini-phase { font-size: .72rem; font-weight: 600; }
/* Labels de fase en texto plano: color del token de fase (gana a los <style>
   de vista por especificidad 0,2,0 — no usar !important) */
.tw-mini-phase[class*="tw-phase--"],
.tw-narr-simple-phase[class*="tw-phase--"],
.tw-narr-card-phase[class*="tw-phase--"] {
  color: var(--phase-c, var(--tw-text-mute));
}

/* ════════════════════════════════════════════════════════════════════════
   Accesibilidad — prefers-reduced-motion mata TODA animación/transición
   (obligatorio §2.2 regla 3; debe ir al final del archivo)
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}