/* ==========================================================================
   Variáveis (tokens) — toda cor, fonte e medida importante mora aqui.
   O tema escuro (logo abaixo) só redefine essas variáveis; o resto do
   arquivo usa var(--...) e por isso troca de cor sozinho.
   ========================================================================== */
:root {
    /* Avisa o navegador pra desenhar controles nativos (seletor de data,
       barra de rolagem) no tema claro */
    color-scheme: light;

    /* Paleta da identidade visual */
    --cor-principal: #1F5F5B;
    --cor-principal-escura: #174845;   /* hover de botões/links */
    --cor-principal-suave: #E3ECEA;
    --cor-texto-sobre-principal: #FFFFFF;   /* texto em cima de fundo principal */
    --cor-fundo: #F6F4EE;
    --cor-superficie: #FFFFFF;
    --cor-texto: #20232B;
    --cor-texto-suave: #5C616C;
    --cor-borda: #DEDAD0;
    --cor-borda-forte: #C9C4B8;
    --cor-linha-hover: #FBFAF7;
    --cor-perigo: #C4432B;
    --cor-perigo-suave: #F7E4DF;
    --cor-sucesso: #3E7C59;
    --cor-sucesso-suave: #E3EFE7;
    --cor-aviso: #8A5A00;              /* "Atenção!" (ex: médico sem agenda no dia) */
    --cor-aviso-suave: #FBF0D9;
    /* Situações do agendamento na agenda (ver "Cores por situação"):
       amarelo = agendado (ainda falta confirmar), verde = confirmado,
       azul = atendido. -texto = cor da letra em cima de cada uma. */
    --cor-status-agendado: #E3AE1F;
    --cor-status-agendado-texto: #2B2200;
    /* Amarelo puro some no fundo claro: bolinhas amarelas ganham este contorno */
    --cor-status-agendado-contorno: #A87A00;
    --cor-status-confirmado: #357A4F;
    --cor-status-atendido: #2F6DB5;
    --cor-status-claro-texto: #FFFFFF;

    /* Sidebar (fica verde-petróleo em qualquer tema) */
    --sidebar-fundo: var(--cor-principal);
    --sidebar-texto: rgba(255, 255, 255, 0.72);
    --sidebar-texto-ativo: #FFFFFF;
    --sidebar-item-ativo: rgba(255, 255, 255, 0.12);
    --sidebar-largura: 15rem;          /* menu aberto */
    --sidebar-recolhida: 4.25rem;      /* menu recolhido, só ícones */

    /* Tipografia */
    --fonte-titulo: "Manrope", "Segoe UI", system-ui, sans-serif;
    --fonte-corpo: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

    /* Cantos: pequenos e consistentes (nada de tudo muito arredondado) */
    --raio: 6px;
    --raio-pequeno: 4px;

    /* Movimento: tempos curtos, pra animação ajudar e não atrasar ninguém */
    --duracao-rapida: 150ms;    /* hover, foco */
    --duracao: 220ms;           /* algo aparecendo na tela */
    --curva-saida: cubic-bezier(0.2, 0.7, 0.3, 1);   /* começa rápido, freia no fim */
    /* Menu: um pouco mais longo, com uma curva que "assenta" suave no fim */
    --duracao-menu: 300ms;
    --curva-menu: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ==========================================================================
   Tema escuro — ativado pelo atributo data-tema="escuro" na tag <html>
   (quem coloca esse atributo é o JavaScript do base.html / tema.js).
   Não é só "inverter" as cores: o verde-petróleo original ficaria escuro
   demais sobre fundo escuro, então usamos um tom mais claro dele.
   ========================================================================== */
[data-tema="escuro"] {
    color-scheme: dark;

    --cor-principal: #5FAEA6;
    --cor-principal-escura: #7CC3BB;   /* no escuro o hover fica mais claro */
    --cor-principal-suave: #1D3432;
    --cor-texto-sobre-principal: #0F1F1E;
    --cor-fundo: #16181D;
    --cor-superficie: #1E2128;
    --cor-texto: #E6E4DE;
    --cor-texto-suave: #9EA3AD;
    --cor-borda: #2E323B;
    --cor-borda-forte: #3F4450;
    --cor-linha-hover: #23262E;
    --cor-perigo: #E57B63;
    --cor-perigo-suave: #3A2420;
    --cor-sucesso: #74B892;
    --cor-sucesso-suave: #1D3126;
    --cor-aviso: #E2B55C;
    --cor-aviso-suave: #352A15;
    --cor-status-agendado: #E2B55C;
    --cor-status-agendado-texto: #1F1800;
    --cor-status-agendado-contorno: #E2B55C;  /* no escuro o amarelo já aparece */
    --cor-status-confirmado: #74B892;
    --cor-status-atendido: #74A7E3;
    --cor-status-claro-texto: #12161C;  /* cores claras no escuro → letra escura */

    --sidebar-fundo: #112F2D;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Tamanho-base de TUDO. Quase todas as medidas do sistema usam "rem"
   (múltiplos deste tamanho), então mudar aqui escala a interface inteira
   na mesma proporção — como o zoom do navegador, só que já no padrão.
   81.25% = 13px em vez dos 16px padrão (o visual a ~80% de zoom).
   Em porcentagem (e não "13px") de propósito: quem aumentou a letra
   padrão do navegador por dificuldade de visão continua vendo maior.
   No celular volta pra 100% (ver o bloco "Telas menores" no fim). */
html {
    font-size: 81.25%;
}

body {
    margin: 0;
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

a {
    color: var(--cor-principal);
}

a:hover {
    color: var(--cor-principal-escura);
}

/* O atributo HTML "hidden" esconde elementos, mas qualquer "display: flex"
   do nosso CSS passaria por cima dele. Essa regra garante que hidden
   sempre vença, em qualquer navegador. */
[hidden] {
    display: none !important;
}

/* Contorno visível só quando se navega pelo teclado (Tab), não no clique */
:focus-visible {
    outline: 2px solid var(--cor-principal);
    outline-offset: 2px;
}

/* ==========================================================================
   Layout: menu lateral recolhível + área de conteúdo
     - Recolhido (padrão): faixa estreita, só com os ícones.
     - Mouse em cima: abre POR CIMA do conteúdo (não empurra nada).
     - Fixo (clique na logo): o menu.js coloca a classe "menu-fixo" no
       <html>; o menu fica aberto e o conteúdo se ajusta ao lado dele.

   Por que a animação é fluida: o menu NUNCA muda de largura. Mudar
   largura obriga o navegador a recalcular o layout a cada quadro (e
   engasga). Em vez disso, só usamos "transform" (deslizar), que a placa
   de vídeo faz sozinha, sem recalcular nada — liso no Edge, Chrome e
   Firefox. O truque:
     .sidebar          = o painel verde, sempre com a largura de ABERTO,
                         deslizado pra esquerda até sobrar só a faixa.
     .sidebar-interno  = o conteúdo do painel, deslizado a MESMA
                         distância pra direita — assim os ícones ficam
                         exatamente na faixa visível.
   Ao abrir, os dois voltam pra 0 juntos: os ícones ficam parados e o
   painel "desenrola" por baixo deles, revelando os textos.
   ========================================================================== */
.sidebar {
    --deslocamento: calc(var(--sidebar-largura) - var(--sidebar-recolhida));

    position: fixed;
    inset: 0 auto 0 0;          /* top 0, left 0, bottom 0 */
    z-index: 30;                /* por cima do conteúdo quando abre no hover */
    width: var(--sidebar-largura);
    overflow: hidden;           /* o que passa da borda do painel não aparece */
    background: var(--sidebar-fundo);
    color: var(--sidebar-texto);
    transform: translateX(calc(-1 * var(--deslocamento)));
    transition:
        transform var(--duracao-menu) var(--curva-menu),
        box-shadow var(--duracao-menu) ease;
}

.sidebar-interno {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem 0.75rem;
    overflow-y: auto;           /* telas baixas: deixa rolar em vez de cortar */
    transform: translateX(var(--deslocamento));
    transition: transform var(--duracao-menu) var(--curva-menu);
}

/* Aberto pelo MOUSE — só em aparelhos que têm mouse de verdade.
   "(hover: hover) and (pointer: fine)" = o aparelho consegue "parar em
   cima" de algo com precisão (mouse/touchpad). No celular não: lá o toque
   ativava o :hover e ele ficava "preso", sem jeito de fechar o menu. No
   celular o menu abre só tocando na logo (menu.js).
   O pequeno atraso (50ms) evita abrir quando o mouse só "passa raspando". */
@media (hover: hover) and (pointer: fine) {
    .sidebar:hover,
    .sidebar:hover .sidebar-interno {
        transform: none;
        transition-delay: 50ms;
    }

    /* Sombra só quando está POR CIMA do conteúdo (hover), não quando fixo */
    .sidebar:hover {
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.2);
    }

    .sidebar:hover .rotulo {
        opacity: 1;
        transition: opacity 220ms ease 90ms;
    }
}

/* Aberto por clique na logo (classe "menu-fixo" no <html>) */
.menu-fixo .sidebar,
.menu-fixo .sidebar-interno {
    transform: none;
}

.menu-fixo .sidebar {
    box-shadow: none;
}

/* Aberto pelo teclado (Tab): quem não usa mouse também vê os textos.
   Fica em regras SEPARADAS de propósito: se um navegador não conhecer o
   :has(), ele descarta a regra inteira — e junto iria o :hover. */
.sidebar:has(:focus-visible),
.sidebar:has(:focus-visible) .sidebar-interno {
    transform: none;
}

/* Textos do menu: invisíveis com o menu recolhido. opacity (e não
   display: none) mantém o texto pros leitores de tela, que continuam
   anunciando "Agenda", "Pacientes"... mesmo com só o ícone à mostra.
   Ao FECHAR somem rápido; ao ABRIR aparecem com um leve atraso, junto
   com o painel se desenrolando (fica mais suave que tudo de uma vez). */
.rotulo {
    white-space: nowrap;
    opacity: 0;
    transition: opacity 120ms ease;
}

/* (a versão ":hover" desta regra fica no bloco do mouse, mais acima) */
.menu-fixo .sidebar .rotulo {
    opacity: 1;
    transition: opacity 220ms ease 90ms;
}

.sidebar:has(:focus-visible) .rotulo {
    opacity: 1;
}

/* Logo + "SisAgenda": é um botão — clicar fixa/recolhe o menu */
.sidebar-marca {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1.25rem;
    padding: 0 0.25rem;         /* centraliza a logo na faixa recolhida */
    border: none;
    border-radius: var(--raio);
    background: none;
    color: var(--sidebar-texto-ativo);
    font-family: var(--fonte-titulo);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: left;
    cursor: pointer;
}

.sidebar-logo {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    /* Logo da empresa pode vir em qualquer proporção (retangular, por
       exemplo): "contain" encaixa ela inteira no quadrado, sem esticar */
    object-fit: contain;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* Cada item: ícone + texto. O padding de 0.75rem deixa o ícone
   exatamente no meio da faixa recolhida. */
.item-menu {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 2.6rem;
    padding: 0 0.75rem;
    border: none;
    border-radius: var(--raio);
    background: none;
    color: var(--sidebar-texto);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.item-menu:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sidebar-texto-ativo);
}

/* aria-current="page" é colocado pelo base.html no item da página atual */
.item-menu[aria-current="page"] {
    background: var(--sidebar-item-ativo);
    color: var(--sidebar-texto-ativo);
}

/* Ícones (Lucide): desenhados com traço, na cor do texto (currentColor) */
.icone {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

/* Grupo "Administração": separado dos itens do dia a dia por uma linha */
.menu-admin {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.menu-titulo {
    padding: 0 0.75rem 0.35rem;
    font-size: 0.8rem;
}

/* Parte de baixo: tema, trocar senha, sair e quem está logado */
.sidebar-rodape {
    margin-top: auto;           /* empurra o rodapé pro fim do menu */
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* No botão de tema, o texto e o interruptor dividem a linha */
.botao-tema .rotulo {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.sidebar-usuario {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.375rem;  /* centraliza o círculo na faixa recolhida */
}

/* Círculo com a inicial do nome — aparece mesmo recolhido */
.avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: var(--sidebar-texto-ativo);
    font-family: var(--fonte-titulo);
    font-size: 0.9rem;
    font-weight: 700;
}

.sidebar-usuario-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;               /* deixa o nome encolher e ganhar "..." */
    line-height: 1.25;
}

.sidebar-usuario-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sidebar-texto-ativo);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Cargo abaixo do nome ("Administrador geral", "Usuário"...) */
.sidebar-cargo {
    font-size: 0.8rem;
    color: var(--sidebar-texto);
}

/* --------------------------------------------------------------------------
   Interruptor do tema (a "bolinha" que desliza)
   A posição da bolinha segue o data-tema do <html> (e não o aria-pressed
   do botão): o data-tema já vem certo desde o <head>, então a bolinha não
   "desliza sozinha" quando a página carrega no tema escuro.
   -------------------------------------------------------------------------- */
.botao-tema-trilho {
    position: relative;
    flex-shrink: 0;
    width: 2rem;
    height: 1.1rem;
    border: 1px solid currentColor;
    border-radius: 999px;
}

.botao-tema-trilho::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.2rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform 280ms var(--curva-menu);
}

/* A bolinha desliza pro lado direito. Usamos transform (e não trocar
   left por right) porque o navegador só consegue animar entre dois
   valores numéricos — e transform é barato de animar. */
[data-tema="escuro"] .botao-tema-trilho::after {
    transform: translate(calc(1rem - 2px), -50%);
}

/* Na tela de login (sem menu) o botão de tema fica no canto superior direito */
.botao-tema-flutuante {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
    border: none;
    border-radius: var(--raio);
    background: none;
    color: var(--cor-texto-suave);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.botao-tema-flutuante:hover {
    color: var(--cor-texto);
}

/* --------------------------------------------------------------------------
   Área de conteúdo
   .conteudo começa depois da faixa do menu; .conteudo-interno fica
   centralizado no espaço que SOBRA (margin: 0 auto). Assim o conteúdo
   está sempre no meio da área útil — com o menu recolhido ou fixo.
   (Sem transition na margem: o deslize ao fixar o menu é feito pelo
   menu.js só com transform — ver "FLIP" lá.)
   -------------------------------------------------------------------------- */
.conteudo {
    margin-left: var(--sidebar-recolhida);
    padding: 2.25rem 2.5rem 3rem;
}

.menu-fixo .conteudo {
    margin-left: var(--sidebar-largura);
}

.conteudo-interno {
    max-width: 72rem;
    margin: 0 auto;
}

/* Largura da coluna por tipo de tela. Cada template escolhe no bloco
   "largura_pagina" do base.html. Sem classe = larga (tabelas, calendário).
     .pagina-estreita → formulários: título + formulário numa coluna só,
                        centralizada (antes o formulário ficava encostado
                        na esquerda de uma coluna de 72rem)
     .pagina-media    → formulário + uma tabela (ex: editar empresa) */
.pagina-estreita {
    max-width: 30rem;
}

.pagina-estreita .formulario {
    max-width: none;
}

.pagina-media {
    max-width: 48rem;
}

/* Telas sem menu (login) */
.app-simples .conteudo {
    margin-left: 0;
    padding: 12vh 1.25rem 3rem;
}

.app-simples .conteudo-interno {
    max-width: 24rem;
}

.etiqueta {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: var(--raio-pequeno);
    background: var(--cor-principal-suave);
    color: var(--cor-principal);
    font-size: 0.8rem;
    font-weight: 600;
}

.campo-checkbox,
.campo-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.campo-checkbox input,
.campo-radio input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.2rem 0 0;
    accent-color: var(--cor-principal);   /* cor do "check" nos 3 navegadores */
}

.campo-checkbox label,
.campo-radio label {
    font-weight: 600;
}

.campo-checkbox small,
.campo-radio small {
    display: block;
    font-weight: 400;
    color: var(--cor-texto-suave);
}

.formulario-secao {
    margin: 0.5rem 0 -0.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cor-borda);
    font-size: 1rem;
}

/* Campos de nome de usuário: mostram o texto em MAIÚSCULAS enquanto a
   pessoa digita. É só visual — quem garante que fica maiúsculo no banco é
   o servidor (normalizar_nome em routes/usuarios.py). */
.campo-maiusculo input {
    text-transform: uppercase;
}

/* O "placeholder" (texto de exemplo) não precisa ficar gritando */
.campo-maiusculo input::placeholder {
    text-transform: none;
}

/* Título de uma seção abaixo do formulário (ex: usuários da empresa) */
.secao-titulo {
    margin: 2.5rem 0 1rem;
}

.formulario-secao:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ==========================================================================
   Cabeçalho de página: título + ação principal
   ========================================================================== */
/* Lado direito do cabeçalho quando há mais de uma ação (ex: filtro +
   botão na agenda). Quebra pra linha de baixo em tela estreita. */
.cabecalho-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.filtro-medico {
    min-width: 14rem;
}

.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.subtitulo {
    margin: 0.25rem 0 0;
    color: var(--cor-texto-suave);
}

.voltar {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
    text-decoration: none;
}

.voltar:hover {
    color: var(--cor-principal);
}

/* ==========================================================================
   Botões
   ========================================================================== */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--cor-principal);
    border-radius: var(--raio);
    background: var(--cor-principal);
    color: var(--cor-texto-sobre-principal);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.botao:hover {
    background: var(--cor-principal-escura);
    border-color: var(--cor-principal-escura);
    color: var(--cor-texto-sobre-principal);
}

/* Botão "de contorno", pra ações secundárias (ex: Cancelar) */
.botao-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
    font-weight: 600;
    text-decoration: none;      /* quando é um link (<a>) com cara de botão */
    cursor: pointer;
}

.botao-secundario:hover {
    background: var(--cor-fundo);
}

/* Variação vermelha do botão principal, só pra ações destrutivas */
.botao.botao-perigo,
.botao.botao-perigo:hover {
    border-color: var(--cor-perigo);
    background: var(--cor-perigo);
    color: var(--cor-texto-sobre-principal);
}

.botao.botao-perigo:hover {
    filter: brightness(0.92);
}

/* Ações dentro de tabelas/listas: parecem link, não botão pesado */
.acao {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--cor-principal);
    text-decoration: none;
    cursor: pointer;
}

.acao:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.acao-perigo {
    color: var(--cor-perigo);
}

.acao-perigo:hover {
    color: var(--cor-perigo);
}

/* "Excluir" na tela de editar: afastado do botão Salvar, pra ninguém
   clicar num achando que é o outro */
.zona-exclusao {
    margin-top: 2rem;
}

/* Formulário que só envolve um botão (ex: Excluir) — fica em linha */
.form-inline {
    display: inline;
    margin: 0;
}

/* ==========================================================================
   Popup de confirmação (<dialog>)
   ========================================================================== */
.dialogo {
    width: calc(100% - 2rem);
    max-width: 26rem;
    padding: 0;                 /* o padding fica no <form> — ver confirmar.js */
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}

.dialogo form {
    padding: 1.5rem;
}

.dialogo h2 {
    margin-bottom: 0.5rem;
}

.dialogo p {
    margin: 0 0 1.5rem;
    color: var(--cor-texto-suave);
}

.dialogo-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Fundo escurecido atrás do popup. Cor fixa de propósito (sem var()):
   em versões não tão antigas do Chrome/Edge/Firefox o ::backdrop não
   enxerga as variáveis CSS, e o fundo ficaria transparente. */
.dialogo::backdrop {
    background: rgba(16, 18, 22, 0.55);
}

/* ==========================================================================
   Mensagens (flash)
   ========================================================================== */
.flash {
    margin-bottom: 1.25rem;
    padding: 0.7rem 1rem;
    border-left: 3px solid currentColor;
    border-radius: var(--raio-pequeno);
}

.flash-success {
    background: var(--cor-sucesso-suave);
    color: var(--cor-sucesso);
}

.flash-danger,
.flash-erro {
    background: var(--cor-perigo-suave);
    color: var(--cor-perigo);
}

/* ==========================================================================
   Tabelas
   ========================================================================== */
.tabela-rolagem {
    overflow-x: auto;           /* no celular a tabela rola de lado, não quebra */
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
    white-space: nowrap;
}

th {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    background: var(--cor-fundo);
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover td {
    background: var(--cor-linha-hover);
}

.coluna-numero {
    text-align: right;
    font-variant-numeric: tabular-nums;   /* números com mesma largura, alinham melhor */
}

.coluna-acoes {
    text-align: right;
}

.coluna-acoes > * + * {
    margin-left: 1.25rem;
}

.vazio {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--cor-texto-suave);
    white-space: normal;
}

/* ==========================================================================
   Formulários
   ========================================================================== */
.formulario {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 28rem;
    padding: 1.5rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.campo label {
    font-weight: 600;
    font-size: 0.95rem;
}

.campo input,
.campo select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
}

/* Busca em cima de uma lista (ex: pacientes) */
.busca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.busca input {
    flex: 1 1 18rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
}

.busca input:focus {
    outline: none;
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 3px var(--cor-principal-suave);
}

.resultado-busca {
    margin: -0.25rem 0 1rem;
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
}

/* Texto só pra leitores de tela: some da tela, mas continua sendo lido
   (ex: o rótulo "Buscar paciente" do campo de busca) */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Campo de texto de várias linhas (ex: observações do agendamento) */
.campo textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
    resize: vertical;           /* só deixa aumentar pra baixo, não pros lados */
}

.campo textarea:focus,
.campo input:focus,
.campo select:focus {
    outline: none;
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 3px var(--cor-principal-suave);
}

/* Cada navegador desenha o <select> de um jeito (a setinha do Firefox é
   bem diferente da do Edge/Chrome). "appearance: none" remove o visual
   nativo, e desenhamos a nossa própria seta com dois gradientes — usando
   gradiente em vez de imagem porque ele aceita var(), então a seta troca
   de cor sozinha no tema escuro. */
.campo select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--cor-texto-suave) 50%),
        linear-gradient(135deg, var(--cor-texto-suave) 50%, transparent 50%);
    background-position:
        calc(100% - 1.05rem) 55%,
        calc(100% - 0.75rem) 55%;
    background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
    background-repeat: no-repeat;
}

.campo select:disabled {
    color: var(--cor-texto-suave);
    background: var(--cor-fundo);
}

.formulario .botao {
    align-self: flex-start;
    margin-top: 0.25rem;
}

/* ==========================================================================
   Login
   ========================================================================== */
.login-logo {
    width: 2.5rem;
    height: 2.5rem;
}

.login-marca {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    font-family: var(--fonte-titulo);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cor-principal);
}

.login h1 {
    margin-bottom: 0.25rem;
}

.login .subtitulo {
    margin-bottom: 1.75rem;
}

.login .formulario {
    padding: 0;
    border: none;
    background: none;
}

.login .botao {
    align-self: stretch;
}

/* ==========================================================================
   Horários do médico
   ========================================================================== */
.horarios-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2.5rem;
    align-items: start;
}

.dia-semana {
    padding: 1rem 0;
    border-bottom: 1px solid var(--cor-borda);
}

.dia-semana:first-child {
    padding-top: 0;
}

.dia-semana h2 {
    margin-bottom: 0.65rem;
    font-size: 1rem;
}

.lista-horarios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.horario {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.35rem 0.25rem 0.7rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    font-variant-numeric: tabular-nums;
}

.horario-excluir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: none;
    border-radius: var(--raio-pequeno);
    background: none;
    color: var(--cor-texto-suave);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.horario-excluir:hover {
    background: var(--cor-perigo-suave);
    color: var(--cor-perigo);
}

/* Horário adicionado mas ainda não salvo: borda tracejada na cor principal */
.horario-novo {
    border-style: dashed;
    border-color: var(--cor-principal);
    background: var(--cor-principal-suave);
}

/* Horário marcado pra remoção: riscado e apagado, com opção de desfazer */
.horario-removido {
    border-style: dashed;
    background: var(--cor-fundo);
    color: var(--cor-texto-suave);
    text-decoration: line-through;
}

.horario-desfazer {
    padding: 0.1rem 0.35rem;
    border: none;
    border-radius: var(--raio-pequeno);
    background: none;
    color: var(--cor-principal);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.horario-desfazer:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Dias da semana como "botões" de liga/desliga (checkbox por baixo) */
.grupo-dias {
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.grupo-dias legend {
    margin-bottom: 0.35rem;
    padding: 0;
    font-weight: 600;
    font-size: 0.95rem;
}

.dias-semana {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.dia-opcao {
    position: relative;
    cursor: pointer;
}

/* O checkbox fica invisível mas CONTINUA funcionando (clique, Tab, espaço):
   quem aparece é o <span> logo depois dele */
.dia-opcao input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.dia-opcao span {
    display: inline-block;
    min-width: 2.9rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color var(--duracao-rapida) ease, color var(--duracao-rapida) ease;
}

.dia-opcao input:checked + span {
    border-color: var(--cor-principal);
    background: var(--cor-principal);
    color: var(--cor-texto-sobre-principal);
}

.dia-opcao input:focus-visible + span {
    outline: 2px solid var(--cor-principal);
    outline-offset: 2px;
}

/* Dois campos na mesma linha (ex: "Das" e "Até") */
.campos-lado-a-lado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.resumo-adicionar {
    color: var(--cor-sucesso);
    font-weight: 600;
}

/* "Caps Lock está ativado" embaixo dos campos de senha (static/js/capslock.js).
   O ▲ antes do texto é desenhado pelo CSS, pra não depender de emoji. */
.aviso-capslock {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.1rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cor-perigo);
    animation: aparecer var(--duracao-rapida) ease;
}

.aviso-capslock::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 0.35rem solid transparent;
    border-right: 0.35rem solid transparent;
    border-bottom: 0.55rem solid currentColor;
}

.aviso-form {
    margin: -0.25rem 0 0;
    color: var(--cor-perigo);
    font-size: 0.9rem;
}

.dica {
    margin: 0;
    color: var(--cor-texto-suave);
    font-size: 0.875rem;
}

/* "Atenção! Este profissional não tem agenda definida para este dia."
   embaixo do campo de hora do agendamento (formulario.html) */
.aviso-agenda {
    margin-top: 0.25rem;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid currentColor;
    border-radius: var(--raio-pequeno);
    background: var(--cor-aviso-suave);
    color: var(--cor-aviso);
    font-size: 0.95rem;
    animation: aparecer var(--duracao) ease;
}

/* O atributo hidden precisa vencer o display de cima */
.aviso-agenda[hidden] {
    display: none;
}

.aviso-agenda p {
    margin: 0 0 0.3rem;
}

.aviso-agenda a {
    color: inherit;
    font-weight: 600;
}

/* ==========================================================================
   Confirmação pelo paciente (tela Confirmações, editar agendamento e a
   página que o paciente abre pelo link)
   ========================================================================== */
/* Variações de cor da etiqueta de situação (confirmacoes.situacao_confirmacao) */
.etiqueta-sucesso {
    background: var(--cor-sucesso-suave);
    color: var(--cor-sucesso);
}

.etiqueta-perigo {
    background: var(--cor-perigo-suave);
    color: var(--cor-perigo);
}

.etiqueta-aviso {
    background: var(--cor-aviso-suave);
    color: var(--cor-aviso);
}

.etiqueta-neutro {
    background: var(--cor-fundo);
    color: var(--cor-texto-suave);
    box-shadow: inset 0 0 0 1px var(--cor-borda);
}

/* Botões menores, pra caber dois numa linha de tabela */
.botao-pequeno {
    padding: 0.3rem 0.7rem;
    font-size: 0.875rem;
}

.acoes-envio {
    display: inline-flex;
    gap: 0.5rem;
}

/* Nome do paciente na tabela: link pra consulta, sem cara de link até o hover */
.link-discreto {
    color: inherit;
    text-decoration: none;
}

.link-discreto:hover {
    text-decoration: underline;
}

.sem-telefone {
    display: block;
    font-size: 0.8rem;
}

/* Quadro "Confirmação pelo paciente" na tela de editar agendamento */
.quadro-confirmacao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
}

.quadro-confirmacao h2 {
    margin: 0;
    font-size: 1rem;
}

.quadro-confirmacao p {
    margin: 0;
}

/* Mensagem neutra (nem sucesso nem erro), ex: "Esta consulta já passou" */
.flash-neutro {
    background: var(--cor-fundo);
    color: var(--cor-texto-suave);
}

/* Página do paciente: médico / data / horário */
.resumo-consulta {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
}

.resumo-consulta dt {
    font-size: 0.85rem;
    color: var(--cor-texto-suave);
}

.resumo-consulta dd {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Os dois botões da página do paciente ocupam a largura toda (fácil de
   acertar com o dedo no celular) */
.pagina-paciente .botao-secundario {
    align-self: stretch;
}

.pagina-paciente .formulario + .formulario {
    margin-top: 0.75rem;
}

/* ==========================================================================
   Logotipos (Meu perfil e tela da empresa)
   ========================================================================== */
.logo-previa {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
}

/* Quadrado tracejado no lugar da logo, quando a empresa ainda não tem uma */
.logo-vazia {
    border: 2px dashed var(--cor-borda-forte);
    border-radius: var(--raio);
}

/* Logo atual + "Remover logo", lado a lado */
.logo-atual {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* As duas opções (AMPLA / empresa) como cartões clicáveis, um embaixo do
   outro (lado a lado, nome de empresa comprido ficava espremido) */
.escolha-logo {
    display: grid;
    gap: 0.75rem;
}

.opcao-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--duracao-rapida) ease, background var(--duracao-rapida) ease;
}

.opcao-logo small {
    display: block;
    font-weight: 400;
    color: var(--cor-texto-suave);
}

.opcao-logo input {
    accent-color: var(--cor-principal);
    margin: 0;
}

.opcao-indisponivel {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Cartão marcado ganha borda e fundo da cor principal. Em regra SEPARADA
   por causa do :has() (se um navegador antigo não entender, só esta regra
   é ignorada — o radio marcado continua mostrando a escolha) */
.opcao-logo:has(input:checked) {
    border-color: var(--cor-principal);
    background: var(--cor-principal-suave);
}

/* Botão "Escolher arquivo" do campo de logo, com a cara dos nossos botões
   (::file-selector-button funciona no Edge, Chrome e Firefox) */
.campo input[type="file"] {
    padding: 0.4rem;
}

.campo input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Espaço no fim da página pra barra de salvar não cobrir o conteúdo */
.horarios-grade {
    margin-bottom: 6rem;
}

/* Barra flutuante "Salvar / Descartar" no canto inferior direito */
.barra-salvar {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.75rem 0.75rem 0.75rem 1.1rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.barra-salvar-texto {
    font-weight: 600;
}

.barra-salvar-acoes {
    display: flex;
    gap: 0.5rem;
}

.horarios-grade .formulario {
    position: sticky;
    top: 1.5rem;
}

.formulario-titulo {
    margin-bottom: -0.25rem;
}

.texto-suave {
    color: var(--cor-texto-suave);
}

/* ==========================================================================
   Calendário (FullCalendar) — o protagonista da tela de agendamentos.
   O FullCalendar v6 lê essas variáveis --fc-* pra pintar os próprios itens.
   ========================================================================== */
#calendario-wrapper {
    position: relative;
}

#calendario {
    --fc-border-color: var(--cor-borda);
    --fc-page-bg-color: var(--cor-superficie);
    --fc-neutral-bg-color: var(--cor-fundo);
    --fc-today-bg-color: var(--cor-principal-suave);
    --fc-event-bg-color: var(--cor-principal);
    --fc-event-border-color: var(--cor-principal);
    --fc-event-text-color: var(--cor-texto-sobre-principal);
    --fc-button-text-color: var(--cor-texto);
    --fc-button-bg-color: var(--cor-superficie);
    --fc-button-border-color: var(--cor-borda-forte);
    --fc-button-hover-bg-color: var(--cor-fundo);
    --fc-button-hover-border-color: var(--cor-borda-forte);
    --fc-button-active-bg-color: var(--cor-principal);
    --fc-button-active-border-color: var(--cor-principal);

    padding: 1.25rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
}

#calendario .fc-button {
    font-family: var(--fonte-corpo);
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
}

#calendario .fc-button-active,
#calendario .fc-button-primary:not(:disabled):active {
    color: var(--cor-texto-sobre-principal);
}

#calendario .fc-button:focus {
    box-shadow: 0 0 0 3px var(--cor-principal-suave);
}

#calendario .fc-toolbar-title {
    font-family: var(--fonte-titulo);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

/* O FullCalendar em português escreve "setembro de 2026". Deixamos
   maiúscula só a PRIMEIRA letra ("Setembro de 2026"). O antigo
   "text-transform: capitalize" deixava todas as palavras com maiúscula,
   inclusive o "De". */
#calendario .fc-toolbar-title::first-letter {
    text-transform: uppercase;
}

#calendario .fc-toolbar-title:hover {
    color: var(--cor-principal);
}

#calendario .fc-col-header-cell-cushion,
#calendario .fc-daygrid-day-number {
    color: var(--cor-texto);
    text-decoration: none;
}

#calendario .fc-col-header-cell-cushion {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
}

.fc-event {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Cores por situação do agendamento
   O FullCalendar pinta os eventos com as variáveis --fc-event-bg-color e
   --fc-event-border-color. Cada evento recebe a classe da sua situação
   (ex: .status-faltou, vinda de /agendamentos/eventos) e aqui só trocamos
   essas variáveis — como usam as nossas cores, funcionam nos dois temas.
   --cor-situacao também é usada pelos botões de situação em cima do
   calendário. --cor-situacao-texto = a cor das letras em cima dela (no
   amarelo, letra branca não dá pra ler; no escuro, as cores são claras e
   a letra é escura). As cores em si ficam no topo do arquivo
   (--cor-status-*), uma versão pra cada tema.
   -------------------------------------------------------------------------- */
.status-agendado   { --cor-situacao: var(--cor-status-agendado);  --cor-situacao-texto: var(--cor-status-agendado-texto); }
.status-confirmado { --cor-situacao: var(--cor-status-confirmado); --cor-situacao-texto: var(--cor-status-claro-texto); }
.status-atendido   { --cor-situacao: var(--cor-status-atendido);  --cor-situacao-texto: var(--cor-status-claro-texto); }
.status-faltou     { --cor-situacao: var(--cor-perigo);           --cor-situacao-texto: var(--cor-status-claro-texto); }
.status-cancelado  { --cor-situacao: var(--cor-borda-forte);      --cor-situacao-texto: var(--cor-texto); }

#calendario .fc-event[class*="status-"] {
    --fc-event-bg-color: var(--cor-situacao);
    --fc-event-border-color: var(--cor-situacao);
    --fc-event-text-color: var(--cor-situacao-texto);
}

/* No mês, eventos aparecem como "ponto + texto": o ponto leva a cor */
#calendario .fc-daygrid-event-dot {
    border-color: var(--fc-event-border-color, var(--cor-principal));
}

/* Amarelo: o ponto do mês e a bolinha do filtro ganham contorno mais
   escuro, senão quase somem no fundo claro */
#calendario .fc-event.status-agendado .fc-daygrid-event-dot {
    /* o ponto do FullCalendar é desenhado pela própria borda; o contorno
       vem por fora, com box-shadow, pra ele continuar amarelo */
    box-shadow: 0 0 0 1px var(--cor-status-agendado-contorno);
}

.status-agendado .legenda-cor {
    box-shadow: inset 0 0 0 1px var(--cor-status-agendado-contorno);
}

/* Cancelado: riscado e apagado — continua visível (histórico), mas
   deixa claro que aquele horário está livre */
#calendario .fc-event.status-cancelado {
    opacity: 0.6;
}

#calendario .fc-event.status-cancelado .fc-event-title,
#calendario .fc-event.status-cancelado .fc-event-time {
    text-decoration: line-through;
}

/* Botões de situação em cima do calendário: legenda das cores + filtro.
   Parecem a legenda (bolinha + nome); viram "botão" no hover, e o ligado
   ganha borda e fundo suaves. Com um ligado (.com-filtro no grupo), os
   outros ficam apagados, pra ficar claro que a agenda está filtrada. */
.filtro-situacao {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin: 0 0 0.85rem;
}

.situacao-botao {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--cor-texto-suave);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.situacao-botao:hover {
    border-color: var(--cor-borda);
    color: var(--cor-texto);
}

.situacao-botao[aria-pressed="true"] {
    border-color: var(--cor-situacao);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font-weight: 600;
}

.filtro-situacao.com-filtro .situacao-botao[aria-pressed="false"] {
    opacity: 0.55;
}

.legenda-cor {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--cor-situacao);
}

.popup-data {
    display: none;
    position: absolute;
    top: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 0.75rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    box-shadow: 0 6px 20px rgba(32, 35, 43, 0.12);
}

.popup-data.aberto {
    display: block;
}

.popup-data input {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    font: inherit;
}

/* ==========================================================================
   Animações — todas juntas aqui, pra ficar fácil de ajustar num lugar só.
   Regra geral: só animamos opacity, transform e cores, que são leves pro
   navegador e funcionam igual no Edge, Chrome e Firefox.
   ========================================================================== */

/* "transition" = quando uma propriedade muda (ex: no hover), em vez de
   pular direto pro valor novo, o navegador faz a mudança aos poucos. */
.item-menu,
.botao,
.botao-secundario,
.botao-tema-flutuante,
.acao,
.voltar,
.horario-excluir,
.horario-desfazer,
.campo input,
.campo select,
tbody td,
#calendario .fc-button,
#calendario .fc-toolbar-title {
    transition:
        background-color var(--duracao-rapida) ease,
        border-color var(--duracao-rapida) ease,
        color var(--duracao-rapida) ease,
        box-shadow var(--duracao-rapida) ease,
        transform var(--duracao-rapida) ease;
}

/* Botão "afunda" 1px ao ser pressionado — dá sensação de clique físico */
.botao:active,
.botao-secundario:active {
    transform: translateY(1px);
}

/* "@keyframes" = uma animação com começo e fim definidos, que roda
   sozinha quando o elemento aparece (diferente do transition, que
   depende de alguma coisa mudar). */
@keyframes surgir {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes aparecer {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popup-entrar {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Transição de página: o conteúdo surge de leve a cada página carregada.
   "backwards" aplica o estado inicial só DURANTE a animação e depois
   remove o transform. Isso importa: um transform que ficasse no .conteudo
   faria a barra de "Salvar" (position: fixed) grudar no conteúdo em vez
   de na tela. */
.conteudo {
    animation: surgir var(--duracao) var(--curva-saida) backwards;
}

.flash {
    animation: surgir var(--duracao) var(--curva-saida) backwards;
}

/* Popup de confirmação e o fundo escurecido atrás dele */
.dialogo[open] {
    animation: popup-entrar var(--duracao) var(--curva-saida);
}

.dialogo[open]::backdrop {
    animation: aparecer var(--duracao) ease;
}

/* Barra de salvar dos horários: sobe ao aparecer. Animações CSS rodam de
   novo toda vez que o elemento sai de "display: none", então isso
   funciona sempre que o atributo hidden é removido pelo JavaScript. */
.barra-salvar {
    animation: surgir var(--duracao) var(--curva-saida);
}

/* Caixinha de data do calendário (fica centralizada com translateX,
   por isso a animação precisa manter esse -50%) */
@keyframes popup-data-entrar {
    from {
        opacity: 0;
        transform: translate(-50%, -4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

.popup-data.aberto {
    animation: popup-data-entrar var(--duracao-rapida) var(--curva-saida);
}

/* Troca de tema suave com "View Transitions" (ver tema.js): o navegador
   tira uma "foto" da página no tema antigo, aplica o tema novo e faz um
   esmaecer (crossfade) entre a foto e a página nova.
   Antes, TODOS os elementos da página animavam as próprias cores ao mesmo
   tempo (seletor *) — com calendário e tabelas, milhares de animações
   juntas, e o navegador engasgava. Esmaecer uma imagem só é leve: a placa
   de vídeo faz sozinha.
   ::view-transition-old(root) = a foto do tema antigo
   ::view-transition-new(root) = a página já no tema novo */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: ease;
}

/* Durante o esmaecer, o navegador põe uma "camada" por cima da página que,
   por padrão, recebe o mouse. Aí o menu aberto pelo hover (o botão de tema
   fica nele) perderia o mouse e começaria a fechar no meio da troca.
   pointer-events: none deixa o mouse "atravessar" a camada. */
::view-transition {
    pointer-events: none;
}

/* Acessibilidade: quem configurou o sistema operacional pra "reduzir
   movimento" (algumas pessoas sentem tontura com animação) fica sem
   animações. Windows: Configurações > Acessibilidade > Efeitos visuais
   > "Efeitos de animação". */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Telas menores (tablet/celular): a faixa de ícones continua à esquerda.
   Tocar na logo abre o menu POR CIMA do conteúdo (no celular não há
   espaço pra empurrar o conteúdo pro lado).
   ========================================================================== */
@media (max-width: 860px) {
    /* No celular a tela já é pequena: tamanho normal, pra ler e tocar bem */
    html {
        font-size: 100%;
    }

    .conteudo,
    .menu-fixo .conteudo {
        margin-left: var(--sidebar-recolhida);
        padding: 1.5rem 1rem 2.5rem;
    }

    .menu-fixo .sidebar {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    }

    /* Menu aberto no celular: escurece o resto da tela por trás dele. Deixa
       claro que o menu está "por cima" e que tocar fora fecha (quem fecha
       é o menu.js). ::after = um elemento "de enfeite" criado só pelo CSS;
       z-index 25 fica abaixo do menu (30) e acima do conteúdo. */
    .menu-fixo body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 25;
        background: rgba(0, 0, 0, 0.4);
        animation: aparecer var(--duracao) ease;
    }

    .horarios-grade {
        grid-template-columns: 1fr;
    }

    .horarios-grade .formulario {
        position: static;
    }

    .barra-salvar {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        justify-content: space-between;
    }

    #calendario {
        padding: 0.75rem;
    }

    #calendario .fc-header-toolbar {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* ==========================================================================
   Agenda do profissional no cadastro (medicos/formulario.html): "Horários
   por dia da semana" ou "Qualquer dia" (agenda livre)
   ========================================================================== */
.grupo-agenda {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.grupo-agenda > legend {
    margin-bottom: 0.35rem;
    padding: 0;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Os campos "Das / Até / A cada" ficam recuados, debaixo do "Qualquer dia" */
.campos-agenda-livre {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 0 1.65rem;
    padding: 0;
    border: none;
    min-width: 0;
    transition: opacity var(--duracao) ease;
}

.campos-agenda-livre:disabled {
    opacity: 0.5;
}

/* ==========================================================================
   Ausências do profissional (ausencias/listar.html) e a faixa "Fulano não
   atende" no calendário (routes/ausencias.eventos_do_calendario)
   ========================================================================== */
.bloco-ausencia {
    margin-top: 2rem;
}

.bloco-ausencia .cabecalho-pagina {
    margin-bottom: 0.75rem;
}

.bloco-ausencia .secao-titulo {
    margin: 0;
}

.bloco-ausencia .dica {
    margin-bottom: 0.75rem;
}

/* Faixa listrada e neutra: é um aviso sobre o dia, não uma consulta */
#calendario .fc-event.evento-ausencia {
    --fc-event-bg-color: var(--cor-fundo);
    --fc-event-border-color: var(--cor-borda-forte);
    --fc-event-text-color: var(--cor-texto-suave);
    background-image: repeating-linear-gradient(
        -45deg, transparent 0, transparent 6px, var(--cor-borda) 6px, var(--cor-borda) 8px
    );
    font-weight: 600;
}

/* "Lembrar retorno em [data] [Lembrar retorno]" no editar agendamento */
.linha-retorno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.linha-retorno label {
    font-weight: 600;
}

.linha-retorno .campo input {
    width: auto;
}