/*
 * Portal 2026 - Aparencia
 * --------------------------------------------------------------
 * Arquivo unico de manutencao visual do tema.
 *
 * A camada principal de cores usa Tailwind v4: os tokens semanticos
 * sao declarados em style.css dentro de @theme e geram classes como
 * bg-marca-primario, text-texto-base, border-borda-base,
 * bg-fundo-elevado e ring-foco.
 *
 * Este arquivo fica responsavel por:
 *   1. sobrescrever esses tokens por modo (dark / alto contraste);
 *   2. comportamento de forced-colors;
 *   3. excecoes pequenas que nao compensam virar classes Tailwind.
 */

:root {
    color-scheme: light;
}

/*
 * Chrome institucional: cabecalho, barra "site oficial" e rodape
 * mantem aparência fixa em todos os modos (claro, escuro, alto contraste).
 * Usa primitivos paco/marca para nao herdar tokens semanticos mutaveis.
 */
:root,
html[data-theme="dark"],
html[data-contrast="high"],
html[data-theme="dark"][data-contrast="high"] {
    --color-cabecalho-fundo: var(--color-marca-400);
    --color-cabecalho-texto: var(--color-paco-000);
    --color-cabecalho-borda: var(--color-paco-000);
    --color-cabecalho-interacao-fundo: var(--color-marca-700);
    --color-cabecalho-interacao-texto: var(--color-paco-000);

    --color-barra-oficial-fundo: var(--color-paco-900);
    --color-barra-oficial-texto: var(--color-paco-000);
    --color-barra-oficial-painel-fundo: var(--color-paco-700);
    --color-barra-oficial-interacao-fundo: var(--color-paco-800);
    --color-barra-oficial-interacao-texto: var(--color-paco-000);

    --color-rodape-fundo: var(--color-paco-900);
    --color-rodape-texto: var(--color-paco-000);
    --color-rodape-borda: var(--color-paco-400);
}

/*
 * Faixa superior do cabecalho (logo + menu desktop): texto sempre branco.
 * O mega menu e a barra mobile mantem tokens semanticos proprios.
 */
@media (min-width: 40rem) {
    [data-pms-cabecalho-principal],
    [data-pms-cabecalho-principal] :where(a, button, span, svg) {
        color: var(--color-cabecalho-texto);
    }

    [data-pms-cabecalho-principal] :where(a, button):hover {
        color: var(--color-cabecalho-interacao-texto);
    }
}

html[data-theme="dark"] {
    color-scheme: dark;

    --color-marca-primario: var(--color-marca-300);
    --color-marca-primario-hover: var(--color-marca-200);
    --color-marca-primario-active: var(--color-marca-400);
    --color-marca-contraste: var(--color-paco-900);
    --color-marca-suave: var(--color-marca-700);
    --color-marca-suave-texto: var(--color-marca-100);
    --color-marca-borda: var(--color-marca-300);
    --color-marca-enfase: var(--color-marca-500);

    --color-fundo-base: var(--color-paco-900);
    --color-fundo-suave: var(--color-paco-900);
    --color-fundo-elevado: var(--color-paco-800);
    --color-fundo-inverso: var(--color-paco-000);

    --color-texto-base: var(--color-paco-000);
    --color-texto-suave: var(--color-paco-200);
    --color-texto-muted: var(--color-paco-400);
    --color-texto-inverso: var(--color-paco-900);

    --color-borda-base: var(--color-paco-700);
    --color-borda-suave: var(--color-paco-600);
    --color-borda-forte: var(--color-paco-300);

    --color-link: var(--color-marca-primario);
    --color-link-hover: var(--color-marca-primario-hover);
    --color-link-visitado: var(--color-marca-primario);

    --color-foco: var(--color-marca-enfase);
    --color-foco-offset: var(--color-fundo-base);

    --color-status-sucesso-fundo: var(--color-verde-400);
    --color-status-sucesso-texto: var(--color-verde-100);
    --color-status-sucesso-borda: var(--color-verde-200);
    --color-status-erro-fundo: var(--color-vermelho-400);
    --color-status-erro-texto: var(--color-vermelho-100);
    --color-status-erro-borda: var(--color-vermelho-200);
    --color-status-aviso-fundo: var(--color-amarelo-400);
    --color-status-aviso-texto: var(--color-amarelo-100);
    --color-status-aviso-borda: var(--color-amarelo-200);
    --color-status-info-fundo: var(--color-paco-800);
    --color-status-info-texto: var(--color-paco-100);
    --color-status-info-borda: var(--color-paco-600);

    --shadow-portal-md: 0 4px 12px rgb(0 0 0 / 0.45);
    --shadow-portal-lg: 0 8px 24px rgb(0 0 0 / 0.55);
}

html[data-contrast="high"] {
    --color-marca-primario: #000000;
    --color-marca-primario-hover: #000000;
    --color-marca-primario-active: #000000;
    --color-marca-contraste: #ffffff;
    --color-marca-suave: #ffffff;
    --color-marca-suave-texto: #000000;
    --color-marca-borda: #000000;
    --color-marca-enfase: #000000;

    --color-fundo-base: #ffffff;
    --color-fundo-suave: #ffffff;
    --color-fundo-elevado: #ffffff;
    --color-fundo-inverso: #000000;

    --color-texto-base: #000000;
    --color-texto-suave: #000000;
    --color-texto-muted: #000000;
    --color-texto-inverso: #ffffff;

    --color-borda-base: #000000;
    --color-borda-suave: #000000;
    --color-borda-forte: #000000;

    --color-link: #0000ee;
    --color-link-hover: #0000aa;
    --color-link-visitado: #551a8b;

    --color-foco: #000000;
    --color-foco-offset: #ffffff;

    --color-status-sucesso-fundo: #ffffff;
    --color-status-sucesso-texto: #006400;
    --color-status-sucesso-borda: #006400;
    --color-status-erro-fundo: #ffffff;
    --color-status-erro-texto: #a1171c;
    --color-status-erro-borda: #a1171c;
    --color-status-aviso-fundo: #ffffff;
    --color-status-aviso-texto: #6b4a00;
    --color-status-aviso-borda: #6b4a00;
    --color-status-info-fundo: #ffffff;
    --color-status-info-texto: #000000;
    --color-status-info-borda: #000000;

    --shadow-portal-md: none;
    --shadow-portal-lg: none;
}

html[data-theme="dark"][data-contrast="high"] {
    --color-marca-primario: #ffffff;
    --color-marca-primario-hover: #ffffff;
    --color-marca-primario-active: #ffffff;
    --color-marca-contraste: #000000;
    --color-marca-suave: #000000;
    --color-marca-suave-texto: #ffffff;
    --color-marca-borda: #ffffff;
    --color-marca-enfase: #ffffff;

    --color-fundo-base: #000000;
    --color-fundo-suave: #000000;
    --color-fundo-elevado: #000000;
    --color-fundo-inverso: #ffffff;

    --color-texto-base: #ffffff;
    --color-texto-suave: #ffffff;
    --color-texto-muted: #ffffff;
    --color-texto-inverso: #000000;

    --color-borda-base: #ffffff;
    --color-borda-suave: #ffffff;
    --color-borda-forte: #ffffff;

    --color-link: #67c1ff;
    --color-link-hover: #ffff66;
    --color-link-visitado: #d3adff;

    --color-foco: #ffffff;
    --color-foco-offset: #000000;

    --color-status-sucesso-fundo: #000000;
    --color-status-sucesso-texto: #9bd392;
    --color-status-sucesso-borda: #9bd392;
    --color-status-erro-fundo: #000000;
    --color-status-erro-texto: #f4afb1;
    --color-status-erro-borda: #f4afb1;
    --color-status-aviso-fundo: #000000;
    --color-status-aviso-texto: #ffeab8;
    --color-status-aviso-borda: #ffeab8;
    --color-status-info-fundo: #000000;
    --color-status-info-texto: #ffffff;
    --color-status-info-borda: #ffffff;
}

/*
 * Transicao suave entre modos (claro/escuro/contraste).
 * Ativada apenas via data-theme-transition no <html>, disparada
 * pelo bootstrap quando o usuario altera preferencias manualmente.
 */
@media (prefers-reduced-motion: no-preference) {
    html[data-theme-transition] :where(*, *::before, *::after) {
        transition-property: background-color, color, border-color, outline-color,
            text-decoration-color, fill, stroke, box-shadow;
        transition-duration: 1000ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@media (forced-colors: active) {
    :root,
    html[data-theme="dark"],
    html[data-contrast="high"],
    html[data-theme="dark"][data-contrast="high"] {
        --color-foco: CanvasText;
        --color-foco-offset: Canvas;
    }

    :focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
    }
}

/* Toggle segmentado (large): borda no segmento ativo apenas em alto contraste */
html[data-contrast="high"] [role="tablist"] [data-role="tab"][data-active="true"] {
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-borda-base);
}

.portal-admin-preview-img {
    max-width: 150px;
    height: auto;
    border: 1px solid var(--color-borda-base);
    padding: 5px;
    background-color: var(--color-fundo-elevado);
}

.categoria-cheia {
    border-color: var(--color-status-erro-borda) !important;
    background-color: var(--color-status-erro-fundo) !important;
}

.nao-permitido {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* Modal de Configurações */
.portal-config-modal__backdrop {
    background-color: color-mix(in srgb, var(--color-fundo-inverso) 55%, transparent);
}

.portal-config-modal__panel {
    background-color: var(--color-fundo-elevado);
    color: var(--color-texto-base);
    border-color: var(--color-borda-base);
    box-shadow: var(--shadow-portal-lg);
}

.portal-config-modal__title {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
}

.portal-config-modal__section-title {
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.portal-config-modal__divider {
    border: 0;
    border-top: 1px solid var(--color-borda-base);
    margin: 0;
}

.portal-config-modal__rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.portal-config-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
}

.portal-config-modal__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    line-height: 1.35;
    font-weight: 600;
}

.portal-config-modal__control {
    flex: 0 0 auto;
}

.portal-config-modal__switch-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.portal-config-modal__switch-side {
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--color-texto-muted);
    white-space: nowrap;
}

.portal-config-modal__switch {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 1px solid var(--color-borda-base);
    background-color: var(--color-fundo-suave);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.portal-config-modal__switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    background-color: var(--color-fundo-elevado);
    border: 1px solid var(--color-borda-base);
    transition: transform 0.15s ease;
}

.portal-config-modal__switch[aria-checked='true'] {
    background-color: var(--color-marca-primario);
    border-color: var(--color-marca-primario);
}

.portal-config-modal__switch[aria-checked='true']::after {
    transform: translateX(1.25rem);
    background-color: var(--color-marca-contraste);
    border-color: transparent;
}

.portal-config-modal__switch:focus-visible {
    outline: 2px solid var(--color-foco);
    outline-offset: 2px;
}

/* Bottom Sheet mobile */
.portal-bottom-sheet[data-state='closed'],
.portal-bottom-sheet.hidden {
    pointer-events: none;
}

.portal-bottom-sheet__backdrop {
    background-color: color-mix(in srgb, var(--color-fundo-inverso) 55%, transparent);
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portal-bottom-sheet[data-state='opening'] .portal-bottom-sheet__backdrop,
.portal-bottom-sheet[data-state='open'] .portal-bottom-sheet__backdrop {
    opacity: 1;
}

.portal-bottom-sheet[data-state='closing'] .portal-bottom-sheet__backdrop {
    opacity: 0;
}

.portal-bottom-sheet__panel {
    background-color: var(--color-fundo-elevado);
    color: var(--color-texto-base);
    border-color: var(--color-borda-base);
    box-shadow: var(--shadow-portal-lg);
    transform: translateY(calc(100% + 1.5rem));
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.portal-bottom-sheet[data-state='opening'] .portal-bottom-sheet__panel,
.portal-bottom-sheet[data-state='open'] .portal-bottom-sheet__panel {
    transform: translateY(0);
}

.portal-bottom-sheet[data-state='closing'] .portal-bottom-sheet__panel {
    transform: translateY(calc(100% + 1.5rem));
}

.portal-bottom-sheet__panel--dragging {
    transition: none;
}

.portal-bottom-sheet__panel:focus-visible {
    outline: 2px solid var(--color-foco);
    outline-offset: 2px;
}

.portal-bottom-sheet__title {
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 700;
}

html[data-vlibras='off'] [vw],
html[data-vlibras='off'] [vw-plugin-wrapper],
html[data-vlibras='off'] .enabled-vlibras {
    display: none !important;
}

/* Modal de Pesquisa */
.portal-search-modal__panel {
    margin-top: 1rem;
    max-height: calc(100dvh - 2rem);
    height: calc(100dvh - 2rem);
}

@media (min-width: 640px) {
    .portal-search-modal__panel {
        margin-top: 3rem;
        max-height: calc(100dvh - 4rem);
        height: calc(100dvh - 4rem);
    }
}

.portal-search-modal__results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--color-borda-base);
    padding-top: 1rem;
}

/* Google CSE: neutraliza fundos/bordas padrao e aplica tokens do tema */
.portal-search-modal__results .gsc-control-cse,
.portal-search-modal__results .gsc-control-cse .gsc-control-wrapper-cse,
.portal-search-modal__results .gsc-results-wrapper-overlay,
.portal-search-modal__results .gsc-results-wrapper-visible,
.portal-search-modal__results .gsc-results,
.portal-search-modal__results .gsc-resultsbox-visible,
.portal-search-modal__results .gsc-expansionArea {
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: static !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    color: var(--color-texto-base) !important;
}

.portal-search-modal__results .gsc-tabsArea,
.portal-search-modal__results .gsc-imageResult,
.portal-search-modal__results .gsc-imageResult-column,
.portal-search-modal__results .gsc-modal-background-image {
    display: none !important;
}

.portal-search-modal__results .gsc-webResult.gsc-result,
.portal-search-modal__results .gsc-results .gsc-imageResult,
.portal-search-modal__results .gs-webResult.gs-result,
.portal-search-modal__results .gsc-webResult.gsc-result.gsc-promotion,
.portal-search-modal__results .gsc-webResult.gsc-result:hover,
.portal-search-modal__results .gsc-results .gsc-imageResult:hover,
.portal-search-modal__results .gsc-webResult.gsc-result.gsc-promotion:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.portal-search-modal__results .gsc-webResult.gsc-result {
    border-bottom: 1px solid var(--color-borda-base) !important;
    padding: 0.75rem 0 !important;
}

.portal-search-modal__results .gsc-above-wrapper-area,
.portal-search-modal__results .gsc-result-info,
.portal-search-modal__results .gsc-orderby-container,
.portal-search-modal__results .gsc-orderby,
.portal-search-modal__results .gsc-selected-option,
.portal-search-modal__results .gsc-refinementBlock,
.portal-search-modal__results .gsc-refinementHeader,
.portal-search-modal__results .gcsc-more-maybe-branding-root,
.portal-search-modal__results .gcsc-find-more-on-google-branding {
    color: var(--color-texto-muted) !important;
}

.portal-search-modal__results .gsc-orderby-container,
.portal-search-modal__results .gsc-orderby {
    background-color: transparent !important;
    border-color: var(--color-borda-base) !important;
}

.portal-search-modal__results .gsc-selected-option,
.portal-search-modal__results .gsc-option-menu-item,
.portal-search-modal__results .gsc-option-menu-item-highlighted {
    background-color: var(--color-fundo-elevado) !important;
    color: var(--color-texto-base) !important;
    border-color: var(--color-borda-base) !important;
}

.portal-search-modal__results .gsc-refinementhActive,
.portal-search-modal__results .gsc-refinementhActive a,
.portal-search-modal__results .gsc-refinementhInactive,
.portal-search-modal__results .gsc-refinementhInactive a {
    background-color: transparent !important;
    color: var(--color-link) !important;
    border-color: var(--color-borda-base) !important;
}

.portal-search-modal__results .gsc-refinementhActive,
.portal-search-modal__results .gsc-refinementhActive a {
    color: var(--color-texto-base) !important;
    font-weight: 700;
}

.portal-search-modal__results .gs-title,
.portal-search-modal__results .gs-title *,
.portal-search-modal__results .gs-promotion a.gs-title,
.portal-search-modal__results .gs-promotion a.gs-title * {
    color: var(--color-link) !important;
    text-decoration: none !important;
}

.portal-search-modal__results .gs-title:hover,
.portal-search-modal__results .gs-title:hover *,
.portal-search-modal__results .gs-promotion a.gs-title:hover,
.portal-search-modal__results .gs-promotion a.gs-title:hover * {
    color: var(--color-link-hover) !important;
    text-decoration: underline !important;
}

.portal-search-modal__results .gs-snippet,
.portal-search-modal__results .gs-visibleUrl,
.portal-search-modal__results .gs-visibleUrl *,
.portal-search-modal__results .gs-promotion .gs-snippet,
.portal-search-modal__results .gs-richsnippet-box,
.portal-search-modal__results .gs-bidi-start-align {
    color: var(--color-texto-muted) !important;
}

.portal-search-modal__results .gcsc-find-more-on-google,
.portal-search-modal__results .gcsc-find-more-on-google a,
.portal-search-modal__results .gcsc-find-more-on-google a:visited {
    color: var(--color-link) !important;
    text-decoration: none !important;
}

.portal-search-modal__results .gcsc-find-more-on-google a:hover {
    color: var(--color-link-hover) !important;
    text-decoration: underline !important;
}

.portal-search-modal__results .gcsc-find-more-on-google svg,
.portal-search-modal__results .gcsc-find-more-on-google path {
    fill: currentColor !important;
}

.portal-search-modal__results .gsc-cursor-box {
    border-color: var(--color-borda-base) !important;
    background-color: transparent !important;
}

.portal-search-modal__results .gsc-cursor-page {
    color: var(--color-link) !important;
    background-color: transparent !important;
    border-color: var(--color-borda-base) !important;
}

.portal-search-modal__results .gsc-cursor-current-page {
    color: var(--color-texto-base) !important;
    background-color: transparent !important;
    border-color: var(--color-borda-forte) !important;
    font-weight: 700;
}