:root {
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --accent: #f8fafc;
  --accent-foreground: #0f172a;
  --background: #ffffff;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #2563eb;
  --radius: 0.75rem;
  
  /* Colores inspirados en la app original pero modernizados */
  --app-yellow-light: #fefce8;
  --app-yellow-border: #fef08a;
  --app-blue-light: #eff6ff;
  --app-list-bg: #f8fafc;
}

.dark {
  --background: #020617;
  --foreground: #f8fafc;
  --card: #020617;
  --card-foreground: #f8fafc;
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  --secondary: #1e293b;
  --secondary-foreground: #f8fafc;
  --border: #1e293b;
  --input: #1e293b;
  --app-yellow-light: #161b22;
  --app-yellow-border: #30363d;
}

@layer base {
  body {
    @apply bg-background text-foreground antialiased;
  }
}

/* Clases de utilidad para el layout inspirado en la app original */
.app-container {
  @apply flex flex-col h-screen overflow-hidden;
}

.app-main {
  @apply flex flex-1 overflow-hidden;
}

.app-sidebar {
  @apply w-full md:w-64 border-r border-border bg-app-list-bg overflow-y-auto flex-shrink-0;
}

.app-content {
  @apply flex-1 overflow-y-auto bg-background p-4 md:p-8;
}

.app-card-yellow {
  @apply bg-app-yellow-light border border-app-yellow-border rounded-xl p-4 shadow-sm;
}

.app-grid-layout {
  @apply grid grid-cols-1 lg:grid-cols-2 gap-6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .app-sidebar {
    @apply hidden; /* Sidebar se manejará con un menú hamburguesa en móvil */
  }
  .app-sidebar.active {
    @apply block fixed inset-0 z-50 bg-background w-full;
  }
}