/*
 * PORTAL DO PACIENTE NO VISUAL TIIX TECH (01/10/2026).
 *
 * O portal carrega a pele do sistema (dependencias/visual/visual_tech.css), no
 * tom claro e na cor da casa - quem liga é o portal_paciente/_visual, que põe
 * data-visual="tech" no <html>. A pele já reescreve as variáveis --vz-* (cor
 * primária, fundos, cartões, botões); este arquivo acerta só o que é do portal:
 *
 *   1. as variáveis --pp-* (degradê da marca, vidro das barras, sombras);
 *   2. os consertos de cor fixa que o portal-velzon.css tinha para o tema da
 *      Velzon (azul #405189 e afins);
 *   3. a ENTRADA (os 5 números do CPF), que fica no palco das telas de acesso
 *      (partials/acesso-palco + telas/login.css): cartão claro, palco na cor e
 *      a cena de partículas. Lá não há data-visual: as cores são as --lg-*.
 *
 * Carregar DEPOIS do portal-velzon.css.
 */

/* ============================================================ 1. variáveis */

[data-visual="tech"] {
    --pp-raio: .75rem;
    --pp-raio-sm: .55rem;
    --pp-card: rgb(var(--vt-sup));
    --pp-marca-1: rgb(var(--vt-forte));
    --pp-marca-2: rgb(var(--vt-fundo));
    --pp-marca-rgb: var(--vt-a);
    --pp-vidro: rgba(var(--vt-sup), .78);
    --pp-sombra: 0 10px 30px -18px var(--vt-sombra), 0 2px 6px -4px var(--vt-sombra);
    --pp-sombra-alta: 0 24px 60px -24px var(--vt-sombra), 0 6px 16px -10px var(--vt-sombra);
}

/* O fundo é o da pele (auroras e grade, numa camada fixa atrás de tudo). */
[data-visual="tech"] body.pp {
    background: transparent;
}

/* Barras de vidro (topo e a de baixo, no celular) na superfície da pele, em qualquer tom. */
[data-visual="tech"] .pp-topo,
[data-visual="tech"] .pp-rodape {
    --pp-vidro: rgba(var(--vt-sup), .78);
    border-color: rgba(var(--vt-tinta), .07);
}

/*
 * PARTÍCULAS DO FUNDO das telas de dentro (portal_paciente/layout): uma poeira fina
 * de luz que deriva devagar e reage ao mouse. Quem desenha é o
 * public/portal_paciente/js/particulas.js, num canvas só; aqui ficam a camada
 * (z-index -1: acima das auroras, atrás do conteúdo, sem pegar clique) e a COR:
 *   --pp-particula         "r, g, b" dos pontos
 *   --pp-particula-forca   multiplicador da opacidade
 * ACINZENTADAS (pedido de 01/10/2026), e não na cor da pele: um cinza médio no tom
 * claro e um cinza claro no escuro - neutras em qualquer cor escolhida.
 */
.pp-particulas {
    --pp-particula: 122, 128, 142;
    --pp-particula-forca: 1.15;
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.pp-particulas.is-pronta {
    opacity: 1;
}

[data-bs-theme="dark"] .pp-particulas {
    --pp-particula: 178, 184, 196;
    --pp-particula-forca: 1;
}

@media (prefers-reduced-motion: reduce), print {
    .pp-particulas { display: none; }
}

/*
 * AS PARTÍCULAS NUNCA APARECEM ATRAVÉS DOS CARTÕES: no sistema o cartão da pele é
 * translúcido (vidro); no portal ele é OPACO, na superfície da pele. O mesmo vale
 * para o que fica solto sobre o fundo com cor translúcida (avisos, o herói).
 */
[data-visual="tech"] .pp .card {
    --vz-card-bg: rgb(var(--vt-sup));
}

[data-visual="tech"] .pp .alert {
    background: linear-gradient(var(--vz-alert-bg), var(--vz-alert-bg)), rgb(var(--vt-sup));
}

[data-visual="tech"] .pp-heroi {
    background-color: rgb(var(--vt-forte));
}

/* ====================================== 2. cores fixas do tema da Velzon */

/* Tom escuro: o portal clareava o azul da Velzon; aqui é a cor da pele em texto. */
[data-visual="tech"][data-bs-theme="dark"] .pp .btn-soft-primary {
    --vz-btn-color: rgb(var(--vt-texto));
}

[data-visual="tech"][data-bs-theme="dark"] .pp .text-primary:not(.btn) {
    color: rgb(var(--vt-texto)) !important;
}

[data-visual="tech"][data-bs-theme="dark"] .pp-data-bloco,
[data-visual="tech"][data-bs-theme="dark"] .pp-rodape a.active,
[data-visual="tech"][data-bs-theme="dark"] .pp-passos .pp-passo.is-ativo span,
[data-visual="tech"][data-bs-theme="dark"] .pp-chip.active,
[data-visual="tech"][data-bs-theme="dark"] .pp-opcao .pp-opcao-letra,
[data-visual="tech"][data-bs-theme="dark"] .pp-modalidade i,
[data-visual="tech"][data-bs-theme="dark"] .pp-horario:hover,
[data-visual="tech"][data-bs-theme="dark"] .pp-menu a:hover,
[data-visual="tech"][data-bs-theme="dark"] .btn-check:checked + .pp-chip {
    color: rgb(var(--vt-texto));
}

[data-visual="tech"][data-bs-theme="dark"] .pp-rodape a.active::after {
    background: rgb(var(--vt-texto));
}

[data-visual="tech"][data-bs-theme="dark"] .pp-data-bloco .semana {
    color: #fff;
}

/* ============================================== 3. entrada (5 números do CPF) */

/*
 * A entrada usa o palco das telas de acesso. O que sobra do portal nela (a
 * abertura e o convite para instalar) lê as variáveis da Velzon: recebem a cor
 * do palco.
 */
body.pp-entrar {
    --vz-primary: rgb(var(--lg-forte));
    --vz-primary-rgb: var(--lg-forte);
    --vz-primary-bg-subtle: rgba(var(--lg-a), .16);
    --vz-body-bg: rgb(var(--lg-vidro-b));
    --pp-raio: .75rem;
}

.pp-entrar .btn-primary {
    --vz-btn-bg: rgb(var(--lg-forte));
    --vz-btn-border-color: rgb(var(--lg-forte));
    --vz-btn-hover-bg: rgb(var(--lg-fundo));
    --vz-btn-hover-border-color: rgb(var(--lg-fundo));
    --vz-btn-active-bg: rgb(var(--lg-fundo));
    --vz-btn-active-border-color: rgb(var(--lg-fundo));
    --vz-btn-focus-shadow-rgb: var(--lg-a);
}

/* O corpo do palco tem texto branco; o convite para instalar é um cartão claro. */
.pp-entrar .pp-instalar {
    color: #262a32;
}

/* O cartão e os blocos dele só entram depois da animação de abertura (_abertura). */
.pp-entrar .lg-moldura {
    animation-delay: var(--pp-abertura-espera, 0s);
}

.pp-entrar .lg-entra {
    animation-delay: calc(var(--pp-abertura-espera, 0s) + var(--i, 0) * 70ms + 280ms);
}

/* A marca da clínica no lugar da marca do sistema. */
.pp-entrar .lg-marca img {
    max-width: 14rem;
    object-fit: contain;
}

.pp-entrar-topo {
    text-align: center;
}

.pp-entrar-topo .lg-subtitulo strong {
    color: rgb(var(--lg-tinta));
    font-weight: 600;
}

/* O cadeado: o selo do palco, no meio; "abre" (verde) quando os 5 números entram. */
.pp-entrar-cadeado {
    margin: 0 auto 16px;
    transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.pp-entrar-cadeado.is-aberto {
    border-color: rgba(var(--vz-success-rgb), .5);
    background: rgba(var(--vz-success-rgb), .16);
    box-shadow: 0 12px 30px -12px rgba(var(--vz-success-rgb), .7);
    color: #087f6f;
    animation: pp-pulo .5s cubic-bezier(.2, 1.4, .4, 1);
}

.pp-entrar-cadeado.is-aberto::after {
    border-color: rgba(var(--vz-success-rgb), .6);
}

/* Os 5 quadrinhos dentro do vidro do cartão. */
.lg-cartao .pp-digitos {
    margin: 4px 0 22px;
}

.lg-cartao .pp-digitos input {
    border: 1px solid rgba(var(--lg-tinta), .16);
    border-radius: 14px;
    background: rgba(var(--lg-tinta), .05);
    color: rgb(var(--lg-tinta));
    caret-color: rgb(var(--lg-destaque));
}

.lg-cartao .pp-digitos input:focus {
    border-color: rgba(var(--lg-brilho), .8);
    box-shadow: 0 0 0 4px rgba(var(--lg-brilho), .16);
}

.lg-cartao .pp-digitos input.is-cheio {
    border-color: rgba(var(--lg-forte), .7);
    background: rgba(var(--lg-a), .1);
}

.lg-cartao .pp-digitos.is-erro input {
    border-color: var(--vz-danger);
}

.lg-cartao .pp-digitos.is-completo input {
    border-color: var(--vz-success);
    background: rgba(var(--vz-success-rgb), .12);
    color: #087f6f;
}

.lg-cartao .alert-danger {
    border-radius: 12px;
    font-size: 13.5px;
}

@media (prefers-reduced-motion: reduce) {
    .pp-entrar-cadeado.is-aberto {
        animation: none;
    }
}