/* ============================================================================
   CertMed — certmed-telas.css
   Estilo das telas. Carregado depois do certmed-ui.css (design system) e do
   certmed-icones.css, em todos os layouts.

   ⛔ Nenhuma tela tem CSS próprio: as views não trazem bloco <style>. O que é
   de uma tela só mora aqui, na seção dela; o que se repete vira componente no
   certmed-ui.css. Valor que só existe em tempo de execução (cor escolhida pelo
   médico, largura calculada) entra por variável CSS no style do elemento.
   ============================================================================ */


/* ############################################################################
   BASE (layouts e telas do líder)
   ############################################################################ */

/* ===== Telas embutidas em modal/iframe (Views/Shared/_LayoutEmbed.cshtml) ===== */
/* Conteúdo direto, sem casca: fundo da folha, sem cabeçalho de página. */
body.cm-embed .content-header { display: none; }
body.cm-embed section.content { padding-top: 12px; }


/* ############################################################################
   CLÍNICO
   ############################################################################ */

/* ============================================================================
   CertMed — partes/clinico.css
   Telas clínicas: Agenda, Configuração da agenda, Fila do dia, Atendimento
   (prontuário), Prontuário do paciente, Pacientes (lista e ficha), Documentos
   médicos (lista, receita, emissão) e a caixa de anexos da consulta.

   Concatenado em certmed-telas.css. Só tokens do certmed-ui.css aqui —
   nenhuma cor nova. Regra genérica (label, table th, .card…) vive escopada no
   container da tela; o que é da tela leva o prefixo dela.
   ============================================================================ */


/* ===== Tela: Agenda (Views/Agenda/Index.cshtml) ===== */

/* --- Calendário (FullCalendar) --- */
#calendar { --fc-border-color: var(--line); --fc-today-bg-color: rgba(var(--brand-rgb),.05); }

/* Cabeçalhos dos dias */
#calendar .fc-col-header-cell { background: var(--surface-2); }
#calendar .fc-col-header-cell-cushion { color: var(--ink-soft); font-weight: 500; font-size: .82rem; padding: 8px 4px; text-decoration: none; }
#calendar .fc-day-today .fc-col-header-cell-cushion { color: var(--brand); font-weight: 600; }
#calendar .fc-timegrid-slot-label-cushion, #calendar .fc-timegrid-axis-cushion { color: var(--ink-faint); font-size: .74rem; font-variant-numeric: tabular-nums; }
#calendar .fc-timegrid-slot { height: 2.4em; } /* slots mais altos = eventos legíveis */

/* Fora do expediente fica cinza; dentro, branco */
#calendar .fc-non-business { background: var(--surface-2); }

/* Eventos (consultas) — cartões legíveis */
#calendar .fc-timegrid-event { border-radius: 8px; border-width: 0 0 0 4px; padding: 1px 4px; box-shadow: var(--sh-sm); }
#calendar .fc-event-main { font-size: .76rem; line-height: 1.25; }
#calendar .fc-ev-hora { font-weight: 600; opacity: .9; font-size: .68rem; font-variant-numeric: tabular-nums; }
#calendar .fc-ev-nome { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#calendar .fc-event:hover { filter: brightness(.95); cursor: pointer; }

/* Visão "todos os médicos": a faixa da esquerda tem a cor do médico (legenda no topo) */
#calendar .fc-ev-equipe.fc-daygrid-event { border-width: 0 0 0 4px; }
#calendar .fc-ev-medico { font-size: .66rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Encaixe — borda tracejada */
#calendar .fc-encaixe { border: 2px dashed var(--warning) !important; }
/* Resposta do paciente ao lembrete por WhatsApp */
#calendar .fc-ev-wpp { font-weight: 700; }
#calendar .fc-ev-wpp-alerta { color: #fff; background: #DC2626; border-radius: 3px; padding: 0 3px; }
#calendar .fc-pediu-remarcar { box-shadow: inset 0 0 0 2px #DC2626 !important; }

/* Fundo dos horários livres é clicável (dateClick) */
#calendar .fc-slot-livre { cursor: pointer; opacity: 1 !important; }

/* Resumo "N livres" por dia (visão de mês) */
.fc-livres-mes { cursor: pointer; font-weight: 500; text-align: center; border-radius: var(--r-sm); }
.fc-livres-mes .fc-event-title { width: 100%; text-align: center; }
.fc-livres-mes:hover { filter: brightness(.95); }

/* Botões do FullCalendar no tom do sistema (botões segmentados M3) */
#calendar .fc-button-primary { background: var(--surface); border-color: var(--md-outline-variant); color: var(--ink-soft); font-size: .82rem; font-weight: 500; box-shadow: none !important; border-radius: var(--r-pill); }
#calendar .fc-button-group > .fc-button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
#calendar .fc-button-group > .fc-button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#calendar .fc-button-primary:hover { background: var(--surface-2); color: var(--ink); }
#calendar .fc-button-primary:disabled { background: var(--surface); border-color: var(--md-outline-variant); color: var(--ink-faint); }
#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button-primary:not(:disabled):active { background: var(--md-secondary-container); border-color: var(--md-outline-variant); color: var(--md-on-primary-container); }
#calendar .fc-toolbar-title { font-size: 1.05rem; font-weight: 500; color: var(--ink); }
#calendar .fc-toolbar.fc-header-toolbar { margin-bottom: .75rem; }

/* --- Faixa única do topo: abas + filtros + ações (linha 1), indicadores +
   legenda (linha 2). Antes eram quatro blocos empilhados e o calendário caía
   abaixo da dobra. --- */
.ag-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; }
/* display:contents faz os filhos entrarem na faixa; o show()/hide() por aba
   continua valendo porque hide() escreve display:none no próprio #calOnly. */
.ag-topo #calOnly { display: contents; }
.ag-topo .ag-abas { flex: 0 0 auto; order: 1; margin: 0; }
.ag-topo .ag-toolbar { order: 2; flex: 1 1 340px; }
.ag-topo .ag-acoes-topo { order: 3; flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ag-topo .ag-faixa { order: 4; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }

/* Filtros em linha: rótulo ao lado do campo (nada some, só encolhe) */
.ag-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.ag-toolbar > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ag-toolbar label { margin: 0; font-size: .76rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
/* Um local com nome comprido esticava o select (e a faixa inteira) até o fim da tela:
   o <select> se dimensiona pela maior opção. Largura presa, texto cortado com reticências. */
.ag-toolbar .ag-f-local { flex: 0 1 240px; min-width: 0; }
.ag-toolbar .ag-f-local select { min-width: 150px; max-width: 100%; text-overflow: ellipsis; }
.ag-toolbar .ag-f-livres { margin: 0; }
.ag-toolbar .ag-f-livres .custom-control-label { font-size: .76rem; }
/* "Mostrar horários livres" é longo e o nowrap dos rótulos de filtro fazia
   a barra passar da largura da tela no celular (394px numa tela de 390). */
.ag-toolbar .ag-f-livres .custom-control-label { white-space: normal; }

/* Legenda: referência discreta, uma linha só */
.ag-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: .72rem; color: var(--ink-soft); padding: 4px 10px; background: var(--surface-2); border: 0; border-radius: var(--r-pill); margin: 0; flex: 1 1 260px; min-width: 0; }
/* O gap do .ag-legenda só separa os 3 filhos diretos; as etiquetas de cor ficam
   DENTRO do #legendaStatus e saíam coladas ("LivreAgendadoConfirmado..."). */
.ag-legenda #legendaStatus { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.ag-legenda .ag-legenda-mola { flex: 1; }
.ag-legenda .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: 0; }
.ag-legenda .dot-livre { background: rgba(46,125,70,.45); }
.ag-legenda .dot-encaixe { background: #A86200; }
.ag-legenda .dot-bloqueado { background: rgba(220,38,38,.35); }
.ag-legenda .num { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    .ag-topo .ag-toolbar { flex: 1 1 100%; }
    .ag-toolbar > div { flex: 1 1 45%; }
    .ag-topo .ag-acoes-topo { margin-left: 0; }
    #calendar .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: 6px; }
    #calendar .fc-toolbar-title { font-size: .95rem; }
}

/* --- Popup de detalhes do agendamento --- */
#modalAgInfo .modal-content { border: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); }
#modalAgInfo .modal-header { padding: 1rem 1.25rem .5rem 1.5rem; align-items: center; }
#modalAgInfo .modal-title { font-size: 1.15rem; font-weight: 500; }
#modalAgInfo .modal-body { padding: .75rem 1.5rem 1rem; }
#modalAgInfo .agi-meta { font-size: .88rem; color: var(--ink); margin-bottom: .9rem; }
#modalAgInfo .agi-meta > div { padding: 3px 0; display: flex; align-items: center; gap: 9px; }
#modalAgInfo .agi-meta i { color: var(--ink-faint); width: 15px; text-align: center; flex: none; }
/* Ações principais (Atender + Cobrar) */
#modalAgInfo .agi-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#modalAgInfo .agi-primary .btn { font-weight: 500; padding: .5rem; }
/* Ações secundárias como tiles uniformes (ícone em cima) */
#modalAgInfo .agi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 7px; margin-top: 8px; }
#modalAgInfo .agi-grid .btn { font-size: .74rem; font-weight: 500; padding: .55rem .25rem; color: var(--ink-soft); background: var(--surface-2); border: 0; border-radius: var(--r); line-height: 1.1; min-width: 0; }
#modalAgInfo .agi-grid .btn:hover { background: var(--md-surface-high); color: var(--ink); }
#modalAgInfo .agi-grid .btn i { display: block; font-size: 1.02rem; margin-bottom: 4px; color: var(--brand); }
#modalAgInfo .agi-status { margin-top: 1rem; }
#modalAgInfo .agi-status label { font-size: .8rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 3px; display: block; }
#modalAgInfo .modal-footer { padding: .55rem 1rem; }

/* --- Lista do dia: indicadores + tabela --- */
/* Grid que reflui sozinho: 5 cartões no monitor, 2 no notebook, 1 no telefone,
   sem precisar de um media query por faixa. */
.ag-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: .8rem; }
.ag-kpi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); border: 0; background: var(--surface); box-shadow: var(--sh-sm); min-width: 0; }
.ag-kpi > div { min-width: 0; }
.ag-kpi-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: .95rem; flex: none; }
.ag-kpi-num { font-size: 1.25rem; font-weight: 500; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ag-kpi-rot { font-size: .8rem; color: var(--ink-soft); font-weight: 500; }
.kpi-pac .ag-kpi-ico { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.kpi-ocu .ag-kpi-ico { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.kpi-fal .ag-kpi-ico { background: var(--md-error-container); color: var(--md-on-error-container); }
.kpi-esp .ag-kpi-ico { background: var(--md-success-container); color: var(--md-on-success-container); }
.kpi-sai .ag-kpi-ico { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* Variante faixa (topo do calendário): ~40px de altura, número e rótulo na
   mesma linha — quatro cartões altos só para quatro números era desperdício. */
.ag-kpis-faixa { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; flex: 1 1 380px; }
.ag-kpis-faixa .ag-kpi { flex: 0 1 auto; gap: 8px; padding: 5px 12px 5px 6px; border-radius: var(--r-pill); }
/* Só o bloco de texto (número + rótulo) alinha pela base; o :not() protege a
   caixinha do ícone, que é irmã dele e precisa continuar centrada. */
.ag-kpis-faixa .ag-kpi > div:not(.ag-kpi-ico) { display: flex; align-items: baseline; gap: 6px; }
.ag-kpis-faixa .ag-kpi-ico { width: 28px; height: 28px; border-radius: 10px; font-size: .78rem; }
.ag-kpis-faixa .ag-kpi-num { font-size: 1rem; }
.ag-kpis-faixa .ag-kpi-rot { font-size: .75rem; white-space: nowrap; }

/* Barra de navegação por dia */
.ag-diabar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: .7rem; }
.ag-dia-ext { font-size: .82rem; color: var(--ink-soft); font-weight: 500; text-transform: capitalize; }
.ag-diabar .ag-f-data { width: 160px; }
.ag-diabar .ag-f-local-dia { width: auto; min-width: 190px; }

/* Tabela do dia */
.ag-tab { font-size: .84rem; font-variant-numeric: tabular-nums; }
.ag-tab thead th { background: var(--surface-2); color: var(--ink-soft); font-weight: 500; font-size: .8rem; border: 0; padding: .55rem .6rem; white-space: nowrap; }
.ag-tab tbody td { padding: .45rem .6rem; vertical-align: middle; border-top: 1px solid var(--line-2); }
/* Larguras por classe (o cabeçalho é montado no JS) — hora e horários fixos,
   nome e observação ficam com a sobra. */
.ag-tab .ag-c-hora, .ag-tab .ag-c-chegada { width: 92px; }
.ag-tab .ag-c-conv { width: 130px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-tab .ag-c-tipo { width: 96px; }
.ag-tab .ag-c-sit { width: 126px; }
.ag-tab .ag-c-acoes { width: 196px; }
.ag-hora { display: inline-block; background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: var(--r-pill); padding: 2px 11px; font-weight: 500; font-size: .78rem; white-space: nowrap; }
.ag-livre .ag-hora, .ag-bloq .ag-hora { background: var(--md-surface-high); color: var(--ink-soft); }
.ag-cel-nome { min-width: 150px; }
.ag-nome { font-weight: 500; color: var(--ink); display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ag-obs { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.ag-tab .ag-c-chegada, .ag-tab .ag-c-tipo { white-space: nowrap; }
.ag-sit { font-weight: 500; font-size: .78rem; white-space: nowrap; }
.ag-sit i { font-size: .5rem; vertical-align: 2px; }
.ag-acoes { white-space: nowrap; }
.ag-acoes .btn { margin-left: 2px; }
.ag-vazio-ico { opacity: .35; }

/* --- Modal de agendamento --- */
.ag-form label { font-size: .8rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 3px; }
.ag-form .ag-sec { font-size: .92rem; font-weight: 500; color: var(--brand); padding-bottom: 6px; margin-bottom: .7rem; border-bottom: 1px solid var(--line); }
/* Itens contratados: quantidade e valor à direita, sem quebrar */
#agItensTab { font-variant-numeric: tabular-nums; }
#agItensTab td:nth-child(2), #agItensTab td:nth-child(3),
#agItensTab th#agItensTotal { text-align: right; white-space: nowrap; }
#agItensTab td:last-child, #agItensTab th:last-child { width: 36px; text-align: right; }

.ag-painel { background: var(--surface-2); border: 0; border-radius: var(--r-lg); padding: 16px; }
.ag-painel-vazio { text-align: center; color: var(--ink-faint); padding: 30px 10px; font-size: .84rem; }
.ag-painel-vazio i { font-size: 2rem; opacity: .35; display: block; margin-bottom: 8px; }
.ag-pac-id { display: flex; align-items: center; gap: 11px; }
.ag-av { width: 52px; height: 52px; border-radius: 16px; background: var(--md-primary-container); color: var(--md-on-primary-container); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.05rem; flex: none; }
.ag-pac-nome { font-weight: 600; color: var(--ink); line-height: 1.2; }
.ag-pac-sub { font-size: .78rem; color: var(--ink-soft); }
.ag-dados { list-style: none; padding: 0; margin: 12px 0 0; font-size: .8rem; }
.ag-dados li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); color: var(--ink); word-break: break-word; }
.ag-dados li:last-child { border-bottom: 0; }
.ag-dados i { width: 14px; text-align: center; color: var(--ink-faint); flex: none; }
.ag-dados .vaz { color: var(--ink-faint); }
.ag-hist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 12px; }
.ag-hist > div { border-radius: var(--r); padding: 8px 9px; text-align: center; }
.ag-hist .v { font-weight: 500; font-size: 1rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ag-hist .h-ult .v { font-size: .84rem; }
.ag-hist .r { font-size: .72rem; font-weight: 500; opacity: .85; }
.ag-hist .h-ult { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.ag-hist .h-dias { background: var(--md-success-container); color: var(--md-on-success-container); }
.ag-hist .h-can { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.ag-hist .h-fal { background: var(--md-error-container); color: var(--md-on-error-container); }
.ag-alerta { margin-top: 10px; font-size: .78rem; border-radius: var(--r-sm); padding: 8px 10px; }
.ag-alerta-al { background: var(--md-error-container); border: 0; color: var(--md-on-error-container); }
.ag-alerta-px { background: var(--md-primary-container); border: 0; color: var(--md-on-primary-container); }
@media (max-width: 991px) { .ag-painel { margin-top: 1rem; } }


/* ===== Tela: Configuração da agenda (Views/Agenda/Configuracao.cshtml) ===== */
.tela-agenda-config .grade-semana { display: flex; gap: 8px; }
.tela-agenda-config .grade-semana .day-col { flex: 1 1 0; min-width: 0; }
.tela-agenda-config .day-head { font-weight: 500; text-align: center; padding: 7px 0; background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: var(--r) var(--r) 0 0; font-size: .82rem; }
.tela-agenda-config .day-col.fds .day-head { background: var(--md-surface-high); color: var(--ink-soft); }
.tela-agenda-config .day-blocks { border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--r) var(--r); min-height: 64px; padding: 6px; background: var(--surface); }
.tela-agenda-config .bloco-chip { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: var(--brand-l); color: var(--brand-d); border: 0; border-radius: var(--r-sm); padding: 4px 8px; font-size: .78rem; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.tela-agenda-config .bloco-chip .rem { cursor: pointer; color: var(--danger); }
.tela-agenda-config .day-vazio { color: var(--ink-faint); font-size: .75rem; text-align: center; padding-top: 12px; }
.tela-agenda-config .dia-toggle { min-width: 46px; }
.tela-agenda-config .dia-toggle.active { background: var(--md-secondary-container); border-color: var(--md-outline-variant); color: var(--md-on-primary-container); }


/* ===== Tela: Fila do dia (Views/Fila/Index.cshtml) ===== */
.tela-fila .fila-data { font-size: 1rem; }

/* Indicadores: grid que reflui em vez de flex com min-width */
.tela-fila .fila-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tela-fila .kpi { background: var(--surface); border: 0; border-radius: var(--r-lg); padding: 12px 16px;
    box-shadow: var(--sh-sm); display: flex; align-items: center; gap: 12px; min-width: 0; }
.tela-fila .kpi > div { min-width: 0; }
.tela-fila .kpi .ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 1.05rem; flex: none; }
.tela-fila .kpi .v { font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tela-fila .kpi .l { font-size: .8rem; color: var(--ink-soft); font-weight: 500; }
.tela-fila .kpi-prev .ic { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.tela-fila .kpi-agu .ic { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.tela-fila .kpi-ema .ic { background: #EADDFF; color: #4F378B; }
.tela-fila .kpi-con .ic { background: var(--md-success-container); color: var(--md-on-success-container); }
.tela-fila .kpi-esp .ic { background: var(--md-surface-high); color: var(--ink-soft); }

/* Controles */
.tela-fila .fila-controles { gap: 12px; }
.tela-fila .fila-f-local { max-width: 220px; }
.tela-fila .fila-f-data { max-width: 170px; }

/* Quadro: colunas que refluem (4 no monitor, 2 no notebook, 1 no telefone) */
.tela-fila .fila-quadro { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.tela-fila .fila-col { background: var(--surface-2); border-radius: var(--r-lg); display: flex; flex-direction: column; height: 100%; min-width: 0; }
.tela-fila .fila-col .col-head { padding: 12px 16px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 2px solid; }
.tela-fila .col-head .pill { background: var(--surface); border-radius: var(--r-pill); padding: 0 11px; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.tela-fila .col-body { padding: 12px; overflow: auto; max-height: 70vh; flex: 1; }
.tela-fila .col-head-prev { border-color: var(--brand); color: var(--brand-d); }
.tela-fila .col-head-agu { border-color: var(--warning); color: var(--md-on-warning-container); }
.tela-fila .col-head-ema { border-color: #6750A4; color: #4F378B; }
.tela-fila .col-head-con { border-color: var(--success); color: var(--md-on-success-container); }

/* Cartões da fila — com mais respiro */
.tela-fila .fcard { background: var(--surface); border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--sh-sm);
    border: 0; transition: box-shadow .15s, transform .15s; }
.tela-fila .fcard:last-child { margin-bottom: 0; }
.tela-fila .fcard:hover { box-shadow: var(--sh); transform: translateY(-1px); }
.tela-fila .fcard .av { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-weight: 500; background: var(--md-surface-high); color: var(--ink-soft); font-size: .82rem; flex-shrink: 0; }
.tela-fila #colPrevistos .av { color: var(--md-on-primary-container); }
.tela-fila #colAguardando .av { color: var(--md-on-warning-container); }
.tela-fila #colEmatend .av { color: #4F378B; }
.tela-fila #colConcluidos .av { background: var(--md-surface-high) !important; color: var(--ink-soft); }
.tela-fila .fcard .fcard-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tela-fila .fcard .fcard-topo > div { min-width: 0; }
.tela-fila .fcard .nome { font-weight: 500; line-height: 1.15; color: var(--ink); }
.tela-fila .fcard .hora { font-variant-numeric: tabular-nums; }
.tela-fila .fcard .fcard-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.tela-fila .fcard.warn { background: var(--warning-l); }
.tela-fila .fcard.danger { background: var(--danger-l); }
.tela-fila .fcard.proximo { box-shadow: 0 0 0 2px var(--success), var(--sh); }
.tela-fila .fcard-concluido { opacity: .92; }
.tela-fila .fcard-tempo { color: var(--ink-soft); }
.tela-fila .fcard-tempo-warn { color: var(--warning); }
.tela-fila .fcard-tempo-danger { color: var(--danger); }
.tela-fila .fcard-tempo-atend { color: #4F378B; }
.tela-fila .wait { font-variant-numeric: tabular-nums; font-weight: 600; }
.tela-fila .fila-empty { color: var(--ink-faint); text-align: center; padding: 22px 8px; font-size: .85rem; }
.tela-fila .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); display: inline-block; vertical-align: middle; animation: cmpulse 1.6s infinite; }
.tela-fila .btn-ico { padding: .2rem .5rem; }

/* Arrastar e soltar cartões entre as colunas */
.tela-fila .fila-dica { white-space: nowrap; }
.tela-fila .fcard[draggable="true"] { cursor: grab; }
.tela-fila .fcard.arrastando { opacity: .4; cursor: grabbing; transform: rotate(-1.5deg); box-shadow: var(--sh); }
.tela-fila .fila-col.alvo-ok .col-body { outline: 2px dashed var(--brand); outline-offset: -6px; border-radius: var(--r); }
.tela-fila .fila-col.alvo-nao { opacity: .45; }
.tela-fila .col-body.sobre { background: var(--md-primary-container); border-radius: var(--r); }
@keyframes cmpulse { 0% { box-shadow: 0 0 0 0 rgba(37,108,60,.5); } 70% { box-shadow: 0 0 0 7px rgba(37,108,60,0); } 100% { box-shadow: 0 0 0 0 rgba(37,108,60,0); } }


/* ===== Tela: Dashboard da Recepção (Views/Recepcao/Index.cshtml) ===== */

.tela-recepcao-dash .content-header { margin-bottom: 16px; }
.tela-recepcao-dash .content-header h1 { font-size: 1.6rem; font-weight: 500; }
.tela-recepcao-dash .content-header small { font-weight: 400; color: var(--ink-soft); }

/* Busca rápida paciente */
.tela-recepcao-dash .recepcao-busca-wrapper { box-shadow: var(--sh-sm); border-color: var(--line); }
.tela-recepcao-dash .recepcao-busca-wrapper .card-body { background: var(--surface); }
.tela-recepcao-dash #buscaResultados { position: relative; z-index: 10; background: var(--surface); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--sh); border: 1px solid var(--line); border-top: 0; }
.tela-recepcao-dash #buscaResultados .list-group-item { padding: 10px 16px; }
.tela-recepcao-dash #buscaResultados .list-group-item:hover { background: var(--surface-2); }

/* KPI Cards */
.tela-recepcao-dash .kpi-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    box-shadow: var(--sh-sm);
    transition: box-shadow .15s, transform .15s;
}
.tela-recepcao-dash .kpi-card:hover { box-shadow: var(--sh); transform: translateY(-2px); }
.tela-recepcao-dash .kpi-card .kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: none; }
.tela-recepcao-dash .kpi-card .kpi-value { font-size: 1.75rem; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tela-recepcao-dash .kpi-card .kpi-label { font-size: .8rem; color: var(--ink-soft); font-weight: 500; }

/* Cores dos KPIs */
.tela-recepcao-dash .kpi-prev .kpi-icon { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.tela-recepcao-dash .kpi-agu .kpi-icon { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.tela-recepcao-dash .kpi-ema .kpi-icon { background: #EADDFF; color: #4F378B; }
.tela-recepcao-dash .kpi-con .kpi-icon { background: var(--md-success-container); color: var(--md-on-success-container); }
.tela-recepcao-dash .kpi-falta .kpi-icon { background: var(--md-error-container); color: var(--md-on-error-container); }
.tela-recepcao-dash .kpi-pac .kpi-icon { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* Cards principais (Aguardando / Em atendimento) */
.tela-recepcao-dash .card-outline { border-width: 2px; }
.tela-recepcao-dash .card-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.tela-recepcao-dash .card-header h3 { font-size: 1rem; font-weight: 500; color: var(--ink); }
.tela-recepcao-dash .card-body { padding: 0; }
.tela-recepcao-dash .list-group-flush .list-group-item { padding: 12px 16px; border-color: var(--line); }
.tela-recepcao-dash .list-group-flush .list-group-item:hover { background: var(--surface-2); }
.tela-recepcao-dash .list-group-item small { color: var(--ink-soft); }
.tela-recepcao-dash .list-group-item .badge { font-size: .68rem; }

/* Ações rápidas */
.tela-recepcao-dash .btn-lg { padding: 14px 20px; font-size: .95rem; font-weight: 500; border-radius: var(--r); }
.tela-recepcao-dash .btn-lg i { font-size: 1.1rem; }

/* Módulos (atalhos) */
.tela-recepcao-dash .btn-outline-primary,
.tela-recepcao-dash .btn-outline-secondary,
.tela-recepcao-dash .btn-outline-success,
.tela-recepcao-dash .btn-outline-warning,
.tela-recepcao-dash .btn-outline-info,
.tela-recepcao-dash .btn-outline-dark {
    padding: 12px 16px;
    font-weight: 500;
    border-radius: var(--r);
    text-align: left;
    justify-content: flex-start;
}
.tela-recepcao-dash .btn-outline-primary i,
.tela-recepcao-dash .btn-outline-secondary i,
.tela-recepcao-dash .btn-outline-success i,
.tela-recepcao-dash .btn-outline-warning i,
.tela-recepcao-dash .btn-outline-info i,
.tela-recepcao-dash .btn-outline-dark i {
    width: 22px;
    text-align: center;
    margin-right: 10px;
}

/* Responsivo */
@media (max-width: 991.98px) {
    .tela-recepcao-dash .kpi-card { padding: 12px; }
    .tela-recepcao-dash .kpi-value { font-size: 1.4rem; }
    .tela-recepcao-dash .btn-lg { padding: 12px 16px; font-size: .88rem; }
}

@media (max-width: 767.98px) {
    .tela-recepcao-dash .content-header { flex-direction: column; gap: 8px; }
    .tela-recepcao-dash .content-header .breadcrumb { float: none !important; }
    .tela-recepcao-dash .row > .col-lg-4 { margin-top: 16px; }
}

/* ===== Tela: Atendimento / prontuário (Views/Atendimento/Index.cshtml) ===== */
.at-header { background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: var(--r-lg); }
.at-header h4 { color: var(--md-on-primary-container); font-weight: 500; }
.at-avatar { width: 64px; height: 64px; border-radius: 20px; background: var(--surface); color: var(--brand);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500; flex-shrink: 0; }
/* Cabeçalho do paciente é clicável: abre a ficha completa (modal) */
.at-header .at-avatar, .at-header h4 { cursor: pointer; }
.at-header .at-avatar:hover, .at-header h4:hover { text-decoration: underline; opacity: .92; }
.at-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.6);
    border-radius: var(--r-pill); padding: 3px 11px; font-size: .82rem; margin: 2px 4px 2px 0; }
.at-timer { font-variant-numeric: tabular-nums; font-weight: 600; }
.at-alergia { background: var(--md-error-container); border: 0; color: var(--md-on-error-container); border-radius: var(--r); padding: 8px 12px; font-weight: 500; }
/* Os chips quebram linha dentro do bloco do nome: sem isto, muitos chips empurravam o cronômetro para baixo. */
.at-header > .d-flex > .flex-grow-1 { flex-basis: 0; min-width: 220px; }
.at-chip-sangue { background: var(--md-error-container); color: var(--md-on-error-container); font-weight: 600; }
/* Tipo sanguíneo clicável (abre o editor do histórico de saúde) e botões do paciente no cabeçalho */
button.at-chip { border: 0; cursor: pointer; font: inherit; }
button.at-chip-sangue:hover { box-shadow: 0 0 0 2px var(--md-error); }
.at-acoes-paciente { display: flex; flex-wrap: wrap; gap: 8px; }
/* Histórico de saúde informado pelo paciente (cabeçalho do atendimento) */
.at-antec { display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.55); border-radius: var(--r); padding: 10px 12px; }
.at-antec-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; }
.at-antec-rot { display: inline-flex; align-items: center; gap: 5px; min-width: 170px; font-size: .8rem; font-weight: 600; color: var(--md-on-primary-container); }
.at-antec-rot i { font-size: 17px; }
.at-antec-item { display: inline-flex; align-items: baseline; gap: 5px; background: var(--surface); color: var(--ink); border-radius: var(--r-pill); padding: 2px 11px; font-size: .82rem; }
.at-antec-item small { color: var(--ink-faint); font-size: .74rem; font-variant-numeric: tabular-nums; }
.at-antec-grupo[data-tipo="DoencaAtual"] .at-antec-item { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.at-antec-grupo[data-tipo="DoencaAtual"] .at-antec-item small { color: var(--md-on-warning-container); opacity: .75; }
@media (max-width: 575px) { .at-antec-rot { min-width: 0; width: 100%; } }
/* Faixa "contratado neste atendimento" */
.at-contratado { background: var(--brand-l); box-shadow: none; }
.at-contratado .badge { font-variant-numeric: tabular-nums; }

.tela-atendimento .vital-card { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; height: 100%; }
.tela-atendimento .vital-card label { font-size: .8rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 4px; }
.tela-atendimento .vital-card .form-control { border: 0; border-bottom: 2px solid var(--line); border-radius: 0; padding-left: 0; font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.tela-atendimento .vital-card .form-control:focus { box-shadow: none; border-bottom-color: var(--brand); }
.tela-atendimento .vital-flag { font-size: .72rem; font-weight: 500; }
.tela-atendimento .field-label { font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
/* Formulário do prontuário com mais ar entre os grupos */
.tela-atendimento .tab-content .form-group { margin-bottom: 1.15rem; }
.tela-atendimento .tab-content .form-group:last-child { margin-bottom: 0; }
.at-nav .nav-link { font-weight: 500; }
/* Barra de ações colada no rodapé do card, sem estourar em tela estreita */
.at-sticky { position: sticky; bottom: 0; background: var(--surface); z-index: 5; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 8px; }
.at-sticky > div { display: flex; flex-wrap: wrap; gap: 6px; }
.at-menu-rolagem { max-height: 320px; overflow: auto; }
.at-docs-titulo { font-weight: 500; }
.at-docs-titulo .at-docs-acoes { display: flex; align-items: center; gap: 6px; }
.at-vazio-ico { opacity: .4; }

/* Coluna lateral (documentos + anexos): acompanha a rolagem só quando há
   largura de sobra. Entre 992 e 1400px ela ficava espremida — vai para baixo. */
.at-side-card { position: sticky; top: 76px; }
.at-docs-list { max-height: 320px; overflow-y: auto; }
/* Botões de emitir documento: 2 colunas que não estouram (a receita ocupa a linha) */
.at-docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.at-docs-grid .btn { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.at-docs-grid .btn-block + .btn-block { margin-top: 0; }
.at-docs-grid .at-doc-largo { grid-column: 1 / -1; }
/* Com o card de anexos logo abaixo, o sticky fazia o card de baixo passar por cima deste */
.at-side-card:has(+ .card) { position: static; }
/* Nome de arquivo longo quebra em vez de empurrar os botões para fora da coluna */
.at-side-card ~ .card .list-group-item > .small { min-width: 0; overflow-wrap: anywhere; }
/* Ações por documento (ver / imprimir / editar) sempre na mesma linha */
.at-doc-acoes { display: inline-flex; gap: 3px; flex: none; white-space: nowrap; margin-left: 8px; }
.at-anexo-meta { font-size: .75rem; }
#anexoAvisoRecepcao { font-size: .83rem; }
#anexoCategoria { max-width: 130px; }

@media (max-width: 1399.98px) {
    .at-col-principal, .at-col-lateral { flex: 0 0 100%; max-width: 100%; }
    .at-side-card { position: static; }
}

/* Modais do prontuário */
#modalFichaPac .modal-header { background: transparent; color: var(--ink); }
.at-modal-emissao { max-width: 96vw; width: 96vw; height: 92vh; margin: 4vh auto; }
.at-modal-emissao .modal-content { height: 100%; }
.at-modal-emissao .modal-body { height: calc(100% - 49px); }
#iframeEmissao { width: 100%; height: 100%; border: 0; }
.at-ficha-rot { width: 150px; }
.at-modelo-item { cursor: pointer; }
@media (max-width: 767.98px) {
    .at-modal-emissao { max-width: 100vw; width: 100vw; height: 100vh; margin: 0; }
    .at-modal-emissao .modal-content { border-radius: 0; }
}


/* ===== Histórico do paciente — componente único (wwwroot/js/certmed-historico.js) =====
   Abre em modal (<dialog>) de qualquer tela, na página /Paciente/Historico/{id} e dentro do
   atendimento. O layout responde à largura do PRÓPRIO componente (container query), não da
   janela: no modal largo o resumo fica ao lado; na aba do atendimento, atrás do botão "Resumo". */

/* Modal */
.cm-hist-dialog {
  border: 0; padding: 0; margin: auto;
  /* Quase a tela toda: sobra só uma faixa em volta para ficar claro que é um modal por cima da tela. */
  width: calc(100vw - 40px); height: calc(100dvh - 40px); max-width: none; max-height: none;
  border-radius: var(--r-xl); background: var(--md-surface); color: var(--md-on-surface);
  box-shadow: var(--sh-lg); overflow: hidden;
}
.cm-hist-dialog[open] { animation: cmh-entra .22s var(--ease); }
.cm-hist-dialog::backdrop { background: rgba(var(--md-scrim), .5); }
.cm-hist-dialog-corpo { height: 100%; }
html.cmh-travado { overflow: hidden; }
@keyframes cmh-entra { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.cmh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }

/* Componente */
.cm-hist {
  container: cmhist / inline-size; position: relative; color: var(--md-on-surface);
  --cmh-s1: #11609C; --cmh-s2: #B07F1E;          /* séries dos gráficos (validadas p/ daltonismo) */
}
html[data-theme="dark"] .cm-hist { --cmh-s1: #4A94D8; --cmh-s2: #B3801E; }
html[data-theme="mono"] .cm-hist { --cmh-s1: #E6EDF3; --cmh-s2: #8B949E; }
.cm-hist--modal { height: 100%; display: flex; flex-direction: column; background: var(--md-surface); }

.cmh-ic {
  font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 1.25em;
  line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
  font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 450;
  display: inline-block; width: 1em; overflow: hidden; vertical-align: -.22em; flex: none; user-select: none;
}
.cmh-ic-fill { font-variation-settings: 'FILL' 1, 'wght' 450; }
.cmh-ic-ok { color: var(--md-success); }
.cmh-ic-aviso { color: var(--md-warning); }
.cmh-gira { animation: cmh-gira 1s linear infinite; }
@keyframes cmh-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cm-hist-dialog[open], .cmh-gira { animation: none; } }

/* Cabeçalho: quem é o paciente + alertas */
.cmh-cabeca { background: var(--md-surface-lowest); padding: 16px 20px 12px; border-bottom: 1px solid var(--md-divider); flex: none; }
.cm-hist--pagina .cmh-cabeca { border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-sm); margin-bottom: 14px; }
.cm-hist--embutido .cmh-cabeca { background: transparent; border: 0; padding: 0 0 8px; }
.cmh-id { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.cmh-avatar { width: 52px; height: 52px; border-radius: 18px; background: var(--md-primary-container); color: var(--md-on-primary-container); display: grid; place-items: center; font-weight: 600; font-size: 1.15rem; flex: none; }
.cmh-nome { flex: 1 1 200px; min-width: 0; }
.cmh-nome h2 { margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.2; text-wrap: balance; font-variation-settings: var(--rond-head, 'ROND' 50); }
.cmh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.cmh-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--md-on-surface-variant); background: var(--md-surface-low); border-radius: 8px; padding: 3px 8px; font-variant-numeric: tabular-nums; }
.cmh-chip .cmh-ic { font-size: 16px; color: var(--md-outline); }
.cmh-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cmh-acoes .btn .cmh-ic, .cmh-alertas .btn .cmh-ic, .cmh-linha-acoes .btn .cmh-ic, .cmh-form .btn .cmh-ic { margin-right: 5px; }
.cmh-fechar { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--md-on-surface-variant); display: grid; place-items: center; cursor: pointer; }
.cmh-fechar:hover { background: var(--md-surface-high); color: var(--md-on-surface); }
/* No modal o X fica preso no canto: sem isso, em tela estreita ele quebrava para uma linha só dele. */
.cm-hist--modal .cmh-cabeca { position: relative; }
.cm-hist--modal .cmh-id { padding-right: 44px; }
.cm-hist--modal .cmh-fechar { position: absolute; top: 12px; right: 12px; }
.cmh-mais { margin-top: 8px; font-size: .85rem; }
.cmh-mais summary { cursor: pointer; color: var(--md-primary); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 2px; }
.cmh-mais summary::-webkit-details-marker { display: none; }
.cmh-mais[open] summary .cmh-ic { transform: rotate(180deg); }
.cmh-mais dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 20px; margin: 8px 0 0; }
.cmh-mais dt { font-size: .7rem; color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.cmh-mais dd { margin: 0; }
.cmh-alertas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: stretch; }
.cm-hist--embutido .cmh-alertas { margin-top: 0; align-items: center; }
.cmh-alerta { display: flex; align-items: flex-start; gap: 8px; border: 0; border-radius: 12px; padding: 8px 12px; font-size: .85rem; text-align: left; max-width: 440px; line-height: 1.35; }
.cmh-alerta small { display: block; opacity: .82; font-size: .74rem; margin-top: 1px; }
.cmh-alerta-alergia { background: var(--md-error-container); color: var(--md-on-error-container); max-width: 100%; }
.cmh-alerta-alergia b { font-weight: 700; }
.cmh-alerta-obs { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); cursor: pointer; }
.cmh-alerta-obs:hover { filter: brightness(.97); }
.cmh-alerta-mais { background: transparent; border: 1px dashed var(--md-outline-variant); color: var(--md-on-surface-variant); align-items: center; cursor: pointer; }
.cmh-alerta-mais:hover { background: var(--md-surface-low); }
.cmh-2linhas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmh-espaco { flex: 1 1 auto; }

/* Corpo: resumo (lateral quando cabe) + conteúdo */
.cmh-corpo { display: grid; grid-template-columns: minmax(0, 1fr); }
.cm-hist--modal .cmh-corpo { flex: 1; min-height: 0; overflow: auto; }
.cmh-resumo { display: none; flex-direction: column; gap: 12px; padding: 14px 0; }
.cm-hist--modal .cmh-resumo { padding: 14px 20px; }
.cmh-resumo-aberto .cmh-resumo { display: flex; }
.cmh-principal { min-width: 0; display: flex; flex-direction: column; }
.cmh-ferramentas { flex: none; }
.cm-hist--modal .cmh-ferramentas { padding: 10px 20px 0; background: var(--md-surface); }
.cmh-conteudo { padding: 4px 0 20px; }
.cm-hist--modal .cmh-conteudo { padding: 4px 20px 28px; }
@container cmhist (min-width: 920px) {
  .cmh-corpo { grid-template-columns: 300px minmax(0, 1fr); gap: 0 18px; }
  .cmh-resumo, .cmh-resumo-aberto .cmh-resumo { display: flex; padding-top: 0; }
  .cmh-btn-resumo { display: none; }
  .cm-hist--modal .cmh-corpo { overflow: hidden; gap: 0; }
  .cm-hist--modal .cmh-resumo { overflow: auto; border-right: 1px solid var(--md-divider); padding: 16px; }
  .cm-hist--modal .cmh-principal { min-height: 0; }
  .cm-hist--modal .cmh-conteudo { flex: 1; overflow: auto; }
}
.cmh-bloco { background: var(--md-surface-lowest); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--sh-sm); }
.cmh-bloco h3 { margin: 0 0 8px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--md-on-surface-variant); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmh-bloco h3 .cmh-link { text-transform: none; letter-spacing: 0; }
.cmh-bloco-novo { background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: none; }
.cmh-bloco-novo h3, .cmh-bloco-novo .cmh-s, .cmh-bloco-novo .cmh-link { color: inherit; }
.cmh-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cmh-lista li { display: grid; gap: 1px; min-width: 0; }
.cmh-t { font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.cmh-s { font-size: .78rem; color: var(--md-on-surface-variant); }
.cmh-cid { font-size: .72rem; font-weight: 700; border-radius: 6px; padding: 1px 6px; background: var(--md-primary-container); color: var(--md-on-primary-container); white-space: nowrap; }
.cmh-vitais { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-variant-numeric: tabular-nums; }
.cmh-vitais > div { background: var(--md-surface-low); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.cmh-k { font-size: .72rem; color: var(--md-on-surface-variant); }
.cmh-v { font-size: 1.05rem; font-weight: 600; }
.cmh-v small { font-size: .75rem; font-weight: 500; color: var(--md-on-surface-variant); }
.cmh-d { font-size: .72rem; color: var(--md-on-surface-variant); }
.cmh-nota { font-size: .74rem; color: var(--md-outline); margin-top: 8px; display: flex; gap: 4px; align-items: flex-start; }
/* Tipo sanguíneo no topo e histórico de saúde informado na ficha (resumo) */
.cmh-chip.cmh-chip-sangue { background: var(--md-error-container); color: var(--md-on-error-container); font-weight: 600; }
.cmh-chip.cmh-chip-sangue .cmh-ic { color: inherit; }
.cmh-antec-g + .cmh-antec-g { margin-top: 10px; }
.cmh-antec-rot { display: flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--md-on-surface-variant); margin-bottom: 5px; }
.cmh-antec-rot .cmh-ic { font-size: 17px; color: var(--md-outline); }
.cmh-antec-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cmh-antec-itens li { display: inline-flex; align-items: baseline; gap: 5px; background: var(--md-surface-low); border-radius: 8px; padding: 3px 9px; font-size: .82rem; font-weight: 500; overflow-wrap: anywhere; }
.cmh-antec-itens small { font-size: .72rem; font-weight: 400; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.cmh-antec-g[data-tipo="DoencaAtual"] .cmh-antec-itens li { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.cmh-antec-g[data-tipo="DoencaAtual"] .cmh-antec-itens small { color: inherit; opacity: .75; }
.cmh-link { background: none; border: 0; padding: 2px 4px; color: var(--md-primary); font-weight: 600; font-size: .8rem; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.cmh-link:hover { text-decoration: underline; color: var(--md-primary); }
.cmh-link-perigo, .cmh-link-perigo:hover { color: var(--md-error); }

/* Abas e filtros */
/* As abas quebram linha em vez de rolar: com rolagem escondida, a última ("Observações") sumia cortada. */
.cmh-abas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--md-divider); }
.cmh-aba { border: 0; background: transparent; padding: 10px 11px 11px; display: inline-flex; align-items: center; gap: 6px; color: var(--md-on-surface-variant); font-weight: 500; white-space: nowrap; border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0; cursor: pointer; }
.cmh-aba:hover { background: var(--md-surface-low); color: var(--md-on-surface); }
.cmh-aba[aria-selected="true"] { color: var(--md-primary); border-bottom-color: var(--md-primary); font-weight: 600; }
.cmh-n { font-size: .72rem; background: var(--md-surface-high); color: var(--md-on-surface-variant); border-radius: 999px; padding: 0 7px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmh-aba[aria-selected="true"] .cmh-n { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.cmh-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; }
.cmh-busca { position: relative; flex: 1 1 240px; max-width: 420px; }
.cmh-busca > .cmh-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--md-outline); pointer-events: none; }
.cmh-busca input { width: 100%; border: 1px solid var(--md-outline-variant); background: var(--md-surface-lowest); color: var(--md-on-surface); border-radius: 999px; padding: 7px 36px; outline: none; }
.cmh-busca input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); }
.cmh-limpar { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--md-on-surface-variant); display: grid; place-items: center; cursor: pointer; }
.cmh-limpar:hover { background: var(--md-surface-high); }
.cmh-fchip { border: 1px solid var(--md-outline-variant); background: var(--md-surface-lowest); color: var(--md-on-surface-variant); border-radius: 8px; padding: 5px 10px; font-size: .82rem; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cmh-fchip .cmh-ic { font-size: 16px; }
.cmh-fchip[aria-pressed="true"] { background: var(--md-primary-container); border-color: transparent; color: var(--md-on-primary-container); font-weight: 600; }
.cmh-sel { border: 1px solid var(--md-outline-variant); background: var(--md-surface-lowest); color: var(--md-on-surface); border-radius: 8px; padding: 5px 8px; font-size: .82rem; }
.cmh-nota-busca { width: 100%; font-size: .78rem; color: var(--md-on-surface-variant); }
.cmh-aviso-recepcao { display: flex; gap: 8px; align-items: center; background: var(--md-surface-low); border-radius: 12px; padding: 8px 12px; font-size: .85rem; color: var(--md-on-surface-variant); margin: 4px 0 10px; }

/* Linha do tempo */
.cmh-mes { padding: 10px 0 6px; font-size: .72rem; font-weight: 700; color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: .06em; }
.cm-hist--modal .cmh-mes { position: sticky; top: 0; z-index: 1; background: var(--md-surface); }
.cmh-tl { position: relative; padding-left: 46px; }
.cmh-tl::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; background: var(--md-divider); }
.cmh-ev { position: relative; margin: 0 0 10px; }
.cmh-no { position: absolute; left: -46px; top: 10px; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--md-surface-lowest); border: 2px solid var(--md-surface); box-shadow: var(--sh-sm); color: var(--md-on-surface-variant); }
.cmh-ev-consulta .cmh-no { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.cmh-ev-doc .cmh-no { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.cmh-ev-obs .cmh-no { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.cmh-ev-anexo .cmh-no { background: var(--md-success-container); color: var(--md-on-success-container); }
.cmh-ev-agenda .cmh-no { background: var(--md-surface-high); }
.cmh-ev-falta .cmh-no { background: var(--md-error-container); color: var(--md-on-error-container); }
.cmh-card { background: var(--md-surface-lowest); border-radius: var(--r); box-shadow: var(--sh-sm); overflow: hidden; transition: box-shadow .2s var(--ease); }
.cmh-ev-andamento .cmh-card { box-shadow: 0 0 0 1.5px var(--md-success); }
.cmh-destaque .cmh-card, .cmh-obs.cmh-destaque { box-shadow: 0 0 0 2px var(--md-primary); }
.cmh-card-pad { padding: 11px 14px; }
.cmh-card-linha { display: flex; gap: 10px; align-items: flex-start; }
.cmh-card-topo { display: flex; gap: 10px; align-items: flex-start; width: 100%; border: 0; background: transparent; text-align: left; padding: 11px 14px; color: inherit; cursor: pointer; }
.cmh-card-topo:hover { background: var(--md-surface-low); }
.cmh-card-corpo { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cmh-linha { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.cmh-titulo { font-weight: 600; }
.cmh-meta { font-size: .78rem; color: var(--md-on-surface-variant); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-variant-numeric: tabular-nums; }
.cmh-meta-topo { margin-bottom: 6px; }
.cmh-resumo-texto { color: var(--md-on-surface-variant); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cmh-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cmh-mini span { font-size: .75rem; background: var(--md-surface-low); border-radius: 6px; padding: 1px 7px; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.cmh-mini .cmh-mini-doc { background: transparent; border: 1px solid var(--md-divider); display: inline-flex; align-items: center; gap: 3px; }
.cmh-mini .cmh-ic { font-size: 15px; }
.cmh-chev { color: var(--md-outline); transition: transform .2s var(--ease); margin-top: 2px; }
.cmh-card-topo[aria-expanded="true"] .cmh-chev { transform: rotate(180deg); }
.cmh-detalhe { border-top: 1px solid var(--md-divider-soft); padding: 14px 16px 16px; display: grid; gap: 14px; }
.cmh-vrow { display: flex; flex-wrap: wrap; gap: 6px; }
.cmh-vrow span { background: var(--md-surface-low); border-radius: 8px; padding: 3px 9px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.cmh-vrow b { font-weight: 600; }
.cmh-soap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 22px; }
.cmh-sec h4, .cmh-h4 { margin: 0 0 3px; font-size: .7rem; font-weight: 700; color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: .05em; }
.cmh-h4 { margin-bottom: 6px; }
.cmh-sec p { margin: 0; white-space: pre-wrap; max-width: 72ch; overflow-wrap: anywhere; }
.cmh-docs { display: grid; gap: 8px; }
.cmh-doc { border: 1px solid var(--md-divider); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.cmh-card-pad > .cmh-doc { border: 0; padding: 0; }
.cmh-doc-topo { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.cmh-doc-tit { font-weight: 600; flex: 1 1 180px; display: inline-flex; gap: 6px; align-items: center; min-width: 0; flex-wrap: wrap; }
.cmh-doc-itens { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.cmh-doc-itens li span { color: var(--md-on-surface-variant); font-size: .8rem; }
.cmh-linha-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cmh-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Pílulas de estado (a cor do status da agenda vem inline em --cmh-st) */
.cmh-pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 9px; font-size: .74rem; font-weight: 600; white-space: nowrap; background: var(--md-surface-high); color: var(--md-on-surface-variant); }
.cmh-pill .cmh-ic { font-size: 14px; }
.cmh-pill[style] { background: color-mix(in srgb, var(--cmh-st) 16%, var(--md-surface-lowest)); color: var(--md-on-surface); }
.cmh-pill[style] .cmh-ic { color: var(--cmh-st); }
.cmh-pill-ok, .cmh-pill-andamento { background: var(--md-success-container); color: var(--md-on-success-container); }
.cmh-pill-novo { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.cmh-pill-obs { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.cmh-pill-aviso { background: var(--md-warning-container); color: var(--md-on-warning-container); }

/* Tabelas (consultas, documentos, agenda, sinais vitais) */
.cmh-tabela { overflow-x: auto; background: var(--md-surface-lowest); border-radius: var(--r); box-shadow: var(--sh-sm); }
.cmh-tabela table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.cmh-tabela th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--md-on-surface-variant); font-weight: 700; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--md-divider); white-space: nowrap; }
.cmh-tabela td { padding: 9px 12px; border-bottom: 1px solid var(--md-divider-soft); vertical-align: top; }
.cmh-tabela tr:last-child td { border-bottom: 0; }
.cmh-tabela tr.cmh-clicavel { cursor: pointer; }
.cmh-tabela tr.cmh-clicavel:hover td, .cmh-tabela tr.cmh-clicavel:focus td { background: var(--md-surface-low); }
.cmh-tabela .cmh-r { text-align: right; }
.cmh-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmh-nowrap { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.cmh-corta { max-width: 280px; overflow-wrap: anywhere; }

/* Exames e anexos */
.cmh-sec-tit { font-size: .95rem; font-weight: 600; margin: 14px 0 8px; display: flex; gap: 8px; align-items: center; }
.cmh-sec-tit:first-child, .cmh-aviso-recepcao + .cmh-sec-tit { margin-top: 6px; }
.cmh-sec-acao { margin-left: auto; font-size: .82rem; }
.cmh-pedido { background: var(--md-surface-lowest); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 10px 14px; margin-bottom: 8px; display: grid; gap: 4px; }
.cmh-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cmh-arquivo-card { background: var(--md-surface-lowest); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.cmh-quebra { overflow-wrap: anywhere; }

/* Formulários (observação, anexo) */
.cmh-form { background: var(--md-surface-lowest); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 12px 14px; display: grid; gap: 10px; margin: 4px 0 14px; }
.cmh-form-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cmh-inp { width: 100%; border: 1px solid var(--md-field); border-radius: 10px; padding: 8px 10px; background: var(--md-surface-lowest); color: var(--md-on-surface); }
.cmh-inp:focus { outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); }
textarea.cmh-inp { resize: vertical; min-height: 76px; }
.cmh-rot { display: grid; gap: 3px; font-size: .78rem; color: var(--md-on-surface-variant); margin: 0; }
.cmh-rot-forte { font-weight: 600; margin: 0; }
.cmh-cresce { flex: 1 1 220px; }
.cmh-check { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; margin: 0; cursor: pointer; }
.cmh-arquivo { max-width: 100%; font-size: .85rem; }
.cmh-obs { background: var(--md-surface-lowest); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 12px 14px; margin-bottom: 8px; display: grid; gap: 6px; }
.cmh-obs-fixada { box-shadow: 0 0 0 1.5px var(--md-tertiary); }

/* Evolução (gráficos em SVG, sem biblioteca) */
.cmh-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.cmh-grafico { background: var(--md-surface-lowest); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 14px 14px 8px; position: relative; }
.cmh-grafico h4 { margin: 0; font-size: .95rem; font-weight: 600; }
.cmh-legenda { display: flex; gap: 14px; font-size: .8rem; color: var(--md-on-surface-variant); margin: 4px 0; }
.cmh-legenda i, .cmh-dica i { display: inline-block; vertical-align: middle; margin-right: 5px; }
.cmh-legenda i { width: 14px; height: 3px; border-radius: 2px; }
.cmh-legenda i.cmh-serie1, .cmh-dica i.cmh-serie1 { background: var(--cmh-s1); }
.cmh-legenda i.cmh-serie2, .cmh-dica i.cmh-serie2 { background: var(--cmh-s2); }
.cmh-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.cmh-plot text { fill: var(--md-on-surface-variant); font-size: 11px; font-family: var(--font-ui); }
.cmh-plot .cmh-rotulo { fill: var(--md-on-surface); font-weight: 600; }
.cmh-grade-linha { stroke: var(--md-divider); stroke-width: 1; }
.cmh-ref { stroke: var(--md-outline); stroke-width: 1; stroke-dasharray: 4 4; }
.cmh-mira { stroke: var(--md-outline); stroke-width: 1; }
.cmh-alvo { fill: transparent; }
.cmh-linha-serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cmh-linha-serie.cmh-serie1 { stroke: var(--cmh-s1); }
.cmh-linha-serie.cmh-serie2 { stroke: var(--cmh-s2); }
.cmh-area.cmh-serie1 { fill: var(--cmh-s1); opacity: .1; }
.cmh-ponto { stroke: var(--md-surface-lowest); stroke-width: 2; }
.cmh-ponto.cmh-serie1 { fill: var(--cmh-s1); }
.cmh-ponto.cmh-serie2 { fill: var(--cmh-s2); }
.cmh-dica { position: absolute; pointer-events: none; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); border-radius: 10px; padding: 7px 10px; font-size: .8rem; white-space: nowrap; box-shadow: var(--sh-lg); transform: translate(-50%, -100%); z-index: 2; }
.cmh-dica i { width: 8px; height: 8px; border-radius: 50%; }

/* Estados */
.cmh-vazio { text-align: center; padding: 44px 16px; color: var(--md-on-surface-variant); display: grid; gap: 10px; justify-items: center; }
.cmh-vazio > .cmh-ic { font-size: 44px; color: var(--md-outline); }
.cmh-vazio h3 { margin: 0; font-size: 1.05rem; color: var(--md-on-surface); font-weight: 600; }
.cmh-vazio p { margin: 0; max-width: 46ch; }
.cmh-estado { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 40px 16px; color: var(--md-on-surface-variant); }
.cmh-estado-erro { align-items: flex-start; }
.cmh-estado-erro p { margin: 0 0 10px; max-width: 52ch; color: var(--md-on-surface); }
.cmh-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); padding: 10px 16px; border-radius: 12px; font-size: .9rem; box-shadow: var(--sh-lg); z-index: 3000; max-width: calc(100% - 32px); }
.cmh-toast-erro { background: var(--md-error-container); color: var(--md-on-error-container); }

/* Busca de pacientes do topo (Ctrl K) — abre o histórico */
/* Encolhe ANTES dos botões da direita (flex-shrink alto): sem isso "Minha conta" era empurrado para fora da tela. */
.cm-busca-paciente { position: relative; flex: 0 1000 380px; min-width: 120px; margin-left: 4px; }
.cm-busca-paciente > .cmh-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--md-outline); pointer-events: none; }
.cm-busca-paciente input { width: 100%; height: 40px; border: 1px solid var(--md-outline-variant); background: var(--md-surface-lowest); color: var(--md-on-surface); border-radius: 999px; padding: 0 64px 0 38px; outline: none; font-size: .875rem; }
.cm-busca-paciente input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); }
.cm-busca-paciente kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 600 .7rem var(--font-ui); color: var(--md-on-surface-variant); background: var(--md-surface-low); border: 1px solid var(--md-outline-variant); border-radius: 6px; padding: 1px 6px; box-shadow: none; pointer-events: none; }
.cm-busca-paciente-lista { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--md-surface-lowest); border-radius: var(--r); box-shadow: var(--sh-lg); padding: 6px; z-index: 1050; max-height: 60vh; overflow: auto; }
.cm-busca-paciente-item { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: transparent; padding: 8px 10px; border-radius: 10px; text-align: left; color: var(--md-on-surface); cursor: pointer; }
.cm-busca-paciente-item:hover, .cm-busca-paciente-item.ativo { background: var(--md-surface-low); }
.cm-busca-paciente-item > .cmh-ic { color: var(--md-primary); }
.cm-busca-paciente-av { width: 32px; height: 32px; border-radius: 10px; background: var(--md-primary-container); color: var(--md-on-primary-container); display: grid; place-items: center; font-size: .75rem; font-weight: 700; flex: none; }
.cm-busca-paciente-txt { flex: 1; min-width: 0; display: grid; }
.cm-busca-paciente-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-busca-paciente-txt small { color: var(--md-on-surface-variant); }
.cm-busca-paciente-vazio { padding: 10px; color: var(--md-on-surface-variant); font-size: .85rem; }
/* Celular: a busca vira só a lupa e, ao tocar, abre por cima da barra do topo (não há largura para os dois). */
@media (max-width: 575.98px) {
  .cm-busca-paciente { flex: 0 0 40px; min-width: 40px; margin-left: 0; }
  .cm-busca-paciente input { width: 40px; padding: 0; color: transparent; background: transparent; border-color: transparent; cursor: pointer; }
  .cm-busca-paciente input::placeholder { color: transparent; }
  .cm-busca-paciente > .cmh-ic { left: 50%; transform: translate(-50%, -50%); color: var(--md-on-surface-variant); }
  .cm-busca-paciente:focus-within { position: absolute; left: 52px; right: 8px; top: calc((var(--topbar-h) - 40px) / 2); z-index: 5; }
  .cm-busca-paciente:focus-within input { width: 100%; padding: 0 12px 0 38px; color: var(--md-on-surface); background: var(--md-surface-lowest); border-color: var(--md-primary); cursor: text; }
  .cm-busca-paciente:focus-within input::placeholder { color: var(--md-outline); }
  .cm-busca-paciente:focus-within > .cmh-ic { left: 12px; transform: translateY(-50%); }
}
/* Abaixo disso a barra do topo já está no limite sem a busca: ela sai (o histórico segue pela lista de pacientes). */
@media (max-width: 420px) { .cm-busca-paciente { display: none; } }

/* ----- Histórico v2 (25/09/2026): cabeçalho com mais presença, blocos com ícone, datas em
   "calendário", minigráficos, cores por tipo de documento e as janelas de histórico de saúde
   e de retorno (CertMedSaude / CertMedRetorno em certmed-historico.js). ----- */
.cmh-cabeca { background: linear-gradient(115deg, color-mix(in srgb, var(--md-primary-container) 70%, var(--md-surface-lowest)) 0%, var(--md-surface-lowest) 58%); }
.cm-hist--embutido .cmh-cabeca { background: transparent; }
.cmh-avatar { width: 60px; height: 60px; border-radius: 20px; background: var(--md-primary); color: var(--md-on-primary); font-size: 1.3rem; box-shadow: 0 6px 16px rgba(var(--brand-rgb), .28); }
.cmh-nome-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmh-nome h2 { font-size: 1.55rem; letter-spacing: -.01em; }
.cmh-chips .cmh-chip { background: color-mix(in srgb, var(--md-surface-lowest) 78%, transparent); box-shadow: var(--sh-sm); }

/* Tipo sanguíneo: o dado de segurança que se procura primeiro, ao lado do nome */
.cmh-sangue { display: inline-flex; align-items: center; gap: 3px; border: 0; border-radius: 999px; padding: 3px 12px 3px 8px; background: var(--md-error-container); color: var(--md-on-error-container); font-weight: 800; font-size: .95rem; letter-spacing: .02em; line-height: 1.4; }
.cmh-sangue .cmh-ic { font-size: 18px; color: var(--md-error); }
button.cmh-sangue { cursor: pointer; }
button.cmh-sangue:hover { box-shadow: 0 0 0 2px var(--md-error); }
.cmh-sangue.cmh-sangue-vazio { background: transparent; box-shadow: inset 0 0 0 1.5px var(--md-error); color: var(--md-error); font-weight: 600; font-size: .8rem; }
.cmh-sangue.cmh-sangue-vazio .cmh-ic { font-size: 16px; }

/* Os números do paciente, logo abaixo do nome */
.cmh-numeros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cmh-num-it { display: inline-flex; align-items: center; gap: 9px; border: 0; background: var(--md-surface-lowest); border-radius: 14px; padding: 6px 14px 6px 7px; box-shadow: var(--sh-sm); text-align: left; cursor: pointer; color: var(--md-on-surface); transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
.cmh-num-it:hover { box-shadow: var(--sh); transform: translateY(-1px); }
.cmh-num-it > .cmh-ic { width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 10px; background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 18px; vertical-align: 0; }
.cmh-num-it b { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cmh-num-it small { display: block; font-size: .72rem; color: var(--md-on-surface-variant); }

/* Blocos do resumo: título com ícone colorido (a cor diz o assunto) */
.cmh-bloco h3 { justify-content: flex-start; font-size: .74rem; color: var(--md-on-surface); letter-spacing: .05em; }
.cmh-bloco h3 .cmh-link { margin-left: auto; }
.cmh-bic { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; flex: none; background: var(--md-surface-high); color: var(--md-on-surface-variant); }
.cmh-bic .cmh-ic { font-size: 16px; width: auto; overflow: visible; vertical-align: 0; }
.cmh-bic[data-c="pri"] { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.cmh-bic[data-c="med"] { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.cmh-bic[data-c="saude"] { background: var(--md-error-container); color: var(--md-on-error-container); }
.cmh-bic[data-c="vital"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.cmh-bic[data-c="aviso"] { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.cmh-bic[data-c="agenda"] { background: var(--md-success-container); color: var(--md-on-success-container); }
.cmh-bic[data-c="novo"] { background: var(--md-primary); color: var(--md-on-primary); }
.cmh-med .cmh-med-ic { font-size: 16px; color: var(--md-tertiary); }
.cmh-cta { display: flex; gap: 10px; align-items: center; width: 100%; border: 1.5px dashed var(--md-outline-variant); background: var(--md-surface-low); border-radius: 12px; padding: 10px 12px; text-align: left; color: var(--md-on-surface); cursor: pointer; font-weight: 600; font-size: .85rem; }
.cmh-cta:hover { background: var(--md-surface-high); border-color: var(--md-primary); }
.cmh-cta > .cmh-ic { color: var(--md-primary); }
.cmh-cta small { display: block; font-weight: 400; color: var(--md-on-surface-variant); font-size: .74rem; }

/* Minigráfico nos quadros de sinais vitais */
.cmh-spark { display: block; width: 100%; height: 24px; margin-top: 5px; overflow: visible; }
.cmh-spark polyline { fill: none; stroke: var(--cmh-s1); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cmh-spark circle { fill: var(--cmh-s1); }

/* Linha do tempo: a data da consulta num "calendário", cartões que respondem ao mouse */
.cmh-mes { display: flex; align-items: center; gap: 10px; }
.cmh-mes::after { content: ""; flex: 1; height: 1px; background: var(--md-divider); }
.cmh-no.cmh-no-data { flex-direction: column; display: flex; align-items: center; justify-content: center; height: 46px; top: 6px; line-height: 1; background: var(--md-primary); color: var(--md-on-primary); border-color: var(--md-surface); }
.cmh-no.cmh-no-data b { font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmh-no.cmh-no-data small { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; opacity: .9; }
.cmh-card { transition: box-shadow .2s var(--ease); }
.cmh-card:hover { box-shadow: var(--sh); }
.cmh-titulo { font-size: 1rem; }

/* Documentos: cor por tipo (receita, exame, atestado, encaminhamento, declaração) */
.cmh-doc-ic { width: 28px; height: 28px; border-radius: 9px; display: inline-grid; place-items: center; flex: none; background: var(--md-surface-high); color: var(--md-on-surface-variant); }
.cmh-doc-ic .cmh-ic { width: auto; overflow: visible; vertical-align: 0; font-size: 17px; }
.cmh-doc-ic[data-tipo="Receita"] { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.cmh-doc-ic[data-tipo="PedidoExame"] { background: var(--md-success-container); color: var(--md-on-success-container); }
.cmh-doc-ic[data-tipo="Atestado"] { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.cmh-doc-ic[data-tipo="Encaminhamento"] { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.cmh-doc-ic[data-tipo="Declaracao"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.cmh-mini .cmh-mini-doc[data-tipo="Receita"] .cmh-ic { color: var(--md-primary); }
.cmh-mini .cmh-mini-doc[data-tipo="PedidoExame"] .cmh-ic { color: var(--md-success); }
.cmh-mini .cmh-mini-doc[data-tipo="Atestado"] .cmh-ic { color: var(--md-warning); }
.cmh-mini .cmh-mini-doc[data-tipo="Encaminhamento"] .cmh-ic { color: var(--md-tertiary); }

/* Janelinhas: histórico de saúde e agendar retorno */
.cm-mini-dialog { border: 0; padding: 0; margin: auto; border-radius: var(--r-xl); width: min(660px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); background: var(--md-surface-lowest); color: var(--md-on-surface); box-shadow: var(--sh-lg); overflow: hidden; }
.cm-mini-dialog[open] { display: flex; flex-direction: column; animation: cmh-entra .2s var(--ease); }
.cm-mini-dialog::backdrop { background: rgba(var(--md-scrim), .45); }
.cmd-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 8px; }
.cmd-topo h2 { margin: 0; font-size: 1.25rem; font-weight: 650; font-variation-settings: var(--rond-head, 'ROND' 50); }
.cmd-topo p { margin: 2px 0 0; color: var(--md-on-surface-variant); font-size: .85rem; }
.cmd-corpo { overflow: auto; padding: 6px 20px 14px; display: grid; gap: 18px; flex: 1; min-height: 0; align-content: start; }
.cmd-erro { margin: 0 20px 10px; background: var(--md-error-container); color: var(--md-on-error-container); border-radius: 10px; padding: 8px 12px; font-size: .85rem; }
.cmd-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--md-divider); flex-wrap: wrap; }
.cm-mini-dialog .btn .cmh-ic { margin-right: 5px; }
.cmd-sec h3 { font-size: .92rem; font-weight: 650; margin: 0 0 8px; display: flex; align-items: center; gap: 7px; }
.cmd-sec h3 .cmh-ic { color: var(--md-primary); }
.cmd-sec h3 .cmd-ic-sangue { color: var(--md-error); }
.cmd-sangue { display: flex; flex-wrap: wrap; gap: 6px; }
.cmd-sg { min-width: 54px; height: 42px; border-radius: 12px; border: 1.5px solid var(--md-outline-variant); background: var(--md-surface-lowest); font-weight: 800; font-size: 1rem; color: var(--md-on-surface); cursor: pointer; }
.cmd-sg:hover { border-color: var(--md-error); }
.cmd-sg[aria-checked="true"] { background: var(--md-error-container); color: var(--md-on-error-container); border-color: var(--md-error); box-shadow: 0 0 0 1px var(--md-error); }
.cmd-sg.cmd-sg-nao { font-size: .82rem; font-weight: 600; padding: 0 14px; }
.cmd-sg.cmd-sg-nao[aria-checked="true"] { background: var(--md-surface-high); color: var(--md-on-surface); border-color: var(--md-outline); box-shadow: none; }
.cmd-itens { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cmd-item { display: inline-flex; align-items: center; gap: 6px; background: var(--md-warning-container); color: var(--md-on-warning-container); border-radius: 999px; padding: 4px 4px 4px 12px; font-weight: 600; font-size: .86rem; }
.cmd-sec[data-grupo="DoencaAnterior"] .cmd-item { background: var(--md-surface-high); color: var(--md-on-surface); }
.cmd-sec[data-grupo="Cirurgia"] .cmd-item { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.cmd-item small { font-weight: 500; opacity: .8; font-variant-numeric: tabular-nums; }
.cmd-item button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.cmd-item button:hover { background: rgba(0, 0, 0, .1); }
.cmd-item button .cmh-ic { font-size: 16px; }
.cmd-add-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cmd-add-linha .cmd-add { flex: 1 1 220px; width: auto; }
.cmd-add-linha .cmd-quando { flex: 0 1 140px; width: auto; }
.cmd-rot { display: grid; gap: 4px; margin: 0; }
.cmd-medico-unico { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--md-on-surface-variant); }
.cmd-prazos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cmd-prazo { border: 1.5px solid var(--md-outline-variant); background: var(--md-surface-lowest); border-radius: 12px; padding: 8px 14px; font-weight: 600; cursor: pointer; color: var(--md-on-surface); }
.cmd-prazo:hover { border-color: var(--md-primary); }
.cmd-prazo[aria-pressed="true"] { background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary); }
.cmd-outra { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--md-on-surface-variant); margin: 0; }
.cmd-outra .cmd-data { width: auto; }
.cmd-dia { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cmd-dia b { text-transform: capitalize; }
.cmd-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.cmd-slot { border: 1.5px solid var(--md-outline-variant); background: var(--md-surface-lowest); border-radius: 10px; padding: 8px 0; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--md-on-surface); }
.cmd-slot:hover { border-color: var(--md-primary); color: var(--md-primary); }
.cmd-slot[aria-pressed="true"] { background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary); }

@media (max-width: 700px) {
  .cmh-no.cmh-no-data { width: 30px; height: 40px; left: -38px; }
  .cmh-no.cmh-no-data b { font-size: .9rem; }
  .cm-mini-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .cmh-numeros { gap: 6px; }
  .cmh-num-it { padding: 5px 10px 5px 6px; }
}

@media (max-width: 700px) {
  .cm-hist-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
  .cm-hist--modal .cmh-cabeca { padding: 12px 16px 10px; }
  .cm-hist--modal .cmh-ferramentas, .cm-hist--modal .cmh-conteudo, .cm-hist--modal .cmh-resumo { padding-left: 16px; padding-right: 16px; }
  .cmh-acoes { width: 100%; }
  .cmh-avatar { width: 44px; height: 44px; border-radius: 14px; font-size: 1rem; }
  .cmh-nome h2 { font-size: 1.15rem; }
  .cmh-alerta { max-width: 100%; }
  .cmh-tl { padding-left: 38px; }
  .cmh-tl::before { left: 13px; }
  .cmh-no { left: -38px; width: 28px; height: 28px; border-radius: 9px; }
  .cmh-no .cmh-ic { font-size: 16px; }
  .cm-busca-paciente kbd { display: none; }
  .cm-busca-paciente input { padding-right: 12px; }
}


/* ===== Tela: Pacientes — ficha (Views/MedicoClientes/Cadastro.cshtml) ===== */
/* Ocupa a largura toda do conteúdo, como as demais telas (antes: coluna de 1000px no meio). */
.pac-hero { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 0; border-radius: var(--r-lg); padding: 18px 22px; box-shadow: var(--sh-sm); }
.pac-avatar { width: 66px; height: 66px; border-radius: 20px; background: var(--md-primary-container); color: var(--md-on-primary-container); display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 500; flex: none; box-shadow: none; }
.pac-id .nm { font-size: 1.25rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
.pac-id .sub { color: var(--ink-soft); font-size: .9rem; margin-top: 2px; }
.pac-wrap .sec { background: var(--surface); border: 0; border-radius: var(--r-lg); margin-top: 16px; overflow: hidden; box-shadow: var(--sh-sm); }
.pac-wrap .sec > .sec-h { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--line-2); }
.pac-wrap .sec > .sec-h .ic { width: 36px; height: 36px; border-radius: 12px; background: var(--md-primary-container); color: var(--md-on-primary-container); display: flex; align-items: center; justify-content: center; flex: none; }
.pac-wrap .sec > .sec-h h3 { margin: 0; font-size: 1rem; font-weight: 500; color: var(--ink); }
.pac-wrap .sec > .sec-h .h-hint { margin-left: auto; font-size: .8rem; color: var(--ink-faint); }
.pac-wrap .sec > .sec-b { padding: 18px 22px; }
.pac-wrap label { font-weight: 500; font-size: .82rem; color: var(--ink-soft); margin-bottom: 4px; }
.pac-wrap .req { color: var(--danger); }
.pac-wrap .lgpd { display: flex; gap: 14px; align-items: flex-start; background: var(--brand-l); border: 0; border-radius: var(--r-lg); padding: 16px 18px; margin-top: 16px; }
.pac-wrap .lgpd .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--surface); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; }
.pac-wrap .save-bar { position: sticky; bottom: 0; z-index: 5; background: rgba(246,248,251,.96); backdrop-filter: blur(6px); border-top: 1px solid var(--line); padding: 14px 0; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 575px) { .pac-hero { flex-direction: column; text-align: center; } }
/* Selos do topo: tipo sanguíneo e "paciente desde" */
.pac-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pac-selos:empty { display: none; }
.pac-selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 8px; border-radius: var(--r-pill); background: var(--md-surface-low); color: var(--ink-soft); font-size: .78rem; font-weight: 500; }
.pac-selo i { font-size: 16px; }
.pac-selo-sangue { background: var(--md-error-container); color: var(--md-on-error-container); }
.pac-selo[hidden] { display: none; }
@media (max-width: 575px) { .pac-selos { justify-content: center; } }
/* Tipo sanguíneo: botões em pílula (rádio escondido) */
.pac-sangue { display: flex; flex-wrap: wrap; gap: 6px; }
.pac-sangue-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pac-wrap .pac-sangue-op { min-width: 52px; height: 38px; margin: 0; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--md-outline-variant); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: .92rem; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); user-select: none; }
.pac-wrap .pac-sangue-op:hover { background: var(--md-surface-low); }
.pac-wrap .pac-sangue-nd { font-weight: 400; color: var(--ink-soft); }
.pac-sangue-in:checked + .pac-sangue-op { background: var(--md-error-container); border-color: transparent; color: var(--md-on-error-container); }
.pac-sangue-in:checked + .pac-sangue-nd { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.pac-sangue-in:focus-visible + .pac-sangue-op { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.pac-sangue-in:disabled + .pac-sangue-op { cursor: default; }
.pac-sangue-in:disabled:not(:checked) + .pac-sangue-op { opacity: .45; }
.pac-sangue-in:disabled + .pac-sangue-op:hover { background: var(--surface); }
.pac-sangue-in:disabled:checked + .pac-sangue-op:hover { background: var(--md-error-container); }
/* Histórico de saúde: um cartão por tipo, itens editáveis e sugestões de um clique */
.pac-ant { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.pac-ant-grupo { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r); background: var(--md-surface-low); min-width: 0; }
.pac-ant-h { display: flex; align-items: center; gap: 10px; }
.pac-ant-h b { display: block; font-size: .92rem; font-weight: 500; color: var(--ink); }
.pac-ant-h small { display: block; font-size: .74rem; color: var(--ink-faint); line-height: 1.3; }
.pac-ant-ic { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.pac-ant-ic i { font-size: 19px; }
.pac-ant-grupo[data-tipo="DoencaAtual"] .pac-ant-ic { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.pac-ant-grupo[data-tipo="DoencaAnterior"] .pac-ant-ic { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.pac-ant-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pac-ant-item { display: flex; align-items: center; gap: 2px; padding: 0 4px 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color var(--t); }
.pac-ant-item:focus-within { border-color: var(--md-primary); }
.pac-ant-item input { border: 0; background: transparent; outline: 0; font: inherit; color: var(--ink); -webkit-text-fill-color: currentColor; min-width: 0; }
.pac-ant-desc { flex: 1 1 auto; padding: 7px 0; font-size: .88rem !important; }
.pac-ant-quando { flex: 0 0 76px; width: 76px; padding: 7px 6px; border-left: 1px solid var(--line-2) !important; font-size: .78rem !important; color: var(--ink-soft) !important; text-align: center; }
.pac-ant-quando::placeholder { color: var(--ink-faint); font-style: italic; }
.pac-ant-del { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pac-ant-del i { font-size: 17px; }
.pac-ant-del:hover, .pac-ant-del:focus-visible { background: var(--md-error-container); color: var(--md-error); outline: 0; }
.pac-ant-vazio { font-size: .82rem; color: var(--ink-faint); padding: 2px; }
.pac-ant-add { display: flex; gap: 6px; }
.pac-ant-add .btn { flex: none; width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
/* Sugestões do histórico de saúde: só um <datalist> (autocompletar do campo) — nada ocupa espaço na ficha. */
.pac-ant-sug { display: none; }


/* ===== Tela: Pacientes — lista (Views/MedicoClientes/Index.cshtml) ===== */
/* Largura e alinhamento por CLASSE (columnDefs/className) — o Responsive do
   DataTables remove células escondidas e faria nth-child escorregar. */
#tabelaPacientes { width: 100%; }
#tabelaPacientes th, #tabelaPacientes td { vertical-align: middle; }
#tabelaPacientes .pac-c-acoes { width: 130px; white-space: nowrap; }
#tabelaPacientes .pac-c-idade { width: 70px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
#tabelaPacientes .pac-c-nome { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tabelaPacientes .pac-c-num { white-space: nowrap; font-variant-numeric: tabular-nums; }


/* ===== Tela: Documentos — lista (Views/DocumentosMedicos/Index.cshtml) ===== */
#tabelaDocumentos { width: 100%; }
#tabelaDocumentos th, #tabelaDocumentos td { vertical-align: middle; }
#tabelaDocumentos .doc-c-acoes { width: 110px; white-space: nowrap; }
#tabelaDocumentos .doc-c-data { width: 140px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Título/assunto e paciente são os campos longos: reticências + title do navegador */
#tabelaDocumentos .doc-c-texto { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-visor { height: 80vh; background: #525659; }
.doc-visor-frame { width: 100%; height: 100%; border: 0; }


/* ===== Tela: Documentos — receita (Views/DocumentosMedicos/Receita.cshtml) ===== */
.tela-receita .med-search-box { position: relative; }
.tela-receita .search-results { position: absolute; z-index: 1050; width: 100%; max-height: 320px; overflow-y: auto; display: none; }
.tela-receita .search-results .dropdown-item { white-space: normal; cursor: pointer; }
.tela-receita .med-card { border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; }
.tela-receita .pos-chip { font-size: .72rem; padding: 1px 7px; margin: 2px 2px 0 0; border-radius: var(--r-pill); }
.tela-receita .sticky-preview { position: sticky; top: 12px; }
.tela-receita .rec-pdf-frame { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.receita-paper { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 22px 24px; font-size: .82rem; color: var(--ink); min-height: 520px; overflow: hidden; }
.receita-paper .rp-faixa { height: 4px; background: var(--brand); border-radius: 0; margin: -22px -24px 14px; }
.receita-paper .rp-clinica { font-size: 1.05rem; font-weight: 600; color: var(--brand-d); }
.receita-paper .rp-med { font-size: .8rem; color: var(--ink-soft); }
.receita-paper .rp-titulo { text-align: center; font-weight: 600; color: var(--brand-d); margin: 14px 0 4px; }
.receita-paper .rp-sep { border-top: 1px solid var(--line); margin: 8px 0; }
.receita-paper .prev-med { margin-bottom: 8px; }
.receita-paper .prev-pos { font-style: italic; color: var(--ink-soft); padding-left: 14px; }
.receita-paper .rp-assin { text-align: center; margin-top: 28px; }


/* ===== Campo com "X" de limpar (Views/Protocolos/Form.cshtml) ===== */
.cm-limpavel { position: relative; }
.cm-limpavel > input { padding-right: 3.1rem; }
.cm-limpavel .btn-limpar-campo { display: none; position: absolute; top: 50%; right: 1.65rem; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: .78rem; cursor: pointer; }
.cm-limpavel.tem-valor .btn-limpar-campo { display: inline-flex; align-items: center; justify-content: center; }
.cm-limpavel .btn-limpar-campo:hover, .cm-limpavel .btn-limpar-campo:focus-visible { background: rgba(var(--brand-rgb), .12); color: var(--brand); outline: 0; }


/* ===== Tela: Documentos — emitir (Views/DocumentosMedicos/Emitir.cshtml) ===== */
#iframePreview { width: 100%; height: 520px; border: 0; }


/* ===== Anexos da consulta (Views/Shared/_AnexosConsulta.cshtml) ===== */
.cm-anx-drop { border: 1px dashed var(--md-outline-variant); border-radius: var(--r); padding: 12px; background: var(--surface-2); }
.cm-anx-cat { max-width: 130px; }
.cm-anx-item { display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.cm-anx-item:last-child { border-bottom: 0; }
.cm-anx-item > div:first-child { min-width: 0; }
.cm-anx-nome { font-size: .84rem; font-weight: 500; color: var(--ink); word-break: break-word; }
.cm-anx-meta { font-size: .74rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cm-anx-vazio { text-align: center; color: var(--ink-faint); font-size: .82rem; padding: 14px 4px; }

/* ----- Modal de agendamento: título com o interruptor de encaixe e campo de paciente com o "+" ----- */
.ag-sec-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; }
.ag-sec-linha .custom-control { margin-bottom: 0; }
.ag-sec-linha .custom-control-label { font-weight: 400; color: var(--ink-soft); }
.ag-pac-linha { display: flex; align-items: stretch; gap: 8px; }
.ag-pac-linha > .select2-container, .ag-pac-linha > select { flex: 1 1 auto; min-width: 0; }
.ag-pac-novo { flex: 0 0 auto; width: 46px; display: inline-grid; place-items: center; padding: 0; }
/* O select2 nasce com a altura do tema; aqui ele fica do tamanho dos outros campos. */
.select2-container--bootstrap4 .select2-selection--single { display: flex; align-items: center; }


/* ############################################################################
   GESTÃO, FINANCEIRO E ONBOARDING
   ############################################################################ */

/* ============================================================================
   CertMed — partes/gestao.css
   Telas de gestão, financeiro e onboarding. Entra no certmed-telas.css, que é
   carregado depois do certmed-ui.css (design system) em todos os layouts.

   ⛔ Nenhuma view desta frente tem bloco <style> nem style="..." fixo. Tudo o
   que é de uma tela mora aqui, na seção dela, escopado pelo contêiner da tela
   (.tela-*, um id já existente ou o wrapper da própria página) para não vazar
   para o resto do sistema. Só continua no HTML o valor que nasce em tempo de
   execução: largura de barra calculada, cor escolhida pelo médico, etc.

   Cores, raios e sombras: só os tokens do design system.
   ============================================================================ */


/* ===== Colunas de tabela — grades de dinheiro (financeiro, caixa, cobrança) =====
   Valor e data à direita, sem quebra e com algarismo de largura fixa; descrição
   longa com reticências; coluna de ações sempre numa linha só. */
.gc-col-valor,
.gc-col-data {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gc-col-acoes { white-space: nowrap; }
/* Rótulo de status pintado com a cor guardada no cadastro (só --gc-cor vem do servidor). */
.gc-badge-cor { background-color: var(--gc-cor); color: var(--md-on-primary); }
.gc-col-desc {
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ===== Tela: Painel (Views/Painel/Index.cshtml) ===== */
.tela-painel .ob-card { border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; }
.tela-painel .ob-head { background: var(--md-primary-container); color: var(--md-on-primary-container); padding: 16px 20px; }
.tela-painel .ob-head h3 { font-size: 1.05rem; font-weight: 500; margin: 0; color: var(--md-on-primary-container); }
.tela-painel .ob-head p { margin: 4px 0 0; font-size: .85rem; opacity: .92; max-width: 72ch; }
.tela-painel .ob-badge { font-size: .85rem; }
.tela-painel .ob-head-dir { display: flex; align-items: center; gap: 8px; flex: none; }
.tela-painel .ob-fechar { border: 0; background: transparent; color: inherit; opacity: .6; line-height: 1;
                          font-size: 1.35rem; padding: 0 2px; cursor: pointer; border-radius: var(--r-sm, 6px); }
.tela-painel .ob-fechar:hover, .tela-painel .ob-fechar:focus { opacity: 1; }
.tela-painel .ob-prog { height: 7px; border-radius: var(--r-pill); background: rgba(var(--brand-rgb), .16); margin-top: 12px; overflow: hidden; }
.tela-painel .ob-prog span { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width .4s; }
.tela-painel .ob-item { display: flex; align-items: flex-start; gap: 13px; padding: 13px 20px; border-top: 1px solid var(--line-2); }
.tela-painel .ob-item:first-child { border-top: 0; }
.tela-painel .ob-item.ok { opacity: .58; }
.tela-painel .ob-mark { width: 32px; height: 32px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
                        flex: none; font-size: .82rem; }
.tela-painel .ob-item.ok .ob-mark { background: var(--md-success-container); color: var(--md-on-success-container); }
.tela-painel .ob-item.todo .ob-mark { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.tela-painel .ob-txt { flex: 1 1 auto; min-width: 0; }
.tela-painel .ob-txt b { display: block; font-size: .89rem; font-weight: 500; color: var(--ink); }
.tela-painel .ob-item.ok .ob-txt b { text-decoration: line-through; }
.tela-painel .ob-txt small { color: var(--ink-soft); font-size: .78rem; }
.tela-painel .ob-item .btn { flex: none; align-self: center; }
.tela-painel .ob-foot { padding: 11px 20px; background: var(--surface-2); border-top: 1px solid var(--line-2); font-size: .82rem; color: var(--ink-soft); }

/* Assinar documento (entrada) */
.tela-painel .pn-assinar { display: flex; align-items: center; gap: 16px 22px; flex-wrap: wrap; border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 16px;
                           color: var(--md-on-primary-container); background: var(--md-primary-container); }
.tela-painel .pn-assinar-txt { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; min-width: 0; }
/* Squircle no padrão dos ícones do sistema (mesma medida do .info-box-icon):
   46px, canto 16px, contêiner tonal e o ícone ocupando ~22px — nada de ícone
   pequeno perdido num quadrado grande. */
.tela-painel .pn-assinar-ic {
  flex: none; width: 46px; height: 46px; border-radius: 16px;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  display: grid; place-items: center; font-size: 22px; line-height: 1;
}
.tela-painel .pn-assinar-txt b { display: block; font-size: 1.08rem; font-weight: 500; }
.tela-painel .pn-assinar-txt span { display: block; font-size: .88rem; opacity: .9; }
.tela-painel .pn-assinar-btn { background: var(--brand); color: var(--md-on-primary); font-weight: 500; font-size: 1.05rem; padding: .8rem 1.6rem; border-radius: var(--r-pill); border: 0; box-shadow: none; }
.tela-painel .pn-assinar-btn:hover { background: var(--brand-d); color: var(--md-on-primary); box-shadow: var(--sh-sm); }
@media (max-width: 575.98px) { .tela-painel .pn-assinar-btn { width: 100%; } }

/* Listas com rolagem e larguras da tabela de documentos */
.tela-painel .pn-lista { max-height: 360px; overflow: auto; }
.tela-painel .pn-col-tipo,
.tela-painel .pn-col-data { width: 140px; }
.tela-painel .pn-col-assinado { width: 70px; }
.tela-painel .pn-col-ver { width: 50px; }


/* ===== Tela: Gestão do Negócio (Views/AdminDashboard/Index.cshtml) ===== */
/* Indicadores num grid que reflui — o número em peso 500, o rótulo em frase. */
.tela-admdash .adm-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 16px;
}
.tela-admdash .adm-kpis > [class*="col-"] {
  flex: none;
  width: auto;
  max-width: none;
  padding: 0;
  margin-bottom: 0;
}
.tela-admdash .kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.tela-admdash .kpi-card .rotulo {
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tela-admdash .kpi-card .rotulo i { color: var(--brand); }
.tela-admdash .kpi-card .valor {
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tela-admdash .kpi-card .valor .kpi-unidade { font-size: .85rem; color: var(--ink-soft); }
.tela-admdash .kpi-card .detalhe {
  font-size: .76rem;
  color: var(--ink-faint);
  margin-top: 2px;
}
.tela-admdash .kpi-card .detalhe .ruim { color: var(--danger); font-weight: 500; }
.tela-admdash .kpi-card .detalhe .bom { color: var(--success); font-weight: 500; }

.tela-admdash .badge-pill-cm {
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: .74rem;
  font-weight: 500;
}
.tela-admdash .uso-mini {
  font-size: .74rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tela-admdash .uso-mini b { color: var(--ink); }
.tela-admdash .cli-nome { font-weight: 500; color: var(--ink); }
.tela-admdash .cli-email { font-size: .74rem; color: var(--ink-faint); }
.tela-admdash .adm-atualizado { font-size: .85rem; }
.tela-admdash .adm-ok { font-size: .78rem; }
.tela-admdash .adm-card-alto { height: 100%; }
.tela-admdash .card-body h6 i { color: var(--brand); }
.tela-admdash .adm-vazio { font-size: .85rem; }
.tela-admdash .adm-plano-linha {
  font-size: .82rem;
  padding: 3px 0;
  border-bottom: 1px dashed var(--line);
  font-variant-numeric: tabular-nums;
}
.tela-admdash #tabelaClientes { width: 100%; }
.tela-admdash #tabelaClientes td { vertical-align: middle; font-size: .85rem; }


/* ===== Tela: Cobrança & Planos (Views/Pagamento/Index.cshtml) ===== */
/* Diálogo de detalhes precisa ficar acima da modal padrão (1050) */
#modalMasterDetails { z-index: 1060 !important; }

/* Cartões de detalhe: sem faixa lateral; o cabeçalho vira contêiner tonal */
#modalMasterDetails .border-left-primary, #modalMasterDetails .border-left-success, #modalMasterDetails .border-left-info,
#modalMasterDetails .border-left-warning, #modalMasterDetails .border-left-secondary,
#modalPagamentosMedico .border-left-primary, #modalPagamentosMedico .border-left-success, #modalPagamentosMedico .border-left-info,
#modalPagamentosMedico .border-left-warning, #modalPagamentosMedico .border-left-secondary { border-left: 0 !important; }
#modalMasterDetails .card[class*="border-left-"] > .card-header[class*="bg-"],
#modalPagamentosMedico .card[class*="border-left-"] > .card-header[class*="bg-"] { border-bottom: 0; }
#modalMasterDetails .card.border-left-primary > .card-header.bg-primary,
#modalMasterDetails .card.border-left-info > .card-header.bg-info,
#modalPagamentosMedico .card.border-left-primary > .card-header.bg-primary,
#modalPagamentosMedico .card.border-left-info > .card-header.bg-info { background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; }
#modalMasterDetails .card.border-left-success > .card-header.bg-success,
#modalPagamentosMedico .card.border-left-success > .card-header.bg-success { background: var(--md-success-container) !important; color: var(--md-on-success-container) !important; }
#modalMasterDetails .card.border-left-warning > .card-header.bg-warning,
#modalPagamentosMedico .card.border-left-warning > .card-header.bg-warning { background: var(--md-warning-container) !important; color: var(--md-on-warning-container) !important; }
#modalMasterDetails .card.border-left-secondary > .card-header.bg-secondary,
#modalPagamentosMedico .card.border-left-secondary > .card-header.bg-secondary { background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important; }
#modalMasterDetails .card[class*="border-left-"] > .card-header h6,
#modalPagamentosMedico .card[class*="border-left-"] > .card-header h6 { font-weight: 500 !important; color: inherit; }
#modalMasterDetails .card[class*="border-left-"] .text-xs.text-uppercase,
#modalPagamentosMedico .card[class*="border-left-"] .text-xs.text-uppercase { text-transform: none !important; letter-spacing: 0; font-size: .8rem; font-weight: 500 !important; color: var(--ink-soft) !important; }
#modalMasterDetails .text-gray-800, #modalPagamentosMedico .text-gray-800 { color: var(--ink) !important; }
#modalMasterDetails .text-gray-300, #modalPagamentosMedico .text-gray-300 { color: var(--line) !important; }

/* Médico sem plano vinculado */
#medicosTable tbody tr.table-warning:hover { background-color: var(--md-warning-container) !important; }
#medicosTable .text-warning.font-weight-bold { color: var(--warning) !important; font-weight: 600 !important; }
#medicosTable .text-warning.font-weight-bold i { margin-right: 5px; }

/* Tabelas: o visual vem do design system; aqui fica só o que depende destas. */
#medicosTable thead th,
#planosTable thead th,
#statusTable thead th,
#pagamentosTable thead th,
#pagamentosMedicoTable thead th { white-space: nowrap; }
#medicosTable tbody td:first-child,
#planosTable tbody td:first-child,
#statusTable tbody td:first-child,
#pagamentosTable tbody td:first-child,
#pagamentosMedicoTable tbody td:first-child { white-space: nowrap; }

/* overflow:auto do table-responsive cortaria os menus de ação das linhas */
#pagamento-tabs-content .table-responsive,
#modalPagamentosMedico .table-responsive { overflow: visible; }

.pg-badge-forte { font-weight: 600; }
.pg-cor-input { width: 50px; padding: 0; }
#medicoSelecionadoInfo,
#semPagamentos { display: none; }


/* ===== Tela: Caixa do dia (Views/Caixa/Index.cshtml) ===== */
/* A conta da gaveta lida como uma conta de somar: cada parcela numa linha, o resultado embaixo. */
.tela-caixa .cx-conta { max-width: 460px; }
.tela-caixa .cx-conta .linha { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.tela-caixa .cx-conta .linha:last-child { border-bottom: 0; }
.tela-caixa .cx-conta .rotulo { color: var(--ink-soft); }
.tela-caixa .cx-conta .rotulo .op { display: inline-block; width: 1.1rem; font-weight: 500; color: var(--ink-faint); }
.tela-caixa .cx-conta .valor { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.tela-caixa .cx-conta .total { border-top: 2px solid var(--md-outline-variant); margin-top: .45rem; padding-top: .7rem; }
.tela-caixa .cx-conta .total .valor { font-size: 1.5rem; color: var(--brand-d); }
.tela-caixa .cx-passo { display: flex; gap: .75rem; align-items: flex-start; }
.tela-caixa .cx-passo .n { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 12px; background: var(--md-primary-container); color: var(--md-on-primary-container);
                           display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 600; }
.tela-caixa .cx-bloco { max-width: 560px; }
.tela-caixa .cx-valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Conferência do fechamento: o bloco da diferença nasce escondido dentro do diálogo. */
#swDifBox { display: none; }


/* ===== Tela: Vendas (Views/Venda/Index.cshtml) ===== */
.tela-venda .vd-col-acoes { width: 120px; white-space: nowrap; }
.tela-venda .vd-col-qtd { width: 70px; }
.tela-venda .vd-col-preco,
.tela-venda .vd-col-subtotal,
.tela-venda .vd-col-valor { width: 110px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tela-venda .vd-col-status { width: 120px; }
.tela-venda .vd-col-remover { width: 40px; }
.tela-venda .vd-select-largo { width: 100%; }
.tela-venda #tabela { width: 100%; }
/* Conferência da venda: os blocos respiram e os totais ficam à direita, tabulares.
   As linhas destas duas tabelas nascem no JS sem classe por célula — daí a posição. */
.tela-venda .vd-itens td, .tela-venda .vd-itens th,
.tela-venda .vd-pagamentos td, .tela-venda .vd-pagamentos th { padding-top: 10px; padding-bottom: 10px; }
.tela-venda .vd-itens td:nth-child(2),
.tela-venda .vd-itens td:nth-child(3),
.tela-venda .vd-itens td:nth-child(4),
.tela-venda .vd-pagamentos td:nth-child(2) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tela-venda .vd-total { text-align: right; font-variant-numeric: tabular-nums; }
.tela-venda #pdvResumoPag { font-variant-numeric: tabular-nums; padding-top: 4px; }
#colParcelas { display: none; }


/* ===== Tela: Gestão de Médicos (Views/Medico/Index.cshtml) ===== */
/* Títulos das colunas não quebram em duas linhas */
#medicosTable td.dt-acoes { white-space: nowrap; }
#medicosTable td.dt-nome { min-width: 170px; }
#medicosTable td.dt-sociedade { white-space: normal; max-width: 240px; }
/* overflow:auto do table-responsive cortaria o menu "Mais ações" */
#tab-listagem .table-responsive { overflow: visible; }
/* Lista dentro do diálogo (SweetAlert é montado no corpo da página) */
.med-swal-lista { text-align: left; list-style-position: inside; }


/* ===== Tela: Médicos do acordo — selo (Views/MedicosSelo/Index.cshtml) ===== */
.tela-selo .selo-passo { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.tela-selo .selo-passo .n { flex: 0 0 30px; height: 30px; border-radius: 12px; background: var(--md-primary-container); color: var(--md-on-primary-container);
                            font-weight: 600; font-size: .82rem; display: flex; align-items: center; justify-content: center; }
.tela-selo .selo-passo-corpo { flex: 1; min-width: 0; }
.tela-selo .selo-acoes { gap: 10px; }
.tela-selo .selo-nota { border-radius: var(--r); font-size: .85rem; }
.tela-selo .selo-res-head { gap: 8px; }
.tela-selo .selo-col-linha { width: 60px; }
.tela-selo .selo-lista { max-height: 520px; overflow-y: auto; }
.selo-res-ok { color: var(--md-on-success-container); }
.selo-res-erro { color: var(--md-on-error-container); }
.selo-senha { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
#cardResultado { display: none; }


/* ===== Tela: Liberação de Médicos (Views/ValidacaoMedicos/Index.cshtml) ===== */
.tela-liberacao .lib-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tela-liberacao .lib-tab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-lg); border: 1px solid var(--line);
                           background: var(--surface); color: var(--ink); min-width: 250px; }
.tela-liberacao .lib-tab:hover { color: var(--ink); border-color: var(--md-outline-variant); background: var(--surface-2); }
.tela-liberacao .lib-tab.ativa { background: var(--md-secondary-container); border-color: transparent; color: var(--md-on-secondary-container); box-shadow: none; }
.tela-liberacao .lib-tab i { font-size: 1.2rem; color: var(--brand); }
.tela-liberacao .lib-tab b { display: block; font-size: .92rem; font-weight: 500; }
.tela-liberacao .lib-tab small { color: var(--ink-soft); }
.tela-liberacao .lib-lote { display: none; align-items: center; gap: 10px; padding: 8px 12px; background: var(--brand-l); border-radius: var(--r); margin-bottom: 10px; }
.tela-liberacao .lib-lote.show { display: flex; }
.tela-liberacao .lib-head { gap: 8px; }
.tela-liberacao .lib-col-sel { width: 34px; }
.tela-liberacao .lib-col-acoes { width: 230px; white-space: nowrap; }
.tela-liberacao #tabelaMed,
.tela-liberacao #tabelaSoc { width: 100%; }

/* ===== Liberação de Médicos — diálogos da recusa que cancela cobranças ===== */
/* O Swal é montado no <body>, fora de .tela-liberacao: o escopo é a classe do popup (customClass 'lib-dlg'). */
.lib-dlg .lib-imp { margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); text-align: left; }
.lib-dlg .lib-imp-tit { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--md-on-surface); }
.lib-dlg .lib-imp-tit i { color: var(--brand); }
.lib-dlg .lib-imp-txt { margin: 6px 0 0; font-size: .9rem; }
.lib-dlg .lib-imp-lista { list-style: none; padding: 0; margin: 6px 0 0; text-align: left; }
.lib-dlg .lib-imp-lista li { padding: 8px 0; border-top: 1px solid var(--line); }
.lib-dlg .lib-imp-lista li:first-child { border-top: 0; }
.lib-dlg .lib-imp-plano { font-weight: 500; color: var(--md-on-surface); }
.lib-dlg .lib-imp-det,
.lib-dlg .lib-imp-obs { display: block; font-size: .85rem; color: var(--ink-soft); }
.lib-dlg .lib-imp-obs { color: var(--md-on-warning-container); }
.lib-dlg .lib-imp-pago { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); font-size: .75rem;
                         background: var(--md-error-container); color: var(--md-on-error-container); }
.lib-dlg .lib-imp-alerta,
.lib-dlg .lib-imp-aviso { margin-top: 10px; padding: 10px 12px; border-radius: var(--r); font-size: .88rem; text-align: left; }
.lib-dlg .lib-imp-alerta { background: var(--md-error-container); color: var(--md-on-error-container); }
.lib-dlg .lib-imp-aviso { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.lib-dlg .lib-imp-confirma { margin-top: 10px; }
.lib-dlg .lib-imp-conf { margin: 8px 0 10px; }


/* ===== Tela: Logs do Sistema (Views/Logs/Index.cshtml) ===== */
/* Item selecionado é contêiner tonal claro: o texto branco do visual antigo sumiria */
.tela-logs .list-group-item.active .text-white,
.tela-logs .list-group-item.active .text-white-50 { color: var(--md-on-secondary-container) !important; }
.tela-logs .logs-vazio-ic { opacity: .4; }
.tela-logs .logs-busca { max-width: 230px; }
.tela-logs #logViewer {
  margin: 0;
  max-height: 70vh;
  overflow: auto;
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 14px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}


/* ===== Tela: Dumps de erro (Views/Logs/Erros.cshtml) ===== */
.tela-erros .list-group-item.active .text-white { color: var(--md-on-secondary-container) !important; }
.tela-erros .list-group-item.active .text-white-50 { color: var(--md-on-secondary-container) !important; }
.tela-erros .err-lista { max-height: 72vh; overflow: auto; }
.tela-erros .err-vazio-ic { opacity: .4; }
.tela-erros .err-titulo-linha { word-break: break-word; }
.tela-erros .err-arquivo { word-break: break-all; }
.tela-erros .err-dump {
  margin: 0;
  max-height: 72vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 14px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}


/* ===== Tela: Relatórios (Views/Relatorio/Index.cshtml) ===== */
.tela-relatorio .rel-grafico { height: 280px; }
.tela-relatorio .rel-grafico-sm { height: 260px; }
.tela-relatorio .rel-lista { max-height: 260px; overflow: auto; }
.tela-relatorio .rel-col-pos { width: 34px; }
.tela-relatorio .rel-col-qtd { width: 54px; text-align: right; }


/* ===== Tela: Indicadores do consultório (Views/Indicadores/Index.cshtml) ===== */
/* Filtro: atalhos em pílulas (segmento tonal = selecionado) + datas livres; quebra em linhas no celular. */
.tela-indicadores .ind-filtro { margin-bottom: 16px; }
.tela-indicadores .ind-filtro .card-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 18px; }
.tela-indicadores .ind-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.tela-indicadores .ind-atalhos .btn { border-radius: var(--r-pill); }
.tela-indicadores .ind-datas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tela-indicadores .ind-datas .form-control { width: auto; min-width: 140px; }
.tela-indicadores .ind-datas-ate { color: var(--ink-soft); font-size: .85rem; }
.tela-indicadores .ind-periodo-txt { border-top: 1px solid var(--line-2); padding: 10px 18px; font-size: .84rem; color: var(--ink-soft); }
.tela-indicadores .ind-periodo-txt strong { color: var(--ink); font-weight: 500; }
.tela-indicadores .ind-sep { margin: 0 6px; opacity: .6; }

/* Cartões de KPI: colunas FIXAS (8 do médico = 4×2 no desktop, 2×4 no celular) — com auto-fill sobrava um
   cartão sozinho na última linha. O dinheiro da clínica vem num bloco próprio de 2 cartões. */
.tela-indicadores .ind-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
@media (min-width: 1200px) { .tela-indicadores .ind-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tela-indicadores .ind-grupo { font-size: .95rem; font-weight: 500; color: var(--ink-soft); margin: 4px 0 10px; }
.tela-indicadores .ind-kpi { background: var(--md-surface-lowest); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tela-indicadores .ind-kpi-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tela-indicadores .ind-kpi-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem;
  background: var(--md-primary-container); color: var(--md-on-primary-container); }
.tela-indicadores .ind-tom-ouro .ind-kpi-ic { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.tela-indicadores .ind-tom-erro .ind-kpi-ic { background: var(--md-error-container); color: var(--md-on-error-container); }
.tela-indicadores .ind-tom-ok .ind-kpi-ic,
.tela-indicadores .ind-tom-din .ind-kpi-ic { background: var(--md-success-container); color: var(--md-on-success-container); }
.tela-indicadores .ind-tom-neutro .ind-kpi-ic { background: var(--md-surface-high); color: var(--md-on-surface-variant); }
.tela-indicadores .ind-kpi-rotulo { font-size: .82rem; font-weight: 500; color: var(--ink-soft); line-height: 1.25; }
.tela-indicadores .ind-kpi-valor { font-family: var(--font-head); font-size: 1.75rem; font-weight: 500; line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variation-settings: var(--rond-head); }
.tela-indicadores .ind-kpi-comp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tela-indicadores .ind-kpi-antes { font-size: .78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tela-indicadores .ind-kpi-nota { font-size: .76rem; color: var(--ink-soft); line-height: 1.3; }
/* Seta da variação: verde = melhorou, vermelho = piorou (em faltas/cancelamentos, subir é piorar). */
.tela-indicadores .ind-delta { display: inline-flex; align-items: center; gap: 3px; border-radius: var(--r-pill); padding: 2px 9px 2px 6px;
  font-size: .76rem; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tela-indicadores .ind-delta i { font-size: .9em; }
.tela-indicadores .ind-delta-bom { background: var(--md-success-container); color: var(--md-on-success-container); }
.tela-indicadores .ind-delta-ruim { background: var(--md-error-container); color: var(--md-on-error-container); }
.tela-indicadores .ind-delta-neutro { background: var(--md-surface-high); color: var(--md-on-surface-variant); }

.tela-indicadores .ind-aviso { display: flex; gap: 12px; align-items: flex-start; background: var(--md-warning-container); color: var(--md-on-warning-container);
  border-radius: var(--r-lg); padding: 12px 16px; margin-bottom: 16px; font-size: .86rem; }
.tela-indicadores .ind-aviso > i { font-size: 1.2rem; margin-top: 1px; }
.tela-indicadores .ind-aviso a { color: inherit; text-decoration: underline; }
.tela-indicadores .ind-rodape-fin { font-size: .8rem; color: var(--ink-soft); margin: -6px 0 18px; }

.tela-indicadores .ind-card .card-title small { font-size: .74rem; color: var(--ink-faint); margin-left: 6px; font-weight: 400; }
.tela-indicadores .ind-grafico { height: 300px; }
.tela-indicadores .ind-grafico-sm { height: 240px; }
.tela-indicadores .ind-lista-vazia { color: var(--ink-soft); text-align: center; margin: 40px 0; font-size: .88rem; }

/* Ranking (CID, medicamentos, documentos): nome + quantidade, com a barra proporcional por baixo.
   A largura vem do servidor em --ind-w (valor de runtime; ver a regra do cabeçalho deste arquivo). */
.tela-indicadores .ind-ranking { list-style: none; counter-reset: ind; margin: 0; padding: 0; }
.tela-indicadores .ind-ranking li { counter-increment: ind; display: grid; grid-template-columns: 26px 1fr auto; column-gap: 8px; row-gap: 5px;
  align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-2); }
.tela-indicadores .ind-ranking li:first-child { border-top: 0; padding-top: 0; }
.tela-indicadores .ind-ranking li::before { content: counter(ind) "."; color: var(--ink-faint); font-size: .8rem; font-variant-numeric: tabular-nums; }
.tela-indicadores .ind-ranking-sem-num li { grid-template-columns: 1fr auto; }
.tela-indicadores .ind-ranking-sem-num li::before { content: none; }
.tela-indicadores .ind-rk-nome { font-size: .88rem; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.tela-indicadores .ind-rk-nome b { font-weight: 500; }
.tela-indicadores .ind-rk-nome span { color: var(--ink-soft); }
.tela-indicadores .ind-rk-qtd { font-size: .88rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.tela-indicadores .ind-rk-barra { grid-column: 2 / -1; height: 6px; border-radius: var(--r-pill); background: var(--md-surface-high); position: relative; overflow: hidden; }
.tela-indicadores .ind-ranking-sem-num .ind-rk-barra { grid-column: 1 / -1; }
.tela-indicadores .ind-rk-barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--ind-w, 0%); background: var(--md-primary); border-radius: var(--r-pill); }

.tela-indicadores .ind-como dl { margin: 0; font-size: .84rem; }
.tela-indicadores .ind-como dt { font-weight: 500; color: var(--ink); margin-top: 10px; }
.tela-indicadores .ind-como dt:first-child { margin-top: 0; }
.tela-indicadores .ind-como dd { color: var(--ink-soft); margin: 2px 0 0; }

.tela-indicadores .ind-vazio .card-body { text-align: center; padding: 40px 20px; }
.tela-indicadores .ind-vazio-ic { width: 64px; height: 64px; border-radius: 22px; display: inline-grid; place-items: center; font-size: 1.8rem;
  background: var(--md-primary-container); color: var(--md-on-primary-container); margin-bottom: 12px; }
.tela-indicadores .ind-vazio h3 { font-size: 1.15rem; font-weight: 500; margin-bottom: 6px; }
.tela-indicadores .ind-vazio p { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 16px; }
.tela-indicadores .ind-vazio-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

@media (max-width: 575.98px) {
  .tela-indicadores .ind-kpis { gap: 10px; }
  .tela-indicadores .ind-kpi { padding: 12px 14px; }
  .tela-indicadores .ind-kpi-valor { font-size: 1.4rem; }
  /* Valor em reais não cabe em meia largura de celular ("R$ 12.345,67"): um cartão de dinheiro por linha. */
  .tela-indicadores .ind-kpis-fin { grid-template-columns: minmax(0, 1fr); }
  .tela-indicadores .ind-kpi-ic { width: 30px; height: 30px; flex-basis: 30px; font-size: .9rem; border-radius: 10px; }
  .tela-indicadores .ind-datas { width: 100%; }
  .tela-indicadores .ind-datas .form-control { flex: 1 1 120px; min-width: 0; }
  .tela-indicadores .ind-grafico { height: 250px; }
}


/* ===== Tela: Financeiro — contas, consultas, DRE, fluxo e visão geral
        (Views/Financeiro/*.cshtml) ===== */
.tela-financeiro #tabela { width: 100%; }
.tela-financeiro .card-header { gap: 10px 14px; }
.tela-financeiro .card-header > .form-inline { flex-wrap: wrap; row-gap: 8px; }
.tela-financeiro .fin-vencido-link { color: var(--danger) !important; }
.tela-financeiro .fin-grafico { height: 300px; }
.tela-financeiro .fin-destaque { opacity: .85; }
.tela-financeiro .fin-vazio-ic { opacity: .4; }
.tela-financeiro .fin-barra { height: 8px; }
.tela-financeiro .fin-select-largo { width: 100%; }
/* Resultado do período: o número é o assunto do cartão. É um <div> (não um título): a tela já tem o seu h1 —
   o visual é o de antes, quando era um h1 (fonte de título, 1.75rem, cor herdada do cartão colorido). */
.tela-financeiro .fin-resultado .fin-valor { font-family: var(--font-head); font-size: 1.75rem; line-height: 1.2; color: inherit; font-variation-settings: var(--rond-head); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* Linhas da grade respiram um pouco mais (as tabelas compactas ficam como estão). */
.tela-financeiro .table:not(.table-sm) td,
.tela-financeiro .table:not(.table-sm) th { padding-top: 11px; padding-bottom: 11px; }
/* Fluxo de caixa e DRE: os números das tabelas compactas também tabulares. */
.tela-financeiro .table .text-right { white-space: nowrap; font-variant-numeric: tabular-nums; }
#swalExtras { display: none; }


/* ===== Tela: CertMed completo (Views/Upgrade/Index.cshtml) ===== */
/* Topo em contêiner tonal com as formas "cookie" do Material — mesma linguagem da tela de login. */
.tela-upgrade .up-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: var(--r-xl); padding: 28px 30px; }
.tela-upgrade .up-hero::before, .tela-upgrade .up-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
            -webkit-mask: url('/img/formas/cookie-9.svg') center / contain no-repeat; mask: url('/img/formas/cookie-9.svg') center / contain no-repeat; }
.tela-upgrade .up-hero::before { width: 320px; height: 320px; right: -110px; top: -150px; background: #F3DFAA; opacity: .75; }
.tela-upgrade .up-hero::after { width: 220px; height: 220px; right: 120px; bottom: -170px; background: #B7D1F2;
            -webkit-mask-image: url('/img/formas/cookie-12.svg'); mask-image: url('/img/formas/cookie-12.svg'); }
.tela-upgrade .up-hero h1 { font-size: 1.75rem; font-weight: 500; margin: 0 0 6px; color: #0B2F4E; letter-spacing: -.02em; font-variation-settings: 'ROND' 100; }
.tela-upgrade .up-hero .up-chamada { font-size: 1rem; color: #2B4A66; margin-bottom: 0; max-width: 72ch; }
/* o d-sm-block do markup força display:block, então a centralização é por line-height */
.tela-upgrade .up-hero .up-icone { flex: none; width: 56px; height: 56px; border-radius: 18px; text-align: center; line-height: 56px; font-size: 1.6rem;
            background: var(--md-surface-lowest); color: var(--md-primary); }
.tela-upgrade .up-hero-linha { gap: 18px; }
.tela-upgrade .up-hero-col { flex: 1; min-width: 0; }
.tela-upgrade .up-tag { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: var(--r-pill);
            background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); font-size: .8rem; font-weight: 500; }
.tela-upgrade .up-benef { list-style: none; padding: 0; margin: 16px 0 0; }
.tela-upgrade .up-benef li { padding: 6px 0 6px 28px; position: relative; font-size: .95rem; color: #0B2F4E; max-width: 72ch; }
.tela-upgrade .up-benef li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; color: var(--md-primary); }
.tela-upgrade .up-card { border-radius: var(--r-xl); }
.tela-upgrade .up-sub { font-size: .88rem; max-width: 72ch; }
.tela-upgrade .up-planos { align-items: stretch; }
.tela-upgrade .up-plano-col { padding-top: 14px; }
.tela-upgrade .up-plano { display: block; position: relative; border: 1px solid var(--md-outline-variant); border-radius: var(--r-xl); padding: 22px 16px 18px; text-align: center;
            cursor: pointer; height: 100%; margin: 0; transition: border-color .15s, box-shadow .15s, background-color .15s; background: var(--surface); }
.tela-upgrade .up-plano:hover { border-color: var(--md-outline); }
.tela-upgrade .up-plano.selecionado { border-color: var(--md-primary); background: var(--md-primary-container); box-shadow: inset 0 0 0 1px var(--md-primary); }
.tela-upgrade .up-plano .up-check { position: absolute; top: 12px; right: 14px; color: var(--md-primary); opacity: 0; font-size: 1.1rem; }
.tela-upgrade .up-plano.selecionado .up-check { opacity: 1; }
.tela-upgrade .up-plano-nome { font-weight: 500; color: var(--ink); font-size: 1.05rem; }
.tela-upgrade .up-plano-preco { font-size: 1.9rem; font-weight: 600; color: var(--md-primary); line-height: 1.1; margin: 6px 0 2px; letter-spacing: -.02em; font-variation-settings: 'ROND' 80; font-variant-numeric: tabular-nums; }
.tela-upgrade .up-plano-preco small { font-size: .85rem; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }
.tela-upgrade .up-plano-det { font-size: .82rem; color: var(--ink-soft); }
.tela-upgrade .up-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
            font-size: .74rem; font-weight: 600; padding: 3px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.tela-upgrade .up-selo-atual { border: 0; background: var(--brand-l); color: var(--brand-d); border-radius: var(--r-lg); padding: 14px 18px; font-size: .9rem; }
.tela-upgrade .up-acoes { gap: 12px; }
.tela-upgrade .up-seguro { font-size: .82rem; }
.tela-upgrade .up-selo-atual > i:first-child,
.tela-upgrade .up-sub i,
.tela-upgrade h5 > i:first-child { color: var(--brand); }
#upErro { display: none; border-radius: var(--r); }


/* ===== Tela: Minha Assinatura (Views/Assinatura/Index.cshtml) ===== */
.tela-assinatura .as-alerta { border-radius: var(--r-lg); padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.tela-assinatura .as-alerta i.ic { font-size: 1.4rem; margin-top: 2px; }
.tela-assinatura .as-alerta h5 { font-family: var(--font-head); font-size: 1.02rem; font-weight: 600; margin: 0 0 4px; color: inherit; }
.tela-assinatura .as-alerta p { margin: 0; font-size: .9rem; max-width: 72ch; }
.tela-assinatura .as-alerta.perigo { background: var(--danger-l); color: var(--md-on-error-container); border: 0; }
.tela-assinatura .as-alerta.atencao { background: var(--warning-l); color: var(--md-on-warning-container); border: 0; }
.tela-assinatura .as-alerta.info { background: var(--brand-l); color: var(--brand-d); border: 0; }
.tela-assinatura .as-lib { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line-2); }
.tela-assinatura .as-lib:first-of-type { border-top: 0; }
.tela-assinatura .as-lib .ic { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; font-size: .95rem; }
.tela-assinatura .as-lib .ok { background: var(--md-success-container); color: var(--md-on-success-container); }
.tela-assinatura .as-lib .pend { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.tela-assinatura .as-lib .nao { background: var(--md-error-container); color: var(--md-on-error-container); }
.tela-assinatura .as-lib .neutro { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.tela-assinatura .as-hist td, .tela-assinatura .as-hist th { vertical-align: middle; font-size: .86rem; }
.tela-assinatura .as-hist .as-col-valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tela-assinatura .as-hist .as-col-acao { text-align: right; white-space: nowrap; }
/* Rótulos dos dados do plano: o texto vem em caixa alta no markup; aqui vira caixa de frase. */
.tela-assinatura .as-rotulo { font-size: .8rem !important; font-weight: 500; color: var(--ink-soft) !important; text-transform: lowercase; margin-bottom: 2px; }
.tela-assinatura .as-rotulo::first-letter { text-transform: uppercase; }
.tela-assinatura .as-rotulo.miudo { font-size: .78rem !important; }
.tela-assinatura .as-card { border-radius: var(--r-xl); }
.tela-assinatura .as-card-plano { border-radius: var(--r-xl); overflow: hidden; }
.tela-assinatura .as-card-plano > .card-body { padding: 22px 24px; }
.tela-assinatura .as-plano-topo { gap: 8px; }
.tela-assinatura .as-plano-nome { font-size: 1.5rem; font-weight: 500; font-variation-settings: 'ROND' 80; }
.tela-assinatura .as-status { color: #fff; font-size: .85rem; font-weight: 500; padding: 7px 14px; border-radius: var(--r-pill); }
.tela-assinatura .as-acoes { gap: 8px; }
.tela-assinatura .as-simulada { border-radius: var(--r); font-size: .82rem; }
.tela-assinatura .as-cancelar { gap: 10px; }
.tela-assinatura .as-cancelar-txt { max-width: 72ch; }
.tela-assinatura .card-body h6 > i:first-child,
.tela-assinatura .as-ic-marca { color: var(--brand); }
.as-cartao-form label { font-size: .82rem; font-weight: 500; margin-bottom: 4px; }
#cartaoErro { display: none; border-radius: var(--r); }
/* Selo da sociedade pago pelo médico: bloco próprio abaixo do plano (cobrança separada no Asaas). */
.tela-assinatura .as-card-selo > .card-body { padding: 18px 24px; }
.tela-assinatura .as-selo-nome { font-size: 1.15rem; font-weight: 500; }
.tela-assinatura .as-selo-motivo { color: var(--ink-soft); }
/* "Mês grátis até dd/mm" — pílula discreta embaixo da data da 1ª cobrança. */
.tela-assinatura .as-mes-gratis { display: inline-flex; align-items: center; margin-top: 6px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--md-success-container); color: var(--md-on-success-container); font-size: .78rem; font-weight: 500; }
/* Histórico com as duas cobranças: de onde veio cada linha. */
.tela-assinatura .as-hist .as-origem { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); background: var(--line-2); font-size: .78rem; white-space: nowrap; }
.tela-assinatura .as-hist .as-origem.selo { background: var(--md-primary-container); color: var(--md-on-primary-container); }


/* ===== Tela: Comece aqui (Views/ComeceAqui/Index.cshtml) ===== */
.ca { max-width: 1180px; }
/* Topo em contêiner tonal com as formas "cookie" do Material — mesma linguagem da tela de login. */
.ca .ca-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); color: var(--md-on-primary-container); padding: 30px 32px; margin-bottom: 18px;
           display: flex; gap: 24px; align-items: center; flex-wrap: wrap; background: var(--md-primary-container); }
.ca .ca-hero::before, .ca .ca-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
           -webkit-mask: url('/img/formas/cookie-9.svg') center / contain no-repeat; mask: url('/img/formas/cookie-9.svg') center / contain no-repeat; }
.ca .ca-hero::before { width: 360px; height: 360px; right: -110px; top: -170px; background: #F3DFAA; opacity: .75; }
.ca .ca-hero::after { width: 260px; height: 260px; left: 38%; bottom: -200px; background: #B7D1F2;
           -webkit-mask-image: url('/img/formas/cookie-12.svg'); mask-image: url('/img/formas/cookie-12.svg'); }
.ca .ca-hero-txt { flex: 1 1 460px; min-width: 0; }
.ca .ca-eyebrow { display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px 6px 10px; border-radius: var(--r-pill); font-size: .82rem; font-weight: 500;
              background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.ca .ca-eyebrow i { color: var(--md-tertiary); }
.ca .ca-hero h1 { color: #0B2F4E; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; margin: 14px 0 8px; font-variation-settings: 'ROND' 100; }
.ca .ca-hero p { color: #2B4A66; margin: 0; max-width: 72ch; }
.ca .ca-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.ca .ca-atalhos a { color: var(--md-on-primary-container); font-size: .82rem; font-weight: 500; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.62); }
.ca .ca-atalhos a:hover { background: var(--md-surface-lowest); color: var(--md-on-primary-container); }
/* O anel de progresso: só a fatia (--ca-pct) vem do servidor; as cores são daqui. */
.ca .ca-anel { flex: none; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center;
           background: conic-gradient(var(--md-primary) var(--ca-pct, 0%), rgba(255,255,255,.7) 0); }
.ca .ca-anel-in { width: 108px; height: 108px; border-radius: 50%; background: var(--md-surface-lowest); color: #0B2F4E; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ca .ca-anel-in b { font-size: 1.7rem; line-height: 1; font-weight: 600; font-variation-settings: 'ROND' 100; }
.ca .ca-anel-in small { font-size: .72rem; color: var(--ink-soft); margin-top: 3px; }

.ca .ca-sec { background: var(--surface); border: 0; box-shadow: var(--sh-sm); border-radius: var(--r-xl); padding: 24px 24px 22px; margin-bottom: 18px; scroll-margin-top: 80px; }
.ca .ca-sec-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.ca .ca-num { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--md-primary-container); color: var(--md-on-primary-container); font-weight: 600; display: grid; place-items: center; font-variation-settings: 'ROND' 100; }
.ca .ca-sec-head h2 { font-size: 1.35rem; font-weight: 500; margin: 3px 0 2px; font-variation-settings: 'ROND' 80; }
.ca .ca-sec-head p { margin: 0; color: var(--ink-soft); font-size: .9rem; max-width: 72ch; }

.ca .ca-alerta { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 16px; font-size: .9rem; }
.ca .ca-alerta i.ic { font-size: 1.25rem; margin-top: 2px; }
.ca .ca-alerta b { display: block; font-size: .95rem; }
.ca .ca-alerta.pend { background: var(--warning-l); color: var(--md-on-warning-container); border: 0; }
.ca .ca-alerta.nao { background: var(--danger-l); color: var(--md-on-error-container); border: 0; }

.ca .ca-etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ca .ca-etapa { position: relative; border: 0; border-radius: var(--r-lg); padding: 16px; background: var(--surface-2); }
.ca .ca-etapa-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1rem; margin-bottom: 10px; }
.ca .ca-etapa b { display: block; font-size: .98rem; }
.ca .ca-etapa em { display: inline-block; font-style: normal; font-size: .8rem; font-weight: 500; color: var(--brand); margin: 2px 0 6px; }
.ca .ca-etapa small { display: block; color: var(--ink-soft); font-size: .84rem; line-height: 1.45; }
.ca .ca-etapa .ca-motivo { margin-top: 6px; font-size: .84rem; color: var(--md-on-error-container); }
.ca .ca-etapa.ok { background: var(--success-l); }
.ca .ca-etapa.ok .ca-etapa-ic { background: var(--md-success-container); color: var(--md-on-success-container); }
.ca .ca-etapa.pend { background: var(--warning-l); }
.ca .ca-etapa.pend .ca-etapa-ic { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.ca .ca-etapa.nao { background: var(--danger-l); }
.ca .ca-etapa.nao .ca-etapa-ic { background: var(--md-error-container); color: var(--md-on-error-container); }
.ca .ca-etapa.neutro .ca-etapa-ic { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.ca .ca-soc { display: flex; gap: 6px; align-items: center; font-size: .82rem; margin-top: 4px; }
.ca .ca-como { margin-top: 14px; border-radius: var(--r-lg); background: var(--paper); padding: 14px 16px; }
.ca .ca-como b { font-size: .9rem; }
.ca .ca-como b > i:first-child { color: var(--brand); }
.ca .ca-como ul { margin: 8px 0 0; padding-left: 18px; font-size: .88rem; color: var(--ink-soft); }
.ca .ca-como li { margin: 4px 0; max-width: 72ch; }

.ca .ca-prog { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .88rem; color: var(--ink-soft); }
.ca .ca-prog-barra { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--md-secondary-container); overflow: hidden; }
.ca .ca-prog-barra span { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); }
.ca .ca-nota { display: flex; gap: 10px; align-items: center; background: var(--brand-l); color: var(--brand-d); border-radius: var(--r); padding: 10px 14px; font-size: .88rem; margin-bottom: 14px; }
.ca .ca-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ca .ca-grupo { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ca .ca-grupo-head { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ca .ca-grupo-head > i { color: var(--brand); font-size: 1.15rem; width: 22px; text-align: center; }
.ca .ca-grupo-head b { display: block; font-size: .95rem; }
.ca .ca-grupo-head small { color: var(--ink-soft); }
.ca .ca-passo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid var(--line-2); }
.ca .ca-passo:first-of-type { border-top: 0; }
.ca .ca-passo-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: .9rem; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.ca .ca-passo.ok .ca-passo-ic { background: var(--md-success-container); color: var(--md-on-success-container); }
.ca .ca-passo.ok .ca-passo-txt b { color: var(--ink-soft); }
.ca .ca-passo-txt { flex: 1; min-width: 0; }
.ca .ca-passo-txt b { display: block; font-size: .9rem; }
.ca .ca-passo-txt small { color: var(--ink-soft); font-size: .8rem; line-height: 1.4; display: block; }
.ca .ca-passo .btn, .ca .ca-rever, .ca .ca-bloq { flex: none; align-self: center; }
.ca .ca-rever { font-size: .8rem; }
.ca .ca-bloq { color: var(--ink-faint); }
.ca .ca-opc { font-size: .72rem; font-weight: 500; color: var(--ink-soft); background: var(--md-surface-high); border-radius: var(--r-xs); padding: 1px 7px; margin-left: 4px; vertical-align: middle; }

.ca .ca-partes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ca .ca-parte { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; color: var(--ink); background: var(--surface); transition: border-color var(--t), box-shadow var(--t), background-color var(--t); }
.ca .ca-parte:hover { color: var(--ink); border-color: var(--md-outline-variant); box-shadow: var(--sh); }
.ca .ca-parte-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; background: var(--md-primary-container); color: var(--md-on-primary-container); margin-bottom: 6px; }
.ca .ca-parte b { font-size: .95rem; }
.ca .ca-parte span { font-size: .83rem; color: var(--ink-soft); line-height: 1.42; }
.ca .ca-parte small { margin-top: auto; padding-top: 6px; font-size: .76rem; font-weight: 500; color: var(--brand-d); }
.ca .ca-parte.travado { background: var(--surface-2); }
.ca .ca-parte.travado .ca-parte-ic { background: var(--md-surface-high); color: var(--ink-faint); }
.ca .ca-parte.inativo { pointer-events: none; opacity: .75; }
.ca .ca-cadeado { color: var(--ink-faint); font-size: .75rem; margin-left: 4px; }

.ca .ca-equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ca .ca-papel { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.ca .ca-papel h3 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; display: flex; gap: 10px; align-items: center; margin: 0 0 8px; font-variation-settings: 'ROND' 80; }
.ca .ca-papel h3 i { color: var(--brand); }
.ca .ca-papel ul { list-style: none; padding: 0; margin: 0; }
.ca .ca-papel li { display: flex; gap: 8px; font-size: .88rem; padding: 5px 0; border-top: 1px solid var(--line-2); }
.ca .ca-papel li:first-child { border-top: 0; }
.ca .ca-papel li i { color: var(--success); margin-top: 4px; font-size: .75rem; }
.ca .ca-papel li.nao i { color: var(--ink-faint); }
.ca .ca-papel li.nao { color: var(--ink-soft); }

.ca .ca-assinar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ca .ca-modo { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.ca .ca-modo h3 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; margin: 0 0 4px; display: flex; gap: 10px; align-items: center; font-variation-settings: 'ROND' 80; }
.ca .ca-modo h3 i { color: var(--brand); }
.ca .ca-modo p { font-size: .87rem; color: var(--ink-soft); margin: 0 0 8px; max-width: 72ch; }
.ca .ca-modo dl { margin: 0; font-size: .86rem; }
.ca .ca-modo dt { font-size: .8rem; font-weight: 500; color: var(--ink-faint); margin-top: 8px; }
.ca .ca-modo dd { margin: 2px 0 0; max-width: 72ch; }
.ca .ca-req { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 500; border-radius: var(--r-pill); padding: 3px 10px; margin: 4px 4px 0 0; }
.ca .ca-req.ok { background: var(--md-success-container); color: var(--md-on-success-container); }
.ca .ca-req.pend { background: var(--md-warning-container); color: var(--md-on-warning-container); }

.ca .ca-duvidas details { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 8px; background: var(--surface); transition: background-color var(--t); }
.ca .ca-duvidas details[open] { border-color: transparent; background: var(--surface-2); }
.ca .ca-duvidas summary { cursor: pointer; list-style: none; padding: 13px 16px; font-weight: 500; font-size: .92rem; display: flex; gap: 10px; align-items: center; }
.ca .ca-duvidas summary::-webkit-details-marker { display: none; }
.ca .ca-duvidas summary::before { content: "+"; flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--md-primary-container); color: var(--md-on-primary-container); font-weight: 600; }
.ca .ca-duvidas details[open] summary::before { content: "–"; }
.ca .ca-duvidas .resp { padding: 0 16px 14px 48px; font-size: .88rem; color: var(--ink-soft); max-width: 78ch; }
.ca .ca-fim { text-align: center; color: var(--ink-soft); font-size: .88rem; padding: 6px 0 20px; }

@media (max-width: 991.98px) {
  .ca .ca-etapas, .ca .ca-grupos, .ca .ca-equipe, .ca .ca-assinar { grid-template-columns: 1fr; }
  .ca .ca-partes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .ca .ca-partes { grid-template-columns: 1fr; }
  .ca .ca-hero { padding: 22px 18px; border-radius: 24px; }
  .ca .ca-sec { padding: 18px 16px; }
  .ca .ca-anel { display: none; }
}


/* ===== Tela: Acesso suspenso (Views/ComeceAqui/Suspenso.cshtml) ===== */
.tela-suspenso { padding-top: 4vh; }
.tela-suspenso .card { border-radius: var(--r-xl); }
.tela-suspenso .card-body { padding: 36px 30px; }
.tela-suspenso .sp-ic {
  width: 64px; height: 64px; border-radius: 20px;
  background: var(--md-warning-container); color: var(--md-on-warning-container);
  display: grid; place-items: center; margin: 0 auto 14px; font-size: 1.7rem;
}
.tela-suspenso h2 { font-size: 1.5rem; font-weight: 500; font-variation-settings: 'ROND' 80; }
.tela-suspenso .sp-texto { font-size: .95rem; max-width: 72ch; margin-left: auto; margin-right: auto; }
.tela-suspenso .sp-passos { max-width: 420px; background: var(--md-surface-low); border-radius: var(--r-lg); padding: 14px 16px; font-size: .9rem; }
.tela-suspenso .sp-acoes { gap: 8px; }


/* ===== Tela: Cadastro de médico (Views/NovoUsuario/Index.cshtml) ===== */
/* O _LayoutLogin serve login, cadastro e recuperação de senha: o :has() prende
   estas regras à tela de cadastro, senão vazariam para as outras duas. */
/* Mesma divisão da tela de Entrar: painel tonal com a marca, os passos e o que
   está incluso de um lado; a folha do formulário, larga, do outro. O painel é
   sticky — o cadastro é mais alto que a viewport e os passos precisam ficar à
   vista o tempo todo. */
body.login-page:has(.cm-reg-box) {
  display: block;
  padding: 18px;
  background: var(--md-frame) none !important;
}
body.login-page:has(.cm-reg-box)::before { content: none; display: none; }

.cm-reg-box {
  width: 1180px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

/* ===== Painel lateral (marca, passos, vantagens) ===== */
.cm-reg-aside {
  position: sticky;
  top: 18px;
  align-self: start;
  min-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  padding: 34px 30px 28px;
  border-radius: 28px;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  overflow: hidden;
  isolation: isolate;
}
.cm-reg-aside::before, .cm-reg-aside::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  -webkit-mask: url('/img/formas/cookie-9.svg') center / contain no-repeat;
          mask: url('/img/formas/cookie-9.svg') center / contain no-repeat;
}
.cm-reg-aside::before { width: 360px; height: 360px; right: -150px; top: -140px; background: #F3DFAA; opacity: .75; }
.cm-reg-aside::after {
  width: 300px; height: 300px; left: -130px; bottom: -110px; background: #B7D1F2;
  -webkit-mask-image: url('/img/formas/cookie-12.svg'); mask-image: url('/img/formas/cookie-12.svg');
}
.cm-reg-aside .cm-reg-logo { display: block; width: max-content; }
.cm-reg-aside .cm-reg-logo img { width: 126px; height: auto; display: block; }
.cm-reg-aside h1 {
  font-family: var(--font-head);
  font-size: 1.65rem;
  font-weight: 500;
  color: #0B2F4E;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variation-settings: 'ROND' 80;
  margin: 26px 0 8px;
  text-wrap: balance;
}
.cm-reg-aside .cm-reg-lead { color: #2B4A66; font-size: .93rem; line-height: 1.5; margin: 0; }

/* ===== Indicador dos passos (vertical no painel) ===== */
.cm-reg-box .wizard-steps {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 28px 0 24px;
}
.cm-reg-box .wizard-step-ind {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #2B4A66;
  font-size: .93rem;
  font-weight: 500;
  white-space: normal;
}
.cm-reg-box .wizard-step-ind .num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .62);
  color: #2B4A66;
  font-weight: 600;
  font-size: .88rem;
  flex-shrink: 0;
}
.cm-reg-box .wizard-step-ind .rotulo { display: flex; flex-direction: column; line-height: 1.25; padding-top: 3px; }
.cm-reg-box .wizard-step-ind .rotulo small { font-size: .78rem; font-weight: 400; color: #4A6A86; margin-top: 2px; }
.cm-reg-box .wizard-step-ind.ativo { color: #0B2F4E; }
.cm-reg-box .wizard-step-ind.ativo .num { background: var(--md-primary); color: var(--md-on-primary); }
.cm-reg-box .wizard-step-ind.feito .num { background: var(--md-success-container); color: var(--md-on-success-container); }
.cm-reg-box .wizard-sep {
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .75);
  margin: 5px 0 5px 14px;
}
.cm-reg-box .wizard-pane { display: none; }
.cm-reg-box .wizard-pane.ativo { display: block; }

/* ===== O que está incluso + rodapé do painel ===== */
.cm-reg-vantagens {
  list-style: none;
  margin: auto 0 0;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .6);
}
.cm-reg-vantagens li { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; color: #2B4A66; line-height: 1.4; }
.cm-reg-vantagens li + li { margin-top: 10px; }
.cm-reg-vantagens i { color: var(--md-primary); font-size: .95rem; margin-top: 2px; flex: none; width: 18px; text-align: center; }
.cm-reg-box .cm-reg-foot { margin-top: 18px; font-size: .9rem; color: #2B4A66; }
.cm-reg-box .cm-reg-foot a { color: var(--md-primary); font-weight: 600; }

/* ===== Folha do formulário ===== */
.cm-reg-box .card {
  border: 0;
  border-radius: 28px;
  box-shadow: none;
  background: var(--md-surface-lowest);
  overflow: hidden;
  margin: 0;
}
.cm-reg-box .cm-reg-body { padding: 30px 34px 28px; }
/* Nos passos curtos (plano, pagamento) a folha acompanha a altura do painel:
   os dois blocos terminam na mesma linha em vez de sobrar vazio à direita. */
@media (min-width: 992px) {
  .cm-reg-box .card { min-height: calc(100vh - 36px); }
}

/* ===== Campos com rótulo ===== */
.cm-reg-box .cm-field { margin-bottom: .85rem; }
.cm-reg-box .cm-field > label {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: .35rem;
}
.cm-reg-box .cm-field > label .opcional { font-weight: 400; color: var(--ink-faint); }
.cm-reg-box .cm-reg-body .form-control {
  height: 46px;
  border: 1px solid var(--md-field);
  border-radius: 12px;
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
}
.cm-reg-box .cm-reg-body .form-control:focus {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
}
.cm-reg-box .cm-reg-body .form-control::placeholder { color: var(--md-outline); }
/* O combo aqui é igual ao do resto do sistema: seta M3 do certmed-ui.css, nunca a nativa.
   O background acima é atalho e apagaria a seta, então ela volta explícita. */
.cm-reg-box .cm-reg-body select.form-control:not([multiple]):not([size]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2.4rem;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23444A52' d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 20px;
}
.cm-reg-box .cm-hint {
  font-size: .76rem;
  color: var(--ink-faint);
  margin-top: .25rem;
  display: block;
}
.cm-reg-box .cm-hint code { color: var(--ink-soft); background: var(--md-surface-high); padding: 0 5px; border-radius: 5px; font-size: .95em; }
/* input-group só onde há botão (olho da senha) */
.cm-reg-box .cm-reg-body .input-group .form-control {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.cm-reg-box .cm-reg-body .input-group-append .input-group-text {
  background: var(--surface);
  border: 1px solid var(--md-field);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  color: var(--ink-soft);
}
.cm-reg-box .cm-reg-body .input-group:focus-within .input-group-text { border-color: var(--md-primary); }
.cm-reg-box .cm-olho { cursor: pointer; }
.cm-reg-box .cm-caixa-alta { text-transform: uppercase; }

/* ===== Divisórias de seção ===== */
.cm-reg-box .cm-sec {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.5rem 0 1rem;
}
.cm-reg-box .wizard-pane > .cm-sec:first-child { margin-top: 0; }
.cm-reg-box .cm-sec i {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-size: 1rem;
}
.cm-reg-box .cm-sec span {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--ink);
  font-variation-settings: 'ROND' 80;
}
.cm-reg-box .cm-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ===== Foto ao lado da identificação ===== */
.cm-reg-box .cm-ident { display: flex; align-items: flex-start; gap: 20px; }
.cm-reg-box .cm-ident-campos { flex: 1; min-width: 0; }
.cm-reg-box .cm-foto-bloco {
  flex: none;
  width: 92px;
  padding-top: 22px;            /* alinha o avatar com a primeira caixa da linha */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.cm-reg-box .cm-foto-txt { font-size: .76rem; color: var(--ink-soft); line-height: 1.25; }
.cm-reg-box .cm-foto-txt .opcional { display: block; color: var(--ink-faint); }
.cm-reg-box .profile-image-container { position: relative; flex-shrink: 0; }
.cm-reg-box .profile-image {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  display: block;
}
.cm-reg-box .profile-image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--md-scrim), .55);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-reg-box .profile-image-container:hover .profile-image-overlay { opacity: 1; }
.cm-reg-box .upload-btn {
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin: 0;
}
.cm-reg-box .upload-btn i { font-size: 15px; }
.cm-reg-box .upload-btn span { display: none; }
.cm-reg-box .profile-image.preview { border-color: var(--success); }
.cm-reg-box .cm-foto-input { display: none; }

/* ===== Validações ===== */
.cm-reg-box .error {
  color: var(--danger);
  font-size: .78rem;
  margin-top: .25rem;
  display: block;
}
.cm-reg-box .form-control.error,
.cm-reg-box .input-group.error .form-control { border-color: var(--danger) !important; }
.cm-reg-box .form-control.valid { border-color: var(--success); }
.cm-reg-box .has-error > label { color: var(--danger); }

/* ===== Barra de ações de cada passo ===== */
.cm-reg-box .cm-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cm-reg-box .cm-acoes-nav { justify-content: flex-end; }
.cm-reg-box .cm-reg-body .btn { border-radius: var(--r-pill); font-weight: 500; padding: .65rem 1.4rem; }
.cm-reg-box .cm-acoes .btn-primary,
.cm-reg-box .cm-acoes .btn-success { min-width: 220px; }
.cm-reg-box .cm-acoes .btn-outline-secondary { min-width: 140px; }
.cm-reg-box .nu-resumo .btn { min-width: 0; padding: .35rem .9rem; }
.cm-reg-box .icheck-primary { font-size: .9rem; }

/* ===== Cartões de plano ===== */
.cm-reg-box .plano-card {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--r-xl);
  padding: 22px 18px 18px;
  cursor: pointer;
  position: relative;
  height: 100%;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  background: var(--surface);
  display: block;
  margin-bottom: 0;
}
.cm-reg-box .plano-card:hover { border-color: var(--md-outline); }
.cm-reg-box .plano-card.selecionado {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
  box-shadow: inset 0 0 0 1px var(--md-primary);
}
.cm-reg-box .plano-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
  font-size: .74rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.cm-reg-box .plano-nome { font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.cm-reg-box .plano-preco {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--md-primary);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variation-settings: 'ROND' 80;
  font-variant-numeric: tabular-nums;
}
.cm-reg-box .plano-preco small { font-size: .8rem; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }
.cm-reg-box .plano-det { font-size: .8rem; color: var(--ink-soft); margin-top: 6px; line-height: 1.45; }
.cm-reg-box .plano-check {
  position: absolute;
  top: 12px;
  right: 14px;
  color: var(--md-primary);
  opacity: 0;
  transition: opacity .15s;
}
.cm-reg-box .plano-card.selecionado .plano-check { opacity: 1; }
.cm-reg-box .plano-radio { position: absolute; opacity: 0; pointer-events: none; }
/* O rádio fica invisível dentro do card: o foco do TECLADO (Tab/setas) aparece no card inteiro.
   :focus-visible, e não :focus-within, para o clique do mouse não deixar contorno. */
.cm-reg-box .plano-card:has(.plano-radio:focus-visible) { outline: 3px solid var(--md-primary); outline-offset: 3px; }
.cm-reg-box .plano-col { padding-top: 12px; }
.cm-reg-box .planos-row { align-items: stretch; }
.cm-reg-box .recursos-nota {
  background: var(--brand-l);
  border: 0;
  border-radius: var(--r);
  padding: 12px 16px;
  font-size: .86rem;
  color: var(--brand-d);
  margin: 0 0 20px;
}

/* ===== Fechamento da compra: mês grátis e selo da sociedade (passo 2) ===== */
/* Faixa do mês grátis: o ouro do logo (tertiary), a primeira coisa que se lê ao escolher o plano. */
.cm-reg-box .nu-gratis {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 0 14px;
  border-radius: var(--r-lg);
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.cm-reg-box .nu-gratis-ico {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--md-on-tertiary-container);
  color: var(--md-tertiary-container);
  font-size: 1.25rem;
}
.cm-reg-box .nu-gratis-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.cm-reg-box .nu-gratis-txt strong {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  font-variation-settings: 'ROND' 80;
}
.cm-reg-box .nu-gratis-txt span { font-size: .86rem; }
.cm-reg-box .nu-gratis-txt b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Card do selo: adicional com switch, logo abaixo dos planos. Mesmo contorno dos cards de plano;
   ligado, ganha o ouro do selo em vez do azul do plano — são duas escolhas diferentes. */
.cm-reg-box .nu-selo {
  margin-top: 4px;
  padding: 18px 20px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--r-xl);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.cm-reg-box .nu-selo.ativo {
  border-color: var(--md-tertiary);
  box-shadow: inset 0 0 0 1px var(--md-tertiary);
  background: linear-gradient(180deg, color-mix(in srgb, var(--md-tertiary-container) 45%, var(--surface)) 0%, var(--surface) 75%);
}
.cm-reg-box .nu-selo-topo { display: flex; align-items: flex-start; gap: 14px; }
.cm-reg-box .nu-selo-ico {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.cm-reg-box .nu-selo-cab { flex: 1; min-width: 0; }
.cm-reg-box .nu-selo-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-tertiary);
}
.cm-reg-box .nu-selo-titulo {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  font-variation-settings: 'ROND' 80;
  margin: 2px 0 4px;
}
.cm-reg-box .nu-selo-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-variant-numeric: tabular-nums; }
.cm-reg-box .nu-selo-preco strong { font-size: 1.25rem; font-weight: 600; color: var(--md-primary); letter-spacing: -.01em; }
.cm-reg-box .nu-selo-preco strong small { font-size: .78rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.cm-reg-box .nu-selo-ciclo { font-size: .82rem; color: var(--ink-soft); }
/* A linha do switch é a decisão do card: fica numa faixa tonal própria. */
.cm-reg-box .nu-selo-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 14px 0 12px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--md-surface-low);
}
.cm-reg-box .nu-selo-switch .custom-control-label { font-weight: 500; color: var(--ink); cursor: pointer; }
.cm-reg-box .nu-selo-switch .custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .35); }
.cm-reg-box .nu-selo-gratis {
  font-size: .76rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.cm-reg-box .nu-selo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}
.cm-reg-box .nu-selo-lista li { display: flex; align-items: flex-start; gap: 9px; font-size: .82rem; line-height: 1.4; color: var(--ink-soft); }
.cm-reg-box .nu-selo-lista i { flex: none; width: 18px; margin-top: 2px; text-align: center; color: var(--md-tertiary); }
/* Sem sociedade e título no passo 1: o card fica apagado, o switch não marca e o aviso oferece o caminho de volta. */
.cm-reg-box .nu-selo-indisp { display: none; }
.cm-reg-box .nu-selo.indisponivel .nu-selo-indisp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* ícone | texto e, embaixo do texto, o link */
  align-items: start;
  gap: 4px 10px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--r);
  background: var(--brand-l);
  color: var(--brand-d);
  font-size: .84rem;
  line-height: 1.4;
}
.cm-reg-box .nu-selo.indisponivel .nu-selo-topo,
.cm-reg-box .nu-selo.indisponivel .nu-selo-lista,
.cm-reg-box .nu-selo.indisponivel .nu-selo-gratis { opacity: .6; }
.cm-reg-box .nu-selo.indisponivel .custom-control-label { color: var(--ink-faint); cursor: not-allowed; }
.cm-reg-box .nu-selo-indisp i { margin-top: 3px; }
.cm-reg-box .nu-selo-indisp .nu-link { grid-column: 2; justify-self: start; }
.cm-reg-box .nu-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--md-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cm-reg-box .nu-link:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; border-radius: 4px; }

/* ===== Pagamento ===== */
/* Resumo do pedido em linhas: plano, selo, hoje (sempre R$ 0,00) e o total da 1ª cobrança. */
.cm-reg-box .nu-resumo {
  background: var(--md-surface-low);
  border-radius: var(--r-lg);
  padding: 14px 18px 12px;
  margin-bottom: 1.1rem;
}
.cm-reg-box .nu-resumo-cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.cm-reg-box .nu-resumo-titulo {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  font-variation-settings: 'ROND' 80;
  margin: 0;
}
.cm-reg-box .nu-resumo-titulo i { color: var(--brand); margin-right: 4px; }
.cm-reg-box .nu-resumo-linhas { margin: 0; }
.cm-reg-box .nu-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.cm-reg-box .nu-linha:first-child { border-top: 0; }
.cm-reg-box .nu-linha dt { min-width: 0; margin: 0; font-weight: 500; color: var(--ink); }
.cm-reg-box .nu-linha dt small { display: block; margin-top: 1px; font-size: .76rem; font-weight: 400; color: var(--ink-soft); }
.cm-reg-box .nu-linha dt small:empty { display: none; }
.cm-reg-box .nu-linha dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.cm-reg-box .nu-linha-hoje dt { color: var(--md-success); }
.cm-reg-box .nu-linha-hoje dt i { margin-right: 4px; }
.cm-reg-box .nu-zero {
  display: inline-block;
  padding: 2px 12px;
  border-radius: var(--r-pill);
  background: var(--md-success-container);
  color: var(--md-on-success-container);
  font-weight: 700;
}
.cm-reg-box .nu-linha-total { border-top: 1px dashed var(--md-outline-variant); }
.cm-reg-box .nu-linha-total dt { font-weight: 600; }
.cm-reg-box .nu-linha-total dd { font-size: 1.15rem; font-weight: 700; color: var(--md-primary); }
.cm-reg-box .nu-resumo-renova { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.cm-reg-box .nu-resumo-renova:empty { display: none; }
/* Nota da pré-autorização: explica o único movimento no cartão hoje (e que ele é desfeito em seguida). */
.cm-reg-box .nu-preaut {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 0;
  padding: 10px 14px;
  border: 1px dashed var(--md-outline-variant);
  border-radius: var(--r);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.cm-reg-box .nu-preaut i { flex: none; margin-top: 3px; color: var(--md-primary); }
.cm-reg-box .nu-preaut strong { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-reg-box .seguranca-nota {
  font-size: .8rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 14px 0 0;
}

/* ===== Telas menores ===== */
@media (max-width: 1199.98px) {
  .cm-reg-box { grid-template-columns: 300px minmax(0, 1fr); }
  .cm-reg-aside { padding: 28px 24px 24px; }
  .cm-reg-box .cm-reg-body { padding: 26px 24px 24px; }
}
@media (max-width: 991.98px) {
  body.login-page:has(.cm-reg-box) { padding: 12px; }
  .cm-reg-box { grid-template-columns: 1fr; gap: 12px; }
  .cm-reg-aside {
    position: relative;   /* não pode ser static: o ornamento absoluto escaparia do overflow */
    top: auto;
    min-height: 0;
    align-items: center;
    text-align: center;
    padding: 24px 20px 20px;
  }
  .cm-reg-aside::after { display: none; }
  .cm-reg-aside::before { width: 240px; height: 240px; right: -90px; top: -90px; }
  .cm-reg-aside h1 { font-size: 1.4rem; margin: 18px 0 6px; }
  .cm-reg-box .wizard-steps { flex-direction: row; justify-content: center; align-items: center; margin: 20px 0 0; }
  .cm-reg-box .wizard-step-ind .rotulo small { display: none; }
  .cm-reg-box .wizard-sep { width: 34px; height: 2px; margin: 0 10px; }
  .cm-reg-vantagens { display: none; }
  .cm-reg-box .cm-reg-foot { margin-top: 16px; }
}
@media (max-width: 767.98px) {
  .cm-reg-box .cm-reg-body { padding: 20px 16px 18px; }
  .cm-reg-box .cm-ident { flex-direction: column; align-items: center; gap: 12px; }
  .cm-reg-box .cm-foto-bloco { flex-direction: row; align-items: center; width: auto; padding-top: 0; gap: 12px; text-align: left; }
  .cm-reg-box .cm-foto-txt .opcional { display: inline; }
  .cm-reg-box .cm-ident-campos { width: 100%; }
  .cm-reg-box .cm-acoes { flex-direction: column-reverse; align-items: stretch; }
  .cm-reg-box .cm-acoes .btn { width: 100%; min-width: 0; }
  .cm-reg-box .nu-gratis { align-items: flex-start; padding: 12px 14px; }
  .cm-reg-box .nu-selo { padding: 16px; }
  .cm-reg-box .nu-selo-lista { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .cm-reg-box .wizard-step-ind .rotulo { display: none; }
  .cm-reg-box .wizard-step-ind.ativo .rotulo { display: flex; }
  /* 375px: o valor que não cabe ao lado do rótulo desce inteiro para a linha de baixo, alinhado à direita
     (quebrado no meio, "R$ 449,40 a cada 6 / meses" ficava ilegível). O total fica na mesma linha: ali
     quem quebra é o rótulo, e o valor em destaque não se parte. */
  .cm-reg-box .nu-resumo { padding: 14px 14px 10px; }
  .cm-reg-box .nu-linha { flex-wrap: wrap; row-gap: 2px; }
  .cm-reg-box .nu-linha dd { margin-left: auto; }
  .cm-reg-box .nu-linha-total { flex-wrap: nowrap; }
  .cm-reg-box .nu-selo-ico { width: 42px; height: 42px; border-radius: 14px; font-size: 1.15rem; }
}


/* ===== Tela: Entrar (Views/Login/Index.cshtml) ===== */
/* Tela dividida: login à esquerda, novidades à direita. O _LayoutLogin é usado também pelo
   cadastro e pela recuperação de senha — daí o :has(.au), que prende a mudança a esta tela.
   Linguagem M3 Expressive: dois painéis arredondados sobre a moldura, formas "cookie"
   do Material como ornamento e o azul/ouro do logo. */
body.login-page:has(.au) { display: block; padding: 0; min-height: 100vh; background: var(--md-frame) none !important; }
/* As duas formas "cookie" fixas do .login-page não valem aqui: os dois painéis já
   trazem as suas. Como são position:fixed com z-index 0, elas ficavam por cima do
   painel branco e tapavam a senha e o botão Entrar. */
body.login-page:has(.au)::before,
body.login-page:has(.au)::after { content: none; display: none; }

.au { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, .9fr) minmax(0, 1.1fr); gap: 12px; padding: 12px; }

/* Painel do formulário */
.au .au-form { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; padding: 40px 36px;
           background: var(--md-surface-lowest); border-radius: 28px; }
.au .au-form-box { width: 100%; max-width: 400px; }
.au .au-logo { display: block; width: max-content; margin: 0 auto; }
.au .au-logo img { width: 132px; height: auto; }
.au .au-form h2 { font-size: 2rem; font-weight: 500; margin: 26px 0 6px; letter-spacing: -.02em; font-variation-settings: 'ROND' 80; }
.au .au-sub { color: var(--ink-soft); margin-bottom: 26px; font-size: .98rem; }
.au .au-form label { font-size: .82rem; font-weight: 500; margin-bottom: 6px; color: var(--ink-soft); }
.au .au-form .input-group { margin-bottom: 4px; display: flex; align-items: stretch; }
.au .au-form .form-control { height: 52px; min-height: 52px; font-size: 1rem; border-radius: 14px; padding-left: 1rem; }
.au .au-form .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
}
.au .au-form .input-group > .input-group-append { display: flex; }
.au .au-form .input-group > .input-group-append > .input-group-text {
  height: 52px;
  min-height: 52px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  border-left: 0 !important;
  font-size: 1.05rem;
  background: var(--md-surface-lowest);
  border: 1px solid var(--md-field);
  border-left: 0;
  color: var(--md-on-surface-variant);
}
.au .au-form .input-group > .input-group-prepend { display: flex; }
.au .au-form .input-group > .input-group-prepend > .input-group-text {
  height: 52px;
  min-height: 52px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
  border-right: 0 !important;
  font-size: 1.05rem;
  background: var(--md-surface-lowest);
  border: 1px solid var(--md-field);
  border-right: 0;
  color: var(--md-on-surface-variant);
}
.au .au-form .input-group > .input-group-prepend + .form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 0 !important;
}
.au .au-form .input-group:focus-within { border-radius: 14px; }
.au .au-form .input-group:focus-within .form-control,
.au .au-form .input-group:focus-within .input-group-text {
  border-color: var(--md-primary) !important;
}
.au .au-campo { margin-bottom: 16px; }
.au .au-olho { cursor: pointer; }
.au .au-lembrar { display: none; }
.au .au-entrar { height: 52px; font-weight: 500; font-size: 1rem; margin-top: 10px; }
.au .au-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: .9rem; }
.au .au-links a { padding: 8px 14px; border-radius: var(--r-pill); font-weight: 500; }
.au .au-links a:hover { background: rgba(var(--brand-rgb), .08); }
.au .au-novo { margin-top: 26px; padding: 14px 14px 14px 20px; border-radius: 20px; background: var(--md-surface-low); color: var(--ink-soft); font-size: .92rem;
           display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.au .au-novo a { font-weight: 500; padding: 8px 16px; border-radius: var(--r-pill); background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.au .au-novo a:hover { background: #CCDAEC; color: var(--md-on-secondary-container); }
.au .au-rodape { text-align: center; margin-top: 26px; }
.au .au-rodape img { width: 70px; opacity: .7; }
.au .au-form .alert h5 { font-size: .92rem; font-family: var(--font-ui); font-weight: 600; margin-bottom: 2px; }

/* Painel de novidades: contêiner tonal azul com formas do Material */
.au .au-banner { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; color: var(--md-on-primary-container);
             padding: 32px 48px 30px; border-radius: 28px; background: var(--md-primary-container);
             display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; isolation: isolate; }
.au .au-banner::before, .au .au-banner::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
             -webkit-mask: url('/img/formas/cookie-9.svg') center / contain no-repeat; mask: url('/img/formas/cookie-9.svg') center / contain no-repeat; }
.au .au-banner::before { width: 520px; height: 520px; right: -170px; top: -190px; background: #F3DFAA; opacity: .75;
                     animation: au-gira 60s linear infinite; }
.au .au-banner::after { width: 380px; height: 380px; left: -150px; bottom: -150px; background: #B7D1F2;
                    -webkit-mask-image: url('/img/formas/cookie-12.svg'); mask-image: url('/img/formas/cookie-12.svg');
                    animation: au-gira 80s linear infinite reverse; }
@keyframes au-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .au .au-banner::before, .au .au-banner::after { animation: none; } }
.au .au-marca { font-family: var(--font-head); font-size: 1.35rem; font-weight: 600; color: var(--md-on-primary-container); letter-spacing: -.01em; font-variation-settings: 'ROND' 80; }
.au .au-marca b { color: var(--md-primary); }
.au .au-centro { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.au .au-eyebrow { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 6px 14px 6px 10px; border-radius: var(--r-pill);
              background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); font-size: .82rem; font-weight: 500; }
.au .au-eyebrow i { color: var(--md-tertiary); }
.au .au-banner h1 { font-family: var(--font-head); color: #0B2F4E; font-size: clamp(1.9rem, min(2.8vw, 5.2vh), 2.8rem); font-weight: 500; line-height: 1.12; letter-spacing: -.025em;
                margin: 16px auto 12px; max-width: 700px; text-wrap: balance; font-variation-settings: 'ROND' 100; }
.au .au-banner h1 em { font-style: normal; color: var(--md-primary); }
.au .au-lead { color: #2B4A66; font-size: 1.02rem; line-height: 1.55; max-width: 560px; margin: 0 auto; text-wrap: pretty; }
.au .au-palco { position: relative; width: min(100%, 540px, 52vh); }
.au .au-palco .cm-slides-legenda { margin-top: 12px; }
.au .au-palco .cm-slides-legenda b { color: #0B2F4E; font-weight: 600; }
.au .au-palco .cm-slides-legenda span { color: #2B4A66; }
.au .au-palco .cm-slides-pontos { justify-content: center; color: var(--md-primary); }
.au .au-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; }
.au .au-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: 10px; font-size: .84rem; font-weight: 500;
           background: rgba(255,255,255,.62); color: var(--md-on-primary-container); }
.au .au-chip i { color: var(--md-primary); }

/* Notebook: tela larga mas baixa (1366x768 e afins). Em pé o layout rola, mas aqui
   os dois painéis ficam lado a lado e o formulário inteiro precisa caber sem rolar —
   então os respiros verticais encolhem. Só espaçamento: nada muda de lugar. */
@media (min-width: 992px) and (max-height: 800px) {
  .au { padding: 8px; gap: 8px; }
  .au .au-form { padding: 20px 32px; }
  .au .au-logo img { width: 104px; }
  .au .au-form h2 { font-size: 1.7rem; margin: 14px 0 4px; }
  .au .au-sub { margin-bottom: 16px; font-size: .92rem; }
  .au .au-campo { margin-bottom: 10px; }
  /* Seletor do ícone igual ao da regra principal (52px): com um mais fraco, o campo
     encolhia e a caixa do ícone não — o degrau no canto do e-mail e da senha. */
  .au .au-form .form-control,
  .au .au-form .input-group > .input-group-append > .input-group-text,
  .au .au-form .input-group > .input-group-prepend > .input-group-text { height: 46px; min-height: 46px; }
  .au .au-entrar { height: 46px; margin-top: 6px; }
  .au .au-links { margin-top: 6px; }
  .au .au-novo { margin-top: 14px; padding: 10px 10px 10px 18px; }
  .au .au-rodape { margin-top: 14px; }
  .au .au-rodape img { width: 58px; }

  .au .au-banner { padding: 20px 32px 18px; gap: 12px; }
  .au .au-centro { gap: 14px; }
  .au .au-banner h1 { margin: 10px auto 8px; }
  .au .au-lead { font-size: .95rem; }
  .au .au-palco { width: min(100%, 540px, 42vh); }
  .au .au-chips { gap: 6px; }
  .au .au-chip { height: 30px; font-size: .8rem; }
}

@media (max-width: 991.98px) {
  .au { grid-template-columns: 1fr; padding: 8px; gap: 8px; }
  .au .au-form { grid-column: 1; grid-row: 1; padding: 30px 20px 26px; border-radius: 24px; }
  .au .au-banner { grid-column: 1; grid-row: 2; padding: 30px 20px 28px; border-radius: 24px; }
  .au .au-banner h1 { font-size: 1.7rem; }
  .au .au-palco { width: min(100%, 540px); }
}


/* ===== Tela: Identidade Visual (Views/MeuConsultorio/IdentidadeVisual.cshtml) =====
   A prévia A4 é conteúdo: a cor escolhida pelo médico continua entrando pelo
   elemento (--accent no #stage, também escrita pelo JS a cada troca de cor).
   Aqui fica só a moldura da tela e o desenho da folha. */
.tela-identidade .iv-palco { background: var(--md-frame); }
.tela-identidade .iv-controles { gap: .5rem; }
.tela-identidade .iv-swatches { gap: .4rem; }
.tela-identidade .iv-img { width: 100%; height: 100%; object-fit: contain; display: none; }

.tela-identidade .iv-stage { position: relative; width: 100%; max-width: 460px; aspect-ratio: 595 / 842;
    background: #fff; box-shadow: 0 6px 22px rgba(2,6,23,.18); border-radius: 4px; overflow: hidden;
    user-select: none; touch-action: none; }
.tela-identidade .iv-topbar { height: 1.6%; background: var(--accent); }
.tela-identidade .iv-header { position: absolute; top: 4.5%; left: 4%; right: 4%; height: 12%;
    background: color-mix(in srgb, var(--accent) 8%, #fff); border-radius: 8px;
    display: flex; align-items: center; padding: 0 3%; gap: 4%; }
.tela-identidade .iv-mono { width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--accent);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .7rem; }
.tela-identidade .iv-headtext { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.tela-identidade .iv-line { display: block; height: 6px; border-radius: 3px; background: #d4dae2; }
.tela-identidade .iv-line.strong { background: #aeb7c2; }
.tela-identidade .iv-line.thin { height: 4px; }
.tela-identidade .iv-line.center { margin: 4px auto 0; }
.tela-identidade .iv-line.mt2 { margin-top: 6px; }
.tela-identidade .iv-stage .w28 { width: 28%; }
.tela-identidade .iv-stage .w40 { width: 40%; }
.tela-identidade .iv-stage .w45 { width: 45%; }
.tela-identidade .iv-stage .w50 { width: 50%; }
.tela-identidade .iv-stage .w55 { width: 55%; }
.tela-identidade .iv-stage .w60 { width: 60%; }
.tela-identidade .iv-stage .w70 { width: 70%; }
.tela-identidade .iv-stage .w80 { width: 80%; }
.tela-identidade .iv-stage .w85 { width: 85%; }
.tela-identidade .iv-stage .w88 { width: 88%; }
.tela-identidade .iv-stage .w90 { width: 90%; }
.tela-identidade .iv-title { text-align: center; font-weight: 800; letter-spacing: 1px; color: var(--accent);
    margin-top: 19%; font-size: .85rem; }
.tela-identidade .iv-titlerule { display: flex; align-items: center; justify-content: center; gap: 30%; margin-top: 3px; }
.tela-identidade .iv-titlerule span { height: 2px; width: 14%; background: var(--accent); border-radius: 2px; }
.tela-identidade .iv-frame { position: absolute; top: 27%; left: 6%; right: 6%; bottom: 22%;
    border: 1px solid #e2e8f0; border-radius: 10px; background: #fcfdfe;
    padding: 5% 5% 0; overflow: hidden; }
.tela-identidade .iv-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-28deg);
    font-weight: 800; font-size: 1.5rem; letter-spacing: 2px; white-space: nowrap;
    color: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; }
.tela-identidade .iv-label { font-size: .42rem; font-weight: 700; color: var(--accent); letter-spacing: .5px; }
.tela-identidade .iv-divider { height: 1px; background: #e7ecf1; margin: 7px 0 9px; }
.tela-identidade .iv-frame .iv-line { margin-bottom: 7px; }
.tela-identidade .iv-sign { position: absolute; bottom: 7%; left: 0; right: 0; }
.tela-identidade .iv-signline { width: 50%; height: 1px; background: #94a3b8; margin: 0 auto 6px; }
.tela-identidade .iv-footer { position: absolute; bottom: 4.4%; left: 6%; right: 6%; height: 1px; background: #e2e8f0; }

.tela-identidade .iv-drag { position: absolute; cursor: grab; border: 1.5px dashed transparent; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; }
.tela-identidade .iv-drag:hover { border-color: color-mix(in srgb, var(--accent) 60%, #fff); background: rgba(255,255,255,.25); }
.tela-identidade .iv-drag.dragging { cursor: grabbing; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.tela-identidade .iv-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; color: #64748b; background: rgba(241,245,249,.9);
    border-radius: 6px; border: 1px solid #e2e8f0; }
.tela-identidade .iv-ph i { font-size: 1.1rem; }
.tela-identidade .iv-ph small { font-size: .5rem; }
.tela-identidade .iv-ph-selo { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, #fff); }
.tela-identidade .iv-resize { position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--accent); border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(2,6,23,.35); cursor: nwse-resize; touch-action: none; z-index: 5; }
.tela-identidade .iv-resize::after { content: ""; position: absolute; inset: 4px; border-right: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff; border-radius: 0 0 2px 0; }

.tela-identidade .iv-colorinput { width: 44px; height: 34px; padding: 3px; border: 1px solid var(--md-field); border-radius: var(--r-sm); background: var(--md-surface-lowest); cursor: pointer; }
.tela-identidade .iv-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--md-surface-lowest);
    box-shadow: 0 0 0 1px var(--md-outline-variant); cursor: pointer; }
.tela-identidade .iv-swatch.active { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.08); }


/* ===== Modal: o CertMed mudou (Views/Shared/_NovidadesCertMed.cshtml) ===== */
#modalNovidadesCertMed .modal-content { border: 0; border-radius: var(--r-xl); overflow: hidden; }
#modalNovidadesCertMed .nv-fechar { position: absolute; top: 12px; right: 16px; z-index: 3; font-size: 1.6rem; color: var(--ink-faint); opacity: 1; }
#modalNovidadesCertMed .nv-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }

/* Painel da arte: contêiner tonal azul com as formas "cookie" do Material — o mesmo tratamento
   do painel de novidades da tela de login. As formas são só ::before/::after. */
#modalNovidadesCertMed .nv-arte { position: relative; overflow: hidden; isolation: isolate; color: var(--md-on-primary-container);
           margin: 10px 0 10px 10px; border-radius: 22px; padding: 32px 30px 24px; background: var(--md-primary-container); }
#modalNovidadesCertMed .nv-arte::before, #modalNovidadesCertMed .nv-arte::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
           -webkit-mask: url('/img/formas/cookie-9.svg') center / contain no-repeat; mask: url('/img/formas/cookie-9.svg') center / contain no-repeat; }
#modalNovidadesCertMed .nv-arte::before { width: 440px; height: 440px; right: -170px; top: -180px; background: #F3DFAA; opacity: .75;
                   animation: nv-gira 60s linear infinite; }
#modalNovidadesCertMed .nv-arte::after { width: 320px; height: 320px; left: -140px; bottom: -140px; background: #B7D1F2;
                  -webkit-mask-image: url('/img/formas/cookie-12.svg'); mask-image: url('/img/formas/cookie-12.svg');
                  animation: nv-gira 80s linear infinite reverse; }
@keyframes nv-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #modalNovidadesCertMed .nv-arte::before, #modalNovidadesCertMed .nv-arte::after { animation: none; }
}
#modalNovidadesCertMed .nv-arte .cm-slides-legenda b { color: #0B2F4E; font-weight: 600; }
#modalNovidadesCertMed .nv-arte .cm-slides-legenda span { color: #2B4A66; opacity: 1; }
#modalNovidadesCertMed .nv-arte .cm-slides-pontos { color: var(--md-primary); }

#modalNovidadesCertMed .nv-texto { padding: 30px 30px 22px; display: flex; flex-direction: column; }
/* Nunca passa da altura da tela: no desktop a coluna de texto rola por dentro */
@media (min-width: 992px) {
  #modalNovidadesCertMed .modal-dialog { max-width: 940px; }
  #modalNovidadesCertMed .nv-grid { max-height: calc(100vh - 3rem); }
  #modalNovidadesCertMed .nv-arte { display: flex; flex-direction: column; justify-content: center; }
  #modalNovidadesCertMed .nv-texto { overflow-y: auto; min-height: 0; }
}
#modalNovidadesCertMed .nv-eyebrow { display: inline-flex; align-items: center; gap: 8px; width: max-content; padding: 6px 14px 6px 10px; border-radius: var(--r-pill);
              background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); font-size: .82rem; font-weight: 500; }
#modalNovidadesCertMed .nv-eyebrow i { color: var(--md-tertiary); }
#modalNovidadesCertMed .nv-texto h2 { font-size: 1.8rem; font-weight: 500; line-height: 1.1; margin: 12px 0 8px; letter-spacing: -.025em; font-variation-settings: 'ROND' 100; }
#modalNovidadesCertMed .nv-texto h2 em { font-style: normal; color: var(--md-primary); }
#modalNovidadesCertMed .nv-lead { color: var(--ink-soft); font-size: .98rem; margin-bottom: 14px; max-width: 72ch; }
#modalNovidadesCertMed .nv-lista { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 9px; }
#modalNovidadesCertMed .nv-lista li { display: flex; gap: 12px; align-items: center; font-size: .92rem; }
#modalNovidadesCertMed .nv-lista i { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 1rem; }
#modalNovidadesCertMed .nv-continua { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--r); padding: 10px 14px; background: var(--success-l); color: var(--md-on-success-container); font-size: .88rem; }
#modalNovidadesCertMed .nv-continua i { margin-top: 3px; }
#modalNovidadesCertMed .nv-acoes { margin-top: auto; padding-top: 20px; display: grid; gap: 8px; }
#modalNovidadesCertMed .nv-acoes .btn-lg { padding: .9rem 1rem; font-size: 1.04rem; font-weight: 500; border-radius: var(--r-pill); }
#modalNovidadesCertMed .nv-acoes .btn-outline-primary { border-radius: var(--r-pill); font-weight: 500; }
@media (max-width: 991.98px) {
  #modalNovidadesCertMed .nv-grid { grid-template-columns: 1fr; }
  #modalNovidadesCertMed .nv-arte { margin: 8px 8px 0; border-radius: 20px; padding: 22px 18px 16px; }
  #modalNovidadesCertMed .nv-texto { padding: 22px 18px 18px; }
  #modalNovidadesCertMed .nv-texto h2 { font-size: 1.6rem; }
}


/* ############################################################################
   ASSINATURA DE DOCUMENTOS
   ############################################################################ */

/* ============================================================================
   CertMed — partes/assinatura.css
   Telas do módulo de assinatura:
     A. Meu Painel / Meus Dados      → Views/MedicoPerfil/Index.cshtml   (.mp-perfil)
     B. Visualizador de selo no PDF  → #assinaturaModal + Views/Assinar/Visualizar.cshtml
     C. Validação pública do documento → Views/ValidarDocumentos/Index.cshtml (.vd-validar)

   Só mora aqui o que é próprio destas telas. Cor, raio, sombra, tipografia de
   botão, cartão, tabela, diálogo, rótulo e alerta vêm do certmed-ui.css — nada
   é copiado para cá. Valor calculado em tempo de execução (posição e tamanho do
   selo sobre o documento) continua no style do elemento: aquilo é dado, não
   estilo.
   ============================================================================ */

/* ============================================================================
   A. MEU PAINEL / MEUS DADOS (MedicoPerfil/Index)
   ============================================================================ */

/* Foto do perfil: a própria imagem é o botão de troca (véu ao passar o mouse) */
.mp-perfil .profile-image-container { position: relative; display: inline-block; margin-bottom: 1rem; }
.mp-perfil .profile-image {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--surface); box-shadow: var(--sh);
  cursor: pointer; transition: box-shadow var(--t);
}
.mp-perfil .profile-image:hover { box-shadow: var(--sh-lg); }
.mp-perfil .profile-image-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--md-scrim), .6);
  opacity: 0; transition: opacity var(--t);
}
.mp-perfil .profile-image-container:hover .profile-image-overlay { opacity: 1; }
/* o véu é escuro: o rótulo dentro dele não segue a cor de label do sistema */
.mp-perfil .profile-image-overlay label {
  display: grid; place-items: center; gap: 2px; margin: 0; cursor: pointer;
  color: #fff; font-size: .75rem; line-height: 1.2; text-align: center;
}
.mp-perfil .profile-image-overlay i { font-size: 1.6rem; }

/* Edição do RQE em linha, na tabela de sociedades */
.mp-perfil .rqe-input { min-width: 100px; }

/* Modal de envio: "Selecionar arquivo" é um rótulo com cara de botão de bloco */
#uploadModal .mp-upload-arquivo { padding: 1rem; font-size: 1.05rem; }

/* Miniatura do selo na lista de selos disponíveis */
#selosDisponiveisModal .mp-selo-thumb { width: 50px; height: 50px; object-fit: cover; border-radius: var(--r-xs); }

/* Histórico de envios (nomes exclusivos desta tela; o JS troca btn-detalhes-envio
   por btn-warning e de volta, então ela só define as variáveis do botão) */
#modalEnvioEmails .btn-detalhes-envio {
  --btn-bg: var(--md-primary-container); --btn-fg: var(--md-on-primary-container); --btn-on: 11,71,118;
}
#modalEnvioEmails .badge-whatsapp,
#modalDetalhesEnvios .badge-whatsapp { background: var(--md-success-container); color: var(--md-on-success-container); }
#modalEnvioEmails .badge-email,
#modalDetalhesEnvios .badge-email { background: var(--md-primary-container); color: var(--md-on-primary-container); }
#modalEnvioEmails .badge-ambos,
#modalDetalhesEnvios .badge-ambos { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }

/* ============================================================================
   B. VISUALIZADOR: POSICIONAR O SELO SOBRE O PDF
   Vale para o modal de assinatura do painel (#assinaturaModal) e para a tela
   Assinar/Visualizar — as duas montam o mesmo #pdf-container pelo pdf.js.
   ============================================================================ */
#pdf-container .pdf-page-container { margin-bottom: 20px; }
/* tracejado marca a área do selo por cima da página renderizada */
#pdf-container .image-overlay img { border: 1px dashed var(--md-outline); }

/* O selo: posição e tamanho vêm do style inline (arrastar e redimensionar) */
#pdf-container .seal-container { position: absolute; cursor: move; }
#pdf-container .seal-container img { width: 100%; height: 100%; display: block; }
#pdf-container .resize-handle {
  position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px;
  background: var(--brand); border: 2px solid var(--surface); border-radius: 3px;
  cursor: se-resize; z-index: 20; box-shadow: var(--sh-sm);
}
#pdf-container .seal-drag-prompt {
  position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%);
  color: var(--brand); font-size: 14px; font-weight: 700;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .4s var(--ease);
  /* halo branco: a legenda cai sobre o documento, que pode ter qualquer fundo */
  text-shadow: 0 0 5px #fff, 0 0 3px #fff, 0 0 2px #fff;
}

/* A folha do PDF fica centrada no corpo do diálogo */
#assinaturaModal .modal-body { text-align: center; }
#assinaturaModal #pdf-container {
  display: inline-block; max-width: 100%; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
#assinaturaModal #pdf-container embed,
#assinaturaModal #pdf-container iframe { width: 100%; height: 80vh; }

/* Mesmas ações em botões de ícone, fixas na tela enquanto o documento rola */
#assinaturaModal .floating-action-buttons { position: fixed; right: 30px; bottom: 30px; z-index: 9999; }
#assinaturaModal .floating-button-group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#assinaturaModal .btn-floating {
  width: 56px; height: 56px; padding: 0; border-radius: 16px;
  display: inline-grid; place-items: center; font-size: 18px; box-shadow: var(--sh);
}
#assinaturaModal .btn-floating:hover { box-shadow: var(--sh-lg); }
@media (max-width: 767.98px) {
  #assinaturaModal .floating-action-buttons { right: 16px; bottom: 16px; }
  #assinaturaModal .floating-button-group { gap: 8px; }
  #assinaturaModal .btn-floating { width: 48px; height: 48px; font-size: 16px; border-radius: 14px; }
}

/* Dica dos botões de ícone (o JS escreve o texto e calcula left/top) */
#custom-tooltip {
  position: fixed; z-index: 10001; width: 200px; padding: 10px 14px;
  border-radius: 8px; font-size: .82rem; font-weight: 500; text-align: center; white-space: nowrap;
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s var(--ease);
  user-select: none;
}
#custom-tooltip::before {
  content: ''; position: absolute; top: 50%; right: -8px; transform: translateY(-50%);
  width: 0; height: 0; border-left: 8px solid var(--md-inverse-surface);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
#custom-tooltip.show { opacity: 1; visibility: visible; }
@media (max-width: 767.98px) { #custom-tooltip { width: 168px; padding: 8px 12px; font-size: .78rem; } }

/* ============================================================================
   C. VALIDAR DOCUMENTO (público)
   ============================================================================ */

/* Campo da chave: bloco estreito e centrado, texto monoespaçado */
.vd-validar .vd-chave { max-width: 500px; }
.vd-validar .vd-chave .form-control { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }

/* Filete que diz de imediato o que o cartão traz */
.vd-validar .valid-document { border-left: 5px solid var(--success); }
.vd-validar .invalid-document { border-left: 5px solid var(--danger); }
.vd-validar .vd-etapa2 { border-left: 5px solid var(--brand); }
/* A etapa 2 acompanha a rolagem ao lado do resultado (só quando há duas colunas) */
@media (min-width: 992px) { .vd-validar .vd-sticky { position: sticky; top: 1.5rem; } }

/* Foto do médico */
.vd-validar .vd-foto { width: 100px; height: 100px; object-fit: cover; }
@media (max-width: 767.98px) { .vd-validar .vd-foto { width: 80px; height: 80px; } }

/* Pares rótulo/valor do médico e do documento (montados pelo JS) */
.vd-validar .info-item { padding: .3rem 0; border-bottom: 1px solid var(--line-2); }
.vd-validar .info-item:last-child { border-bottom: 0; }
.vd-validar .info-label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.vd-validar .info-value { font-size: .85rem; color: var(--ink); }

/* Sociedades do médico (cartões montados pelo JS) */
.vd-validar .soc-card { background: var(--surface-2); border-radius: var(--r); }
.vd-validar .soc-icon {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px;
  display: inline-grid; place-items: center;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.vd-validar .soc-badge {
  font-size: .75rem; font-weight: 600; border-radius: var(--r-pill); padding: .25rem .6rem;
  background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
}

/* Hashes da conferência de integridade */
.vd-validar .font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }


/* ############################################################################
   CENTRAL DE VÍDEOS
   ############################################################################ */

/* ===== Tela: Central de vídeos (Views/Tutoriais/Index.cshtml) =====
   Duas partes: a GALERIA (tokens do tema — acompanha claro/escuro) e o PLAYER,
   que é escuro nos dois temas de propósito: é a convenção de player de vídeo e
   o que menos disputa atenção com a imagem. */

.tela-tutoriais { max-width: 1240px; }

/* ----- Topo: o que é a central, a busca e o institucional ----- */
.tv .tv-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); padding: 30px 32px; margin-bottom: 20px;
  display: flex; gap: 30px; align-items: center; flex-wrap: wrap;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.tv .tv-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 380px; height: 380px; right: -130px; top: -190px;
  background: var(--md-tertiary-container); opacity: .8;
  -webkit-mask: url('/img/formas/cookie-9.svg') center / contain no-repeat;
          mask: url('/img/formas/cookie-9.svg') center / contain no-repeat;
}
.tv .tv-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 250px; height: 250px; left: -90px; bottom: -160px;
  background: var(--md-surface-lowest); opacity: .45;
  -webkit-mask: url('/img/formas/cookie-12.svg') center / contain no-repeat;
          mask: url('/img/formas/cookie-12.svg') center / contain no-repeat;
}
.tv .tv-hero-txt { flex: 1 1 420px; min-width: 0; }
.tv .tv-eyebrow {
  display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill); font-size: .82rem; font-weight: 500;
  background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
}
.tv .tv-eyebrow i { color: var(--md-tertiary); }
.tv .tv-hero h1 {
  font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 500; line-height: 1.15;
  letter-spacing: -.02em; margin: 14px 0 8px; font-variation-settings: 'ROND' 100;
}
.tv .tv-hero p { margin: 0; max-width: 62ch; opacity: .88; }

/* Campo de busca — pílula clara sobre o contêiner tonal */
.tv .tv-busca { position: relative; margin-top: 18px; max-width: 460px; }
.tv .tv-busca > i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--md-on-surface-variant); pointer-events: none; font-size: 1.05rem;
}
.tv .tv-busca-input {
  width: 100%; height: 48px; border: 0; border-radius: var(--r-pill);
  padding: 0 44px 0 46px; font: inherit; font-size: .95rem;
  background: var(--md-surface-lowest); color: var(--md-on-surface);
  box-shadow: var(--sh-sm); transition: box-shadow var(--t);
}
.tv .tv-busca-input:focus { outline: 0; box-shadow: 0 0 0 2px var(--md-primary), var(--sh); }
.tv .tv-busca-input::-webkit-search-cancel-button { display: none; }
.tv .tv-busca-x {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent;
  color: var(--md-on-surface-variant); display: grid; place-items: center; cursor: pointer;
}
.tv .tv-busca-x:hover { background: var(--md-surface-high); }

/* O institucional, ao lado do texto */
.tv .tv-destaque { flex: 0 1 400px; min-width: 260px; }
.tv .tv-destaque-txt { padding: 12px 2px 0; }
.tv .tv-tag {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--md-surface-lowest); color: var(--md-primary);
}
.tv .tv-destaque-txt h2 { font-size: 1.15rem; font-weight: 500; margin: 8px 0 3px; font-variation-settings: 'ROND' 80; }
.tv .tv-destaque-txt p { margin: 0; font-size: .87rem; opacity: .85; }

/* ----- Capa (serve ao destaque e aos cartões) ----- */
.tv .tv-capa {
  display: block; position: relative; width: 100%; padding: 0; border: 0;
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  background: var(--md-surface-highest); aspect-ratio: 16 / 9;
  box-shadow: var(--sh); transition: transform var(--t), box-shadow var(--t);
}
.tv .tv-capa img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease); }
.tv .tv-capa:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 3px; }
.tv .tv-capa-veu {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,16,26,0) 45%, rgba(8,16,26,.62) 100%);
}
.tv .tv-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.86);
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--md-primary); font-size: 1.4rem;
  box-shadow: 0 6px 22px rgba(8,16,26,.35);
  opacity: 0; transition: opacity var(--t), transform .28s var(--ease-spring);
}
.tv .tv-play i { margin-left: 3px; }
.tv .tv-dur {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 7px;
  background: rgba(8,16,26,.82); color: #fff; font-size: .76rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tv .tv-selo-visto {
  position: absolute; left: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .75rem;
  background: var(--md-success); color: #fff; box-shadow: 0 2px 8px rgba(8,16,26,.35);
}
/* Barra de "onde você parou" — a largura vem do JS */
.tv .tv-retomada { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.35); }
.tv .tv-retomada > i { display: block; height: 100%; width: 0; background: var(--md-error); }

.tv .tv-card:hover .tv-capa,
.tv .tv-destaque:hover .tv-capa { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.tv .tv-capa:hover img { transform: scale(1.045); }
.tv .tv-capa:hover .tv-play,
.tv .tv-capa:focus-visible .tv-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (hover: none) {
  .tv .tv-play { opacity: 1; transform: translate(-50%, -50%) scale(1); width: 52px; height: 52px; font-size: 1.15rem; }
}

/* ----- Chips de assunto ----- */
.tv .tv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 2px 18px; }
.tv .tv-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px;
  border: 1px solid var(--md-outline-variant); border-radius: var(--r-pill);
  background: transparent; color: var(--md-on-surface-variant);
  font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.tv .tv-chip i { font-size: .95rem; }
.tv .tv-chip:hover { background: var(--md-surface-high); color: var(--md-on-surface); }
/* Ativo com o tonal do primário — o mesmo destaque do item ligado da gaveta, e com
   contraste suficiente nos dois temas (o secundário some no escuro). */
.tv .tv-chip.ativo {
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  border-color: transparent; font-weight: 600;
}

.tv .tv-nada {
  text-align: center; color: var(--ink-soft); padding: 42px 16px;
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-sm);
}
.tv .tv-nada > i { display: block; font-size: 1.8rem; margin-bottom: 10px; color: var(--md-outline); }

/* ----- Seções e grade ----- */
.tv .tv-sec {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-sm);
  padding: 22px 24px 26px; margin-bottom: 18px; scroll-margin-top: 80px;
}
.tv .tv-sec-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.tv .tv-sec-ico {
  flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 1.05rem;
}
.tv .tv-sec-head h2 { font-size: 1.25rem; font-weight: 500; margin: 0 0 2px; font-variation-settings: 'ROND' 80; }
.tv .tv-sec-head p { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.tv .tv-sec-conta { margin-left: auto; flex: none; color: var(--ink-soft); font-size: .8rem; white-space: nowrap; }

.tv .tv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px 18px; }
.tv .tv-card { min-width: 0; }
.tv .tv-card-txt { padding: 12px 2px 0; }
.tv .tv-card-txt h3 { font-size: 1.02rem; font-weight: 500; margin: 0 0 4px; line-height: 1.3; }
.tv .tv-card-txt p { margin: 0 0 8px; font-size: .85rem; color: var(--ink-soft); line-height: 1.45; }
.tv .tv-quem {
  display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 500;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--md-surface-high); color: var(--md-on-surface-variant);
}
.tv .tv-card.tv-assistido .tv-card-txt h3 { color: var(--ink-soft); }

.tv .tv-rodape { text-align: center; color: var(--ink-soft); font-size: .88rem; margin: 8px 0 0; }

@media (max-width: 767.98px) {
  .tv .tv-hero { padding: 22px 18px; gap: 20px; }
  /* No celular o topo empilha e as formas passariam por trás do título: encolhem e saem. */
  .tv .tv-hero::before { width: 230px; height: 230px; right: -90px; top: -130px; }
  .tv .tv-hero::after { display: none; }
  .tv .tv-sec { padding: 18px 14px 20px; }
  .tv .tv-grade { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 14px; }
  .tv .tv-sec-conta { display: none; }
}

/* ============================ O PLAYER ============================ */
/* Fica acima de tudo (gaveta 1040, backdrop do Bootstrap 1050, indicador 2000). */

body.tv-travado { overflow: hidden; }

.tv-teatro { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 24px; }
.tv-teatro[hidden] { display: none; }
.tv-teatro-fundo {
  position: absolute; inset: 0; background: rgba(4, 9, 16, .78);
  opacity: 0; transition: opacity .22s var(--ease); backdrop-filter: blur(3px);
}
.tv-teatro.tv-aberto .tv-teatro-fundo { opacity: 1; }
.tv-teatro-caixa {
  position: relative; width: min(1180px, 100%); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #101720; color: #E8EDF3; border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .24s var(--ease), transform .3s var(--ease-spring);
}
.tv-teatro.tv-aberto .tv-teatro-caixa { opacity: 1; transform: none; }

.tv-teatro-topo { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px 12px; }
.tv-teatro-topo h2 { font-size: 1.12rem; font-weight: 500; margin: 0; color: #fff; font-variation-settings: 'ROND' 80; }
.tv-teatro-topo p { margin: 3px 0 0; font-size: .85rem; color: #9FB0C3; max-width: 92ch; }
.tv-fechar {
  flex: none; margin-left: auto; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #E8EDF3; cursor: pointer; display: grid; place-items: center;
  transition: background var(--t);
}
.tv-fechar:hover { background: rgba(255,255,255,.18); }
.tv-fechar:focus-visible { outline: 2px solid #9FCAFF; outline-offset: 2px; }

/* ----- Palco ----- */
.tv-palco {
  position: relative; background: #000; aspect-ratio: 16 / 9; width: 100%;
  min-height: 0; overflow: hidden; user-select: none;
}
.tv-palco video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.tv-palco.tv-cheio { aspect-ratio: auto; height: 100%; border-radius: 0; }
.tv-palco.tv-limpo { cursor: none; }

.tv-carregando { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tv-carregando[hidden] { display: none; }
.tv-carregando > span {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: tv-gira .9s linear infinite;
}
@keyframes tv-gira { to { transform: rotate(360deg); } }

.tv-grande {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.95); color: #11609C; font-size: 1.9rem;
  box-shadow: 0 10px 34px rgba(0,0,0,.45);
  display: grid; place-items: center; transition: transform .22s var(--ease-spring), background var(--t);
}
.tv-grande[hidden] { display: none; }
.tv-grande i { margin-left: 5px; }
.tv-grande:hover { transform: translate(-50%, -50%) scale(1.06); }

.tv-aviso {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px;
  text-align: center; color: #E8EDF3; background: rgba(8,14,22,.9); padding: 20px;
}
.tv-aviso[hidden] { display: none; }
.tv-aviso > i { font-size: 2rem; color: #FFA954; margin-bottom: 6px; }
.tv-aviso span { color: #9FB0C3; font-size: .88rem; }

/* Pulso de +10 s / −10 s */
.tv-pulso {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(8,14,22,.6); color: #fff; font-size: 1.5rem; pointer-events: none;
}
.tv-pulso[hidden] { display: none; }
.tv-pulso.tv-pulsando { animation: tv-pulsa .5s var(--ease) forwards; }
@keyframes tv-pulsa {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.8); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
}

/* ----- Barra de controles ----- */
.tv-ctrl {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.88) 100%);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.tv-palco.tv-limpo .tv-ctrl { opacity: 0; transform: translateY(8px); pointer-events: none; }

.tv-linha { position: relative; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.tv-linha:focus-visible { outline: 2px solid #9FCAFF; outline-offset: 2px; border-radius: 4px; }
.tv-linha-trilho, .tv-linha-buffer, .tv-linha-feito {
  position: absolute; left: 0; height: 5px; border-radius: 3px; transition: height .15s var(--ease);
}
.tv-linha-trilho { right: 0; background: rgba(255,255,255,.28); }
.tv-linha-buffer { width: 0; background: rgba(255,255,255,.45); }
.tv-linha-feito { width: 0; background: var(--md-primary); }
.tv-linha-feito > i {
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%) scale(0);
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.5); transition: transform .16s var(--ease-spring);
}
.tv-linha:hover .tv-linha-trilho,
.tv-linha:hover .tv-linha-buffer,
.tv-linha:hover .tv-linha-feito { height: 7px; }
.tv-linha:hover .tv-linha-feito > i, .tv-linha:focus-visible .tv-linha-feito > i { transform: translateY(-50%) scale(1); }
.tv-linha-dica {
  position: absolute; bottom: 22px; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px;
  background: rgba(8,14,22,.92); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap;
}
.tv-linha-dica[hidden] { display: none; }

.tv-botoes { display: flex; align-items: center; gap: 2px; padding-top: 2px; }
.tv-b {
  width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: #fff; font-size: 1rem; display: grid; place-items: center;
  transition: background var(--t), transform .12s var(--ease);
}
.tv-b:hover { background: rgba(255,255,255,.16); }
.tv-b:active { transform: scale(.92); }
.tv-b:focus-visible { outline: 2px solid #9FCAFF; outline-offset: 1px; }
.tv-b-vel { width: auto; min-width: 46px; border-radius: var(--r-pill); font-size: .82rem; font-weight: 600; padding: 0 10px; }

.tv-som { display: flex; align-items: center; }
.tv-volume {
  width: 0; opacity: 0; height: 4px; margin: 0; padding: 0; cursor: pointer;
  transition: width .22s var(--ease), opacity .22s var(--ease), margin .22s var(--ease);
  -webkit-appearance: none; appearance: none; background: transparent;
}
.tv-som:hover .tv-volume, .tv-volume:focus { width: 80px; opacity: 1; margin: 0 8px 0 2px; }
.tv-volume::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: rgba(255,255,255,.35); }
.tv-volume::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.tv-volume::-moz-range-track { height: 4px; border-radius: 3px; background: rgba(255,255,255,.35); }
.tv-volume::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }

.tv-tempo { color: #DDE5EE; font-size: .82rem; font-variant-numeric: tabular-nums; padding: 0 10px; white-space: nowrap; }
.tv-tempo i { font-style: normal; opacity: .5; margin: 0 4px; }
.tv-empurra { flex: 1 1 auto; }

.tv-vel { position: relative; }
.tv-vel-menu {
  position: absolute; right: 0; bottom: 46px; margin: 0; padding: 6px; list-style: none;
  min-width: 132px; border-radius: 14px; background: rgba(16, 23, 32, .97);
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
}
.tv-vel-menu[hidden] { display: none; }
.tv-vel-menu button {
  width: 100%; text-align: left; border: 0; background: transparent; color: #E8EDF3;
  font: inherit; font-size: .86rem; padding: 8px 12px; border-radius: 9px; cursor: pointer;
}
.tv-vel-menu button:hover { background: rgba(255,255,255,.12); }
.tv-vel-menu button.ativo { background: var(--md-primary); color: #fff; font-weight: 600; }

/* ----- Fim do vídeo: o próximo ----- */
.tv-fim {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  text-align: center; gap: 2px; padding: 24px; background: rgba(6, 11, 18, .88);
}
.tv-fim[hidden] { display: none; }
.tv-fim-titulo { margin: 0; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: #8FA3B8; }
.tv-fim h3 { margin: 6px 0 18px; font-size: 1.3rem; font-weight: 500; color: #fff; font-variation-settings: 'ROND' 80; }
.tv-fim-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ----- Rodapé do player ----- */
.tv-teatro-pe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px 14px; }
.tv-atalhos-dica { color: #8FA3B8; font-size: .78rem; display: inline-flex; align-items: center; gap: 8px; }
.tv-atalhos-dica b {
  color: #DDE5EE; font-weight: 600; background: rgba(255,255,255,.1);
  padding: 1px 6px; border-radius: 5px; font-size: .74rem;
}
.tv-teatro-pe .btn { border-radius: var(--r-pill); }
.tv-teatro-pe .btn-outline-primary { color: #9FCAFF; border-color: rgba(159,202,255,.45); }
.tv-teatro-pe .btn-outline-primary:hover { background: rgba(159,202,255,.16); color: #fff; border-color: #9FCAFF; }

@media (max-width: 767.98px) {
  .tv-teatro { padding: 0; place-items: stretch; }
  .tv-teatro-caixa { width: 100%; max-height: 100vh; border-radius: 0; justify-content: center; }
  .tv-teatro-topo { padding: 12px 14px 8px; }
  .tv-teatro-topo p { display: none; }
  .tv-atalhos-dica { display: none; }
  .tv-teatro-pe { padding: 10px 14px 12px; }
  .tv-teatro-pe .btn { flex: 1 1 auto; }
  .tv-b { width: 34px; height: 34px; }
  .tv-som .tv-volume { display: none; }
  /* O palco no celular tem ~210 px de altura: a barra e o botão grande encolhem para
     não cobrirem quase metade do vídeo. */
  .tv-ctrl { padding: 18px 8px 4px; }
  .tv-tempo { padding: 0 6px; font-size: .76rem; }
  .tv-grande { width: 58px; height: 58px; font-size: 1.3rem; }
  .tv-pulso { width: 58px; height: 58px; font-size: 1.15rem; }
  .tv-fim h3 { font-size: 1.05rem; margin-bottom: 12px; }
}

/* Celular deitado: o vídeo toma a tela inteira. No Android o JS ainda pede tela
   cheia de verdade (some a barra do navegador); no iPhone, que não deixa pôr um
   elemento em tela cheia, é este layout que resolve. O título e o fechar viram
   uma faixa por cima do vídeo e somem junto com os controles. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .tv-teatro { padding: 0; place-items: stretch; }
  .tv-teatro-caixa { width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; background: #000; }
  .tv-teatro-topo {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: 10px 14px 28px;
    background: linear-gradient(rgba(0,0,0,.72), transparent); transition: opacity .2s var(--ease);
  }
  .tv-teatro-topo p { display: none; }
  .tv-teatro-caixa:has(.tv-palco.tv-limpo) .tv-teatro-topo { opacity: 0; pointer-events: none; }
  .tv-teatro-pe { display: none; }
  .tv-palco { flex: 1 1 auto; aspect-ratio: auto; height: 100%; }
  .tv-atalhos-dica { display: none; }
}

/* Quem pediu menos animação no sistema operacional não recebe nenhuma daqui. */
@media (prefers-reduced-motion: reduce) {
  .tv .tv-capa, .tv .tv-capa img, .tv .tv-play,
  .tv-teatro-fundo, .tv-teatro-caixa, .tv-ctrl, .tv-volume { transition: none; }
  .tv-pulso.tv-pulsando { animation: none; opacity: 0; }
  .tv-carregando > span { animation-duration: 2s; }
}