/**
 * ══════════════════════════════════════════════════
 *  NUTRÊ , Design Tokens
 *  Variáveis, reset, tipografia, animações base.
 *  Importado PRIMEIRO por todos os outros CSS.
 *
 *  OTIMIZADO: Tokens unificados, sem duplicação.
 *  Fonts carregados via <link> no header (paralelo).
 * ══════════════════════════════════════════════════
 */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* O reset acima remove o "margin: auto" nativo do <dialog>, que é o que o
   centraliza na tela. Restaurado aqui; regras por classe continuam valendo. */
dialog {
    margin: auto;
}

:root {
    --font-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* ── Brand Palette ─────────────────────── */
    --brand: #047857;
    --brand-strong: #064E3B;
    --brand-soft: #ECFDF5;
    --accent: #90B27D;
    --danger: #dc2626;
    --warning: #d97706;
    --info: #2563eb;
    --success: #15803d;

    --green-900: #123F34;
    --green-800: #124D3E;
    --green-700: #145E49;
    --green-600: #4F8B67;
    --green-500: #90B27D;
    --green-400: #A4BE94;
    --green-300: #B4CAA7;
    --green-200: #D5E2CD;
    --green-100: #EAF1E5;
    --green-50:  #F5F8F2;
    --coral:     #90B27D;
    --coral-hover: #789C67;
    --cream:     #F8FAFC;

    /* ── Neutral Palette ───────────────────── */
    --text-main:  #0F172A;
    --text-muted: #475569;
    --text-light: #94A3B8;
    --border:     #E2E8F0;
    --border-strong: #CBD5E1;

    /* ── Surfaces ──────────────────────────── */
    --bg-main:    #F8FAFC;
    --bg-surface: #ffffff;
    --bg-card:    #ffffff;
    --bg-subtle:  #F1F5F9;
    --sidebar-bg: #064E3B;

    /* ── Shadows ───────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);
    --focus-ring: 0 0 0 4px rgba(144, 178, 125, 0.22);

    /* ── Motion ─────────────────────────────── */
    --transition: 180ms ease;

    /* ── Radius ─────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --glass: rgba(255, 255, 255, 0.7);

    /* ── 3D Button Tokens ──────────────────── */
    --3d-bg: var(--sidebar-bg);
    --3d-shadow: #0C3027;
    --3d-highlight: var(--green-500);
    --3d-text: #FFFFFF;

    /* ── Modal system tokens ─────────────────── */
    --modal-backdrop: rgba(6, 78, 59, 0.72);
    --modal-surface: var(--bg-surface);
    --modal-border: rgba(27, 82, 64, 0.14);
    --modal-shadow: 0 24px 64px rgba(5, 35, 25, 0.28);
    --modal-radius: 16px;
    --modal-padding: 24px;
    --modal-gap: 16px;
    --modal-focus-ring: 0 0 0 4px rgba(79, 139, 103, 0.22);
    --button-height: 42px;
    --button-radius: 10px;

    /* ── Scrollbar system tokens ───────────────── */
    --scrollbar-track: rgba(0, 0, 0, 0.06);
    --scrollbar-thumb: #52b788;
    --scrollbar-thumb-hover: #389f6f;
}

/* ── Dark Theme Overrides ─────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --text-main:  #E8EFF1;
        --text-muted: #A0AAB0;
        --text-light: #707A80;
        --border:     rgba(255, 255, 255, 0.08);
        --bg-main:    #0B1E17;
        --bg-surface: #102A21;
        --bg-card:    #102A21;
        --sidebar-bg: #064E3B;
        --glass:      rgba(16, 42, 33, 0.86);
        --green-100:  #173F31;
        --green-50:   #102A21;
        --3d-bg:      var(--green-700);
        --3d-shadow:  #0F241B;
        --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-md:  0 12px 32px rgba(0, 0, 0, 0.4);
        --shadow-lg:  0 24px 64px rgba(0, 0, 0, 0.5);
        --scrollbar-track: rgba(0, 0, 0, 0.3);
        --scrollbar-thumb: #52b788;
        --scrollbar-thumb-hover: #74c69d;
    }
}

:root[data-theme="dark"] {
    --text-main:  #E8EFF1;
    --text-muted: #A0AAB0;
    --text-light: #707A80;
    --border:     rgba(255, 255, 255, 0.08);
    --bg-main:    #0B1E17;
    --bg-surface: #102A21;
    --bg-card:    #102A21;
    --sidebar-bg: #064E3B;
    --glass:      rgba(16, 42, 33, 0.86);
    --green-100:  #173F31;
    --green-50:   #102A21;
    --3d-bg:      var(--green-700);
    --3d-shadow:  #0F241B;
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 24px 64px rgba(0, 0, 0, 0.5);
    --scrollbar-track: rgba(0, 0, 0, 0.3);
    --scrollbar-thumb: #52b788;
    --scrollbar-thumb-hover: #74c69d;
}

/* ── Base ─────────────────────────────────── */
html {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body {
    min-height: 100%;
    font-family: var(--font-sans);
    background: var(--bg-main);
    background-color: var(--bg-main);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a { color: var(--green-700); }

button, input, select, textarea {
    font: inherit;
}

/* Interface clínica pede leitura rápida. Evita misturar fontes decorativas
   em títulos, campos e textos auxiliares ao longo dos módulos. */
body :is(h1, h2, h3, h4, h5, h6, p, span, small, label, button, input, select, textarea, li, a, td, th, legend) {
    font-family: var(--font-sans) !important;
}

body :is(code, pre, kbd) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; }

:focus-visible {
    outline: 2px solid var(--green-500);
    outline-offset: 2px;
}

::selection {
    background: var(--green-100);
    color: var(--green-900);
}

/* ── Core Animations ────────────────────── */
@keyframes fadeSlideLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.spinner {
    width: 20px; height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ── Page Transitions ───────────────────── */
body {
    /* Conteúdo deve permanecer visível mesmo se um módulo JS falhar ou não for carregado. */
    opacity: 1;
    transition: opacity 0.22s ease;
}

body.page-loaded {
    opacity: 1;
}

body.page-exit {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

/* ── Ripple Click Effect ────────────────── */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(144, 178, 125, 0.18);
    transform: scale(0);
    animation: ripple-expand 0.55s ease-out forwards;
    pointer-events: none;
    z-index: 1;
}

@keyframes ripple-expand {
    to { transform: scale(4); opacity: 0; }
}

/* ── Animate on Scroll ──────────────────── */
.animate-on-scroll {
    /* Conteúdo visível é o estado seguro. O JavaScript adiciona a classe
       temporária abaixo somente depois de instalar o observador e o fail-safe. */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.nutre-reveal-pending {
    opacity: 0;
    transform: translateY(16px);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Custom Scrollbars (WebKit / Chromium / Safari) ─────────────── */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Firefox standard scrollbars */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }
}

/* ── GPU-Accelerated Performance Hints ──── */
.card, .stat-card, .stat-mini-item, .nav-item,
.btn, .btn-3d, .btn-submit, .timeline-content,
.tool-item, .data-stat-card, .appointment-list-item {
    will-change: transform;
}