/*
 * Sprint 6/12 — campos, botões e estados do tema Nublado.
 * O desenho e as medidas continuam pertencendo ao tema Dia.
 */

/* Campos rebaixados: contraste por profundidade, não por branco puro. */
html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea,
    [contenteditable="true"],
    [role="combobox"]
) {
    background-color: var(--nuv-field) !important;
    border-color: var(--nuv-line) !important;
    color: var(--nuv-text) !important;
    box-shadow: inset 0 0.0625rem 0.125rem rgba(20, 24, 29, .10) !important;
    caret-color: var(--nuv-navy-deep);
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    input,
    textarea
)::placeholder {
    color: var(--nuv-text-muted) !important;
    opacity: .82;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea,
    [contenteditable="true"],
    [role="combobox"]
):hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--nuv-surface-sunken) !important;
    border-color: var(--nuv-line-strong) !important;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea,
    [contenteditable="true"],
    [role="combobox"]
):focus,
html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea,
    [contenteditable="true"],
    [role="combobox"]
):focus-visible {
    outline: none !important;
    background-color: var(--nuv-surface-child) !important;
    border-color: var(--nuv-navy) !important;
    box-shadow: var(--nuv-focus) !important;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    input,
    select,
    textarea,
    [contenteditable="true"],
    [role="combobox"]
):is(:disabled, [aria-disabled="true"]) {
    background-color: color-mix(in srgb, var(--nuv-surface-sunken) 78%, var(--nuv-bg)) !important;
    color: var(--nuv-text-muted) !important;
    border-color: var(--nuv-line-subtle) !important;
    box-shadow: none !important;
    opacity: .64;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    input[aria-invalid="true"],
    select[aria-invalid="true"],
    textarea[aria-invalid="true"]
) {
    border-color: var(--nuv-danger) !important;
    box-shadow: 0 0 0 0.1875rem var(--nuv-danger-bg) !important;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    input[type="checkbox"],
    input[type="radio"],
    input[type="range"]
) {
    accent-color: var(--nuv-navy);
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) select option,
html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) select optgroup {
    background-color: var(--nuv-surface-raised);
    color: var(--nuv-text);
}

/* Ação auxiliar: superfície elevada com contorno suave. */
html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) button,
html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(.button, .btn, [role="button"]) {
    background-color: var(--nuv-action-secondary-bg);
    border-color: var(--nuv-line);
    color: var(--nuv-action-secondary-text);
    box-shadow: inset 0 0 0 0.0625rem var(--nuv-line-subtle), var(--nuv-shadow-soft);
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) button:hover:not(:disabled),
html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(.button, .btn, [role="button"]):hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--nuv-action-secondary-hover);
    border-color: var(--nuv-line-strong);
    color: var(--nuv-text);
    box-shadow: inset 0 0 0 0.0625rem var(--nuv-line), var(--nuv-shadow-raised);
}

/* CTA: marinho-gelo, seguindo os botões primários aprovados em Relatórios. */
html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    .button-primary,
    .btn.primary,
    [class*="-btn-primary"],
    [class*="-btn--primary"],
    [class*="-btn"][data-variant="primary"]
) {
    background: var(--nuv-action-primary-bg) !important;
    border-color: var(--nuv-navy-strong) !important;
    color: var(--nuv-action-primary-text) !important;
    box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, .14), var(--nuv-shadow-soft) !important;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    .button-primary,
    .btn.primary,
    [class*="-btn-primary"],
    [class*="-btn--primary"],
    [class*="-btn"][data-variant="primary"]
):hover:not(:disabled) {
    background:
        radial-gradient(circle at 22% 28%, rgba(239, 248, 252, .36), transparent 38%),
        radial-gradient(circle at 78% 72%, rgba(7, 31, 48, .34), transparent 48%),
        var(--nuv-navy-soft) !important;
    border-color: var(--nuv-navy-deep) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, .18), var(--nuv-shadow-raised) !important;
}

/* Ações destrutivas mantêm significado sem o vermelho luminoso do Dia. */
html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    .button-danger,
    .btn.danger,
    [class*="-btn-danger"],
    [class*="-btn--danger"],
    [class*="-btn-delete"],
    [class*="-btn-remove"],
    [class*="-btn-limpar"],
    [data-variant="danger"]
) {
    background: var(--nuv-action-danger-bg) !important;
    border-color: var(--nuv-danger) !important;
    color: var(--nuv-action-danger-text) !important;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    .button-danger,
    .btn.danger,
    [class*="-btn-danger"],
    [class*="-btn--danger"],
    [class*="-btn-delete"],
    [class*="-btn-remove"],
    [class*="-btn-limpar"],
    [data-variant="danger"]
):hover:not(:disabled) {
    background: var(--nuv-action-danger-hover) !important;
    border-color: #57100f !important;
    color: #ffffff !important;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    button,
    .button,
    .btn,
    [role="button"]
):focus-visible {
    outline: none !important;
    border-color: var(--nuv-navy) !important;
    box-shadow: var(--nuv-focus) !important;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    button,
    .button,
    .btn,
    [role="button"]
):is(.active, .is-active, .selected, [aria-selected="true"], [aria-pressed="true"], [aria-expanded="true"]) {
    background: var(--nuv-header-band-active) !important;
    border-color: var(--nuv-navy-strong) !important;
    color: var(--nuv-text-on-header) !important;
    box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, .14), var(--nuv-shadow-card) !important;
}

html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
    button,
    .button,
    .btn,
    [role="button"]
):is(:disabled, [aria-disabled="true"]) {
    box-shadow: none !important;
    filter: saturate(.55);
    opacity: .56;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="cinza"] .main-content > .page:not(#page-relatorios) :where(
        button,
        .button,
        .btn,
        input,
        select,
        textarea,
        [role="button"],
        [role="combobox"]
    ) {
        transition: none !important;
    }
}