html, body { background: #F4F7F7; }

/* Carregando o sistema */
.carregando { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #fff; }
.carregando img { width: 220px; max-width: 60vw; animation: pulsar 1.4s ease-in-out infinite alternate; }
@keyframes pulsar { from { opacity: .45; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

#blazor-error-ui { background: #fff3cd; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mud-table-row.linha-clicavel { cursor: pointer; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 4px; }
.dias-semana .mud-button-root { min-width: 46px; }
.topo-logo { height: 34px; width: 34px; object-fit: cover; object-position: 50% 38%; border-radius: 6px; background: #fff; }
.tabela-rolavel { overflow-x: auto; }

/* Login */
.tela-login {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: radial-gradient(120% 120% at 0% 0%, rgba(240,149,111,.25), transparent 50%), linear-gradient(135deg, #0F7F75 0%, #139A8E 60%, #4fb8ad 100%);
}
.tela-login img.logo { width: 220px; max-width: 70%; display: block; margin: -10px auto 0; }

/* Situações do atendimento */
.situacao { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 500; white-space: nowrap; }
.situacao.AGENDADO { background: #e8eef3; color: #3d5466; }
.situacao.CONFIRMADO { background: #dcf1ee; color: #0b6a61; }
.situacao.CHEGOU { background: #fff1d6; color: #8a5a00; }
.situacao.EM_ATENDIMENTO { background: #fde3d8; color: #a2431c; }
.situacao.ATENDIDO { background: #dff3e5; color: #1d6b3c; }
.situacao.FALTOU { background: #fde2e2; color: #a12828; }
.situacao.CANCELADO { background: #eeeeee; color: #777; text-decoration: line-through; }

.alerta-alergia { display: inline-flex; align-items: center; gap: 4px; color: #b42318; font-weight: 600; font-size: .8rem; }

/* Agenda do dia: profissionais nas colunas, horários nas linhas */
.agenda { overflow: auto; background: #fff; border-radius: 10px; border: 1px solid #e1e8e8; max-height: calc(100vh - 210px); }
.agenda table { border-collapse: separate; border-spacing: 0; width: 100%; }
.agenda th, .agenda td { border-bottom: 1px solid #eef2f2; border-right: 1px solid #f2f5f5; padding: 0; vertical-align: top; }
.agenda thead th { position: sticky; top: 0; z-index: 3; background: #0F7F75; color: #fff; padding: 8px 6px; font-weight: 500; min-width: 180px; text-align: left; }
.agenda thead th .cor { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; border: 1px solid rgba(255,255,255,.7); }
.agenda td.hora, .agenda th.hora { position: sticky; left: 0; z-index: 2; background: #fff; text-align: center; width: 60px; min-width: 60px; font-size: .78rem; color: #5b6b79; }
.agenda thead th.hora { z-index: 4; background: #0F7F75; color: #fff; }
.agenda tr.cheia td { border-top: 1px solid #d5e0e0; }
.slot { height: 28px; cursor: pointer; position: relative; }
.slot.fechado { background: repeating-linear-gradient(45deg, #f7f9f9, #f7f9f9 5px, #eff3f3 5px, #eff3f3 10px); }
.slot:hover { background: #e3f4f2; }
.ag-bloco {
    position: absolute; left: 2px; right: 2px; top: 1px; z-index: 1; border-radius: 6px; padding: 2px 6px; font-size: .76rem; line-height: 1.2;
    overflow: hidden; cursor: pointer; border-left: 4px solid var(--cor, #139A8E); background: #f4fbfa; box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.ag-bloco b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-bloco small { color: #5b6b79; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ag-bloco.CONFIRMADO { background: #e6f6f3; }
.ag-bloco.CHEGOU { background: #fff5dc; }
.ag-bloco.EM_ATENDIMENTO { background: #ffe9df; }
.ag-bloco.ATENDIDO { background: #e9f6ed; }
.ag-bloco.FALTOU { background: #fdecec; opacity: .75; }
.ag-bloco.encaixe { outline: 1px dashed #F0956F; }

/* Lista do dia / semana */
.dia-lista { display: flex; flex-direction: column; gap: 6px; }
.item-agenda { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border-radius: 8px; border: 1px solid #e6ecec; border-left: 4px solid var(--cor, #139A8E); cursor: pointer; }
.item-agenda:hover { background: #f5fbfa; }
.item-agenda .hora { font-weight: 600; min-width: 46px; color: #0F7F75; }

/* Fila da recepção */
.fila-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef2f2; }
.fila-item:last-child { border-bottom: none; }
.fila-pos { width: 28px; height: 28px; border-radius: 50%; background: #139A8E; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .85rem; flex: none; }
.fila-pos.prioridade { background: #F0956F; }
.espera { font-variant-numeric: tabular-nums; font-weight: 600; }
.espera.longa { color: #b42318; }

/* Prontuário */
.evolucao { border-left: 3px solid #139A8E; padding: 4px 0 4px 14px; margin-bottom: 18px; }
.evolucao.rascunho { border-left-color: #F0956F; }
.evolucao .campo { margin-top: 6px; }
.evolucao .campo b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #5b6b79; }
.evolucao .campo div { white-space: pre-wrap; }
.sinais { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sinais span { background: #eef6f5; border-radius: 6px; padding: 2px 8px; font-size: .8rem; }
.adendo { background: #fff8f2; border-radius: 6px; padding: 6px 10px; margin-top: 8px; font-size: .9rem; white-space: pre-wrap; }

/* Odontograma */
.odontograma { display: flex; flex-direction: column; gap: 10px; align-items: center; overflow-x: auto; padding: 8px 0; }
.arcada { display: flex; gap: 18px; }
.quadrante { display: flex; gap: 3px; }
.dente { display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; user-select: none; border-radius: 6px; padding: 2px; }
.dente:hover { background: #eef6f5; }
.dente small { font-size: .68rem; color: #5b6b79; }
.dente svg { width: 34px; height: 34px; display: block; }
.dente.selecionado { background: #d7efec; outline: 2px solid #139A8E; }
.dente .marca { font-size: .6rem; font-weight: 700; height: 11px; line-height: 11px; }
.legenda-odonto { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem; }
.legenda-odonto span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; background: var(--c); }

/* Painel */
.kpi { transition: box-shadow .15s, transform .15s; }
.kpi-link { cursor: pointer; }
.kpi-link:hover { box-shadow: 0 4px 14px rgba(15, 127, 117, .14); transform: translateY(-1px); }
.kpi-icone { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }
.painel-cartao { height: 100%; }

/* Gráficos (uma cor só; texto na cor do texto) */
.barras { display: flex; flex-direction: column; gap: 6px; }
.barras-vazio { color: #9aa1ab; font-size: .85rem; padding: 12px 0; }
.barra-linha { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; align-items: center; gap: 8px; font-size: .82rem; }
.barra-rotulo { color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-trilho { display: flex; align-items: center; gap: 6px; min-width: 0; }
.barra { height: 14px; background: #139A8E; border-radius: 0 4px 4px 0; min-width: 2px; }
.barra-valor { color: #4b5563; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .78rem; }
.barra-linha:hover .barra { background: #0F7F75; }
.colunas { font-size: .72rem; color: #6b7280; }
.colunas-area { display: grid; grid-template-columns: auto 1fr; gap: 6px; height: 160px; }
.colunas-escala { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-variant-numeric: tabular-nums; }
.colunas-plot {
    display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; align-items: end; height: 100%;
    border-bottom: 1px solid #d1d5db; background: linear-gradient(#eef0f3 1px, transparent 1px) 0 0 / 100% 50%;
}
.coluna-celula { height: 100%; display: flex; align-items: flex-end; cursor: default; }
.coluna { width: 100%; background: #139A8E; border-radius: 4px 4px 0 0; min-height: 1px; }
.coluna-celula:hover .coluna { background: #0F7F75; }
.colunas-eixo { display: grid; grid-template-columns: repeat(var(--n), 1fr); margin-left: 44px; gap: 2px; text-align: center; white-space: nowrap; }

/* Impressão (receita, atestado) em A4 */
.impressao { background: #e9eeee; min-height: 100vh; padding-bottom: 24px; }
.folha { width: 210mm; min-height: 297mm; margin: 16px auto 0; padding: 14mm 16mm; display: flex; flex-direction: column; font-size: 12pt; color: #111; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.folha .cabecalho { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid #139A8E; padding-bottom: 8px; }
.folha .cabecalho img { height: 70px; width: 70px; object-fit: cover; object-position: 50% 36%; }
.folha .cabecalho .dados { font-size: 9.5pt; color: #444; line-height: 1.35; }
.folha .cabecalho .dados b { font-size: 12pt; color: #0F7F75; }
.folha h1 { font-size: 15pt; text-align: center; letter-spacing: .08em; margin: 18px 0 12px; color: #0F7F75; }
.folha .paciente { font-size: 11pt; margin-bottom: 14px; }
.folha .itens { list-style: none; padding: 0; margin: 0; }
.folha .itens li { margin-bottom: 14px; }
.folha .itens .linha { display: flex; gap: 6px; font-weight: 600; }
.folha .itens .linha .pontos { flex: 1; border-bottom: 1px dotted #999; margin-bottom: 5px; }
.folha .itens .uso { margin-left: 22px; }
.folha .texto { white-space: pre-wrap; line-height: 1.7; }
.folha .local-data { text-align: right; margin: 28px 0 46px; }
.folha .rodape { margin-top: auto; padding-top: 24px; text-align: center; }
.folha .assinatura { border-top: 1px solid #333; width: 300px; margin: 0 auto; padding-top: 4px; font-size: 10.5pt; }
.folha .endereco { margin-top: 14px; font-size: 8.5pt; color: #666; border-top: 1px solid #ddd; padding-top: 6px; }
.folha.controle .identificacao { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 8.5pt; margin-top: 18px; }
.folha.controle .identificacao div { border: 1px solid #999; padding: 4px 6px; min-height: 70px; }
.folha .via { text-align: right; font-size: 9pt; color: #666; }
.barra-impressao { position: sticky; top: 0; z-index: 10; display: flex; gap: 8px; justify-content: center; padding: 10px; background: #f4f7f7; border-bottom: 1px solid #dde5e5; }

@media print {
    .mud-appbar, .mud-drawer, .nao-imprimir, .barra-impressao { display: none !important; }
    .mud-main-content { padding-top: 0 !important; margin-left: 0 !important; }
    html, body, .impressao { background: #fff !important; padding: 0 !important; }
    .folha { width: auto; min-height: 0; height: 270mm; margin: 0; padding: 0; box-shadow: none; page-break-after: always; }
    .folha:last-child { page-break-after: auto; }
    @page { size: A4; margin: 12mm; }
}

/* Lembretes e respostas dos pacientes */
.situacao-msg { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; background: #e8eef3; color: #3d5466; }
.situacao-msg.ENTREGUE { background: #dcf1ee; color: #0b6a61; }
.situacao-msg.LIDA { background: #0F7F75; color: #fff; }
.situacao-msg.FALHOU { background: #fde3e1; color: #b42318; }
.situacao-msg.RECEBIDA { background: #fff1d6; color: #8a5a00; }
.resposta-paciente { padding: 8px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.resposta-paciente:first-of-type { border-top: 0; }
.resposta-paciente .texto { white-space: pre-wrap; margin: 2px 0; }