/*
 * Base global do app (depois de css/tokens.css). Só usa os tokens semânticos.
 * Inclui as correções do Bootstrap durante a transição: as telas antigas ficam coerentes com o tema até migrarem.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Foco por teclado e scrollIntoView não param debaixo do topo fixo nem do composer do chat (WCAG 2.4.11): o chat
       publica a altura do rodapé em --altura-rodape-chat (Perguntar.razor.js). */
    scroll-padding-top: calc(var(--altura-topo) + var(--esp-2));
    scroll-padding-bottom: calc(var(--altura-rodape-chat, 0px) + var(--esp-2));
}

html, body {
    font-family: var(--fonte-sans);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--tx);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--tx);
    font-weight: var(--peso-forte);
}

code, kbd, pre, samp, .mono {
    font-family: var(--fonte-mono);
}

a {
    color: var(--pr);
    text-underline-offset: 0.15em;
}

h1:focus {
    outline: none;
}

/* Foco visível em tudo que é interativo: anel de 3 px na primária (direção A). */
:focus-visible {
    outline: var(--foco-largura) solid var(--pr);
    outline-offset: 2px;
}

::selection {
    background: color-mix(in srgb, var(--pr-fundo) 35%, transparent);
}

/* Só para leitores de tela. */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

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

/* ---------- Validação de formulários do Blazor ---------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ok);
}

.invalid {
    outline: 1px solid var(--er);
}

.validation-message {
    color: var(--er);
}

.blazor-error-boundary {
    background: var(--er-tonal);
    border-left: 4px solid var(--er);
    border-radius: var(--raio-selo);
    padding: var(--esp-4);
    color: var(--tx);
}

    .blazor-error-boundary::after {
        content: "Ocorreu um erro.";
    }

/* ---------- Bootstrap na transição: componentes que usam cor própria em vez das variáveis --bs-* ---------- */
.btn {
    --bs-btn-font-family: var(--fonte-sans);
    --bs-btn-font-weight: var(--peso-medio);
    --bs-btn-border-radius: var(--raio-pilula);
    --bs-btn-focus-box-shadow: var(--foco-anel);
    min-height: var(--alvo-compacto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
}

.btn-sm {
    --bs-btn-border-radius: var(--raio-pilula);
    min-height: 2.25rem;
}

.btn-lg {
    --bs-btn-border-radius: var(--raio-pilula);
    min-height: var(--alvo-grande);
}

/* Botão primário no ciano da marca com texto escuro (D-040). */
.btn-primary {
    --bs-btn-color: var(--prc);
    --bs-btn-bg: var(--pr-fundo);
    --bs-btn-border-color: var(--pr-fundo);
    --bs-btn-hover-color: var(--prc);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pr-fundo) 88%, var(--tx));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--pr-fundo) 88%, var(--tx));
    --bs-btn-active-color: var(--prc);
    --bs-btn-active-bg: color-mix(in srgb, var(--pr-fundo) 80%, var(--tx));
    --bs-btn-active-border-color: color-mix(in srgb, var(--pr-fundo) 80%, var(--tx));
    --bs-btn-disabled-color: var(--prc);
    --bs-btn-disabled-bg: var(--pr-fundo);
    --bs-btn-disabled-border-color: var(--pr-fundo);
}

.btn-secondary {
    --bs-btn-color: var(--tx);
    --bs-btn-bg: var(--el);
    --bs-btn-border-color: var(--el);
    --bs-btn-hover-color: var(--tx);
    --bs-btn-hover-bg: color-mix(in srgb, var(--el) 85%, var(--tx));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--el) 85%, var(--tx));
    --bs-btn-active-color: var(--tx);
    --bs-btn-active-bg: color-mix(in srgb, var(--el) 75%, var(--tx));
    --bs-btn-active-border-color: color-mix(in srgb, var(--el) 75%, var(--tx));
    --bs-btn-disabled-color: var(--tx2);
    --bs-btn-disabled-bg: var(--el);
    --bs-btn-disabled-border-color: var(--el);
}

.btn-danger {
    --bs-btn-color: var(--erc);
    --bs-btn-bg: var(--er);
    --bs-btn-border-color: var(--er);
    --bs-btn-hover-color: var(--erc);
    --bs-btn-hover-bg: color-mix(in srgb, var(--er) 88%, var(--tx));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--er) 88%, var(--tx));
    --bs-btn-active-color: var(--erc);
    --bs-btn-active-bg: color-mix(in srgb, var(--er) 80%, var(--tx));
    --bs-btn-active-border-color: color-mix(in srgb, var(--er) 80%, var(--tx));
    --bs-btn-disabled-color: var(--erc);
    --bs-btn-disabled-bg: var(--er);
    --bs-btn-disabled-border-color: var(--er);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--sobre-hover);
    --bs-btn-active-bg: var(--sobre-pressionado);
    --bs-btn-disabled-bg: transparent;
}

.btn-outline-primary {
    --bs-btn-color: var(--pr);
    --bs-btn-border-color: var(--bf);
    --bs-btn-hover-color: var(--pr);
    --bs-btn-hover-border-color: var(--pr);
    --bs-btn-active-color: var(--pr);
    --bs-btn-active-border-color: var(--pr);
    --bs-btn-disabled-color: var(--tx2);
    --bs-btn-disabled-border-color: var(--bd);
}

.btn-outline-secondary {
    --bs-btn-color: var(--tx);
    --bs-btn-border-color: var(--bf);
    --bs-btn-hover-color: var(--tx);
    --bs-btn-hover-border-color: var(--tx2);
    --bs-btn-active-color: var(--tx);
    --bs-btn-active-border-color: var(--tx2);
    --bs-btn-disabled-color: var(--tx2);
    --bs-btn-disabled-border-color: var(--bd);
}

.btn-outline-danger {
    --bs-btn-color: var(--er);
    --bs-btn-border-color: var(--er);
    --bs-btn-hover-color: var(--er);
    --bs-btn-hover-border-color: var(--er);
    --bs-btn-active-color: var(--er);
    --bs-btn-active-border-color: var(--er);
    --bs-btn-disabled-color: var(--tx2);
    --bs-btn-disabled-border-color: var(--bd);
}

.btn-link {
    --bs-btn-color: var(--pr);
    --bs-btn-hover-color: var(--pr);
    --bs-btn-active-color: var(--pr);
    --bs-btn-disabled-color: var(--tx2);
}

/* Campos: superfície, borda de controle (≥ 3:1) e 48 px. */
.form-control,
.form-select {
    min-height: var(--alvo);
    background-color: var(--sf);
    color: var(--tx);
    border-color: var(--bf);
    border-radius: var(--raio-campo);
    font-size: 1rem;
}

.form-control-sm,
.form-select-sm {
    min-height: 2.25rem;
}

.form-control::placeholder {
    color: var(--tx2);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible {
    border-color: var(--pr);
    box-shadow: var(--foco-anel);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--el);
    color: var(--tx2);
}

/* O ícone da seta do select do Bootstrap é escuro fixo: no tema escuro usa a versão clara (--tx2 do escuro, #9AA0A6). */
:root[data-tema="escuro"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239AA0A6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]):not([data-tema="escuro"]) .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239AA0A6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    background-color: var(--sf);
    border-color: var(--bf);
}

/* Marcado: o mesmo ciano de preenchimento do botão primário (--pr-fundo) com a borda na primária de traço (--pr, que
   no claro dá ≥ 3:1 contra o cartão e contra o ciano) e a marca quase preta (--check-imagem). */
.form-check-input:checked {
    background-color: var(--pr-fundo);
    border-color: var(--pr);
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: var(--check-imagem);
}

.form-check {
    min-height: var(--alvo-compacto);
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    padding-left: 0;
}

.form-check .form-check-input {
    float: none;
    margin: 0;
    flex: none;
}

.darker-border-checkbox.form-check-input {
    border-color: var(--bf);
}

.form-floating > .form-control,
.form-floating > .form-select {
    min-height: calc(3.5rem + 2px);
}

.form-floating > label {
    color: var(--tx2);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--tx2);
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: var(--sf);
}

/* O rótulo flutuante já diz o que é o campo: o placeholder só aparece com o foco, no lugar do texto. */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: transparent;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    color: var(--tx2);
}

.form-label {
    font-weight: var(--peso-medio);
}

.form-text {
    color: var(--tx2);
}

/* Alertas: containers tonais; o de aviso usa o par âmbar do selo (nunca vermelho). */
.alert {
    --bs-alert-border-radius: var(--raio-cartao);
    color: var(--tx);
}

.alert-warning {
    --bs-alert-color: var(--selo-nv-texto);
    --bs-alert-bg: var(--selo-nv-fundo);
    --bs-alert-border-color: var(--selo-nv-borda);
    color: var(--selo-nv-texto);
}

.alert-danger {
    --bs-alert-color: var(--tx);
    --bs-alert-bg: var(--er-tonal);
    --bs-alert-border-color: var(--er);
}

.alert-success {
    --bs-alert-color: var(--selo-v-texto);
    --bs-alert-bg: var(--selo-v-fundo);
    --bs-alert-border-color: var(--selo-v-borda);
    color: var(--selo-v-texto);
}

.alert-info {
    --bs-alert-color: var(--tx);
    --bs-alert-bg: var(--ac-tonal);
    --bs-alert-border-color: color-mix(in srgb, var(--ac) 45%, var(--sf));
}

.badge {
    border-radius: var(--raio-selo);
    font-weight: var(--peso-medio);
}

.text-bg-primary {
    color: var(--prc) !important;
    background-color: var(--pr-fundo) !important;
}

.text-bg-secondary {
    color: var(--tx) !important;
    background-color: var(--el) !important;
}

.text-bg-light {
    color: var(--tx) !important;
    background-color: var(--el) !important;
}

.text-bg-info {
    color: var(--tx) !important;
    background-color: var(--ac-tonal) !important;
}

.text-bg-warning {
    color: var(--selo-nv-texto) !important;
    background-color: var(--selo-nv-fundo) !important;
}

.text-warning-emphasis {
    color: var(--selo-nv-texto) !important;
}

.list-group {
    --bs-list-group-bg: var(--sf);
    --bs-list-group-color: var(--tx);
    --bs-list-group-border-color: var(--bd);
    --bs-list-group-border-radius: var(--raio-cartao);
    --bs-list-group-action-color: var(--tx);
    --bs-list-group-action-hover-color: var(--tx);
    --bs-list-group-action-hover-bg: var(--sobre-hover);
    --bs-list-group-action-active-color: var(--tx);
    --bs-list-group-action-active-bg: var(--sobre-pressionado);
    --bs-list-group-active-bg: var(--pr-tonal);
    --bs-list-group-active-color: var(--tx);
    --bs-list-group-active-border-color: var(--pr);
}

.progress {
    --bs-progress-bg: var(--el);
    --bs-progress-bar-bg: var(--pr);
    --bs-progress-border-radius: var(--raio-pilula);
}

.table {
    --bs-table-color: var(--tx);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bd);
}

.text-secondary {
    color: var(--tx2) !important;
}

/* Gaveta aberta no celular: a página por trás não rola (o layout põe inert no resto). */
html:has(.concha[data-gaveta-aberta]) {
    overflow: hidden;
}