/* =========================================================
   ARCA ONE Automotora - Design System & Day/Night Palette
   productos/automotora/demo/Assets/css/app.css
   < 500 líneas
   ========================================================= */

:root {
    --brand-primary: #8bc53f;
    --brand-secondary: #1e293b;
    --brand-accent: #0ea5e9;

    /* Tema Noche (Dark Mode por defecto) */
    --theme-bg: #08090a;
    --theme-header-bg: rgba(18, 20, 23, 0.92);
    --theme-card-bg: #121417;
    --theme-card-subtle: #1a1d22;
    --theme-border: #262930;
    --theme-input-bg: #121417;
    --theme-text-title: #ffffff;
    --theme-text-body: #e2e8f0;
    --theme-text-muted: #9ca3af;
    --theme-pill-bg: #1a1d22;
    --theme-pill-text: #cbd5e1;
    --theme-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
    --brand-primary: #659a27;
    --brand-secondary: #0f172a;
    --brand-accent: #0284c7;

    /* Tema Día (Light Mode Armónico & Elegante) */
    --theme-bg: #f8fafc;
    --theme-header-bg: rgba(255, 255, 255, 0.95);
    --theme-card-bg: #ffffff;
    --theme-card-subtle: #f1f5f9;
    --theme-border: #e2e8f0;
    --theme-input-bg: #ffffff;
    --theme-text-title: #0f172a;
    --theme-text-body: #334155;
    --theme-text-muted: #64748b;
    --theme-pill-bg: #e2e8f0;
    --theme-pill-text: #334155;
    --theme-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

body {
    background-color: var(--theme-bg);
    color: var(--theme-text-body);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Poppins', sans-serif;
}

/* Clases de Componentes del Tema */
.theme-header {
    background-color: var(--theme-header-bg);
    border-color: var(--theme-border);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.theme-card {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-border) !important;
    box-shadow: var(--theme-shadow);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.theme-subtle {
    background-color: var(--theme-card-subtle) !important;
    border-color: var(--theme-border) !important;
}

.theme-input {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text-title) !important;
}

.theme-input:focus {
    border-color: var(--brand-primary) !important;
}

.theme-title {
    color: var(--theme-text-title) !important;
}

.theme-muted {
    color: var(--theme-text-muted) !important;
}

.theme-border {
    border-color: var(--theme-border) !important;
}

.theme-pill {
    background-color: var(--theme-pill-bg) !important;
    color: var(--theme-pill-text) !important;
    border-color: var(--theme-border) !important;
}

/* Header links en modo claro/oscuro */
[data-theme="light"] header nav a.text-white {
    color: #0f172a !important;
}

[data-theme="light"] header nav a.text-gray-300 {
    color: #475569 !important;
}

[data-theme="light"] header nav a.text-gray-400 {
    color: #64748b !important;
}

[data-theme="light"] header .text-white {
    color: #0f172a !important;
}

[data-theme="light"] header .text-gray-300,
[data-theme="light"] header .text-gray-400 {
    color: #64748b !important;
}

[data-theme="light"] header .bg-\[\#1a1d22\] {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

/* Footer en modo claro/oscuro */
[data-theme="light"] footer {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #64748b !important;
}

/* CRM Pipeline & Kanban Styling */
.kanban-scroll {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.kanban-scroll::-webkit-scrollbar {
    height: 8px;
}

.kanban-scroll::-webkit-scrollbar-track {
    background: rgba(100, 116, 139, 0.1);
    border-radius: 9999px;
}

.kanban-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 9999px;
}

.kanban-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.55);
}

.dark .kanban-scroll::-webkit-scrollbar-thumb,
[data-theme="dark"] .kanban-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}