/* =====================================================================
   Protótipo do Portal · Painel
   ===================================================================== */

.o-painel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.o-saudacao, .o-eventos { grid-column: 1 / -1; }
.o-saudacao h3 { font-size: 1.2rem; font-weight: 800; }
.o-saudacao p { font-size: .76rem; color: var(--p-cinza); text-transform: capitalize; }

/* Movimento: 4 séries */
.o-legenda-serie { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-bottom: .5rem; }
.o-legenda-serie button {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .5rem; border: 1px solid transparent; border-radius: 6px; background: none;
    font-family: inherit; font-size: .72rem; color: var(--p-cinza); cursor: pointer;
}
.o-legenda-serie button:hover { border-color: var(--p-borda-forte); }
.o-legenda-serie button[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }
.o-legenda-serie i { width: 12px; height: 3px; border-radius: 2px; background: var(--cor); }
.o-legenda-serie strong { color: var(--p-preto); font-variant-numeric: tabular-nums; }
.o-grafico { min-height: 210px; }
.o-grafico svg { display: block; overflow: visible; }
.o-g-linha { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.desenhado .o-g-linha { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1); }
.o-g-valor { font-size: 9.5px; font-weight: 700; font-family: inherit; opacity: 0; }
.o-g-valor.miudo { font-size: 7px; }
.desenhado .o-g-valor { opacity: 1; transition: opacity .3s 1s; }

/* Situação hoje: rosca + lista + barra */
.o-situacao-corpo { display: grid; grid-template-columns: 140px 1fr; gap: .9rem; align-items: center; }
.o-rosca-caixa { position: relative; width: 140px; aspect-ratio: 1; }
.o-rosca { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.o-rosca-trilho { fill: none; stroke: var(--p-fundo); stroke-width: 20; }
.o-fatia { fill: none; stroke-width: 20; cursor: pointer; transition: stroke-dasharray 1s cubic-bezier(.65, 0, .35, 1), stroke-width .2s, opacity .2s; }
.o-fatia.entrada { stroke: var(--o-entrada); }
.o-fatia.rota { stroke: var(--o-rota); }
.o-fatia.transito { stroke: var(--o-transito); }
.o-fatia.concluido { stroke: var(--o-concluido); }
.o-situacao[data-foco]:not([data-foco=""]) .o-fatia { opacity: .3; }
.o-situacao[data-foco="entrada"] .o-fatia.entrada,
.o-situacao[data-foco="rota"] .o-fatia.rota,
.o-situacao[data-foco="transito"] .o-fatia.transito,
.o-situacao[data-foco="concluido"] .o-fatia.concluido { opacity: 1; stroke-width: 24; }
.o-rosca-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.o-rosca-centro strong { font-size: 1.8rem; font-weight: 800; color: var(--p-preto); line-height: 1; font-variant-numeric: tabular-nums; }
.o-rosca-centro span { font-size: .68rem; color: var(--p-cinza); margin-top: .15rem; }
.o-legendas { display: grid; gap: .1rem; }
.o-legenda {
    width: 100%; display: grid; grid-template-columns: 10px 1fr auto 2.4rem; align-items: center; gap: .5rem;
    padding: .35rem .45rem; border: 0; border-radius: 6px; background: none; cursor: pointer;
    font-family: inherit; font-size: .78rem; color: var(--p-texto); text-align: left;
}
.o-legenda:hover, .o-legenda:focus-visible { background: var(--p-fundo); }
.o-legenda-cor { width: 10px; height: 10px; border-radius: 3px; background: var(--cor); }
.o-legenda-nome { display: grid; }
.o-legenda-nome small { font-size: .64rem; color: var(--p-cinza); }
.o-legenda strong { font-weight: 700; color: var(--p-preto); font-variant-numeric: tabular-nums; }
.o-legenda-pct { font-size: .68rem; color: var(--p-cinza); text-align: right; font-variant-numeric: tabular-nums; }
.o-legenda.entrada { --cor: var(--o-entrada); }
.o-legenda.rota { --cor: var(--o-rota); }
.o-legenda.transito { --cor: var(--o-transito); }
.o-legenda.concluido { --cor: var(--o-concluido); }
.o-barra-prop { display: flex; height: 8px; margin-top: .8rem; border-radius: 4px; overflow: hidden; background: var(--p-fundo); }
.o-barra-prop span { height: 100%; background: var(--o-entrada); transition: width .8s cubic-bezier(.22, 1, .36, 1); }
.o-barra-prop .rota { background: var(--o-rota); }
.o-barra-prop .transito { background: var(--o-transito); }
.o-barra-prop .concluido { background: var(--o-concluido); }
.proto .o-situacao-rodape { margin-top: .7rem; font-size: .72rem; color: var(--p-cinza); }
.o-situacao-rodape strong { color: var(--p-preto); }

/* Últimos eventos */
.o-eventos .p-cartao-cabeca .p-link { font-size: .74rem; }
.o-eventos-lista { display: grid; }
.o-evento {
    width: 100%; display: flex; align-items: center; gap: .7rem;
    padding: .55rem .95rem; border: 0; border-bottom: 1px solid var(--p-borda); background: none; cursor: pointer;
    font-family: inherit; text-align: left; color: var(--p-texto); transition: background-color .15s;
}
.o-eventos-lista li:last-child .o-evento { border-bottom: 0; }
.o-evento:hover { background: var(--p-sup-2); }
.o-evento > .p-icone { color: var(--p-cinza-claro); }
.o-evento time { font-size: .68rem; color: var(--p-cinza); white-space: nowrap; }
.o-evento-texto { flex: 1; min-width: 0; display: grid; }
.o-evento-texto strong { font-size: .8rem; color: var(--p-preto); }
.o-evento-texto span { font-size: .72rem; color: var(--p-cinza); }
.o-evento-icone {
    display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
    background: var(--o-entrada-claro); color: var(--o-entrada);
}
.o-evento-icone .p-icone { width: 15px; height: 15px; }
.o-evento-icone.saida { background: var(--o-rota-claro); color: var(--o-rota); }
.o-evento-icone.conclusao { background: var(--o-concluido-claro); color: var(--o-concluido); }
.o-evento-icone.avaria { background: var(--p-vermelho-claro); color: var(--p-vermelho); }
.o-evento-icone.anexo, .o-evento-icone.outros { background: var(--p-fundo); color: var(--p-cinza); }

@container (max-width: 760px) {
    .o-painel { grid-template-columns: 1fr; }
}
@container (max-width: 440px) {
    .o-situacao-corpo { grid-template-columns: 1fr; justify-items: center; }
    .o-legendas { width: 100%; }
}