/*
 * Páginas Conecta — design system: componentes UI compartilhados (Lane 1, Fase 3).
 * Consome exclusivamente var(--pc-*) de pc-tokens.css; nunca hardcode cor/fonte aqui.
 * Mobile-first 375px; classes com prefixo pc- (BEM-ish).
 */

/* ------------------------------------------------------------------ */
/* Card de serviço (UI::card_servico)                                  */
/* ------------------------------------------------------------------ */

/* Figma node 124814:741 — card 188x234 com padding 12, borda 0.5px e SEM sombra;
   a ordem visual e prestador -> capa -> titulo -> nota -> chip -> CTA. */
.pc-card-servico {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: var(--pc-branco);
    border: 0.5px solid var(--pc-cinza-100);
    border-radius: var(--pc-radius-card);
    text-decoration: none;
    color: inherit;
}

/* flex-start + altura travada da identidade: o topo nao pode encolher quando o
   prestador nao tem nome, senao a capa/nota desalinham dos cards vizinhos. */
.pc-card-servico__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    /* 1 linha de nome (12px * 1.35) + 2 de margem + linha do local (12). */
    min-height: calc(12px * 1.35 + 2px + 12px);
}

.pc-card-servico__prestador {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

/* Ancorado no card: `.elementor img` zera o border-radius com a mesma
   especificidade e vence pela ordem da folha, deixando o avatar quadrado. */
.pc-card-servico .pc-card-servico__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--pc-amarelo);
    object-fit: cover;
    flex-shrink: 0;
}

.pc-card-servico .pc-card-servico__avatar--vazio {
    display: block;
    background: var(--pc-cinza-100);
}

/* Nome e local empilhados ao lado do avatar (Figma 124814:746). */
.pc-card-servico__identidade {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* Uma linha so, com reticencias: nome longo nao pode quebrar nem empurrar o
   resto do card. Altura travada mantem os cards do carrossel na mesma grade
   mesmo quando o prestador nao tem nome. */
.pc-card-servico__prestador-nome {
    display: block;
    font-family: var(--pc-fonte-corpo);
    font-weight: 600;
    font-size: 12px;
    color: var(--pc-cinza-700);
    line-height: 1.35;
    height: calc(12px * 1.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Figma 124814:742: pill 36x14 — bem menor que o .pc-badge padrao (usado no
   header do prestador e no historico, que ficam como estao). */
/* Centrado na 1a linha do nome: a pill e mais baixa que a linha de texto, entao
   sem esta altura ela encosta no topo e fica visivelmente abaixo do nome. */
.pc-card-servico__badge-pro {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: calc(12px * 1.35);
}

.pc-card-servico__badge-pro .pc-badge--pro {
    gap: 2px;
    font-size: 9px;
    line-height: 1;
    padding: 3px 8px;
}

.pc-card-servico__local {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--pc-cinza-500);
    white-space: nowrap;
}

/* Razao 5x6 do asset — forcar quadrado achatava o pin. */
.pc-card-servico__local svg {
    width: 8.33px;
    height: 10px;
    display: block;
    flex-shrink: 0;
    color: var(--pc-cinza-500);
}

/* Figma: capa 164x68 dentro do card => razao ~2.4:1, radius 12. */
.pc-card-servico__capa {
    position: relative;
    aspect-ratio: 41 / 17;
    background: var(--pc-cinza-100);
    overflow: hidden;
    border-radius: var(--pc-radius-capa);
}

.pc-card-servico__capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-card-servico__corpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Altura travada em 2 linhas: sem isso um titulo de 1 linha sobe a nota e o
   "Responde em" 14px em relacao aos cards vizinhos, desalinhando o carrossel. */
.pc-card-servico__titulo {
    font-family: var(--pc-fonte-corpo);
    font-weight: 600;
    font-size: 12px;
    color: var(--pc-cinza-900);
    margin: 0;
    line-height: 1.2;
    height: calc(12px * 1.2 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-card-servico__descricao {
    font-size: 11px;
    color: var(--pc-cinza-500);
    margin: 0;
    line-height: 1.4;
}

.pc-card-servico__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

/* Linha propria abaixo da nota, no lugar onde antes ficava o chip de categoria
   (que foi para o banner). */
.pc-card-servico__resposta {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    color: var(--pc-cinza-500);
    white-space: nowrap;
}

.pc-card-servico__resposta svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    color: var(--pc-cinza-500);
}

/* No Figma o rodape do card mostra so 1 estrela + nota + (N) em corpo miudo —
   as 5 estrelas cheias do componente padrao nao cabem na largura do card. */
.pc-card-servico__rodape .pc-estrelas__icone:not(:first-child) {
    display: none;
}

.pc-card-servico__rodape .pc-estrelas {
    flex-shrink: 0;
}

.pc-card-servico__rodape .pc-estrelas__icone {
    width: 11px;
    height: 11px;
}

.pc-card-servico__rodape .pc-estrelas__nota {
    font-size: 12px;
}

.pc-card-servico__rodape .pc-estrelas__total {
    font-size: 10px;
}

/* Sobreposta ao banner, canto inferior esquerdo. O fundo perde a transparencia
   do chip solto porque aqui ela cai sobre a foto, nao sobre o branco do card. */
.pc-card-servico__categoria {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 1;
    max-width: calc(100% - 12px);
    padding: 3px 8px;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-branco);
    color: var(--pc-amarelo);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* O card nao e mais um <a> so: a area toda leva a ficha e o CTA leva ao formulario
   de solicitacao, e <a> nao pode aninhar <a>. Este link cobre o card via ::after
   (position:absolute tira ele do fluxo, entao nao vira item do flex nem celula
   implicita no grid da variante 'busca'). */
.pc-card-servico__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
    color: inherit;
}

/* O badge Pro da variante 'busca' e absoluto com o mesmo z-index e vem DEPOIS do
   link no DOM: sem isso ele ganharia a pilha e engoliria o clique no canto da capa.
   E decorativo, entao so deixa o clique passar. */
.pc-card-servico__badge-pro {
    pointer-events: none;
}

/* Texto so para leitor de tela: o link precisa de nome acessivel, mas nao pode
   ocupar espaco nem esticar o card. */
.pc-card-servico__link .pc-oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* CTA e irmao direto do card (fora do __corpo) e fecha o bloco, como no Figma.
   Figma 124814:771: ocupa a largura inteira do miolo (164 de 164), altura 28,
   texto centralizado — mais baixo que o pill padrao de 48px. */
/* Ancorado no card: `.pc-botao` (min-height:48px) tem a mesma especificidade e
   vence pela ordem da folha, esticando o CTA. */
.pc-card-servico .pc-card-servico__cta {
    /* Acima do link que cobre o card, senao o clique no botao abriria a ficha. */
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    width: 100%;
    min-height: 0;
    /* Figma 124814:771: 28 de altura num card de 188 = 14.9% da largura do card. */
    height: 28px;
    padding-inline: 8px;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Estrelas (UI::estrelas)                                             */
/* ------------------------------------------------------------------ */

.pc-estrelas {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--pc-fonte-corpo);
}

.pc-estrelas__icones {
    display: inline-flex;
    gap: 1px;
}

.pc-estrelas__icone {
    width: 14px;
    height: 14px;
    display: inline-block;
}

/* Sem isto o svg fica `display:inline` + `vertical-align:baseline` e desce ~7px
   abaixo do centro do proprio span, desalinhando a estrela da nota. */
.pc-estrelas__icone svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pc-estrelas__nota {
    font-weight: 700;
    font-size: 13px;
    color: var(--pc-cinza-900);
}

.pc-estrelas__total {
    font-size: 12px;
    color: var(--pc-cinza-500);
}

/* ------------------------------------------------------------------ */
/* Input de estrelas (data-pc-estrelas-input, ver pc-ui.js)            */
/* Componente canônico — antes existiam 2 cópias (pc-form-avaliar__estrela em      */
/* pc-publicas.css e pc-estrela-input em pc-privadas.css), consolidadas aqui       */
/* (Fase 4, item 1 do polish).                                                     */
/* ------------------------------------------------------------------ */

.pc-estrelas-input {
    display: flex;
    gap: 6px;
}

.pc-estrelas-input__estrela {
    background: none;
    border: none;
    padding: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--pc-cinza-100);
    cursor: pointer;
}

.pc-estrelas-input__estrela.is-ativa {
    color: var(--pc-amarelo);
}

/* Pulso da nota escolhida: as estrelas marcadas sobem juntas, sem cascata.
   --pc-pulso-* variam a intensidade entre a nota comum e a máxima. */
@keyframes pc-estrela-pulso {
    0% {
        transform: scale(1);
        text-shadow: none;
    }
    35% {
        transform: scale(var(--pc-pulso-escala, 1.18));
        text-shadow: 0 0 var(--pc-pulso-brilho, 8px) rgba(252, 189, 11, 0.75),
                     0 0 var(--pc-pulso-halo, 16px) rgba(252, 189, 11, 0.35);
    }
    100% {
        transform: scale(1);
        text-shadow: none;
    }
}

.pc-estrelas-input__estrela.is-celebrando {
    animation: pc-estrela-pulso 380ms ease-out both;
}

/* Nota máxima: mesmo pulso, mais forte e batendo duas vezes. */
.pc-estrelas-input__estrela.is-celebrando--max {
    --pc-pulso-escala: 1.35;
    --pc-pulso-brilho: 14px;
    --pc-pulso-halo: 26px;

    animation-duration: 310ms;
    animation-iteration-count: 2;
}

@media (prefers-reduced-motion: reduce) {
    .pc-estrelas-input__estrela.is-celebrando {
        animation: none;
    }
}

/* ------------------------------------------------------------------ */
/* Tabs (data-pc-tabs / data-pc-tab / data-pc-tab-painel, ver pc-ui.js) */
/* Componente canônico — usado pela tela de serviço, [pc_como_funciona] (variante   */
/* --nav) e [pc_minhas_avaliacoes] (variante --pill). Antes minhas_avaliacoes tinha */
/* marcação/JS bespoke próprios (Fase 4, item 1 do polish).                        */
/* ------------------------------------------------------------------ */

.pc-tabs__nav {
    display: flex;
    border-bottom: 1px solid var(--pc-cinza-100);
    margin-bottom: 20px;
}

.pc-tabs__item {
    flex: 1;
    background: none;
    border: none;
    padding: 12px 4px;
    font-family: var(--pc-fonte-corpo);
    font-weight: 600;
    font-size: 14px;
    color: var(--pc-cinza-500);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.pc-tabs__item.is-ativo {
    color: var(--pc-amarelo);
    border-bottom-color: var(--pc-amarelo);
}

/* Trilho branco com borda fina; inativa é uma pill cinza e ativa uma pill amarela
   com texto branco (Figma node 124822:7139). */
.pc-tabs__nav--pill {
    border-bottom: none;
    background: var(--pc-branco);
    border: 0.5px solid var(--pc-cinza-100);
    border-radius: var(--pc-radius-pill);
    padding: 4px;
    gap: 3px;
    margin-bottom: 24px;
}

.pc-tabs__nav--pill .pc-tabs__item {
    border-radius: var(--pc-radius-pill);
    border-bottom: none;
    background: var(--pc-cinza-100);
    color: var(--pc-cinza-500);
    font-weight: 400;
    font-size: 12px;
    padding: 10px 8px;
}

.pc-tabs__nav--pill .pc-tabs__item.is-ativo {
    background: var(--pc-amarelo);
    color: var(--pc-branco);
    font-weight: 600;
}

.pc-tabs__painel {
    display: none;
}

.pc-tabs__painel.is-ativo {
    display: block;
}

/* ------------------------------------------------------------------ */
/* Badges (UI::badge)                                                  */
/* ------------------------------------------------------------------ */

.pc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--pc-fonte-corpo);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    border-radius: var(--pc-radius-pill);
    padding: 5px 10px;
}

/* Figma 124822:5569: pill amarela com "Pro" E o escudo em BRANCO (o svg usa
   currentColor, entao a cor do texto pinta os dois). */
.pc-badge--pro {
    background: var(--pc-amarelo);
    color: var(--pc-branco);
}

/* Escudo antes do "Pro" (Figma 124814:753) — razao 4.667x5.834 do asset. */
.pc-badge__icone {
    display: block;
    width: 0.8em;
    height: 1em;
    flex-shrink: 0;
}

.pc-badge--verificado {
    background: var(--pc-branco);
    color: var(--pc-amarelo);
    padding: 4px;
    border-radius: 50%;
}

.pc-badge--verificado svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ------------------------------------------------------------------ */
/* Avatar (UI::avatar)                                                 */
/* ------------------------------------------------------------------ */

.pc-avatar {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}

/* O tamanho vem inline no span (UI::avatar); a imagem precisa herdar 100% dele.
   `.elementor img` empata em especificidade e vence pela ordem da folha, zerando
   height (foto achatada, alinhada ao topo do círculo) e border-radius (quadrada)
   — daí o !important nos dois. */
.pc-avatar img {
    border-radius: 50% !important;
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100% !important;
}

/* Anel amarelo em volta da foto (Figma 124814:1992). box-shadow e nao border: o
   tamanho do avatar vem inline em px e uma borda somaria ao circulo, desalinhando
   o selo ancorado no canto. */
.pc-avatar--aro {
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--pc-amarelo);
}

.pc-avatar__verificado {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--pc-amarelo);
    border-radius: 50%;
    border: 2px solid var(--pc-branco);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-avatar__verificado svg {
    width: 10px;
    height: 10px;
}

/* Variante do Figma: escudo branco em disco amarelo cheio, sem anel branco. O
   glifo ja vem centrado no viewBox 19, entao o svg ocupa o disco inteiro. */
.pc-avatar__verificado--escudo {
    width: 19px;
    height: 19px;
    border: 0;
    bottom: 0;
    right: 0;
}

.pc-avatar__verificado--escudo svg {
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------------ */
/* Chips de categoria (UI::chips_categorias)                           */
/* ------------------------------------------------------------------ */

.pc-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.pc-chips::-webkit-scrollbar {
    display: none;
}

.pc-chip {
    scroll-snap-align: start;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-branco);
    color: var(--pc-grafite);
    text-decoration: none;
    font-family: var(--pc-fonte-corpo);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.pc-chip svg {
    width: auto;
    height: 16px;
}

.pc-chip--ativo {
    background: var(--pc-amarelo);
    color: var(--pc-grafite);
}

/* Modificadora: chips sobre o card amarelo de busca (spec I6) — fundo branco 24%
   translúcido + texto/ícone branco (herda por currentColor). */
.pc-chips--sobre-amarelo .pc-chip {
    background: var(--pc-branco-24);
    color: var(--pc-branco);
}

.pc-chips--sobre-amarelo .pc-chip--ativo {
    background: var(--pc-branco);
    color: var(--pc-grafite);
}

/* Sobre o card amarelo o veu escuro do hover global suja o chip translucido:
   aqui a reacao e clarear, como na bottom nav. */
.pc-chips--sobre-amarelo .pc-chip {
    --pc-hover-veu: rgba(255, 255, 255, 0.18);
    --pc-active-veu: rgba(255, 255, 255, 0.3);
}

/* Modificadora: quebra de linha CENTRALIZADA (Figma 124814:1077) — as linhas
   formam uma piramide centrada no card amarelo, nao uma massa alinhada a
   esquerda. O chip aqui e menor que o do carrossel, como no desenho; a fonte
   sobe de 8px para 11px pela mesma razao que o card de servico sobe 8->12:
   o mock e um artboard de 375, nao um celular real. */
.pc-chips--wrap {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow-x: visible;
    gap: 5px;
    padding-bottom: 0;
}

/* Padding curto e icone miudo: com o pill largo as 14 categorias esticavam para
   6-7 linhas e o bloco deixava de ser o quadrado compacto do desenho. A altura
   de 24px (alvo de toque) vem do line-height + padding, nao de esticar a pill. */
.pc-chips--wrap .pc-chip {
    scroll-snap-align: none;
    gap: 4px;
    padding: 5px 9px;
    font-size: 12px;
    line-height: 1.4;
}

.pc-chips--wrap .pc-chip svg {
    height: 10px;
}

/* ------------------------------------------------------------------ */
/* Card de categoria (UI::cards_categorias) — dog-ear, spec I7               */
/* ------------------------------------------------------------------ */

/* Tira que sangra ate a borda da tela — no Figma os cards das pontas ficam
   parcialmente cortados, sinalizando que a lista rola. */
.pc-cat-cards {
    /* Figma 124823:8526: card 72x90 num frame de 375 => 19.2% da largura. Todo o
       miolo (gap, icone, dobra, label) deriva daqui para escalar em proporcao. */
    --pc-cat-largura: clamp(72px, calc(var(--pc-largura-shell) * 0.192), 108px);
    display: flex;
    /* Figma: cards a cada 78px com 72 de largura => 6px de gap (8.33% do card). */
    gap: calc(var(--pc-cat-largura) * 0.0833);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Sem isto o snap encaixa o 1o card na borda da area de scroll e engole o
       padding-inline, colando o card na lateral da tela. */
    scroll-padding-inline: var(--pc-respiro-lateral);
    padding-bottom: 4px;
    margin-inline: calc(var(--pc-respiro-lateral) * -1);
    padding-inline: var(--pc-respiro-lateral);
    -webkit-overflow-scrolling: touch;
}

.pc-cat-cards::-webkit-scrollbar {
    display: none;
}

/* Dog-ear (Figma 124814:2486 silhueta + 124814:2452 dobra): o canto NAO e um
   triangulo colado sobre o card — a silhueta e recortada e a dobra preenche o vao.
   No node de referencia (335.5x233.5) o corte mede 63.35px = 18.9% da largura, e a
   dobra (64x62) e praticamente quadrada — por isso --pc-dobra e um lado unico. */
.pc-cat-card {
    /* 14 de 72 = 19.44% da LARGURA do card, em px para o clip-path e a dobra
       usarem a mesma medida nos dois eixos (% resolveria contra a altura no Y). */
    --pc-dobra: calc(var(--pc-cat-largura) * 0.1944);
    position: relative;
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: var(--pc-cat-largura);
    /* razao 72/90 do Figma */
    aspect-ratio: 72 / 90;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Figma 124823:8529: miolo de 58px comecando em top 18px, gap 12px.
       Tudo em calc sobre --pc-cat-largura: % em padding referencia a largura do
       PAI (a tira de 375px), nao a do card. */
    gap: calc(var(--pc-cat-largura) * 0.1667);
    padding:
        calc(var(--pc-cat-largura) * 0.25)
        calc(var(--pc-cat-largura) * 0.0972)
        0;
    /* clip-path recorta box-shadow; o Figma usa borda fina de 0.5px, nao sombra —
       drop-shadow e o unico contorno que acompanha a silhueta recortada. */
    background: var(--pc-branco);
    border-radius: var(--pc-radius-card);
    filter: drop-shadow(0 0 0.5px var(--pc-cinza-100));
    text-decoration: none;
    color: var(--pc-grafite);
    clip-path: polygon(
        0 0,
        calc(100% - var(--pc-dobra)) 0,
        100% var(--pc-dobra),
        100% 100%,
        0 100%
    );
}

/* A dobra tem um canto ARREDONDADO (curl do papel) — no path do Figma o arco tem
   raio ~23.6 num quadro de 64 (~37% do lado). polygon() nao faz curva, entao a forma
   vem do proprio path via mask.
   A hipotenusa do path — de (0,0) a (63.71,61.87) — e a aresta que encosta na
   diagonal do corte; a massa aponta para DENTRO do card (baixo-esquerda), que e a
   aba de papel virada. Nao espelhar: a orientacao do path ja e a do Figma. */
.pc-cat-card__dobra {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--pc-dobra);
    height: var(--pc-dobra);
    background: var(--pc-cinza-100);
    -webkit-mask: var(--pc-dobra-forma) center / 100% 100% no-repeat;
    mask: var(--pc-dobra-forma) center / 100% 100% no-repeat;
}

/* Figma: icone de 24px de altura num card de 72 => 33.33%. */
.pc-cat-card__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(var(--pc-cat-largura) * 0.3333);
    color: var(--pc-amarelo);
}

.pc-cat-card__icone svg {
    width: auto;
    height: 100%;
    max-width: 100%;
}

.pc-cat-card__linha {
    width: 100%;
    border: none;
    border-top: 1px solid var(--pc-cinza-100);
    margin: 0;
}

/* Figma: Poppins SemiBold 8px sobre um frame de 375 => 2.133% da largura do shell.
   Escala por razao (regra do projeto), com piso de 8px para nao ficar ilegivel. */
.pc-cat-card__label {
    font-family: var(--pc-fonte-corpo);
    font-weight: 600;
    font-size: max(8px, calc(var(--pc-largura-shell) * 0.02133));
    line-height: 1.2;
    text-align: center;
    color: var(--pc-grafite);
}

/* ------------------------------------------------------------------ */
/* Barra de busca + modal localização (UI::barra_busca / modal_localizacao) */
/* ------------------------------------------------------------------ */

.pc-busca {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Figma 124814:709: pill branco com borda 0.5px (nao um campo cinza cheio). */
.pc-busca__campo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pc-branco);
    border: 0.5px solid var(--pc-cinza-100);
    border-radius: var(--pc-radius-pill);
    padding: 12px 14px;
}

/* O anel vive no PILL, nao no input: o input tem radius 0 e o box-shadow dele
   virava um retangulo dentro da pill arredondada. */
.pc-busca__campo:focus-within {
    border-color: var(--pc-amarelo);
    box-shadow: var(--pc-foco-anel);
}

.pc-busca__campo input:focus,
.pc-busca__campo input:focus-visible,
.pc-busca__campo button.pc-busca__local-texto:focus,
.pc-busca__campo button.pc-busca__local-texto:focus-visible {
    outline: none;
    box-shadow: none;
}

.pc-busca__campo svg {
    width: 18px;
    height: 18px;
    color: var(--pc-amarelo);
    flex-shrink: 0;
}

.pc-busca__campo input,
.pc-busca__campo button.pc-busca__local-texto {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--pc-fonte-corpo);
    font-size: 14px;
    color: var(--pc-grafite);
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 0;
}

.pc-busca__campo input::placeholder,
.pc-busca__local-texto {
    color: var(--pc-cinza-500);
}

.pc-busca__submit {
    width: 100%;
    margin-right: -16px;
}

/* Fundo travado enquanto ha modal/gaveta aberto (classe posta por PC.ui em
   pc-ui.js, que guarda e devolve a posicao de rolagem).

   position:fixed, e nao so overflow:hidden: no iOS o overflow sozinho nao
   segura o gesto e a pagina rola atras do painel assim mesmo. O fixed tira o
   body do fluxo, por isso o width:100% — senao ele encolhe para o conteudo. */
body.pc-scroll-travado {
    position: fixed;
    width: 100%;
    overflow: hidden;
    /* O `top` negativo com a posicao de rolagem entra inline, via JS. */
}

.pc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}

.pc-modal.is-aberto {
    display: block;
}

.pc-modal__fundo {
    position: absolute;
    inset: 0;
    background: var(--pc-overlay);
    /* O veu nao rola nada, entao o arraste sobre ele iria direto para a pagina
       de tras. `none` corta o encadeamento sem impedir o toque de fechar. */
    overscroll-behavior: none;
    touch-action: none;
}

.pc-modal__conteudo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Razão do shell (~89%), como todo bloco de largura cheia. */
    width: var(--pc-largura-conteudo);
    max-width: calc(100% - var(--pc-respiro-lateral) * 2);
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--pc-branco);
    border-radius: var(--pc-radius-card);
    padding: 20px;
    box-shadow: var(--pc-sombra-card);
}

.pc-modal__titulo {
    font-family: var(--pc-fonte-titulo);
    font-size: var(--pc-tamanho-h3);
    margin: 0 0 16px;
}

/* 36px de alvo com o glifo em 24px: o × não tinha font-size nenhum e herdava o
   tamanho do contexto, ficando pequeno demais para ler dentro do círculo.
   line-height:1 porque o × do Poppins sobe visualmente com a entrelinha padrão. */
.pc-modal__fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--pc-cinza-100);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 24px;
    line-height: 1;
    color: var(--pc-grafite);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-modal__fechar:hover,
.pc-modal__fechar:focus-visible {
    background: var(--pc-cinza-300);
}

/* Modal de confirmação de ação destrutiva (UI::modal_confirmar / PC.ui.confirmar).
   Estreito porque a decisão é curta: título, texto de consequência, slot opcional
   com o item em jogo e duas ações lado a lado. */
.pc-modal--confirmar .pc-modal__conteudo {
    text-align: center;
}

.pc-modal--confirmar .pc-modal__titulo {
    margin: 0 0 8px;
    padding-inline: 24px;
}

.pc-modal__texto {
    margin: 0;
    color: var(--pc-cinza-700);
}

.pc-modal__texto[hidden] {
    display: none;
}

/* Vazio o slot não pode abrir espaço entre o texto e os botões. */
.pc-modal__slot:empty {
    display: none;
}

.pc-modal__slot {
    margin-top: 16px;
    text-align: left;
}

.pc-modal__slot img {
    width: 100%;
    border-radius: var(--pc-radius-card);
}

/* Cancelar e confirmar dividem a linha em partes iguais — nenhuma das duas é
   o caminho "óbvio"; a cor (perigo x secundário) é que diferencia. */
.pc-modal__acoes-excluir {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.pc-modal__acoes-excluir .pc-botao {
    flex: 1;
}

/* Cancelar assinatura: a decisão é longa (o que se perde + escolher um motivo),
   então vive num drawer, não num modal centrado — ver .pc-drawer-cancelar. */
.pc-cancelar-perdas {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--pc-vermelho-claro);
    border-radius: var(--pc-radius-card);
}

.pc-cancelar-perdas__titulo {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-grafite);
}

.pc-cancelar-perdas__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--pc-cinza-700);
}

.pc-cancelar-perdas__lista li::before {
    content: '\00D7';
    color: var(--pc-vermelho);
    font-weight: 700;
    margin-right: 8px;
}

.pc-cancelar-aviso {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pc-cinza-700);
}

.pc-cancelar-motivo {
    margin-top: 18px;
}

.pc-cancelar-motivo .pc-campo + .pc-campo {
    margin-top: 12px;
}

/* Mesmo caso do drawer de denúncia: os campos nascem com border:none sobre fundo
   branco e, dentro do painel (também branco), sumiriam. Contorno no mesmo token
   que o :focus já assume. */
.pc-cancelar-motivo .pc-campo__select,
.pc-cancelar-motivo .pc-campo__textarea {
    border: 1px solid var(--pc-cinza-300);
}

.pc-cancelar-motivo .pc-campo__textarea {
    min-height: 12dvh;
    max-height: 20dvh;
    resize: none;
}

/* Rodapé fixo do drawer: confirmar em cima (é a ação que o usuário veio fazer),
   manter embaixo. Empilhados porque "Sim, cancelar assinatura" não cabe em meia
   linha sem quebrar em três. */
.pc-drawer-cancelar .pc-drawer__rodape {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-drawer-cancelar .pc-drawer__rodape .pc-botao {
    width: 100%;
    padding: 14px;
    text-align: center;
}

/* Recusar solicitação: textarea com altura em dvh, baixo — o motivo é opcional e
   curto, o campo não deve dominar a caixa. Sem resize: a altura é do layout, não
   do usuário. A borda é o que mostra ao usuário que a área é editável, já que o
   campo é branco sobre o fundo branco do modal. */
#pc-modal-recusar-motivo .pc-campo {
    margin-top: 12px;
    text-align: left;
}

#pc-modal-recusar-motivo .pc-campo__textarea {
    min-height: 18dvh;
    max-height: 28dvh;
    resize: none;
    border: 1px solid var(--pc-cinza-300);
}

/* ------------------------------------------------------------------ */
/* Gaveta lateral (drawer)                                            */
/* ------------------------------------------------------------------ */

/* Reusa .pc-modal (mesmo abrir/fechar, fundo e Esc) e só troca a caixa central
   por um painel colado na borda direita, que entra deslizando. Usado no detalhe
   da solicitação, onde a ficha tem 7 seções e não cabe num modal centrado. */
.pc-drawer .pc-drawer__painel {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    transition: transform 0.3s ease;
}

/* A gaveta so desliza depois que o display:block do .pc-modal ja valeu por um
   frame — sem isso o browser pinta direto no estado final e nao ha animacao.
   Quem adiciona .is-animando e PC.ui (abrirModal/fecharModal). */
.pc-drawer.is-aberto.is-animando .pc-drawer__painel {
    transform: translateX(0);
}

/* Variante folha inferior (bottom sheet): sobe de baixo e ocupa só a altura do
   conteúdo, em vez de tela cheia pela lateral. Para escolhas curtas — 2 ou 3
   opções — onde a gaveta inteira seria desproporcional.
   Uso: UI::drawer([... 'classe' => 'pc-drawer--folha']). */
.pc-drawer--folha.pc-drawer--folha .pc-drawer__painel {
    top: auto;
    bottom: 0;
    height: auto;
    max-height: 85dvh;
    transform: translateY(100%);
    border-radius: var(--pc-radius-card) var(--pc-radius-card) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* .pc-drawer--folha repetido para vencer a regra lateral (linha ~941) por
   especificidade, e não pela ordem da folha: as duas têm 3 classes e um empate
   quebraria com qualquer reordenação futura do arquivo. */
.pc-drawer--folha.pc-drawer--folha.is-aberto.is-animando .pc-drawer__painel {
    transform: translateY(0);
}

/* O corpo não deve esticar aqui: a folha tem a altura do conteúdo, e o
   flex:1 herdado da gaveta de tela cheia só faria sentido com altura fixa. */
.pc-drawer--folha .pc-drawer__corpo {
    flex: 0 1 auto;
}

/* O X sai: o puxador e o arraste para baixo são a afordância de fechar aqui
   (o toque no fundo e o Esc continuam valendo, como em toda .pc-modal). */
.pc-drawer--folha .pc-drawer__fechar {
    display: none;
}

/* Puxador: afordância de folha que sobe, no lugar do X de tela cheia. */
.pc-drawer--folha .pc-drawer__cabecalho {
    position: relative;
    padding-top: 24px;
    /* O cabeçalho é a alça do arraste; sem isto o navegador trata o gesto como
       scroll e o pointermove nunca chega (mesma armadilha do recorte). */
    touch-action: none;
    cursor: grab;
}

.pc-drawer--folha .pc-drawer__cabecalho:active {
    cursor: grabbing;
}

/* Durante o arraste o JS escreve o transform inline; a transição precisa sair
   para o painel acompanhar o dedo, e voltar ao soltar. */
.pc-drawer--folha .pc-drawer__painel.esta-arrastando {
    transition: none;
}

.pc-drawer--folha .pc-drawer__cabecalho::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--pc-cinza-100);
}

/* ------------------------------------------------------------------ */
/* Origem da foto: câmera ou galeria (UI::drawer_origem_foto)           */
/* Casca compartilhada — avatar e fotos da solicitação (privadas) e     */
/* troca de foto do serviço (pública). Por isso mora aqui, não no CSS   */
/* de uma tela.                                                         */
/* ------------------------------------------------------------------ */

.pc-origem-foto {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pc-origem-foto__opcao {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    background: var(--pc-branco);
    border: 1px solid var(--pc-cinza-100);
    border-radius: var(--pc-radius-card);
    text-align: left;
    cursor: pointer;
    font-family: var(--pc-fonte-corpo);
    color: var(--pc-grafite);
}

.pc-origem-foto__opcao:hover,
.pc-origem-foto__opcao:focus-visible {
    border-color: var(--pc-amarelo);
}

.pc-origem-foto__icone {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pc-amarelo);
    color: var(--pc-grafite);
}

.pc-origem-foto__icone svg {
    width: 22px;
    height: 22px;
}

.pc-origem-foto__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pc-origem-foto__texto strong {
    font-size: 15px;
    font-weight: 600;
}

.pc-origem-foto__texto small {
    font-size: 12px;
    color: var(--pc-cinza-500);
}

/* ------------------------------------------------------------------ */
/* Câmera — gaveta de captura em qualquer tela (UI::drawer_camera)     */
/* ------------------------------------------------------------------ */

.pc-camera__palco {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--pc-cinza-900);
    border-radius: var(--pc-radius-card);
    overflow: hidden;
}

/* ---- Mobile: tela cheia ----------------------------------------------
   Tirar foto no celular é uma tarefa de tela inteira, como o app de câmera
   que esta gaveta substituiu: o visor precisa do maior enquadramento
   possível, não de uma folha de 85dvh com o resto da página atrás. No
   desktop segue folha/modal — lá a webcam num painel menor é o esperado.

   As classes vêm triplicadas porque a regra da folha (linha ~1115) já usa
   .pc-drawer--folha.pc-drawer--folha para vencer a lateral por
   especificidade; para sobrepor aquela sem !important é preciso somar mais
   peso, e não depender da ordem do arquivo. */
@media (max-width: 1023px) {
    .pc-drawer--camera.pc-drawer--camera.pc-drawer--camera .pc-drawer__painel {
        top: 0;
        bottom: 0;
        height: 100%;
        max-height: none;
        border-radius: 0;
        background: var(--pc-cinza-900);
        padding-bottom: 0;
    }

    /* O palco ocupa toda a área livre entre cabeçalho e rodapé, em vez de
       ter proporção fixa: o visor é a tela, e o object-fit:cover do vídeo
       cuida do recorte em qualquer formato de aparelho. */
    .pc-drawer--camera .pc-camera,
    .pc-drawer--camera .pc-drawer__corpo {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0;
    }

    .pc-drawer--camera .pc-camera__palco {
        flex: 1 1 auto;
        aspect-ratio: auto;
        min-height: 0;
        border-radius: 0;
    }

    /* Cabeçalho e rodapé flutuam sobre o visor, escuros: em tela cheia uma
       faixa branca roubaria altura do enquadramento. */
    .pc-drawer--camera .pc-drawer__cabecalho,
    .pc-drawer--camera .pc-drawer__rodape {
        background: var(--pc-cinza-900);
        border: 0;
        color: var(--pc-branco);
    }

    /* Sem puxador, sem arraste: em tela cheia o cabeçalho volta a ser só
       cabeçalho (o JS também ignora o gesto aqui). */
    .pc-drawer--camera.pc-drawer--camera .pc-drawer__cabecalho {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        touch-action: auto;
        cursor: auto;
    }

    .pc-drawer--camera .pc-drawer__cabecalho::before {
        content: none;
    }

    /* O X volta: sem ele, em tela cheia e sem o fundo clicável atrás, não
       sobraria como fechar além do Esc (que no celular não existe). */
    .pc-drawer--camera.pc-drawer--camera .pc-drawer__fechar {
        display: grid;
        color: var(--pc-branco);
    }
}

.pc-camera__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Só a frontal é espelhada (é como a pessoa se vê); a traseira mostra a
   cena como ela é. capturar() espelha o canvas no mesmo caso, para a foto
   sair igual ao preview. */
.pc-camera[data-lado="user"] .pc-camera__video {
    transform: scaleX(-1);
}

.pc-camera__virar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--pc-cinza-300);
    border-radius: 50%;
    background: var(--pc-branco);
    color: var(--pc-cinza-900);
    cursor: pointer;
}

.pc-camera__virar svg {
    width: 20px;
    height: 20px;
}

.pc-camera__virar:active {
    transform: scale(0.97);
}

.pc-camera__aviso {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--pc-branco);
}

.pc-camera.is-pronta .pc-camera__aviso {
    display: none;
}

/* Capturar ocupa o espaço que sobra; virar é um círculo fixo ao lado. */
.pc-drawer--camera .pc-drawer__rodape {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pc-drawer--camera [data-pc-camera-capturar] {
    display: flex;
    flex: 1 1 auto;
    width: auto;
}

/* O fundo acompanha: aparece junto com o painel e some junto. */
.pc-drawer .pc-modal__fundo {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pc-drawer.is-aberto.is-animando .pc-modal__fundo {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pc-drawer .pc-drawer__painel,
    .pc-drawer .pc-modal__fundo {
        transition: none;
    }
}

/* Cabeçalho fixo: o título fica fora da área rolável para continuar visível
   enquanto o usuário percorre as seções. */
.pc-drawer__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 20px 20px 12px;
    border-bottom: 1px solid var(--pc-cinza-100);
}

.pc-drawer__titulo {
    margin: 0;
    font-family: var(--pc-fonte-titulo);
    font-size: var(--pc-tamanho-h3);
}

.pc-drawer .pc-drawer__fechar {
    position: static;
    flex-shrink: 0;
}

.pc-drawer__corpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Sem isto, ao chegar no fim da rolagem interna o gesto CONTINUA na pagina
       de tras (scroll chaining) — a gaveta parece "empurrar" o fundo. */
    overscroll-behavior: contain;
    padding: 16px 20px 24px;
}

/* Rodapé opcional: fica fora da área rolável, para ações que devem continuar
   visíveis (confirmar, aplicar filtros). */
.pc-drawer__rodape {
    flex-shrink: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pc-cinza-100);
}

/* Variante que entra pela esquerda (menu/filtros): só muda o lado de onde ela
   parte. O estado aberto continua sendo translateX(0) da regra .is-animando, que
   tem especificidade maior e não é sobrescrita por esta. */
.pc-drawer--esquerda:not(.is-animando) .pc-drawer__painel {
    transform: translateX(-100%);
}

/* Painel de localização (Figma 124814:2890 / Frame 20595): texto de apoio,
   um único campo e a lista de sugestões. Sem título, X ou botão Aplicar. */

/* A lista precisa poder crescer sem o conteúdo virar duas áreas de rolagem. */
.pc-modal--local .pc-modal__conteudo {
    overflow: visible;
}

.pc-local__apoio {
    margin: 0 0 16px;
    font-family: var(--pc-fonte-corpo);
    font-size: 13px;
    line-height: 1.5;
    color: var(--pc-grafite);
}

.pc-local__campo {
    cursor: text;
}

.pc-local__input {
    cursor: text !important;
}

.pc-local__lista {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    max-height: 40vh;
    overflow-y: auto;
}

.pc-local__item {
    padding: 10px 4px;
    border-bottom: 0.5px solid var(--pc-cinza-100);
    font-family: var(--pc-fonte-corpo);
    font-size: 12px;
    line-height: 1.4;
    color: var(--pc-grafite);
    cursor: pointer;
}

.pc-local__item:last-child {
    border-bottom: none;
}

.pc-local__item:hover,
.pc-local__item.is-ativo {
    background: var(--pc-cinza-100);
}

.pc-local__vazio {
    padding: 10px 4px;
    font-family: var(--pc-fonte-corpo);
    font-size: 12px;
    color: var(--pc-cinza-500);
}

/* ------------------------------------------------------------------ */
/* Bottom nav (UI::bottom_nav)                                         */
/* ------------------------------------------------------------------ */

/* Figma Component 17 (124814:2901): pill amarela 334×58, radius 32, padding 4;
   dentro, 4 frames de 80×50 com gap 2 e pill total (rx 25). No Figma o
   componente é `absolute` ancorado no rodapé do viewport — na web isso é
   `fixed`, e não `sticky` (sticky no fim do <body> nunca gruda, rola junto e
   some).
   Largura: a barra ocupa o MESMO trilho do conteúdo (~89% do shell), que no
   mock de 375px dá exatamente os 334px do componente. É razão, não medida
   fixa: travar em 334px absolutos deixava a barra pequena demais numa janela
   larga, com espaço sobrando dos dois lados. */

.pc-bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 500;
    width: var(--pc-largura-conteudo);
    max-width: calc(100vw - var(--pc-respiro-lateral) * 2);
    height: 58px;
}

/* Teclado aberto no celular: a barra fixa fica em cima do campo em foco e
   cobre o botao de envio. Sai de cena enquanto o usuario digita
   (classe posta pelo initTecladoVirtual em pc-ui.js). */
body.pc-teclado-aberto .pc-bottom-nav {
    display: none;
}

.pc-bottom-nav__lista {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Figma: 334 = 4 (pad) + 80*4 + 2*3 (gaps) + 4 (pad). Os itens preenchem
       a barra inteira, encostando no padding das duas pontas — por isso
       nenhum justify-content: qualquer alinhamento aqui criaria espaço morto
       nas bordas e quebraria a proporção. */
    gap: 2px;
    height: 100%;
    background: var(--pc-amarelo);
    border-radius: 32px;
    list-style: none;
    margin: 0;
    padding: 4px;
    box-shadow: var(--pc-sombra-card);
}

.pc-bottom-nav__item {
    /* Cada item = 80/326 do espaço interno no Figma. flex-basis 0 + grow
       reparte por igual e mantém essa razão em QUALQUER largura de barra,
       preservando a proporção do mock em vez de travar em 80px e deixar
       sobra nas pontas. */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.pc-bottom-nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 50px;
    /* âncora do badge de não lidas do sino */
    position: relative;
    /* Figma: os frames internos usam rx=25 sobre altura 50 = pill total
       (só a barra externa é que tem os 32px). */
    border-radius: var(--pc-radius-pill);
    color: var(--pc-branco);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Figma: todo Vector tem 20px de altura; a largura varia por glifo
   (sino 18.01 · casa 21.48 · pessoa 15 · interrogação 20). */
.pc-bottom-nav__icone {
    height: 20px;
    width: calc(var(--pc-icone-largura, 20) * 1px);
    flex: none;
}

/* Indicador de não lidas no sino: ponto grafite, sem numeral (pedido do Adelson).
   Encostado no canto superior direito do glifo. */
.pc-bottom-nav__badge {
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: 5px;
    width: 8px;
    height: 8px;
    padding: 0;
    box-sizing: border-box;
    background: var(--pc-grafite);
    border-radius: var(--pc-radius-pill);
}

/* Centrar a CAIXA de linha não centra o numeral: sobra métrica abaixo da baseline
   e o arredondamento de meio-pixel varia com o tamanho da bola. O ajuste óptico é
   medido por badge (Playwright a 8x, dígitos + "+9"); precisa de elemento próprio
   porque transform não pega em nó de texto solto. */
.pc-badge-num {
    display: block;
    transform: translateY(var(--pc-badge-ajuste, 0));
}

/* Único estado destacado = o item ATIVO (pill branca + glifo amarelo).
   No Figma é o frame 20548 (Vector 15px = o boneco/Perfil) que vem branco:
   aquilo é o estado ativo do mock, exportado na tela de Perfil — NÃO um
   destaque permanente da casinha. Os outros três são amarelos com glifo branco. */
.pc-bottom-nav__item--ativo .pc-bottom-nav__link {
    background: var(--pc-branco);
    color: var(--pc-amarelo);
}

/* Sobre o amarelo o veu escuro global suja: aqui o hover clareia, na direcao da
   pill branca do item ativo. O item ativo ja esta branco e nao reage. */
@media (hover: hover) {
    .pc-bottom-nav__item:not(.pc-bottom-nav__item--ativo) .pc-bottom-nav__link:hover {
        background: var(--pc-branco-24);
    }
}

.pc-bottom-nav__item:not(.pc-bottom-nav__item--ativo) .pc-bottom-nav__link:active {
    background: rgba(255, 255, 255, 0.36);
}

/* Anel grafite (nao amarelo): a barra ja e amarela e o anel padrao sumiria nela. */
.pc-bottom-nav__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(43, 43, 43, 0.45);
}

/* A barra é fixa e cobre o fim da página: reserva a altura dela (58) +
   respiro (12 em cima, 12 embaixo) para o último bloco nunca ficar escondido.
   Escopado em :has() para não sobrar padding nas telas sem bottom nav. */
body:has(.pc-bottom-nav) {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
}

/* Sem barra na tela, sem reserva: o espaco volta pro conteudo enquanto digita. */
body.pc-teclado-aberto:has(.pc-bottom-nav) {
    padding-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Notificações (UI::item_notificacao)                                 */
/* ------------------------------------------------------------------ */

/* Figma node 124814:2221: item sem card/moldura, direto sobre o fundo cinza —
   dot 8px + coluna de conteúdo com gap 12px; o separador é a linha da lista. */
.pc-notificacao {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.pc-notificacao__marcador {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pc-amarelo);
    /* centraliza no cap-height da 1ª linha do título (14px × 1.5) */
    margin-top: 7px;
}

/* Lido: o Figma não desenha o dot e escurece o bloco inteiro em 40%. */
.pc-notificacao--lida {
    opacity: 0.4;
}

.pc-notificacao--lida .pc-notificacao__marcador {
    display: none;
}

.pc-notificacao__corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* Título e texto formam um bloco próprio com gap 12px dentro da coluna de 16px. */
.pc-notificacao__titulo,
.pc-notificacao__texto {
    font-family: var(--pc-fonte-corpo);
    line-height: 1.5;
    margin: 0;
}

.pc-notificacao__titulo {
    font-weight: 500;
    font-size: 14px;
    color: var(--pc-grafite);
}

/* Figma: título+texto formam um bloco de gap 12px dentro da coluna de 16px.
   Como são irmãos diretos do corpo, o delta vai no próprio texto. */
.pc-notificacao__titulo + .pc-notificacao__texto {
    margin-top: -4px;
}

.pc-notificacao__texto {
    font-weight: 400;
    font-size: 12px;
    color: var(--pc-cinza-500);
}

/* Botão de ação por item (Figma node 124814:2243) — pill de 28px, Body 3
   semi-bold 8px (10px aqui: 8px literal fica ilegível fora do mockup).
   Dupla classe porque .pc-botao (min-height 48px / 14px) vem depois neste
   arquivo e ganharia no desempate por ordem. */
.pc-botao.pc-notificacao__acao {
    display: inline-flex;
    min-height: 28px;
    padding-block: 0;
    padding-inline: 32px;
    font-weight: 600;
    font-size: 10px;
    line-height: 1.2;
    color: var(--pc-cinza-claro);
}

/* "Visualizado" e "Ver Comentário" usam o mesmo cinza-70 do Figma. "Visualizado"
   é estado de leitura, não botão morto: segue clicável e reabre a solicitação
   enquanto ela estiver pendente. */
.pc-botao.pc-notificacao__acao--lida,
.pc-botao.pc-notificacao__acao--comentario {
    background: var(--pc-cinza-700);
    color: var(--pc-cinza-claro);
    border: none;
    opacity: 1;
    cursor: pointer;
}

/* Dupla classe também nos estados: o background acima venceria o hover da
   variante (0,2,0 contra 0,1,0 + pseudo-classe) e o botão ficaria inerte. */
@media (hover: hover) {
    .pc-botao.pc-notificacao__acao--lida:hover:not(:disabled),
    .pc-botao.pc-notificacao__acao--comentario:hover:not(:disabled) {
        background: var(--pc-cinza-500);
    }
}

.pc-botao.pc-notificacao__acao--lida:active:not(:disabled),
.pc-botao.pc-notificacao__acao--comentario:active:not(:disabled) {
    background: var(--pc-cinza-900);
}

/* Já despachada ("Recusado por você", "Aceito pelo prestador"…): o rótulo é o
   desfecho e não há mais o que decidir — botão morto de propósito. Mais apagado
   que o "Visualizado" para a diferença ser visível, sem o opacity:0.5 do
   :disabled global (que some com o texto no cinza-70). */
.pc-botao.pc-notificacao__acao--despachada,
.pc-botao.pc-notificacao__acao--despachada:disabled {
    background: var(--pc-cinza-100);
    color: var(--pc-cinza-500);
    border: none;
    opacity: 1;
    cursor: default;
}

.pc-notificacao__tempo {
    font-size: 10px;
    line-height: 1.12;
    color: var(--pc-cinza-500);
}

/* Chegou pelo stream com a tela aberta: entra deslizando para que o usuário
   perceba que a lista mudou sozinha em vez de o conteúdo só "pular". */
.pc-notificacao--nova {
    animation: pc-notificacao-entra 0.32s ease-out;
}

@keyframes pc-notificacao-entra {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-notificacao--nova {
        animation: none;
    }
}

/* ------------------------------------------------------------------ */
/* Avaliações (UI::item_avaliacao)                                     */
/* ------------------------------------------------------------------ */

/* Estrutura do Figma (nodes 124822:5933 / 6939 / 7148): cabeçalho cinza com o autor
   + ações, corpo branco com borda fina; raio 16px só nas quinas externas. */
.pc-avaliacao {
    overflow: hidden;
    padding: 0;
    /* No Figma o card se separa do fundo pela borda fina do corpo, não por sombra. */
    box-shadow: none;
}

/* Estrelas do card são menores que as da vitrine e sem o número ao lado. */
.pc-avaliacao .pc-estrelas__icone {
    width: 11px;
    height: 11px;
}

.pc-avaliacao__cabecalho {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--pc-cinza-100);
    padding: 8px 16px;
    border-radius: var(--pc-radius-card) var(--pc-radius-card) 0 0;
}

/* Avatar 24px com anel amarelo (Figma). O tamanho vem inline de UI::avatar(),
   então o anel precisa caber DENTRO dele — sem border-box a borda somaria 2px e
   o círculo sairia deslocado da foto. */
.pc-avaliacao__cabecalho .pc-avatar {
    border: 1px solid var(--pc-amarelo);
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.pc-avaliacao__cabecalho-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pc-avaliacao__nome {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    color: var(--pc-cinza-700);
    display: block;
}

.pc-avaliacao__local {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    line-height: 1.5;
    color: var(--pc-cinza-500);
}

.pc-avaliacao__local-icone {
    width: 7px;
    height: 8px;
    flex-shrink: 0;
    color: var(--pc-amarelo);
}

.pc-avaliacao__acoes {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.pc-avaliacao__acao {
    width: 32px;
    height: 32px;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--pc-branco);
}

/* Editar é círculo amarelo; excluir/denunciar são quadrados arredondados vermelhos. */
.pc-aval-editar {
    background: var(--pc-amarelo);
    border-radius: 50%;
}

.pc-aval-editar svg {
    width: 14px;
    height: 14px;
}

.pc-aval-excluir,
.pc-aval-denunciar {
    background: var(--pc-vermelho-acao);
    border-radius: 16px;
}

.pc-aval-excluir svg {
    width: 14px;
    height: 16px;
}

.pc-aval-denunciar svg {
    width: 18px;
    height: 12px;
}

.pc-avaliacao__corpo {
    padding: 16px;
    background: var(--pc-branco);
    border: 0.5px solid var(--pc-cinza-100);
    border-top: 0;
    border-radius: 0 0 var(--pc-radius-card) var(--pc-radius-card);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Sem cabeçalho (vitrine do serviço) o corpo é o card inteiro. */
.pc-avaliacao--publica .pc-avaliacao__corpo {
    border-top: 0.5px solid var(--pc-cinza-100);
    border-radius: var(--pc-radius-card);
}

.pc-avaliacao__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pc-avaliacao__autor {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pc-cinza-700);
}

.pc-avaliacao__data {
    font-size: 12px;
    color: var(--pc-cinza-500);
    white-space: nowrap;
}

/* Selo "Sua avaliação" (card fixo no topo da aba Avaliações do serviço): fica
   ABAIXO do nome, por isso nome+selo viram uma coluna e o __topo segue com dois
   filhos (coluna e data), preservando o space-between original. */
.pc-avaliacao__identidade {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

/* Sem isto o align-items:center do __topo centraria a data na altura das duas
   linhas (nome + selo); a data tem que ficar na linha do nome. */
.pc-avaliacao--propria .pc-avaliacao__topo {
    align-items: flex-start;
}

.pc-badge--propria {
    background: var(--pc-amarelo);
    color: var(--pc-branco);
    font-size: 10px;
    padding: 3px 8px;
}

.pc-avaliacao__comentario {
    font-size: 11px;
    line-height: 1.4;
    color: var(--pc-cinza-500);
    margin: 0;
}

.pc-avaliacao__fotos {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    overflow-x: auto;
}

.pc-avaliacao__fotos img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Histórico (UI::lista_historico_item)                                */
/* ------------------------------------------------------------------ */

/* Figma node 124819:4727 — o card é duas colunas: a foto do serviço sangra na
 * esquerda (cantos arredondados só à direita) e o painel branco fica por cima,
 * deslocado, com a faixa de status atravessando o topo. No Figma a foto ocupa
 * 122 de 335 (~36%) e o painel 214 (~64%), sobrepostos em 1px — aqui a razão é
 * mantida com grid + margem negativa, sem px de tela fixos. */
.pc-historico-item {
    /* Altura da faixa de status: define o recuo do topo da foto (Figma: a foto
       comeca depois que a faixa passa). */
    --pc-hist-recuo-capa: 21px;

    position: relative;
    display: grid;
    grid-template-columns: 36% 1fr;
    align-items: start;
    cursor: pointer;
}

.pc-historico-item:focus-visible {
    outline: 2px solid var(--pc-amarelo);
    outline-offset: 2px;
}

/* No Figma a foto e 200 de um card de 224: nao e altura fixa, e o painel MENOS o
   recuo de topo. Com aspect-ratio a foto parava de acompanhar o painel assim que o
   texto subia para o tamanho legivel e o card esticava — a foto ficava boiando no
   meio. Aqui ela estica junto com o painel.

   O recuo NAO pode ser margin-top em %: porcentagem de margem resolve contra a
   LARGURA do pai (335px -> 36px, nao os ~26 esperados). A faixa de status e que
   define o recuo, entao ele vem dela: a mesma altura da faixa + o respiro do topo. */
/* Arredondamento na ESQUERDA (borda externa do card), reto na direita: e o lado
   que encosta no painel, e canto redondo ali abre uma falha visivel no encontro.
   No Figma esse arredondamento aparece a direita porque o no da foto esta
   espelhado (scaleX(-1)); espelhado, os cantos redondos caem na esquerda. Aqui a
   foto NAO e espelhada — inverter a foto do prestador seria errado — entao o
   radius ja e escrito no lado final. */
.pc-historico-item__capa {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    margin-top: calc(var(--pc-hist-recuo-capa) + 12px);
    background: var(--pc-cinza-100);
    border-radius: var(--pc-radius-card) 0 0 var(--pc-radius-card);
    overflow: hidden;
    z-index: 1;
}

/* `.elementor img` (height:auto, border-radius:0) tem a MESMA especificidade que
   `.pc-historico-item__capa img` e vence pela ordem da folha — por isso o seletor
   é ancorado no card, subindo a especificidade em vez de depender da ordem. */
.pc-historico-item .pc-historico-item__capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* Pill "Pro" sobre a foto, canto superior esquerdo (Figma 124822:5569). */
.pc-historico-item__badge-pro {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
}

/* O painel começa na coluna da foto e se estende até o fim, passando POR CIMA
 * dela — é o que produz a sobreposição do Figma sem posicionamento absoluto. */
.pc-historico-item__painel {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-left: calc(36% - 1px);
    display: flex;
    flex-direction: column;
    background: var(--pc-branco);
    border: 1px solid var(--pc-cinza-100);
    border-left: none;
    border-radius: var(--pc-radius-card) var(--pc-radius-card) var(--pc-radius-card) 0;
    overflow: hidden;
}

/* Faixa de status: barra arredondada no topo do painel (Figma 124822:5566 —
   174 de 299 de largura útil, ~58%, radius 12), não pill centrada nem full-width. */
.pc-historico-item__status {
    display: block;
    width: 82%;
    margin: 12px 12px 0;
    padding: 4px 10px;
    text-align: center;
    font-family: var(--pc-fonte-corpo);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
    color: var(--pc-branco);
    border-radius: 12px;
}

/* 'pendente' não tem cor definida no Figma (só aceita/recusada) — neutro coerente
 * com o resto do design system (cinza médio, distinto do cinza-300 de recusada). */
.pc-status--pendente {
    background: var(--pc-cinza-500);
}

.pc-status--aceita {
    background: var(--pc-amarelo);
}

.pc-status--recusada {
    background: var(--pc-cinza-300);
}

.pc-historico-item__corpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.pc-historico-item__prestador {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Ancorado no card pelo mesmo motivo do img da capa: `.elementor img` zera o
   border-radius e o avatar sairia quadrado. */
.pc-historico-item .pc-historico-item__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--pc-amarelo);
    object-fit: cover;
    flex-shrink: 0;
}

.pc-historico-item__avatar--vazio {
    display: block;
    background: var(--pc-cinza-100);
}

.pc-historico-item__identidade {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pc-historico-item__prestador-nome {
    display: block;
    font-family: var(--pc-fonte-corpo);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    color: var(--pc-cinza-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vira <a> para a ficha do serviço: mantém a aparência do texto, sem cara de link. */
.pc-historico-item__prestador-nome--link {
    text-decoration: none;
    cursor: pointer;
}

.pc-historico-item__prestador-nome--link:hover,
.pc-historico-item__prestador-nome--link:focus-visible {
    text-decoration: underline;
}

.pc-historico-item__local {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    line-height: 1.5;
    color: var(--pc-cinza-500);
    white-space: nowrap;
}

.pc-historico-item__local svg {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    color: var(--pc-amarelo);
}

.pc-historico-item__titulo {
    font-family: var(--pc-fonte-corpo);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    color: var(--pc-cinza-900);
    margin: 0;
}

.pc-historico-item__descricao {
    font-size: 10px;
    line-height: 1.5;
    color: var(--pc-cinza-500);
    margin: 0;
}

/* Motivo da recusa: mesma escala da descrição, com o rótulo em destaque para
   separá-lo do texto livre do prestador. */
.pc-historico-item__motivo {
    font-size: 10px;
    line-height: 1.5;
    color: var(--pc-cinza-700);
    margin: 0;
}

.pc-historico-item__motivo-rotulo {
    font-weight: 600;
    margin-right: 4px;
}

.pc-historico-item__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pc-historico-item__resposta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: var(--pc-cinza-500);
    white-space: nowrap;
}

.pc-historico-item__resposta svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Mesma redução do card de serviço: só a 1ª estrela + nota + (N) cabem aqui. */
.pc-historico-item__rodape .pc-estrelas__icone:not(:first-child) {
    display: none;
}

.pc-historico-item__rodape .pc-estrelas__icone {
    width: 11px;
    height: 11px;
}

.pc-historico-item__rodape .pc-estrelas__nota {
    font-size: 12px;
}

.pc-historico-item__rodape .pc-estrelas__total {
    font-size: 10px;
}

.pc-historico-item__categoria {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-amarelo-12);
    color: var(--pc-amarelo);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.pc-historico-item__data {
    align-self: flex-start;
    font-size: 10px;
    color: var(--pc-cinza-500);
}

/* Rodapé do card: "Solicitar novamente" ocupa a linha e o botão de ficha fecha à
 * direita (Figma 124822:5596). WhatsApp/Avaliar, quando existem, quebram abaixo. */
.pc-hist-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
}

.pc-hist-acoes .pc-botao {
    min-height: 28px;
    padding-inline: 12px;
    font-size: 11px;
}

.pc-hist-acoes .pc-hist-solicitar-novamente {
    flex: 1 1 auto;
}

.pc-hist-acoes__extra {
    flex: 1 1 100%;
}

.pc-hist-detalhe {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--pc-amarelo);
    color: var(--pc-branco);
    cursor: pointer;
}

.pc-hist-detalhe svg {
    width: 11px;
    height: 14px;
    display: block;
}

/* ------------------------------------------------------------------ */
/* Form multi-passos (UI::form_multipassos)                            */
/* ------------------------------------------------------------------ */

.pc-multipassos__progresso {
    margin-bottom: 20px;
}

.pc-multipassos__progresso-texto {
    font-size: 12px;
    font-weight: 600;
    color: var(--pc-cinza-700);
    margin-bottom: 6px;
    display: block;
}

.pc-multipassos__progresso-barra {
    height: 6px;
    background: var(--pc-cinza-100);
    border-radius: var(--pc-radius-pill);
    overflow: hidden;
}

.pc-multipassos__progresso-fill {
    height: 100%;
    background: var(--pc-amarelo);
    border-radius: var(--pc-radius-pill);
    transition: width 0.2s ease;
}

.pc-passo {
    background: var(--pc-branco);
    border: none;
    margin: 0 0 16px;
    padding: 18px;
    border-radius: var(--pc-radius-card);
    box-shadow: var(--pc-sombra-card);
}

.pc-passo[hidden] {
    display: none;
}

.pc-passo__legenda {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pc-fonte-titulo);
    font-weight: 600;
    font-size: 16px;
    color: var(--pc-cinza-900);
    margin-bottom: 14px;
    padding: 0;
}

.pc-passo__numero {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pc-amarelo);
    color: var(--pc-grafite);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.pc-multipassos__acoes {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.pc-multipassos__acoes .pc-botao {
    flex: 1;
}

/* ------------------------------------------------------------------ */
/* Form página única (UI::form_pagina_unica) — Fase 4, B2                */
/* Reaproveita .pc-passo/.pc-passo__legenda/.pc-passo__numero do form    */
/* multi-passos (cartões numerados idênticos); aqui nenhuma seção fica   */
/* hidden e não há barra de progresso — só o botão único + disclaimer.   */
/* ------------------------------------------------------------------ */

.pc-form-pagina-unica__acoes {
    margin-top: 8px;
    text-align: center;
}

.pc-form-pagina-unica__acoes .pc-botao {
    width: 100%;
}

.pc-form-pagina-unica__disclaimer {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--pc-cinza-500);
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* Campo com label (UI::campo)                                         */
/* ------------------------------------------------------------------ */

.pc-campo {
    margin-bottom: 16px;
}

/* Figma (node 124814:4256 / 124814:4251): label = Body Tone 1 — Poppins Medium 14/1.5
   em Escala de Cinza/70 (#4D4D4D), nao grafite 13/600. */
.pc-campo__label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--pc-cinza-700);
    margin-bottom: 8px;
}

.pc-campo__obrigatorio {
    color: var(--pc-amarelo);
}

/* Figma (node 124814:4257 / 124814:4252): input pill com altura de 40px sobre uma
   coluna de 335px = 11.94% da largura do conteudo, e respiro lateral de 14px =
   4.18%. Como manda a regra de ouro do projeto (largura e razao, nao px), a altura
   acompanha --pc-largura-conteudo em vez de ficar cravada em 40px: no shell de
   375px da o mesmo 40px do Figma, e no shell de 560px cresce na mesma proporcao —
   era o "magro" que aparecia ao fixar 40px numa coluna mais larga.
   O minimo de 40px protege telas estreitas (e o alvo de toque). */
.pc-campo__input,
.pc-campo__select,
.pc-campo__textarea {
    width: 100%;
    box-sizing: border-box;
    /* Altura fixa: o Figma da 40px numa coluna de 335. Usar % da largura fazia a
       altura disparar (56px em 517, 85px em 760) e o campo virava uma barra gorda —
       altura de input NAO acompanha largura. 48px = 40 do mock + alvo de toque. */
    height: 48px;
    border: none;
    border-radius: var(--pc-radius-pill);
    padding-block: 0;
    padding-inline: 16px;
    background: var(--pc-branco);
    font-family: var(--pc-fonte-corpo);
    font-size: 14px;
    line-height: 1.5;
    color: var(--pc-grafite);
}

.pc-campo__textarea {
    height: auto;
    padding-block: 12px;
}

/* Seta do Figma (15x9, #B3B3B3) no lugar do chevron nativo, que muda de forma
   por navegador e fica colado na borda. Recuo de 16px = mesmo respiro lateral do
   padding do campo; o padding-right abre espaco para o texto nao passar por baixo. */
.pc-campo__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M6.65686 8.07107C7.04738 8.46159 7.68055 8.46159 8.07107 8.07107L14.435 1.70711C14.8255 1.31658 14.8255 0.683419 14.435 0.292894C14.0445 -0.0976306 13.4113 -0.0976307 13.0208 0.292894L7.36396 5.94975L1.70711 0.292894C1.31659 -0.0976312 0.683418 -0.0976312 0.292893 0.292894C-0.097631 0.683418 -0.0976311 1.31658 0.292893 1.70711L6.65686 8.07107Z' fill='%23B3B3B3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 15px 9px;
}

/* O ::-ms-expand ainda desenha a seta do sistema no Edge legado. */
.pc-campo__select::-ms-expand {
    display: none;
}

.pc-campo__input::placeholder,
.pc-campo__textarea::placeholder {
    color: var(--pc-cinza-500);
}

.pc-campo__textarea {
    border-radius: 16px;
    resize: vertical;
    min-height: 96px;
}

.pc-campo__input:focus,
.pc-campo__select:focus,
.pc-campo__textarea:focus {
    outline: none;
    border-color: var(--pc-amarelo);
    box-shadow: var(--pc-foco-anel);
}

/* ------------------------------------------------------------------ */
/* Bloco CEP → Estado / Cidade / Bairro (UI::campos_localizacao)        */
/* ------------------------------------------------------------------ */

/* Campo preenchido pelo CEP: some o affordance de edição, mas o valor
   continua no FormData (readonly no input; classe nos <select>, que não
   aceitam readonly e ficariam fora do submit se usassem disabled). */
.pc-campo__input.is-travado,
.pc-campo__select.is-travado {
    background: var(--pc-cinza-100);
    color: var(--pc-cinza-700);
    cursor: default;
}

/* Travado nao abre lista: sem seta, e o padding volta ao do input. */
.pc-campo__select.is-travado {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    padding-right: 16px;
    background-image: none;
}

.pc-localizacao {
    position: relative;
}

.pc-localizacao.is-carregando [data-pc-loc="cep"] {
    opacity: 0.7;
}

.pc-localizacao.is-carregando::after {
    content: "";
    position: absolute;
    top: 38px;
    right: 16px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--pc-amarelo);
    border-top-color: transparent;
    border-radius: 50%;
    animation: pc-girando 0.7s linear infinite;
}

@keyframes pc-girando {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-localizacao.is-carregando::after {
        animation: none;
    }
}

/* Sentinela do scroll infinito (busca e notificacoes). O botao dentro dela e o
   fallback: aparece sem JS, sem IntersectionObserver e depois de um erro de
   rede; durante o carregamento quem ocupa o lugar e o spinner. */
/* O display do bloco (e o inline-flex de .pc-botao) vence o [hidden] do HTML —
   sem isto o botão esgotado (ou a casca que nasce oculta) continuava visível. */
.pc-carregar-mais[hidden],
.pc-carregar-mais > button[hidden] {
    display: none;
}

.pc-carregar-mais {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 24px;
}

.pc-carregar-mais__spinner {
    display: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--pc-amarelo);
    border-top-color: transparent;
    border-radius: 50%;
    animation: pc-girando 0.7s linear infinite;
}

.pc-carregar-mais.is-carregando > a,
.pc-carregar-mais.is-carregando > button {
    display: none;
}

.pc-carregar-mais.is-carregando .pc-carregar-mais__spinner {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .pc-carregar-mais__spinner {
        animation: none;
    }
}

.pc-campo__senha {
    position: relative;
}

/* Reserva o espaco do icone (24px do Figma) + o respiro lateral do input. */
.pc-campo__senha .pc-campo__input {
    padding-right: 48px;
}

/* Figma (node 124814:4254): o Icon do campo e size-[24px] — estava em 20px, o que
   deixava o olho pequeno demais dentro do pill. */
.pc-campo__olho {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    /* Figma: icone dos campos em Escala de Cinza/30 (#B3B3B3). */
    color: var(--pc-cinza-300);
    cursor: pointer;
    line-height: 0;
    transition: color 0.18s ease;
}

.pc-campo__olho-icone {
    display: block;
    width: 100%;
    height: 100%;
    /* O clique tem que chegar no <button>, nunca no <svg>/<path>. */
    pointer-events: none;
}

/* Os 2 desenhos ocupam o mesmo lugar; so um fica visivel por vez.
   !important porque o reset do Elementor aplica display nos filhos do container e
   vence o [hidden] do HTML — sem isso os DOIS olhos apareciam sobrepostos, que era
   o icone "bugado/cortado". */
.pc-campo__olho-icone[hidden] {
    display: none !important;
}

.pc-campo__olho:hover {
    color: var(--pc-cinza-500);
}

@media (prefers-reduced-motion: reduce) {
    .pc-campo__olho {
        transition: none;
    }
}

/* Icone decorativo a direita do campo (UI::campo 'icone'), ex.: calendario no
   campo de data. Mesma geometria do olho da senha: 24px a 16px da borda, no
   cinza dos icones de campo. pointer-events: none para o clique cair no input,
   que continua sendo o alvo (o campo e digitado, nao aberto pelo icone). */
.pc-campo__com-icone {
    position: relative;
}

.pc-campo__com-icone .pc-campo__input {
    padding-right: 48px;
}

.pc-campo__icone {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: block;
    width: 24px;
    height: 24px;
    color: var(--pc-cinza-300);
    pointer-events: none;
}

/* Campo de data: o icone abre o calendario, entao e um <button> com alvo de
   toque de 40px. O SVG dentro dele volta ao fluxo normal (o position absoluto
   acima e do icone decorativo, que nao tem botao em volta). */
.pc-campo__icone-botao {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--pc-cinza-300);
    cursor: pointer;
}

.pc-campo__icone-botao:hover {
    color: var(--pc-cinza-500);
}

.pc-campo__icone-botao .pc-campo__icone {
    position: static;
    transform: none;
    /* Tamanho do vetor do Figma (14x15) — nao esticar. */
    width: 14px;
    height: 15px;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Calendario do campo de data (pc-ui.js initCampoData)                */
/* ------------------------------------------------------------------ */

/* O calendario abre na gaveta-folha compartilhada (#pc-drawer-calendario), nao
   ancorado ao campo: fundo, Esc, arraste para baixo e animacao vem de .pc-drawer.
   Aqui fica so o conteudo — a grade do mes, montada por pc-ui.js no corpo. */
.pc-drawer--calendario .pc-drawer__corpo {
    padding-bottom: 16px;
}

.pc-calendario__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* Nas visoes de dias e meses o titulo e um <button> que sobe um nivel
   (mes -> ano), como no seletor nativo; na visao de anos vira <span>, porque
   nao ha nivel acima. As duas formas dividem esta regra. */
.pc-calendario__titulo {
    font-size: 16px;
    font-weight: 600;
    color: var(--pc-grafite);
    /* Nomes de mes tem larguras bem diferentes (maio x fevereiro); centralizar
       num flex de 3 itens evita a seta "pular" de lugar ao navegar. */
    flex: 1;
    text-align: center;
    text-transform: capitalize;
    /* Zera a pele de botao sem perder o alvo de toque. */
    padding: 8px 4px;
    border: none;
    border-radius: var(--pc-radius-card);
    background: transparent;
    font-family: inherit;
}

button.pc-calendario__titulo {
    cursor: pointer;
}

button.pc-calendario__titulo:hover {
    background: var(--pc-cinza-claro);
}

/* 44px: alvo de toque cheio — na gaveta ha espaco, e a navegacao entre meses e
   o gesto mais repetido aqui. */
.pc-calendario__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--pc-cinza-500);
    cursor: pointer;
}

.pc-calendario__nav:hover {
    background: var(--pc-cinza-claro);
    color: var(--pc-grafite);
}

/* A mesma seta do select (que aponta para baixo), girada 90 graus para virar
   esquerda/direita. */
.pc-calendario__nav svg {
    width: 12px;
    height: 8px;
    transform: rotate(-90deg);
    /* O clique tem que chegar no <button>, nunca no <svg>/<path>. */
    pointer-events: none;
}

.pc-calendario__nav--anterior svg {
    transform: rotate(90deg);
}

.pc-calendario__semana,
.pc-calendario__grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* Meses e anos: 4 colunas (12 itens em 3 linhas). Rotulos sao palavras, nao
   numeros de 2 digitos, entao 7 colunas nao caberiam. */
.pc-calendario__grade--meses {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* Celula de mes/ano: pill larga, nao o circulo dos dias — o conteudo e texto
   ("set", "2027") e nao caberia num circulo. */
.pc-calendario__celula {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 4px;
    border: none;
    border-radius: var(--pc-radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--pc-grafite);
    cursor: pointer;
    text-transform: capitalize;
}

.pc-calendario__celula:hover:not(:disabled) {
    background: var(--pc-cinza-claro);
}

.pc-calendario__celula.is-selecionado {
    background: var(--pc-amarelo);
    font-weight: 600;
}

.pc-calendario__semana {
    margin-bottom: 4px;
}

.pc-calendario__semana span {
    padding: 6px 0;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--pc-cinza-500);
}

.pc-calendario__dia {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Quadrado que acompanha a coluna: mantem a grade regular em qualquer
       largura de shell, sem cravar px (regra de ouro do projeto). */
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--pc-grafite);
    cursor: pointer;
}

.pc-calendario__dia:hover:not(:disabled) {
    background: var(--pc-cinza-claro);
}

/* Dias do mes vizinho ficam visiveis (a semana nao pode ter buraco), mas
   apagados para nao competirem com o mes atual. */
.pc-calendario__dia--fora {
    color: var(--pc-cinza-300);
}

.pc-calendario__dia--hoje {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--pc-cinza-300);
}

/* Vale para dia, mes e ano: tudo que ja passou e a REST recusaria. */
.pc-calendario__dia--indisponivel {
    color: var(--pc-cinza-100);
    cursor: default;
}

.pc-calendario__dia.is-selecionado {
    background: var(--pc-amarelo);
    color: var(--pc-grafite);
    font-weight: 600;
}

/* Figma (node 124814:4246): circulo e rotulo no mesmo eixo, gap 8px. */
.pc-campo__checkbox-linha {
    display: flex;
    /* flex-start, não center: o aceite dos termos quebra em 2 linhas no mobile e
       o círculo ficava centralizado no bloco todo, longe da 1ª linha. Em rótulo
       de uma linha só (Lembrar da Senha) o resultado é o mesmo de antes. */
    align-items: flex-start;
    gap: 8px;
}

/* Centra o círculo opticamente na PRIMEIRA linha do rótulo: (altura da linha de
   texto 16.8px - 16px do círculo) / 2. */
.pc-campo__checkbox-linha .pc-campo__checkbox {
    margin-top: 1px;
}

/* Figma (node 124814:4549): o "Lembrar da Senha" usa um circulo de 16px com borda
   de 1px em #B3B3B3 — nao o quadrado nativo do browser. Marcado, o circulo enche
   de amarelo e recebe o check em branco (mask, para herdar currentColor). */
.pc-campo__checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--pc-cinza-300);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

/* O SVG leva width/height e background-size explicitos: sem tamanho intrinseco
   o navegador estica o desenho ate a caixa inteira e o check some dentro do
   amarelo. 10px de check num circulo de 16px = respiro de 3px em volta. */
.pc-campo__checkbox:checked {
    border-color: var(--pc-amarelo);
    background-color: var(--pc-amarelo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4.2L3.6 6.8L9 1.2' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 8px;
}

.pc-campo__checkbox:focus-visible {
    outline: none;
    box-shadow: var(--pc-foco-anel);
}

/* Figma (node 124814:4248): rotulo do checkbox = Body 2 (Poppins 14 -> 12/1.5) em
   Escala de Cinza/30. Sobrescreve o label padrao dos campos (14/500 em /70). */
.pc-campo__checkbox-linha .pc-campo__label {
    /* !important: vence a regra por tela (.pc-form-login .pc-campo .pc-campo__label,
       que aplica margin-bottom:20px aos campos empilhados) — no checkbox o rotulo
       fica AO LADO do controle, entao qualquer margem vertical o desalinha. */
    margin: 0 !important;
    /* NÃO usar flex aqui: o rótulo mistura texto e <a> (ex.: "Aceito os termos
       de <a>política de privacidade</a>"), e em flex cada um vira um item, com
       o espaço entre eles descartado — as palavras saíam coladas. O alinhamento
       com o checkbox é responsabilidade do .pc-campo__checkbox-linha, que já é
       flex; aqui o rótulo é fluxo de texto normal. */
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--pc-cinza-300);
    cursor: pointer;
}

.pc-campo__help {
    display: block;
    font-size: 11px;
    color: var(--pc-cinza-500);
    margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* Estado vazio (UI::estado_vazio)                                     */
/* ------------------------------------------------------------------ */

.pc-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-wrap: balance;
    padding: 48px 20px;
}

.pc-vazio > * {
    text-align: center;
}

.pc-vazio .pc-botao {
    margin-top: 20px;
}

/* Estado vazio que ocupa a tela inteira (404): centraliza tambem na vertical. */
.pc-vazio--tela {
    justify-content: center;
    min-height: 70dvh;
}

.pc-vazio__ilustracao {
    margin-bottom: 16px;
}

.pc-vazio__ilustracao svg {
    width: 96px;
    height: 96px;
}

.pc-vazio__titulo {
    font-family: var(--pc-fonte-titulo);
    font-size: var(--pc-tamanho-h3);
    color: var(--pc-cinza-900);
    margin: 0 0 6px;
}

.pc-vazio__texto {
    font-size: 13px;
    color: var(--pc-cinza-500);
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Login necessário (UI::login_necessario)                             */
/* ------------------------------------------------------------------ */

.pc-login-necessario {
    text-align: center;
    padding: 32px var(--pc-respiro-lateral);
    margin: 20px auto;
    max-width: var(--pc-largura-conteudo);
}

.pc-login-necessario__titulo {
    font-family: var(--pc-fonte-titulo);
    font-size: var(--pc-tamanho-h3);
    margin: 0 0 8px;
}

.pc-login-necessario__texto {
    font-size: 13px;
    color: var(--pc-cinza-500);
    margin: 0 0 20px;
}

/* ------------------------------------------------------------------ */
/* Botão pill (UI::botao)                                              */
/* ------------------------------------------------------------------ */

/* Figma (node 124814:4243, "Sign in"): pill com padding 10px 40px e Body 1 —
   Poppins Regular 14/1.5. O peso 600 anterior engrossava o rotulo alem do design. */
.pc-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    /* Figma (node 124814:4243): 44px de altura. Altura fixa pelo mesmo motivo do
       input — amarrar a % da largura inflava o pill em telas largas. */
    min-height: 48px;
    padding-block: 0;
    padding-inline: 32px;
    border: none;
    font-family: var(--pc-fonte-corpo);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    border-radius: var(--pc-radius-pill);
    cursor: pointer;
}

/* Figma (node 124814:4244): o rotulo do botao amarelo e BRANCO, nao grafite. */
.pc-botao--primario {
    background: var(--pc-amarelo);
    color: var(--pc-branco);
}

/* Fase 4 (revisão Figma, B3): CTA principal grafite+texto branco — home.png,
   busca-servicos.png, servico-*.png, historico-*.png e cadastro.png mostram
   "Solicitar orçamento" / "Solicitar novamente" / "Criar conta" nesta cor; o amarelo
   fica reservado a ações secundárias de destaque (Buscar agora, Entrar, Fazer
   Assinatura, Ver Sobre). */
.pc-botao--escuro {
    background: var(--pc-grafite);
    color: var(--pc-branco);
}

.pc-botao--secundario {
    background: transparent;
    color: var(--pc-grafite);
    border: 1.5px solid var(--pc-cinza-300);
}

.pc-botao--perigo {
    background: var(--pc-vermelho);
    color: var(--pc-branco);
}

/* Conformidade Figma rodada2 (I9): "Sair" vira pill cinza solida (sem borda),
   nao mais a variante secundaria (transparente+borda). */
.pc-botao--cinza {
    background: var(--pc-cinza-500);
    color: var(--pc-branco);
    border: none;
}

.pc-botao--cinza svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.pc-botao:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* Estados do botão — cada variante reage na PRÓPRIA cor.              */
/* O véu escuro comum de pc-tokens.css não serve aqui: 8% de preto     */
/* sobre o amarelo é invisível, e o pouco que aparece lê como sujeira. */
/* Escurece o que é claro/saturado (amarelo, vermelho) e clareia o que */
/* é escuro (grafite, cinza) — mesma lógica da bottom nav.             */
/* ------------------------------------------------------------------ */

.pc-botao {
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}

/* Afundar: no mobile é o ÚNICO retorno tátil que existe (não há hover).
   O bloco prefers-reduced-motion de pc-tokens.css já zera este transform. */
.pc-botao:active:not(:disabled) {
    transform: scale(0.97);
}

@media (hover: hover) {
    .pc-botao--primario:hover:not(:disabled) {
        background: var(--pc-amarelo-hover);
    }

    .pc-botao--escuro:hover:not(:disabled) {
        background: var(--pc-grafite-hover);
    }

    .pc-botao--perigo:hover:not(:disabled) {
        background: var(--pc-vermelho-hover);
    }

    .pc-botao--cinza:hover:not(:disabled) {
        background: var(--pc-cinza-500-hover);
    }

    /* Transparente: o estado tem que vir do fundo, senão não há o que escurecer.
       A borda acompanha para o pill não parecer que perdeu o contorno. */
    .pc-botao--secundario:hover:not(:disabled) {
        background: var(--pc-cinza-claro);
        border-color: var(--pc-cinza-500);
    }
}

.pc-botao--primario:active:not(:disabled) {
    background: var(--pc-amarelo-active);
}

.pc-botao--escuro:active:not(:disabled) {
    background: var(--pc-grafite-active);
}

.pc-botao--perigo:active:not(:disabled) {
    background: var(--pc-vermelho-active);
}

.pc-botao--cinza:active:not(:disabled) {
    background: var(--pc-cinza-500-active);
}

.pc-botao--secundario:active:not(:disabled) {
    background: var(--pc-cinza-100);
    border-color: var(--pc-cinza-500);
}

/* ------------------------------------------------------------------ */
/* Toast — canal único de erro do app (nenhuma tela renderiza caixa    */
/* de erro no HTML). Entra pelo topo; a pilha segue a mesma razão de   */
/* largura do shell.                                                   */
/* ------------------------------------------------------------------ */

/* Tema do Toastify-js (assets/vendor/toastify): a lib entrega posicionamento,
   animação e empilhamento; aqui só trocamos a pele — o gradiente azul padrão
   dela não tem nada a ver com o projeto. */
.toastify.pc-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    /* Mesma razão do shell (~89%) no mobile, com teto próprio: um toast não é
       um bloco de conteúdo — esticá-lo até 712px no desktop vira uma faixa. */
    width: min(var(--pc-largura-conteudo), 420px);
    max-width: calc(100vw - 32px);
    /* 18px + os 5px da faixa colorida à esquerda. */
    padding: 16px 18px 16px 23px;
    border-radius: var(--pc-radius-card);
    background: var(--pc-branco);
    background-image: none;
    font-family: var(--pc-fonte-corpo);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--pc-grafite);
    cursor: default;
    /* A faixa de cor à esquerda é um box-shadow inset, não border-left nem
       pseudo-elemento: o inset respeita o border-radius, então a faixa
       acompanha a curva do canto em vez de escapar dela em "pontas". */
    box-shadow: inset 5px 0 0 0 var(--pc-grafite), 0 10px 30px var(--pc-sombra-toast);
}

.toastify.pc-toast--erro {
    box-shadow: inset 5px 0 0 0 var(--pc-vermelho), 0 10px 30px var(--pc-sombra-toast);
}

.toastify.pc-toast--ok {
    box-shadow: inset 5px 0 0 0 var(--pc-verde), 0 10px 30px var(--pc-sombra-toast);
}

/* Ícone por tipo, sem markup extra: escapeMarkup fica ligado (o texto do toast
   vem de mensagem de servidor). */
.toastify.pc-toast::before {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
}

.toastify.pc-toast--erro::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23C62828'/%3E%3Cpath d='M12 7v6M12 16.5v.5' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.toastify.pc-toast--ok::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%232E7D32'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.toastify.pc-toast .toast-close {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 2px;
    color: var(--pc-grafite);
    font-size: 20px;
    line-height: 1;
    opacity: 0.5;
}

.toastify.pc-toast .toast-close:hover {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .toastify {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* Skeleton de carregamento (UI::skeleton)                             */
/* ------------------------------------------------------------------ */

/* Placeholder reservando o espaco do conteudo que ainda vai chegar, para a tela
   nao trocar de layout quando ele chega. Herda o tamanho de quem o contem:
   quem usa define largura/altura na classe do bloco, nao aqui. */
.pc-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--pc-cinza-100);
    border-radius: var(--pc-radius-capa);
}

/* Brilho em ::after e nao em background-position da propria caixa: assim quem
   usa pode trocar o background sem perder a animacao. */
.pc-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        var(--pc-branco) 50%,
        transparent
    );
    opacity: 0.55;
    animation: pc-skeleton-brilho 1.4s ease-in-out infinite;
}

@keyframes pc-skeleton-brilho {
    100% {
        transform: translateX(100%);
    }
}

/* Texto: a altura vem da linha, e a ultima linha do bloco fica mais curta para
   parecer paragrafo. */
.pc-skeleton--texto {
    height: 12px;
    border-radius: 4px;
}

.pc-skeleton--texto-curto {
    width: 60%;
}

.pc-skeleton--circulo {
    border-radius: 50%;
}

/* Card de servico: mesma caixa do .pc-card-servico (padding, borda, gap) para o
   card real entrar exatamente no lugar do placeholder, sem salto. */
.pc-skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: var(--pc-branco);
    border: 0.5px solid var(--pc-cinza-100);
    border-radius: var(--pc-radius-card);
}

.pc-skeleton-card__topo {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: calc(12px * 1.35 + 2px + 12px);
}

.pc-skeleton-card__avatar {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.pc-skeleton-card__identidade {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.pc-skeleton-card__capa {
    aspect-ratio: 41 / 17;
    width: 100%;
}

.pc-skeleton-card__corpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-skeleton-card__cta {
    height: 32px;
    border-radius: 999px;
}

/* Regiao inteira em carregamento: fora da arvore de acessibilidade (o leitor de
   tela anuncia o estado por aria-busy no container, nao lendo as caixas vazias). */
.pc-skeleton-lista {
    display: contents;
}

@media (prefers-reduced-motion: reduce) {
    .pc-skeleton::after {
        animation: none;
    }
}

/* ------------------------------------------------------------------ */
/* Gaveta de denuncia (UI::drawer_denuncia) — servico e avaliacao      */
/* ------------------------------------------------------------------ */

.pc-drawer--denunciar .pc-form-denunciar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* CTA ocupa a largura util da folha. Seletor de contexto e nao classe
   utilitaria: .pc-botao base e inline-flex e o modificador de tamanho
   perderia o desempate. */
.pc-drawer--denunciar .pc-form-denunciar .pc-botao[type="submit"] {
    width: 100%;
}

/* Select e textarea nascem com border:none sobre fundo branco — na folha,
   tambem branca, o campo sumiria. O contorno cinza e o mesmo token que o
   :focus ja assume ao trocar so a border-color. */
.pc-drawer--denunciar .pc-campo__select,
.pc-drawer--denunciar .pc-campo__textarea {
    border: 1px solid var(--pc-cinza-300);
}

/* Mesmo tratamento do textarea da gaveta de avaliar: altura em dvh e sem
   alca de resize, que na folha empurraria o CTA. */
.pc-drawer--denunciar .pc-campo__textarea {
    min-height: 18dvh;
    max-height: 28dvh;
    resize: none;
}

/* Voltar ao perfil: sai no HTML das telas filhas do menu de /perfil/, mas so
   e exibido pela camada desktop (pc-desktop.css, >=1024px). No mobile o slot
   de voltar do header ja resolve. */
.pc-header__voltar-perfil {
    display: none;
}