/* ============================================================
   Prontuário APS — módulo único (out/2026). Prefixo pa-*.
   Base: mc-modulo.css (mm-*, tokens --p-*, tons mm-tom-*). Aqui só o
   que é próprio das listas do território vindas do PEC: barra de
   filtros, exportação, paginação, cidadão, alertas e o Painel.
   ============================================================ */

/* ---- Barra de filtros ---- */
.pa-filtros .mm-periodo-lbl { min-width: 168px; }
.pa-filtros .mm-search { max-width: 300px; min-width: 200px; }
.pa-carregando { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; color: var(--p-muted); white-space: nowrap; }
.pa-carregando .mm-spin-sm,
.pa-exportar-spin .mm-spin-sm {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--p-blue-line-soft); border-top-color: var(--p-blue);
    animation: mmSpin .8s linear infinite;
}

/* ---- Exportação ---- */
.pa-exportar button { height: 28px; padding: 0 9px; font-size: .7rem; }
.pa-exportar button:disabled { opacity: .5; }
.pa-exportar-spin { display: inline-flex; align-items: center; padding: 0 6px; }

/* ---- Paginação ---- */
.pa-paginacao {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; border-top: 1px solid var(--p-border);
    font-size: .72rem; font-weight: 600; color: var(--p-muted);
}
.pa-pag-n { min-width: 52px; text-align: center; font-size: .72rem; font-weight: 800; color: var(--p-ink); }

/* ---- Cidadão (avatar pelo sexo; clique abre a árvore familiar) ---- */
.pa-av { cursor: pointer; font-size: 15px; background: linear-gradient(135deg, #64748b, #334155); }
.pa-av.f { background: linear-gradient(135deg, #db2777, #9333ea); }
.pa-av.m { background: linear-gradient(135deg, #0891b2, #2563eb); }
.pa-av:hover { filter: brightness(1.08); box-shadow: 0 0 0 3px var(--p-blue-line-soft); }
.pa-cidadao { max-width: 280px; }
.pa-aviso { color: var(--p-orange) !important; }
.pa-sem-nome { color: var(--p-faint) !important; font-style: italic; font-weight: 600 !important; }

/* ---- Tabela das listas ---- */
.pa-tbl th, .pa-tbl td { padding: 8px 10px; }
.pa-tbl td.ctr, .pa-tbl th.ctr { text-align: center; }
.pa-tbl .pa-sub { display: block; font-size: .64rem; font-weight: 600; color: var(--p-faint); margin-top: 1px; }
.pa-alertas { display: flex; flex-wrap: wrap; gap: 3px 4px; max-width: 460px; }
.pa-alertas .mm-chip { font-size: .6rem; padding: .1rem .45rem; }
.pa-triagem { display: inline-flex; gap: 3px; }
.mm-tag.pa-tag-ok { background: var(--p-green-soft); color: var(--p-green); }
.mm-tag.pa-tag-nao { background: var(--p-red-soft); color: var(--p-red); }
.pa-sim { color: var(--p-green); font-weight: 800; }
.pa-nao { color: var(--p-faint); font-weight: 600; }
.pa-ruim { color: var(--p-red); font-weight: 800; }
.pa-fonte { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700; color: var(--p-faint); }
.pa-fonte i { font-size: 13px; color: var(--p-teal); }

/* ---- Cobertura vacinal ---- */
.mm-f.pa-f-c1 { grid-column: span 1; }
.pa-tbl tr.pa-total td { background: var(--p-soft); color: var(--p-ink); font-weight: 800; border-top: 1px solid var(--p-border); }
.mm-bar-row.pa-cob { grid-template-columns: 1fr 52px; }

/* ---- Painel: cartões das linhas de cuidado ---- */
.pa-linhas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pa-linha { display: flex; flex-direction: column; }
.pa-linha .mm-card-head > i { color: var(--tom, var(--p-blue)); }
.pa-linha-num { display: flex; align-items: baseline; gap: 8px; }
.pa-linha-num b { font-size: 1.9rem; font-weight: 800; color: var(--p-ink); letter-spacing: -.8px; line-height: 1; }
.pa-linha-num span { font-size: .74rem; font-weight: 600; color: var(--p-muted); }
.pa-linha-meta { font-size: .7rem; font-weight: 600; color: var(--p-faint); margin-top: 4px; }
.pa-linha .mm-bars { margin-top: 12px; }
.pa-linha .mm-bar-row { grid-template-columns: minmax(120px, 52%) 1fr auto; text-decoration: none; }
.pa-linha a.mm-bar-row:hover .mm-bar-lbl { color: var(--p-blue); }
.pa-linha .mm-card-body { flex: 1; }
.pa-linha-erro { font-size: .72rem; font-weight: 600; color: var(--p-orange); }
.pa-esqueleto { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--p-soft2), var(--p-soft), var(--p-soft2)); background-size: 200% 100%; animation: paBrilho 1.2s ease-in-out infinite; }
@keyframes paBrilho { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---- Pé diabético: formulário (modal) ---- */
.pa-pe-paciente { margin-bottom: 14px; }
.pa-obrig { color: var(--p-red); }
.pa-pe-abas { margin-bottom: 14px; flex-wrap: wrap; }
.pa-pe-card .mm-card-head { min-height: 44px; padding: 8px 14px; }
.pa-pe-mapa { display: flex; justify-content: center; }
.pa-pe-svg { width: 170px; height: 270px; }
.pa-pe-contorno { fill: #fde8d0; stroke: #d4a574; stroke-width: 1.5; }
.pa-pe-ponto { cursor: pointer; }
.pa-pe-ponto circle { transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.pa-pe-ponto:hover circle { transform: scale(1.25); }
.pa-pe-ponto.ok circle { fill: var(--p-green); }
.pa-pe-ponto.alt circle { fill: var(--p-red); }
.pa-pe-ponto text { fill: #fff; font-size: 9px; font-weight: 800; pointer-events: none; }
.pa-checks { display: flex; flex-direction: column; gap: 6px; }
.pa-check {
    display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer;
    padding: 8px 11px; border-radius: 10px; border: 1px solid var(--p-border); background: var(--p-surface);
    font-size: .78rem; font-weight: 600; color: var(--p-text); transition: all .15s;
}
.pa-check input { width: 16px; height: 16px; accent-color: var(--tom, var(--p-blue-light)); flex: none; }
.pa-check:hover { border-color: var(--p-blue-line); }
.pa-check.on { background: var(--tom-soft, var(--p-blue-soft)); border-color: var(--tom-line, var(--p-blue-line)); color: var(--tom, var(--p-blue)); }
.pa-pulso { display: flex; width: 100%; }
.pa-pulso button { flex: 1; justify-content: center; }
.pa-pulso button.on.pa-pulso-presente { color: var(--p-green); }
.pa-pulso button.on.pa-pulso-diminuido { color: var(--p-yellow); }
.pa-pulso button.on.pa-pulso-ausente { color: var(--p-red); }
.pa-soap { font-size: .72rem; color: var(--p-text); margin-top: 4px; line-height: 1.45; }
.pa-soap b { color: var(--p-ink); margin-right: 4px; }
.mm-mfoot .mm-spin-sm { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: mmSpin .8s linear infinite; }

/* ---- Barras clicáveis (filtro por categoria) ---- */
button.mm-bar-row.pa-bar-btn { width: 100%; border: 0; background: transparent; padding: 3px 4px; border-radius: 8px; text-align: left; font: inherit; cursor: pointer; }
button.mm-bar-row.pa-bar-btn:hover, button.mm-bar-row.pa-bar-btn.on { background: var(--p-soft); }
button.mm-bar-row.pa-bar-btn.on .mm-bar-lbl { color: var(--p-blue); font-weight: 800; }

/* ---- Histórico: abas por tipo ---- */
.mm-seg.pa-tipos { align-self: flex-start; flex-wrap: wrap; }
.pa-marcadores { font-size: .7rem; color: var(--p-text); }

/* ---- Prontuário odontológico: odontograma anatômico (FDI) ---- */
.pa-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; }
.pa-legenda .sw { border: 1px solid var(--p-border); }
.pa-arcada-lbl { text-align: center; font-size: .62rem; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--p-faint); margin: 2px 0 4px; }
.pa-arcada { display: flex; justify-content: center; align-items: flex-end; flex-wrap: nowrap; gap: 2px; overflow-x: auto; padding-bottom: 2px; }
.pa-arcada-sep { height: 2px; width: 90%; margin: 6px auto; background: var(--p-border-strong); border-radius: 2px; }
.pa-dente { cursor: pointer; text-align: center; flex: 0 0 auto; width: 46px; border-radius: 8px; padding: 2px 1px; transition: background .15s, box-shadow .15s; }
.pa-dente:hover { background: var(--p-blue-soft); }
.pa-dente.sel { background: var(--p-blue-soft); box-shadow: inset 0 0 0 2px var(--p-blue-light); }
.pa-dente-num { display: block; font-size: .62rem; font-weight: 700; color: var(--p-muted); line-height: 1.2; }
.pa-dente-img { position: relative; height: 64px; display: flex; align-items: center; justify-content: center; }
.pa-dente-corpo { position: absolute; inset: 0; opacity: .62; pointer-events: none;
    -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center; }
.pa-dente-contorno { position: relative; max-height: 100%; max-width: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.pa-dente-x { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--p-red); font-size: 1.6rem; font-weight: 800; line-height: 1; pointer-events: none; }
.pa-dente-edit { margin-top: 16px; }
.mm-f.pa-f-face { grid-column: span 2; }
.pa-plano-linha { margin-bottom: 8px; align-items: center; }

/* ---- Periograma (refeito em 31/10/2026 — Pages/Odontologia/Periograma.razor, PerioArcada, PeriodontogramaGrafico) ----
   A grade usa as MESMAS proporções do SVG: 46fr por dente e 14fr de vão entre os quadrantes, depois da coluna de rótulos,
   para o gráfico ficar exatamente sobre as colunas de cada dente. */
.pg-exames { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pg-abas { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; padding: 2px; }
.pg-aba { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--p-border); background: var(--p-surface); color: var(--p-muted); font-size: .74rem; font-weight: 700; cursor: pointer; }
.pg-aba:hover { color: var(--p-blue); border-color: var(--p-blue-line-soft); }
.pg-aba.on { background: var(--p-blue); border-color: var(--p-blue); color: #fff; }
.pg-aba.novo { border-style: dashed; }
.pg-aba i { font-size: 13px; }
.pg-evol { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pg-range { width: 170px; accent-color: var(--p-blue); }
.pg-evol-lbl { font-size: .72rem; font-weight: 700; color: var(--p-muted); white-space: nowrap; min-width: 150px; }
.pg-evol-lbl.on { color: var(--p-orange); }
.pg-aviso { margin-bottom: 10px; }
.pg-legenda { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 2px 0 10px; }
.pg-sw { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.pg-sw.ln { height: 0; border-top: 2px solid; border-radius: 0; }
.pg-sw.ln.gm { border-color: #dc2626; }
.pg-sw.ln.pb { border-color: #1d4ed8; }
.pg-sw.bolsa { background: rgba(37, 99, 235, .18); }

.pg-arcada .mm-card-body { padding: 10px 14px 14px; }
.pg-grid { display: grid; grid-template-columns: 112px repeat(8, minmax(0, 46fr)) minmax(0, 14fr) repeat(8, minmax(0, 46fr)); }
.pg-span { grid-column: 2 / -1; min-width: 0; }
.pg-svg-sep { border-top: 1px dashed var(--p-border); }
.pg-lbl { display: flex; align-items: center; padding: 0 8px 0 2px; font-size: .64rem; font-weight: 800; color: var(--p-muted); line-height: 1.15;
    border-top: 1px solid var(--p-border-soft); }
.pg-lbl.vert { justify-content: center; border-top: 0; }
.pg-lbl.vert span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .58rem; letter-spacing: 1px; text-transform: uppercase; color: var(--p-faint); }
.pg-lbl.pg-cab { border-top: 0; }
.pg-lbl-placa { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.pg-link { border: 0; background: none; padding: 0; color: var(--p-blue); font-size: .6rem; font-weight: 700; cursor: pointer; }
.pg-link:hover { text-decoration: underline; }
.pg-num { margin-top: 8px; height: 22px; border: 1px solid var(--p-border-soft); border-bottom: 0; border-radius: 7px 7px 0 0; background: var(--p-soft);
    color: var(--p-ink); font-size: .72rem; font-weight: 800; cursor: pointer; padding: 0; min-width: 0; }
.pg-num:hover:not(:disabled) { background: var(--p-blue-soft); color: var(--p-blue); }
.pg-num:disabled { cursor: default; opacity: 1; }
.pg-num.aus { color: var(--p-faint); text-decoration: line-through; background: var(--p-soft2); }
.pg-vao { border-top: 1px solid transparent; }
.pg-c { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 1px;
    border-top: 1px solid var(--p-border-soft); border-left: 1px solid var(--p-border-soft); }
.pg-c.ps-m { background: rgba(255, 193, 7, .16); }
.pg-c.ps-a { background: rgba(220, 53, 69, .14); }
.pg-c.aus { background: repeating-linear-gradient(135deg, var(--p-soft2) 0 4px, transparent 4px 8px); min-height: 22px; }
.pg-face-ini { border-top: 2px solid var(--p-border) !important; }
.pg-fim { border-bottom: 1px solid var(--p-border-soft); }
.pg-vao.pg-fim { border-bottom: 0; }
.pg-mini { padding: 4px 1px; }
.pg-step { display: flex; align-items: center; justify-content: center; width: 100%; gap: 1px; }
.pg-a { flex: none; border: 0; background: none; padding: 0 1px; color: var(--p-faint); font-size: .8rem; font-weight: 800; line-height: 1; cursor: pointer; }
.pg-a:hover:not(:disabled) { color: var(--p-blue); }
.pg-a:disabled { visibility: hidden; }
.pg-in { width: 26px; min-width: 0; height: 22px; padding: 0; text-align: center; font-size: .76rem; font-weight: 800; color: var(--p-ink);
    border: 1px solid transparent; border-radius: 6px; background: transparent; }
.pg-in:hover:not(:disabled) { border-color: var(--p-border); }
.pg-in:focus { outline: none; border-color: var(--p-blue-light); background: var(--p-surface); box-shadow: 0 0 0 2px var(--p-blue-soft); }
.pg-in:disabled { color: var(--p-ink); opacity: 1; }
.pg-val { min-width: 14px; text-align: center; font-size: .74rem; font-weight: 800; color: var(--p-faint); }
.pg-val.on { color: #b45309; }
.pg-val.on.furca { color: #7c3aed; }
.pg-val.vazio { color: var(--p-border-strong); }
.pg-graus { display: flex; gap: 3px; justify-content: center; }
.pg-g { width: 16px; height: 16px; padding: 0; border-radius: 4px; border: 1px solid; font-size: .6rem; font-weight: 800; line-height: 14px; text-align: center; cursor: pointer; display: inline-block; }
.pg-g:disabled { cursor: default; }
.pg-g.ss { border-color: #fca5a5; color: #dc2626; background: transparent; }
.pg-g.ss.g1 { background: #fecaca; border-color: #f87171; color: #991b1b; }
.pg-g.ss.g2 { background: #f87171; border-color: #ef4444; color: #fff; }
.pg-g.ss.g3 { background: #dc2626; border-color: #b91c1c; color: #fff; }
.pg-g.sup { border-color: #fde68a; color: #ca8a04; background: transparent; }
.pg-g.sup.g1 { background: #fef08a; border-color: #facc15; color: #854d0e; }
.pg-g.sup.g2 { background: #facc15; border-color: #eab308; color: #713f12; }
.pg-g.sup.g3 { background: #ca8a04; border-color: #a16207; color: #fff; }
.pg-nic { min-width: 20px; height: 16px; padding: 0 4px; border-radius: 4px; background: #1e40af; color: #fff; font-size: .6rem; font-weight: 800;
    line-height: 16px; text-align: center; display: inline-block; }
.pg-nic.vazio { background: var(--p-soft2); color: var(--p-faint); }
.pg-placa { width: 22px; height: 22px; display: block; }
.pg-placa polygon { fill: var(--p-surface); stroke: var(--p-border-strong); stroke-width: 1; cursor: pointer; }
.pg-placa polygon:hover { fill: var(--p-blue-soft); }
.pg-placa polygon.on { fill: #dc2626; }
.pg-placa.ro polygon { cursor: default; }
.pg-placa.ro polygon:hover:not(.on) { fill: var(--p-surface); }

/* periodontograma (SVG) */
.pg-svg { display: block; width: 100%; height: auto; }
.pg-grade { stroke: var(--p-border-soft); stroke-width: .35; }
.pg-grade.cinco { stroke: var(--p-border); stroke-width: .55; }
.pg-grade.zero { stroke: transparent; }
.pg-svg image.pg-ausente { opacity: .13; }
.pg-ln { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; transition: d .6s ease; }
.pg-gm { stroke: #dc2626; }
.pg-pb { stroke: #1d4ed8; }
.pg-bolsa { fill: rgba(37, 99, 235, .16); stroke: none; transition: d .6s ease; }
.pg-ss { fill: #dc2626; }
.pg-sup { fill: #facc15; stroke: #a16207; stroke-width: .5; }
.pg-furca { fill: none; stroke: #7c3aed; stroke-width: 1.1; }
.pg-furca.g2 { fill: rgba(124, 58, 237, .45); }
.pg-furca.g3 { fill: #7c3aed; }
.pg-mob { font-size: 8.5px; font-weight: 800; fill: #b45309; }
.pg-svg-print .pg-ln, .pg-svg-print .pg-bolsa { transition: none; }
.pa-spin-inline { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--p-blue-line-soft); border-top-color: var(--p-blue); animation: mmSpin .8s linear infinite; }

@media print {
    .mm-subnav, .pa-noprint, .app-header, .app-sidebar, footer, .mm-toasts { display: none !important; }
    .pg-print-bloco { break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; }
    .mm-body { padding: 0 !important; }
}

/* ---- Plano de tratamento: edição na linha ---- */
.pa-tbl tr.pa-linha-edit td { background: var(--p-blue-soft); }
.pa-tbl .prmd-field { padding: .35rem .45rem; font-size: .74rem; }
.prmd-field.pa-w70 { width: 70px; }
.prmd-field.pa-w90 { width: 90px; }

/* ---- Atendimento odontológico → FAO (out/2026) ---- */
.pa-mb { margin-bottom: 10px; }
.mm-count.pa-ao-vivo { background: var(--p-blue); color: #fff; }
.prmd-field.pa-leitura { background: var(--p-soft); font-weight: 700; color: var(--p-ink); }
.mm-f.pa-f-fim { display: flex; align-items: flex-end; }
.pa-proc-sel { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--p-blue-line); border-radius: 10px; background: var(--p-blue-soft); font-size: .78rem; }
.pa-proc-lista { max-height: 280px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.pa-proc-lista .mm-item { text-align: left; }
.pa-fao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 12px; }
.pa-fao .pa-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pa-tbl td.pa-nowrap { white-space: nowrap; }