/* =============================================================================
   OrbiaMed - Design System
   CSS puro, sem framework. Estrategia mobile-first com um unico breakpoint
   estrutural em 1024px (abaixo: PWA app-like / acima: workstation clinica).

   Sumario
   01. Tokens
   02. Reset e base
   03. Acessibilidade (skip link, sr-only, foco)
   04. Shell: topbar, sidebar, main, bottom-nav
   05. Tipografia e cabecalhos de pagina
   06. Componentes: card, badge, botao, avatar, tabela, tabs, accordion
   07. Formularios clinicos (inputs, EVA, Oxford)
   08. Gravador de audio + IA
   09. Blocos de pagina (dashboard, agenda, prontuario, termo de alta)
   10. Feedback: flash, toast, conexao, instalacao PWA
   11. Utilitarios
   12. Desktop (>= 1024px)
   13. Impressao e preferencias do usuario
   ========================================================================== */

/* ---------------------------------------------------------------------------
   01. Tokens
   --------------------------------------------------------------------------- */
:root {
    /* Marca */
    --primary: #0D9488;
    --primary-dark: #0F766E;
    --primary-soft: #CCFBF1;
    --accent: #06B6D4;
    --ai-purple: #8B5CF6;
    --ai-purple-soft: #EDE9FE;

    /* Superficies */
    --bg-body: #F8FAFC;
    --surface: #FFFFFF;
    --surface-muted: #F1F5F9;
    --border: #E2E8F0;
    --border-forte: #CBD5E1;

    /* Texto */
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --text-inverso: #FFFFFF;

    /* Status EVA (dor) e semantica geral */
    --eva-baixa: #10B981;
    --eva-moderada: #F59E0B;
    --eva-alta: #EF4444;
    --success: var(--eva-baixa);
    --warning: var(--eva-moderada);
    --danger: var(--eva-alta);
    --info: #3B82F6;

    /* Tipografia */
    --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fonte-titulo: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;

    /* Escala tipografica fluida */
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);

    /* Espacamento */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;

    /* Formas e sombras */
    --raio-sm: 8px;
    --raio: 14px;
    --raio-lg: 20px;
    --raio-pill: 999px;
    --sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --sombra: 0 4px 16px rgba(15, 23, 42, 0.07);
    --sombra-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

    /* Estrutura */
    --sidebar-w: 268px;
    --topbar-h: 60px;
    --bottomnav-h: 76px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Alvo minimo de toque (WCAG 2.2 AA = 24px; aqui 48px por causa das luvas) */
    --toque-min: 48px;

    --transicao: 160ms ease;
}

/* ---------------------------------------------------------------------------
   02. Reset e base
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/*
  O `display: none` de [hidden] vem da folha do navegador, que perde para
  QUALQUER regra de autor - entao um componente com `display: flex` (.flash, por
  exemplo) continuava aparecendo mesmo marcado como hidden. Aqui isso e trava
  clinica, nao estetica: e o atributo que esconde o aviso de "sem conexao" e o
  de rascunho recuperado quando eles nao valem. Por isso o !important.
*/
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    /* App-like: sem rolagem horizontal e sem "bounce" lateral no mobile. */
    overflow-x: hidden;
    overscroll-behavior-y: contain;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    line-height: 1.25;
    margin: 0 0 var(--sp-2);
    color: var(--text-primary);
    letter-spacing: -0.015em;
}

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-dark); }

img, svg, canvas { max-width: 100%; }

.icone {
    width: 20px;
    height: 20px;
    flex: none;
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--sp-4) 0;
}

code, pre, .mono {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
   03. Acessibilidade
   --------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: var(--sp-3);
    top: -100px;
    z-index: 200;
    padding: var(--sp-3) var(--sp-4);
    background: var(--primary-dark);
    color: var(--text-inverso);
    border-radius: var(--raio-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--transicao);
}
.skip-link:focus { top: calc(var(--safe-top) + var(--sp-2)); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Anel de foco visivel e consistente em todos os controles. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--raio-sm);
}

/* <main> recebe foco programatico pelo skip link, mas sem anel permanente. */
.app-main:focus { outline: none; }

/* ---------------------------------------------------------------------------
   04. Shell
   --------------------------------------------------------------------------- */

/* ---- Top bar (mobile) ---- */
.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: calc(var(--topbar-h) + var(--safe-top));
    padding: var(--safe-top) var(--sp-4) 0;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.topbar__acao,
.topbar__marca {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--raio-sm);
    color: var(--primary-dark);
    text-decoration: none;
}
.topbar__acao { background: var(--surface-muted); }
.topbar__marca {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--text-inverso);
    font-family: var(--fonte-titulo);
    font-weight: 800;
    border-radius: 12px;
}

.topbar__id { min-width: 0; flex: 1; }

.topbar__titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: var(--fs-md);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__subtitulo {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__menu {
    border: 0;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.topbar__menu:active { transform: scale(0.95); }
.topbar__menu-icone { width: 24px; height: 24px; }

/* ---- Menu lateral complementar (mobile/PWA) ---- */
.sidebar-backdrop { display: none; }

@media (max-width: 1023px) {
    body.menu-lateral-aberto { overflow: hidden; }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 90;
        display: flex;
        flex-direction: column;
        width: min(86vw, 340px);
        padding: calc(var(--safe-top) + var(--sp-4)) var(--sp-4)
                 calc(var(--safe-bottom) + var(--sp-4));
        background: var(--surface);
        border-right: 1px solid var(--border);
        box-shadow: var(--sombra-lg);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 220ms ease, visibility 220ms ease;
    }
    .sidebar.is-aberta {
        transform: translateX(0);
        visibility: visible;
    }

    .sidebar-backdrop:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, 0.48);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar__cabecalho {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        margin-bottom: var(--sp-5);
    }
    .sidebar__marca {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        min-width: 0;
        flex: 1;
        color: inherit;
        text-decoration: none;
    }
    .sidebar__logo { display: block; width: 40px; height: 40px; flex-shrink: 0; }
    .sidebar__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
    .sidebar__marca-texto { min-width: 0; }
    .sidebar__marca-texto strong {
        display: block;
        font-family: var(--fonte-titulo);
        font-size: var(--fs-lg);
        font-weight: 800;
        letter-spacing: -0.02em;
    }
    .sidebar__marca-texto small { font-size: 0.6875rem; color: var(--text-secondary); }
    .sidebar__fechar {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: none;
        padding: 0;
        border: 0;
        border-radius: var(--raio-sm);
        background: var(--surface-muted);
        color: var(--text-primary);
        cursor: pointer;
    }
    .sidebar__fechar .icone { width: 22px; height: 22px; }

    .sidebar__nav { flex: 1; }
    .sidebar__lista { display: grid; gap: 2px; }
    /* Estes destinos ja estao na barra inferior do PWA. */
    .sidebar__item--bottom-nav { display: none; }
    .sidebar__link {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        min-height: 48px;
        padding: var(--sp-2) var(--sp-3);
        border-radius: var(--raio-sm);
        color: var(--text-secondary);
        font-size: var(--fs-sm);
        font-weight: 600;
        text-decoration: none;
    }
    .sidebar__link:hover { background: var(--surface-muted); color: var(--text-primary); }
    .sidebar__link.is-ativo { background: var(--primary-soft); color: var(--primary-dark); }
    .sidebar__contador {
        margin-left: auto;
        padding: 1px var(--sp-2);
        font-size: var(--fs-xs);
        line-height: 1.4;
        border-radius: var(--raio-pill);
    }

    .sidebar__grupo-cabecalho { margin: 0; }
    .sidebar__grupo-botao {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2);
        width: 100%;
        min-height: 36px;
        margin: var(--sp-4) 0 var(--sp-2);
        padding: 0 var(--sp-3);
        border: 0;
        background: transparent;
        color: var(--text-secondary);
        font: inherit;
        font-size: var(--fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        cursor: pointer;
    }
    .sidebar__grupo-seta {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        transition: transform var(--transicao);
    }
    .sidebar__grupo-botao[aria-expanded="true"] .sidebar__grupo-seta { transform: rotate(180deg); }
    .sidebar__grupo-painel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 220ms ease;
    }
    .sidebar__grupo-painel.is-aberto { grid-template-rows: 1fr; }
    .sidebar__grupo-painel > .sidebar__lista { overflow: hidden; min-height: 0; }

    .sidebar__rodape {
        display: grid;
        gap: var(--sp-3);
        margin-top: var(--sp-5);
        padding-top: var(--sp-4);
        border-top: 1px solid var(--border);
    }
    .sidebar__conexao { justify-self: start; }
    .sidebar__clinicas { display: grid; gap: var(--sp-1); }
    .sidebar__clinicas-rotulo {
        padding: 0 var(--sp-1);
        color: var(--text-secondary);
        font-size: var(--fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .sidebar__clinicas .selecao { width: 100%; min-width: 0; }
    /* Perfil ja e destino fixo da bottom nav; os demais controles continuam. */
    .sidebar__rodape > .profissional { display: none; }
    .selo-assinatura {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        margin: 0;
        padding: var(--sp-2) var(--sp-3);
        border-radius: var(--raio-sm);
        background: #ECFDF5;
        color: #047857;
        font-size: var(--fs-xs);
        font-weight: 700;
    }
    .selo-assinatura--inativo { background: #FFFBEB; color: #B45309; }
    .selo-assinatura__icone { width: 16px; height: 16px; }
    .sidebar__sair { margin: 0; }
}

/* ---- Conteudo ---- */
.app-main {
    padding: calc(var(--topbar-h) + var(--safe-top) + var(--sp-4)) var(--sp-4)
             calc(var(--bottomnav-h) + var(--safe-bottom) + var(--sp-6));
    max-width: 1400px;
    margin-inline: auto;
}

.rodape {
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

/* ---- Bottom navigation (mobile/PWA) ---- */
.bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    height: calc(var(--bottomnav-h) + var(--safe-bottom));
    padding: 0 var(--sp-2) var(--safe-bottom);
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}

.bottom-nav__lista {
    display: grid;
    align-items: stretch;
    height: 100%;
}

/*
  A quantidade muda conforme as funcionalidades contratadas da conta.
  `minmax(0, 1fr)` e nao `1fr` puro: um item de grid tem minimo implicito
  igual ao min-content do seu conteudo, entao o rotulo mais largo ("Pacientes")
  forcava a propria coluna a crescer alem de 1/N sempre que a tela era um
  pouco mais estreita que o medido em teste (fonte do sistema maior, aparelho
  diferente) - roubando espaco das colunas vizinhas e deformando a barra
  inteira. Com o minimo travado em 0 as colunas voltam a dividir o espaco em
  partes iguais e quem estoura e o rotulo (contido via elipse abaixo), nao o
  layout.
*/
.bottom-nav__lista--colunas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bottom-nav__lista--colunas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bottom-nav__lista--colunas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bottom-nav__lista--colunas-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.bottom-nav__item {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
}

.bottom-nav__link {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    width: calc(100% - 6px);
    min-width: 0;
    min-height: 60px;
    margin: 6px 3px 10px;
    padding: 7px 2px 6px;
    border-radius: var(--raio);
    /*
      Cor derivada e nao `--text-secondary` puro. Medido em Chrome: o secundario
      sozinho da 4,55:1 contra `--bg-body` - passa no AA por 0,05, e a barra e
      TRANSLUCIDA, entao a cor efetiva do fundo depende do que estiver rolando
      atras. Com uma superficie `--surface-muted` (#F1F5F9) sob a barra o mesmo
      rotulo cai para 4,47:1 e reprova. Puxar 20% para o texto primario leva a
      5,97:1 contra o fundo do app e 5,70:1 nesse pior caso, sem inventar cor
      literal nem apagar a diferenca para o item ativo.
    */
    color: color-mix(in srgb, var(--text-secondary) 80%, var(--text-primary));
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transicao), background-color var(--transicao), transform var(--transicao);
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav__link:hover {
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary-soft) 60%, transparent);
}
.bottom-nav__link:active { transform: scale(0.96); }
/*
  --primary-dark e nao --primary: o teal claro em 12px dava 3,61:1 contra o
  fundo do app - reprovado no AA para texto - justamente no rotulo que diz em
  que tela voce esta. O tom escuro da 5,23:1 (5,00:1 no pior fundo sob a barra
  translucida) e e o mesmo ja usado no hover deste item e no item ativo da
  sidebar do desktop.
*/
.bottom-nav__link.is-ativo {
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary-soft) 78%, transparent);
}

/*
  clamp() em vez de px fixo: entre o menor Android suportado (~320px) e um
  iPhone/tablet PWA maior, o icone e o rotulo acompanham a largura da tela em
  vez de ficar apertados num extremo e desproporcionalmente pequenos no outro.
*/
.bottom-nav__icone { width: clamp(20px, 5.5vw, 23px); height: clamp(20px, 5.5vw, 23px); flex-shrink: 0; }
.bottom-nav__rotulo {
    max-width: 100%;
    overflow: hidden;
    line-height: 1.1;
    font-size: clamp(0.6875rem, 2.6vw, var(--fs-xs));
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Preserva "Pacientes" inteiro nos Androids compactos de 320px. */
@media (max-width: 360px) {
    .bottom-nav { padding-inline: 4px; }
    .bottom-nav__link {
        width: 100%;
        margin-inline: 0;
    }
}

/* FAB central: acao mais frequente do atendimento (gravar evolucao). */
.bottom-nav__item--fab { position: relative; }

.fab {
    position: absolute;
    left: 50%;
    bottom: 22px;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    color: var(--text-inverso);
    background: linear-gradient(140deg, var(--primary) 0%, var(--ai-purple) 130%);
    border: 4px solid color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 10px 24px rgba(13, 148, 136, 0.28);
    text-decoration: none;
    transition: transform var(--transicao), box-shadow var(--transicao);
    transform: translateX(-50%);
}
.fab:active { transform: translateX(-50%) scale(0.94); }
.fab.is-ativo { box-shadow: 0 0 0 4px var(--primary-soft), 0 10px 24px rgba(13, 148, 136, 0.28); }
.fab__icone { width: 27px; height: 27px; }

/* Ponto vermelho = affordance de "gravar". */
.fab__pulso {
    position: absolute;
    top: 9px;
    right: 11px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
    animation: pulso 2.4s ease-in-out infinite;
}

@keyframes pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.82); }
}

/* ---------------------------------------------------------------------------
   05. Cabecalhos de pagina
   --------------------------------------------------------------------------- */
.pagina-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.pagina-titulo {
    font-size: var(--fs-2xl);
    margin: 0;
}

.pagina-subtitulo {
    margin: var(--sp-1) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.secao-titulo {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-lg);
    margin: 0 0 var(--sp-3);
}
.secao-titulo .icone { color: var(--primary); }

/* ---------------------------------------------------------------------------
   06. Componentes
   --------------------------------------------------------------------------- */

/* ---- Card ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    padding: var(--sp-4);
    box-shadow: var(--sombra-sm);
}
.card + .card { margin-top: var(--sp-4); }
.card--destaque { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.card--ia { border-color: var(--ai-purple); background: linear-gradient(180deg, var(--ai-purple-soft) 0%, var(--surface) 42%); }
.card--plano { border-left: 4px solid var(--accent); }

.card__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.card__titulo { margin: 0; font-size: var(--fs-md); }
.card__meta { margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); }

/* ---- Badge ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 3px 10px;
    border-radius: var(--raio-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    background: var(--surface-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.badge .icone { width: 14px; height: 14px; }

.badge--success { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.badge--warning { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.badge--danger  { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.badge--info    { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.badge--accent  { background: #ECFEFF; color: #0E7490; border-color: #A5F3FC; }
.badge--ia      { background: var(--ai-purple-soft); color: #6D28D9; border-color: #DDD6FE; }
.badge--muted   { background: var(--surface-muted); color: var(--text-secondary); }

/* Badge de dor reaproveita a paleta EVA. */
.badge--eva-baixa     { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.badge--eva-moderada  { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.badge--eva-alta      { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }

/* ---- Botoes ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--toque-min);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--raio-sm);
    background: var(--primary);
    color: var(--text-inverso);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicao), transform var(--transicao), box-shadow var(--transicao);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: translateY(1px); }
.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--secundario {
    background: var(--surface);
    color: var(--primary-dark);
    border-color: var(--border-forte);
}
.btn--secundario:hover { background: var(--surface-muted); }

.btn--fantasma { background: transparent; color: var(--text-secondary); }
.btn--fantasma:hover { background: var(--surface-muted); color: var(--text-primary); }

/* Listas oficiais da configuracao NFS-e (municipios, NBS e IBS/CBS). */
.municipio-autocomplete,
.catalogo-autocomplete { position: relative; }

.nfse-sugestoes {
    position: absolute;
    z-index: 40;
    top: calc(100% - 1rem);
    left: 0;
    right: 0;
    display: none;
    max-height: 18rem;
    overflow-y: auto;
    padding: var(--sp-2);
    border: 1px solid var(--border-forte);
    border-radius: var(--raio-sm);
    background: var(--surface);
    box-shadow: var(--sombra-lg);
    scrollbar-width: thin;
    scrollbar-color: var(--border-forte) transparent;
}
.nfse-sugestoes.aberto { display: grid; }
.nfse-sugestao {
    width: 100%;
    padding: var(--sp-3);
    border: 0;
    border-radius: var(--raio-sm);
    color: var(--text-primary);
    background: transparent;
    text-align: left;
    line-height: 1.4;
    cursor: pointer;
}
.nfse-sugestao:hover,
.nfse-sugestao:focus { background: var(--primary-soft); outline: none; }
.nfse-sugestao-vazia { padding: var(--sp-3); color: var(--text-secondary); }

.btn--ia {
    background: linear-gradient(120deg, var(--ai-purple), #6D28D9);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.32);
}
.btn--ia:hover { background: linear-gradient(120deg, #7C3AED, #5B21B6); }

.btn--perigo { background: var(--danger); }
.btn--perigo:hover { background: #DC2626; }

.btn--bloco { width: 100%; }
.btn--sm { min-height: 38px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.btn--grande { min-height: 56px; font-size: var(--fs-md); }

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* ---- Avatar ---- */
.avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: var(--fs-sm);
}
.avatar--sm { width: 36px; height: 36px; font-size: var(--fs-xs); }
.avatar--lg { width: 60px; height: 60px; font-size: var(--fs-md); }

/* ---- Lista de dados (ficha) ---- */
.dados-lista {
    display: grid;
    gap: var(--sp-3);
}
.dados-lista__item { min-width: 0; }
.dados-lista__rotulo {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.dados-lista__valor {
    margin: 0;
    font-size: var(--fs-base);
    overflow-wrap: anywhere;
}

/* ---- Tabela responsiva ----
   Em telas estreitas a tabela vira lista de cartoes usando data-rotulo. */
.tabela-wrap { width: 100%; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.tabela caption {
    text-align: left;
    padding-bottom: var(--sp-2);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}
.tabela th,
.tabela td {
    text-align: left;
    vertical-align: top;
    padding: var(--sp-3);
}
.tabela thead th {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.tabela tbody tr + tr { border-top: 1px solid var(--border); }

/* A navegacao lateral so volta no desktop (1024 px). Ate la, tabelas com
   formularios e varias acoes precisam usar o mesmo formato de cartao. */
@media (max-width: 1023px) {
    .tabela thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .tabela tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--raio-sm);
        padding: var(--sp-2);
        background: var(--surface);
    }
    .tabela tbody tr + tr { margin-top: var(--sp-3); border-top: 1px solid var(--border); }
    .tabela td {
        display: block;
        min-width: 0;
        padding: var(--sp-2);
        overflow-wrap: anywhere;
    }
    .tabela td::before {
        content: attr(data-rotulo);
        display: block;
        margin-bottom: var(--sp-1);
        font-size: var(--fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-secondary);
    }
    .tabela td > .acoes,
    .tabela td > fieldset,
    .tabela td > form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .tabela td .linha,
    .tabela td .acoes {
        min-width: 0;
    }
    .tabela td .linha > .entrada,
    .tabela td .linha > .selecao,
    .tabela td .acoes > .entrada,
    .tabela td .acoes > .selecao {
        min-width: 0;
    }
}

/* ---- Tabs (abas do prontuario) ---- */
.tabs__lista {
    display: flex;
    gap: var(--sp-1);
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
}

.tabs__botao {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--raio-pill);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 600;
    font-size: var(--fs-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}
.tabs__botao:hover { background: var(--surface-muted); color: var(--text-primary); }
.tabs__botao[aria-selected="true"] {
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.tabs__botao .icone { width: 17px; height: 17px; }

.tabs__painel[hidden] { display: none; }

/* ---- Accordion (cards colapsaveis do atendimento) ---- */
.accordion {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
}
.accordion + .accordion { margin-top: var(--sp-3); }

.accordion__cabecalho { margin: 0; }

.accordion__botao {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 56px;
    padding: var(--sp-3) var(--sp-4);
    border: 0;
    background: transparent;
    font: inherit;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: var(--fs-base);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.accordion__botao:hover { background: var(--surface-muted); }
.accordion__botao > span:first-of-type { flex: 1; }

.accordion__seta {
    width: 20px; height: 20px;
    color: var(--text-secondary);
    transition: transform var(--transicao);
}
.accordion__botao[aria-expanded="true"] .accordion__seta { transform: rotate(180deg); }

.accordion__conteudo {
    padding: 0 var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-4);
}
.accordion__conteudo[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   07. Formularios clinicos
   --------------------------------------------------------------------------- */
.campo { margin-bottom: var(--sp-4); }

.campo__rotulo {
    display: block;
    margin-bottom: var(--sp-2);
    font-weight: 600;
    font-size: var(--fs-sm);
}
.campo__obrigatorio { color: var(--danger); }

.campo__ajuda {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
.campo__ajuda--atencao {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--warning);
    font-weight: 600;
}
.campo__ajuda--atencao .icone { width: 14px; height: 14px; flex-shrink: 0; }

.campo__opcao {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border-forte);
    border-radius: var(--raio-sm);
    background: var(--surface);
    cursor: pointer;
}
.campo__opcao input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.entrada,
.selecao,
.area-texto {
    display: block;
    width: 100%;
    min-height: var(--toque-min);
    padding: var(--sp-3);
    border: 1px solid var(--border-forte);
    border-radius: var(--raio-sm);
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
    /* 16px evita o zoom automatico do iOS ao focar o campo. */
    font-size: 16px;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.entrada:focus,
.selecao:focus,
.area-texto:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
    outline: none;
}
.entrada[aria-invalid="true"],
.area-texto[aria-invalid="true"] { border-color: var(--danger); }

.area-texto { min-height: 110px; resize: vertical; line-height: 1.55; }
.area-texto--alta { min-height: 150px; }

.selecao {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    background-size: 18px;
    padding-right: var(--sp-6);
}

.campo-grid {
    display: grid;
    gap: 0 var(--sp-4);
}

fieldset {
    margin: 0 0 var(--sp-4);
    padding: 0;
    border: 0;
    min-width: 0;
}
legend {
    padding: 0;
    margin-bottom: var(--sp-3);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: var(--fs-md);
}

.arquivo {
    display: block;
    width: 100%;
    padding: var(--sp-3);
    border: 1px dashed var(--border-forte);
    border-radius: var(--raio-sm);
    background: var(--surface-muted);
    font-size: var(--fs-sm);
}
.arquivo::file-selector-button {
    margin-right: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--raio-sm);
    background: var(--primary);
    color: var(--text-inverso);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* ---- Slider EVA (Escala Visual Analogica de dor 0-10) ----
   A cor do preenchimento e do valor vem da custom property --eva-cor,
   atualizada pelo JS conforme a faixa (verde / amarelo / vermelho). */
.eva {
    --eva-cor: var(--eva-baixa);
    --eva-progresso: 0%;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
}

.eva__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.eva__valor {
    display: grid;
    place-items: center;
    min-width: 58px;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--raio-sm);
    background: color-mix(in srgb, var(--eva-cor) 14%, var(--surface));
    color: var(--eva-cor);
    font-family: var(--fonte-titulo);
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1.2;
    transition: color var(--transicao), background var(--transicao);
}

.eva__faixa {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--eva-cor);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eva__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 34px;           /* area de toque generosa */
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.eva__slider::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: var(--raio-pill);
    background: linear-gradient(
        to right,
        var(--eva-cor) 0 var(--eva-progresso),
        var(--border) var(--eva-progresso) 100%
    );
}
.eva__slider::-moz-range-track {
    height: 12px;
    border-radius: var(--raio-pill);
    background: var(--border);
}
.eva__slider::-moz-range-progress {
    height: 12px;
    border-radius: var(--raio-pill);
    background: var(--eva-cor);
}
.eva__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--surface);
    border: 4px solid var(--eva-cor);
    box-shadow: var(--sombra);
    transition: border-color var(--transicao);
}
.eva__slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface);
    border: 4px solid var(--eva-cor);
    box-shadow: var(--sombra);
}
.eva__slider:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.eva__escala {
    display: flex;
    justify-content: space-between;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

/* Barra EVA compacta usada em listagens e no historico. */
.eva-mini {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.eva-mini__barra {
    position: relative;
    flex: 1;
    min-width: 56px;
    height: 6px;
    border-radius: var(--raio-pill);
    background: var(--surface-muted);
    overflow: hidden;
}
.eva-mini__preenchimento {
    display: block;
    height: 100%;
    border-radius: var(--raio-pill);
    background: var(--eva-baixa);
}
.eva-mini--moderada .eva-mini__preenchimento { background: var(--eva-moderada); }
.eva-mini--alta .eva-mini__preenchimento { background: var(--eva-alta); }
.eva-mini__numero { font-weight: 700; font-size: var(--fs-xs); }

/* ---- Escala Oxford (forca muscular 0-5) ---- */
.oxford { display: grid; gap: var(--sp-3); }

.oxford__linha {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    background: var(--surface-muted);
}

.oxford__graus {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Radios estilizados como botoes grandes: escolhidos com a mao enluvada. */
.oxford__grau { position: relative; }
.oxford__grau input {
    position: absolute;
    opacity: 0;
    width: 100%; height: 100%;
    margin: 0;
    cursor: pointer;
}
.oxford__grau span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-forte);
    border-radius: var(--raio-sm);
    background: var(--surface);
    font-weight: 700;
}
.oxford__grau input:checked + span {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: var(--text-inverso);
}
.oxford__grau input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   08. Gravador de audio + IA
   --------------------------------------------------------------------------- */
.gravador {
    display: grid;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--raio-lg);
    background: linear-gradient(150deg, #0F172A 0%, #1E293B 55%, #312E81 100%);
    color: var(--text-inverso);
    box-shadow: var(--sombra-lg);
}

.gravador__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.gravador__titulo {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-md);
    color: var(--text-inverso);
}
.gravador__titulo .icone { color: var(--ai-purple); }

.gravador__timer {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: var(--fs-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.gravador__visual {
    position: relative;
    height: 84px;
    border-radius: var(--raio);
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.gravador__canvas { display: block; width: 100%; height: 100%; }

.gravador__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
    padding: 0 var(--sp-4);
}

/* Escolha obrigatoria do tipo de gravacao (ditado solo x voz do paciente).
   Vive sobre o fundo escuro do gravador, entao nao reaproveita .campo__opcao,
   que e desenhado para a superficie clara dos formularios. */
.gravador__escolha {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding: var(--sp-3);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--raio);
    background: rgba(255, 255, 255, 0.06);
}

.gravador__escolha-titulo {
    padding: 0;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-inverso);
}

.gravador__escolha-opcao {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--raio-sm);
    background: rgba(255, 255, 255, 0.04);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
}
.gravador__escolha-opcao input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--ai-purple);
}
.gravador__escolha-opcao strong { color: var(--text-inverso); }
.gravador__escolha-opcao:has(input:checked) {
    border-color: var(--ai-purple);
    background: rgba(139, 92, 246, 0.18);
}
.gravador__escolha-opcao input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gravador__escolha-opcao input:disabled { cursor: not-allowed; }

.gravador__escolha-extra {
    display: grid;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.gravador__escolha-aviso {
    margin: 0;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.72);
}
.gravador__escolha-aviso--bloqueio { color: #FCA5A5; }
.gravador__escolha-aviso a { color: inherit; }

.gravador__controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}

.gravador__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 56px;
    padding: var(--sp-3) var(--sp-5);
    flex: 1 1 180px;
    border: 0;
    border-radius: var(--raio-pill);
    font: inherit;
    font-weight: 700;
    color: var(--text-inverso);
    background: var(--danger);
    cursor: pointer;
    transition: transform var(--transicao), background var(--transicao), opacity var(--transicao);
}
.gravador__botao:active { transform: scale(0.97); }
.gravador__botao[disabled] { opacity: 0.5; cursor: not-allowed; }
.gravador__botao--parar { background: rgba(255, 255, 255, 0.16); }
.gravador__botao--parar:hover { background: rgba(255, 255, 255, 0.24); }

.gravador__audio {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--raio);
    background: rgba(255, 255, 255, 0.08);
}

.financeiro-acoes,
.financeiro-acoes form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}
.financeiro-preco {
    display: grid;
    grid-template-columns: minmax(0, 130px) max-content;
    align-items: center;
    justify-content: start;
    gap: var(--sp-2);
    width: 100%;
    max-width: 100%;
}
.financeiro-preco .entrada {
    width: 130px;
    max-width: 100%;
    min-width: 0;
}
.financeiro-acoes .selecao { width: auto; min-width: 130px; }
.nfse-atualizar { margin-top: var(--sp-2); }
.financeiro-item { display: block; color: var(--text-secondary); }
.gravador__audio audio,
.lista-audios audio {
    display: block;
    width: 100%;
    min-height: 40px;
}

.gravador__anteriores {
    display: grid;
    gap: 0;
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.gravador__anteriores-botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    width: 100%;
    min-height: 52px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid rgba(94, 234, 212, 0.45);
    border-radius: var(--raio-sm);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font: inherit;
    font-size: var(--fs-base);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.gravador__anteriores-botao::-webkit-details-marker {
    display: none;
}
.gravador__anteriores-botao:hover,
.gravador__anteriores-botao:focus-visible {
    border-color: rgba(94, 234, 212, 0.85);
    background: rgba(94, 234, 212, 0.12);
    color: #ffffff;
}
.gravador__anteriores-botao:focus-visible {
    outline: 3px solid rgba(94, 234, 212, 0.35);
    outline-offset: 2px;
}
.gravador__anteriores-contador {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--fs-xs);
    font-weight: 600;
}
.gravador__anteriores-seta {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--transicao);
}
.gravador__anteriores-detalhes[open] .gravador__anteriores-seta {
    transform: rotate(180deg);
}
.gravador__anteriores-painel {
    padding-top: var(--sp-3);
}

.lista-audios {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.lista-audios__item {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface-soft);
}
.lista-audios__linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--sp-2);
}
.lista-audios__audio-ausente {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 40px;
}
.lista-audios__transcricao {
    min-width: min(190px, 100%);
}
.lista-audios__transcricao summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    background: var(--surface);
    color: var(--primary-dark);
    font-size: var(--fs-xs);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.lista-audios__transcricao summary::-webkit-details-marker { display: none; }
.lista-audios__transcricao[open] summary {
    margin-bottom: var(--sp-2);
    background: var(--primary-soft);
}
.lista-audios__transcricao[open] { grid-column: 1 / -1; }
.lista-audios__transcricao p {
    max-height: 260px;
    overflow: auto;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    background: var(--surface);
}
.gravador .lista-audios__item {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}
.gravador .lista-audios__item .texto-secundario { color: rgba(255, 255, 255, 0.72); }
.gravador .lista-audios__transcricao summary,
.gravador .lista-audios__transcricao p {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}
.gravador .lista-audios__transcricao[open] summary {
    background: rgba(45, 212, 191, 0.18);
    color: #CCFBF1;
}

@media (max-width: 720px) {
    .lista-audios__linha { grid-template-columns: 1fr; }
}

.gravador__status {
    margin: 0;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.78);
}
.gravador__status--erro { color: #FCA5A5; font-weight: 600; }

.gravador__aviso {
    margin: 0;
    padding: var(--sp-3);
    border-radius: var(--raio-sm);
    background: rgba(255, 255, 255, 0.08);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.75);
}

/* Indicador REC pulsante. */
.rec {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FCA5A5;
}
.rec__ponto {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--danger);
    animation: pulso 1.2s ease-in-out infinite;
}

/* Barra de progresso indeterminada da chamada de IA. */
.progresso-ia {
    height: 4px;
    border-radius: var(--raio-pill);
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}
.progresso-ia__barra {
    width: 38%;
    height: 100%;
    border-radius: var(--raio-pill);
    background: linear-gradient(90deg, var(--accent), var(--ai-purple));
    animation: desliza 1.25s ease-in-out infinite;
}
@keyframes desliza {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

/* Painel de revisao da sugestao da IA (confirmacao antes de sobrescrever). */
.revisao-ia { display: grid; gap: var(--sp-3); }

.revisao-ia__item {
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--ai-purple);
    border-radius: var(--raio-sm);
    background: var(--surface);
}
.revisao-ia__rotulo {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ai-purple);
    margin-bottom: var(--sp-1);
}
.revisao-ia__texto { margin: 0; font-size: var(--fs-sm); white-space: pre-wrap; }
.revisao-ia__conflito {
    display: block;
    margin-top: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--raio-sm);
    background: #FFFBEB;
    color: #92400E;
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* Dialogo nativo usado na confirmacao da IA. */
.dialogo {
    width: min(560px, calc(100vw - 2rem));
    max-height: min(80vh, 720px);
    padding: 0;
    border: 0;
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    color: var(--text-primary);
}
.dialogo::backdrop { background: rgba(15, 23, 42, 0.55); }
.dialogo__corpo { padding: var(--sp-5); overflow-y: auto; max-height: calc(80vh - 92px); }
.dialogo__rodape {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    padding: var(--sp-3) var(--sp-5) var(--sp-5);
    background: var(--surface);
}

/* Popup de decisao com varias escolhas (transferir paciente, sair da clinica).
   O <form> envolve corpo e rodape; display: contents mantem o rolamento do
   corpo e o rodape fixo embaixo, como no dialogo da IA. */
.dialogo--largo { width: min(720px, calc(100vw - 2rem)); }
.dialogo__form { display: contents; }
.dialogo__rodape { flex-wrap: wrap; }
.escolha {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
}
.escolha legend { padding: 0 var(--sp-1); font-weight: 600; }
.escolha .campo__opcao { margin-top: var(--sp-2); }
.escolha .campo__opcao input[type="radio"] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.escolha--fixa { background: var(--surface-muted); }
.escolha__lista { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); font-size: var(--fs-sm); }

/* Campo preenchido pela IA ganha marca visual ate ser editado/salvo. */
.preenchido-ia {
    border-color: var(--ai-purple) !important;
    box-shadow: 0 0 0 3px var(--ai-purple-soft);
}

/* Campo preenchido pela evolucao rapida (checklist + template, sem IA
   nenhuma envolvida) ate ser editado/salvo - cor neutra de proposito, para
   nao ser confundido com preenchimento por IA. */
.preenchido-rapido {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ---------------------------------------------------------------------------
   09. Blocos de pagina
   --------------------------------------------------------------------------- */

/* ---- Dashboard ---- */
.metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.metrica {
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
    box-shadow: var(--sombra-sm);
}
.metrica__rotulo {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.metrica__rotulo .icone { width: 16px; height: 16px; color: var(--primary); }
.metrica__valor {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: var(--fs-2xl);
    font-weight: 800;
    line-height: 1;
}
.metrica__nota { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-secondary); }

.atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3);
}

.atalho {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 64px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    box-shadow: var(--sombra-sm);
    transition: border-color var(--transicao), transform var(--transicao);
}
.atalho:hover { border-color: var(--primary); transform: translateY(-2px); }
.atalho__icone {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: var(--raio-sm);
    background: var(--primary-soft);
    color: var(--primary-dark);
}
.atalho--ia .atalho__icone { background: var(--ai-purple-soft); color: #6D28D9; }

/* ---- Agenda ---- */
.agenda-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
}
.agenda-nav__data { margin: 0; font-weight: 700; font-family: var(--fonte-titulo); text-align: center; }
.agenda-nav__form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}
.agenda-nav__data-campo {
    width: auto;
    max-width: 100%;
    min-height: 0;
    padding: var(--sp-2) var(--sp-2);
    border-color: transparent;
    background: transparent;
    text-align: center;
    font-weight: 700;
    font-family: var(--fonte-titulo);
    cursor: pointer;
    /* Herdado de .entrada: 16px, nunca menos - abaixo disso o iOS da zoom ao focar. */
}
.agenda-nav__data-campo:hover { border-color: var(--border); }
@media (max-width: 480px) {
    .agenda-nav__data-campo { padding: var(--sp-2) 0; }
}

.agenda-abas {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
}
.agenda-abas__item {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-sm);
}
.agenda-abas__item:hover { color: var(--text-primary); }
.agenda-abas__item--ativa { color: var(--primary-dark); border-bottom-color: var(--primary); }

.grade-horarios { display: grid; gap: var(--sp-5); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }

/* Visao dia separada por horario (24/09/2026): titulo "14:00" e os pacientes
   daquele horario embaixo; turma de Pilates ganha o rotulo rosa do servico. */
.grade-horarios__grupo { display: grid; gap: var(--sp-2); }
.grade-horarios__titulo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-md);
}
.grade-horarios__hora {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--fs-lg);
    font-variant-numeric: tabular-nums;
    color: var(--primary-dark);
}
.grade-horarios__rotulo {
    padding: 2px var(--sp-2);
    border-radius: var(--raio-pill);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
}
.grade-horarios__grupo--turma .grade-horarios__rotulo { background: #FDF2F8; color: #BE185D; }
.grade-horarios__itens { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }

/* ---- Agenda: cores de status compartilhadas (semana + mes) ----------------
   A visao dia comunica o status pela borda esquerda do .slot. Semana e mes
   reusam exatamente a mesma paleta semantica, por meio de duas variaveis, para
   que "verde = atendido" valha nas tres telas sem repetir seletor de cor.
   Os pares texto/fundo sao os mesmos dos .badge--* (a excecao de cor literal
   ja documentada: precisam de contraste calibrado). */
.agenda-status {
    --agenda-cor: var(--border-forte);
    --agenda-cor-texto: var(--text-secondary);
}
.agenda-status--confirmado { --agenda-cor: var(--info);    --agenda-cor-texto: #1D4ED8; }
.agenda-status--check-in   { --agenda-cor: var(--accent);  --agenda-cor-texto: #0E7490; }
.agenda-status--atendido   { --agenda-cor: var(--success); --agenda-cor-texto: #047857; }
.agenda-status--faltou     { --agenda-cor: var(--danger);  --agenda-cor-texto: #B91C1C; }
.agenda-status--cancelado  { --agenda-cor: var(--border-forte); --agenda-cor-texto: var(--text-secondary); }

/* ---- Agenda: visao semana ------------------------------------------------
   Mobile: dias empilhados (uma coluna de 130px no celular truncaria todo nome
   proprio). Do tablet para cima: as 7 colunas de verdade, com rolagem
   horizontal APENAS dentro do proprio bloco (nunca no <body>) quando a largura
   util nao comporta 7 x 132px. */
.agenda-semana-rolagem {
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-1);
}
.agenda-semana {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}
.agenda-semana__dia {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
}
.agenda-semana__dia--hoje { border-color: var(--primary); }

.agenda-semana__cabecalho {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
    text-decoration: none;
    color: var(--text-primary);
    transition: background var(--transicao);
}
.agenda-semana__cabecalho:hover { background: var(--primary-soft); }
.agenda-semana__dia--hoje .agenda-semana__cabecalho { background: var(--primary-soft); }
.agenda-semana__dow {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.agenda-semana__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    border-radius: var(--raio-pill);
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
}
.agenda-semana__dia--hoje .agenda-semana__num {
    background: var(--primary-dark);
    color: var(--text-inverso);
}
.agenda-semana__qtd {
    margin-left: auto;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: var(--raio-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.agenda-semana__dia--hoje .agenda-semana__qtd { border-color: var(--primary); color: var(--primary-dark); }

.agenda-semana__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1;
    padding: var(--sp-2);
}
.agenda-semana__lista {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.agenda-semana__vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: 0;
    padding: var(--sp-3) var(--sp-2);
    border: 1px dashed var(--border-forte);
    border-radius: var(--raio-sm);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-align: center;
}
.agenda-semana__vazio .icone { width: 16px; height: 16px; flex: none; }
.agenda-semana__marcar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: auto;
    min-height: 36px;
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    background: var(--surface);
    color: var(--primary-dark);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transicao), border-color var(--transicao);
}
.agenda-semana__marcar:hover { border-color: var(--primary); background: var(--primary-soft); }
.agenda-semana__marcar .icone { width: 14px; height: 14px; }

/* Cartao de atendimento: hora em destaque, paciente, status por cor. */
.agenda-chip {
    display: grid;
    gap: 2px;
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--agenda-cor);
    border-radius: var(--raio-sm);
    background: var(--surface);
    color: var(--text-primary);
    text-decoration: none;
    transition: background var(--transicao), border-color var(--transicao);
}
.agenda-chip:hover { background: var(--surface-muted); border-color: var(--border-forte); border-left-color: var(--agenda-cor); }

/* Visao semana separada por horario (24/09/2026): a hora sai de dentro do
   cartao e vira o titulo do bloco; varios pacientes na mesma hora (turma de
   Pilates, ou profissionais diferentes) ficam empilhados sob o mesmo titulo. */
.agenda-horario { display: grid; gap: 4px; }
.agenda-horario__titulo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px var(--sp-2);
    margin: 0;
}
.agenda-horario__hora {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--primary-dark);
}
.agenda-horario__rotulo { font-size: 0.6875rem; font-weight: 700; color: var(--text-secondary); }
.agenda-horario--turma .agenda-horario__rotulo { color: #BE185D; }
.agenda-horario__itens { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.agenda-horario--turma .agenda-horario__itens {
    padding-left: var(--sp-2);
    border-left: 2px solid #F9A8D4;
}
.agenda-chip__nome {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}
.agenda-chip__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--agenda-cor-texto);
}
.agenda-chip__status::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: var(--raio-pill);
    background: var(--agenda-cor);
}
.agenda-chip__sessoes {
    color: var(--primary-dark);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}
.agenda-chip__sessoes--indefinidas { color: var(--text-secondary); }

@media (max-width: 767px) {
    /* Empilhado: nome/status dividem a primeira linha e o plano ocupa a largura
       toda, sem apertar a contagem em telefones estreitos. */
    .agenda-chip {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-auto-flow: row;
        align-items: center;
        gap: 2px var(--sp-3);
    }
    .agenda-chip__nome { -webkit-line-clamp: 1; line-clamp: 1; }
    .agenda-chip__status { grid-column: 2; grid-row: 1; }
    .agenda-chip__sessoes { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
    .agenda-semana-rolagem {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    .agenda-semana {
        grid-template-columns: repeat(7, minmax(132px, 1fr));
        gap: var(--sp-2);
    }
    .agenda-semana__dia { scroll-snap-align: start; }
    .agenda-semana__cabecalho { padding: var(--sp-2); }
    .agenda-semana__qtd { padding: 1px 6px; }
}

/* ---- Agenda: visao mes ---------------------------------------------------
   Calendario de verdade: as linhas da grade sao o fundo do container aparecendo
   pelo gap de 1px entre as celulas - por isso as celulas nao tem borda propria
   nem canto arredondado (so o container tem). */
.agenda-mes {
    display: grid;
    gap: 1px;
    margin-bottom: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--border);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
}
.agenda-mes__cabecalho,
.agenda-mes__semana {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
}
.agenda-mes__cabecalho span {
    padding: var(--sp-2) 4px;
    background: var(--surface-muted);
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.agenda-mes__dia {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    min-height: 104px;
    padding: 6px;
    background: var(--surface);
    text-decoration: none;
    color: var(--text-primary);
    transition: background var(--transicao);
}
.agenda-mes__dia:hover { background: var(--primary-soft); }
.agenda-mes__dia--fora { background: var(--surface-muted); color: var(--text-secondary); }
.agenda-mes__dia--fora .agenda-mes__num { opacity: 0.55; }
.agenda-mes__dia--fora:hover { background: var(--surface-muted); }
.agenda-mes__dia--hoje { background: var(--primary-soft); }
.agenda-mes__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    border-radius: var(--raio-pill);
    font-family: var(--fonte-titulo);
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.agenda-mes__dia--hoje .agenda-mes__num {
    background: var(--primary-dark);
    color: var(--text-inverso);
}
/* Chip de contagem (telas largas) e fileira de pontos (telas estreitas):
   o mesmo dado, no formato que a celula comporta. */
.agenda-mes__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: var(--raio-pill);
    background: var(--primary-dark);
    color: var(--text-inverso);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.agenda-mes__chip-rotulo { font-weight: 600; opacity: 0.9; }
.agenda-mes__pontos { display: none; gap: 3px; align-items: center; }
.agenda-mes__ponto {
    width: 6px;
    height: 6px;
    border-radius: var(--raio-pill);
    background: var(--primary-dark);
}
.agenda-mes__mais { font-size: 10px; font-weight: 700; color: var(--primary-dark); }
@media (max-width: 900px) {
    .agenda-mes__dia { min-height: 80px; }
    .agenda-mes__chip-rotulo { display: none; }
}
@media (max-width: 600px) {
    .agenda-mes__dia { min-height: 62px; gap: 2px; padding: 4px; }
    .agenda-mes__num { min-width: 22px; height: 22px; font-size: var(--fs-xs); }
    .agenda-mes__chip { display: none; }
    .agenda-mes__pontos { display: inline-flex; }
}

.slot {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-forte);
    border-radius: var(--raio);
    background: var(--surface);
    box-shadow: var(--sombra-sm);
}
.slot--check-in { border-left-color: var(--accent); }
.slot--atendido { border-left-color: var(--success); }
.slot--faltou   { border-left-color: var(--danger); }
.slot--confirmado { border-left-color: var(--info); }

.slot__hora {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--fs-md);
    color: var(--primary-dark);
}
.slot__duracao { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); }

.slot__corpo { min-width: 0; }
.slot__nome { margin: 0 0 var(--sp-1); font-size: var(--fs-md); }
.slot__meta { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: var(--text-secondary); }
.slot__sessoes {
    width: fit-content;
    margin: 0 0 var(--sp-2);
    color: var(--primary-dark);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.slot__sessoes--indefinidas { color: var(--text-secondary); }
.slot__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.slot__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.slot__correcao {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}
.slot__correcao > summary {
    width: fit-content;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
.slot__correcao[open] > summary { margin-bottom: var(--sp-3); }
.slot__correcao .form-grid { max-width: 42rem; }
/* Excluir da agenda: mesma sanfona das correcoes, sinalizada como destrutiva. */
.slot__correcao--perigo > summary { color: #B91C1C; }

/* ---- Pacientes ---- */
.filtros {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
}

/*
  Mobile, so onde for pedido: os filtros secundarios dividem uma linha; a busca
  (`filtros__largo`) e a barra de acoes ficam com a linha inteira. Empilhados um
  por linha, os tres campos de pacientes.php jogavam o primeiro card para ~600px
  de altura - cabia UM resultado na tela de um celular, justamente na tela cujo
  proposito e achar um paciente. Emparelhar os dois secundarios devolve uma
  linha de resultado sem esconder controle nenhum atras de um "mais filtros".

  Modificador em vez de padrao porque `.filtros` tambem serve auditoria.php e
  equipe.php: em coluna dupla, o campo unico de equipe.php ficaria com metade
  da largura e os nomes proprios do <select> de auditoria.php truncariam.
*/
.filtros--par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filtros--par > .filtros__largo,
.filtros--par > .acoes { grid-column: 1 / -1; }

.busca { position: relative; }
.busca .entrada { padding-left: 44px; }
.busca__icone {
    position: absolute;
    left: var(--sp-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

.lista-pacientes { display: grid; gap: var(--sp-3); }

.paciente-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
    box-shadow: var(--sombra-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transicao), transform var(--transicao);
}
.paciente-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.paciente-card__corpo { min-width: 0; }

/*
  Os elementos do corpo sao <span> (o card inteiro e um <a>, e <a> nao pode
  conter <p>/<h3>). Sem `display: block` eles ficam em fluxo INLINE, e ai o
  `margin-bottom` de cada um simplesmente nao vale: o nome do paciente saia
  colado na propria meta ("Antonio Ferreira da Silva 58 anos . CID-10 M51.1"),
  numa unica mancha de texto. O nome e o alvo de leitura da tela toda - ele
  precisa da propria linha.
*/
.paciente-card__nome,
.paciente-card__meta,
.paciente-card__queixa { display: block; }

/*
  Mesmo tratamento de `.card__titulo` e `.slot__nome` - que sao <h3> e recebem
  isto da regra global de cabecalho. Aqui o nome e um <span> e nao herdava nada:
  saia em Inter regular, com o mesmo peso da meta secundaria logo abaixo. E o
  titulo do card em todas as tres telas de lista; agora parece um.
*/
.paciente-card__nome {
    margin: 0 0 2px;
    font-family: var(--fonte-titulo);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
}
.paciente-card__meta { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: var(--text-secondary); }

/*
  Telefone. Linha propria com icone em vez de mais um segmento na meta: a busca
  aceita telefone como termo, entao o numero precisa ser localizavel de relance
  para o resultado explicar por que casou. Empilhado, ocupa a mesma altura que
  ocuparia dentro da meta (que quebraria em duas linhas), e fica mais legivel.
*/
.paciente-card__contato {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.paciente-card__icone { width: 13px; height: 13px; flex: none; }

.paciente-card__queixa {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.paciente-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ---- Prontuario / historico ---- */
.ficha-topo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: linear-gradient(120deg, var(--primary-soft) 0%, var(--surface) 60%);
}
.ficha-topo__nome { margin: 0 0 2px; font-size: var(--fs-xl); }
.ficha-topo__meta { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); }
.ficha-topo__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.linha-tempo { display: grid; gap: var(--sp-3); }

.evolucao {
    position: relative;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
    box-shadow: var(--sombra-sm);
}
.evolucao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
}
.evolucao__sessao { margin: 0; font-size: var(--fs-md); }

/* Carimbo imutavel: precisa parecer um selo, nao um texto editavel. */
.carimbo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 4px 10px;
    border: 1px dashed var(--border-forte);
    border-radius: var(--raio-sm);
    background: var(--surface-muted);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
.carimbo .icone { width: 14px; height: 14px; }

.soap { display: grid; gap: var(--sp-3); }
.soap__item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: var(--sp-3);
    align-items: start;
}
.soap__letra {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: var(--raio-sm);
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-family: var(--fonte-titulo);
    font-weight: 800;
}
.soap__texto { margin: 0; font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.soap__nome {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.hash {
    display: block;
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--border);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* Grafico de EVA em barras (sem biblioteca externa). */
.grafico-eva {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
    height: 130px;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
    overflow-x: auto;
}
.grafico-eva__coluna {
    display: grid;
    align-content: end;
    justify-items: center;
    gap: var(--sp-1);
    flex: 1 0 34px;
    height: 100%;
}
.grafico-eva__barra {
    width: 100%;
    max-width: 26px;
    min-height: 4px;
    height: calc(var(--altura) * 1%);
    border-radius: 6px 6px 2px 2px;
    background: var(--eva-baixa);
}
.grafico-eva__coluna--moderada .grafico-eva__barra { background: var(--eva-moderada); }
.grafico-eva__coluna--alta .grafico-eva__barra { background: var(--eva-alta); }
.grafico-eva__rotulo { font-size: 0.625rem; color: var(--text-secondary); white-space: nowrap; }

/* Progresso de sessoes do plano terapeutico. */
.progresso {
    height: 10px;
    border-radius: var(--raio-pill);
    background: var(--surface-muted);
    overflow: hidden;
}
.progresso__barra {
    display: block;
    height: 100%;
    width: calc(var(--valor) * 1%);
    border-radius: var(--raio-pill);
    background: linear-gradient(90deg, var(--primary), var(--accent));
}
.plano-sessoes__resumo {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
}
.plano-sessoes__resumo strong {
    color: var(--primary-dark);
    font-family: var(--fonte-titulo);
    font-size: var(--fs-xl);
    font-variant-numeric: tabular-nums;
}
.plano-sessoes__resumo span,
.plano-sessoes__indefinido { color: var(--text-secondary); }
.plano-sessoes__indefinido { margin: 0; font-weight: 600; }
.plano-sessoes__form {
    display: grid;
    grid-template-columns: minmax(0, 220px) auto;
    align-items: end;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
.plano-sessoes__form .btn { min-height: 44px; }
@media (max-width: 480px) {
    .plano-sessoes__form { grid-template-columns: 1fr; }
    .plano-sessoes__form .btn { width: 100%; }
}

/* ---- Termo de alta ---- */
.termo {
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
    box-shadow: var(--sombra-sm);
}
.termo__cabecalho {
    text-align: center;
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: 2px solid var(--primary);
}
.termo__titulo { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); }
.termo__assinatura {
    margin-top: var(--sp-6);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--text-primary);
    text-align: center;
    font-size: var(--fs-sm);
}

.validacao {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface-muted);
    text-align: center;
}
.validacao__codigo {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

/* ---- Relatorio do prontuario (documento para imprimir / salvar em PDF) ----
   Componente proprio, e nao reuso de .card: o card e uma superficie de tela
   (sombra, cantos, respiro) e o relatorio e um documento continuo, cuja
   hierarquia precisa sobreviver ao papel em preto e branco. As regras de
   quebra de pagina ficam na secao 13. */
.relatorio {
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
    box-shadow: var(--sombra-sm);
}
.relatorio__cabecalho {
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
    border-bottom: 2px solid var(--primary);
}
.relatorio__marca {
    margin: 0;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.relatorio__titulo {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-xl);
    font-family: var(--fonte-titulo);
}
.relatorio__subtitulo {
    margin: var(--sp-1) 0 var(--sp-4);
    font-size: var(--fs-md);
    font-weight: 600;
}
.relatorio__emissao {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    font-size: var(--fs-sm);
}
.relatorio__emissao dt {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.relatorio__emissao dd { margin: 0; font-weight: 600; }
.relatorio__papel { font-weight: 400; color: var(--text-secondary); }

.relatorio__bloco { margin-bottom: var(--sp-6); }
.relatorio__bloco-titulo {
    margin: 0 0 var(--sp-3);
    padding-bottom: var(--sp-2);
    font-size: var(--fs-lg);
    font-family: var(--fonte-titulo);
    border-bottom: 1px solid var(--border-forte);
}
.relatorio__sub {
    margin: var(--sp-4) 0 var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 700;
}
.relatorio__dados { display: grid; gap: var(--sp-3); margin: 0; }
.relatorio__item dt {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.relatorio__item dd { margin: 0; font-size: var(--fs-sm); }
/* Texto longo (SOAP, condutas, HDA) preserva as quebras digitadas. */
.relatorio__texto {
    margin: 0;
    font-size: var(--fs-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.relatorio__lista { margin: 0; padding-left: var(--sp-5); font-size: var(--fs-sm); }
.relatorio__vazio { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.relatorio__nota {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.relatorio__carimbo {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}
.relatorio__evolucao {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border);
}
.relatorio__soap { display: grid; gap: var(--sp-2); margin: 0; }
.relatorio__tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.relatorio__tabela caption {
    text-align: left;
    padding-bottom: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
.relatorio__tabela th,
.relatorio__tabela td {
    padding: var(--sp-2);
    text-align: left;
    border: 1px solid var(--border-forte);
}
.relatorio__tabela th { background: var(--surface-muted); }
.relatorio__rodape {
    margin-top: var(--sp-6);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-forte);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
.relatorio__rodape p { margin: 0 0 var(--sp-2); }
/* Linhas para assinar a mao: espaco em branco acima da linha e o lugar da
   rubrica/carimbo, por isso o padding-top generoso. */
.relatorio__assinaturas {
    display: grid;
    gap: var(--sp-6);
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
}
.relatorio__assinatura { text-align: center; }
.relatorio__assinatura-linha {
    margin: 0 auto var(--sp-2);
    max-width: 18rem;
    border-top: 1px solid var(--text-primary);
}
.relatorio__assinatura-nome { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.relatorio__assinatura-detalhe { margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); }

@media (min-width: 640px) {
    .relatorio__assinaturas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Relatorio por aluno: aluno + supervisor + clinica. */
    .relatorio__assinaturas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .relatorio__emissao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .relatorio__dados:not(.relatorio__dados--linha) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Estado vazio ---- */
.vazio {
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-4);
    border: 1px dashed var(--border-forte);
    border-radius: var(--raio);
    background: var(--surface);
    text-align: center;
    color: var(--text-secondary);
}
.vazio .icone { width: 32px; height: 32px; color: var(--border-forte); }

/* ---- Login ---- */
.pagina-login {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--sp-4);
    background: linear-gradient(160deg, #0F766E 0%, #0D9488 45%, #06B6D4 120%);
}
.login-card {
    width: min(420px, 100%);
    padding: var(--sp-6);
    border-radius: var(--raio-lg);
    background: var(--surface);
    box-shadow: var(--sombra-lg);
}
.login-card__marca {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.login-card__logo {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    flex-shrink: 0;
}
.login-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.login-card__divisor {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.login-card__divisor::before,
.login-card__divisor::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
}
.login-card__lembrar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.login-card__lembrar input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ---- Entrar com o Google (login.php e cadastro.php) ----
   O botao em si e desenhado pela biblioteca do Google dentro de
   .login-google__botao (a marca dele tem regras de uso proprias). Daqui saem so
   o alinhamento e a altura reservada, para a caixa nao "pular" quando a
   biblioteca terminar de carregar. Nenhum token novo. */
.login-google {
    display: grid;
    gap: var(--sp-2);
    justify-items: center;
}
.login-google__botao {
    display: flex;
    justify-content: center;
    min-height: 44px;
    width: 100%;
}
.login-google__erro {
    color: var(--danger);
    text-align: center;
}

/* ---- Cadastro publico (cadastro.php) ----
   O formulario de cadastro tem 8 campos, contra 2 do login: o card ganha uma
   largura maior e rolagem propria em tela baixa. Nenhum token novo - so o
   min() da largura muda em relacao a .login-card. */
.login-card--largo {
    width: min(560px, 100%);
    margin: var(--sp-6) 0;
}

/* Seletor de plano: os dois radios viram cartoes clicaveis, reaproveitando a
   borda e o raio de .campo__opcao (checkbox de aceite) para nao inventar um
   segundo vocabulario visual de "opcao selecionavel". */
.plano-escolha {
    display: grid;
    gap: var(--sp-2);
}
.plano-escolha__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border-forte);
    border-radius: var(--raio-sm);
    background: var(--surface);
    cursor: pointer;
}
.plano-escolha__item input[type="radio"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
}
.plano-escolha__item:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
}
/* :focus-within cobre a navegacao por teclado inclusive onde :has() nao existe. */
.plano-escolha__item:focus-within {
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.plano-escolha__item .campo__ajuda { margin-top: 2px; }

/* ---- Setup (extensao SQLite ausente) ---- */
.setup-page {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--sp-4);
}
.setup-card {
    width: min(660px, 100%);
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--raio-lg);
    background: var(--surface);
    box-shadow: var(--sombra);
}
.setup-card__title { font-size: var(--fs-xl); color: var(--primary-dark); }
.setup-card__subtitle { font-size: var(--fs-md); margin-top: var(--sp-5); }
.setup-card__code {
    padding: var(--sp-3);
    border-radius: var(--raio-sm);
    background: #0F172A;
    color: #E2E8F0;
    overflow-x: auto;
    font-size: var(--fs-sm);
}
.setup-card__hint { font-size: var(--fs-sm); color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   10. Feedback
   --------------------------------------------------------------------------- */
.flash-area { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }

.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
    font-size: var(--fs-sm);
    box-shadow: var(--sombra-sm);
}
.app-main > .flash { margin-bottom: var(--sp-4); }
.flash p { margin: 0; }
.flash__icone { margin-top: 2px; }
.flash--sucesso { border-left: 4px solid var(--success); }
.flash--sucesso .flash__icone { color: var(--success); }
.flash--erro { border-left: 4px solid var(--danger); }
.flash--erro .flash__icone { color: var(--danger); }
.flash--aviso { border-left: 4px solid var(--warning); }
.flash--aviso .flash__icone { color: var(--warning); }

.toast-area {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + var(--sp-4));
    z-index: 80;
    display: grid;
    gap: var(--sp-2);
    width: min(440px, calc(100vw - 2rem));
    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--raio);
    background: #0F172A;
    color: var(--text-inverso);
    font-size: var(--fs-sm);
    box-shadow: var(--sombra-lg);
    animation: surge 200ms ease;
}
.toast--erro { background: #991B1B; }
.toast--sucesso { background: #065F46; }
@keyframes surge {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* Aviso de horario real: atendimento comecando em breve (ver app.js,
   avisoDeAtendimento). z-index acima do toast (80) - e um alerta que exige
   reconhecimento, nao uma mensagem que some sozinha. */
.popup-atendimento {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-5) var(--sp-4);
    padding-top: calc(var(--safe-top) + var(--sp-6));
    background: color-mix(in srgb, #0F172A 45%, transparent);
    animation: surge 200ms ease;
}
.popup-atendimento__caixa {
    width: min(380px, 100%);
    padding: var(--sp-5);
    border-radius: var(--raio-lg);
    background: var(--surface);
    box-shadow: var(--sombra-lg);
    border-left: 4px solid var(--primary);
}
.popup-atendimento__titulo {
    margin: 0 0 var(--sp-2);
    font-family: var(--fonte-titulo);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
}
.popup-atendimento__corpo {
    margin: 0 0 var(--sp-4);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}
.popup-atendimento__acoes {
    display: flex;
    justify-content: flex-end;
}

/* Status de conexao (online/offline) da top bar. */
.conexao {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    margin: 0;
    padding: 5px 10px;
    border-radius: var(--raio-pill);
    background: #ECFDF5;
    color: #047857;
    font-size: var(--fs-xs);
    font-weight: 700;
}
.conexao__ponto {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.conexao.is-offline { background: #FEF2F2; color: #B91C1C; }
.conexao.is-offline .conexao__ponto { animation: pulso 1.6s ease-in-out infinite; }

/* Rotulo textual some em telas muito estreitas; o ponto colorido permanece. */
@media (max-width: 380px) {
    .conexao__rotulo { display: none; }
}

.btn-instalar {
    position: fixed;
    right: var(--sp-4);
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + var(--sp-4));
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-4);
    border: 0;
    border-radius: var(--raio-pill);
    background: var(--text-primary);
    color: var(--text-inverso);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    box-shadow: var(--sombra-lg);
    cursor: pointer;
}
.btn-instalar[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   11. Utilitarios
   --------------------------------------------------------------------------- */
.pilha { display: grid; gap: var(--sp-4); }
.pilha--sm { gap: var(--sp-2); }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.espaco-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.texto-secundario { color: var(--text-secondary); }
.texto-sm { font-size: var(--fs-sm); }
.texto-xs { font-size: var(--fs-xs); }
.mt-4 { margin-top: var(--sp-4); }
.mb-4 { margin-bottom: var(--sp-4); }
.sem-margem { margin: 0; }
.pre-linha { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   12. Desktop (>= 1024px)
   Sidebar fixa + painel multi-coluna. A bottom nav e a top bar desaparecem.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .topbar,
    .bottom-nav { display: none; }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 50;
        display: flex;
        flex-direction: column;
        width: var(--sidebar-w);
        padding: var(--sp-5) var(--sp-4);
        background: var(--surface);
        border-right: 1px solid var(--border);
        overflow-y: auto;
    }

    .sidebar__cabecalho { display: block; }
    .sidebar__fechar,
    .sidebar__conexao { display: none; }

    .sidebar__marca {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        margin-bottom: var(--sp-6);
        text-decoration: none;
        color: inherit;
    }
    .sidebar__logo { display: block; width: 40px; height: 40px; flex-shrink: 0; }
    .sidebar__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
    .sidebar__marca-texto strong {
        display: block;
        font-family: var(--fonte-titulo);
        font-size: var(--fs-lg);
        font-weight: 800;
        letter-spacing: -0.02em;
    }
    .sidebar__marca-texto small { font-size: 0.6875rem; color: var(--text-secondary); }

    .sidebar__nav { flex: 1; }
    .sidebar__lista { display: grid; gap: 2px; }
    .sidebar__item--pwa { display: none; }

    .sidebar__link {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        min-height: 46px;
        padding: var(--sp-2) var(--sp-3);
        border-radius: var(--raio-sm);
        color: var(--text-secondary);
        font-weight: 600;
        font-size: var(--fs-sm);
        text-decoration: none;
        transition: background var(--transicao), color var(--transicao);
    }
    .sidebar__link:hover { background: var(--surface-muted); color: var(--text-primary); }
    .sidebar__link.is-ativo { background: var(--primary-soft); color: var(--primary-dark); }
    .sidebar__icone { color: currentColor; }
    /* Selo de contagem (ex.: fila de conciliacao Asaas) - empurra para a ponta do link. */
    .sidebar__contador {
        margin-left: auto;
        padding: 1px var(--sp-2);
        font-size: var(--fs-xs);
        line-height: 1.4;
        border-radius: var(--raio-pill);
    }

    /* Cabecalho retratil dos grupos "Administracao" e "Plataforma" (app.js). */
    .sidebar__grupo-cabecalho { margin: 0; }
    .sidebar__grupo-botao {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2);
        width: 100%;
        min-height: 28px;
        margin: var(--sp-4) 0 var(--sp-2);
        padding: 0 var(--sp-3);
        border: 0;
        background: transparent;
        font: inherit;
        font-size: var(--fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-secondary);
        cursor: pointer;
    }
    .sidebar__grupo-botao:hover { color: var(--text-primary); }
    .sidebar__grupo-seta {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        transition: transform var(--transicao);
    }
    .sidebar__grupo-botao[aria-expanded="true"] .sidebar__grupo-seta { transform: rotate(180deg); }

    /* Abertura suave sem medir altura em JS: a linha do grid vai de 0fr a 1fr.
       O <ul> interno precisa de overflow/min-height 0 para nao vazar durante a
       transicao (senao o conteudo aparece "cortado" so no frame final). */
    .sidebar__grupo-painel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 220ms ease;
    }
    .sidebar__grupo-painel.is-aberto { grid-template-rows: 1fr; }
    .sidebar__grupo-painel > .sidebar__lista {
        overflow: hidden;
        min-height: 0;
    }

    .sidebar__rodape {
        margin-top: var(--sp-5);
        padding-top: var(--sp-4);
        border-top: 1px solid var(--border);
        display: grid;
        gap: var(--sp-3);
    }

    /* Seletor de clinica (schema 25): so renderizado para quem e membro de 2 ou
       mais clinicas - ver includes/sidebar.php. */
    .sidebar__clinicas {
        display: grid;
        gap: var(--sp-1);
    }
    .sidebar__clinicas-rotulo {
        font-size: var(--fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-secondary);
        padding: 0 var(--sp-1);
    }
    .sidebar__clinicas .selecao {
        width: 100%;
        min-width: 0; /* impede que um nome de clinica longo estoure a barra */
    }

    .profissional {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-2);
        border-radius: var(--raio-sm);
        text-decoration: none;
        color: inherit;
        min-width: 0;
    }
    .profissional:hover { background: var(--surface-muted); }
    .profissional__dados { min-width: 0; }
    .profissional__nome {
        display: block;
        font-size: var(--fs-sm);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .profissional__crefito { font-size: var(--fs-xs); color: var(--text-secondary); }

    .selo-assinatura {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        margin: 0;
        padding: var(--sp-2) var(--sp-3);
        border-radius: var(--raio-sm);
        background: #ECFDF5;
        color: #047857;
        font-size: var(--fs-xs);
        font-weight: 700;
    }
    .selo-assinatura--inativo { background: #FFFBEB; color: #B45309; }
    .selo-assinatura__icone { width: 16px; height: 16px; }

    .sidebar__sair { margin: 0; }

    .app-main {
        margin-left: var(--sidebar-w);
        padding: var(--sp-6) var(--sp-6) var(--sp-7);
        max-width: none;
    }

    .toast-area { bottom: var(--sp-5); left: auto; right: var(--sp-5); transform: none; }
    .btn-instalar { bottom: var(--sp-5); }

    /* --- Painel multi-coluna: ficha | historico | evolucao do dia --- */
    .painel-3col {
        display: grid;
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(320px, 380px);
        gap: var(--sp-5);
        align-items: start;
    }
    .painel-2col {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        gap: var(--sp-5);
        align-items: start;
    }
    .painel-2col--inverso {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    }

    /* Coluna lateral acompanha a rolagem durante o atendimento. */
    .coluna-fixa { position: sticky; top: var(--sp-5); }

    .campo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .campo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .dados-lista--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .lista-pacientes { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

    .filtros { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
    /* No desktop cabe tudo em uma linha: o que era "largo" no mobile vira coluna. */
    .filtros--par > .filtros__largo,
    .filtros--par > .acoes { grid-column: auto; }
    /* Campo unico (busca rapida do dashboard e os dois seletores de paciente). */
    .filtros--busca { grid-template-columns: minmax(0, 1fr) auto; }

    .gravador { grid-template-columns: 1fr; padding: var(--sp-5); }
    .gravador__visual { height: 110px; }

    .dialogo__corpo { padding: var(--sp-6); }
}

@media (min-width: 1400px) {
    .app-main { padding-inline: var(--sp-7); }
}

/* ---------------------------------------------------------------------------
   13. Impressao e preferencias do usuario
   --------------------------------------------------------------------------- */
@media print {
    .topbar,
    .sidebar,
    .bottom-nav,
    .toast-area,
    .btn-instalar,
    .acoes,
    .rodape,
    .flash-area,
    .skip-link { display: none !important; }

    body { background: #fff; }
    .app-main { margin: 0; padding: 0; max-width: none; }
    .termo, .card { border: 0; box-shadow: none; padding: 0; }
    .validacao { border: 1px solid #999; background: #fff; }
    a { text-decoration: none; color: #000; }

    /* ---- Relatorio do prontuario ----
       O documento sai em preto sobre branco: cor de marca nao sobrevive a
       impressora monocromatica da clinica, e o que separa os blocos precisa ser
       a regra grafica, nao o tom. */
    @page { margin: 16mm 14mm; }

    .relatorio {
        border: 0;
        box-shadow: none;
        padding: 0;
        color: #000;
        font-size: 10.5pt;
        line-height: 1.45;
    }
    .relatorio__cabecalho { border-bottom: 2px solid #000; }
    .relatorio__titulo { font-size: 16pt; }
    .relatorio__subtitulo { font-size: 12pt; }
    .relatorio__marca,
    .relatorio__papel,
    .relatorio__nota,
    .relatorio__vazio,
    .relatorio__carimbo,
    .relatorio__item dt,
    .relatorio__emissao dt,
    .relatorio__rodape { color: #000; }
    .relatorio__emissao { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Duas colunas de dados curtos economizam papel; texto longo (SOAP, HDA,
       condutas) fica em coluna unica para nao virar tira estreita ilegivel. */
    .relatorio__dados:not(.relatorio__dados--linha) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Titulo de bloco nunca fica sozinho no rodape da folha, e nenhum bloco
       curto e partido a toa. Evolucao, tabela de forca e rodape sao unidades:
       uma sessao SOAP cortada no meio da conduta e um documento pior que uma
       folha com espaco sobrando. */
    .relatorio__bloco { break-inside: auto; }
    .relatorio__bloco-titulo {
        break-after: avoid;
        break-inside: avoid;
        border-bottom: 1px solid #000;
    }
    .relatorio__sub { break-after: avoid; }
    .relatorio__evolucao,
    .relatorio__item,
    .relatorio__tabela,
    .relatorio__rodape { break-inside: avoid; }
    .relatorio__tabela th { background: #eee !important; -webkit-print-color-adjust: exact; }
    .relatorio__tabela th,
    .relatorio__tabela td { border: 1px solid #000; }
    .relatorio__evolucao { border-top: 1px solid #000; }
    .relatorio__rodape {
        border-top: 1px solid #000;
        break-before: auto;
    }
    /* No papel as duas assinaturas ficam sempre lado a lado e juntas na mesma
       folha, inclusive quando a impressao e em A4 estreito. */
    .relatorio__assinaturas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        break-inside: avoid;
    }
    .relatorio__assinaturas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .relatorio__assinatura-linha { border-top: 1px solid #000; }
    .relatorio__assinatura-detalhe { color: #000; }
}

/* conciliacao-asaas.php (schema 22): busca + resultado de empresa por linha da fila. */
.conciliacao-busca {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}
.conciliacao-busca .entrada { flex: 1; min-width: 180px; }

.conciliacao-resultados {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.conciliacao-resultados form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
}
.conciliacao-resultado__nome { font-weight: 600; }

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

/* Contraste elevado: reforca bordas para quem usa o modo de alto contraste. */
@media (prefers-contrast: more) {
    :root { --border: #94A3B8; --border-forte: #475569; --text-secondary: #475569; }
}

/* ---------------------------------------------------------------------------
   Frequencia dos pacientes (frequencia.php, 23/09/2026)
   Verde = veio, vermelho = faltou, cinza = cancelou - as mesmas cores
   semanticas dos badges da agenda, para a leitura ser a mesma nas duas telas.
   --------------------------------------------------------------------------- */
.freq-filtros { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
.freq-filtros__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.freq-atalhos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.freq-atalho {
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--raio-pill);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    text-decoration: none;
}
.freq-atalho:hover { border-color: var(--primary); color: var(--primary-dark); }
.freq-atalho--ativo { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); font-weight: 600; }

.freq-cor--presente { color: #047857; }
.freq-cor--falta { color: #B91C1C; }
.metrica--aviso { border-color: #FDE68A; background: #FFFBEB; }

.freq-legenda { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0 0 var(--sp-3); font-size: var(--fs-xs); color: var(--text-secondary); }
.freq-legenda span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.freq-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.freq-ponto--presente, .freq-barra__seg--presente { background: var(--success); }
.freq-ponto--falta, .freq-barra__seg--falta { background: var(--danger); }
.freq-ponto--cancelado, .freq-barra__seg--cancelado { background: var(--border-forte); }

.freq-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.freq-grade > .card + .card { margin-top: 0; }
@media (min-width: 1024px) { .freq-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.freq-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.freq-tabela th, .freq-tabela td { padding: var(--sp-2); text-align: left; }
.freq-tabela thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.freq-tabela tbody tr + tr { border-top: 1px solid var(--border); }
.freq-tabela tbody th { font-weight: 600; white-space: nowrap; }
.freq-tabela__barra { width: 40%; }
.freq-barra { display: flex; height: 10px; border-radius: var(--raio-pill); overflow: hidden; background: var(--surface-muted); }
.freq-barra__seg { display: block; height: 100%; }

.freq-mapa-wrap { overflow-x: auto; }
.freq-mapa { border-collapse: separate; border-spacing: 4px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; min-width: 100%; }
.freq-mapa th { color: var(--text-secondary); font-weight: 600; padding: var(--sp-1); text-align: center; }
.freq-mapa tbody th { text-align: right; white-space: nowrap; }
.freq-mapa__celula { min-width: 56px; padding: var(--sp-2) var(--sp-1); border-radius: var(--raio-sm); text-align: center; white-space: nowrap; }
.freq-mapa__celula--vazia { background: var(--surface-muted); }
.freq-mapa__celula--neutra { background: var(--surface-muted); color: var(--text-secondary); }
.freq-mapa__celula--otima { background: #D1FAE5; color: #065F46; }
.freq-mapa__celula--boa { background: #ECFDF5; color: #047857; }
.freq-mapa__celula--atencao { background: #FEF3C7; color: #92400E; }
.freq-mapa__celula--critica { background: #FEE2E2; color: #991B1B; }
.freq-mapa__v, .freq-mapa__f { display: inline-block; }
.freq-mapa__f { margin-left: var(--sp-1); }

.freq-datas > summary { cursor: pointer; list-style-position: inside; }
.freq-datas > summary .card__titulo { display: inline; }
.freq-datas[open] > summary { margin-bottom: var(--sp-3); }
/* No celular a .tabela vira cartao com um campo por linha; no ranking isso
   dava ~7 linhas por paciente. Aqui o nome ocupa a linha e os numeros dividem
   tres colunas. */
@media (max-width: 1023px) {
    .freq-compacta tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .freq-compacta tbody td:first-child { grid-column: 1 / -1; }
    .freq-compacta .badge { margin-top: 0; }
    .freq-compacta td::before { overflow-wrap: normal; letter-spacing: 0.02em; }
    .freq-tabela__barra { width: 25%; }
    .freq-mapa__celula { min-width: 44px; }
}

/* Semana dia a dia (frequencia.php): data x horario de uma semana, com quantos
   pacientes havia em cada hora e quem eram. Rola na horizontal no celular em
   vez de espremer sete colunas de nomes. */
.freq-semana__cabecalho { flex-wrap: wrap; align-items: flex-start; }
.freq-semana__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.freq-semana-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--sp-2)); padding: 0 var(--sp-2); }
.freq-semana__grade { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; font-size: var(--fs-xs); }
.freq-semana__grade th { padding: var(--sp-1); color: var(--text-secondary); font-weight: 600; text-align: center; vertical-align: middle; }
.freq-semana__grade thead th:first-child, .freq-semana__grade tbody th, .freq-semana__grade tfoot th { width: 56px; text-align: right; white-space: nowrap; }
.freq-semana__grade thead th:last-child { width: 64px; }
.freq-semana__grade thead a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: inherit; text-decoration: none; padding: var(--sp-1); border-radius: var(--raio-sm); }
.freq-semana__grade thead a:hover { background: var(--surface-muted); color: var(--primary-dark); }
.freq-semana__dow { text-transform: uppercase; letter-spacing: 0.05em; }
.freq-semana__data { color: var(--text-primary); font-size: var(--fs-sm); }
.freq-semana__hoje a { background: var(--primary-soft); color: var(--primary-dark); }
.freq-semana__celula { vertical-align: top; padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--raio-sm); background: var(--surface); }
.freq-semana__celula--vazia { border-style: dashed; background: transparent; }
.freq-semana__qtd { margin: 0; color: var(--text-secondary); }
.freq-semana__qtd strong { font-family: var(--fonte-titulo); font-size: var(--fs-lg); color: var(--text-primary); margin-right: 2px; }
.freq-semana__resumo { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); margin: 2px 0 var(--sp-1); font-weight: 600; }
.freq-semana__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.freq-semana__item { position: relative; padding-left: 12px; line-height: 1.3; overflow-wrap: anywhere; color: var(--text-primary); }
.freq-semana__item::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 7px; height: 7px; border-radius: 2px; background: var(--border-forte); }
.freq-semana__item--presente::before { background: var(--success); }
.freq-semana__item--falta::before { background: var(--danger); }
.freq-semana__item--sem_registro::before { background: var(--warning); }
.freq-semana__item--futuro::before { background: var(--info); }
.freq-semana__item--cancelado { color: var(--text-secondary); text-decoration: line-through; }
.freq-semana__total { text-align: center; vertical-align: middle; font-size: var(--fs-sm); }
.freq-semana__total strong { display: block; font-family: var(--fonte-titulo); font-size: var(--fs-md); }
.freq-semana__grade tfoot td, .freq-semana__grade tfoot th { border-top: 1px solid var(--border); padding-top: var(--sp-2); }
.freq-semana__legenda { margin: var(--sp-3) 0 0; }
/* A coluna de horarios fica presa ao rolar a grade para o lado no celular. */
.freq-semana__grade thead th:first-child, .freq-semana__grade tbody th, .freq-semana__grade tfoot th { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.freq-ponto--sem-registro { background: var(--warning); }
.freq-ponto--futuro { background: var(--info); }

/* ---------------------------------------------------------------------------
   Servicos da clinica: fisioterapia x pilates (schema 60, 23/09/2026)
   Duas cores fixas, usadas igual na agenda, na ficha e na frequencia: a
   recepcao reconhece o servico pela cor antes de ler o rotulo.
   --------------------------------------------------------------------------- */
.badge--servico-fisioterapia { background: #F0FDFA; color: #0F766E; border-color: #99F6E4; }
.badge--servico-pilates { background: #FDF2F8; color: #BE185D; border-color: #FBCFE8; }

.servicos-escolha { border: 0; padding: 0; min-width: 0; margin-inline: 0; }
.servicos-escolha__opcoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.servicos-escolha__opcao {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: var(--toque-min); padding: 0 var(--sp-4);
    border: 1px solid var(--border-forte); border-radius: var(--raio-sm);
    background: var(--surface); font-weight: 600; cursor: pointer;
}
.servicos-escolha__opcao:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.servicos-escolha__opcao input { width: 18px; height: 18px; accent-color: var(--primary); }
.servicos-escolha[aria-invalid="true"] .servicos-escolha__opcao { border-color: var(--danger); }

.filtro-servico { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
.filtro-servico__item {
    padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border); border-radius: var(--raio-pill);
    font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); text-decoration: none;
}
.filtro-servico__item:hover { border-color: var(--border-forte); color: var(--text-primary); }
.filtro-servico__item--ativo { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.filtro-servico__item--pilates.filtro-servico__item--ativo { background: #FDF2F8; border-color: #BE185D; color: #BE185D; }

.agenda-chip__servico, .freq-semana__servico {
    display: inline-block; justify-self: start; padding: 0 var(--sp-1); border-radius: 4px;
    background: #FDF2F8; color: #BE185D; font-size: 0.6875rem; font-weight: 700;
}

.freq-servicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.freq-servico { padding: var(--sp-4); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--raio); background: var(--surface); box-shadow: var(--sombra-sm); }
.freq-servico--fisioterapia { border-left-color: #0D9488; }
.freq-servico--pilates { border-left-color: #DB2777; }
.freq-servico__cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.freq-servico__titulo { margin: 0; font-size: var(--fs-md); }
.freq-servico__ver { font-size: var(--fs-xs); }
.freq-servico__numeros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; }
.freq-servico__numeros dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.freq-servico__numeros dd { margin: 2px 0 0; font-family: var(--fonte-titulo); font-size: var(--fs-lg); font-weight: 800; }
@media (max-width: 420px) { .freq-servico__numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }