/* ============================================
   TEXTILES DEL NORTE - ERP STYLES
   iOS Liquid Glass · White + Champagne Gold
   ============================================ */

/* ============================================
   CSS VARIABLES (Design Tokens)
   ============================================ */
:root {
    /* Motion (define first — referenced by transition tokens) */
    --ease-glass: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 400ms;
    --dur-aurora: 32s;

    --transition-fast: 150ms var(--ease-glass);
    --transition-base: 250ms var(--ease-glass);
    --transition-slow: 400ms var(--ease-glass);

    /* Canvas */
    --bg-base: #f4f4f2;
    --bg-pure: #ffffff;

    /* Aurora blooms (behind the glass) */
    --aurora-1: rgba(234, 217, 168, 0.55);
    --aurora-2: rgba(245, 236, 214, 0.50);
    --aurora-3: rgba(230, 206, 142, 0.42);
    --aurora-4: rgba(244, 238, 225, 0.50);

    /* Glass material */
    --glass-fill: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52));
    --glass-fill-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.70));
    --glass-border: rgba(255, 255, 255, 0.60);
    --glass-blur: blur(24px) saturate(180%) brightness(1.06);
    --glass-blur-sm: blur(14px) saturate(170%) brightness(1.05);

    /* LQ glass material — warm-tuned */
    --c-glass: #c0beb8;
    --c-light: #ffffff;
    --c-dark: #4f3d12;
    /* neutral gamma for surfaces (menu, title bar, containers) —
       gold stays only on controls */
    --c-glass-n: #c0beb8;
    --c-dark-n: #3b3a35;
    /* elegant sage green for the Kai glass button */
    --kai-green: #5f8a6a;
    --glass-reflex-light: 1;
    --glass-reflex-dark: 0.9;
    --saturation: 150%;
    --lq-ease: cubic-bezier(1, 0, 0.4, 1);

    /* The signature lq reflex stack — containers.
       Flat slab: crisp rim hairlines only, no inner volume washes */
    --lq-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 0.5px 1px 0px -0.5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 62%), transparent),
        inset -0.5px -0.5px 0px 0px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 55%), transparent),
        inset -0.5px 1px 0px -0.5px color-mix(in srgb, var(--c-dark-n) calc(var(--glass-reflex-dark) * 14%), transparent),
        inset 0.5px -1px 0px -0.5px color-mix(in srgb, var(--c-dark-n) calc(var(--glass-reflex-dark) * 8%), transparent),
        /* 3D float: contact + mid + long ambient — the slab hovers */
        0px 2px 6px -2px color-mix(in srgb, var(--c-dark-n) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 10px 22px -8px color-mix(in srgb, var(--c-dark-n) calc(var(--glass-reflex-dark) * 12%), transparent),
        0px 28px 60px -20px color-mix(in srgb, var(--c-dark-n) calc(var(--glass-reflex-dark) * 16%), transparent);

    /* The lq pill stack — controls & the sliding selector */
    --lq-shadow-pill:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        /* float: subtle key + soft lift */
        0px 1px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 6%), transparent),
        0px 8px 20px -8px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);

    /* The raised lq pill — convex floating control (light on top,
       shade settling at the inner-bottom, real lift off the surface) */
    --lq-shadow-pill-raised:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset 0px -3px 3px -3px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        /* float: key + mid + long ambient */
        0px 1px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 14px -6px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 14%), transparent),
        0px 12px 28px -10px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent);

    /* The lq chip stack — small icon tiles resting on top of containers */
    --lq-shadow-chip:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 8%), transparent),
        inset 1px 1.5px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 50%), transparent),
        inset -1px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 42%), transparent),
        inset 0px -3px 1px -3px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 32%), transparent),
        inset 0px 2px 3px -2px color-mix(in srgb, var(--c-dark-n) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset 0px -2px 1px -2px color-mix(in srgb, var(--c-dark-n) calc(var(--glass-reflex-dark) * 8%), transparent),
        /* float: hairline key + soft lift off the card */
        0px 1px 2px -1px color-mix(in srgb, var(--c-dark-n) calc(var(--glass-reflex-dark) * 8%), transparent),
        0px 4px 10px -4px color-mix(in srgb, var(--c-dark-n) calc(var(--glass-reflex-dark) * 8%), transparent);

    /* Champagne gold accent */
    --gold: #8c8a82;
    --gold-soft: #b7b5ad;
    --gold-deep: #6e6c64;
    --gold-tint: rgba(122, 120, 112, 0.12);
    --gold-tint-strong: rgba(122, 120, 112, 0.18);
    --gold-grad: linear-gradient(135deg, #b7b5ad 0%, #8c8a82 55%, #6e6c64 100%);

    /* Inks & adaptive surface fills (flip with the theme) */
    --gold-ink: #3a3933;
    --switch-moon: #4a4843;
    --fill-1: rgba(255, 255, 255, 0.55);  /* inputs / quiet surfaces */
    --fill-2: rgba(255, 255, 255, 0.65);  /* avatars / stronger surfaces */
    --fill-3: rgba(255, 255, 255, 0.45);  /* list rows */

    /* Pop-up material: dense frosted glass — 80% glass tint + strong blur,
       so the content below is heavily muted but the panel still reads as glass */
    --popup-fill: color-mix(in srgb, var(--c-glass-n) 80%, transparent);
    --popup-blur: blur(30px) saturate(180%);

    /* Chart colors (read by charts.js at render time) */
    --chart-tick: #8f8b82;
    --chart-grid: rgba(40, 38, 30, 0.07);
    --chart-legend: #5f5c55;

    /* Backward-compatible accent aliases */
    --accent-primary: var(--gold);
    --accent-primary-light: var(--gold-soft);
    --accent-primary-dark: var(--gold-deep);
    --accent-secondary: #b8894e;
    /* Tertiary (status) — elegant muted tones; white + gold stay dominant */
    --accent-success: #5f8a6a;
    --accent-warning: #c5803a;
    --accent-danger: #b9574a;
    --accent-info: #5e7d9a;

    /* Text (warm near-black) */
    /* light mode reads dark, almost black */
    --text-primary: #1d1c1a;
    --text-secondary: #5f5c55;
    --text-muted: #8f8b82;
    --text-inverse: #ffffff;

    /* Surfaces (mapped onto glass / warm tints) */
    --bg-primary: var(--bg-base);
    --bg-secondary: rgba(255, 255, 255, 0.60);
    --bg-tertiary: rgba(40, 34, 20, 0.04);
    --bg-card: var(--glass-fill);
    --bg-hover: rgba(122, 120, 112, 0.10);

    /* Hairlines */
    --border-color: rgba(40, 34, 20, 0.10);
    --border-light: rgba(40, 34, 20, 0.06);

    /* Gradients */
    --gradient-success: linear-gradient(135deg, #74a085 0%, #5f8a6a 100%);

    /* Shadows (warm, layered, low-opacity) */
    --shadow-sm: 0 1px 2px rgba(60, 50, 20, 0.05);
    --shadow-md: 0 12px 30px -14px rgba(60, 50, 20, 0.10), 0 2px 6px rgba(60, 50, 20, 0.04);
    --shadow-lg: 0 22px 48px -18px rgba(60, 50, 20, 0.14), 0 4px 12px rgba(60, 50, 20, 0.05);
    --shadow-edge-inset: inset 0 1px 1px rgba(255, 255, 255, 0.75), inset 0 -1px 1px rgba(180, 160, 110, 0.12);
    --shadow-gold-glow: 0 8px 24px -8px rgba(122, 120, 112, 0.45);
    --shadow-glow: var(--shadow-gold-glow);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border Radius (softer / squircle) */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;

    /* Sizes */
    --sidebar-width: 264px;
    --sidebar-collapsed: 76px;
    --header-height: 68px;
    --agent-panel-width: 400px;

    /* Z-Index */
    --z-aurora: -1;
    --z-sidebar: 100;
    --z-header: 90;
    --z-agent: 110;
    --z-modal: 200;
    --z-toast: 300;
}

/* ============================================
   DARK MODE — the Apple way: highlights dim
   (reflex-light ×0.35), shadows deepen & grow
   (reflex-dark ×2). Same design, adapted light.
   ============================================ */
:root[data-theme="dark"] {
    /* the adaptation engine (whites kept extra quiet in the dark) */
    --glass-reflex-light: 0.15;
    --glass-reflex-dark: 2;
    --c-glass: #6e6d67;
    --c-glass-n: #6e6d67;
    --kai-green: #6fa07e;
    --saturation: 160%;

    /* canvas — warm near-black */
    --bg-base: #161615;
    --bg-pure: #211d14;

    /* gold brightens slightly as ink/accent on dark */
    --gold: #b9b5aa;
    --gold-soft: #cfcabd;
    --gold-deep: #c4c0b5;
    --gold-tint: rgba(196, 192, 182, 0.14);
    --gold-tint-strong: rgba(196, 192, 182, 0.22);
    --gold-ink: #d8d4ca;
    --switch-moon: #d8d4ca;

    /* text — dark mode reads gray, almost white */
    --text-primary: #f1efe8;
    --text-secondary: #b9b5aa;
    --text-muted: #8c887d;
    --text-inverse: #1c1b17;

    /* surfaces & fills — low-alpha white over dark */
    --bg-secondary: rgba(255, 253, 247, 0.06);
    --bg-tertiary: rgba(255, 250, 235, 0.05);
    --bg-hover: rgba(196, 192, 182, 0.12);
    --glass-fill: linear-gradient(135deg, rgba(255, 253, 247, 0.10), rgba(255, 253, 247, 0.05));
    --glass-fill-strong: linear-gradient(135deg, rgba(255, 253, 247, 0.14), rgba(255, 253, 247, 0.08));
    --glass-border: rgba(255, 250, 235, 0.16);
    --fill-1: rgba(255, 253, 247, 0.08);
    --fill-2: rgba(255, 253, 247, 0.11);
    --fill-3: rgba(255, 253, 247, 0.06);

    /* hairlines */
    --border-color: rgba(255, 250, 235, 0.12);
    --border-light: rgba(255, 250, 235, 0.07);

    /* shadows work harder in the dark (deeper, larger, black-based) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 14px 34px -14px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0 26px 56px -18px rgba(0, 0, 0, 0.50), 0 6px 16px rgba(0, 0, 0, 0.28);
    --shadow-edge-inset: inset 0 1px 1px rgba(255, 255, 255, 0.16), inset 0 -1px 1px rgba(0, 0, 0, 0.35);
    --shadow-gold-glow: 0 8px 24px -8px rgba(120, 118, 110, 0.35);

    /* tertiary status — one step brighter for contrast on dark */
    --accent-success: #74a085;
    --accent-warning: #d59a55;
    --accent-danger: #c87468;
    --accent-info: #7e98b3;

    /* charts */
    --chart-tick: #8c887d;
    --chart-grid: rgba(255, 252, 240, 0.08);
    --chart-legend: #b9b5aa;
}

/* dark badge inks (alpha tints beneath stay shared) */
:root[data-theme="dark"] .badge-success { color: #9cc4ab; }
:root[data-theme="dark"] .badge-warning { color: #e5b984; }
:root[data-theme="dark"] .badge-danger { color: #e0a195; }
:root[data-theme="dark"] .badge-info { color: #a9bfd4; }
:root[data-theme="dark"] .badge-neutral { color: var(--gold-soft); }

/* ============================================
   RESET & BASE
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Liquid-glass gold wallpaper — the elegant light the glass refracts */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--z-aurora);
    background: url('../img/bg-gold.svg?v=4') center center / cover no-repeat;
    pointer-events: none;
}

:root[data-theme="dark"] body::before {
    background-image: url('../img/bg-gold-dark.svg?v=2');
}

/* smooth Apple-style mode flip (the lq body transition) */
body,
.sidebar,
.main-header,
.card,
.alerts-panel,
.toast,
.agent-view-container {
    transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
        color 400ms cubic-bezier(1, 0, 0.4, 1),
        box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}

@keyframes auroraDrift {
    from {
        transform: translate3d(-2%, -1%, 0) scale(1.05) rotate(0deg);
    }

    to {
        transform: translate3d(2%, 2%, 0) scale(1.12) rotate(2deg);
    }
}

h1, h2, h3, h4 {
    letter-spacing: -0.02em;
    font-weight: 600;
}

a {
    color: var(--gold-deep);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--gold);
}

img {
    max-width: 100%;
    height: auto;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: 1rem;
}

code {
    background: var(--bg-tertiary);
    padding: 0.2em 0.45em;
    border-radius: var(--radius-sm);
    font-size: 0.875em;
    color: var(--gold-deep);
}

.hidden {
    display: none !important;
}

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-tint-strong);
    border-radius: var(--radius-sm);
}

/* ============================================
   GLASS UTILITY + FALLBACK
   ============================================ */
.glass {
    position: relative;
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-edge-inset), var(--shadow-md);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .glass,
    .card,
    .kpi-card,
    .sidebar,
    .main-header,
    .alerts-panel,
    .login-container,
    .toast,
    .agent-view-container,
    .loading-overlay {
        background: rgba(255, 255, 255, 0.94) !important;
    }

    /* dark-mode opaque fallback */
    :root[data-theme="dark"] .glass,
    :root[data-theme="dark"] .card,
    :root[data-theme="dark"] .kpi-card,
    :root[data-theme="dark"] .sidebar,
    :root[data-theme="dark"] .main-header,
    :root[data-theme="dark"] .alerts-panel,
    :root[data-theme="dark"] .login-container,
    :root[data-theme="dark"] .toast,
    :root[data-theme="dark"] .agent-view-container,
    :root[data-theme="dark"] .loading-overlay {
        background: rgba(30, 27, 19, 0.96) !important;
    }
}

/* ============================================
   LIQUID GLASS — interactivity (class added by liquid-glass.js)
   ============================================ */

/* gel press — compresses on pointerdown, springs back on release */
.lg-press {
    transform: scale(0.97) !important;
    transition: transform var(--dur-fast) var(--ease-spring) !important;
}

@media (prefers-reduced-motion: reduce) {
    .lg-press { transform: none !important; }
}

/* ============================================
   UTILITIES
   ============================================ */
.text-success { color: var(--accent-success); }
.text-warning { color: var(--accent-warning); }
.text-danger { color: var(--accent-danger); }
.text-info { color: var(--accent-info); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

.bg-success { background-color: var(--accent-success); }
.bg-warning { background-color: var(--accent-warning); }
.bg-danger { background-color: var(--accent-danger); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }

/* ============================================
   BUTTONS — Liquid Glass (Apple-style)
   Prominent (tinted) glass for primary actions, clear glass for the rest.
   Soft squircle radius (not full pills).
   ============================================ */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.7rem 1.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base);
    white-space: nowrap;
    overflow: hidden;
}

/* Primary — the lq glass pill (selector material, gold-leaning) */
.btn-primary,
.btn-send {
    background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    color: var(--gold-ink);
    border: none;
    box-shadow: var(--lq-shadow-pill);
    transition: background-color 400ms var(--lq-ease), box-shadow 400ms var(--lq-ease), transform var(--transition-fast);
}

.btn-primary::before,
.btn-send::before {
    content: none;
}

.btn-primary:hover,
.btn-send:hover {
    background-color: color-mix(in srgb, var(--c-glass) 48%, transparent);
}

.btn-primary:active,
.btn-send:active {
    transform: scale(0.97);
}

/* Secondary — the lq glass pill, lighter mix */
.btn-secondary {
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    color: var(--text-primary);
    border: none;
    box-shadow: var(--lq-shadow-pill);
    transition: background-color 400ms var(--lq-ease), transform var(--transition-fast);
}

.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--c-glass) 22%, transparent);
}

.btn-block {
    width: 100%;
}

/* Icon buttons — a clear glass squircle that materializes on hover */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.btn-icon:hover {
    background-color: color-mix(in srgb, var(--c-glass) 22%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow: var(--lq-shadow-pill);
    color: var(--gold-deep);
}

.btn-icon:active {
    transform: scale(0.92);
}

.btn-icon-sm {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.btn-icon-sm:hover {
    color: var(--gold-deep);
    background: var(--gold-tint);
}

/* Kai button — elegant green glass: a sage tint carrying the lq reflexes & float */
.btn-kai {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    color: #214d37;
    background-color: color-mix(in srgb, var(--kai-green) 40%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow: var(--lq-shadow-pill-raised);
    transition: background-color 400ms var(--lq-ease), box-shadow 400ms var(--lq-ease), transform var(--transition-fast);
}

.btn-kai i {
    width: 22px;
    text-align: center;
    font-size: 1rem;
}

.btn-kai:hover {
    background-color: color-mix(in srgb, var(--kai-green) 52%, transparent);
    transform: translateY(-1px);
}

.btn-kai:active {
    transform: scale(0.97);
}

/* dark mode: light green ink so the label/brain stay legible on the green glass */
:root[data-theme="dark"] .btn-kai {
    color: #c6e6d1;
}

/* ============================================
   FORMS
   ============================================ */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.input-icon {
    position: relative;
}

.input-icon i,
.input-icon .field-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.input-icon .field-icon {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.input-icon:focus-within .field-icon {
    color: var(--gold);
}

/* Higher specificity so this wins over the base `input[type=...] { padding: ... 1rem }`
   shorthand (equal specificity, declared later) — otherwise the text sits under the icon. */
.form-group .input-icon input {
    padding-left: 2.85rem;
}

.input-icon:has(input:not(:placeholder-shown)) i,
.input-icon:has(input:not(:placeholder-shown)) .field-icon {
    display: none;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--fill-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 5%), transparent);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--fill-2);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 4%), transparent), 0 0 0 3px var(--gold-tint);
}

input::placeholder {
    color: var(--text-muted);
}

.error-message {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(185, 87, 74, 0.08);
    border: 1px solid rgba(185, 87, 74, 0.4);
    border-radius: var(--radius-md);
    color: var(--accent-danger);
    font-size: 0.875rem;
    text-align: center;
    animation: fadeUp var(--dur-base) var(--ease-out);
}

/* ============================================
   LOGIN SCREEN
   ============================================ */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    /* Richer champagne light directly behind the card so the glass has
       something to refract and the transparency reads clearly. */
    background:
        radial-gradient(55% 45% at 32% 28%, rgba(196, 192, 182, 0.50), transparent 60%),
        radial-gradient(50% 45% at 74% 78%, rgba(122, 120, 112, 0.38), transparent 62%);
}

.login-container {
    position: relative;
    width: 100%;
    max-width: 430px;
    /* Transparent liquid glass — only a little opacity (reflex-adaptive) */
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 40%), transparent),
            color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 14%), transparent));
    -webkit-backdrop-filter: blur(40px) saturate(185%) brightness(1.08);
    backdrop-filter: blur(40px) saturate(185%) brightness(1.08);
    border: 1px solid color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 50%), transparent);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    box-shadow:
        inset 0 1px 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset 0 -1px 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 35%), transparent),
        0 30px 60px -22px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 30%), transparent),
        0 10px 26px -14px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 18%), transparent);
    overflow: hidden;
    animation: loginIn var(--dur-slow) var(--ease-glass) both;
}

/* Diagonal specular sheen + top light pool (reflex-adaptive) */
.login-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% -15%, color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 55%), transparent), transparent 48%),
        linear-gradient(135deg, color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 55%), transparent), transparent 42%);
}

/* Looking-glass rim — bright bevelled edge that catches the light */
.login-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 45%), transparent),
        inset 0 0 22px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 22%), transparent),
        inset 0 -12px 26px -12px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent);
}

@keyframes loginIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.login-header,
.login-form,
.login-footer {
    position: relative;
    z-index: 1;
}

.login-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.login-header .logo {
    width: 84px;
    height: 84px;
    margin: 0 auto var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: logoPop var(--dur-slow) var(--ease-glass) 0.1s both;
}

.login-header .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Circular gold glow follows the coin's alpha, not a square box */
    filter: drop-shadow(0 8px 18px rgba(122, 120, 112, 0.45));
}

@keyframes logoPop {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.login-header h1 {
    font-size: 1.55rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.login-header p {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.login-footer {
    margin-top: var(--spacing-xl);
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.login-footer code {
    background: var(--gold-tint);
}

/* ============================================
   LOGIN SUBMIT — "clear golden glass" button
   A translucent gold glass slab: frosted body, bright bevelled
   top edge, upper gloss reflection, inner base-shadow for thickness,
   and a warm gold cast shadow (light passing through gold glass).
   ============================================ */
.login-form .btn-primary {
    position: relative;
    /* almost the same radius as the text fields (--radius-md = .75rem) */
    border-radius: 0.7rem;
    color: var(--gold-ink);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: none;
    /* flat, even faint-gold glass — a single tint, no gradient/gloss/dome
       that would imply a curved surface */
    background: rgba(124, 122, 114, 0.13);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    backdrop-filter: blur(4px) saturate(140%);
    border: 1px solid rgba(122, 120, 112, 0.32);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 7%), transparent);
    overflow: hidden;
    transition: none;
}

/* flat material — no gloss band, no dome highlights */
.login-form .btn-primary::before,
.login-form .btn-primary::after {
    content: none;
}

/* keep the label/arrow above the glass highlights */
.login-form .btn-primary span,
.login-form .btn-primary i {
    position: relative;
    z-index: 1;
}

/* hover/press: a touch more tint only — flat, no motion, no depth */
.login-form .btn-primary:hover {
    background: rgba(124, 122, 114, 0.19);
    border-color: rgba(122, 120, 112, 0.42);
}

.login-form .btn-primary:active {
    background: rgba(168, 134, 47, 0.24);
}

/* ============================================
   APP LAYOUT
   ============================================ */
.app {
    display: flex;
    min-height: 100vh;
}

/* ============================================
   SIDEBAR
   ============================================ */
/* Floating rounded lq glass rail (vertical) */
.sidebar {
    position: fixed;
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: var(--sidebar-width);
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, var(--c-glass-n) 12%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    border: none;
    box-shadow: var(--lq-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: var(--z-sidebar);
    transition: width var(--transition-base), transform var(--transition-base);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

.sidebar.collapsed .logo-text,
.sidebar.collapsed .sidebar-nav span,
.sidebar.collapsed .user-details {
    /* fully remove from flow so the icon/toggle can truly center
       (width:0 + flex:1/gap left them taking space and shoving content right) */
    display: none;
}

/* Collapsed: only the toggle stays in the header — center it so it can't
   overflow the narrow rail and overlap the dashboard. */
.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.sidebar.collapsed .logo-small {
    display: none;
}

.sidebar.collapsed .sidebar-toggle {
    margin-left: 0;
}

.sidebar.collapsed .sidebar-nav a {
    justify-content: center;
}

/* stack the footer so the avatar + logout don't squish or spill */
.sidebar.collapsed .sidebar-footer {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.sidebar.collapsed .user-info {
    justify-content: center;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}

.logo-small {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-small img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 9px rgba(122, 120, 112, 0.4));
}

.logo-text {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--transition-base);
}

.sidebar-toggle {
    margin-left: auto;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-toggle:hover {
    background: var(--gold-tint);
    color: var(--gold-deep);
}

.sidebar-nav {
    flex: 1;
    position: relative;
    padding: var(--spacing-md) var(--spacing-sm);
    overflow-y: auto;
}

.sidebar-nav ul {
    list-style: none;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* the lq sliding glass selector (the .switcher::after pill, vertical) */
.nav-indicator {
    position: absolute;
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    top: 0;
    height: 44px;
    z-index: 0;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
    box-shadow: var(--lq-shadow-pill);
    opacity: 0;
    translate: 0 0;
    pointer-events: none;
    transition: translate 400ms var(--lq-ease),
        height 400ms var(--lq-ease),
        opacity var(--dur-base) var(--ease-out);
}

/* squash-and-stretch as it travels (vertical scaleToggle) */
.nav-indicator.lq-squash {
    animation: lqSquashY 440ms ease;
}

@keyframes lqSquashY {
    0% { scale: 1 1; }
    50% { scale: 1 1.12; }
    100% { scale: 1 1; }
}

/* Floating lq glass capsule that glides over the hovered menu item */
.nav-hover {
    position: absolute;
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    top: 0;
    height: 44px;
    z-index: 0;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--c-glass) 14%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        0 2px 5px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    opacity: 0;
    translate: 0 0;
    pointer-events: none;
    transition: translate var(--dur-base) var(--ease-out),
        height var(--dur-base) var(--ease-out),
        opacity 0.18s var(--ease-out);
}

.nav-hover.show {
    opacity: 1;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 0.7rem 0.9rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-nav a:hover {
    /* fill is now the floating .nav-hover glass capsule */
    color: var(--text-primary);
}

.sidebar-nav a.active {
    /* the pill is now the morphing .nav-indicator behind the list */
    background: transparent;
    color: var(--gold-deep);
    font-weight: 600;
}

.sidebar-nav a.active i {
    color: var(--gold-deep);
}

.sidebar-nav a i {
    width: 22px;
    text-align: center;
    font-size: 1rem;
    transition: transform var(--transition-fast);
}

.sidebar-nav a:hover i {
    transform: scale(1.08);
}

/* each nav icon tinted to match the real thing it depicts
   (placed after .active so the colour holds even when selected) */
.sidebar-nav a i.fa-chart-line { color: #5e83a8; }     /* Dashboard — analytics blue */
.sidebar-nav a i.fa-brain { color: #cf8a99; }          /* Kai — brain pink */
.sidebar-nav a i.fa-cogs { color: #8b8f96; }           /* Producción — steel gray */
.sidebar-nav a i.fa-shopping-cart { color: #d0894c; }  /* Ventas — retail orange */
.sidebar-nav a i.fa-boxes { color: #b6895b; }          /* Inventario — cardboard brown */
.sidebar-nav a i.fa-users { color: #5f9e97; }          /* RRHH — teal */
.sidebar-nav a i.fa-dollar-sign { color: #4f9e6a; }    /* Finanzas — money green */
.sidebar-nav a i.fa-truck { color: #c25b50; }          /* Logística — delivery red */

.sidebar-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
}

.user-avatar {
    width: 38px;
    height: 38px;
    background: var(--fill-2);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px var(--gold-soft), var(--shadow-sm);
}

.user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: opacity var(--transition-base);
}

.user-details span:first-child {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: capitalize;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    flex: 1;
    /* floating rail: 12px inset + rail width + 12px gap */
    margin-left: calc(var(--sidebar-width) + 24px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-base);
}

.sidebar.collapsed+.main-content {
    margin-left: calc(var(--sidebar-collapsed) + 24px);
}

/* Floating rounded lq glass bar — matches the sidebar rail */
.main-header {
    position: sticky;
    top: 12px;
    margin: 12px 12px 0 0;
    height: var(--header-height);
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, var(--c-glass-n) 12%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    border: none;
    box-shadow: var(--lq-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-xl);
    z-index: var(--z-header);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.header-left h1 {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* ============================================
   THEME SWITCH — lq menu switcher (light/dark)
   lq glass capsule + sliding
   glass thumb with squash-and-stretch
   ============================================ */
.theme-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 4px;
    margin: 0;
    border: none;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow: var(--lq-shadow-pill);
}

.theme-switch__legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(100%);
    overflow: hidden;
    white-space: nowrap;
}

.theme-switch__option {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 100%;
    border-radius: calc(var(--radius-md) - 4px);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 160ms var(--ease-out);
}

/* sun = white, moon = black */
.theme-switch__option:has(input[value="light"]) {
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 1px 2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 14%), transparent);
}

.theme-switch__option:has(input[value="dark"]) {
    color: #14120f;
    text-shadow: none;
}

.theme-switch__option:has(input:checked) {
    cursor: auto;
}

.theme-switch__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(100%);
    white-space: nowrap;
}

/* the sliding glass thumb (the lq selector) */
.theme-switch::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    width: 36px;
    height: calc(100% - 8px);
    z-index: 0;
    border-radius: calc(var(--radius-md) - 4px);
    background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
    box-shadow: var(--lq-shadow-pill);
    translate: 0 0;
    transition: translate 400ms var(--lq-ease);
}

.theme-switch:has(input[value="light"]:checked)::after {
    translate: 0 0;
    transform-origin: right;
    animation: lqSquashX 440ms ease;
}

.theme-switch:has(input[value="dark"]:checked)::after {
    translate: 38px 0;
    transform-origin: left;
    animation: lqSquashX2 440ms ease;
}

/* two identical squashes with distinct names so the animation
   retriggers on every direction change */
@keyframes lqSquashX {
    0% { scale: 1 1; }
    50% { scale: 1.15 1; }
    100% { scale: 1 1; }
}

@keyframes lqSquashX2 {
    0% { scale: 1 1; }
    50% { scale: 1.15 1; }
    100% { scale: 1 1; }
}

/* Date — same lq selector pill as the menu/Kai, with near-white letters */
.header-date {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: rgba(255, 253, 247, 0.95);
    text-shadow: 0 1px 2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    border: none;
    box-shadow: var(--lq-shadow-pill);
    border-radius: var(--radius-md);
}

/* the date pill disappears on narrower screens (below 900px) */
@media (max-width: 899px) {
    .header-date {
        display: none;
    }
}

.header-date i {
    color: rgba(255, 253, 247, 0.9);
}

/* two-tone calendar: red header, white body */
.header-date .date-cal {
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
}

.content-wrapper {
    flex: 1;
    padding: var(--spacing-xl);
    overflow-y: auto;
}

.view-container {
    max-width: 1600px;
    margin: 0 auto;
}

/* quick fade-out of the leaving section (no white overlay flash) */
.view-container.view-leaving {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}

/* quick fade/rise-in of the new section */
.view-container.view-enter {
    animation: viewEnter var(--dur-base) var(--ease-out);
}

@keyframes viewEnter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.loading-placeholder {
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    animation: softPulse 1.4s ease-in-out infinite;
}

@keyframes softPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ============================================
   CARDS
   ============================================ */
.card {
    position: relative;
    background-color: color-mix(in srgb, var(--c-glass-n) 12%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: var(--lq-shadow);
    overflow: hidden;
    animation: glassReveal var(--dur-slow) var(--ease-out) both;
}

.card>* {
    position: relative;
}

@keyframes glassReveal {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.card-title i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--gold-deep);
    border-radius: 9px;
    background-color: color-mix(in srgb, var(--c-glass-n) 12%, transparent);
    -webkit-backdrop-filter: blur(6px) saturate(var(--saturation));
    backdrop-filter: blur(6px) saturate(var(--saturation));
    box-shadow: var(--lq-shadow-chip);
    transition: background-color 400ms var(--lq-ease),
        box-shadow 400ms var(--lq-ease);
}

.card-body {
    padding: var(--spacing-lg);
}

.card-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-light);
    background: var(--bg-tertiary);
}

/* ============================================
   KPI CARDS
   ============================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.kpi-card {
    position: relative;
    background-color: color-mix(in srgb, var(--c-glass-n) 12%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    border: none;
    box-shadow: var(--lq-shadow);
    overflow: hidden;
    will-change: transform;
    transition: transform var(--transition-base),
        background-color 400ms cubic-bezier(1, 0, 0.4, 1),
        box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
    animation: glassReveal var(--dur-slow) var(--ease-out) both;
}

.kpi-card:hover {
    transform: translateY(-3px);
}

.kpi-card>* {
    position: relative;
    z-index: 1;
}

.kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.kpi-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.kpi-icon {
    width: 42px;
    height: 42px;
    background-color: color-mix(in srgb, var(--c-glass-n) 14%, transparent);
    -webkit-backdrop-filter: blur(6px) saturate(var(--saturation));
    backdrop-filter: blur(6px) saturate(var(--saturation));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    box-shadow: var(--lq-shadow-chip);
    transition: background-color 400ms var(--lq-ease),
        box-shadow 400ms var(--lq-ease);
}

.kpi-card.success .kpi-icon { color: var(--accent-success); background-color: color-mix(in srgb, var(--accent-success) 6%, color-mix(in srgb, var(--c-glass-n) 9%, transparent)); }
.kpi-card.warning .kpi-icon { color: var(--accent-warning); background-color: color-mix(in srgb, var(--accent-warning) 6%, color-mix(in srgb, var(--c-glass-n) 9%, transparent)); }
.kpi-card.danger .kpi-icon { color: var(--accent-danger); background-color: color-mix(in srgb, var(--accent-danger) 6%, color-mix(in srgb, var(--c-glass-n) 9%, transparent)); }
.kpi-card.info .kpi-icon { color: var(--accent-info); background-color: color-mix(in srgb, var(--accent-info) 6%, color-mix(in srgb, var(--c-glass-n) 9%, transparent)); }

/* Dashboard icon accents — specific glyphs get their own hue */
.kpi-icon i.fa-industry { color: #b06a47; }       /* Producción — terracotta (darker tone) */
.card-title i.fa-trophy { color: #9c7d2c; }       /* Top Clientes cup — darker gold */
.card-title i.fa-star { color: #d8c285; }         /* Top Productos — light gold */
.card-title i.fa-chart-area { color: #2f4d72; }   /* Tendencia de Ventas — dark blue */
.card-title i.fa-chart-bar { color: #4d3a6e; }    /* Flujo de Caja — dark purple */

/* dark mode: same hues, lifted so they stay legible on the dark chips */
:root[data-theme="dark"] .kpi-icon i.fa-industry { color: #cf8a6b; }
:root[data-theme="dark"] .card-title i.fa-trophy { color: #c2a14d; }
:root[data-theme="dark"] .card-title i.fa-star { color: #e2cd92; }
:root[data-theme="dark"] .card-title i.fa-chart-area { color: #88a4c4; }
:root[data-theme="dark"] .card-title i.fa-chart-bar { color: #a594c9; }

/* ── System-wide icon palette ───────────────────────────────────────────
   every KPI / card-title glyph tinted to match what it depicts, one shared
   colour per glyph so the whole app stays in line (mid-tones read on both
   the light and dark chips). The .kpi-card prefix outranks the status tints. */
/* production & tools */
.kpi-card .kpi-icon i.fa-ruler { color: #c2954f; }          /* wood ruler */
.kpi-card .kpi-icon i.fa-cogs,
.card-title i.fa-cog { color: #8b8f96; }                     /* steel gears */
.kpi-card .kpi-icon i.fa-wrench,
.card-title i.fa-tools { color: #6f8694; }                  /* steel tools */
/* money & finance (green) */
.kpi-card .kpi-icon i.fa-dollar-sign,
.kpi-card .kpi-icon i.fa-money-bill-wave,
.kpi-card .kpi-icon i.fa-funnel-dollar,
.card-title i.fa-file-invoice-dollar { color: #4f9e6a; }
.kpi-card .kpi-icon i.fa-balance-scale { color: #c2a14d; }  /* scales — gold */
/* analytics */
.kpi-card .kpi-icon i.fa-chart-line,
.card-title i.fa-chart-line { color: #5e83a8; }             /* blue */
.card-title i.fa-chart-pie { color: #4f9e8f; }              /* teal */
/* status / checks */
.kpi-card .kpi-icon i.fa-check-circle,
.kpi-card .kpi-icon i.fa-check-double,
.kpi-card .kpi-icon i.fa-user-check { color: #5f9e6a; }     /* green */
.kpi-card .kpi-icon i.fa-exclamation-triangle,
.kpi-card .kpi-icon i.fa-exclamation-circle { color: #cf963f; } /* amber */
.kpi-card .kpi-icon i.fa-bullseye,
.kpi-card .kpi-icon i.fa-user-times { color: #c25b50; }     /* red */
.kpi-card .kpi-icon i.fa-clock { color: #6f88a0; }          /* slate */
/* inventory: raw materials (tan) vs finished boxes (darker brown) */
.kpi-card .kpi-icon i.fa-cubes,
.card-title i.fa-cubes { color: #b6895b; }
.kpi-card .kpi-icon i.fa-box,
.card-title i.fa-box { color: #9c6e42; }
/* people (teal) */
.kpi-card .kpi-icon i.fa-users,
.kpi-card .kpi-icon i.fa-user-plus,
.card-title i.fa-users { color: #5f9e97; }
/* logistics */
.kpi-card .kpi-icon i.fa-truck { color: #c46a26; }          /* delivery truck — dark orange */
.kpi-card .kpi-icon i.fa-shipping-fast { color: #c25b50; }  /* express — red */
/* retail (orange) */
.card-title i.fa-shopping-cart { color: #d0894c; }
/* warehouse glyph (blue) — the Inventario KPI uses a two-tone .wh-icon SVG instead */
.kpi-card .kpi-icon i.fa-warehouse,
.card-title i.fa-warehouse,
.card-title i.fa-building,
.card-title i.fa-sitemap { color: #6f8694; }

/* two-tone warehouse: blue building, gray roll-up door */
.kpi-icon .wh-icon {
    width: 21px;
    height: 21px;
    display: block;
}
.card-title i.fa-clipboard-list { color: #7e8896; }
.card-title i.fa-clock { color: #6f88a0; }

.kpi-value {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.kpi-change {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-muted);
}

.kpi-change.positive { color: var(--accent-success); }
.kpi-change.negative { color: var(--accent-danger); }
/* KPI meta lines tinted to match each card's icon */
.kpi-change.tone-info { color: var(--accent-info); }
.stat-value.tone-good { color: var(--accent-success); }
.kpi-change.tone-prod { color: #b06a47; }
:root[data-theme="dark"] .kpi-change.tone-prod { color: #cf8a6b; }
.kpi-change.tone-ruler { color: #c2954f; }
.kpi-change.tone-mp { color: #b6895b; }
.kpi-change.tone-pt { color: #9c6e42; }
:root[data-theme="dark"] .kpi-change.tone-pt { color: #c08a52; }

/* Reveal stagger */
.kpi-grid .kpi-card:nth-child(1), .grid-2 .card:nth-child(1) { animation-delay: 0.02s; }
.kpi-grid .kpi-card:nth-child(2), .grid-2 .card:nth-child(2) { animation-delay: 0.07s; }
.kpi-grid .kpi-card:nth-child(3) { animation-delay: 0.12s; }
.kpi-grid .kpi-card:nth-child(4) { animation-delay: 0.17s; }
.charts-grid .card:nth-child(2) { animation-delay: 0.08s; }

/* ============================================
   CHARTS GRID
   ============================================ */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.chart-container {
    position: relative;
    height: 300px;
}

/* a chart card whose graph stretches to fill the whole card height
   (matches the height of a taller sibling card in the same grid row) */
.card.card-fill {
    display: flex;
    flex-direction: column;
}

.card.card-fill .card-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.card.card-fill .chart-container {
    flex: 1;
    height: auto;
    min-height: 240px;
}

/* ============================================
   DATA TABLES
   ============================================ */
.table-wrapper {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    /* separate (spacing 0) so the header band can carry a radius */
    border-collapse: separate;
    border-spacing: 0;
}

.data-table th,
.data-table td {
    padding: 0.9rem var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.data-table th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--bg-tertiary);
}

/* elegant rounded ends on the header band */
.data-table th:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.data-table th:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.data-table td {
    font-size: 0.875rem;
}

.data-table tbody tr {
    transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--gold-tint);
}

.data-table .number {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Status Badges — soft tinted glass pills */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: capitalize;
    border: 1px solid transparent;
}

.badge-success { background: rgba(95, 138, 106, 0.12); color: #456b54; border-color: rgba(95, 138, 106, 0.25); }
.badge-warning { background: rgba(197, 128, 58, 0.14); color: #875524; border-color: rgba(197, 128, 58, 0.28); }
.badge-danger { background: rgba(185, 87, 74, 0.12); color: #8a3f34; border-color: rgba(185, 87, 74, 0.25); }
.badge-info { background: rgba(94, 125, 154, 0.12); color: #43607c; border-color: rgba(94, 125, 154, 0.25); }
.badge-neutral { background: var(--gold-tint); color: var(--gold-deep); border-color: rgba(122, 120, 112, 0.25); }

/* ============================================
   AGENT PANEL (legacy floating panel)
   ============================================ */
.agent-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: var(--agent-panel-width);
    height: 100vh;
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-left: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    z-index: var(--z-agent);
    transform: translateX(100%);
    transition: transform var(--transition-base);
}

.agent-panel.visible {
    transform: translateX(0);
}

.agent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-tertiary);
}

.agent-suggestions {
    padding: 0 0 var(--spacing-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.suggestions-row {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.suggestions-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.suggestions-toggle {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.suggestions-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    align-self: center;
}

.suggestion-chip {
    padding: 0.4rem 0.9rem;
    background-color: color-mix(in srgb, var(--c-glass-n) 16%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    border: none;
    box-shadow: var(--lq-shadow-pill);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 320ms var(--lq-ease), color var(--transition-fast), transform var(--transition-fast);
    animation: chipIn 360ms var(--lq-ease) both;
}

.suggestion-chip:hover {
    background-color: color-mix(in srgb, var(--kai-green) 26%, transparent);
    color: color-mix(in srgb, var(--text-primary) 75%, var(--kai-green));
    transform: translateY(-1px);
}

@keyframes chipIn {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

.agent-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    scroll-behavior: smooth;
}

/* ---- avatars: Kai (green brain) vs user (neutral glass) -------------- */
.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.82rem;
}

/* Kai's avatar = the same green-glass badge as the conversation header */
.agent-message.assistant .message-avatar {
    color: #214d37;
    background-color: color-mix(in srgb, var(--kai-green) 40%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow: var(--lq-shadow-pill-raised);
}

:root[data-theme="dark"] .agent-message.assistant .message-avatar { color: #c6e6d1; }

.agent-message.user .message-avatar {
    color: var(--text-secondary);
    background-color: color-mix(in srgb, var(--c-glass-n) 26%, transparent);
    -webkit-backdrop-filter: blur(6px) saturate(var(--saturation));
    backdrop-filter: blur(6px) saturate(var(--saturation));
    box-shadow: var(--lq-shadow-chip);
}

/* ---- bubbles -------------------------------------------------------- */
.message-name {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.message-text {
    font-size: 0.9rem;
    line-height: 1.55;
}

.message-text p { margin-bottom: var(--spacing-sm); }
.message-text p:last-child { margin-bottom: 0; }

.message-text ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

.message-text li { margin-bottom: var(--spacing-xs); }

.message-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.45rem;
}

.message-actions:empty { display: none; }

.message-actions .btn-icon {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
}

.message-actions .csv-download-btn {
    width: auto;
    padding: 0 0.7rem;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--accent-success);
}

.message-actions .stop-btn { color: var(--accent-danger); }

/* ---- typing indicator (Apple three-dot, in a Kai bubble) ------------- */
.agent-message.assistant.typing .message-content {
    padding: 0.95rem 1.05rem;
    border-radius: 0.8rem;
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 12px;
}

.typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-muted) 80%, var(--kai-green));
    animation: typingDot 1.3s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* btn-send inherits the prominent glass look above; just its shape/size here */
.btn-send {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.voice-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: var(--gold-tint);
    border-radius: var(--radius-md);
    color: var(--gold-deep);
    font-size: 0.875rem;
}

.voice-waves {
    display: flex;
    gap: 3px;
    height: 20px;
    align-items: center;
}

.voice-waves span {
    width: 3px;
    height: 100%;
    background: var(--gold);
    border-radius: 2px;
    animation: wave 1s ease-in-out infinite;
}

.voice-waves span:nth-child(2) { animation-delay: 0.1s; }
.voice-waves span:nth-child(3) { animation-delay: 0.2s; }
.voice-waves span:nth-child(4) { animation-delay: 0.3s; }
.voice-waves span:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
    0%, 100% { height: 4px; }
    50% { height: 20px; }
}

/* ============================================
   LOADING & TOAST
   ============================================ */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg-base) 60%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--gold-tint-strong);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.toast-container {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: var(--z-toast);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--popup-fill);
    -webkit-backdrop-filter: var(--popup-blur);
    backdrop-filter: var(--popup-blur);
    border-radius: var(--radius-md);
    border: none;
    box-shadow: var(--lq-shadow-pill);
    color: var(--text-primary);
    animation: slideIn var(--dur-base) var(--ease-glass);
}

.toast.success { border-left: 4px solid var(--accent-success); }
.toast.error { border-left: 4px solid var(--accent-danger); }
.toast.warning { border-left: 4px solid var(--accent-warning); }
.toast.info { border-left: 4px solid var(--gold); }

@keyframes slideIn {
    from {
        transform: translateX(100%) scale(0.96);
        opacity: 0;
    }

    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* ============================================
   MOBILE STYLES
   ============================================ */
.mobile-only {
    display: none;
}

@media (max-width: 1024px) {
    .agent-panel {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .mobile-only {
        display: flex;
    }

    .sidebar {
        transform: translateX(calc(-100% - 16px));
        width: 280px;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: none;
    }

    .main-content {
        margin-left: 0;
    }

    .content-wrapper {
        padding: var(--spacing-md);
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .charts-grid {
        grid-template-columns: 1fr;
    }

    .chart-container {
        height: 250px;
    }

    .main-header {
        padding: 0 var(--spacing-md);
        margin-left: 12px;
    }

    .btn-kai span {
        display: none;
    }

    .agent-panel {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .login-container {
        padding: var(--spacing-lg);
    }

    .kpi-value {
        font-size: 1.55rem;
    }
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(122, 120, 112, 0.3);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(122, 120, 112, 0.5);
    background-clip: padding-box;
}

/* ============================================
   SPECIFIC VIEW STYLES
   ============================================ */
.stats-row {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.progress-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar .fill {
    height: 100%;
    background: var(--gold-grad);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.progress-bar.success .fill {
    background: var(--gradient-success);
}

.list-group {
    display: flex;
    flex-direction: column;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
    transition: background var(--transition-fast);
}

.list-item:last-child {
    border-bottom: none;
}

.list-item:hover {
    background: var(--gold-tint);
}

.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-muted);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    color: var(--gold-soft);
    opacity: 0.7;
}

/* "all clear" check states read in an elegant green */
.empty-state i.fa-check,
.empty-state i.fa-check-circle {
    color: var(--accent-success);
    opacity: 0.85;
}

.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-title i {
    color: var(--gold);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

/* Suggestions Loader */
.suggestions-loader {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.suggestions-loader .dot {
    width: 8px;
    height: 8px;
    background-color: var(--gold);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.suggestions-loader .dot:nth-child(1) { animation-delay: -0.32s; }
.suggestions-loader .dot:nth-child(2) { animation-delay: -0.16s; }

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(calc(-100% - 16px));
        width: var(--sidebar-width);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar.collapsed {
        width: var(--sidebar-width);
    }

    .main-content {
        margin-left: 0 !important;
    }

    .header-left .mobile-only {
        display: inline-flex;
    }

    .agent-view-container {
        height: calc(100vh - 120px) !important;
    }

    .agent-header-main {
        padding: 0.75rem;
    }

    .agent-header-main h2 {
        font-size: 1.25rem;
    }

    .agent-header-main p {
        display: none;
    }

    .agent-footer-main {
        padding: 0.5rem;
    }

    .agent-form {
        padding: 0.25rem;
    }

    .chart-container {
        height: 250px;
    }

    .data-table th,
    .data-table td {
        padding: 0.5rem 0.4rem;
        font-size: 0.8rem;
    }

    .data-table th:nth-child(n+4),
    .data-table td:nth-child(n+4) {
        display: none;
    }
}

/* ============================================
   AGENT CHAT MESSAGES (used by agent.js)
   ============================================ */
.agent-message {
    display: flex;
    gap: 0.55rem;
    align-items: flex-end;
    max-width: 85%;
    word-wrap: break-word;
    animation: msgIn 0.42s cubic-bezier(0.22, 0.9, 0.3, 1.04) both;
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

/* the bubble */
.message-content {
    position: relative;
    padding: 0.62rem 0.9rem;
    border-radius: 1.2rem;
    font-size: 0.9rem;
    line-height: 1.55;
    box-shadow: var(--lq-shadow-pill);
}

.agent-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
    margin-left: auto;
}

.agent-message.user .message-content {
    background-color: color-mix(in srgb, var(--kai-green) 30%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    color: color-mix(in srgb, var(--text-primary) 82%, var(--kai-green));
    border-bottom-right-radius: 0.45rem;
}

.agent-message.user .message-name { display: none; }

.agent-message.assistant {
    margin-right: auto;
    max-width: 90%;
}

.agent-message.assistant .message-content {
    background-color: color-mix(in srgb, var(--c-glass-n) 20%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    color: var(--text-primary);
    border-bottom-left-radius: 0.45rem;
}

.agent-message pre {
    background: var(--bg-tertiary);
    padding: 0.6rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
}

.agent-message code {
    white-space: pre-wrap;
    word-break: break-word;
}

.agent-message strong {
    color: color-mix(in srgb, var(--text-primary) 65%, var(--kai-green));
    font-weight: 700;
}

.agent-message ul {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.agent-message li {
    margin-bottom: 0.25rem;
}

/* Chart inside chat */
/* chart inside a Kai bubble — sits on a soft glass panel like the app's cards */
.chat-chart-title {
    margin-top: 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.chat-chart-container {
    position: relative;
    height: 320px;
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.85rem;
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, var(--c-glass-n) 10%, transparent);
    box-shadow: var(--lq-shadow-chip);
}

.chat-chart-title + .chat-chart-container { margin-top: 0.5rem; }

@media (max-width: 768px) {
    .agent-message {
        max-width: 92% !important;
    }

    .chat-chart-container {
        height: 250px;
    }
}

.agent-message .speak-btn,
.agent-message #stop-tts-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
    transition: color var(--transition-fast);
}

.agent-message .speak-btn:hover {
    color: var(--gold-deep);
}

.agent-message #stop-tts-btn:hover {
    color: var(--accent-danger);
}

.active-audio {
    color: var(--gold) !important;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================
   ALERTS PANEL
   ============================================ */
.alerts-wrapper {
    position: relative;
}

.alerts-btn {
    position: relative;
}

/* the bell is the one gold accent kept in the chrome */
.alerts-btn i {
    color: #c2a14d;
}

.alerts-btn:hover i {
    color: #b08f3a;
}

.alerts-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: #c2a14d;
    color: #fffdf6;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent);
    animation: badgePulse 2.4s var(--ease-out) infinite;
}

.alerts-badge.badge-critico {
    background: var(--accent-danger);
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), 0 0 0 0 rgba(194, 161, 77, 0.4); }
    50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), 0 0 0 6px rgba(194, 161, 77, 0); }
}

.alerts-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 350px;
    background-color: var(--popup-fill);
    -webkit-backdrop-filter: var(--popup-blur);
    backdrop-filter: var(--popup-blur);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--lq-shadow);
    z-index: var(--z-modal);
    overflow: hidden;
    transform-origin: top right;
}

.alerts-panel:not(.hidden) {
    animation: popIn var(--dur-base) var(--ease-glass);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.alerts-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-light);
}

.alerts-panel-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alerts-panel-title i {
    color: #c2a14d;
}

.alerts-list {
    max-height: 380px;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.alerts-loading,
.alerts-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.alerts-empty i {
    color: var(--accent-success);
    font-size: 1.1rem;
}

.alert-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--fill-3);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.alert-item:hover {
    background: var(--fill-2);
    transform: translateX(2px);
}

.alert-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.alert-critico .alert-icon { background: rgba(185, 87, 74, 0.12); color: var(--accent-danger); }
.alert-advertencia .alert-icon { background: rgba(197, 128, 58, 0.14); color: var(--accent-warning); }
.alert-info .alert-icon { background: rgba(94, 125, 154, 0.12); color: var(--accent-info); }

.alert-body {
    flex: 1;
    min-width: 0;
}

.alert-titulo {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-mensaje {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 1px;
    line-height: 1.3;
}

.alert-valor {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    min-width: 24px;
    text-align: right;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    body::before {
        animation: none !important;
    }
}