/**
 * SAGI Nano – Skins / Temas visuales
 * ====================================
 * Selector raíz: [data-theme="<nombre>"] aplicado en <html>
 *
 * Skins disponibles:
 *   default  – Tailwind claro estándar (sin overrides)
 *   dark     – Modo oscuro (activa class="dark" en <html>)
 *   win11    – Fluent Design System (Windows 11)
 *   macos    – Human Interface Guidelines (macOS Ventura/Sequoia)
 *
 * Los skins se cargan DESPUÉS de Tailwind CDN, permitiendo que estos
 * estilos sobrescriban los utilitarios de Tailwind con mayor especificidad.
 */

/* ================================================================
   SKIN: dark
   El modo oscuro se maneja principalmente a través de las utilidades
   dark: de Tailwind (activadas con class="dark" en <html>).
   Este bloque agrega ajustes finos que Tailwind no cubre.
   ================================================================ */

[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f172a;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* ================================================================
   SKIN: win11 – Fluent Design System
   Características:
   - Tipografía: Segoe UI Variable
   - Bordes redondeados: 4–8px (más cuadrado que el default)
   - Acrílico: backdrop-filter blur en navbar y sidebar
   - Acento: Windows 11 Blue (#0067C0)
   - Surface: blanco puro con sombra sutil de profundidad
   - Body: #f3f3f3 cálido
   ================================================================ */

[data-theme="win11"] {
  --win-font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --win-accent: #0067C0;
  --win-accent-hover: #005BA8;
  --win-accent-light: #cce4f7;
  --win-body: #f3f3f3;
  --win-surface: #ffffff;
  --win-surface-alt: #f9f9f9;
  --win-border: rgba(0, 0, 0, 0.08);
  --win-border-solid: #e5e5e5;
  --win-text: #1a1a1a;
  --win-text-secondary: #5a5a5a;
  --win-text-muted: #8a8a8a;
  --win-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --win-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Base */
[data-theme="win11"] body {
  font-family: var(--win-font) !important;
  background-color: var(--win-body) !important;
  font-size: 14px;
  letter-spacing: 0;
}

/* Navbar – acrylic (frosted glass) */
[data-theme="win11"] header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(30px) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.05) !important;
  border-bottom: 1px solid var(--win-border-solid) !important;
  box-shadow: none !important;
}
[data-theme="win11"] header .bg-slate-900 {
  background: var(--win-accent) !important;
}

/* Sidebar – acrylic suave */
[data-theme="win11"] aside {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-right: 1px solid var(--win-border-solid) !important;
  border-radius: 0 !important;
}

/* Cards y superficies blancas */
[data-theme="win11"] .bg-white {
  background-color: var(--win-surface) !important;
  border-color: var(--win-border-solid) !important;
}
[data-theme="win11"] .bg-slate-50 {
  background-color: var(--win-surface-alt) !important;
}

/* Rounded corners: Win11 usa 4px–8px, no 16px */
[data-theme="win11"] .rounded-2xl { border-radius: 8px !important; }
[data-theme="win11"] .rounded-xl  { border-radius: 8px !important; }
[data-theme="win11"] .rounded-lg  { border-radius: 4px !important; }
[data-theme="win11"] .rounded-md  { border-radius: 4px !important; }
[data-theme="win11"] .rounded     { border-radius: 4px !important; }

/* Sombras más profundas y cuadradas */
[data-theme="win11"] .shadow-sm  { box-shadow: var(--win-shadow-sm) !important; }
[data-theme="win11"] .shadow-md  { box-shadow: var(--win-shadow-md) !important; }
[data-theme="win11"] .shadow     { box-shadow: var(--win-shadow-sm) !important; }

/* Hover sombra en tarjetas */
[data-theme="win11"] .hover\:shadow-md:hover { box-shadow: var(--win-shadow-md) !important; }

/* Tipografía */
[data-theme="win11"] .text-slate-900 { color: var(--win-text) !important; }
[data-theme="win11"] .text-slate-800 { color: #1f1f1f !important; }
[data-theme="win11"] .text-slate-700 { color: #3a3a3a !important; }
[data-theme="win11"] .text-slate-600 { color: var(--win-text-secondary) !important; }
[data-theme="win11"] .text-slate-500 { color: var(--win-text-muted) !important; }
[data-theme="win11"] .text-slate-400 { color: #9a9a9a !important; }

/* Botón primario con acento Win11 */
[data-theme="win11"] .bg-slate-900 {
  background-color: var(--win-accent) !important;
  border-radius: 4px !important;
}
[data-theme="win11"] .bg-slate-900:hover,
[data-theme="win11"] .hover\:bg-slate-800:hover {
  background-color: var(--win-accent-hover) !important;
}

/* Links de navegación activos */
[data-theme="win11"] .bg-indigo-600,
[data-theme="win11"] .bg-indigo-700 {
  background-color: var(--win-accent) !important;
}
[data-theme="win11"] .hover\:bg-indigo-700:hover {
  background-color: var(--win-accent-hover) !important;
}

/* Icon accent pills */
[data-theme="win11"] .bg-indigo-100 { background-color: var(--win-accent-light) !important; }
[data-theme="win11"] .text-indigo-600 { color: var(--win-accent) !important; }

/* Inputs */
[data-theme="win11"] input,
[data-theme="win11"] select,
[data-theme="win11"] textarea {
  font-family: var(--win-font) !important;
  font-size: 14px !important;
  border-radius: 4px !important;
}

/* Footer */
[data-theme="win11"] footer {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top-color: var(--win-border-solid) !important;
}

/* Scrollbar – estilo Windows 11 */
[data-theme="win11"] ::-webkit-scrollbar       { width: 8px; height: 8px; }
[data-theme="win11"] ::-webkit-scrollbar-track  { background: transparent; }
[data-theme="win11"] ::-webkit-scrollbar-thumb  { background: #c0c0c0; border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
[data-theme="win11"] ::-webkit-scrollbar-thumb:hover { background: #a0a0a0; border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }

/* Modal / diálogos */
[data-theme="win11"] #modal > *,
[data-theme="win11"] [role="dialog"] {
  border-radius: 8px !important;
  box-shadow: var(--win-shadow-md) !important;
}

/* ================================================================
   SKIN: macos – Human Interface Guidelines (macOS Ventura/Sequoia)
   Características:
   - Tipografía: -apple-system / SF Pro Text
   - Bordes redondeados: 10–12px (naturales de macOS)
   - Vibrancy: backdrop-filter en sidebar y navbar
   - Acento: macOS Blue (#007AFF)
   - Surface: blanco puro con sombra gossamer
   - Body: #f5f5f7 (Apple gray)
   - Density: compacta (fuente 13px)
   ================================================================ */

[data-theme="macos"] {
  --mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --mac-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --mac-accent: #007AFF;
  --mac-accent-hover: #0066DB;
  --mac-accent-light: #e5f0ff;
  --mac-body: #f5f5f7;
  --mac-surface: #ffffff;
  --mac-surface-toolbar: rgba(236, 236, 236, 0.85);
  --mac-surface-sidebar: rgba(242, 242, 247, 0.85);
  --mac-border: rgba(0, 0, 0, 0.08);
  --mac-border-solid: rgba(0, 0, 0, 0.1);
  --mac-text: #1d1d1f;
  --mac-text-secondary: #3a3a3c;
  --mac-text-muted: #86868b;
  --mac-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --mac-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
}

/* Base */
[data-theme="macos"] body {
  font-family: var(--mac-font) !important;
  background-color: var(--mac-body) !important;
  font-size: 13px !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Navbar – macOS toolbar vibrancy */
[data-theme="macos"] header {
  background: var(--mac-surface-toolbar) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  border-bottom: 1px solid var(--mac-border-solid) !important;
  box-shadow: none !important;
  min-height: 44px;
}
[data-theme="macos"] header .bg-slate-900 {
  background: var(--mac-accent) !important;
  border-radius: 6px !important;
}

/* Sidebar – macOS Finder sidebar vibrancy */
[data-theme="macos"] aside {
  background: var(--mac-surface-sidebar) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  border-right: 1px solid var(--mac-border-solid) !important;
  border-radius: 0 !important;
}

/* Cards y superficies */
[data-theme="macos"] .bg-white {
  background-color: var(--mac-surface) !important;
  border-color: var(--mac-border-solid) !important;
}
[data-theme="macos"] .bg-slate-50 {
  background-color: #f2f2f7 !important;
}

/* Rounded corners: macOS usa 10–12px */
[data-theme="macos"] .rounded-2xl { border-radius: 12px !important; }
[data-theme="macos"] .rounded-xl  { border-radius: 10px !important; }
[data-theme="macos"] .rounded-lg  { border-radius: 8px !important; }
[data-theme="macos"] .rounded-md  { border-radius: 6px !important; }
[data-theme="macos"] .rounded     { border-radius: 6px !important; }

/* Sombras tipo macOS (gossamer) */
[data-theme="macos"] .shadow-sm  { box-shadow: var(--mac-shadow-sm) !important; }
[data-theme="macos"] .shadow-md  { box-shadow: var(--mac-shadow-md) !important; }
[data-theme="macos"] .shadow     { box-shadow: var(--mac-shadow-sm) !important; }
[data-theme="macos"] .hover\:shadow-md:hover { box-shadow: var(--mac-shadow-md) !important; }

/* Tipografía */
[data-theme="macos"] .text-slate-900 { color: var(--mac-text) !important; }
[data-theme="macos"] .text-slate-800 { color: #1c1c1e !important; }
[data-theme="macos"] .text-slate-700 { color: var(--mac-text-secondary) !important; }
[data-theme="macos"] .text-slate-600 { color: #48484a !important; }
[data-theme="macos"] .text-slate-500 { color: var(--mac-text-muted) !important; }
[data-theme="macos"] .text-slate-400 { color: #aeaeb2 !important; }
[data-theme="macos"] .font-mono      { font-family: var(--mac-font-mono) !important; }

/* Botón primario con acento macOS */
[data-theme="macos"] .bg-slate-900 {
  background-color: var(--mac-accent) !important;
  border-radius: 8px !important;
}
[data-theme="macos"] .bg-slate-900:hover,
[data-theme="macos"] .hover\:bg-slate-800:hover {
  background-color: var(--mac-accent-hover) !important;
}

/* Links y acciones con acento macOS */
[data-theme="macos"] .bg-indigo-600,
[data-theme="macos"] .bg-indigo-700 {
  background-color: var(--mac-accent) !important;
  border-radius: 8px !important;
}
[data-theme="macos"] .hover\:bg-indigo-700:hover {
  background-color: var(--mac-accent-hover) !important;
}

/* Icon accent pills */
[data-theme="macos"] .bg-indigo-100 { background-color: var(--mac-accent-light) !important; }
[data-theme="macos"] .text-indigo-600 { color: var(--mac-accent) !important; }

/* Links */
[data-theme="macos"] a.text-indigo-600,
[data-theme="macos"] a.text-blue-600 {
  color: var(--mac-accent) !important;
}

/* Inputs – macOS field style */
[data-theme="macos"] input,
[data-theme="macos"] select,
[data-theme="macos"] textarea {
  font-family: var(--mac-font) !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
}
[data-theme="macos"] input:focus,
[data-theme="macos"] select:focus,
[data-theme="macos"] textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3) !important;
  border-color: var(--mac-accent) !important;
}

/* Tabla */
[data-theme="macos"] table {
  font-size: 13px !important;
}
[data-theme="macos"] th {
  font-size: 11px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mac-text-muted) !important;
  font-weight: 600;
}

/* Footer */
[data-theme="macos"] footer {
  background: var(--mac-surface-toolbar) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top-color: var(--mac-border-solid) !important;
  font-size: 12px !important;
}

/* Scrollbar – macOS overlay style (fino) */
[data-theme="macos"] ::-webkit-scrollbar       { width: 6px; height: 6px; }
[data-theme="macos"] ::-webkit-scrollbar-track  { background: transparent; }
[data-theme="macos"] ::-webkit-scrollbar-thumb  { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }
[data-theme="macos"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.30); }

/* Modal / diálogos */
[data-theme="macos"] #modal > *,
[data-theme="macos"] [role="dialog"] {
  border-radius: 12px !important;
  box-shadow: var(--mac-shadow-md) !important;
}

/* Alerts / badges */
[data-theme="macos"] .rounded-full { border-radius: 9999px !important; }