/* Data 4 Admin Panel - Custom Styles */

/* Persistir Alpine.js state */
[x-cloak] { display: none !important; }

/* ===== Diseno Stitch (Geist + Material 3) ===== */

/* Fuente base (fallback si Tailwind no aplica font-sans) */
body { font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* Iconos Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.material-symbols-outlined.is-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Sombras suaves del diseno Stitch */
.soft-shadow  { box-shadow: 0px 4px 20px rgba(15, 23, 42, 0.05); }
.modal-shadow { box-shadow: 0px 10px 32px rgba(15, 23, 42, 0.10); }
.dark .soft-shadow  { box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.35); }
.dark .modal-shadow { box-shadow: 0px 10px 32px rgba(0, 0, 0, 0.45); }

/* Scrollbar fino (paneles internos) */
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--primary-200)); border-radius: 10px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--primary-800)); }

/* Variables de esquemas de color */
:root,
[data-scheme="blue"] {
  /* Blue Scheme (Default) */
  --primary-50: 239 246 255;
  --primary-100: 219 234 254;
  --primary-200: 191 219 254;
  --primary-300: 147 197 253;
  --primary-400: 96 165 250;
  --primary-500: 59 130 246;
  --primary-600: 37 99 235;
  --primary-700: 29 78 216;
  --primary-800: 30 64 175;
  --primary-900: 30 58 138;
}

/* Purple Scheme */
[data-scheme="purple"] {
  --primary-50: 250 245 255;
  --primary-100: 243 232 255;
  --primary-200: 233 213 255;
  --primary-300: 216 180 254;
  --primary-400: 192 132 252;
  --primary-500: 168 85 247;
  --primary-600: 147 51 234;
  --primary-700: 126 34 206;
  --primary-800: 107 33 168;
  --primary-900: 88 28 135;
}

/* Green Scheme */
[data-scheme="green"] {
  --primary-50: 240 253 244;
  --primary-100: 220 252 231;
  --primary-200: 187 247 208;
  --primary-300: 134 239 172;
  --primary-400: 74 222 128;
  --primary-500: 34 197 94;
  --primary-600: 22 163 74;
  --primary-700: 21 128 61;
  --primary-800: 22 101 52;
  --primary-900: 20 83 45;
}

/* Red Scheme */
[data-scheme="red"] {
  --primary-50: 254 242 242;
  --primary-100: 254 226 226;
  --primary-200: 254 202 202;
  --primary-300: 252 165 165;
  --primary-400: 248 113 113;
  --primary-500: 239 68 68;
  --primary-600: 220 38 38;
  --primary-700: 185 28 28;
  --primary-800: 153 27 27;
  --primary-900: 127 29 29;
}

/* Orange Scheme */
[data-scheme="orange"] {
  --primary-50: 255 247 237;
  --primary-100: 255 237 213;
  --primary-200: 254 215 170;
  --primary-300: 253 186 116;
  --primary-400: 251 146 60;
  --primary-500: 249 115 22;
  --primary-600: 234 88 12;
  --primary-700: 194 65 12;
  --primary-800: 154 52 18;
  --primary-900: 124 45 18;
}

/* Teal Scheme */
[data-scheme="teal"] {
  --primary-50: 240 253 250;
  --primary-100: 204 251 241;
  --primary-200: 153 246 228;
  --primary-300: 94 234 212;
  --primary-400: 45 212 191;
  --primary-500: 20 184 166;
  --primary-600: 13 148 136;
  --primary-700: 15 118 110;
  --primary-800: 17 94 89;
  --primary-900: 19 78 74;
}

/* Pink Scheme */
[data-scheme="pink"] {
  --primary-50: 253 242 248;
  --primary-100: 252 231 243;
  --primary-200: 251 207 232;
  --primary-300: 249 168 212;
  --primary-400: 244 114 182;
  --primary-500: 236 72 153;
  --primary-600: 219 39 119;
  --primary-700: 190 24 93;
  --primary-800: 157 23 77;
  --primary-900: 131 24 67;
}

/* Default/Indigo Scheme */
[data-scheme="default"] {
  --primary-50: 238 242 255;
  --primary-100: 224 231 255;
  --primary-200: 199 210 254;
  --primary-300: 165 180 252;
  --primary-400: 129 140 248;
  --primary-500: 99 102 241;
  --primary-600: 79 70 229;
  --primary-700: 67 56 202;
  --primary-800: 55 48 163;
  --primary-900: 49 46 129;
}

/* Cyan Scheme */
[data-scheme="cyan"] {
  --primary-50: 236 254 255;
  --primary-100: 207 250 254;
  --primary-200: 165 243 252;
  --primary-300: 103 232 249;
  --primary-400: 34 211 238;
  --primary-500: 6 182 212;
  --primary-600: 8 145 178;
  --primary-700: 14 116 144;
  --primary-800: 21 94 117;
  --primary-900: 22 78 99;
}

/* Amber Scheme */
[data-scheme="amber"] {
  --primary-50: 255 251 235;
  --primary-100: 254 243 199;
  --primary-200: 253 230 138;
  --primary-300: 252 211 77;
  --primary-400: 251 191 36;
  --primary-500: 245 158 11;
  --primary-600: 217 119 6;
  --primary-700: 180 83 9;
  --primary-800: 146 64 14;
  --primary-900: 120 53 15;
}

/* Smooth transitions */
* {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(243 244 246);
}

.dark ::-webkit-scrollbar-track {
  background: rgb(31 41 55);
}

::-webkit-scrollbar-thumb {
  background: rgb(209 213 219);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: rgb(75 85 99);
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(156 163 175);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgb(107 114 128);
}

/* Animaciones personalizadas */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideIn {
  animation: slideIn 0.3s ease-out;
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out;
}

.animate-slideDown {
  animation: slideDown 0.3s ease-out;
}

/* Estilos para tablas responsivas */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
  }
}

/* Utility classes */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass-effect {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}

/* Sidebar collapse enhancements */
aside {
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

aside nav a,
aside nav button {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   Tema INTERMEDIO (sidebar oscuro + contenido claro).
   El <aside> lleva la clase `dark` aunque <html> no la tenga, para que las
   utilidades dark: de sus hijos se activen. Pero `dark:` de Tailwind compila
   como DESCENDIENTE (`.dark .algo`), asi que el propio aside no se pinta con
   `dark:bg-gray-800` y quedaba texto claro sobre fondo blanco. De ahi esta
   regla: darle su fondo y su borde explicitos.
   En el tema oscuro completo pinta el mismo color, asi que no molesta.
--------------------------------------------------------------------------- */
aside.dark {
  background-color: #1f2937;  /* gray-800 */
  border-color: #374151;      /* gray-700 */
}