/* ==========================================================================
   PRODUCT FRAMES — as "telas do produto" da vitrine, em HTML vivo.
   --------------------------------------------------------------------------
   Substituem as screenshots de marco/2026 que viviam no wp-content (tema
   escuro, produto velho, dependencia do WordPress). Decisao do dono, 14/08:
   telas CLARAS, ATUAIS e ANIMADAS — e maquete HTML nao envelhece quando o
   produto muda de botao, nao carrega dado de paciente e pesa menos que JPG.

   Este ficheiro define SO o chrome comum (.pframe): moldura de janela, barra
   com os tres pontos, pilula de URL e o corpo. O conteudo de cada tela vive
   em .pf-<slug>-* (uma secao por maquete, mais abaixo ou em ficheiro anexo).

   SEMANTICA DE COR (identidade carimbada em 06/08 — nao e decoracao):
     teal   #0e9aa7 = dado ENTRANDO  (mensagem chega, agenda preenche)
     violeta #7759f6 = decisao HUMANA (confirmar, enviado, assinado)
   ========================================================================== */

.pframe {
    margin: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(3, 17, 29, 0.16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* As telas antigas eram JPG 1600x900; o container das secoes espera essa
       proporcao. 16/10 da um pouco mais de altura util para UI sem esticar
       o layout — medido contra .product-window e .gallery-item. */
    aspect-ratio: 16 / 10;
}

.pframe-chrome {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
}

.pframe-dots {
    display: inline-flex;
    gap: 5px;
}

.pframe-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

.pframe-dots i:first-child { background: #fca5a5; }
.pframe-dots i:nth-child(2) { background: #fcd34d; }
.pframe-dots i:nth-child(3) { background: #86efac; }

.pframe-url {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 260px;
    font-size: 0.6rem;
    line-height: 1;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pframe-body {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    background: #f7fafc;
    color: #0f172a;
    overflow: hidden;
}

/* Dentro de contexto escuro (galeria, hero), a moldura ganha um respiro. */
.screen-gallery .pframe,
.product-window .pframe {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}


/* Variante "plain": dentro da janela do hero (.product-window), que ja tem o
   proprio chrome — sem moldura dupla. */
.pframe--plain { border: 0; border-radius: 0; box-shadow: none; }
.pframe--plain .pframe-chrome { display: none; }
.product-window .pframe--plain { box-shadow: none; }

/* ==========================================================================
   SCROLL-REVEAL (assets/home/reveal.js adiciona .is-revealed)
   O estado ESCONDIDO vive DENTRO da media query: sem motion (ou sem JS que
   revele), nada fica invisivel.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .6s ease, transform .6s ease;
        transition-delay: var(--reveal-delay, 0s);
    }
    [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }
}


/* ---------- maquete: agenda ---------- */
/* ===== pf-agenda — Agenda semanal (a maquete do HERO) ===== */
.pf-agenda .pframe-body{background:#fff}
.pf-agenda-app{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
.pf-agenda-app *{box-sizing:border-box}
.pf-agenda-topo{flex:none;display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border-bottom:1px solid #e2e8f0}
.pf-agenda-topo strong{font-size:.7rem;color:#0f172a}
.pf-agenda-semana{font-size:.58rem;color:#475569}
.pf-agenda-novo{margin-left:auto;font-size:.56rem;color:#fff;background:#2563eb;border-radius:.45rem;padding:.18rem .5rem;white-space:nowrap}
.pf-agenda-grade{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem;padding:.5rem .6rem;background:#f7fafc}
.pf-agenda-col{display:flex;flex-direction:column;gap:.28rem;min-width:0}
.pf-agenda-col-hoje{background:rgba(14,154,167,.06);border-radius:.5rem;padding:.15rem;margin:-.15rem}
.pf-agenda-dia{font-size:.55rem;color:#475569;text-align:center;padding-bottom:.15rem}
.pf-agenda-dia b{color:#0f172a}
.pf-agenda-ev{position:relative;display:flex;flex-direction:column;gap:.06rem;font-size:.56rem;line-height:1.25;color:#0f172a;background:rgba(14,154,167,.12);border-left:2px solid #0e9aa7;border-radius:.35rem;padding:.24rem .3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-agenda-ev i{font-style:normal;font-size:.5rem;color:#0c7d88}
.pf-agenda-ev-online{background:rgba(37,99,235,.09);border-left-color:#2563eb}
.pf-agenda-ev-online i{color:#2563eb}
.pf-agenda-ev-hoje{white-space:normal}
.pf-agenda-lembrete{font-style:normal;font-size:.5rem;color:#7759f6;background:#fff;border:1px solid rgba(119,89,246,.35);border-radius:999px;padding:.04rem .3rem;align-self:flex-start;white-space:nowrap}
.pf-agenda-rodape{flex:none;display:flex;align-items:center;gap:.7rem;padding:.35rem .6rem;border-top:1px solid #e2e8f0;font-size:.53rem;color:#475569}
.pf-agenda-ponto{display:inline-block;width:.4rem;height:.4rem;border-radius:50%;margin-right:.2rem;vertical-align:middle}
.pf-agenda-ponto-teal{background:#0e9aa7}
.pf-agenda-ponto-azul{background:#2563eb}
.pf-agenda-sync{margin-left:auto;color:#0c7d88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (prefers-reduced-motion: no-preference){
  .pf-agenda .pf-agenda-anim{opacity:0}
  .pf-agenda.is-revealed .pf-agenda-anim{animation:pfAgendaEntrar .45s ease forwards;animation-delay:var(--d,0s)}
  @keyframes pfAgendaEntrar{from{opacity:0;transform:translateY(5px) scale(.97)}to{opacity:1;transform:none}}
}


/* ---------- maquete: oria ---------- */
/* ===== pf-oria — Conversa com a Oria (estados finais como default) ===== */
.pf-oria .pframe-body{display:flex;overflow:hidden;background:#fff}
.pf-oria-app{flex:1;display:flex;min-width:0;min-height:0;width:100%}
.pf-oria-app,.pf-oria-app *{box-sizing:border-box}

/* sidebar fina */
.pf-oria-sidebar{width:1.9rem;flex:none;display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.5rem 0;background:#f7fafc;border-right:1px solid #e2e8f0}
.pf-oria-logo{width:.95rem;height:.95rem;border-radius:50%;background:linear-gradient(135deg,#0e9aa7,#7759f6);margin-bottom:.1rem}
.pf-oria-nav{width:.85rem;height:.85rem;border-radius:.3rem;background:#e2e8f0}
.pf-oria-nav-ativo{background:rgba(37,99,235,.16);box-shadow:inset 0 0 0 1px rgba(37,99,235,.35)}
.pf-oria-persona{margin-top:auto;width:.9rem;height:.9rem;border-radius:50%;background:#e2e8f0;border:1px solid #cbd5e1}

/* coluna principal */
.pf-oria-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pf-oria-topo{flex:none;display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-bottom:1px solid #e2e8f0;background:#fff}
.pf-oria-orb{width:1.1rem;height:1.1rem;flex:none;border-radius:50%;background:linear-gradient(135deg,#0e9aa7,#7759f6);color:#fff;font-size:.6rem;display:grid;place-items:center}
.pf-oria-quem{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.pf-oria-quem strong{font-size:.66rem;color:#0f172a}
.pf-oria-quem span{font-size:.55rem;color:#475569;display:flex;align-items:center;gap:.2rem;white-space:nowrap}
.pf-oria-ponto{width:.32rem;height:.32rem;border-radius:50%;background:#0e9aa7}
.pf-oria-chip{margin-left:auto;flex:none;font-size:.55rem;color:#7759f6;background:rgba(119,89,246,.1);border:1px solid rgba(119,89,246,.25);padding:.1rem .45rem;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}

/* área de chat — ancorada embaixo: em telas curtas corta o topo, nunca o cartão */
.pf-oria-chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;padding:.5rem .6rem;background:#f7fafc;overflow:hidden}
.pf-oria-dia{align-self:center;font-size:.55rem;color:#475569;background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:.05rem .45rem;white-space:nowrap}
.pf-oria-msg{max-width:82%;border-radius:.7rem;padding:.32rem .5rem;font-size:.62rem;line-height:1.4}
.pf-oria-msg p{margin:0;min-width:0}

/* pergunta do psicólogo (azul de UI) */
.pf-oria-msg-user{align-self:flex-end;background:#2563eb;color:#fff;border-bottom-right-radius:.2rem;display:flex;align-items:flex-end;gap:.35rem}
.pf-oria-msg-user time{font-size:.55rem;color:rgba(255,255,255,.75);white-space:nowrap}

/* resposta da Oria (teal = dado entrando) */
.pf-oria-resposta{position:relative;align-self:flex-start;max-width:88%;min-width:0}
.pf-oria-typing{display:none;position:absolute;top:0;left:0;align-items:center;gap:.18rem;background:#fff;border:1px solid #e2e8f0;border-radius:.7rem;border-bottom-left-radius:.2rem;padding:.32rem .5rem}
.pf-oria-typing i{width:.28rem;height:.28rem;border-radius:50%;background:#0e9aa7}
.pf-oria-msg-oria{max-width:100%;background:rgba(14,154,167,.1);border:1px solid rgba(14,154,167,.28);border-bottom-left-radius:.2rem;color:#0f172a;display:flex;flex-direction:column;gap:.18rem}
.pf-oria-nome{font-size:.55rem;color:#0c7d88;letter-spacing:.02em}
.pf-oria-tag{align-self:flex-start;font-size:.55rem;color:#0c7d88;background:#fff;border:1px solid rgba(14,154,167,.35);border-radius:999px;padding:.05rem .4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* cartão de ação (violeta = decisão humana) */
.pf-oria-cartao{align-self:flex-start;width:min(100%,17rem);background:#fff;border:1px solid #e2e8f0;border-left:3px solid #7759f6;border-radius:.7rem;padding:.45rem .55rem;box-shadow:0 6px 16px rgba(15,23,42,.06);display:flex;flex-direction:column;gap:.22rem}
.pf-oria-cartao-kicker{font-size:.55rem;font-weight:600;color:#7759f6;text-transform:uppercase;letter-spacing:.06em}
.pf-oria-cartao-titulo{font-size:.68rem;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-oria-cartao-sub{font-size:.55rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-oria-cartao-acoes{display:flex;align-items:center;gap:.4rem;margin-top:.15rem}
.pf-oria-btn{display:inline-grid;place-items:center;background:#7759f6;color:#fff;font-size:.6rem;font-weight:600;border-radius:.45rem;padding:.24rem .6rem;box-shadow:0 3px 8px rgba(119,89,246,.35)}
.pf-oria-btn>span{grid-area:1/1;white-space:nowrap}
.pf-oria-btn-rotulo{opacity:0} /* default estático: mostra o estado confirmado */
.pf-oria-btn-ghost{font-size:.6rem;color:#475569;border:1px solid #e2e8f0;border-radius:.45rem;padding:.22rem .55rem;background:#fff;white-space:nowrap}

/* barra de escrita */
.pf-oria-input{flex:none;display:flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-top:1px solid #e2e8f0;background:#fff}
.pf-oria-input-caixa{flex:1;min-width:0;font-size:.6rem;color:#94a3b8;border:1px solid #e2e8f0;background:#f7fafc;border-radius:999px;padding:.24rem .55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-oria-enviar{width:1.15rem;height:1.15rem;flex:none;border-radius:50%;background:#7759f6;color:#fff;display:grid;place-items:center;font-size:.6rem}

/* ===== animação (só com .is-revealed; sem motion, tudo acima já é o estado final) ===== */
@media (prefers-reduced-motion: no-preference){
    .pf-oria .pf-oria-anim{opacity:0}
    .pf-oria.is-revealed .pf-oria-anim{animation:pfOriaEntrar .5s ease forwards;animation-delay:var(--d,0s)}
    /* três pontos: aparecem, pulsam e cedem lugar ao texto */
    .pf-oria .pf-oria-typing{display:flex;opacity:0}
    .pf-oria.is-revealed .pf-oria-typing{animation:pfOriaTyping 1.25s ease forwards;animation-delay:.45s}
    .pf-oria.is-revealed .pf-oria-typing i{animation:pfOriaDot .9s ease-in-out infinite}
    .pf-oria.is-revealed .pf-oria-typing i:nth-child(2){animation-delay:.15s}
    .pf-oria.is-revealed .pf-oria-typing i:nth-child(3){animation-delay:.3s}
    /* botão: "Confirmar" cede lugar ao check "Confirmado" */
    .pf-oria .pf-oria-btn-rotulo{opacity:1}
    .pf-oria.is-revealed .pf-oria-btn-rotulo{animation:pfOriaSair .3s ease forwards;animation-delay:3.55s}
    .pf-oria .pf-oria-btn-feito{opacity:0}
    .pf-oria.is-revealed .pf-oria-btn-feito{animation:pfOriaPop .35s ease forwards;animation-delay:3.7s}
    @keyframes pfOriaEntrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    @keyframes pfOriaTyping{0%{opacity:0}12%{opacity:1}82%{opacity:1}100%{opacity:0}}
    @keyframes pfOriaDot{0%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-.12rem);opacity:1}}
    @keyframes pfOriaSair{to{opacity:0}}
    @keyframes pfOriaPop{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
}


/* ---------- maquete: transcricao ---------- */
/* ===== Maquete: Transcrição de sessão (conteúdo do chrome padrão .pframe) ===== */
.pf-transcricao .pframe-body{display:flex;flex-direction:column;gap:8px;padding:clamp(8px,3.5%,16px);background:#f7fafc;overflow:hidden;min-height:0}

/* Topo: título + selo criptografado no canto */
.pf-transcricao-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pf-transcricao-titulos{min-width:0}
.pf-transcricao-titulo{display:block;font-size:.72rem;font-weight:700;color:#0f172a;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-transcricao-sub{display:block;font-size:.55rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-transcricao-selo{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:.55rem;font-weight:600;color:#475569;background:#ffffff;border:1px solid #e2e8f0;border-radius:999px;padding:3px 8px}
.pf-transcricao-selo svg{width:9px;height:9px;color:#0e9aa7}

/* Player de áudio */
.pf-transcricao-player{display:flex;align-items:center;gap:8px;background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:8px 10px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.pf-transcricao-play{flex:none;width:18px;height:18px;border-radius:50%;background:#2563eb;display:inline-flex;align-items:center;justify-content:center;gap:2px}
.pf-transcricao-play i{width:2px;height:7px;background:#ffffff;border-radius:1px}
.pf-transcricao-faixa{flex:1;min-width:0;height:4px;background:#e2e8f0;border-radius:999px}
.pf-transcricao-progresso{position:relative;height:100%;width:42%;background:#0e9aa7;border-radius:999px}
.pf-transcricao-progresso::after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:9px;height:9px;box-sizing:border-box;background:#ffffff;border:2px solid #0e9aa7;border-radius:50%}
.pf-transcricao-tempo{flex:none;font-size:.55rem;color:#475569;font-variant-numeric:tabular-nums}

/* Linhas da transcrição */
.pf-transcricao-linhas{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:7px}
.pf-transcricao-linha{border-left:2px solid #e2e8f0;padding-left:8px}
.pf-transcricao-linha.pf-transcricao-viva{border-left-color:#0e9aa7}
.pf-transcricao-meta{display:flex;align-items:baseline;gap:6px;font-size:.55rem;color:#475569}
.pf-transcricao-meta b{color:#0f172a;font-weight:600}
.pf-transcricao-linha p{margin:2px 0 0;font-size:.62rem;line-height:1.4;color:#475569;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pf-transcricao-viva p::after{content:"";display:inline-block;width:2px;height:.75em;margin-left:3px;background:#0e9aa7;vertical-align:-.08em}

/* Rodapé: status ao vivo (teal) + ação humana (violeta) */
.pf-transcricao-rodape{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pf-transcricao-status{display:inline-flex;align-items:center;gap:5px;font-size:.55rem;color:#475569;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-transcricao-ponto{flex:none;width:6px;height:6px;border-radius:50%;background:#0e9aa7}
.pf-transcricao-btn{flex:none;font-size:.58rem;font-weight:600;color:#ffffff;background:#7759f6;border-radius:999px;padding:4px 10px}

/* Animações — só com .is-revealed e só com motion permitido; sem motion, o estado final acima é o default */
@media (prefers-reduced-motion: no-preference){
    .pf-transcricao .pf-transcricao-topo,
    .pf-transcricao .pf-transcricao-player,
    .pf-transcricao .pf-transcricao-rodape,
    .pf-transcricao .pf-transcricao-linha{opacity:0}
    .pf-transcricao .pf-transcricao-progresso{width:16%}

    .pf-transcricao.is-revealed .pf-transcricao-topo{animation:pfTranscricaoEntrar .5s ease forwards}
    .pf-transcricao.is-revealed .pf-transcricao-player{animation:pfTranscricaoEntrar .5s ease forwards;animation-delay:.15s}
    .pf-transcricao.is-revealed .pf-transcricao-linha{animation:pfTranscricaoEntrar .6s ease forwards;animation-delay:var(--d,0s)}
    .pf-transcricao.is-revealed .pf-transcricao-linha p{color:#0e9aa7;animation:pfTranscricaoTinta 1.8s ease forwards;animation-delay:var(--d,0s)}
    .pf-transcricao.is-revealed .pf-transcricao-rodape{animation:pfTranscricaoEntrar .5s ease forwards;animation-delay:1.5s}
    .pf-transcricao.is-revealed .pf-transcricao-progresso{animation:pfTranscricaoAvancar 28s linear forwards;animation-delay:.4s}
    .pf-transcricao.is-revealed .pf-transcricao-viva p::after{animation:pfTranscricaoCursor 1.1s linear infinite}
    .pf-transcricao.is-revealed .pf-transcricao-ponto{animation:pfTranscricaoPulso 1.6s ease-in-out infinite}

    @keyframes pfTranscricaoEntrar{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
    @keyframes pfTranscricaoTinta{0%,55%{color:#0e9aa7}100%{color:#475569}}
    @keyframes pfTranscricaoAvancar{from{width:16%}to{width:42%}}
    @keyframes pfTranscricaoCursor{0%,49%{opacity:1}50%,100%{opacity:0}}
    @keyframes pfTranscricaoPulso{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
}


/* ---------- maquete: prontuario ---------- */
/* ===== pf-prontuario — Prontuário / registro clínico ===== */
.pf-prontuario .pframe-body{display:flex;overflow:hidden;background:#f7fafc}
.pf-prontuario-wrap{flex:1;display:flex;min-width:0;container-type:inline-size}

/* rail fino (sidebar) */
.pf-prontuario-rail{flex:0 0 1.9rem;background:#ffffff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.5rem 0}
.pf-prontuario-logo{width:.72rem;height:.72rem;border-radius:50%;background:linear-gradient(135deg,#0e9aa7,#2563eb);margin-bottom:.25rem}
.pf-prontuario-rail i{width:.55rem;height:.55rem;border-radius:.18rem;background:#e2e8f0}
.pf-prontuario-rail i.pf-prontuario-on{background:#2563eb}

/* coluna principal */
.pf-prontuario-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem;padding:.55rem .65rem}

/* ficha do paciente */
.pf-prontuario-ficha{display:flex;align-items:center;gap:.45rem;min-width:0}
.pf-prontuario-avatar{flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:50%;background:#eff6ff;border:1px solid #dbeafe;color:#2563eb;display:grid;place-items:center;font-size:.55rem;font-weight:700;letter-spacing:.02em}
.pf-prontuario-id{min-width:0}
.pf-prontuario-id strong{display:block;font-size:.7rem;color:#0f172a;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-prontuario-id span{display:block;font-size:.55rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* selo "salvo automaticamente" (violeta = ação confirmada) */
.pf-prontuario-selo{margin-left:auto;display:grid;align-items:center;flex:0 0 auto}
.pf-prontuario-selo>span{grid-area:1/1;justify-self:end;white-space:nowrap}
.pf-prontuario-salvando{font-size:.53rem;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:.14rem .45rem;opacity:0}
.pf-prontuario-salvo{display:flex;align-items:center;gap:.28rem;font-size:.53rem;font-weight:600;color:#7759f6;background:#f3f0fe;border:1px solid #e4ddfd;border-radius:999px;padding:.14rem .45rem}
.pf-prontuario-salvo i{width:.62rem;height:.62rem;border-radius:50%;background:#7759f6;color:#fff;display:grid;place-items:center;font-size:.42rem;font-style:normal;line-height:1}

/* tabs Evolução / Timeline / Anexos */
.pf-prontuario-tabs{display:flex;gap:.75rem;border-bottom:1px solid #e2e8f0;font-size:.58rem;color:#475569;padding:0 .1rem}
.pf-prontuario-tabs span{padding-bottom:.28rem;border-bottom:2px solid transparent}
.pf-prontuario-tabs .pf-prontuario-tab-on{color:#2563eb;font-weight:600;border-bottom-color:#2563eb}

/* lista de evolução */
.pf-prontuario-lista{flex:1;min-height:0;display:flex;flex-direction:column;gap:.35rem;overflow:hidden}
.pf-prontuario-entrada{background:#ffffff;border:1px solid #e2e8f0;border-radius:.6rem;padding:.38rem .5rem;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.pf-prontuario-data{display:flex;align-items:center;gap:.35rem;font-size:.53rem;color:#475569;margin-bottom:.16rem;white-space:nowrap;overflow:hidden}
.pf-prontuario-chip{background:#e6f6f7;color:#0b7e89;border-radius:999px;padding:.06rem .35rem;font-size:.5rem;font-weight:600}
.pf-prontuario-entrada p{margin:0;font-size:.6rem;line-height:1.35;color:#475569;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* entrada sendo escrita (teal = dado entrando) */
.pf-prontuario-escrevendo{border-color:#b9e4e8}
.pf-prontuario-vivo{margin-left:auto;color:#0e9aa7;font-size:.5rem;font-style:italic}
.pf-prontuario-digita{white-space:nowrap;text-overflow:ellipsis}
.pf-prontuario-digita span{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:bottom}
.pf-prontuario-cursor{display:none;width:2px;height:.72em;background:#0f172a;vertical-align:baseline;margin-left:.12rem}

/* larguras muito pequenas: compacta sem quebrar */
@container (max-width: 340px){
  .pf-prontuario-tabs{display:none}
  .pf-prontuario-entrada p{-webkit-line-clamp:1}
  .pf-prontuario-id span{display:none}
  .pf-prontuario-salvo{padding:.14rem .3rem}
}

/* ===== animações (só com .is-revealed e sem reduced-motion) ===== */
@media (prefers-reduced-motion: no-preference){
  .pf-prontuario .pf-prontuario-ficha,
  .pf-prontuario .pf-prontuario-tabs,
  .pf-prontuario .pf-prontuario-entrada{opacity:0}
  .pf-prontuario.is-revealed .pf-prontuario-ficha,
  .pf-prontuario.is-revealed .pf-prontuario-tabs,
  .pf-prontuario.is-revealed .pf-prontuario-entrada{animation:pfProntuarioEntrar .5s ease forwards;animation-delay:var(--d,0s)}

  /* texto "digitando" */
  .pf-prontuario .pf-prontuario-digita span{max-width:0}
  .pf-prontuario.is-revealed .pf-prontuario-digita span{animation:pfProntuarioDigitar 1.2s steps(30,end) forwards;animation-delay:1.05s}
  .pf-prontuario.is-revealed .pf-prontuario-cursor{display:inline-block;animation:pfProntuarioPiscar 1s steps(2,start) infinite}

  /* "Salvando…" cruza para o selo violeta no fim */
  .pf-prontuario .pf-prontuario-salvo{opacity:0}
  .pf-prontuario.is-revealed .pf-prontuario-salvando{animation:pfProntuarioSalvando 1.35s ease forwards;animation-delay:1.05s}
  .pf-prontuario.is-revealed .pf-prontuario-salvo{animation:pfProntuarioSelo .35s ease forwards;animation-delay:2.45s;transform-origin:center right}

  @keyframes pfProntuarioEntrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  @keyframes pfProntuarioDigitar{from{max-width:0}to{max-width:100%}}
  @keyframes pfProntuarioPiscar{50%{opacity:0}}
  @keyframes pfProntuarioSalvando{0%{opacity:0}18%{opacity:1}82%{opacity:1}100%{opacity:0}}
  @keyframes pfProntuarioSelo{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
}


/* ---------- maquete: teleatendimento ---------- */
/* ===== Maquete: Teleatendimento ===== */
.pf-teleatendimento .pframe-body{display:flex;flex-direction:column;gap:.45rem;padding:.55rem .6rem .6rem;background:#ffffff;height:100%;box-sizing:border-box;overflow:hidden;}
.pf-teleatendimento-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;}
.pf-teleatendimento-who{min-width:0;}
.pf-teleatendimento-who strong{display:block;font-size:.72rem;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pf-teleatendimento-who span{display:block;font-size:.55rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pf-teleatendimento-meta{display:flex;align-items:center;gap:.35rem;flex-shrink:0;}
.pf-teleatendimento-safe{display:inline-flex;align-items:center;gap:.25rem;font-size:.55rem;font-weight:600;color:#0e9aa7;background:rgba(14,154,167,.08);border:1px solid rgba(14,154,167,.28);border-radius:999px;padding:.16rem .45rem;white-space:nowrap;}
.pf-teleatendimento-safe svg{width:.6rem;height:.6rem;flex-shrink:0;}
.pf-teleatendimento-timer{display:inline-flex;align-items:center;gap:.28rem;font-size:.6rem;font-weight:600;color:#0f172a;background:#f7fafc;border:1px solid #e2e8f0;border-radius:999px;padding:.16rem .5rem;font-variant-numeric:tabular-nums;}
.pf-teleatendimento-ponto{width:.38rem;height:.38rem;border-radius:50%;background:#0e9aa7;}
.pf-teleatendimento-clock{position:relative;display:inline-block;}
.pf-teleatendimento-t14{position:absolute;inset:0;opacity:0;}
.pf-teleatendimento-t15{opacity:1;}
.pf-teleatendimento-stage{position:relative;flex:1;min-height:0;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#ffffff 0%,#f7fafc 55%,#edf3f7 100%);display:flex;align-items:center;justify-content:center;}
.pf-teleatendimento-peer{display:flex;flex-direction:column;align-items:center;gap:.28rem;margin-bottom:1.3rem;}
.pf-teleatendimento-avatar{position:relative;width:2.9rem;height:2.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;letter-spacing:.02em;color:#ffffff;background:linear-gradient(135deg,#0e9aa7,#2563eb);}
.pf-teleatendimento-avatar::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(14,154,167,.3);}
.pf-teleatendimento-peer strong{font-size:.7rem;font-weight:600;color:#0f172a;}
.pf-teleatendimento-peer em{display:inline-flex;align-items:center;gap:.25rem;font-style:normal;font-size:.55rem;font-weight:600;color:#0e9aa7;}
.pf-teleatendimento-peer em i{width:.3rem;height:.3rem;border-radius:50%;background:#0e9aa7;}
.pf-teleatendimento-self{position:absolute;right:.55rem;bottom:2.9rem;width:3.6rem;aspect-ratio:16/11;background:#ffffff;border:1px solid #e2e8f0;border-radius:9px;box-shadow:0 5px 12px rgba(15,23,42,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;}
.pf-teleatendimento-self span{width:1.05rem;height:1.05rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.48rem;font-weight:700;color:#2563eb;background:#e5edff;}
.pf-teleatendimento-self small{font-size:.45rem;font-weight:600;color:#475569;}
.pf-teleatendimento-controls{position:absolute;bottom:.5rem;inset-inline:0;margin-inline:auto;width:max-content;display:flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.94);border:1px solid #e2e8f0;border-radius:999px;padding:.28rem .35rem;box-shadow:0 6px 16px rgba(15,23,42,.09);}
.pf-teleatendimento-btn{width:1.45rem;height:1.45rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f7fafc;border:1px solid #e2e8f0;color:#475569;box-sizing:border-box;}
.pf-teleatendimento-btn svg{width:.72rem;height:.72rem;}
.pf-teleatendimento-end{display:inline-flex;align-items:center;gap:.28rem;height:1.45rem;padding:0 .6rem;border-radius:999px;background:#7759f6;color:#ffffff;font-size:.58rem;font-weight:600;box-shadow:0 3px 8px rgba(119,89,246,.32);}
.pf-teleatendimento-end svg{width:.75rem;height:.75rem;flex-shrink:0;}
.pf-teleatendimento-toast{position:absolute;top:.5rem;inset-inline:0;margin-inline:auto;width:max-content;max-width:88%;display:inline-flex;align-items:center;gap:.3rem;background:#ffffff;border:1px solid #e2e8f0;border-left:3px solid #7759f6;border-radius:8px;padding:.26rem .55rem;font-size:.58rem;font-weight:600;color:#0f172a;box-shadow:0 6px 14px rgba(15,23,42,.1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;}
.pf-teleatendimento-toast svg{width:.62rem;height:.62rem;color:#7759f6;flex-shrink:0;}

@media (prefers-reduced-motion: no-preference){
    .pf-teleatendimento .pf-teleatendimento-top,
    .pf-teleatendimento .pf-teleatendimento-peer,
    .pf-teleatendimento .pf-teleatendimento-self,
    .pf-teleatendimento .pf-teleatendimento-controls{opacity:0;}
    .pf-teleatendimento .pf-teleatendimento-t14{opacity:1;}
    .pf-teleatendimento .pf-teleatendimento-t15{opacity:0;}
    .pf-teleatendimento.is-revealed .pf-teleatendimento-top{animation:pfTeleDescer .45s ease forwards;animation-delay:.1s;}
    .pf-teleatendimento.is-revealed .pf-teleatendimento-peer{animation:pfTeleSubir .55s ease forwards;animation-delay:.3s;}
    .pf-teleatendimento.is-revealed .pf-teleatendimento-self{animation:pfTeleLado .45s ease forwards;animation-delay:.65s;}
    .pf-teleatendimento.is-revealed .pf-teleatendimento-controls{animation:pfTeleSubir .45s ease forwards;animation-delay:.8s;}
    .pf-teleatendimento.is-revealed .pf-teleatendimento-toast{animation:pfTeleToast 3s ease forwards;animation-delay:1.1s;}
    .pf-teleatendimento.is-revealed .pf-teleatendimento-t14{animation:pfTeleSumir .25s ease forwards;animation-delay:2.7s;}
    .pf-teleatendimento.is-revealed .pf-teleatendimento-t15{animation:pfTeleAparecer .25s ease forwards;animation-delay:2.7s;}
    .pf-teleatendimento.is-revealed .pf-teleatendimento-avatar::after{animation:pfTelePulso 2.8s ease-out infinite;animation-delay:1.5s;}
    .pf-teleatendimento.is-revealed .pf-teleatendimento-ponto{animation:pfTelePiscar 1.8s ease-in-out infinite;animation-delay:1.5s;}
    @keyframes pfTeleDescer{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
    @keyframes pfTeleSubir{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
    @keyframes pfTeleLado{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
    @keyframes pfTeleAparecer{from{opacity:0}to{opacity:1}}
    @keyframes pfTeleSumir{from{opacity:1}to{opacity:0}}
    @keyframes pfTeleToast{0%{opacity:0;transform:translateY(-8px)}12%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
    @keyframes pfTelePulso{0%{transform:scale(.9);opacity:.85}70%{transform:scale(1.32);opacity:0}100%{transform:scale(1.32);opacity:0}}
    @keyframes pfTelePiscar{0%,100%{opacity:1}50%{opacity:.35}}
}


/* ---------- maquete: avaliacoes ---------- */
/* ===== Maquete: Avaliações e escalas (.pf-avaliacoes) ===== */
.pf-avaliacoes .pframe-body{
    display:flex;flex-direction:column;gap:.4rem;
    padding:.5rem .6rem .6rem;
    background:#f7fafc;color:#475569;
    overflow:hidden;min-height:0;
}

/* Cabeçalho em linha única (orçamento vertical para 280px) */
.pf-avaliacoes-top{display:flex;align-items:center;gap:.35rem;flex:none;min-width:0}
.pf-avaliacoes-titulo{font-size:.7rem;font-weight:700;color:#0f172a;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-avaliacoes-chip{flex:none;font-size:.55rem;font-weight:600;color:#475569;background:#ffffff;border:1px solid #e2e8f0;border-radius:999px;padding:.14rem .4rem;line-height:1}
.pf-avaliacoes-btn{flex:none;margin-left:auto;font-size:.55rem;font-weight:600;color:#ffffff;background:#2563eb;border-radius:999px;padding:.26rem .55rem;line-height:1;box-shadow:0 1px 2px rgba(37,99,235,.25);white-space:nowrap}

/* Duas colunas: lista de instrumentos × gráfico de resultado */
.pf-avaliacoes-cols{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:.5rem;flex:1;min-height:0}
.pf-avaliacoes-lista{display:flex;flex-direction:column;gap:.3rem;min-width:0;min-height:0;overflow:hidden}
.pf-avaliacoes-item{flex:1;display:flex;align-items:center;justify-content:space-between;gap:.4rem;background:#ffffff;border:1px solid #e2e8f0;border-radius:10px;padding:.3rem .5rem;box-shadow:0 1px 2px rgba(15,23,42,.04);min-height:0;overflow:hidden}
.pf-avaliacoes-item:first-child{flex-grow:1.3}
.pf-avaliacoes-info{display:flex;flex-direction:column;gap:.08rem;min-width:0}
.pf-avaliacoes-nome{font-size:.6rem;font-weight:600;color:#0f172a;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-avaliacoes-meta{font-size:.55rem;color:#475569;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-avaliacoes-pront{display:inline-flex;align-items:center;gap:.22rem;font-size:.55rem;font-weight:600;color:#7759f6;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-avaliacoes-pront svg{flex:none}
.pf-avaliacoes-pill{flex:none;font-size:.55rem;font-weight:600;border-radius:999px;padding:.2rem .45rem;line-height:1}
.pf-avaliacoes-pill.is-resp{color:#0e9aa7;background:rgba(14,154,167,.12)}
.pf-avaliacoes-pill.is-ag{color:#64748b;background:#f1f5f9;border:1px dashed #cbd5e1}

/* Cartão do gráfico */
.pf-avaliacoes-grafico{display:flex;flex-direction:column;gap:.35rem;background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:.45rem .5rem;box-shadow:0 1px 3px rgba(15,23,42,.05);min-width:0;min-height:0;overflow:hidden}
.pf-avaliacoes-graf-top{display:flex;align-items:center;justify-content:space-between;gap:.35rem;flex:none;min-width:0}
.pf-avaliacoes-graf-titulo{font-size:.6rem;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-avaliacoes-tag{flex:none;font-size:.55rem;font-weight:600;color:#0e9aa7;background:rgba(14,154,167,.1);border-radius:999px;padding:.16rem .4rem;line-height:1;white-space:nowrap}
.pf-avaliacoes-barras{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:.25rem;min-height:0}
.pf-avaliacoes-linha{display:grid;grid-template-columns:34% minmax(0,1fr) auto;align-items:center;gap:.32rem;min-width:0}
.pf-avaliacoes-rotulo{font-size:.55rem;color:#475569;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-avaliacoes-trilho{display:block;height:.36rem;background:#eef2f7;border-radius:999px;overflow:hidden}
.pf-avaliacoes-barra{display:block;height:100%;width:var(--w,50%);border-radius:999px;background:linear-gradient(90deg,#0e9aa7,#2563eb)}
.pf-avaliacoes-valor{font-size:.55rem;font-weight:700;color:#0f172a;min-width:.65rem;text-align:right}
.pf-avaliacoes-total{display:flex;align-items:baseline;gap:.3rem;flex:none;border-top:1px dashed #e2e8f0;padding-top:.3rem;white-space:nowrap;overflow:hidden;min-width:0}
.pf-avaliacoes-total-num{flex:none;font-size:.58rem;font-weight:700;color:#0f172a}
.pf-avaliacoes-total-txt{font-size:.55rem;color:#475569;overflow:hidden;text-overflow:ellipsis}

/* Animação — só com motion permitido; sem motion, estado final estático acima */
@media (prefers-reduced-motion: no-preference){
    .pf-avaliacoes .pf-avaliacoes-item,
    .pf-avaliacoes .pf-avaliacoes-grafico,
    .pf-avaliacoes .pf-avaliacoes-pront,
    .pf-avaliacoes .pf-avaliacoes-valor,
    .pf-avaliacoes .pf-avaliacoes-total{opacity:0}
    .pf-avaliacoes .pf-avaliacoes-barra{transform:scaleX(0);transform-origin:left center}
    .pf-avaliacoes.is-revealed .pf-avaliacoes-item{animation:pfAvaliacoesEntrar .5s ease forwards;animation-delay:var(--d,0s)}
    .pf-avaliacoes.is-revealed .pf-avaliacoes-grafico{animation:pfAvaliacoesEntrar .55s ease forwards;animation-delay:.5s}
    .pf-avaliacoes.is-revealed .pf-avaliacoes-barra{animation:pfAvaliacoesCrescer .7s cubic-bezier(.25,.8,.35,1) forwards;animation-delay:var(--d,0s)}
    .pf-avaliacoes.is-revealed .pf-avaliacoes-valor{animation:pfAvaliacoesSurgir .35s ease forwards;animation-delay:calc(var(--d,0s) + .45s)}
    .pf-avaliacoes.is-revealed .pf-avaliacoes-total{animation:pfAvaliacoesSurgir .4s ease forwards;animation-delay:1.35s}
    .pf-avaliacoes.is-revealed .pf-avaliacoes-pront{animation:pfAvaliacoesCheck .4s ease forwards;animation-delay:1.5s}
    @keyframes pfAvaliacoesEntrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    @keyframes pfAvaliacoesCrescer{to{transform:scaleX(1)}}
    @keyframes pfAvaliacoesSurgir{from{opacity:0}to{opacity:1}}
    @keyframes pfAvaliacoesCheck{from{opacity:0;transform:translateY(3px) scale(.96)}to{opacity:1;transform:none}}
}


/* ---------- maquete: documentos ---------- */
/* ==========================================================================
   PF-DOCUMENTOS — Documentos clinicos: A4 em miniatura, modelos, Oria redige.
   Sequencia: modelos e botao entram → status teal (dado entrando) → linhas
   "digitam-se" → assinatura → selo violeta (decisao humana) carimba no fim.
   ========================================================================== */

.pf-documentos-wrap { display: flex; flex-direction: column; height: 100%; }

.pf-documentos-top {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 10px; background: #ffffff; border-bottom: 1px solid #e2e8f0;
}
.pf-documentos-top strong { font-size: 0.7rem; font-weight: 600; color: #0f172a; }
.pf-documentos-top span {
    font-size: 0.55rem; color: #475569;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pf-documentos-cols { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; padding: 10px; }

/* --- Folha A4 --- */
.pf-documentos-main {
    flex: 1 1 auto; min-width: 0; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.pf-documentos-sheet {
    position: relative; height: 96%; max-width: 100%; aspect-ratio: 210 / 297;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 4px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    padding: 9% 9% 7%; display: flex; flex-direction: column; overflow: hidden;
}
.pf-documentos-kicker {
    font-size: 0.55rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: #2563eb;
}
.pf-documentos-titulo { margin-top: 4%; font-size: 0.7rem; line-height: 1.25; color: #0f172a; }
.pf-documentos-meta { margin-top: 2%; margin-bottom: 4%; font-size: 0.55rem; color: #475569; }
.pf-documentos-ln {
    width: var(--w, 100%); height: 5px; border-radius: 3px;
    background: #e2e8f0; margin-top: 5.5%; transform-origin: left center;
}
.pf-documentos-assin {
    margin-top: auto; padding-top: 6%;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pf-documentos-assin i { width: 62%; height: 1px; background: #cbd5e1; }
.pf-documentos-assin em { font-style: normal; font-size: 0.55rem; color: #475569; }

.pf-documentos-selo {
    position: absolute; right: 6%; bottom: 11%;
    padding: 3px 7px; border: 1.5px solid #7759f6; border-radius: 6px;
    background: rgba(255, 255, 255, 0.85); color: #7759f6;
    font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap; transform: rotate(-6deg);
}

/* Chip transiente teal (dado entrando); estado final = oculto, mesmo sem motion */
.pf-documentos-status {
    position: absolute; left: 2px; bottom: 2px; opacity: 0;
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px;
    border: 1px solid rgba(14, 154, 167, 0.35); border-radius: 999px;
    background: #e8f8fa; color: #0e9aa7;
    font-size: 0.55rem; font-weight: 600; white-space: nowrap;
}
.pf-documentos-status i { width: 6px; height: 6px; border-radius: 50%; background: #0e9aa7; }

/* --- Painel de modelos --- */
.pf-documentos-side {
    flex: 0 0 clamp(104px, 36%, 200px); min-width: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.pf-documentos-side-titulo {
    font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: #475569;
}
.pf-documentos-modelo {
    display: flex; align-items: center; gap: 7px; padding: 6px 8px; min-width: 0;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
}
.pf-documentos-modelo i {
    flex: 0 0 auto; width: 9px; height: 12px;
    background: #f7fafc; border: 1px solid #cbd5e1; border-radius: 2px 4px 2px 2px;
}
.pf-documentos-modelo span { flex: 1 1 auto; min-width: 0; }
.pf-documentos-modelo b, .pf-documentos-modelo small {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-documentos-modelo b { font-size: 0.6rem; font-weight: 600; color: #0f172a; }
.pf-documentos-modelo small { font-size: 0.55rem; color: #475569; }
.pf-documentos-ativo {
    border-color: #2563eb; background: #eff6ff;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
}
.pf-documentos-gerar {
    margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 6px 8px; border-radius: 999px; background: #7759f6; color: #ffffff;
    font-size: 0.6rem; font-weight: 600; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; box-shadow: 0 6px 14px rgba(119, 89, 246, 0.28);
}
.pf-documentos-nota { font-size: 0.55rem; line-height: 1.35; color: #475569; }

/* --- Animacao (so com motion; so quando .is-revealed) --- */
@media (prefers-reduced-motion: no-preference) {
    .pf-documentos .pf-documentos-sheet,
    .pf-documentos .pf-documentos-kicker,
    .pf-documentos .pf-documentos-titulo,
    .pf-documentos .pf-documentos-meta,
    .pf-documentos .pf-documentos-ln,
    .pf-documentos .pf-documentos-assin,
    .pf-documentos .pf-documentos-selo,
    .pf-documentos .pf-documentos-side-titulo,
    .pf-documentos .pf-documentos-modelo,
    .pf-documentos .pf-documentos-gerar,
    .pf-documentos .pf-documentos-nota { opacity: 0; }

    .pf-documentos.is-revealed .pf-documentos-sheet,
    .pf-documentos.is-revealed .pf-documentos-kicker,
    .pf-documentos.is-revealed .pf-documentos-titulo,
    .pf-documentos.is-revealed .pf-documentos-meta,
    .pf-documentos.is-revealed .pf-documentos-assin,
    .pf-documentos.is-revealed .pf-documentos-side-titulo,
    .pf-documentos.is-revealed .pf-documentos-modelo,
    .pf-documentos.is-revealed .pf-documentos-nota {
        animation: pfDocumentosEntrar 0.5s ease forwards; animation-delay: var(--d, 0s);
    }
    .pf-documentos.is-revealed .pf-documentos-gerar {
        animation: pfDocumentosEntrar 0.5s ease var(--d, 0s) forwards,
                   pfDocumentosClique 0.3s ease 0.85s;
    }
    .pf-documentos.is-revealed .pf-documentos-ln {
        animation: pfDocumentosLinha 0.45s ease forwards; animation-delay: var(--d, 0s);
    }
    .pf-documentos.is-revealed .pf-documentos-status {
        animation: pfDocumentosStatus 1.6s ease forwards; animation-delay: 0.7s;
    }
    .pf-documentos.is-revealed .pf-documentos-status i {
        animation: pfDocumentosPonto 1s ease-in-out infinite;
    }
    .pf-documentos.is-revealed .pf-documentos-selo {
        animation: pfDocumentosSelo 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
        animation-delay: var(--d, 0s);
    }

    @keyframes pfDocumentosEntrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @keyframes pfDocumentosLinha { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
    @keyframes pfDocumentosClique { 0%, 100% { transform: none; } 50% { transform: scale(0.95); } }
    @keyframes pfDocumentosStatus { 0% { opacity: 0; transform: translateY(4px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes pfDocumentosSelo { from { opacity: 0; transform: rotate(-6deg) scale(1.5); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
    @keyframes pfDocumentosPonto { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
}


/* ---------- maquete: financeiro ---------- */
/* ===== pf-financeiro — Painel financeiro ===== */
.pf-financeiro .pframe-body{background:#fff}
.pf-financeiro-app{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
.pf-financeiro-app *{box-sizing:border-box}
.pf-financeiro-topo{flex:none;display:flex;align-items:baseline;gap:.45rem;padding:.45rem .6rem;border-bottom:1px solid #e2e8f0}
.pf-financeiro-topo strong{font-size:.7rem;color:#0f172a}
.pf-financeiro-topo span{font-size:.56rem;color:#475569}
.pf-financeiro-cards{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;padding:.45rem .6rem 0}
.pf-financeiro-card{display:flex;flex-direction:column;gap:.05rem;background:#f7fafc;border:1px solid #e2e8f0;border-radius:.5rem;padding:.3rem .4rem;min-width:0}
.pf-financeiro-card i{font-style:normal;font-size:.5rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-financeiro-card b{font-size:.68rem;color:#0f172a}
.pf-financeiro-grafico{flex:1;min-height:0;display:flex;align-items:flex-end;gap:.4rem;padding:.5rem .8rem .2rem}
.pf-financeiro-barra{flex:1;height:var(--h,40%);background:linear-gradient(180deg,#38bdc9,#0e9aa7);border-radius:.25rem .25rem 0 0;transform-origin:bottom}
.pf-financeiro-barra-atual{background:linear-gradient(180deg,#8b74f8,#7759f6)}
.pf-financeiro-linha{flex:none;display:flex;align-items:center;gap:.4rem;margin:.3rem .6rem 0;background:#f7fafc;border:1px solid #e2e8f0;border-radius:.5rem;padding:.3rem .45rem;font-size:.58rem}
.pf-financeiro-quem{color:#0f172a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-financeiro-valor{margin-left:auto;color:#0f172a;font-weight:600;white-space:nowrap}
.pf-financeiro-status{position:relative;flex:none;width:3.9rem;text-align:center}
.pf-financeiro-status em{font-style:normal;font-size:.52rem;border-radius:999px;padding:.08rem .35rem;white-space:nowrap}
.pf-financeiro-aguarda{display:none;color:#475569;background:#e2e8f0}
.pf-financeiro-pago{color:#166534;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.3)}
.pf-financeiro-rodape{flex:none;padding:.32rem .6rem;border-top:1px solid #e2e8f0;font-size:.52rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (prefers-reduced-motion: no-preference){
  .pf-financeiro .pf-financeiro-anim{opacity:0}
  .pf-financeiro.is-revealed .pf-financeiro-anim{animation:pfFinEntrar .45s ease forwards;animation-delay:var(--d,0s)}
  @keyframes pfFinEntrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .pf-financeiro.is-revealed .pf-financeiro-barra{animation:pfFinBarra .5s ease forwards,pfFinCrescer .6s ease forwards;animation-delay:var(--d,0s)}
  @keyframes pfFinCrescer{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
  @keyframes pfFinBarra{from{opacity:0}to{opacity:1}}
  /* a cobranca troca Aguardando -> Pago no fim da sequencia */
  .pf-financeiro .pf-financeiro-aguarda{display:inline-block}
  .pf-financeiro .pf-financeiro-pago{display:none}
  .pf-financeiro.is-revealed .pf-financeiro-aguarda{animation:pfFinSome .1s linear forwards;animation-delay:2.6s}
  .pf-financeiro.is-revealed .pf-financeiro-pago{display:inline-block;opacity:0;animation:pfFinBarra .3s ease forwards;animation-delay:2.6s}
  @keyframes pfFinSome{to{display:none;opacity:0;position:absolute;left:0;right:0}}
}


/* ---------- maquete: equipe ---------- */
/* ===== pf-equipe — Equipe da clinica ===== */
.pf-equipe .pframe-body{background:#fff}
.pf-equipe-app{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
.pf-equipe-app *{box-sizing:border-box}
.pf-equipe-topo{flex:none;display:flex;align-items:center;padding:.45rem .6rem;border-bottom:1px solid #e2e8f0}
.pf-equipe-topo strong{font-size:.7rem;color:#0f172a}
.pf-equipe-add{margin-left:auto;font-size:.56rem;color:#fff;background:#2563eb;border-radius:.45rem;padding:.18rem .5rem;white-space:nowrap}
.pf-equipe-lista{flex:1;min-height:0;display:flex;flex-direction:column;gap:.35rem;padding:.5rem .6rem;background:#f7fafc;overflow:hidden}
.pf-equipe-membro{display:flex;align-items:center;gap:.45rem;background:#fff;border:1px solid #e2e8f0;border-radius:.55rem;padding:.32rem .45rem;min-width:0}
.pf-equipe-avatar{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;font-size:.55rem;font-weight:700;color:#fff;background:var(--cor,#0e9aa7)}
.pf-equipe-quem{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pf-equipe-quem b{font-size:.62rem;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-equipe-quem i{font-style:normal;font-size:.52rem;color:#475569}
.pf-equipe-tags{margin-left:auto;display:flex;gap:.25rem;flex:none;max-width:52%;overflow:hidden}
.pf-equipe-tags em{font-style:normal;font-size:.5rem;color:#0c7d88;background:rgba(14,154,167,.1);border:1px solid rgba(14,154,167,.3);border-radius:999px;padding:.06rem .32rem;white-space:nowrap}
.pf-equipe-tag-neg{color:#475569!important;background:#f1f5f9!important;border-color:#e2e8f0!important}
.pf-equipe-convite{flex:none;display:flex;align-items:center;gap:.45rem;margin:.15rem .6rem .4rem;background:#fff;border:1px solid rgba(119,89,246,.35);border-left:3px solid #7759f6;border-radius:.55rem;padding:.32rem .45rem}
.pf-equipe-convite-icone{flex:none;width:1.15rem;height:1.15rem;border-radius:50%;display:grid;place-items:center;font-size:.6rem;color:#fff;background:#7759f6}
.pf-equipe-convite-texto{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.pf-equipe-convite-texto b{font-size:.58rem;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-equipe-convite-texto i{font-style:normal;font-size:.5rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-equipe-rodape{flex:none;padding:.3rem .6rem;border-top:1px solid #e2e8f0;font-size:.52rem;color:#475569}

@media (prefers-reduced-motion: no-preference){
  .pf-equipe .pf-equipe-anim{opacity:0}
  .pf-equipe.is-revealed .pf-equipe-anim{animation:pfEquipeEntrar .45s ease forwards;animation-delay:var(--d,0s)}
  @keyframes pfEquipeEntrar{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
}


/* ---------- maquete: pacientes ---------- */
/* ===== pf-pacientes — Lista de pacientes ===== */
.pf-pacientes .pframe-body{background:#fff}
.pf-pacientes-app{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
.pf-pacientes-app *{box-sizing:border-box}
.pf-pacientes-topo{flex:none;display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border-bottom:1px solid #e2e8f0}
.pf-pacientes-topo strong{font-size:.7rem;color:#0f172a}
.pf-pacientes-busca{margin-left:auto;flex:1;max-width:9rem;font-size:.54rem;color:#64748b;background:#f7fafc;border:1px solid #e2e8f0;border-radius:999px;padding:.2rem .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-pacientes-lista{flex:1;min-height:0;display:flex;flex-direction:column;gap:.3rem;padding:.45rem .6rem;background:#f7fafc;overflow:hidden}
.pf-pacientes-linha{display:flex;align-items:center;gap:.45rem;background:#fff;border:1px solid #e2e8f0;border-radius:.55rem;padding:.28rem .45rem;min-width:0}
.pf-pacientes-hoje{border-color:rgba(14,154,167,.45);box-shadow:0 0 0 1px rgba(14,154,167,.18)}
.pf-pacientes-avatar{flex:none;width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;font-size:.52rem;font-weight:700;color:#fff;background:var(--cor,#0e9aa7)}
.pf-pacientes-quem{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pf-pacientes-quem b{font-size:.62rem;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-pacientes-quem i{font-style:normal;font-size:.52rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-pacientes-tag{flex:none;margin-left:auto;font-style:normal;font-size:.5rem;color:#0c7d88;background:rgba(14,154,167,.1);border:1px solid rgba(14,154,167,.35);border-radius:999px;padding:.06rem .32rem;white-space:nowrap}
.pf-pacientes-acoes{flex:none;display:flex;gap:.3rem;margin-left:.3rem}
.pf-pacientes-hoje .pf-pacientes-acoes{margin-left:.3rem}
.pf-pacientes-linha:not(.pf-pacientes-hoje) .pf-pacientes-acoes{margin-left:auto}
.pf-pacientes-acoes i{font-style:normal;font-size:.6rem;color:#64748b;background:#f7fafc;border:1px solid #e2e8f0;border-radius:.35rem;width:1.1rem;height:1.1rem;display:grid;place-items:center}
.pf-pacientes-rodape{flex:none;padding:.3rem .6rem;border-top:1px solid #e2e8f0;font-size:.52rem;color:#475569}

@media (prefers-reduced-motion: no-preference){
  .pf-pacientes .pf-pacientes-anim{opacity:0}
  .pf-pacientes.is-revealed .pf-pacientes-anim{animation:pfPacEntrar .4s ease forwards;animation-delay:var(--d,0s)}
  @keyframes pfPacEntrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
