/* aniv-sbs-temas-001 — puente Sail UI → SBS (piloto de temas, paridad con SBE).
   Va DESPUÉS de app.css.

   Looks (sail-ui config/looks): clasico, vivo, wine, winelive.
   - «clasico» (o sin data-sail-look) deja SBS tal cual: azul #0082c9, riel gris,
     y su modo claro/oscuro/automático de siempre (data-theme). Ningún selector de
     este archivo aplica en Clásico, salvo el selector de tema del menú de usuario.
   - vivo / wine / winelive: los tokens de SBS (--bg, --ink, --card, --accent…) pasan a
     leer --sui-*; el dist resuelve producto (data-sail-product="sbs"), look y modo
     (data-sail-mode). El encabezado azul pasa a --sui-topbar con tinta, igual que SBE.
   - vivo / winelive: relieve (tarjetas sin filo, sombra de tarjeta, activo con brillo).
   - wine / winelive: riel negro #181818 con filo rojo #a2272f.
   El layout de SBS (.app / .header / .rail / .content) NO se cambia a .sui-shell:
   el puente pinta sobre las clases legacy, sin tocar hx-*, OIDC ni el enlace a SCC. */

/* ── Tokens SBS → sail-ui (excluye clasico) ──
   Especificidad (0,2,1): le gana a los oscuros de app.css (:root:not([data-theme=light])
   en media (0,2,0) y html[data-theme=dark] (0,1,1)); el modo lo da data-sail-mode. */
html[data-sail-look]:not([data-sail-look="clasico"]) {
  --bg: var(--sui-canvas);
  --bg-app: var(--sui-canvas);
  --ink: var(--sui-ink);
  --muted: var(--sui-muted);
  --rail: var(--sui-sidebar);
  --rail-ink: var(--sui-sidebar-ink);
  --accent: var(--sui-accent);
  --accent-2: var(--sui-accent-hover);
  --nc-blue: var(--sui-accent);
  --nc-blue-hover: var(--sui-accent-hover);
  --nc-blue-dark: var(--sui-accent-hover);
  --ok: var(--sui-ok);
  --ok-bg: var(--sui-ok-soft);
  --danger: var(--sui-danger);
  --danger-bg: var(--sui-danger-soft);
  --card: var(--sui-surface);
  --line: var(--sui-line);
  --hover: var(--sui-hover);
  --shadow: var(--sui-shadow-card);
  --table-head: var(--sui-surface-2);
  --input-bg: var(--sui-surface);
  --input-border: var(--sui-line-strong);
  --badge-bg: var(--sui-surface-2);
  --badge-ink: var(--sui-ink);
  --code-bg: var(--sui-surface-2);
  --nav-active: var(--sui-accent-soft);
  --bar-track: var(--sui-chart-track);
  --dialog-backdrop: var(--sui-overlay);
  --radius-l: var(--sui-radius-md, 12px);
  /* Texto de acento (enlaces, cifras). En oscuro el acento de fondo (#006aa3 en SBS,
     #a2272f en wine) no da contraste como texto: se usa --sui-brand (claro). */
  --sbs-link: var(--sui-accent);
  color: var(--sui-ink);
  background: var(--sui-canvas);
}
html[data-sail-mode="dark"][data-sail-look]:not([data-sail-look="clasico"]) {
  color-scheme: dark;
  --sbs-link: var(--sui-brand);
}
html[data-sail-mode="light"][data-sail-look]:not([data-sail-look="clasico"]) { color-scheme: light; }

/* ── Texto de acento ── (:where = 0; gana por orden a la regla igual de app.css) */
:where(html[data-sail-look]:not([data-sail-look="clasico"])) a,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) a:hover { color: var(--sbs-link); }
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .crumbs a,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) a.home-row:hover,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) a.browser-name:hover,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .card .n,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .home-quota-pct,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .user-pop button:hover,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .theme-choices button:hover,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .theme-choices button.active { color: var(--sbs-link); }
:where(html[data-sail-look]:not([data-sail-look="clasico"])) a.card:hover {
  border-color: var(--sui-accent);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--sui-accent) 16%, transparent);
}
:where(html[data-sail-look]:not([data-sail-look="clasico"])) input:focus,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) select:focus,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--sui-accent) 35%, transparent);
  border-color: var(--sui-accent);
}
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail-switch select option { color: var(--sui-ink); background: var(--sui-surface); }

/* ── Encabezado: azul → --sui-topbar con tinta ── */
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header {
  background: var(--sui-topbar);
  color: var(--sui-ink);
  border-bottom: 1px solid var(--sui-line);
  box-shadow: none;
}
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header a,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header a:hover,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header .brand,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header-company .rail-co,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .user-menu summary { color: var(--sui-ink); }
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header .brand .tag,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header-company .hint,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail-switch label { color: var(--sui-muted); }
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail-switch select {
  background: var(--sui-surface);
  color: var(--sui-ink);
  border-color: var(--sui-line-strong);
}
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail-quota .bar { background: var(--sui-chart-track); }
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail-quota .bar span { background: var(--sui-accent); }
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .user-menu summary:hover { background: var(--sui-hover); }
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .avatar { background: var(--sui-accent-soft); color: var(--sbs-link); }
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header .ibtn,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header .header-burger,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail-toggle,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .login-theme .ibtn { color: var(--sui-muted); }
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header .ibtn:hover,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header .ibtn:focus-visible,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header .header-burger:hover,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail-toggle:hover,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail-toggle:focus-visible,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .login-theme .ibtn:hover {
  background: var(--sui-hover);
  color: var(--sui-ink);
}
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header-scc:hover,
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .header-scc:focus-visible { background: var(--sui-hover); }
/* Login / error / compartido: la franja superior sigue al encabezado. */
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .login-wrap::before {
  background: var(--sui-topbar);
  border-bottom: 1px solid var(--sui-line);
}

/* ── Riel ── */
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail {
  background: var(--sui-sidebar);
  color: var(--sui-sidebar-ink);
  border-right-color: var(--sui-line);
}
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail nav a { color: var(--sui-sidebar-ink); }
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail nav a:hover { background: var(--sui-hover); color: var(--sui-ink); }
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail nav a.active {
  background: var(--sui-accent);
  color: var(--sui-accent-ink);
  border-left-color: transparent;
}
:where(html[data-sail-look]:not([data-sail-look="clasico"])) .rail nav a.active:hover { background: var(--sui-accent-hover); color: var(--sui-accent-ink); }

/* ── Relieve vivo / winelive ── */
html:is([data-sail-look="vivo"], [data-sail-look="winelive"]) :is(.card, .panel, .login-card, .dl-card) {
  border-color: transparent;
  box-shadow: var(--sui-shadow-card);
}
/* Excepciones que app.css ya resuelve con más detalle: tarjetas internas sin sombra
   y el filo verde del panel de clave emitida. */
html:is([data-sail-look="vivo"], [data-sail-look="winelive"]) .home-quota-stats .card {
  border-color: var(--line);
  box-shadow: none;
}
html:is([data-sail-look="vivo"], [data-sail-look="winelive"]) .panel.issued-key { border-color: var(--ok); }
html:is([data-sail-look="vivo"], [data-sail-look="winelive"]) .rail nav a.active {
  box-shadow: 0 8px 16px color-mix(in srgb, var(--sui-accent) 38%, transparent);
}

/* ── Riel wine / winelive: negro con filo rojo ── */
html:is([data-sail-look="wine"], [data-sail-look="winelive"]) .rail {
  background: #181818;
  color: #f3f0f0;
  border-right-color: #2a2424;
  box-shadow: inset 0 3px 0 #a2272f;
}
html[data-sail-mode="dark"]:is([data-sail-look="wine"], [data-sail-look="winelive"]) .rail {
  background: #0e0c0c;
  border-right-color: #0e0c0c;
}
html:is([data-sail-look="wine"], [data-sail-look="winelive"]) .rail nav a { color: #f3f0f0; }
html:is([data-sail-look="wine"], [data-sail-look="winelive"]) .rail nav a:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
html:is([data-sail-look="wine"], [data-sail-look="winelive"]) .rail nav a.active,
html:is([data-sail-look="wine"], [data-sail-look="winelive"]) .rail nav a.active:hover {
  background: var(--sui-accent);
  color: var(--sui-accent-ink);
}
html[data-sail-look="winelive"] .rail nav a.active { box-shadow: 0 8px 16px rgba(162, 39, 47, 0.4); }
@media (max-width: 480px) {
  /* Riel flotante en móvil: conserva la sombra lateral de app.css junto al filo rojo. */
  html:is([data-sail-look="wine"], [data-sail-look="winelive"]) .rail {
    box-shadow: inset 0 3px 0 #a2272f, 8px 0 24px rgba(0, 0, 0, 0.12);
  }
}

/* ── Selector de tema (menú de usuario → Tema). Aplica en todos los looks. ── */
.look-choices button { display: flex; align-items: center; gap: 0.6rem; }
.look-swatch {
  display: inline-flex;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 1.1rem;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.look-swatch i { flex: 1; }
.look-swatch--clasico i:nth-child(1) { background: #f6f6f6; }
.look-swatch--clasico i:nth-child(2) { background: #ffffff; }
.look-swatch--clasico i:nth-child(3) { background: #0082c9; }
.look-swatch--vivo i:nth-child(1) { background: #d7e6f4; }
.look-swatch--vivo i:nth-child(2) { background: #ffffff; }
.look-swatch--vivo i:nth-child(3) { background: #006aa3; }
.look-swatch--wine i:nth-child(1) { background: #f6f4f4; }
.look-swatch--wine i:nth-child(2) { background: #181818; }
.look-swatch--wine i:nth-child(3) { background: #a2272f; }
.look-swatch--winelive i:nth-child(1) { background: #f6eeee; }
.look-swatch--winelive i:nth-child(2) { background: #181818; }
.look-swatch--winelive i:nth-child(3) { background: #a2272f; }