/* =========================================================
   PERÍMETRO CEFÁLICO — a tela da curva de crescimento
   ========================================================= */

/* ---------- O que falta para calcular ----------
   Deliberadamente parecido com um aviso, e não com um erro: não é defeito
   do sistema, é dado que ainda não foi preenchido, e há um botão para
   resolver ali mesmo. */
.aviso-faltando {
    border: 1px solid #f0d9a8;
    background: #fdf7e9;
    border-radius: var(--pv-raio-cartao);
    padding: 18px 20px;
    margin: 18px 0;
}

.aviso-faltando strong { display: block; margin-bottom: 6px; color: #8a6420; }
.aviso-faltando p { margin: 0 0 14px; font-size: 0.9rem; line-height: 1.5; }
.aviso-faltando .btn-gradiente { display: inline-flex; }

/* ---------- O resultado da última medida ----------
   O percentil grande à esquerda e a leitura em palavras à direita. O número
   sozinho não diz nada a quem não trabalha com percentil todo dia; a frase
   sozinha perde a precisão. */
.resumo-percentil {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 20px 24px;
    margin: 20px 0;
    border-radius: var(--pv-raio-cartao);
    border: 1px solid var(--pv-borda);
    border-left: 5px solid var(--pv-ciano);
    background: var(--pv-branco);
}

.resumo-percentil.nivel-atencao { border-left-color: #d89a3c; background: #fdf9f2; }
.resumo-percentil.nivel-alerta  { border-left-color: #c0564b; background: #fdf4f3; }

.resumo-numero { display: flex; flex-direction: column; align-items: center; flex: none; }

.percentil-valor {
    font-family: var(--fonte-titulo);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pv-titulo);
}

.percentil-valor sup { font-size: 1.1rem; }
.nivel-atencao .percentil-valor { color: #b07b26; }
.nivel-alerta .percentil-valor  { color: #a8453b; }

.percentil-rotulo {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pv-texto-suave);
    margin-top: 4px;
}

.resumo-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.resumo-texto strong { font-size: 1.08rem; color: var(--pv-titulo); }
.resumo-texto span { font-size: 0.9rem; color: var(--pv-texto-suave); }
.resumo-mediana { font-size: 0.84rem !important; }

/* ---------- O gráfico ---------- */
.grafico-caixa {
    margin: 20px 0 12px;
    padding: 8px;
    border: 1px solid var(--pv-borda);
    border-radius: var(--pv-raio-cartao);
    background: var(--pv-branco);
    overflow-x: auto;          /* em tela estreita, rola em vez de espremer */
}

.grafico-cefalico { display: block; width: 100%; min-width: 460px; height: auto; }

/* ---------- A legenda ----------
   Sempre presente, e sempre com texto: cor não pode ser a única portadora
   de sentido, nem para quem não a distingue nem para quem imprime. */
.legenda-grafico {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.legenda-grafico li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--pv-texto-suave);
}

.amostra { width: 16px; height: 12px; border-radius: 3px; flex: none; }
.amostra-faixa    { background: #e8f4f7; border: 1px solid #cfe6ec; }
.amostra-mediana  { height: 2px; background: #9bb7bf; border-radius: 0; }
.amostra-paciente { width: 12px; height: 12px; border-radius: 50%; background: #2f8f9d; }
.amostra-alerta   { width: 12px; height: 12px; border-radius: 50%; background: #c0564b; }

/* ---------- A situação na tabela ---------- */
.pilula-nivel {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--pv-raio-pilula);
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(47, 143, 157, 0.1);
    color: #24707b;
}

.pilula-nivel.nivel-atencao { background: rgba(216, 154, 60, 0.14); color: #8a6420; }
.pilula-nivel.nivel-alerta  { background: rgba(192, 86, 75, 0.12); color: #a8453b; }

/* ---------- O limite da tela ----------
   Não é letra miúda de rodapé de propósito: é a frase que impede o
   percentil de ser lido como diagnóstico. */
.nota-clinica {
    margin-top: 26px;
    padding: 16px 18px;
    border-left: 3px solid var(--pv-borda);
    background: var(--pv-superficie);
    border-radius: 0 var(--pv-raio-campo) var(--pv-raio-campo) 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--pv-texto);
}

.nota-clinica strong { color: var(--pv-titulo); }

.nota-clinica span {
    display: block;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--pv-texto-suave);
}

@media (max-width: 720px) {
    .resumo-percentil { gap: 16px; padding: 16px; }
    .percentil-valor { font-size: 2.2rem; }
    .legenda-grafico { gap: 6px 14px; }
}


/* =========================================================
   FAIXAS DE NORMALIDADE (IC / CVAI) — escalas de referência
   ---------------------------------------------------------
   Bloco 100% aditivo. As escalas deixaram de ser dois PNGs
   pequenos gerados pelo Matplotlib e passaram a ser barras em
   HTML/CSS: acompanham a largura do cartao, ficam nitidas em
   qualquer tela e reproduzem o desenho das escalas impressas
   (barra em forma de seta, grupo em cima, gravidade dentro da
   tarja, percentuais de corte embaixo).
   ========================================================= */

/* A coluna da direita agora empilha DOIS cartoes: as faixas em
   cima e o visualizador 3D embaixo. E as colunas param de se
   esticar uma ate a altura da outra — era isso que deixava a
   faixa branca enorme embaixo do 3D. */
.duas-colunas-cefalica {
    align-items: start;
}

.coluna-lateral {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.cartao-faixas {
    padding: 22px 26px 20px;
}

.faixas-titulo-bloco {
    margin: 0 0 2px;
}

.faixa-escala {
    margin-top: 16px;
}

.faixa-escala-titulo {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pv-texto, #33413f);
}

/* ---------- Marcador do valor medido ---------- */

.faixa-escala-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.faixa-escala-marcador-linha {
    position: relative;
    height: 14px;
    margin-top: 8px;
}

.faixa-marcador-chip {
    flex: none;
    background: #fff;
    border: 1.5px solid var(--pv-borda, #e3e8e6);
    border-radius: 999px;
    padding: 4px 13px;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pv-texto, #33413f);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.09);
}

.faixa-marcador-bico {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 11px solid var(--pv-texto, #33413f);
}

/* ---------- A barra colorida ---------- */

.faixa-barra {
    position: relative;
    display: flex;
    height: 68px;
    /* O overflow arredonda a ponta ESQUERDA (o clip-path sozinho so faz
       cantos retos) e o clip-path recorta a ponta DIREITA em seta. */
    border-radius: 34px;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}

/* Escala do IC: a ponta da esquerda tambem e uma seta (dolicocefalia
   segue diminuindo), como na escala impressa. */
.faixa-barra.com-seta-esquerda {
    border-radius: 8px;
    clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 50%,
                       calc(100% - 26px) 100%, 26px 100%, 0 50%);
}

.faixa-seg {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    padding: 0 4px 9px;
    overflow: hidden;
}

.faixa-seg-nome {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
}

.faixa-grupos {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.faixa-grupo {
    position: absolute;
    top: 11px;
    box-sizing: border-box;
    padding: 0 6px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Grupo com uma unica faixa (Normalidade, Dolicocefalia, Normal/Leve):
   nao ha subdivisao embaixo, entao o nome ocupa o centro da tarja. */
.faixa-grupo-solo {
    top: 50%;
    transform: translateY(-50%);
}

/* Na escala do IC a ponta esquerda e uma seta: o nome do primeiro grupo
   precisa comecar depois dela, senao fica cortado na diagonal. */
.faixa-barra.com-seta-esquerda .faixa-grupo:first-child {
    padding-left: 26px;
}

/* Grupo com subdivisoes: risco fino embaixo do nome, ligando as
   gravidades que pertencem a ele — como na escala impressa. */
.faixa-grupo-multi::after {
    content: "";
    display: block;
    height: 1px;
    margin: 5px 10% 0;
    background: rgba(255, 255, 255, 0.6);
}

/* ---------- Percentuais de corte ---------- */

.faixa-ticks {
    position: relative;
    height: 20px;
    margin-top: 7px;
}

.faixa-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--pv-texto-suave, #6f7d7a);
}

.faixa-legenda {
    display: none;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.faixa-legenda li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--pv-texto-suave, #6f7d7a);
}

.faixa-legenda-cor {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: none;
}

.faixas-nota {
    margin: 16px 0 0;
    font-size: 0.74rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--pv-texto-suave, #6f7d7a);
}

@media (max-width: 1100px) {
    .coluna-lateral {
        gap: 20px;
    }
}

/* Telas estreitas: a barra continua inteira (cor e proporcao sao o que ela
   comunica), mas os textos encolhem para caber dentro das tarjas em vez de
   vazarem por cima das vizinhas. */
@media (max-width: 780px) {
    .cartao-faixas {
        padding: 18px 16px 16px;
    }
    .faixa-escala-titulo {
        font-size: 0.8rem;
    }
    .faixa-barra {
        height: 60px;
        border-radius: 30px;
        clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
    }
    .faixa-barra.com-seta-esquerda {
        clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%,
                           calc(100% - 18px) 100%, 18px 100%, 0 50%);
    }
    /* Sem o nome da gravidade dentro da tarja, o nome do grupo passa a
       ocupar o centro da barra em todos os casos. */
    .faixa-grupo {
        top: 50%;
        transform: translateY(-50%);
        padding: 0 3px;
        font-size: 0.6rem;
        letter-spacing: 0.02em;
    }
    .faixa-barra.com-seta-esquerda .faixa-grupo:first-child {
        padding-left: 18px;
    }
    .faixa-grupo-multi::after {
        display: none;
    }
    .faixa-seg {
        padding: 0;
    }
    /* As tarjas estreitas nao comportam o nome: ele vai para a legenda. */
    .faixa-seg-nome {
        display: none;
    }
    .faixa-legenda {
        display: flex;
    }
    .faixa-tick {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .faixa-barra {
        height: 54px;
    }
    .faixa-grupo {
        font-size: 0.55rem;
    }
    .faixa-tick {
        font-size: 0.55rem;
    }
}

/* Avaliação Cefálica no celular: o gráfico da OMS acompanha a largura da
   tela em vez de rolar para os lados. Preso a .coluna-resultado para não
   mudar a tela de histórico do perímetro, que usa a mesma classe. */
@media (max-width: 560px) {
    .coluna-resultado .grafico-cefalico {
        min-width: 0;
    }
}