/* ============================================================
   SOUL MUSIK · Sistema de diseño v2
   Los mismos tokens del formulario de distribución (estética de
   consola de audio, paleta derivada del isologo), aplicados al
   resto de la web.

   No se reescriben los componentes: se redefinen las variables que
   los layouts ya usan (--artist-*), así el cambio es estético y
   centralizado. Soporta modo claro y oscuro con el mismo switch que
   Flami y el Release Studio (localStorage: flami_theme).
   ============================================================ */

:root {
  --r: 8px;
  --r-lg: 14px;
  --r-pill: 100px;
  --f-d: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --f-m: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --ease: cubic-bezier(.2, .8, .25, 1);

  /* Rellenos: color exacto del logo, iguales en los dos modos. */
  --amber-fill: #fdb900;
  --coral-fill: #ff5e45;
  --ink: #171717;
}

/* ---------- Modo claro (por defecto) ---------- */
:root,
:root[data-theme="light"] {
  --bg: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --surface-3: #f0eee9;
  --border: #e2dfd8;
  --border-soft: #ebe8e2;
  --text: #171717;
  --text-2: #5c5a55;
  --text-3: #8b8880;
  --amber: #8a6100;
  --amber-2: rgba(253, 185, 0, .16);
  --coral: #c0341b;
  --coral-2: rgba(255, 94, 69, .14);
  --warn: #9c4d00;
  --err: #c1123c;
  --input: #ffffff;
  --bg-grid: rgba(23, 23, 23, .030);
  --amber-line: rgba(138, 97, 0, .32);
  --coral-line: rgba(192, 52, 27, .32);
  --rail-bg: #171717;
  --rail-text: #d6d6d6;
  --rail-muted: #9e9e9e;
  --shadow: 0 10px 30px rgba(23, 23, 23, .07);
}

/* ---------- Modo oscuro ---------- */
:root[data-theme="dark"] {
  --bg: #0d0d0d;
  --surface: #171717;
  --surface-2: #1e1e1e;
  --surface-3: #272727;
  --border: #2e2e2e;
  --border-soft: #232323;
  --text: #fafafa;
  --text-2: #a0a0a0;
  --text-3: #6b6b6b;
  --amber: #fdb900;
  --amber-2: rgba(253, 185, 0, .13);
  --coral: #ff5e45;
  --coral-2: rgba(255, 94, 69, .13);
  --warn: #ff8a3d;
  --err: #ff4d6d;
  --input: #111111;
  --bg-grid: rgba(250, 250, 250, .022);
  --amber-line: rgba(253, 185, 0, .34);
  --coral-line: rgba(255, 94, 69, .34);
  --rail-bg: #0a0a0a;
  --rail-text: #d6d6d6;
  --rail-muted: #9e9e9e;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* ---------- Puente: el layout de artista toma los tokens v2 ---------- */
:root {
  --artist-bg: var(--bg);
  --artist-surface: var(--surface);
  --artist-surface-2: var(--surface-2);
  --artist-text: var(--text);
  --artist-muted: var(--text-2);
  --artist-accent: var(--coral-fill);
  --artist-accent-dark: #e04327;
  --artist-gold: var(--amber-fill);
  --artist-accent-soft: var(--coral-2);
  --artist-border: var(--border);
  --artist-shadow: var(--shadow);
  --artist-rail-bg: var(--rail-bg);
  --artist-rail-text: var(--rail-text);
  --artist-rail-muted: var(--rail-muted);
  --artist-topbar-bg: var(--surface);
  --artist-bottom-bg: var(--surface);
}

/* ---------- Tipografía ---------- */
body.artist-modern-body,
body.admx-body {
  font-family: var(--f-d);
  background: var(--bg);
  color: var(--text);
}

.artist-modern-body h1, .artist-modern-body h2, .artist-modern-body h3,
.admx-body h1, .admx-body h2, .admx-body h3 {
  font-family: var(--f-d);
  letter-spacing: -.02em;
}

/* Datos técnicos y etiquetas en mono, como en el formulario. */
.artist-modern-body .artist-home__tag,
.artist-modern-body .v3-tag,
.admx-body .v3-tag,
.admx-body .badge,
.artist-modern-body .badge {
  font-family: var(--f-m);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- Superficies en modo oscuro ----------
   El panel se diseñó sobre fondo claro: cuando el usuario elige
   oscuro, las tarjetas que tienen blanco fijo se adaptan. */
:root[data-theme="dark"] body.artist-modern-body .card,
:root[data-theme="dark"] body.artist-modern-body .artist-card,
:root[data-theme="dark"] body.artist-modern-body .panel-card,
:root[data-theme="dark"] body.admx-body .card,
:root[data-theme="dark"] body.admx-body .panel-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] body.artist-modern-body input,
:root[data-theme="dark"] body.artist-modern-body select,
:root[data-theme="dark"] body.artist-modern-body textarea,
:root[data-theme="dark"] body.admx-body input,
:root[data-theme="dark"] body.admx-body select,
:root[data-theme="dark"] body.admx-body textarea {
  background: #111111;
  border-color: var(--border);
  color: var(--text);
}

/* ============================================================
   Layout clásico (Ultra Admin) — lo usan ~55 pantallas.
   Se le aplica la misma piel v2 sin tocar su markup, para que
   todo el panel se vea igual.
   ============================================================ */
body.soul-v2 {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--f-d) !important;
}

body.soul-v2 h1, body.soul-v2 h2, body.soul-v2 h3,
body.soul-v2 h4, body.soul-v2 h5 {
  font-family: var(--f-d);
  color: var(--text);
  letter-spacing: -.015em;
}

/* Barra superior y sidebar: negro cálido del logo, no el gris azulado. */
body.soul-v2 .header,
body.soul-v2 .topbar,
body.soul-v2 .navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

body.soul-v2 .page-sidebar,
body.soul-v2 .page-sidebar-wrapper,
body.soul-v2 #main-menu-wrapper {
  background-color: var(--rail-bg) !important;
}

body.soul-v2 .page-sidebar a,
body.soul-v2 .page-sidebar .menu-text,
body.soul-v2 #main-menu-wrapper a {
  color: var(--rail-muted) !important;
  font-family: var(--f-d);
}

body.soul-v2 .page-sidebar a:hover,
body.soul-v2 .page-sidebar li.active > a,
body.soul-v2 #main-menu-wrapper li.active > a {
  color: var(--rail-text) !important;
}

/* Tarjetas y paneles */
body.soul-v2 .panel,
body.soul-v2 .card,
body.soul-v2 .panel-card,
body.soul-v2 .widget,
body.soul-v2 .box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text);
}

/* Botones primarios al coral del logo */
body.soul-v2 .btn-primary,
body.soul-v2 .btn.btn-primary,
body.soul-v2 .btn-orange {
  background: var(--coral-fill) !important;
  border-color: var(--coral-fill) !important;
  color: #fff !important;
  border-radius: var(--r) !important;
}

body.soul-v2 .btn {
  border-radius: var(--r) !important;
  font-family: var(--f-d);
}

/* Formularios */
body.soul-v2 .form-control,
body.soul-v2 input[type="text"],
body.soul-v2 input[type="email"],
body.soul-v2 input[type="password"],
body.soul-v2 input[type="date"],
body.soul-v2 input[type="number"],
body.soul-v2 select,
body.soul-v2 textarea {
  background: var(--input, var(--surface)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--text) !important;
}

/* Tablas */
body.soul-v2 table,
body.soul-v2 .table {
  color: var(--text);
}

body.soul-v2 .table thead th {
  font-family: var(--f-m);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  border-color: var(--border) !important;
}

body.soul-v2 .table td,
body.soul-v2 .table th {
  border-color: var(--border-soft) !important;
}

/* ============================================================
   El panel adopta el lenguaje visual del Release Studio.
   El Studio no usa layout (es una pagina propia), por eso se veia
   distinto. Acá se lleva ese mismo lenguaje al rail y la topbar del
   panel: items planos sin cajitas de iconos, titulos de seccion en
   mono con tracking, y superficies del sistema.
   ============================================================ */

/* --- Rail / sidebar --- */
body.admx-body .admx-sidebar,
body.artist-modern-body .artist-rail {
  background: var(--rail-bg) !important;
  border-right: 1px solid rgba(250, 250, 250, .07);
  padding: 20px 12px;
}

/* Título de sección: mono, mayúsculas, tracking amplio (como el Studio) */
body.admx-body .admx-nav__title,
body.admx-body .admx-sidebar h2,
body.artist-modern-body .artist-rail__title,
body.artist-modern-body .artist-rail h2 {
  font-family: var(--f-m) !important;
  font-size: 9px !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: rgba(250, 250, 250, .38) !important;
  margin: 22px 0 10px !important;
  padding-left: 12px;
}

/* Items del menú: planos, sin caja de icono ni translate */
body.admx-body .admx-nav__link,
body.artist-modern-body .artist-nav__link {
  border-radius: var(--r) !important;
  border-left: 0 !important;
  padding: 10px 12px !important;
  font-family: var(--f-d) !important;
  font-size: 13.5px !important;
  /* Sin negrita y en gris legible, no blanco puro (pedido de Dardo). */
  font-weight: 400 !important;
  color: var(--rail-muted) !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background .2s var(--ease), color .2s var(--ease) !important;
}

body.admx-body .admx-nav__link:hover,
body.artist-modern-body .artist-nav__link:hover {
  background: rgba(250, 250, 250, .06) !important;
  color: var(--rail-text) !important;
  transform: none !important;
}

body.admx-body .admx-nav__link.is-active,
body.artist-modern-body .artist-nav__link.is-active {
  background: rgba(250, 250, 250, .08) !important;
  color: var(--rail-text) !important;
  font-weight: 500 !important;
  box-shadow: inset 2px 0 0 var(--coral-fill) !important;
}

/* Los iconos pierden la cajita redondeada: quedan como glifo */
body.admx-body .admx-nav__icon,
body.artist-modern-body .artist-nav__icon {
  background: transparent !important;
  box-shadow: none !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  border-radius: 0 !important;
  color: inherit !important;
  font-size: 15px;
}

/* --- Topbar: limpia, borde sutil, sin sombras --- */
body.admx-body .admx-topbar,
body.artist-modern-body .artist-topbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 14px 22px !important;
}

body.admx-body .admx-topbar__title strong,
body.artist-modern-body .artist-topbar__title strong {
  font-family: var(--f-d);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
}

body.admx-body .admx-topbar__title span,
body.artist-modern-body .artist-topbar__title span {
  color: var(--text-3) !important;
}

/* Chips/stats de la topbar: mono, como los datos técnicos del Studio */
body.admx-body .admx-topbar__stat,
body.artist-modern-body .artist-topbar__stat {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  color: var(--text-2) !important;
  font-family: var(--f-m) !important;
  font-size: 11px !important;
  letter-spacing: .06em;
  box-shadow: none !important;
}

/* Botones de la topbar */
body.admx-body .admx-btn,
body.artist-modern-body .artist-topbar .btn {
  border-radius: var(--r) !important;
  font-family: var(--f-d) !important;
  font-weight: 600;
  box-shadow: none !important;
}

/* --- Contenido: superficies del sistema --- */
body.admx-body .admx-content,
body.artist-modern-body .artist-content {
  background: transparent !important;
}

/* ---------- Botón de tema (compartido con Flami / Studio) ---------- */
.soul-theme-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r);
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}

.soul-theme-btn:hover {
  border-color: var(--coral-fill);
}

/* ============================================================
   TEMA OSCURO DEL PANEL — legibilidad de badges y métricas
   ------------------------------------------------------------
   Los badges de estado y las metric-card traen colores semánticos
   pensados para fondo claro (texto oscuro sobre fondo translúcido).
   Sobre el fondo negro del sistema quedan ilegibles, así que en
   oscuro se invierte la relación: fondo tenue + texto claro.
   ============================================================ */
:root[data-theme="dark"] body.admx-body .v3-tag.is-warning,
:root[data-theme="dark"] body.admx-body .badge-pending   { background: rgba(253,185,0,.14);  color: #fdb900; }
:root[data-theme="dark"] body.admx-body .v3-tag.is-info,
:root[data-theme="dark"] body.admx-body .badge-initiated { background: rgba(96,165,250,.14); color: #93c5fd; }
:root[data-theme="dark"] body.admx-body .v3-tag.is-success,
:root[data-theme="dark"] body.admx-body .badge-approved  { background: rgba(52,211,153,.14); color: #6ee7b7; }
:root[data-theme="dark"] body.admx-body .v3-tag.is-danger,
:root[data-theme="dark"] body.admx-body .badge-rejected  { background: rgba(255,94,69,.16);  color: #ff8a73; }
:root[data-theme="dark"] body.admx-body .v3-tag.is-accent,
:root[data-theme="dark"] body.admx-body .badge-premium   { background: rgba(196,181,253,.14); color: #c4b5fd; }
:root[data-theme="dark"] body.admx-body .v3-tag.is-muted { background: rgba(250,250,250,.07); color: var(--text-3); }

/* Metric cards: superficie del sistema, sin degradados del tema anterior. */
:root[data-theme="dark"] body.admx-body .metric-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] body.admx-body .metric-card.is-dark {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] body.admx-body .metric-card .metric-value { color: var(--text); }
:root[data-theme="dark"] body.admx-body .metric-card.is-success .metric-value { color: #6ee7b7; }
:root[data-theme="dark"] body.admx-body .metric-card.is-info    .metric-value { color: #93c5fd; }
:root[data-theme="dark"] body.admx-body .metric-card.is-warning .metric-value { color: #fdb900; }
:root[data-theme="dark"] body.admx-body .metric-card.is-success .metric-label,
:root[data-theme="dark"] body.admx-body .metric-card.is-info    .metric-label,
:root[data-theme="dark"] body.admx-body .metric-card.is-warning .metric-label,
:root[data-theme="dark"] body.admx-body .metric-card .metric-meta { color: var(--text-3) !important; }

/* Tablas y filas sobre fondo oscuro. */
:root[data-theme="dark"] body.admx-body .admin-list-table thead th {
  background: var(--surface-2); color: var(--text-3);
  border-bottom-color: var(--border);
}
:root[data-theme="dark"] body.admx-body .admin-list-table td { border-color: var(--border-soft); }
:root[data-theme="dark"] body.admx-body .admin-list-table tbody tr:hover { background: var(--surface-2); }

/* ============================================================
   TÍTULOS Y TEXTO — el tema anterior los fijaba en gris
   ------------------------------------------------------------
   style.css pone `h1..h6 { color:#505458 }` para todo el sitio.
   Sobre fondo oscuro eso queda casi ilegible, así que dentro del
   panel los encabezados siguen al token de texto del tema.
   ============================================================ */
body.admx-body h1, body.admx-body h2, body.admx-body h3,
body.admx-body h4, body.admx-body h5, body.admx-body h6,
body.artist-modern-body h1, body.artist-modern-body h2,
body.artist-modern-body h3, body.artist-modern-body h4 {
  color: var(--text);
  font-family: var(--f-d);
  font-weight: 600;
  letter-spacing: -.02em;
}

/* Campos de formulario: el fondo sale del token, no de un blanco fijo.
   Sin esto el texto claro del tema oscuro quedaba blanco sobre blanco. */
body.admx-body input[type="text"], body.admx-body input[type="email"],
body.admx-body input[type="number"], body.admx-body input[type="password"],
body.admx-body input[type="url"], body.admx-body input[type="date"],
body.admx-body input[type="search"], body.admx-body input[type="tel"],
body.admx-body textarea, body.admx-body select,
body.admx-body .form-control, body.admx-body .browser-default {
  background: var(--input) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
}

body.admx-body input::placeholder,
body.admx-body textarea::placeholder { color: var(--text-3); opacity: 1; }

body.admx-body input:focus, body.admx-body textarea:focus,
body.admx-body select:focus {
  border-color: var(--amber-fill) !important;
  box-shadow: var(--glow, 0 0 0 3px var(--amber-2)) !important;
}

/* Las opciones del select las pinta el sistema: sin esto quedan
   ilegibles en oscuro en Chrome/Windows. */
body.admx-body select option { background: var(--surface); color: var(--text); }

/* Textura de fondo del Release Studio: una grilla de 1px muy tenue.
   Es parte de su identidad visual, así que el panel la comparte. */
body.admx-body {
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  background-attachment: fixed;
}

/* Los mismos ajustes de legibilidad del panel, para el workspace de artista:
   los badges traen colores pensados para fondo claro. */
:root[data-theme="dark"] body.artist-modern-body .v3-tag.is-warning,
:root[data-theme="dark"] body.artist-modern-body .badge-pending   { background: rgba(253,185,0,.14);  color: #fdb900; }
:root[data-theme="dark"] body.artist-modern-body .v3-tag.is-info,
:root[data-theme="dark"] body.artist-modern-body .badge-initiated { background: rgba(96,165,250,.14); color: #93c5fd; }
:root[data-theme="dark"] body.artist-modern-body .v3-tag.is-success,
:root[data-theme="dark"] body.artist-modern-body .badge-approved  { background: rgba(52,211,153,.14); color: #6ee7b7; }
:root[data-theme="dark"] body.artist-modern-body .v3-tag.is-danger,
:root[data-theme="dark"] body.artist-modern-body .badge-rejected  { background: rgba(255,94,69,.16);  color: #ff8a73; }
:root[data-theme="dark"] body.artist-modern-body .v3-tag.is-accent,
:root[data-theme="dark"] body.artist-modern-body .badge-premium   { background: rgba(196,181,253,.14); color: #c4b5fd; }
:root[data-theme="dark"] body.artist-modern-body .v3-tag.is-muted { background: rgba(250,250,250,.07); color: var(--text-3); }

/* Los pasteles de aviso (amarillo/rojo/naranja) quedan como fondo claro con
   texto oscuro: sobre el tema oscuro se atenuan para no encandilar. */
:root[data-theme="dark"] body.admx-body [style*="background:#fef9c3"],
:root[data-theme="dark"] body.artist-modern-body [style*="background:#fef9c3"] {
  background: rgba(253,185,0,.12) !important; color: #fdb900 !important;
}

/* Chips de códigos del catálogo (UPC / ISRC): venían con celeste claro y
   texto azul oscuro, que sobre el tema oscuro quedaban como píldoras
   blancas ilegibles. */
:root[data-theme="dark"] .catalog-code-chip {
  background: rgba(147,197,253,.12) !important;
  color: #93c5fd !important;
}
:root[data-theme="dark"] .catalog-code-chip small { color: rgba(147,197,253,.7) !important; }
:root[data-theme="dark"] .catalog-code-chip.is-upc {
  background: rgba(250,250,250,.07) !important; color: var(--text-2) !important;
}
:root[data-theme="dark"] .catalog-code-chip.is-missing {
  background: rgba(255,138,61,.14) !important; color: #ff8a3d !important;
}
:root[data-theme="dark"] .catalog-code-chip.is-more {
  background: rgba(250,250,250,.06) !important; color: var(--text-3) !important;
}

/* Métricas y chips del workspace de artista: los colores de estado están
   pensados para fondo claro (azul/rojo/ámbar oscuros) y sobre el tema
   oscuro no se leen. En oscuro se usan las mismas familias, aclaradas. */
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-info    .metric-label,
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-info    .metric-value,
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-info    .metric-meta { color: #93c5fd !important; }
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-success .metric-label,
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-success .metric-value,
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-success .metric-meta { color: #6ee7b7 !important; }
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-warning .metric-label,
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-warning .metric-value,
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-warning .metric-meta { color: #fdb900 !important; }
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-danger  .metric-label,
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-danger  .metric-value,
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-danger  .metric-meta { color: #ff8a73 !important; }

/* Cualquier texto que haya quedado con un azul/gris oscuro fijo dentro de
   una superficie oscura: se fuerza al token de texto secundario. */
:root[data-theme="dark"] body.artist-modern-body [style*="color:#445468"],
:root[data-theme="dark"] body.artist-modern-body [style*="color: #445468"] { color: var(--text-2) !important; }

/* Valor de las métricas sin color de estado (p. ej. "Total visible"): sin
   esto hereda un tono oscuro y el número queda invisible sobre la tarjeta. */
:root[data-theme="dark"] body.artist-modern-body .metric-card .metric-value,
:root[data-theme="dark"] body.artist-modern-body .metric-card.is-dark .metric-value { color: var(--text) !important; }
:root[data-theme="dark"] body.artist-modern-body .metric-card .metric-label,
:root[data-theme="dark"] body.artist-modern-body .metric-card .metric-meta { color: var(--text-3); }