/*
 * PORTAL DO PACIENTE - tema Velzon (29/09/2026).
 *
 * Complementa o Velzon do sistema (assets/default: bootstrap + icons + app) com o
 * desenho do portal: cabeçalho de vidro, herói em degradê da marca, cartões que
 * flutuam, linha do tempo, agendamento em passos, carrossel de propagandas e a
 * barra de navegação inferior no celular. Todas as cores saem das variáveis do
 * tema (--vz-*), então o modo escuro (data-bs-theme="dark") vem junto.
 *
 * Movimento: tudo que anima respeita prefers-reduced-motion.
 */

:root {
    /* Cantos dos cartões no padrão do Velzon (quadrados, 0.25rem) - pedido de 29/09/2026. */
    --pp-raio: var(--vz-card-border-radius, .25rem);
    --pp-raio-sm: var(--vz-card-border-radius, .25rem);
    --pp-sombra: 0 .25rem 1.25rem rgba(var(--vz-dark-rgb), .06), 0 .0625rem .25rem rgba(var(--vz-dark-rgb), .04);
    --pp-sombra-alta: 0 1rem 2.5rem rgba(var(--vz-dark-rgb), .12), 0 .25rem .75rem rgba(var(--vz-dark-rgb), .06);
    /*
     * Raio-X 10 (A1): fundo das superfícies do portal. O --vz-card-bg do Velzon só
     * existe DENTRO de .card - fora dele caía no #fff e o tema escuro ficava branco.
     */
    --pp-card: var(--vz-secondary-bg);
    --pp-marca-1: var(--vz-primary);
    /*
     * Raio-X 10 (M13): o degradê termina num verde mais escuro que o success do
     * Velzon (#0ab39c dá ~2.6:1 com branco); #087f6f dá ~4.9:1 com o texto branco
     * dos elementos ativos (menu, abas, dias, horários).
     */
    --pp-marca-2: #087f6f;
    --pp-marca-rgb: var(--vz-primary-rgb);
    --pp-topo: 4.25rem;
    --pp-rodape: 4.5rem;
    --pp-vidro: rgba(var(--vz-body-bg-rgb, 243, 243, 249), .72);
}

/* ------------------------------------------------------------------ base */

html { scroll-behavior: smooth; }

/*
 * Raio-X 10 (M13): texto "muted" do portal mais escuro que o #878a99 do Velzon
 * (3.4:1 no claro) - #6b6e7c dá ~5:1 no cartão branco; no escuro, um cinza mais claro.
 */
body.pp { --vz-secondary-color: #6b6e7c; --vz-secondary-color-rgb: 107, 110, 124; }
[data-bs-theme="dark"] body.pp { --vz-secondary-color: #a2a5b3; --vz-secondary-color-rgb: 162, 165, 179; }

/* Tema escuro: o btn-soft-primary do Velzon (#405189 sobre fundo escuro) fica ilegível. */
[data-bs-theme="dark"] .pp .btn-soft-primary { --vz-btn-color: #9aa8dc; }
[data-bs-theme="dark"] .pp .text-primary:not(.btn) { color: #8c9bd0 !important; }

body.pp {
    min-height: 100vh;
    background-color: var(--vz-body-bg);
    background-image:
        radial-gradient(60rem 30rem at 110% -10%, rgba(var(--vz-success-rgb), .10), transparent 60%),
        radial-gradient(50rem 28rem at -10% 0%, rgba(var(--vz-primary-rgb), .12), transparent 60%);
    background-attachment: fixed;
    padding-top: var(--pp-topo);
    padding-bottom: 2rem;
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 991.98px) {
    body.pp { padding-bottom: calc(var(--pp-rodape) + env(safe-area-inset-bottom) + 1.5rem); }
}

.pp-container { max-width: 1180px; }

.pp a { text-decoration: none; }
.pp .min-w-0 { min-width: 0; }

.pp .card {
    border: 0;
    border-radius: var(--pp-raio);
    box-shadow: var(--pp-sombra);
    margin-bottom: 1.25rem;
}

.pp .card-body { padding: 1.35rem; }

.pp .btn { border-radius: 50rem; font-weight: 500; }
.pp .btn-icon { border-radius: 50%; }

.pp-titulo-secao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 1.75rem 0 .9rem;
}

.pp-titulo-secao h2, .pp-titulo-secao h5 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.pp-titulo-secao .pp-link-mais { font-size: .85rem; font-weight: 500; display: inline-flex; align-items: center; gap: .2rem; min-height: 2.75rem; }

.pp-rotulo {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vz-secondary-color);
}

.pp-flutua { transition: transform .25s ease, box-shadow .25s ease; }

@media (hover: hover) {
    .pp-flutua:hover { transform: translateY(-3px); box-shadow: var(--pp-sombra-alta); }
}

/* ------------------------------------------------------------------ cabeçalho (vidro) */

.pp-topo {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--pp-topo);
    z-index: 1030;
    display: flex;
    align-items: center;
    background: var(--pp-vidro);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid rgba(var(--vz-dark-rgb), .06);
    transition: box-shadow .2s ease;
}

.pp-topo.is-rolado { box-shadow: 0 .5rem 1.5rem rgba(var(--vz-dark-rgb), .08); }

[data-bs-theme="dark"] .pp-topo { --pp-vidro: rgba(26, 29, 33, .72); border-bottom-color: rgba(255, 255, 255, .06); }

.pp-marca { display: flex; align-items: center; gap: .6rem; min-width: 0; color: var(--vz-heading-color, var(--vz-body-color)); }
.pp-marca img { max-height: 2.1rem; max-width: 9.5rem; object-fit: contain; }
.pp-marca-letra {
    width: 2.25rem; height: 2.25rem; border-radius: .75rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700;
    background: linear-gradient(135deg, var(--pp-marca-1), var(--pp-marca-2));
}
.pp-marca-nome { font-weight: 600; white-space: nowrap; }

.pp-menu { display: flex; gap: .25rem; }
.pp-menu a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: 50rem;
    color: var(--vz-secondary-color); font-weight: 500; font-size: .9rem;
    transition: background-color .2s ease, color .2s ease;
}
.pp-menu a i { font-size: 1.1rem; }
.pp-menu a:hover { color: var(--vz-primary); background: rgba(var(--vz-primary-rgb), .07); }
.pp-menu a.active { color: #fff; background: linear-gradient(135deg, var(--pp-marca-1), var(--pp-marca-2)); box-shadow: 0 .35rem 1rem rgba(var(--pp-marca-rgb), .35); }

.pp-acao-topo {
    position: relative;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--vz-body-color); font-size: 1.3rem;
    background: transparent; border: 0;
    transition: background-color .2s ease;
}
.pp-acao-topo:hover { background: rgba(var(--vz-primary-rgb), .08); color: var(--vz-primary); }
.pp-selo-num {
    position: absolute; top: .2rem; right: .15rem;
    min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
    border-radius: 50rem; font-size: .65rem; font-weight: 700; line-height: 1.1rem; text-align: center;
    color: #fff; background: var(--vz-danger);
    box-shadow: 0 0 0 2px var(--vz-body-bg);
}
.pp-avatar {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--pp-marca-2), var(--pp-marca-1));
    border: 2px solid var(--pp-card);
    box-shadow: 0 .25rem .75rem rgba(var(--pp-marca-rgb), .3);
}

/* Tema claro/escuro: troca o ícone. */
[data-bs-theme="dark"] .pp-tema .ri-moon-line { display: none; }
:root:not([data-bs-theme="dark"]) .pp-tema .ri-sun-line { display: none; }

/* ------------------------------------------------------------------ barra inferior (celular) */

.pp-rodape {
    position: fixed;
    inset: auto .75rem calc(.75rem + env(safe-area-inset-bottom)) .75rem;
    z-index: 1030;
    height: var(--pp-rodape);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    border-radius: 1.5rem;
    background: var(--pp-vidro);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 .75rem 2rem rgba(var(--vz-dark-rgb), .16);
    border: 1px solid rgba(var(--vz-dark-rgb), .06);
}
[data-bs-theme="dark"] .pp-rodape { --pp-vidro: rgba(33, 37, 41, .82); border-color: rgba(255, 255, 255, .06); }

.pp-rodape a {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    color: var(--vz-secondary-color); font-size: .75rem; font-weight: 500;
    padding: .35rem 0;
    /* Raio-X 10 (M11): o link ocupa a altura toda da barra (alvo de toque >= 44px). */
    height: 100%; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.pp-rodape a i { font-size: 1.35rem; line-height: 1; transition: transform .2s ease; }
.pp-rodape a.active { color: var(--vz-primary); }
.pp-rodape a.active i { transform: translateY(-2px); }
.pp-rodape a.active::after {
    content: ""; width: .3rem; height: .3rem; border-radius: 50%;
    background: var(--vz-primary); margin-top: .1rem;
}

.pp-rodape .pp-fab {
    width: 3.6rem; height: 3.6rem; margin: -2.2rem auto 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.7rem;
    background: linear-gradient(135deg, var(--pp-marca-1), var(--pp-marca-2));
    box-shadow: 0 .75rem 1.5rem rgba(var(--pp-marca-rgb), .45);
    border: 4px solid var(--vz-body-bg);
}
.pp-rodape .pp-fab i { font-size: 1.7rem; }
.pp-rodape .pp-fab::after { display: none; }

/* ------------------------------------------------------------------ herói */

.pp-heroi {
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-raio);
    color: #fff;
    padding: 1.75rem;
    background: linear-gradient(125deg, var(--pp-marca-1) 0%, rgba(var(--vz-primary-rgb), .92) 45%, var(--pp-marca-2) 130%);
    box-shadow: 0 1.25rem 2.5rem rgba(var(--pp-marca-rgb), .28);
    isolation: isolate;
}
.pp-heroi::before, .pp-heroi::after {
    content: ""; position: absolute; border-radius: 50%; z-index: -1;
    background: rgba(255, 255, 255, .08);
}
.pp-heroi::before { width: 22rem; height: 22rem; right: -6rem; top: -9rem; }
.pp-heroi::after { width: 14rem; height: 14rem; right: 8rem; bottom: -8rem; background: rgba(255, 255, 255, .06); }
.pp-heroi .pp-heroi-brilho {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(30rem 12rem at 15% 0%, rgba(255, 255, 255, .18), transparent 70%);
}

.pp-saudacao { font-size: clamp(1.45rem, 3.2vw, 2rem); font-weight: 700; letter-spacing: -.02em; margin: 0; }
.pp-saudacao-sub { opacity: .85; margin: .35rem 0 0; }
.pp-hoje { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; opacity: .9; background: rgba(255, 255, 255, .14); padding: .3rem .75rem; border-radius: 50rem; }

/* Bilhete da próxima consulta, dentro do herói */
.pp-bilhete {
    margin-top: 1.5rem;
    border-radius: var(--pp-raio);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1.1rem 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.25rem;
    align-items: center;
}
.pp-bilhete-dia {
    width: 4.5rem; text-align: center;
    border-radius: 1rem; background: #fff; color: var(--vz-primary);
    padding: .5rem 0; line-height: 1.05;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}
.pp-bilhete-dia .dia { display: block; font-size: 1.75rem; font-weight: 800; }
.pp-bilhete-dia .mes { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--vz-secondary-color); }
.pp-bilhete h4, .pp-bilhete .pp-bilhete-titulo { color: #fff; margin: 0 0 .15rem; font-weight: 700; font-size: 1.15rem; }
.pp-bilhete-info { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; opacity: .92; }
.pp-bilhete-info span { display: inline-flex; align-items: center; gap: .3rem; }
.pp-bilhete-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.pp-bilhete-acoes .btn-light { color: var(--vz-primary); }
.pp-bilhete-acoes .btn-vidro { color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }
.pp-bilhete-acoes .btn-vidro:hover { background: rgba(255, 255, 255, .26); color: #fff; }

/* Contagem regressiva */
.pp-contagem { display: flex; gap: .5rem; }
.pp-contagem > div {
    min-width: 3.4rem; text-align: center; border-radius: .9rem;
    background: rgba(255, 255, 255, .16); padding: .45rem .35rem; line-height: 1.1;
}
.pp-contagem strong { display: block; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-contagem small { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }

@media (min-width: 768px) {
    .pp-bilhete { grid-template-columns: auto 1fr auto; }
    .pp-bilhete-acoes { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ atalhos */

.pp-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
@media (max-width: 575.98px) { .pp-atalhos { grid-template-columns: repeat(4, 1fr); gap: .5rem; } }

.pp-atalho {
    display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
    padding: 1rem .5rem; border-radius: var(--pp-raio);
    background: var(--pp-card); box-shadow: var(--pp-sombra);
    color: var(--vz-body-color); font-size: .8rem; font-weight: 500;
    position: relative;
}
.pp-atalho .pp-atalho-icone {
    width: 3rem; height: 3rem; border-radius: 1rem;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.45rem;
}
.pp-atalho .pp-selo-num { top: .5rem; right: .75rem; }
@media (max-width: 575.98px) {
    .pp-atalho { padding: .8rem .25rem; font-size: .7rem; }
    .pp-atalho .pp-atalho-icone { width: 2.6rem; height: 2.6rem; font-size: 1.25rem; }
}

/* Números da jornada */
.pp-numero { display: flex; align-items: center; gap: .9rem; }
.pp-numero-icone { width: 3rem; height: 3rem; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; flex: 0 0 auto; }
.pp-numero h3, .pp-numero .pp-numero-valor { margin: 0; font-weight: 700; font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pp-numero p { margin: 0; color: var(--vz-secondary-color); font-size: .82rem; }

/* Avisos (termos, pagamentos) */
.pp-aviso {
    display: flex; align-items: center; gap: .9rem;
    padding: .9rem 1.1rem; border-radius: var(--pp-raio);
    color: var(--vz-body-color);
    margin-bottom: .75rem;
    box-shadow: var(--pp-sombra);
    background-color: var(--pp-card);
}
.pp-aviso strong { display: block; font-size: .92rem; }
.pp-aviso span { font-size: .8rem; color: var(--vz-secondary-color); }
.pp-aviso .ri-arrow-right-s-line { margin-left: auto; font-size: 1.3rem; color: var(--vz-secondary-color); }

/* ------------------------------------------------------------------ carrossel de propagandas */

.pp-propagandas { position: relative; margin: 1.5rem 0 .5rem; }
.pp-propagandas .swiper { border-radius: var(--pp-raio); box-shadow: var(--pp-sombra); }

.pp-slide {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 8 / 3; min-height: 9rem; max-height: 13rem; width: 100%;
    border-radius: var(--pp-raio);
    color: var(--vz-body-color);
    background-color: var(--pp-card);
}
@media (max-width: 575.98px) { .pp-slide { aspect-ratio: 16 / 7; } }
.pp-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.swiper-slide-active .pp-slide img { transform: scale(1.04); }
.pp-slide.tem-imagem { color: #fff; }
.pp-slide.tem-imagem::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .25) 55%, transparent 80%);
}
.pp-slide-texto {
    position: relative; z-index: 1; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 1.25rem 1.75rem; max-width: 36rem; gap: .35rem;
}
.pp-slide-texto h3 { color: inherit; font-weight: 700; margin: 0; font-size: clamp(1.05rem, 2.6vw, 1.6rem); letter-spacing: -.01em; }
.pp-slide-texto p { margin: 0; opacity: .9; font-size: clamp(.8rem, 1.6vw, .95rem); }
.pp-slide-texto .btn { margin-top: .5rem; }
.pp-slide .degrade-selo { position: absolute; right: 1.75rem; top: 50%; transform: translateY(-50%); z-index: 1; }
@media (max-width: 575.98px) { .pp-slide .degrade-selo { display: none; } .pp-slide-texto { padding: 1rem 1.15rem; } }

.pp-propagandas .swiper-pagination { bottom: .6rem !important; }
.pp-propagandas .swiper-pagination-bullet { width: .45rem; height: .45rem; background: #fff; opacity: .55; transition: width .3s ease, opacity .3s ease; }
.pp-propagandas .swiper-pagination-bullet-active { width: 1.4rem; border-radius: 50rem; opacity: 1; }
.pp-propagandas:not(.tem-imagens) .swiper-pagination-bullet { background: var(--vz-primary); }

.pp-propagandas-progresso {
    position: absolute; left: 0; bottom: 0; height: 3px; z-index: 5;
    background: rgba(255, 255, 255, .85); width: 0;
    border-radius: 0 3px 3px 0;
}
.pp-propagandas-marca { position: absolute; left: .75rem; top: .6rem; z-index: 6; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .25); padding: .15rem .5rem; border-radius: 50rem; }
.pp-propagandas:not(.tem-imagens) .pp-propagandas-marca { color: var(--vz-secondary-color); background: rgba(var(--vz-dark-rgb), .06); }

/* ------------------------------------------------------------------ consultas */

.pp-abas {
    display: inline-flex; padding: .3rem; gap: .25rem; border-radius: 50rem;
    background: var(--pp-card); box-shadow: var(--pp-sombra);
}
.pp-abas button {
    border: 0; background: transparent; border-radius: 50rem;
    padding: .5rem 1.1rem; font-weight: 500; font-size: .88rem;
    color: var(--vz-secondary-color);
    transition: background-color .2s ease, color .2s ease;
}
.pp-abas button.active { background: linear-gradient(135deg, var(--pp-marca-1), var(--pp-marca-2)); color: #fff; box-shadow: 0 .35rem 1rem rgba(var(--pp-marca-rgb), .3); }
.pp-abas .badge { margin-left: .3rem; }

.pp-chips { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .1rem .6rem; scrollbar-width: none; }
.pp-chips::-webkit-scrollbar { display: none; }
.pp-chip {
    flex: 0 0 auto; border: 1px solid var(--vz-border-color); background: var(--pp-card);
    border-radius: 50rem; padding: .35rem .9rem; font-size: .8rem; font-weight: 500; color: var(--vz-body-color);
    transition: all .2s ease;
}
.pp-chip.active { border-color: var(--vz-primary); color: var(--vz-primary); background: rgba(var(--vz-primary-rgb), .08); }

.pp-consulta { overflow: hidden; }
.pp-consulta .card-body { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.1rem; }
.pp-data-bloco {
    width: 4.25rem; border-radius: 1rem; text-align: center; overflow: hidden;
    background: rgba(var(--vz-primary-rgb), .08); color: var(--vz-primary); align-self: start;
}
.pp-data-bloco .semana { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--vz-primary); color: #fff; padding: .2rem 0; }
.pp-data-bloco .dia { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.15; padding-top: .2rem; }
.pp-data-bloco .mes { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; padding-bottom: .35rem; }
.pp-consulta h5 { margin: 0 0 .2rem; font-weight: 600; }
.pp-consulta .pp-linha-info { display: flex; align-items: flex-start; gap: .4rem; color: var(--vz-secondary-color); font-size: .84rem; margin-top: .2rem; }
.pp-consulta .pp-linha-info i { margin-top: .1rem; }
.pp-consulta .pp-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .9rem; border-top: 1px dashed var(--vz-border-color); }
/* 19/10/2026: o cartão estica para a altura do vizinho (h-100) e a sobra ia para a linha das ações - os
   botões esticavam (Testar câmera/Adicionar à agenda com 49px) e o Pagar, dentro do form, não. Agora cada
   botão fica na altura dele (a mesma do Pagar) e a linha das ações desce para o pé do cartão. */
.pp-consulta .pp-acoes { align-items: center; align-self: end; }
.pp-consulta .pp-acoes > form { display: flex; }
.pp-consulta .pp-quando { font-size: .75rem; font-weight: 600; }
.pp-consulta.is-proxima { box-shadow: 0 0 0 2px rgba(var(--vz-primary-rgb), .35), var(--pp-sombra); }

/* Linha do tempo (histórico, prescrições) */
.pp-linha { position: relative; padding-left: 1.6rem; }
.pp-linha::before { content: ""; position: absolute; left: .55rem; top: .25rem; bottom: .25rem; width: 2px; background: linear-gradient(var(--vz-border-color), transparent); }
.pp-linha-mes { position: relative; margin: 1.25rem 0 .6rem -1.6rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vz-secondary-color); background: var(--vz-body-bg); display: inline-block; padding: .15rem .6rem; border-radius: 50rem; }
.pp-linha-mes:first-child { margin-top: 0; }
.pp-linha-item { position: relative; }
.pp-linha-item::before {
    content: ""; position: absolute; left: -1.38rem; top: 1.35rem;
    width: .85rem; height: .85rem; border-radius: 50%;
    background: var(--pp-card); border: 3px solid var(--pp-ponto, var(--vz-secondary));
}
.pp-linha-item .card { margin-bottom: .75rem; }
.pp-linha-item .card-body { padding: 1rem 1.15rem; }
.pp-linha-item.is-realizado { --pp-ponto: var(--vz-success); }
.pp-linha-item.is-cancelado { --pp-ponto: var(--vz-danger); }
.pp-linha-item.is-falta { --pp-ponto: var(--vz-warning); }
.pp-linha-item.is-encerrado { --pp-ponto: var(--vz-secondary-color); }
.pp-linha-item.is-receita { --pp-ponto: var(--vz-info); }

.pp-produtos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.pp-produtos span { font-size: .75rem; padding: .2rem .6rem; border-radius: 50rem; background: rgba(var(--vz-info-rgb), .1); color: var(--vz-info); }

/* ------------------------------------------------------------------ agendar / reagendar */

.pp-passos { display: flex; gap: .4rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.pp-passos .pp-passo { flex: 1; }
.pp-passos .pp-passo-barra { height: .35rem; border-radius: 50rem; background: rgba(var(--vz-dark-rgb), .08); overflow: hidden; }
.pp-passos .pp-passo-barra::after { content: ""; display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pp-marca-1), var(--pp-marca-2)); transition: width .45s ease; }
.pp-passos .pp-passo.is-feito .pp-passo-barra::after, .pp-passos .pp-passo.is-ativo .pp-passo-barra::after { width: 100%; }
.pp-passos .pp-passo span { display: block; font-size: .75rem; font-weight: 600; margin-top: .4rem; color: var(--vz-secondary-color); }
.pp-passos .pp-passo.is-ativo span { color: var(--vz-primary); }
@media (max-width: 575.98px) { .pp-passos .pp-passo span { display: none; } .pp-passos .pp-passo.is-ativo span { display: block; } }

.pp-etapa { animation: pp-entra .35s ease both; }
.pp-etapa h4, .pp-etapa .pp-etapa-titulo { font-weight: 700; letter-spacing: -.01em; margin-bottom: .25rem; }
.pp-etapa > p { color: var(--vz-secondary-color); margin-bottom: 1.25rem; }

.pp-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; }
.pp-opcao {
    display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
    padding: 1rem; border-radius: var(--pp-raio); border: 2px solid transparent;
    background: var(--pp-card); box-shadow: var(--pp-sombra); color: var(--vz-body-color);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pp-opcao:hover, .pp-opcao:focus-visible { border-color: rgba(var(--vz-primary-rgb), .45); transform: translateY(-2px); outline: 0; }
.pp-opcao img, .pp-opcao .pp-opcao-letra { width: 3.25rem; height: 3.25rem; border-radius: 1rem; object-fit: cover; flex: 0 0 auto; }
.pp-opcao .pp-opcao-letra { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; color: var(--vz-primary); background: rgba(var(--vz-primary-rgb), .1); }
.pp-opcao .nome { display: block; font-weight: 600; }
.pp-opcao .sub { display: block; font-size: .8rem; color: var(--vz-secondary-color); }
.pp-opcao .pp-opcao-extra { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .72rem; font-weight: 600; color: var(--vz-success); background: rgba(var(--vz-success-rgb), .1); padding: .15rem .55rem; border-radius: 50rem; }
.pp-opcao .ri-arrow-right-s-line { margin-left: auto; font-size: 1.4rem; color: var(--vz-secondary-color); }

.pp-dias { display: flex; gap: .6rem; overflow-x: auto; padding: .35rem .1rem 1rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.pp-dia {
    flex: 0 0 4.4rem; scroll-snap-align: start;
    border: 2px solid transparent; border-radius: 1.1rem; padding: .65rem 0;
    background: var(--pp-card); box-shadow: var(--pp-sombra); color: var(--vz-body-color);
    display: flex; flex-direction: column; align-items: center; line-height: 1.15;
    transition: all .2s ease;
}
.pp-dia small { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vz-secondary-color); }
.pp-dia strong { font-size: 1.4rem; font-weight: 800; }
.pp-dia span { font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--vz-secondary-color); }
.pp-dia em { font-style: normal; font-size: .75rem; margin-top: .2rem; color: var(--vz-success); font-weight: 600; }
.pp-dia:hover { border-color: rgba(var(--vz-primary-rgb), .35); }
.pp-dia.active { border-color: transparent; color: #fff; background: linear-gradient(160deg, var(--pp-marca-1), var(--pp-marca-2)); box-shadow: 0 .6rem 1.2rem rgba(var(--pp-marca-rgb), .35); }
.pp-dia.active small, .pp-dia.active span, .pp-dia.active em { color: rgba(255, 255, 255, .9); }
.pp-mes-rotulo { font-weight: 600; margin: .25rem 0 .5rem; }
.pp-acoes .btn, .pp-bilhete-acoes .btn { white-space: nowrap; }

.pp-periodo { margin-top: 1rem; }
.pp-periodo h6 { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--vz-secondary-color); margin-bottom: .6rem; }
.pp-horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.pp-horario {
    border: 1.5px solid var(--vz-border-color); border-radius: .9rem; padding: .6rem .25rem;
    background: var(--pp-card); font-weight: 600; color: var(--vz-body-color); font-variant-numeric: tabular-nums;
    transition: all .15s ease; line-height: 1.15;
}
.pp-horario small { display: block; font-size: .75rem; font-weight: 500; color: var(--vz-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .25rem; }
.pp-horario:hover { border-color: var(--vz-primary); color: var(--vz-primary); }
.pp-horario.active { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--pp-marca-1), var(--pp-marca-2)); }
.pp-horario.active small { color: rgba(255, 255, 255, .85); }

.pp-resumo { border-radius: var(--pp-raio); padding: .25rem 0; }
.pp-resumo-linha { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-bottom: 1px dashed var(--vz-border-color); }
.pp-resumo-linha:last-child { border-bottom: 0; }
.pp-resumo-linha i { width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: 0 0 auto; }
.pp-resumo-linha small { display: block; color: var(--vz-secondary-color); font-size: .75rem; }
.pp-resumo-linha strong { font-weight: 600; }

.pp-modalidades { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pp-modalidade {
    border: 2px solid var(--vz-border-color); border-radius: 1rem; padding: .85rem; background: var(--pp-card);
    display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--vz-body-color); transition: all .2s ease;
}
.pp-modalidade i { font-size: 1.35rem; color: var(--vz-primary); }
.pp-modalidade.active { border-color: var(--vz-primary); background: rgba(var(--vz-primary-rgb), .06); }
/* O valor embaixo do nome (11/10/2026, pedido): ao lado ele passava do cartão. */
.pp-modalidade-texto { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; text-align: left; }
.pp-modalidade-valor { margin-top: .15rem; font-size: .8rem; font-weight: 500; color: var(--vz-secondary-color); white-space: nowrap; }
.pp-modalidade.active .pp-modalidade-valor { color: var(--vz-primary); }
.pp-modalidade-valor[hidden] { display: none; }

.pp-lateral { position: sticky; top: calc(var(--pp-topo) + 1rem); }

/* Barra fixa de confirmar no celular */
.pp-barra-confirmar { display: none; }
@media (max-width: 991.98px) {
    .pp-barra-confirmar.is-visivel {
        display: flex; align-items: center; gap: .75rem;
        position: fixed; z-index: 1031; left: .75rem; right: .75rem;
        bottom: calc(var(--pp-rodape) + 1.5rem + env(safe-area-inset-bottom));
        padding: .75rem .9rem; border-radius: var(--pp-raio);
        background: var(--pp-card); box-shadow: var(--pp-sombra-alta);
        animation: pp-sobe .3s ease both;
    }
    .pp-barra-confirmar .pp-barra-texto { min-width: 0; flex: 1; font-size: .8rem; line-height: 1.25; }
    .pp-barra-confirmar .pp-barra-texto strong { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Sucesso */
.pp-sucesso {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; text-align: center; padding: 2rem;
    background: rgba(var(--vz-body-bg-rgb, 243, 243, 249), .92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    animation: pp-aparece .25s ease both;
}
.pp-sucesso-circulo {
    width: 6rem; height: 6rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 3rem;
    background: linear-gradient(135deg, var(--vz-success), var(--pp-marca-1));
    box-shadow: 0 1rem 2rem rgba(var(--vz-success-rgb), .4);
    animation: pp-pulo .6s cubic-bezier(.2, 1.4, .4, 1) both;
}
.pp-sucesso h3 { font-weight: 700; margin: 0; }
.pp-confete { position: fixed; top: -1rem; width: .55rem; height: .9rem; border-radius: .15rem; z-index: 2001; pointer-events: none; animation: pp-cai linear forwards; }

/* ------------------------------------------------------------------ documentos */

.pp-doc { display: flex; gap: .9rem; align-items: flex-start; }
.pp-doc-icone { width: 3rem; height: 3rem; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; flex: 0 0 auto; }
.pp-busca { position: relative; }
.pp-busca i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--vz-secondary-color); }
.pp-busca input { font-size: 16px; padding-left: 2.6rem; border-radius: 50rem; border: 0; box-shadow: var(--pp-sombra); height: 2.9rem; background: var(--pp-card); }

/* ------------------------------------------------------------------ cartão do clube */

.pp-cartao {
    position: relative; overflow: hidden; border-radius: 1.25rem; padding: 1.35rem; aspect-ratio: 1.586;
    max-width: 24rem; display: flex; flex-direction: column; justify-content: space-between;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2);
}
.pp-cartao::after { content: ""; position: absolute; width: 16rem; height: 16rem; border-radius: 50%; right: -5rem; top: -6rem; background: rgba(255, 255, 255, .1); }
.pp-cartao-chip { width: 2.6rem; height: 1.9rem; border-radius: .4rem; background: linear-gradient(135deg, #f7d774, #c9a13b); }
.pp-cartao-numero { font-size: 1.2rem; letter-spacing: .14em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ vazio */

.pp-vazio { text-align: center; padding: 2.5rem 1rem; }
.pp-vazio .degrade-selo { margin: 0 auto 1rem; }
.pp-vazio h5, .pp-vazio .h5, .pp-vazio .h4 { font-weight: 600; }
.pp-vazio p { color: var(--vz-secondary-color); max-width: 26rem; margin: 0 auto 1.25rem; }

/* O estado vazio comum do sistema também no portal (28/10/2026, pedido: "faça o mesmo no portal do paciente"): caixa
   tracejada em vermelho suave, ícone num círculo vermelho claro e texto em vermelho - o mesmo desenho do .pa-vazio
   (estado_vazio.css). Os avisos positivos ("Tudo em dia", limite de agendamentos) levam .pp-vazio-positivo e ficam como eram. */
.pp-vazio:not(.pp-vazio-positivo) {
    margin: .75rem; padding: 1.75rem 1rem;
    border: 1px dashed rgba(var(--vz-danger-rgb), .35);
    background: rgba(var(--vz-danger-rgb), .04);
    border-radius: var(--vz-border-radius, .25rem);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pp-vazio:not(.pp-vazio-positivo) .degrade-selo,
.pp-vazio:not(.pp-vazio-positivo) > i.fs-1 {
    width: 56px; height: 56px; margin: 0 auto .75rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--vz-danger-rgb), .12) !important; color: var(--vz-danger) !important;
    box-shadow: none; font-size: 1.6rem !important;
}
.pp-vazio:not(.pp-vazio-positivo) .degrade-selo i { color: var(--vz-danger); font-size: 1.6rem; }
.pp-vazio:not(.pp-vazio-positivo) h1, .pp-vazio:not(.pp-vazio-positivo) h2, .pp-vazio:not(.pp-vazio-positivo) h3,
.pp-vazio:not(.pp-vazio-positivo) .h4, .pp-vazio:not(.pp-vazio-positivo) .h5, .pp-vazio:not(.pp-vazio-positivo) h5 { color: var(--vz-danger); margin-bottom: .35rem; }
.pp-vazio:not(.pp-vazio-positivo) p { color: rgba(var(--vz-danger-rgb), .85); }

/* ------------------------------------------------------------------ entrada (CPF) */

.pp-entrada { min-height: 100vh; display: grid; grid-template-columns: 1fr; padding: 0; }
@media (min-width: 992px) { .pp-entrada { grid-template-columns: 1.1fr 1fr; } }
.pp-entrada-arte {
    position: relative; overflow: hidden; color: #fff; padding: 3rem;
    display: none; flex-direction: column; justify-content: space-between;
    background: linear-gradient(135deg, var(--pp-marca-1), var(--pp-marca-2));
}
@media (min-width: 992px) { .pp-entrada-arte { display: flex; } }
.pp-entrada-arte::before { content: ""; position: absolute; inset: 0; background: url("../../../assets/default/images/auth-one-bg.jpg") center / cover; opacity: .12; mix-blend-mode: luminosity; }
.pp-entrada-arte > * { position: relative; }
.pp-entrada-arte h2 { color: #fff; font-weight: 700; font-size: 2.2rem; letter-spacing: -.02em; }
.pp-entrada-lista { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.pp-entrada-lista li { display: flex; gap: .8rem; align-items: center; font-size: .95rem; }
.pp-entrada-lista i { width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); font-size: 1.15rem; }
.pp-entrada-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.pp-entrada-caixa { width: 100%; max-width: 25rem; }
.pp-entrada-caixa .pp-marca img { max-height: 3rem; }

.pp-digitos { display: flex; gap: .55rem; justify-content: center; margin: 1.5rem 0; }
.pp-digitos input {
    width: 3.2rem; height: 3.8rem; text-align: center; font-size: 1.6rem !important; font-weight: 700;
    border-radius: 1rem; border: 2px solid var(--vz-border-color); background: var(--pp-card);
    color: var(--vz-body-color); caret-color: var(--vz-primary);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pp-digitos input:focus { outline: 0; border-color: var(--vz-primary); box-shadow: 0 0 0 .3rem rgba(var(--vz-primary-rgb), .15); transform: translateY(-2px); }
.pp-digitos.is-erro input { border-color: var(--vz-danger); animation: pp-treme .4s ease; }
@media (max-width: 360px) { .pp-digitos input { width: 2.8rem; height: 3.4rem; } }

/* Entrada com vida (01/10/2026): fundo de luzes, batimento desenhado, cadeado que abre e
   quadrinhos que acendem. --pp-abertura-espera: a animação de abertura termina antes (_abertura). */

.pp-entrada-form { position: relative; overflow: hidden; }
.pp-entrada-fundo { position: absolute; inset: 0; pointer-events: none; }
.pp-entrada-fundo span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .32; animation: pp-luz 16s ease-in-out infinite alternate; }
.pp-entrada-fundo span:nth-child(1) { width: 22rem; height: 22rem; top: -7rem; right: -7rem; background: var(--pp-marca-1); }
.pp-entrada-fundo span:nth-child(2) { width: 20rem; height: 20rem; bottom: -8rem; left: -6rem; background: var(--pp-marca-2); animation-duration: 20s; animation-delay: -6s; }
.pp-entrada-fundo span:nth-child(3) { width: 12rem; height: 12rem; top: 45%; left: 55%; background: var(--vz-info); opacity: .18; animation-duration: 13s; animation-delay: -3s; }
[data-bs-theme="dark"] .pp-entrada-fundo span { opacity: .22; }

.pp-entrada-caixa { position: relative; }
.pp-entrada-caixa > * { animation: pp-sobe .6s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--pp-abertura-espera, 0s) + .05s); }
.pp-entrada-caixa > :nth-child(2) { animation-delay: calc(var(--pp-abertura-espera, 0s) + .18s); }
.pp-entrada-caixa > :nth-child(3) { animation-delay: calc(var(--pp-abertura-espera, 0s) + .32s); }
.pp-entrada-caixa > .card { box-shadow: var(--pp-sombra-alta); }

.pp-entrada-lista li { animation: pp-desliza .55s ease both; animation-delay: calc(var(--pp-abertura-espera, 0s) + .25s); }
.pp-entrada-lista li:nth-child(2) { animation-delay: calc(var(--pp-abertura-espera, 0s) + .38s); }
.pp-entrada-lista li:nth-child(3) { animation-delay: calc(var(--pp-abertura-espera, 0s) + .51s); }
.pp-entrada-lista li:nth-child(4) { animation-delay: calc(var(--pp-abertura-espera, 0s) + .64s); }

.pp-entrada-pulso { display: block; width: 100%; max-width: 26rem; height: 4.5rem; margin-bottom: 1.25rem; overflow: visible; }
.pp-entrada-pulso path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pp-batimento 3.6s ease-in-out infinite; animation-delay: var(--pp-abertura-espera, 0s); }

.pp-cadeado {
    position: relative; width: 3.75rem; height: 3.75rem; margin: 0 auto 1rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem;
    background: linear-gradient(135deg, var(--pp-marca-1), var(--pp-marca-2));
    box-shadow: 0 .6rem 1.4rem rgba(var(--pp-marca-rgb), .35);
    transition: background .3s ease, box-shadow .3s ease;
}
.pp-cadeado::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(var(--pp-marca-rgb), .5); animation: pp-anel 2.2s ease-out infinite; }
.pp-cadeado.is-aberto { background: var(--vz-success); box-shadow: 0 .6rem 1.4rem rgba(var(--vz-success-rgb), .4); animation: pp-pulo .5s cubic-bezier(.2, 1.4, .4, 1); }
.pp-cadeado.is-aberto::after { border-color: rgba(var(--vz-success-rgb), .6); animation-duration: .7s; }

.pp-digitos input.is-cheio { border-color: var(--vz-primary); background: rgba(var(--vz-primary-rgb), .08); animation: pp-digito .3s cubic-bezier(.2, 1.6, .4, 1); }
.pp-digitos.is-completo input { border-color: var(--vz-success); background: rgba(var(--vz-success-rgb), .12); color: var(--vz-success); animation: pp-onda .5s ease both; }
.pp-digitos.is-completo input:nth-child(2) { animation-delay: .06s; }
.pp-digitos.is-completo input:nth-child(3) { animation-delay: .12s; }
.pp-digitos.is-completo input:nth-child(4) { animation-delay: .18s; }
.pp-digitos.is-completo input:nth-child(5) { animation-delay: .24s; }

@keyframes pp-luz { from { transform: translate(0, 0) scale(1); } to { transform: translate(-3rem, 2.5rem) scale(1.2); } }
@keyframes pp-desliza { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes pp-batimento { 0% { stroke-dashoffset: 1; } 55%, 80% { stroke-dashoffset: 0; opacity: .75; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pp-anel { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
@keyframes pp-digito { from { transform: scale(.8); } to { transform: scale(1); } }
@keyframes pp-onda { 0% { transform: translateY(0); } 45% { transform: translateY(-8px) scale(1.06); } 100% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .pp-entrada-fundo span, .pp-entrada-caixa > *, .pp-entrada-lista li, .pp-cadeado, .pp-cadeado::after, .pp-digitos input { animation: none !important; }
    .pp-entrada-pulso path { animation: none; stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------------ revelar ao rolar */

/*
 * Raio-X 10 (M9): só esconde com JavaScript ligado (classe "js" posta no <html> pelo
 * script do <head>) - sem JS ou na impressão os cartões aparecem normalmente.
 */
.js .pp-revela { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .pp-revela.is-visivel { opacity: 1; transform: none; }

/* Esqueleto (carregando) */
.pp-esqueleto { background: linear-gradient(90deg, rgba(var(--vz-dark-rgb), .06) 25%, rgba(var(--vz-dark-rgb), .12) 37%, rgba(var(--vz-dark-rgb), .06) 63%); background-size: 400% 100%; animation: pp-brilho 1.4s ease infinite; border-radius: .75rem; }

@keyframes pp-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pp-sobe { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pp-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-pulo { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pp-cai { to { transform: translateY(110vh) rotate(720deg); } }
@keyframes pp-brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes pp-treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js .pp-revela { opacity: 1; transform: none; }
    .swiper-slide-active .pp-slide img { transform: none; }
}

/* Impressão: só o conteúdo */
@media print {
    .pp-topo, .pp-rodape, .pp-propagandas, .pp-acoes, .pp-barra-confirmar { display: none !important; }
    body.pp { padding: 0; background: #fff; }
    .pp-revela, .js .pp-revela { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Herói: títulos sempre brancos (o Velzon pinta h1-h6 com a cor de título). */
.pp-heroi h1, .pp-heroi h2, .pp-heroi h3, .pp-heroi h4, .pp-heroi h5 { color: #fff; }

/* Botão principal dentro do herói: branco sólido (o btn-light do tema some no vidro). */
.pp-bilhete-acoes .btn-light { background: #fff; border-color: #fff; color: var(--vz-primary); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12); }
.pp-bilhete-acoes .btn-light:hover { background: #f8f9fa; color: var(--vz-primary); }

/* Celular: espaço para a barra fixa de confirmar não cobrir os últimos horários. */
@media (max-width: 991.98px) { .pp-etapa[data-passo="3"] { padding-bottom: 5.5rem; } }

/* ======================================================================
   Telas auxiliares no layout novo (29/09/2026): termos, pagamentos e
   mensagens (controllers Paciente_publico_termos/_titulos/_mensagens).
   ====================================================================== */

/* ---------------------------------------------------------------- termos */
.pp-termo-sobre { letter-spacing: .06em; }
.pp-termo-texto {
    max-height: 45vh;
    overflow-y: auto;
    white-space: pre-line;
    overflow-wrap: anywhere;
    font-size: .875rem;
    line-height: 1.65;
    padding: 1rem 1.15rem;
    border-radius: var(--pp-raio-sm);
    background: var(--vz-tertiary-bg, var(--vz-light));
    border: 1px solid var(--vz-border-color);
    color: var(--vz-body-color);
}
.pp-termo-texto:focus-visible { outline: 2px solid rgba(var(--vz-primary-rgb), .5); outline-offset: 2px; }
.pp-termo-aceite {
    padding: 1rem 1.15rem;
    border-radius: var(--pp-raio-sm);
    border: 1px dashed rgba(var(--vz-success-rgb), .45);
    background: rgba(var(--vz-success-rgb), .06);
}
.pp-termo-aceite .form-check-input { width: 1.25em; height: 1.25em; margin-top: .15em; }

/* ------------------------------------------------------------ pagamentos */
.pp-pag-valor { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--vz-heading-color, var(--vz-body-color)); }
.pp-pag.is-vencido { box-shadow: 0 0 0 1px rgba(var(--vz-danger-rgb), .35), var(--pp-sombra); }
.pp-pag.is-vencido .pp-pag-valor { color: var(--vz-danger); }

/* ------------------------------------------------------------- mensagens */
.pp-chat {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: calc(100vh - var(--pp-topo) - 9rem);
    height: calc(100dvh - var(--pp-topo) - 9rem);
    min-height: 22rem;
}
/* Celular: a barra inferior (.pp-rodape) fica fora do cartão - o campo de escrever nunca fica atrás dela. */
@media (max-width: 991.98px) {
    .pp-chat {
        height: calc(100vh - var(--pp-topo) - var(--pp-rodape) - env(safe-area-inset-bottom) - 7.5rem);
        height: calc(100dvh - var(--pp-topo) - var(--pp-rodape) - env(safe-area-inset-bottom) - 7.5rem);
    }
}
.pp-chat-topo {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--vz-border-color);
    background: var(--pp-card);
}
.pp-chat-aviso {
    display: flex; gap: .5rem; align-items: flex-start;
    padding: .6rem 1.15rem;
    font-size: .8rem;
    color: var(--vz-info-text-emphasis, var(--vz-info));
    background: var(--vz-info-bg-subtle, rgba(var(--vz-info-rgb), .1));
    border-bottom: 1px solid var(--vz-border-color);
}
.pp-chat-mensagens {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    background: var(--vz-tertiary-bg, var(--vz-light));
}
.pp-chat-mensagens .pp-vazio { padding: 2rem 1rem; }
.pp-chat-dia { display: flex; justify-content: center; margin: .75rem 0 .6rem; }
.pp-chat-dia span {
    font-size: .75rem; font-weight: 600; letter-spacing: .03em;
    padding: .2rem .7rem; border-radius: 50rem;
    color: var(--vz-secondary-color);
    background: var(--pp-card);
    box-shadow: var(--pp-sombra);
}
.pp-bolha {
    width: fit-content;
    max-width: min(85%, 34rem);
    margin-bottom: .5rem;
    padding: .55rem .85rem .4rem;
    border-radius: 1.1rem;
    font-size: .925rem;
    line-height: 1.45;
    box-shadow: 0 .0625rem .125rem rgba(var(--vz-dark-rgb), .08);
    animation: pp-aparece .25s ease;
}
.pp-bolha .texto { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-bolha.clinica {
    margin-right: auto;
    background: var(--pp-card);
    color: var(--vz-body-color);
    border: 1px solid var(--vz-border-color);
    border-bottom-left-radius: .3rem;
}
.pp-bolha.minha {
    margin-left: auto;
    background: var(--vz-primary);
    color: #fff;
    border-bottom-right-radius: .3rem;
}
.pp-bolha .autor { display: block; font-size: .72rem; font-weight: 600; color: var(--vz-success); margin-bottom: .1rem; }
.pp-bolha .meta { display: block; margin-top: .15rem; text-align: right; font-size: .75rem; opacity: .85; white-space: nowrap; }
.pp-bolha.minha .meta .lida { color: #fff; opacity: 1; }
.pp-bolha.pendente { opacity: .6; }
.pp-bolha.falhou { background: var(--vz-danger-bg-subtle, rgba(var(--vz-danger-rgb), .12)); color: var(--vz-danger); cursor: pointer; }
.pp-bolha.falhou:focus-visible { outline: 2px solid var(--vz-danger); outline-offset: 2px; }
.pp-chat-rodape {
    padding: .75rem 1rem;
    border-top: 1px solid var(--vz-border-color);
    background: var(--pp-card);
}
.pp-chat-form { display: flex; align-items: flex-end; gap: .6rem; }
.pp-chat-texto {
    resize: none;
    max-height: 140px;
    line-height: 1.45;
    font-size: 16px; /* 16px: o iPhone não dá zoom ao focar */
    border-radius: 1.35rem;
    padding: .55rem 1rem;
    background: var(--vz-tertiary-bg, var(--vz-light));
}
.pp-chat-enviar { width: 2.75rem; height: 2.75rem; font-size: 1.15rem; box-shadow: 0 .35rem 1rem rgba(var(--vz-primary-rgb), .35); }
.pp-chat-enviar:disabled { box-shadow: none; }

/* ======================================================================
   Raio-X 10 (30/09/2026): toque, leitura e campos no celular.
   ====================================================================== */

/* M12: campos com 16px - o iPhone não dá zoom ao focar (busca, motivo do cancelamento). */
.pp .form-control, .pp .form-select { font-size: 16px; }

/* M11: alvos de toque >= 44px no celular (botões pequenos, chips, abas, "Mais ações"). */
@media (max-width: 991.98px) {
    .pp .btn-sm { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
    .pp .btn-sm.w-100 { display: flex; }
    .pp .btn-sm.btn-icon, .pp .btn-icon { width: 2.75rem; height: 2.75rem; min-height: 2.75rem; }
    .pp-chip { min-height: 2.75rem; }
    .pp-abas button { min-height: 2.75rem; }
    .pp-acao-topo { width: 2.75rem; height: 2.75rem; }
    .pp-avatar { width: 2.75rem; height: 2.75rem; }
}

/* Linha do tempo: data e horário quebram a linha em vez de sumir com "…" no celular. */
.pp-linha-titulo { overflow-wrap: anywhere; }

/* Reagendar no celular: espaço para a barra fixa de confirmar não cobrir o fim da página. */
@media (max-width: 991.98px) { .pp-com-barra { padding-bottom: 5.5rem; } }

/* Resultado de exame fora da referência: texto (Alto/Baixo) além da cor. */
.pp-fora-ref { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-left: .25rem; }

/* Agendar: o título do passo recebe o foco (tabindex=-1) sem o anel do mouse. */
.pp-etapa-titulo:focus:not(:focus-visible) { outline: 0; }

/* Linha do tempo no celular: o selo da situação desce para a linha de baixo quando não cabe (não espreme a data). */
.pp-linha-item .card-body.d-flex { flex-wrap: wrap; }
.pp-linha-item .card-body.d-flex > .flex-grow-1 { flex-basis: 11rem; }

/* Tema escuro: textos na cor da marca (#405189) ficam apagados no fundo escuro - tom mais claro. */
[data-bs-theme="dark"] .pp-data-bloco,
[data-bs-theme="dark"] .pp-rodape a.active,
[data-bs-theme="dark"] .pp-passos .pp-passo.is-ativo span,
[data-bs-theme="dark"] .pp-chip.active,
[data-bs-theme="dark"] .pp-opcao .pp-opcao-letra,
[data-bs-theme="dark"] .pp-modalidade i,
[data-bs-theme="dark"] .pp-horario:hover,
[data-bs-theme="dark"] .pp-menu a:hover { color: #8c9bd0; }
[data-bs-theme="dark"] .pp-rodape a.active::after { background: #8c9bd0; }
[data-bs-theme="dark"] .pp-data-bloco .semana { color: #fff; }
/* Tema claro: o verde do btn-soft-success (#0ab39c) no fundo claro fica abaixo de 4.5:1. */
:root:not([data-bs-theme="dark"]) .pp .btn-soft-success { --vz-btn-color: #087f6f; }

/* ------------------------------------------------------------------ portal 2 (30/09/2026) */

/* Receitas: número do receituário, validade, dispensação e autenticidade (RDC 1.000/2025). */
.pp-receita-dados { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .8rem; color: var(--vz-secondary-color); }
.pp-receita-dados li { display: inline-flex; align-items: center; gap: .3rem; }
.pp-receita-dados i { font-size: .95rem; }
.pp-receita-dados .is-retirada { color: #087f6f; font-weight: 500; }
.pp-receita-dados .is-vencida { color: var(--vz-danger); font-weight: 500; }
[data-bs-theme="dark"] .pp-receita-dados .is-retirada { color: #3fd3bd; }
@media (max-width: 991.98px) { .pp-receita-dados a { display: inline-flex; align-items: center; min-height: 2.75rem; } }

/* Meus dados: dados fixos (só a clínica muda) e o formulário de contato. */
.pp-dados-fixos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 0; }
.pp-dados-fixos dt { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--vz-secondary-color); margin-bottom: .15rem; }
.pp-dados-fixos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.pp .form-control, .pp .form-select { min-height: 2.75rem; }
.pp-cep-status { font-size: .78rem; min-height: 1.2rem; }

/* Lista de espera (Início e Consultas). */
.pp-espera-item { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.pp-espera-item > .flex-grow-1 { flex-basis: 12rem; }

/* Teste de câmera e microfone (teleconsulta). */
.pp-midia-video { position: relative; aspect-ratio: 4 / 3; max-height: 50vh; width: 100%; border-radius: var(--pp-raio); overflow: hidden; background: #111827; }
.pp-midia-video video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.pp-midia-video .pp-midia-vazio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: #cbd5e1; text-align: center; padding: 1rem; font-size: .9rem; }
.pp-midia-video .pp-midia-vazio i { font-size: 2.25rem; }
.pp-midia-nivel { height: .6rem; border-radius: 50rem; background: rgba(var(--vz-dark-rgb), .1); overflow: hidden; }
.pp-midia-nivel span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #087f6f, var(--vz-success), var(--vz-warning)); transition: width .08s linear; }
.pp-midia-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .88rem; }
.pp-midia-checks li { display: flex; align-items: center; gap: .5rem; }
.pp-midia-checks .ok { color: #087f6f; }
.pp-midia-checks .falha { color: var(--vz-danger); }
[data-bs-theme="dark"] .pp-midia-checks .ok { color: #3fd3bd; }
@media (prefers-reduced-motion: reduce) { .pp-midia-nivel span { transition: none; } }
.pp-aviso-vaga { color: #087f6f; }
[data-bs-theme="dark"] .pp-aviso-vaga { color: #3fd3bd; }
/* Fichas de escolha única (turno da lista de espera): input.btn-check + label.pp-chip. */
.btn-check:checked + .pp-chip { border-color: var(--vz-primary); color: var(--vz-primary); background: rgba(var(--vz-primary-rgb), .08); }
.btn-check:focus-visible + .pp-chip { outline: 2px solid var(--vz-primary); outline-offset: 2px; }
[data-bs-theme="dark"] .btn-check:checked + .pp-chip { color: #8c9bd0; }
.pp-chips.flex-wrap { overflow-x: visible; }

/* ------------------------------------------------------------------ convite para instalar o app (01/10/2026)
   Em todas as telas enquanto o portal não estiver instalado (portal_paciente/_instalar + instalar.js). */

.pp-instalar:not([hidden]) {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: 1rem; padding: .75rem .9rem;
    border-radius: var(--pp-raio);
    background: var(--pp-card); box-shadow: var(--pp-sombra-alta);
    border: 1px solid rgba(var(--vz-primary-rgb), .25);
    animation: pp-sobe .3s ease both;
}
.pp-instalar strong { font-size: .9rem; line-height: 1.25; }

/* Entrada (sem barra inferior): preso ao pé da tela. */
.pp-instalar-fixo:not([hidden]) {
    position: fixed; z-index: 1031; margin: 0;
    left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom));
    max-width: 34rem; margin-inline: auto;
}

.pp-instalar-passos {
    width: min(26rem, calc(100vw - 2rem)); padding: 1.5rem;
    border: 0; border-radius: var(--pp-raio);
    background: var(--pp-card); color: var(--vz-body-color);
    box-shadow: var(--pp-sombra-alta);
}
.pp-instalar-passos::backdrop { background: rgba(0, 0, 0, .5); }

@media (prefers-reduced-motion: reduce) { .pp-instalar:not([hidden]) { animation: none; } }
@media print { .pp-instalar, .pp-instalar-passos { display: none !important; } }

/* ------------------------------------------------------------------ animação de abertura (01/10/2026)
   Sempre que o portal abre (portal_paciente/_abertura): a marca surge, pulsa e a tela se revela. */

.pp-abertura:not([hidden]) {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
    background: var(--vz-body-bg);
    animation: pp-abertura-some .45s ease 1.25s both;
}
.pp-abertura-marca { animation: pp-pulo .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.pp-abertura-marca img { max-height: 5rem; max-width: 14rem; object-fit: contain; }
.pp-abertura-pulso { width: 7rem; height: .25rem; border-radius: 1rem; overflow: hidden; background: rgba(var(--vz-primary-rgb), .15); }
.pp-abertura-pulso span { display: block; height: 100%; border-radius: inherit; background: var(--vz-primary); transform-origin: left; animation: pp-abertura-enche 1.1s ease .15s both; }

@keyframes pp-abertura-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pp-abertura-some { to { opacity: 0; visibility: hidden; } }
@media print { .pp-abertura { display: none !important; } }

/* ------------------------------------------------------------------ cotações em farmácias (01/10/2026)
   portal_paciente/cotacoes: o cartão de cada cotação e o "Pedir cotação" que se abre. */

.pp-cotacao { padding: 1rem; border-radius: var(--pp-raio); border: 1px solid var(--vz-border-color); background: var(--pp-card); }
.pp-cotacao.is-melhor { border-color: var(--vz-success); box-shadow: 0 0 0 2px rgba(var(--vz-success-rgb), .18); }
.pp-cotacao.is-aprovada { border-color: var(--vz-success); background: rgba(var(--vz-success-rgb), .06); }
.pp-cotar > summary { list-style: none; }
.pp-cotar > summary::-webkit-details-marker { display: none; }
.pp-cotar[open] > summary { display: none; }

/* Selo de mensagens novas (01/10/2026): pulsa quando o número sobe (portal.js). */
@keyframes pp-selo-pulsa { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
[data-pp-msg-selo].is-novo { animation: pp-selo-pulsa .6s ease 2; }

/*
 * FERRADURA (02/11/2026): o ícone dos cavalos no Portal do Aluno - a biblioteca Remix não tem ferradura, e o
 * ri-riding-line era um ciclista. Desenho em SVG usado como máscara: pega a cor do texto (currentColor) e o
 * tamanho da fonte, como os outros ícones. Uso: <i class="pp-ferradura"></i>.
 */
.pp-ferradura {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M7.443 5.207 A8.6 8.6 0 1 0 16.557 5.207 L14.65 8.26 A5 5 0 1 1 9.35 8.26 Z M8.414 17.858 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z M16.786 17.858 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z M5.949 13.914 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z M19.251 13.914 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z M6.596 9.308 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z M18.604 9.308 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z%27/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M7.443 5.207 A8.6 8.6 0 1 0 16.557 5.207 L14.65 8.26 A5 5 0 1 1 9.35 8.26 Z M8.414 17.858 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z M16.786 17.858 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z M5.949 13.914 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z M19.251 13.914 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z M6.596 9.308 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z M18.604 9.308 a.6 .6 0 1 0 -1.2 0 a.6 .6 0 1 0 1.2 0z%27/%3E%3C/svg%3E") center / contain no-repeat;
}