/* ============================================================================
   Camada de marca CDC sobre o DS Gov BR
   ----------------------------------------------------------------------------
   Carregar SEMPRE depois de core.min.css.

   Estrategia: em vez de perseguir token de componente um a um, sobrescrevemos a
   escala de origem `--blue-warm-vivid-*`. Botao, link, tag, menu, checkbox,
   breadcrumb e afins derivam dela, entao todos acompanham automaticamente.

   O DS aponta:
       --color-primary-default : #1351b4  (literal, precisa de override proprio)
       --interactive           : var(--blue-warm-vivid-70)
       --interactive-light     : var(--blue-warm-vivid-70)
       --interactive-dark      : var(--blue-warm-20)

   Por isso o azul CDC (#005eaa) entra na posicao 70 da escala.
   ========================================================================== */

:root {
    /* ── Escala azul CDC (substitui blue-warm-vivid do gov.br) ──────────────
       Rampa construida em torno de #005eaa, mantendo os mesmos saltos de
       luminancia da escala original para nao quebrar contraste. */
    --blue-warm-vivid-5:      #eef6fd;
    --blue-warm-vivid-5-rgb:  238, 246, 253;
    --blue-warm-vivid-10:     #d2e7f6;
    --blue-warm-vivid-10-rgb: 210, 231, 246;
    --blue-warm-vivid-20:     #a5cfec;
    --blue-warm-vivid-20-rgb: 165, 207, 236;
    --blue-warm-vivid-30:     #6fb2e0;
    --blue-warm-vivid-30-rgb: 111, 178, 224;
    --blue-warm-vivid-40:     #3a90cf;
    --blue-warm-vivid-40-rgb: 58, 144, 207;
    --blue-warm-vivid-50:     #1173bd;
    --blue-warm-vivid-50-rgb: 17, 115, 189;
    --blue-warm-vivid-60:     #0069bd;
    --blue-warm-vivid-60-rgb: 0, 105, 189;
    --blue-warm-vivid-70:     #005eaa;   /* primaria CDC */
    --blue-warm-vivid-70-rgb: 0, 94, 170;
    --blue-warm-vivid-80:     #00345e;   /* primaria escura CDC */
    --blue-warm-vivid-80-rgb: 0, 52, 94;
    --blue-warm-vivid-90:     #002138;
    --blue-warm-vivid-90-rgb: 0, 33, 56;

    /* Literal no DS: nao deriva da escala, precisa de override direto. */
    --color-primary-default:  #005eaa;

    /* ── Tokens de marca CDC, para uso em CSS proprio ───────────────────────
       Nao sao do DS. Servem para o que o design system nao cobre. */
    --cdc-primary:        #005eaa;
    --cdc-primary-dark:   #00345e;
    --cdc-primary-light:  #e7f2fb;
    --cdc-accent:         #f7c600;
}

/* ── Tipografia ──────────────────────────────────────────────────────────────
   Rawline e a fonte oficial do gov.br e ja era usada na versao anterior do CDC.
   Servida localmente para nao depender de CDN (proibido pelo padrao). */
@font-face {
    font-family: 'Rawline';
    src: url('/assets/fonts/rawline/rawline-400.woff2') format('woff2'),
         url('/assets/fonts/rawline/rawline-400.ttf')   format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rawline';
    src: url('/assets/fonts/rawline/rawline-600.woff2') format('woff2'),
         url('/assets/fonts/rawline/rawline-600.ttf')   format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rawline';
    src: url('/assets/fonts/rawline/rawline-700.woff2') format('woff2'),
         url('/assets/fonts/rawline/rawline-700.ttf')   format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Marca no cabecalho ──────────────────────────────────────────────────────
   Usa cdc-logo-badge.svg: mesmo desenho de cdc-logo.svg, mas com viewBox
   recortado no badge. O arquivo original tem canvas 827x193 com o badge
   ocupando so os 32% da esquerda — sem o recorte, o navegador reservava a
   largura toda e abria um vao vazio ao lado do logo. */
.cdc-logo-header {
    height: 40px;
    width: auto;
}

@media (max-width: 575px) {
    .cdc-logo-header {
        height: 32px;
    }
}

/* ── Correcao: atributo hidden vencido pelos componentes ─────────────────────
   O reset do DS traz [hidden]{display:none}, mas .br-message{display:flex} e
   .feedback{display:inline-flex} vem depois com a mesma especificidade e
   ganham. Resultado: mensagem de erro vazia e feedback de campo aparecendo
   sem haver erro. O !important devolve o comportamento esperado do atributo. */
[hidden] {
    display: none !important;
}

/* ── Textos do cabecalho ─────────────────────────────────────────────────────
   O DS pinta .header-sign e .header-subtitle com var(--color), que no
   cabecalho resolve para um cinza claro demais e some no fundo branco.
   Fixamos aqui usando os proprios tokens de cinza do design system. */
.br-header .header-sign,
.br-header .header-subtitle {
    color: var(--gray-80, #333);
}

.br-header .header-title a,
.br-header .header-title {
    color: var(--blue-warm-vivid-70);
}

/* Assinatura ao lado do logo, no cabecalho. */
.cdc-assinatura {
    font-size: var(--font-size-scale-down-02, .8125rem);
    line-height: 1.3;
    max-width: 22rem;
}

/* ============================================================================
   Calendario (FullCalendar) no visual CDC
   ----------------------------------------------------------------------------
   O FullCalendar traz estilo proprio, pensado para agenda cheia em tela larga.
   Aqui ele e um calendario de consulta de uma unica sala, entao o ajuste vai
   no sentido de compactar e dar hierarquia.
   ========================================================================== */

.fc {
    /* Tokens do proprio FullCalendar: preferimos configurar por eles a
       perseguir seletor de componente. */
    --fc-border-color: var(--gray-20, #dfe1e2);
    --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: var(--gray-2, #fbfcfd);
    --fc-today-bg-color: var(--blue-warm-vivid-5);
    --fc-event-text-color: #fff;

    font-size: var(--font-size-scale-down-01, .875rem);
}

/* Impede que arrastar o mouse selecione o calendario inteiro como texto —
   era o que fazia a grade toda parecer "marcada" ao passar o cursor. */
.fc .fc-daygrid-body,
.fc .fc-col-header,
.fc .fc-toolbar {
    -webkit-user-select: none;
    user-select: none;
}

/* ── Barra superior ──────────────────────────────────────────────────────── */
.fc .fc-toolbar {
    gap: .75rem;
    flex-wrap: wrap;
}

/* O locale pt-br entrega "julho de 2026", tudo minusculo. Capitalizar so a
   primeira letra: `capitalize` subiria tambem a preposicao ("Julho De 2026"),
   e em ingles nao atrapalha porque o locale ja entrega "July 2026". */
.fc .fc-toolbar-title {
    font-size: var(--font-size-scale-up-01, 1.125rem);
    font-weight: 600;
    color: var(--blue-warm-vivid-80);
    text-transform: none;
}

.fc .fc-toolbar-title::first-letter {
    text-transform: uppercase;
}

.fc .fc-button {
    background-color: transparent;
    border-color: var(--gray-20, #dfe1e2);
    color: var(--blue-warm-vivid-70);
    font-size: var(--font-size-scale-down-01, .875rem);
    font-weight: 600;
    padding: .25rem .75rem;
    /* Sem transform: os rotulos ja vem do servidor com a caixa certa
       (buttonText). Aplicar capitalize aqui repetiria o problema do titulo
       assim que algum rotulo tiver mais de uma palavra. */
    text-transform: none;
    box-shadow: none;
}

.fc .fc-button:hover:not(:disabled) {
    background-color: var(--blue-warm-vivid-5);
    border-color: var(--blue-warm-vivid-70);
    color: var(--blue-warm-vivid-80);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--blue-warm-vivid-70);
    border-color: var(--blue-warm-vivid-70);
    color: #fff;
}

.fc .fc-button:focus-visible {
    outline: 2px solid var(--blue-warm-vivid-70);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── Cabecalho dos dias da semana ────────────────────────────────────────── */
.fc .fc-col-header-cell {
    background: var(--gray-2, #fbfcfd);
    border-color: var(--fc-border-color);
}

.fc .fc-col-header-cell-cushion {
    padding: .5rem .25rem;
    font-size: var(--font-size-scale-down-02, .8125rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gray-70, #555);
    text-decoration: none;
}

/* ── Celula do dia ───────────────────────────────────────────────────────── */
/* Altura contida: sem isso a linha cresce ate caber tudo e o mes ocupa
   varias telas. Rolagem interna resolve dia com muitos eventos. */
.fc .fc-daygrid-day-frame {
    min-height: 84px;
}

.fc .fc-daygrid-day-events {
    margin-top: .125rem;
    min-height: 0;
}

/* Destaque APENAS da celula sob o cursor. */
.fc .fc-daygrid-day:hover {
    background-color: var(--blue-warm-vivid-5);
}

.fc .fc-day-today {
    background-color: var(--fc-today-bg-color) !important;
}

.fc .fc-day-other .fc-daygrid-day-top {
    opacity: .45;
}

/* ── Numero do dia ───────────────────────────────────────────────────────── */
/* O FullCalendar renderiza o numero como <a data-navlink>, que herdava cor de
   link e ganhava sublinhado no hover. Vira texto comum. */
.fc .fc-daygrid-day-number {
    padding: .35rem .5rem;
    font-size: var(--font-size-scale-down-01, .875rem);
    font-weight: 600;
    color: var(--gray-80, #333);
    text-decoration: none !important;
    border-radius: 100em;
    line-height: 1;
}

.fc .fc-daygrid-day-number:hover {
    background-color: var(--blue-warm-vivid-10);
    color: var(--blue-warm-vivid-80);
    text-decoration: none !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    background-color: var(--blue-warm-vivid-70);
    color: #fff;
}

/* ── Eventos ─────────────────────────────────────────────────────────────── */
/* A cor de fundo vem do JS (paleta conferida em contraste). Aqui garantimos
   que o texto seja sempre branco: sem isso ele herdava a cor de link e ficava
   fundo e texto praticamente na mesma cor. */
.fc .fc-event,
.fc .fc-daygrid-event {
    border: none;
    border-radius: 3px;
    padding: 1px 5px;
    margin-bottom: 2px;
    font-size: var(--font-size-scale-down-02, .8125rem);
    line-height: 1.35;
    cursor: pointer;
}

.fc .fc-event,
.fc .fc-event *,
.fc .fc-daygrid-event .fc-event-title,
.fc .fc-daygrid-event .fc-event-time {
    color: #fff !important;
    text-decoration: none !important;
}

.fc .fc-event-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc .fc-event-time {
    font-weight: 400;
    opacity: .9;
}

.fc .fc-event:focus-visible {
    outline: 2px solid var(--blue-warm-vivid-80);
    outline-offset: 1px;
}

/* "+N mais" nao e evento: nao deve receber o texto branco das regras acima. */
.fc .fc-daygrid-more-link {
    color: var(--blue-warm-vivid-70) !important;
    font-size: var(--font-size-scale-down-02, .8125rem);
    font-weight: 600;
    text-decoration: none !important;
    padding: 0 .25rem;
}

.fc .fc-daygrid-more-link:hover {
    text-decoration: underline !important;
}

/* ── Visao de lista ──────────────────────────────────────────────────────── */
.fc .fc-list-day-cushion {
    background: var(--blue-warm-vivid-5);
}

.fc .fc-list-event:hover td {
    background: var(--blue-warm-vivid-5);
}

.fc .fc-list-event-title a {
    color: var(--gray-80, #333);
    text-decoration: none;
}

@media (max-width: 575px) {
    .fc .fc-daygrid-day-frame {
        min-height: 64px;
    }

    .fc .fc-toolbar-title {
        font-size: var(--font-size-scale-base, 1rem);
    }
}

/* ── Seletor de idioma ───────────────────────────────────────────────────────
   Controle segmentado no cabecalho, sobre fundo claro. Fica a esquerda do
   botao Entrar (visitante) ou do avatar (autenticado). */
.cdc-idioma {
    display: flex;
    align-items: center;
    margin: 0 var(--spacing-scale-2x, 1rem) 0 0;
}

.cdc-idioma__grupo {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border: 1px solid var(--gray-20, #dfe1e2);
    border-radius: 100em;
    background: #fff;
}

.cdc-idioma__opcao {
    min-width: 36px;
    padding: 3px 10px;
    border: none;
    border-radius: 100em;
    background: transparent;
    color: var(--gray-70, #555);
    font-family: inherit;
    font-size: var(--font-size-scale-down-02, .8125rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.cdc-idioma__opcao:hover {
    background: var(--blue-warm-vivid-5);
    color: var(--blue-warm-vivid-80);
}

.cdc-idioma__opcao--ativo {
    background: var(--blue-warm-vivid-70);
    color: #fff;
    cursor: default;
}

.cdc-idioma__opcao--ativo:hover {
    background: var(--blue-warm-vivid-70);
    color: #fff;
}

.cdc-idioma__opcao:focus-visible {
    outline: 2px solid var(--blue-warm-vivid-70);
    outline-offset: 2px;
}

@media (max-width: 575px) {
    .cdc-idioma {
        margin-right: var(--spacing-scale-base, .5rem);
    }

    .cdc-idioma__opcao {
        min-width: 30px;
        padding: 3px 7px;
    }
}

/* ============================================================================
   Modais
   ----------------------------------------------------------------------------
   O .br-modal-header do DS e position:relative sem flex, esperando que o botao
   de fechar seja posicionado por conta. Sem isso o X cai numa linha abaixo do
   titulo, que era o defeito visivel no modal de detalhe da reserva.
   ========================================================================== */

.br-scrim-util.foco .br-modal {
    --modal-size: var(--modal-medium);
    width: min(var(--modal-medium), calc(100vw - 2rem));
}

.br-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.br-modal-header .br-modal-title {
    flex: 1 1 auto;
    font-size: var(--font-size-scale-up-01, 1.125rem);
    line-height: 1.35;
    color: var(--blue-warm-vivid-80);
}

/* O botao de fechar nao deve encolher nem ser esticado pelo align-items. */
.br-modal-header > .br-button.circle {
    flex: 0 0 auto;
}

/* Rodape sem acao nenhuma vira uma faixa cinza solta. Visitante nao
   autenticado nao tem botao de editar, entao isso acontece com frequencia. */
.br-modal-footer:empty {
    display: none;
}

/* ── Lista de atributos dentro do modal ──────────────────────────────────── */
.cdc-detalhe {
    margin: 0;
}

.cdc-detalhe__linha {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: .25rem 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--gray-10, #f0f0f0);
}

.cdc-detalhe__linha:last-child {
    border-bottom: none;
}

.cdc-detalhe__rotulo {
    font-weight: 600;
    color: var(--gray-70, #555);
    font-size: var(--font-size-scale-down-01, .875rem);
}

.cdc-detalhe__valor {
    color: var(--gray-90, #1b1b1b);
    word-break: break-word;
}

@media (max-width: 480px) {
    .cdc-detalhe__linha {
        grid-template-columns: 1fr;
        gap: .125rem;
    }
}

/* ── Rodape ──────────────────────────────────────────────────────────────────
   Faixa escura com a marca CDC centralizada e a assinatura institucional
   abaixo. Sem links: a aplicacao e um sistema interno, nao replica o rodape
   institucional do cdc.gov. */
.cdc-footer {
    background: var(--blue-warm-vivid-80);
    color: #fff;
    padding: 2rem 0;
    margin-top: 3rem;
}

.cdc-footer__marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

/* Logo com tagline: canvas 827x193, proporcao ~4,3:1. Largura generosa, senao
   a tagline a direita fica ilegivel.

   Sem filtro de cor: o SVG ja e feito para fundo escuro — badge azul #0057b7
   com as letras CDC em branco dentro, e a tagline em branco ao lado. Aplicar
   invert() pintava o badge de branco e sumia com as letras. */
.cdc-footer__logo {
    width: 100%;
    max-width: 280px;
    height: auto;
}

.cdc-footer__assinatura-nome {
    font-size: var(--font-size-scale-down-01, .875rem);
    color: rgba(255, 255, 255, .88);
}

@media (max-width: 767px) {
    .cdc-footer__logo {
        max-width: 120px;
    }
}