/* ===================================================================
   ATHENA 2026 — DESIGN SYSTEM
   Editorial · Carbon-glass · Ember palette · No-neon · WCAG AAA
   Base global. Cada tela aplica seu HUD em cima desta fundação.
   =================================================================== */

/* ─── 1. TOKENS ──────────────────────────────────────────────────── */
:root {
    /* CARBON — preto multicamada com matiz quente */
    --carbon-0: #050507;
    --carbon-1: #0a0a0e;
    --carbon-2: #101015;
    --carbon-3: #16161d;
    --carbon-4: #1c1c25;
    --carbon-5: #24242e;
    --carbon-6: #2e2e3a;
    --carbon-7: #3a3a47;

    /* EMBER — laranja maduro, sem neon */
    --ember-50:  #fff5ed;
    --ember-100: #ffe5d0;
    --ember-200: #ffc59a;
    --ember-300: #ffa566;
    --ember-400: #ff8a32;
    --ember-500: #ff681f;
    --ember-600: #ed5410;
    --ember-700: #c43e0a;
    --ember-800: #8a2b08;
    --ember-900: #4a1604;

    /* TEXTO (escuro) */
    --t-pure: #ffffff;
    --t-primary: #f4f4f6;
    --t-secondary: #b0b0ba;
    --t-tertiary: #6e6e7a;
    --t-disabled: #44444c;

    /* SEMÂNTICOS — tons maduros, sem flúor */
    --c-green: #00b87a;
    --c-green-soft: rgba(0, 184, 122, 0.12);
    --c-amber: #f5a300;
    --c-amber-soft: rgba(245, 163, 0, 0.12);
    --c-red: #e63946;
    --c-red-soft: rgba(230, 57, 70, 0.12);
    --c-blue: #4ea1ff;
    --c-blue-soft: rgba(78, 161, 255, 0.10);

    /* LINHAS / BORDAS */
    --line-1: rgba(255, 255, 255, 0.04);
    --line-2: rgba(255, 255, 255, 0.08);
    --line-3: rgba(255, 255, 255, 0.14);
    --line-ember: rgba(255, 104, 31, 0.20);
    --line-ember-strong: rgba(255, 104, 31, 0.40);

    /* SUPERFÍCIES (vidro carbon) */
    --surface-glass: rgba(20, 20, 26, 0.62);
    --surface-glass-deep: rgba(12, 12, 16, 0.78);
    --surface-elev: rgba(28, 28, 36, 0.78);

    /* RAIOS */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-2xl: 36px;
    --r-pill: 999px;

    /* SOMBRAS — em camadas */
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 4px 12px rgba(0, 0, 0, 0.45);
    --sh-3: 0 12px 32px rgba(0, 0, 0, 0.55);
    --sh-4: 0 24px 64px rgba(0, 0, 0, 0.65);
    --sh-5: 0 40px 96px rgba(0, 0, 0, 0.72);
    --sh-glow-ember: 0 0 80px -16px rgba(255, 104, 31, 0.28);
    --sh-glow-ember-soft: 0 0 60px -20px rgba(255, 104, 31, 0.16);
    --sh-inset-line: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --sh-inset-line-strong: inset 0 1px 0 rgba(255, 255, 255, 0.10);

    /* GRADIENTES SIGNATURE */
    --grad-ember:  linear-gradient(135deg, #ff8a32 0%, #ff681f 50%, #ed5410 100%);
    --grad-ember-soft: linear-gradient(135deg, rgba(255, 138, 50, 0.18), rgba(255, 104, 31, 0.10));
    --grad-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    --grad-text-ember: linear-gradient(135deg, #ffd9b5 0%, #ff8a32 60%, #ff681f 100%);
    --grad-text-mono: linear-gradient(180deg, #ffffff 0%, #b0b0ba 100%);
    --grad-divider: linear-gradient(90deg, transparent, rgba(255, 104, 31, 0.5), transparent);

    /* TIMING + EASINGS PREMIUM */
    --t-fast: 140ms;
    --t-base: 260ms;
    --t-slow: 480ms;
    --t-slower: 720ms;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-emphasis: cubic-bezier(0.2, 0.0, 0.0, 1.0);

    /* TIPOGRAFIA */
    --font-display: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

    /* ESCALA TIPOGRÁFICA FLUIDA */
    --fs-xs: clamp(10px, 0.7vw, 11px);
    --fs-sm: clamp(11px, 0.8vw, 12.5px);
    --fs-base: clamp(13px, 0.95vw, 14.5px);
    --fs-md: clamp(15px, 1.1vw, 17px);
    --fs-lg: clamp(18px, 1.4vw, 22px);
    --fs-xl: clamp(24px, 2vw, 32px);
    --fs-2xl: clamp(32px, 3vw, 48px);
    --fs-3xl: clamp(44px, 5vw, 76px);
    --fs-display: clamp(56px, 8vw, 128px);

    /* SPACING (4pt grid) */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;
    --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
}

/* ─── 2. MODO CLARO IMPECÁVEL ────────────────────────────────────── */
.light-theme,
[data-theme="light"] {
    --carbon-0: #f7f6f1;
    --carbon-1: #f0eee8;
    --carbon-2: #e8e5dd;
    --carbon-3: #ddd9cf;
    --carbon-4: #c9c5b9;
    --carbon-5: #a39e92;
    --carbon-6: #6b675e;
    --carbon-7: #2a2820;

    --t-pure: #050507;
    --t-primary: #15151a;
    --t-secondary: #50505a;
    --t-tertiary: #82828c;
    --t-disabled: #b8b8c0;

    --line-1: rgba(0, 0, 0, 0.05);
    --line-2: rgba(0, 0, 0, 0.10);
    --line-3: rgba(0, 0, 0, 0.18);
    --line-ember: rgba(255, 104, 31, 0.30);
    --line-ember-strong: rgba(255, 104, 31, 0.50);

    --surface-glass: rgba(255, 255, 255, 0.78);
    --surface-glass-deep: rgba(255, 255, 255, 0.92);
    --surface-elev: rgba(255, 255, 255, 0.96);

    --sh-1: 0 1px 2px rgba(20, 20, 30, 0.06);
    --sh-2: 0 4px 14px rgba(20, 20, 30, 0.08);
    --sh-3: 0 12px 32px rgba(20, 20, 30, 0.10);
    --sh-4: 0 24px 56px rgba(20, 20, 30, 0.12);
    --sh-5: 0 40px 88px rgba(20, 20, 30, 0.14);
    --sh-glow-ember: 0 0 60px -16px rgba(255, 104, 31, 0.22);
    --sh-glow-ember-soft: 0 0 40px -20px rgba(255, 104, 31, 0.14);
    --sh-inset-line: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --sh-inset-line-strong: inset 0 1px 0 rgba(255, 255, 255, 0.9);

    --grad-text-mono: linear-gradient(180deg, #15151a 0%, #50505a 100%);
    --grad-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
}

/* ─── 3. RESET MODERNO + SCROLL SUAVE ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--t-primary);
    background: var(--carbon-0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
    font-feature-settings: 'cv11', 'ss01', 'ss02';
}

/* ─── 4. BACKGROUND MESH GLOBAL — sem neon, profundo ─────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 70% 50% at 18% 0%,
            rgba(255, 104, 31, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 100% 30%,
            rgba(237, 84, 16, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 110%,
            rgba(196, 62, 10, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, var(--carbon-0) 0%, var(--carbon-1) 100%);
    pointer-events: none;
}

/* Grain orgânico — adiciona textura premium */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}
.light-theme body::after,
[data-theme="light"] body::after { opacity: 0.025; mix-blend-mode: multiply; }

/* ─── 5. TIPOGRAFIA E SELEÇÃO ────────────────────────────────────── */
::selection { background: rgba(255, 104, 31, 0.32); color: #fff; }
.light-theme ::selection,
[data-theme="light"] ::selection { background: rgba(255, 104, 31, 0.22); color: var(--t-primary); }

a, .btn-link {
    color: var(--ember-400);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out-expo);
}
a:hover, .btn-link:hover { color: var(--ember-300); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    font-weight: 800;
    line-height: 1.05;
    color: var(--t-primary);
}

.text-display {
    font-size: var(--fs-display);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.92;
    background: var(--grad-text-mono);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.text-ember {
    background: var(--grad-text-ember);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.text-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ember-300);
}

/* ─── 6. SCROLLBARS ELEGANTES ────────────────────────────────────── */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 104, 31, 0.55), rgba(255, 104, 31, 0.20));
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
    transition: background var(--t-fast) var(--ease-out-expo);
}
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 138, 50, 0.95), rgba(255, 104, 31, 0.55));
    background-clip: padding-box;
}
* { scrollbar-color: rgba(255, 104, 31, 0.45) transparent; scrollbar-width: thin; }

/* ─── 7. GLASS PANELS UTILITÁRIOS ────────────────────────────────── */
.athena-glass {
    background: var(--surface-glass);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3), var(--sh-inset-line), var(--sh-glow-ember-soft);
    position: relative;
    overflow: hidden;
}
.athena-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--grad-glass);
    border-radius: inherit;
}
.athena-glass-deep {
    background: var(--surface-glass-deep);
    backdrop-filter: blur(40px) saturate(1.8);
    -webkit-backdrop-filter: blur(40px) saturate(1.8);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-4), var(--sh-inset-line);
}

/* Card 3D — perspective tilt no hover */
.athena-card-3d {
    transform-style: preserve-3d;
    transition: transform var(--t-base) var(--ease-out-expo),
                box-shadow var(--t-base) var(--ease-out-expo);
    will-change: transform;
}
.athena-card-3d:hover {
    transform: perspective(1200px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
    box-shadow: var(--sh-5), var(--sh-inset-line-strong), var(--sh-glow-ember);
}

/* ─── 8. BOTÕES PREMIUM ──────────────────────────────────────────── */
.athena-btn {
    --bg: rgba(255, 255, 255, 0.04);
    --fg: var(--t-primary);
    --bd: var(--line-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 0 var(--s-5);
    height: 44px;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: var(--r-pill);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--t-fast) var(--ease-out-back),
                background var(--t-base) var(--ease-out-expo),
                border-color var(--t-base) var(--ease-out-expo),
                box-shadow var(--t-base) var(--ease-out-expo),
                color var(--t-fast) var(--ease-out-expo);
    isolation: isolate;
}
.athena-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-ember);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-out-expo);
    z-index: -1;
}
.athena-btn:hover {
    transform: translateY(-1px);
    border-color: var(--line-ember);
    box-shadow: var(--sh-2), var(--sh-glow-ember-soft);
}
.athena-btn:active { transform: translateY(0) scale(0.98); }

.athena-btn-primary {
    --bg: var(--grad-ember);
    --fg: #fff;
    --bd: transparent;
    box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.athena-btn-primary:hover {
    --bd: transparent;
    transform: translateY(-2px);
    box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, 0.30), var(--sh-glow-ember);
    filter: brightness(1.06);
}
.athena-btn-ghost { --bg: transparent; }
.athena-btn-ghost:hover { --bg: rgba(255, 104, 31, 0.06); --fg: var(--ember-300); }

.athena-btn-sm { height: 34px; padding: 0 var(--s-4); font-size: 11px; }
.athena-btn-lg { height: 54px; padding: 0 var(--s-8); font-size: 13.5px; }

/* Shimmer sweep no hover de botão primário */
.athena-btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%);
    transform: skewX(-20deg);
    transition: left var(--t-slower) var(--ease-out-expo);
}
.athena-btn-primary:hover::after { left: 130%; }

/* ─── 9. INPUTS PREMIUM ──────────────────────────────────────────── */
.athena-input {
    width: 100%;
    height: 46px;
    padding: 0 var(--s-4);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    color: var(--t-primary);
    font-family: var(--font-body);
    font-size: 13.5px;
    outline: none;
    transition: all var(--t-base) var(--ease-out-expo);
}
.athena-input::placeholder { color: var(--t-tertiary); }
.athena-input:hover { border-color: var(--line-3); }
.athena-input:focus {
    border-color: var(--ember-500);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 0 4px rgba(255, 104, 31, 0.14), var(--sh-glow-ember-soft);
}
.light-theme .athena-input,
[data-theme="light"] .athena-input { background: rgba(255, 255, 255, 0.7); }
.light-theme .athena-input:focus,
[data-theme="light"] .athena-input:focus { background: #fff; }

/* ─── 10. BADGES / PILLS ─────────────────────────────────────────── */
.athena-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: var(--surface-elev);
    border: 1px solid var(--line-2);
    color: var(--t-secondary);
    transition: all var(--t-base) var(--ease-out-expo);
}
.athena-pill-ember { background: rgba(255, 104, 31, 0.10); color: var(--ember-300); border-color: var(--line-ember); }
.athena-pill-success { background: var(--c-green-soft); color: var(--c-green); border-color: rgba(0, 184, 122, 0.32); }
.athena-pill-warn { background: var(--c-amber-soft); color: var(--c-amber); border-color: rgba(245, 163, 0, 0.32); }
.athena-pill-danger { background: var(--c-red-soft); color: var(--c-red); border-color: rgba(230, 57, 70, 0.32); }

.athena-pill-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: athenaPulseDot 2.4s var(--ease-in-out) infinite;
}
@keyframes athenaPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.25); }
}

/* ─── 11. ANIMAÇÕES SIGNATURE ────────────────────────────────────── */
@keyframes athenaFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes athenaFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes athenaScaleIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes athenaSlideRight {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes athenaShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes athenaGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes athenaGlowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 104, 31, 0.0), var(--sh-2); }
    50% { box-shadow: 0 0 32px -4px rgba(255, 104, 31, 0.35), var(--sh-3); }
}
@keyframes athenaFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes athenaRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes athenaScan {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.athena-animate-fade-up { animation: athenaFadeUp var(--t-slow) var(--ease-out-expo) both; }
.athena-animate-scale-in { animation: athenaScaleIn var(--t-base) var(--ease-out-back) both; }
.athena-animate-slide { animation: athenaSlideRight var(--t-slow) var(--ease-out-expo) both; }
.athena-animate-pulse { animation: athenaGlowPulse 3.5s var(--ease-in-out) infinite; }
.athena-animate-float { animation: athenaFloat 5s var(--ease-in-out) infinite; }

/* Stagger por classe — até 12 elementos */
.athena-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.athena-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.athena-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.athena-stagger > *:nth-child(4) { animation-delay: 0.22s; }
.athena-stagger > *:nth-child(5) { animation-delay: 0.28s; }
.athena-stagger > *:nth-child(6) { animation-delay: 0.34s; }
.athena-stagger > *:nth-child(7) { animation-delay: 0.40s; }
.athena-stagger > *:nth-child(8) { animation-delay: 0.46s; }
.athena-stagger > *:nth-child(9) { animation-delay: 0.52s; }
.athena-stagger > *:nth-child(10) { animation-delay: 0.58s; }
.athena-stagger > *:nth-child(11) { animation-delay: 0.64s; }
.athena-stagger > *:nth-child(12) { animation-delay: 0.70s; }

/* Linha decorativa scanner */
.athena-scan-line {
    position: absolute;
    top: 0; left: 0;
    width: 30%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ember-400), transparent);
    animation: athenaScan 4.5s linear infinite;
    pointer-events: none;
    opacity: 0.7;
}

/* Divisor com brilho */
.athena-divider {
    height: 1px;
    background: var(--grad-divider);
    margin: var(--s-6) 0;
    border: 0;
}

/* ─── 12. UTILITÁRIOS ────────────────────────────────────────────── */
.athena-grain { position: relative; overflow: hidden; }
.athena-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.athena-mono { font-family: var(--font-mono); }
.athena-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ember-300);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.athena-eyebrow::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--ember-500);
}

/* Focus visível — acessibilidade */
:focus-visible {
    outline: 2px solid var(--ember-500);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* ─── 13. BOOTSTRAP COMPATIBILITY (paleta laranja) ───────────────── */
.btn-primary {
    color: #fff;
    background: var(--grad-ember);
    border-color: var(--ember-500);
    transition: filter var(--t-fast), transform var(--t-fast);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 104, 31, 0.18);
    border-color: var(--ember-500);
    outline: none;
}

/* ─── 14. VALIDAÇÃO E ESTADOS ────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--c-green); }
.invalid { outline: 1px solid var(--c-red); }
.validation-message { color: var(--c-red); font-size: 12px; margin-top: 4px; }

/* ─── 15. BLAZOR ERROR BOUNDARY (custom) ─────────────────────────── */
.blazor-error-boundary {
    background: linear-gradient(135deg, #1a0a02, #0a0a0a);
    color: #ffd1aa;
    padding: 1rem 1rem 1rem 3.7rem;
    border-left: 3px solid var(--ember-500);
    font-family: var(--font-mono);
}
.blazor-error-boundary::after {
    content: "Ocorreu um erro. A equipe ATHENA foi notificada.";
}

/* ─── 16. PREFER 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;
    }
}

/* ─── 17. BREAKPOINTS DE RESPONSIVIDADE ──────────────────────────── */
@media (max-width: 1024px) {
    :root {
        --r-lg: 16px;
        --r-xl: 22px;
    }
}
@media (max-width: 640px) {
    :root {
        --r-lg: 14px;
        --r-xl: 18px;
    }
    .athena-btn { height: 42px; font-size: 12px; padding: 0 var(--s-4); }
    .athena-btn-lg { height: 50px; font-size: 13px; }
}

/* ─── 18. PRINT (relatórios PDF) ─────────────────────────────────── */
@media print {
    body::before, body::after { display: none; }
    .athena-glass, .athena-glass-deep { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}