/* Painel "bento" e cronômetro do laudo (referência estudada: bento dashboard animation; reinterpretado na Porcelana).
   Cartão de destaque em marinho cheio, barras em pílula com hachura nas semanas vazias, medidor semicircular,
   entrada em cascata de 60 ms por cartão (uma vez) e cronômetro com play/pausa. Só tokens. */
.bento>*{animation:bento-entra 420ms var(--saida) both;animation-delay:calc(var(--i,0)*60ms)}
.bento .c-num>*{animation:bento-entra 420ms var(--saida) both;animation-delay:calc(var(--i,0)*60ms)}
@keyframes bento-entra{from{opacity:0;transform:translateY(10px) scale(.985)}}
.bento .cartao{transition:transform var(--t2) var(--mola),box-shadow var(--t2)}
.bento .cartao:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}

/* destaque: o número que importa, em marinho cheio */
.cartao.destaque{background:linear-gradient(155deg,var(--destaque-1,#13294B),var(--destaque-2,#1D3A66));border-color:transparent;color:#fff;position:relative;overflow:hidden}
.cartao.destaque::after{content:"";position:absolute;right:-60px;bottom:-80px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 60px rgba(255,255,255,.02);pointer-events:none}
.cartao.destaque h2,.cartao.destaque .grande{color:#fff}.cartao.destaque h2 .ico{color:var(--latao)}
.cartao.destaque .sub,.cartao.destaque .grande small{color:rgba(255,255,255,.72)}
.cartao.destaque .link{color:#E6C67F}
@media (prefers-color-scheme:dark){.cartao.destaque{--destaque-1:#1A2E52;--destaque-2:#22406E}}

/* barras em pílula; semanas sem vistoria ficam hachuradas */
.gb i{border-radius:999px;max-width:40px;transform-origin:bottom;animation:barra-sobe 600ms var(--saida) both;animation-delay:calc(160ms + var(--i,0)*45ms)}
.gb i.vazia{background:repeating-linear-gradient(-45deg,var(--graf) 0 3px,transparent 3px 7px);box-shadow:inset 0 0 0 1px var(--graf)}
@keyframes barra-sobe{from{transform:scaleY(0)}}

/* medidor semicircular */
.medidor{display:flex;flex-direction:column}
.medidor svg{width:100%;max-width:150px;margin:8px auto 0;display:block;overflow:visible}
.medidor path{fill:none;stroke-width:11;stroke-linecap:round}
.m-t{stroke:var(--trilho)}.m-p{stroke:var(--latao);animation:medidor 900ms var(--saida) both;animation-delay:240ms}
@keyframes medidor{from{stroke-dashoffset:var(--cheio)}}
.m-v{text-align:center;margin-top:-34px!important}
.medidor .d{text-align:center}

/* cronômetro do laudo */
.cron{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border:1px solid var(--borda-cartao);border-radius:999px;background:var(--fundo)}
.cron-b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:0;background:var(--acento);color:var(--acento-cont);cursor:pointer;transition:transform var(--t2) var(--mola)}
.cron-b:hover{transform:scale(1.06)}.cron-b .ico{width:16px;height:16px}.cron-b .ico path{fill:currentColor}
.cron span{display:block;font:600 15px var(--f-num);letter-spacing:.02em;line-height:1.1}
.cron small{display:block;font-size:11px;color:var(--tx3)}
.cron.rodando{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-fundo)}
.cron.rodando .cron-b{background:var(--ok);color:#fff}
.cron.rodando small{color:var(--ok);font-weight:600}
@media (max-width:760px){.cron{order:4}}
@media (prefers-reduced-motion:reduce){.bento>*,.bento .c-num>*,.gb i,.m-p{animation:none}.bento .cartao:hover{transform:none}}