/* =====================================================================
   Skins de BustaSAM.

   Un skin es un juego de variables CSS sobre las que ya pinta todo el tema
   (--primary, --ring, --accent, --radius...): html[data-skin="x"] las cambia,
   y html[data-skin="x"].dark las cambia para el modo oscuro. Nada se
   recompila. Sin atributo, o con "metronic", es el azul de siempre.

   El skin "brand" (color de marca de una cuenta) no esta aqui: sus variables
   las escribe el layout en un <style> a partir del hex guardado.
   ===================================================================== */

/* --- clinic: verde/teal, sereno ------------------------------------- */
html[data-skin="clinic"] {
    --primary: oklch(60% 0.12 175);
    --primary-foreground: #ffffff;
    --ring: oklch(60% 0.12 175 / 0.45);
    --accent: oklch(96% 0.02 175);
    --accent-foreground: oklch(30% 0.06 175);
}
html[data-skin="clinic"].dark {
    --primary: oklch(70% 0.12 175);
    --primary-foreground: oklch(20% 0.04 175);
    --ring: oklch(70% 0.12 175 / 0.45);
    --accent: oklch(26% 0.03 175);
    --accent-foreground: oklch(92% 0.03 175);
}

/* --- indigo: el de codexa ------------------------------------------- */
html[data-skin="indigo"] {
    --primary: #4f46e5;
    --primary-foreground: #ffffff;
    --ring: color-mix(in oklab, #4f46e5 45%, transparent);
    --accent: #eef2ff;
    --accent-foreground: #312e81;
}
html[data-skin="indigo"].dark {
    --primary: #818cf8;
    --primary-foreground: #1e1b4b;
    --ring: color-mix(in oklab, #818cf8 45%, transparent);
    --accent: #1e1b4b;
    --accent-foreground: #e0e7ff;
}

/* --- graphite: neutro, esquinas mas rectas -------------------------- */
html[data-skin="graphite"] {
    --primary: oklch(35% 0.01 260);
    --primary-foreground: #ffffff;
    --ring: oklch(35% 0.01 260 / 0.4);
    --accent: oklch(95% 0.005 260);
    --accent-foreground: oklch(25% 0.01 260);
    --radius: 0.375rem;
}
html[data-skin="graphite"].dark {
    --primary: oklch(85% 0.01 260);
    --primary-foreground: oklch(20% 0.01 260);
    --ring: oklch(85% 0.01 260 / 0.4);
    --accent: oklch(28% 0.01 260);
    --accent-foreground: oklch(95% 0.005 260);
    --radius: 0.375rem;
}

/* --- terracotta: teja, calido --------------------------------------- */
html[data-skin="terracotta"] {
    --primary: oklch(58% 0.15 40);
    --primary-foreground: #ffffff;
    --ring: oklch(58% 0.15 40 / 0.45);
    --accent: oklch(96% 0.025 50);
    --accent-foreground: oklch(32% 0.08 40);
}
html[data-skin="terracotta"].dark {
    --primary: oklch(70% 0.14 45);
    --primary-foreground: oklch(22% 0.06 40);
    --ring: oklch(70% 0.14 45 / 0.45);
    --accent: oklch(27% 0.04 40);
    --accent-foreground: oklch(93% 0.03 50);
}

/* --- El sidebar toma el color del skin ------------------------------
   Tokens propios (--sidebar-*), que bustasoft.css aplica al panel: fondo,
   texto, texto atenuado, borde, hover y entrada activa. Sin skin (o con
   "metronic" sin atributo) el sidebar es azul marino; en modo oscuro, el
   mismo tinte mas hundido. El skin "brand" los deriva del color de marca
   (Skins::brandStyle). Todos son "oscuros": el logo para fondo oscuro se
   activa con html[data-sidebar="dark"], que pone el layout. */
html:not([data-skin]), html[data-skin="metronic"] {
    --sidebar-bg: oklch(27% 0.06 262);
    --sidebar-fg: oklch(95% 0.01 262);
    --sidebar-muted: oklch(72% 0.03 262);
    --sidebar-border: oklch(calc(27% + 7%) 0.06 262);
    --sidebar-hover: oklch(100% 0 0 / 0.08);
    --sidebar-active-bg: oklch(100% 0 0 / 0.16);
    --sidebar-active-fg: #ffffff;
}
html:not([data-skin]), html[data-skin="metronic"].dark {
    --sidebar-bg: oklch(17% calc(0.06 * 0.7) 262);
    --sidebar-border: oklch(calc(17% + 7%) calc(0.06 * 0.7) 262);
}
html[data-skin="clinic"] {
    --sidebar-bg: oklch(28% 0.05 175);
    --sidebar-fg: oklch(95% 0.01 175);
    --sidebar-muted: oklch(72% 0.03 175);
    --sidebar-border: oklch(calc(28% + 7%) 0.05 175);
    --sidebar-hover: oklch(100% 0 0 / 0.08);
    --sidebar-active-bg: oklch(100% 0 0 / 0.16);
    --sidebar-active-fg: #ffffff;
}
html[data-skin="clinic"].dark {
    --sidebar-bg: oklch(17% calc(0.05 * 0.7) 175);
    --sidebar-border: oklch(calc(17% + 7%) calc(0.05 * 0.7) 175);
}
html[data-skin="indigo"] {
    --sidebar-bg: oklch(27% 0.09 280);
    --sidebar-fg: oklch(95% 0.01 280);
    --sidebar-muted: oklch(72% 0.03 280);
    --sidebar-border: oklch(calc(27% + 7%) 0.09 280);
    --sidebar-hover: oklch(100% 0 0 / 0.08);
    --sidebar-active-bg: oklch(100% 0 0 / 0.16);
    --sidebar-active-fg: #ffffff;
}
html[data-skin="indigo"].dark {
    --sidebar-bg: oklch(17% calc(0.09 * 0.7) 280);
    --sidebar-border: oklch(calc(17% + 7%) calc(0.09 * 0.7) 280);
}
html[data-skin="graphite"] {
    --sidebar-bg: oklch(22% 0.01 260);
    --sidebar-fg: oklch(95% 0.01 260);
    --sidebar-muted: oklch(72% 0.03 260);
    --sidebar-border: oklch(calc(22% + 7%) 0.01 260);
    --sidebar-hover: oklch(100% 0 0 / 0.08);
    --sidebar-active-bg: oklch(100% 0 0 / 0.16);
    --sidebar-active-fg: #ffffff;
}
html[data-skin="graphite"].dark {
    --sidebar-bg: oklch(14% calc(0.01 * 0.7) 260);
    --sidebar-border: oklch(calc(14% + 7%) calc(0.01 * 0.7) 260);
}
html[data-skin="terracotta"] {
    --sidebar-bg: oklch(30% 0.07 40);
    --sidebar-fg: oklch(95% 0.01 40);
    --sidebar-muted: oklch(72% 0.03 40);
    --sidebar-border: oklch(calc(30% + 7%) 0.07 40);
    --sidebar-hover: oklch(100% 0 0 / 0.08);
    --sidebar-active-bg: oklch(100% 0 0 / 0.16);
    --sidebar-active-fg: #ffffff;
}
html[data-skin="terracotta"].dark {
    --sidebar-bg: oklch(17% calc(0.07 * 0.7) 40);
    --sidebar-border: oklch(calc(17% + 7%) calc(0.07 * 0.7) 40);
}

/* --- Selector de skins (menu de usuario y pantalla Appearance) ------ */
.skin-swatch {
    width: 1.75rem; height: 1.75rem; border-radius: 9999px; border: 2px solid transparent;
    cursor: pointer; padding: 0; background: var(--swatch, #3b82f6); box-shadow: inset 0 0 0 2px var(--background);
}
.skin-swatch:hover { transform: scale(1.08); }
/* El swatch del color propio envuelve un <input type="color"> invisible: se ve como los demas y
   al pulsarlo se abre el selector del navegador. */
.skin-swatch-custom { position: relative; overflow: hidden; cursor: pointer; }
.skin-swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.skin-swatch.active { border-color: var(--foreground); }
.skin-swatch[data-skin="inherit"] {
    background: conic-gradient(from 0deg, #3b82f6, #14b8a6, #4f46e5, #6b7280, #c2410c, #3b82f6);
}