/* =============================================================================
   Oasys ERP - Sistema de Diseno
   Tokens de color, tipografia, bordes, y estilos base.
   Paleta 60/30/10: Moonless Night (#2D2D2D) / Cotton (#F4F3F1) / Electric Blue (#3171C6)
   ============================================================================= */

/* --- Light Mode (por defecto) --- */
:root {
  /* Colores base — Cotton como fondo dominante */
  --background: #F4F3F1;
  --foreground: #1C1C1E;

  /* Tarjetas */
  --card: #FFFFFF;
  --card-foreground: #1C1C1E;

  /* Popovers */
  --popover: #FFFFFF;
  --popover-foreground: #1C1C1E;

  /* Primario — Electric Blue (CTAs, botones, active states) */
  --primary: #3171C6;
  --primary-foreground: #FFFFFF;

  /* Secundario — gris calido */
  --secondary: #EAEAE8;
  --secondary-foreground: #1C1C1E;

  /* Muted */
  --muted: #EAEAE8;
  --muted-foreground: #78776F;

  /* Accent */
  --accent: #EAEAE8;
  --accent-foreground: #1C1C1E;

  /* Destructivo */
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;

  /* Bordes e inputs — borde calido */
  --border: #DCDBD8;
  --input: #DCDBD8;
  --ring: #3171C6;

  /* Sidebar — siempre oscuro */
  --sidebar: #1C1C1E;
  --sidebar-foreground: #F4F3F1;
  --sidebar-border: #2D2D2D;
  --sidebar-accent: #2D2D2D;
  --sidebar-accent-foreground: #F4F3F1;
  --sidebar-width: 250px;

  /* Graficos — Electric Blue como color principal */
  --chart-1: #3171C6;
  --chart-2: #2a9d90;
  --chart-3: #274754;
  --chart-4: #e9c46a;
  --chart-5: #f4a462;

  /* Colores semanticos (status) */
  --success: #22C55E;
  --success-foreground: #FFFFFF;
  --warning: #F59E0B;
  --warning-foreground: #FFFFFF;
  --info: #3171C6;
  --info-foreground: #FFFFFF;

  /* Radio de bordes */
  --radius: 0.5rem;

  /* Transiciones globales (Notion-style) */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Dark Mode — Moonless Night surfaces, Cotton text, Electric Blue accents --- */
.dark {
  --background: #141416;
  --foreground: #F4F3F1;

  --card: #1C1C1E;
  --card-foreground: #F4F3F1;

  --popover: #1C1C1E;
  --popover-foreground: #F4F3F1;

  --primary: #3171C6;
  --primary-foreground: #FFFFFF;

  --secondary: #2D2D2D;
  --secondary-foreground: #F4F3F1;

  --muted: #2D2D2D;
  --muted-foreground: #8E8E8A;

  --accent: #2D2D2D;
  --accent-foreground: #F4F3F1;

  --destructive: #DC2626;
  --destructive-foreground: #F4F3F1;

  --border: #2D2D2D;
  --input: #2D2D2D;
  --ring: #3171C6;

  --sidebar: #141416;
  --sidebar-foreground: #F4F3F1;
  --sidebar-border: #2D2D2D;
  --sidebar-accent: #1C1C1E;
  --sidebar-accent-foreground: #F4F3F1;

  --chart-1: #3171C6;
  --chart-2: #2eb88a;
  --chart-3: #e88c30;
  --chart-4: #af57db;
  --chart-5: #e23670;

  --success: #22C55E;
  --success-foreground: #F4F3F1;
  --warning: #F59E0B;
  --warning-foreground: #1C1C1E;
  --info: #3171C6;
  --info-foreground: #F4F3F1;
}

/* --- Sidebar permanentemente oscuro: colores directos para nav --- */
/* Override directo de color (mayor especificidad que Tailwind utilities) */
/* Light mode: sidebar oscuro necesita texto claro */
#app-sidebar nav p,
#app-sidebar nav button[data-nav-toggle] {
  color: #8A8984;
}
#app-sidebar nav button[data-nav-toggle]:hover {
  color: #C8C7C2;
}
#app-sidebar nav a:not(.nav-active) {
  color: #C8C7C2;
}
#app-sidebar nav a:not(.nav-active):hover {
  color: #F4F3F1;
}
/* Dark mode: restaurar colores oscuros normales */
.dark #app-sidebar nav p,
.dark #app-sidebar nav button[data-nav-toggle] {
  color: #666663;
}
.dark #app-sidebar nav button[data-nav-toggle]:hover {
  color: #8E8E8A;
}
.dark #app-sidebar nav a:not(.nav-active) {
  color: #8E8E8A;
}
.dark #app-sidebar nav a:not(.nav-active):hover {
  color: #F4F3F1;
}

/* --- Resets y estilos base --- */
*,
*::before,
*::after {
  border-color: var(--border);
}

body {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--foreground);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  letter-spacing: -0.011em;
}

/* Transicion suave global para cambio de tema (Notion-style) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- Scrollbar personalizado (sutil, estilo Notion) --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background-color: var(--muted-foreground);
  opacity: 0.3;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted-foreground);
  opacity: 0.5;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.dark * {
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* --- Inputs: select y date en dark mode --- */
select,
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color-scheme: light;
  background-color: var(--background);
}

.dark select,
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"] {
  color-scheme: dark;
  background-color: var(--card);
}

select option {
  background-color: var(--card);
  color: var(--foreground);
}

/* --- Checkbox y radio custom --- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

/* --- Focus visible global (accesibilidad) --- */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* --- Acciones de tabla: visibles en touch devices --- */
@media (hover: none) and (pointer: coarse) {
  .group .opacity-0.group-hover\:opacity-100 {
    opacity: 1 !important;
  }
}

/* --- Sidebar logo: sidebar siempre oscuro, logo siempre visible --- */
.sidebar-logo {
  filter: none;
}
.dark .sidebar-logo {
  filter: none;
}

/* --- Sidebar nav items: micro-interacciones estilo iOS --- */
#app-sidebar a,
#app-sidebar button {
  cursor: pointer;
}

#app-sidebar nav a {
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
              color 150ms cubic-bezier(0.2, 0, 0, 1),
              transform 120ms cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

#app-sidebar nav a:active {
  transform: scale(0.97);
}

/* Nav group headers: hover sutil */
#app-sidebar [data-nav-toggle] {
  transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
}

/* Active link: Electric Blue + texto blanco */
#app-sidebar nav a.nav-active {
  background-color: #3171C6 !important;
  color: #ffffff !important;
  font-weight: 500;
}

.dark #app-sidebar nav a.nav-active {
  background-color: #3171C6 !important;
  color: #ffffff !important;
}

#app-sidebar nav a.nav-active i {
  opacity: 1 !important;
}

/* --- prefers-reduced-motion: quitar animaciones --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Modales: ocultos por defecto (evita FOUC antes de DOMContentLoaded) --- */
[data-modal] {
  display: none;
}

/* --- Command Palette selected item --- */
.cmd-selected {
  background-color: var(--accent);
}

/* --- Input/Select: estilo premium (Take One) --- */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-radius: 0.5rem;
}

/* --- Table: hover de filas mas sutil --- */
table tbody tr {
  transition: background-color 100ms ease;
}

/* --- Badges/Pills premium --- */
.badge-primary {
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}

/* --- Empty states: iconos mas grandes y sutiles --- */
.empty-state-icon {
  opacity: 0.3;
}

/* =============================================================================
   PREMIUM GRADIENTS & SOFT UI (estilo Apple / Take One)
   ============================================================================= */

/* --- Fondo principal: degradado Cotton en light, profundidad en dark --- */
#app-main {
  background: linear-gradient(180deg, #F4F3F1 0%, #EAEAE8 100%);
  min-height: 100vh;
}

.dark #app-main {
  background: linear-gradient(180deg, #141416 0%, #1C1C1E 100%);
}

/* --- Sidebar: siempre oscuro con degradado sutil --- */
#app-sidebar {
  background: linear-gradient(180deg, #1C1C1E 0%, #171718 100%) !important;
}

.dark #app-sidebar {
  background: linear-gradient(180deg, #141416 0%, #1A1A1C 100%) !important;
}

/* --- Cards: sombra suave difusa en hover (estilo Apple) --- */
.card-soft {
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
              border-color 200ms ease;
}

.card-soft:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.08),
              0 2px 8px -4px rgba(0, 0, 0, 0.04);
  border-color: var(--border);
}

.dark .card-soft:hover {
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3),
              0 2px 8px -4px rgba(0, 0, 0, 0.2);
}

/* --- Card con degradado suave (reemplaza borde duro) --- */
.card-gradient {
  background: linear-gradient(145deg, #FFFFFF 0%, #F9F8F6 100%);
  border: 1px solid rgba(220, 219, 216, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
              0 2px 8px -2px rgba(0, 0, 0, 0.04),
              0 0 0 1px rgba(0, 0, 0, 0.02);
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
              border-color 200ms ease;
}

.card-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1),
              0 8px 24px -6px rgba(0, 0, 0, 0.08),
              0 0 0 1px rgba(0, 0, 0, 0.03);
  border-color: rgba(220, 219, 216, 0.7);
}

.dark .card-gradient {
  background: linear-gradient(145deg, #1C1C1E 0%, #222224 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
              0 2px 8px -2px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(255, 255, 255, 0.03);
}

.dark .card-gradient:hover {
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.35),
              0 8px 24px -6px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

/* --- Icon badge con degradado (reemplaza flat color/10) --- */
.icon-badge-blue {
  background: linear-gradient(135deg, #3171C620, #5B9BD515);
}
.icon-badge-amber {
  background: linear-gradient(135deg, #f59e0b20, #fbbf2415);
}
.icon-badge-emerald {
  background: linear-gradient(135deg, #10b98120, #34d39915);
}
.icon-badge-violet {
  background: linear-gradient(135deg, #8b5cf620, #a78bfa15);
}
.icon-badge-cyan {
  background: linear-gradient(135deg, #06b6d420, #22d3ee15);
}
.icon-badge-teal {
  background: linear-gradient(135deg, #14b8a620, #2dd4bf15);
}
.icon-badge-orange {
  background: linear-gradient(135deg, #f9731620, #fb923c15);
}
.icon-badge-green {
  background: linear-gradient(135deg, #22c55e20, #4ade8015);
}
.icon-badge-rose {
  background: linear-gradient(135deg, #f4363620, #fb717115);
}

/* --- Progress bars con degradado --- */
.progress-gradient {
  background: linear-gradient(90deg, #3171C6, #5B9BD5);
  border-radius: 9999px;
}

/* --- Topbar: glass mas pronunciado --- */
header.sticky {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* --- Sombra sutil global para bordes de tarjetas --- */
.shadow-soft {
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.05),
              0 1px 2px -1px rgba(0, 0, 0, 0.03);
}

.dark .shadow-soft {
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.2),
              0 1px 2px -1px rgba(0, 0, 0, 0.15);
}

/* --- Animaciones de entrada suaves (stagger) --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fadeInUp 0.4s cubic-bezier(0.2, 0, 0, 1) both; }
.animate-stagger-in { animation: fadeInUp 0.4s cubic-bezier(0.2, 0, 0, 1) both; }
.stagger-1 { animation-delay: 0.04s; }
.stagger-2 { animation-delay: 0.08s; }
.stagger-3 { animation-delay: 0.12s; }
.stagger-4 { animation-delay: 0.16s; }
.stagger-5 { animation-delay: 0.20s; }
.stagger-6 { animation-delay: 0.24s; }