/* ============================================================================
   Saelyx · ui.css — un solo lenguaje visual para /app/chat/, /app/notas/,
   /cuenta/ y /dashboard/ (§C, 17-sep-2026). Se carga DESPUÉS de sx.css (y de
   sx-studio.css / chat.css donde existan) para que estos tokens y estas
   redefiniciones ganen la cascada solo en esas páginas. La portada NO lo carga:
   sigue con el periwinkle de sx.css tal cual, su rediseño va aparte.
   ============================================================================ */

/* ── Tokens de acento en cian (sin lavanda ni violeta fuera del orbe) ────────
   El resto de tokens (superficies, texto, radios, sombras…) se heredan de
   sx.css sin tocar: aquí solo cambia el acento de interfaz. */
:root {
  --accent:        #5CDBFC;
  --accent-bright: #8AE6FF;
  --accent-pale:   #CFF3FF;
  --accent-dim:    #2FB8DD;
  --accent-glow:      rgba(92,219,252,.30);
  --accent-glow-soft: rgba(92,219,252,.10);
  --stroke-accent:    rgba(92,219,252,.42);
  /* Altura real de `.app-header` (fila única, ver más abajo): la usan
     chat.css y notas.css para no dar por hecho un número fijo que se queda
     corto en cuanto la cabecera cambia -- a ≤560px pasa a dos filas y este
     mismo token se redeclara ahí. */
  --app-header-h: 66px;
}
/* sx.css ya define `:focus-visible` sobre estos mismos tokens (var(--accent),
   var(--accent-glow)) -- con solo redeclarar el token el anillo de foco se
   vuelve cian aquí sin duplicar la regla entera. */

/* ── Botón primario = «Despertar a Saelyx» del Mac (MainWindow.swift:920-933):
   cápsula, degradado azul→violeta plano (sin el aurora de 4 paradas ni el
   glow de sx.css: el botón del Mac no lleva sombra), texto blanco 600, hover
   SOLO brightness. Redefine `.btn--primary` de sx.css y alcanza también al
   botón de enviar del compositor de chat cuando tiene texto (`.ready`),
   mismo pareado en las dos maquetas del chat (standalone y el de /cuenta/). */
/* Texto oscuro, no blanco: blanco sobre el extremo claro del degradado
   (#5CA8FC) da 2,48:1 -- por debajo del 4,5:1 de AA para texto normal, y el
   extremo violeta tampoco llega (3,96:1). `--ink-on-accent` (sx.css) sí
   cumple en todo el degradado (mismo criterio que ya usa `.cta-primary`
   en sx-studio.css para su propio degradado de acento).

   `.acct-content .cta-primary` / `.sxs-content .cta-primary` (sx-studio.css)
   son el botón primario de /cuenta/ -- sin alcanzarlos aquí, esa página
   quedaba con SU PROPIO primario (degradado cian vertical) mientras
   /app/chat/ y /app/notas/ usan éste (degradado azul->violeta horizontal,
   el de "Despertar a Saelyx" en el Mac): dos primarios distintos en el
   mismo "lenguaje visual único" que describe §C. */
.btn--primary,
.acct-content .cta-primary,
.sxs-content .cta-primary,
.composer button.ready,
.chat-composer button.ready {
  background: linear-gradient(90deg, #5CA8FC, #8C66F2);
  color: var(--ink-on-accent);
  box-shadow: none;
}
.btn--primary { border-radius: var(--r-pill, 999px); }
.btn--primary:hover,
.acct-content .cta-primary:hover,
.sxs-content .cta-primary:hover,
.composer button.ready:hover,
.chat-composer button.ready:hover {
  filter: brightness(1.08);
  transform: none;
  box-shadow: none;
}

/* ── Píldora compartida = DictadoPillOverlay.swift (negro 78%, borde blanco
   8%→22%, texto blanco 60%→95%, JetBrains Mono 13) + orbe de
   TerminalPane.swift (apagado→encendido con resplandor cian al pasar el
   ratón o al estar `.on`). Sustituye a `.btn--ghost` y a los botones
   secundarios de cuenta/dashboard ("Ver planes", "Vaciar conversación",
   "Avisarme", enlaces de acción) y es el propio indicador de herramienta en
   curso del chat ("Buscando en tus reuniones…"). */
.pill-sx {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(0,0,0,.78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  color: rgba(255,255,255,.60);
  font: 13px/1.1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  cursor: pointer; border: none; text-decoration: none;
  transition: box-shadow .15s ease, color .15s ease;
}
.pill-sx .orb-wrap { width: 22px; height: 22px; flex: 0 0 auto; }
.pill-sx .orb { filter: saturate(.35) brightness(.55); transition: filter .2s ease, box-shadow .2s ease; }
.pill-sx:hover, .pill-sx.on {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
}
.pill-sx:hover .orb, .pill-sx.on .orb {
  filter: none;
  box-shadow: 0 0 10px -1px var(--accent-glow);
}
.pill-sx:disabled { cursor: default; opacity: .7; }
/* Variante sin orbe (texto suelto: "Vaciar conversación", "Ver planes"…). */
.pill-sx--texto { padding: 8px 16px; }

/* La píldora también SUSTITUYE a `.btn--ghost` (sx.css, botones secundarios
   de la landing) y a `.acct-ghost` (sx-studio.css: "Ver planes", "Vaciar
   conversación", "Avisarme", enlaces de acción) EN ESTAS PÁGINAS -- se
   redefine el aspecto de esas dos clases en vez de perseguir cada botón por
   su sitio, así que todo botón secundario existente hereda el cambio sin
   tocar un solo HTML. `.acct-ghost.danger` conserva su tinte rojo al pasar
   el ratón (Eliminar cuenta, Vaciar conversación…): ese aviso no se diluye
   en el negro neutro de la píldora. */
.btn--ghost, .acct-ghost {
  background: rgba(0,0,0,.78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  color: rgba(255,255,255,.60);
  border-color: transparent;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}
.btn--ghost:hover,
.acct-ghost:hover:not(.danger) {
  background: rgba(0,0,0,.78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
}
/* El anillo de foco global de sx.css es SOLO box-shadow (`outline:none` +
   box-shadow con los tokens de acento) -- estas tres clases redefinen
   box-shadow con la MISMA especificidad y en una hoja posterior, así que
   ganan y el anillo desaparece del todo (ni siquiera cambia de color: el
   valor en reposo y en foco es idéntico). Mismo patrón que ya usa
   `.btn:focus-visible` en sx.css para el mismo problema. */
.pill-sx:focus-visible,
.btn--ghost:focus-visible,
.acct-ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Cabecera común de /app/chat/ y /app/notas/ (§C): `.nav-brand` con el
   orbe real de sx.css (logo sin tocar) + «Saelyx» + enlaces Chat · Notas ·
   Cuenta + la píldora del usuario (se enciende al pasar el ratón). */
.app-header {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 20px; max-width: 1000px; margin: 0 auto;
}
.app-header .nav-brand { text-decoration: none; color: inherit; }
.app-header .nav-brand .orb-wrap { width: 26px; height: 26px; }
.app-header-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; flex-wrap: wrap; }
.app-header-nav a {
  color: rgba(255,255,255,.62); text-decoration: none;
  font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 999px;
  transition: color .15s ease, background .15s ease;
}
.app-header-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.app-header-nav a[aria-current="page"] { color: var(--accent-bright); background: var(--accent-glow-soft); }
/* Insignia de plan, junto a la píldora del usuario (antes vivía solo en
   chat.css; ahora es parte de la cabecera común). */
.app-header .plan-badge {
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  color: var(--accent-bright); background: var(--bg-elev-2, #121629);
  border: 1px solid var(--stroke-accent);
  padding: 4px 11px; border-radius: 999px;
}

@media (max-width: 560px) {
  /* La cabecera pasa a DOS filas (píldora + nav) y crece bastante más que
     el valor de fila única -- sin este segundo valor, .chat-wrap y
     .notes-shell (calc(100dvh - var(--app-header-h))) se quedaban ~103px
     más altos que el hueco real, empujando el compositor y el final del
     editor fuera de la pantalla. */
  :root { --app-header-h: 104px; }
  .app-header { gap: 10px; padding: 12px 16px; }
  .app-header-nav { order: 3; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pill-sx, .pill-sx .orb, .btn--primary, .composer button.ready, .chat-composer button.ready { transition: none !important; }
}