/*
 * Sprint 5/12 — hierarquia global de cards do tema Nublado.
 * O piloto de Relatórios permanece como referência e não recebe estes overrides.
 * Contornos são desenhados por sombra interna para não alterar a geometria.
 */

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) {
    --nuv-card-current: var(--nuv-surface-parent);
    --nuv-card-line-current: var(--nuv-line);
    --nuv-card-shadow-current: var(--nuv-shadow-card);
}

/* Card pai: seção principal apoiada sobre o fundo atmosférico. */
html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    .card,
    .content-section,
    article[class*="-card"],
    section[class*="-card"],
    div[class*="-card"],
    aside[class*="-card"],
    form[class*="-card"],
    article[class*="-panel"],
    section[class*="-panel"],
    div[class*="-panel"],
    aside[class*="-panel"],
    form[class*="-panel"]
) {
    background-color: var(--nuv-card-current) !important;
    border-color: var(--nuv-card-line-current) !important;
    color: var(--nuv-text) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--nuv-card-line-current),
        var(--nuv-card-shadow-current) !important;
}

/* Card filho: superfície um degrau mais clara dentro do pai. */
html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    .card,
    .content-section,
    article[class*="-card"],
    section[class*="-card"],
    div[class*="-card"],
    aside[class*="-card"],
    form[class*="-card"],
    article[class*="-panel"],
    section[class*="-panel"],
    div[class*="-panel"],
    aside[class*="-panel"],
    form[class*="-panel"]
) :where(
    .card,
    .content-section,
    article[class*="-card"],
    section[class*="-card"],
    div[class*="-card"],
    aside[class*="-card"],
    form[class*="-card"],
    article[class*="-panel"],
    section[class*="-panel"],
    div[class*="-panel"],
    aside[class*="-panel"],
    form[class*="-panel"]
) {
    --nuv-card-current: var(--nuv-surface-child);
    --nuv-card-line-current: var(--nuv-line-subtle);
    --nuv-card-shadow-current: var(--nuv-shadow-soft);
}

/* Card neto: separação delicada para blocos internos e KPIs encaixados. */
html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    .card,
    .content-section,
    article[class*="-card"],
    section[class*="-card"],
    div[class*="-card"],
    aside[class*="-card"],
    form[class*="-card"],
    article[class*="-panel"],
    section[class*="-panel"],
    div[class*="-panel"],
    aside[class*="-panel"],
    form[class*="-panel"]
) :where(
    .card,
    .content-section,
    article[class*="-card"],
    section[class*="-card"],
    div[class*="-card"],
    aside[class*="-card"],
    form[class*="-card"],
    article[class*="-panel"],
    section[class*="-panel"],
    div[class*="-panel"],
    aside[class*="-panel"],
    form[class*="-panel"]
) :where(
    .card,
    .content-section,
    article[class*="-card"],
    section[class*="-card"],
    div[class*="-card"],
    aside[class*="-card"],
    form[class*="-card"],
    article[class*="-panel"],
    section[class*="-panel"],
    div[class*="-panel"],
    aside[class*="-panel"],
    form[class*="-panel"]
) {
    --nuv-card-current: var(--nuv-surface-grandchild);
    --nuv-card-line-current: var(--nuv-line-subtle);
    --nuv-card-shadow-current: none;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    .card,
    article[class*="-card"],
    section[class*="-card"],
    div[class*="-card"]
):hover {
    background-color: var(--nuv-surface-hover) !important;
    border-color: var(--nuv-line) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--nuv-line),
        var(--nuv-shadow-raised) !important;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    .card,
    .content-section,
    article[class*="-card"],
    section[class*="-card"],
    div[class*="-card"],
    aside[class*="-card"],
    form[class*="-card"],
    article[class*="-panel"],
    section[class*="-panel"],
    div[class*="-panel"],
    aside[class*="-panel"],
    form[class*="-panel"]
) :where(h1, h2, h3, h4, h5, strong, .card-value) {
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    .card,
    .content-section,
    article[class*="-card"],
    section[class*="-card"],
    div[class*="-card"],
    aside[class*="-card"],
    form[class*="-card"],
    article[class*="-panel"],
    section[class*="-panel"],
    div[class*="-panel"],
    aside[class*="-panel"],
    form[class*="-panel"]
) :where(p, small, .card-label, [class*="-subtitle"], [class*="-sub"]) {
    color: var(--nuv-text-soft) !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
        .card,
        article[class*="-card"],
        section[class*="-card"],
        div[class*="-card"]
    ) {
        transition: none !important;
    }
}