/* ============================================================
   TELA: INÍCIO
   ============================================================ */
.capa{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,4vw,44px); align-items:center; margin-bottom:38px}
.capa h1 em{font-style:normal; color:var(--coral); position:relative; white-space:nowrap}
.capa h1 em::after{content:''; position:absolute; left:0; right:0; bottom:2px; height:10px; border-radius:99px;
  background:var(--sol); opacity:.45; z-index:-1}
.capa .sub{font-size:1.1rem; color:var(--tinta-2); max-width:46ch; margin-top:14px}
.capa-acoes{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.capa-palco{position:relative; display:grid; place-items:center; min-height:300px}
.capa-palco .orbe{position:absolute; width:270px; height:270px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,0)); border:3px dashed rgba(74,92,240,.2)}
.capa-palco .heroi{position:relative; z-index:2; width:210px}
.capa-palco .satelite{position:absolute; font-size:2rem; animation:orbita 14s linear infinite;
  transform-origin:center; filter:drop-shadow(0 4px 6px rgba(0,0,0,.16))}
@keyframes orbita{from{transform:rotate(0) translateX(150px) rotate(0)}to{transform:rotate(360deg) translateX(150px) rotate(-360deg)}}

.atalhos{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.atalho{
  display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:var(--r-lg); text-align:left;
  background:var(--papel); box-shadow:var(--sm-1); border:1px solid var(--borda); transition:var(--t-mole);
  border-bottom:5px solid var(--cor,var(--anil));
}
.atalho:hover{transform:translateY(-6px); box-shadow:var(--sm-2)}
.atalho .ic{font-size:2.1rem}
.atalho b{font-family:var(--f-tit); font-size:1.14rem}
.atalho small{color:var(--tinta-3); line-height:1.45; font-weight:600}

.faixa-conf{display:flex; gap:22px; flex-wrap:wrap; justify-content:center; margin:34px 0 10px;
  padding:20px; border-radius:var(--r-lg); background:rgba(255,255,255,.6); border:1px solid var(--borda)}
.faixa-conf div{text-align:center; min-width:130px}
.faixa-conf b{display:block; font-family:var(--f-tit); font-size:1.5rem; color:var(--anil)}
.faixa-conf small{color:var(--tinta-3); font-weight:700; font-size:.78rem}

/* ============================================================
   TELA: MISSÃO (onboarding)
   ============================================================ */
.etapa-cab{display:flex; align-items:flex-start; gap:16px; margin-bottom:20px}
.etapa-cab .num{flex:0 0 auto; width:52px; height:52px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--anil); color:#fff; font-family:var(--f-tit); font-size:1.4rem; box-shadow:var(--sm-1)}
.etapa-cab h2{margin-bottom:4px}
.etapa-cab p{margin:0; color:var(--tinta-2)}

.rodape-etapa{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px;
  padding-top:20px; border-top:2px dashed var(--borda); flex-wrap:wrap}

/* --- criador de avatar --- */
.oficina{display:grid; grid-template-columns:minmax(0,240px) 1fr; gap:26px; align-items:start}
.oficina-palco{position:sticky; top:90px; display:grid; justify-items:center; gap:12px; padding:20px;
  border-radius:var(--r-lg); background:linear-gradient(160deg,#f2f6ff,#fdf3ff); border:2px solid var(--borda)}
.oficina-palco svg{width:180px; height:180px}
.oficina-grupo{margin-bottom:20px}
.oficina-grupo > h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--tinta-3); margin-bottom:9px}
.tintas{display:flex; gap:10px; flex-wrap:wrap}
.tinta{width:42px; height:42px; border-radius:50%; border:4px solid #fff; box-shadow:var(--sm-1); transition:var(--t-rapido)}
.tinta:hover{transform:scale(1.14)}
.tinta[aria-pressed="true"]{box-shadow:0 0 0 3px var(--tinta),var(--sm-1); transform:scale(1.14)}
.formas{display:grid; grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); gap:10px}
.formas .escolha{padding:10px 6px}
.formas .escolha svg{width:52px; height:52px}

/* --- radar do corpo --- */
.radar{display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:26px; align-items:start}
.radar-corpo{position:relative; background:linear-gradient(170deg,#eef3ff,#f7f0ff); border-radius:var(--r-lg);
  padding:16px; border:2px solid var(--borda)}
.radar-corpo svg{width:100%; height:auto}
.zona{cursor:pointer; transition:var(--t-rapido)}
.zona circle{fill:rgba(74,92,240,.1); stroke:var(--anil); stroke-width:2.5; stroke-dasharray:5 5}
.zona:hover circle{fill:rgba(74,92,240,.22)}
.zona.on circle{fill:rgba(255,107,90,.3); stroke:var(--coral); stroke-dasharray:none; stroke-width:4}
.zona text{font-family:var(--f-tit); font-size:12px; fill:var(--tinta); pointer-events:none; font-weight:700}
.zona .alvo{fill:transparent}
.zona:hover .alvo{fill:rgba(74,92,240,.06)}
.zona .pino{opacity:0; pointer-events:none; transition:var(--t-rapido)}
.zona.on .pino{opacity:1}
.radar-lista{display:grid; gap:12px}
.radar-item{padding:14px 16px; border-radius:var(--r-md); background:var(--papel-2); border:2px solid var(--borda)}
.radar-item.on{border-color:var(--coral); background:#fff6f4}
.radar-item .topo-item{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.radar-item .topo-item b{font-family:var(--f-tit); font-size:1rem; flex:1}
.radar-item .topo-item .ic{font-size:1.4rem}

/* --- zoo dos monstrinhos --- */
.zoo{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:14px}
.bicho{position:relative; padding:14px 8px 12px; border-radius:var(--r-md); background:var(--papel);
  border:3px solid var(--borda); box-shadow:var(--sm-1); transition:var(--t-rapido);
  display:grid; justify-items:center; gap:6px; text-align:center}
.bicho svg{width:74px; height:74px; transition:var(--t-rapido)}
.bicho:hover{transform:translateY(-5px) rotate(1.5deg); border-color:var(--lilas)}
.bicho:hover svg{transform:scale(1.09) rotate(-5deg)}
.bicho b{font-family:var(--f-tit); font-size:.9rem; line-height:1.15}
.bicho small{font-size:.68rem; color:var(--tinta-3); line-height:1.25; font-weight:700}
.bicho[aria-pressed="true"]{border-color:var(--coral); background:#fff5f3; transform:translateY(-4px)}
.bicho[aria-pressed="true"]::after{content:'\2713'; position:absolute; top:-10px; right:-10px; width:26px; height:26px;
  border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; font-weight:900;
  box-shadow:var(--sm-1); animation:pipoca .3s}
.zoo-abas{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}

/* --- mapa estelar --- */
.mapa{border-radius:var(--r-lg); padding:22px; position:relative; overflow:hidden;
  background:radial-gradient(120% 100% at 70% 0%,#2b3970 0%,var(--noite) 60%)}
.mapa::before{content:''; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent),radial-gradient(1.4px 1.4px at 68% 12%,#fff,transparent),
  radial-gradient(1.8px 1.8px at 84% 62%,#fff,transparent),radial-gradient(1.3px 1.3px at 34% 78%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 52% 44%,#fff,transparent),radial-gradient(1.2px 1.2px at 92% 32%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 22% 54%,#fff,transparent)}
.mapa h3{color:#fff; position:relative}
.mapa .legenda{color:#b8c2ee; font-size:.86rem; font-weight:700; margin-bottom:14px; position:relative}
.planetas{display:flex; gap:12px; overflow-x:auto; padding:6px 2px 14px; position:relative; scrollbar-width:thin}
.planeta{flex:0 0 auto; width:92px; padding:12px 8px; border-radius:var(--r-md); background:rgba(255,255,255,.09);
  border:2.5px solid rgba(255,255,255,.16); color:#fff; text-align:center; transition:var(--t-rapido); backdrop-filter:blur(4px)}
.planeta:hover{transform:translateY(-4px); background:rgba(255,255,255,.16)}
.planeta .bola{width:46px; height:46px; border-radius:50%; margin:0 auto 8px;
  background:radial-gradient(circle at 32% 30%,#fff8,transparent 60%),var(--pc,var(--lilas));
  box-shadow:0 0 18px -2px var(--pc,var(--lilas))}
.planeta .dia-sem{font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; opacity:.7; font-weight:800}
.planeta .dia-num{font-family:var(--f-tit); font-size:1.35rem; line-height:1.1}
.planeta .mes{font-size:.68rem; opacity:.7; font-weight:700}
.planeta[aria-pressed="true"]{background:rgba(255,255,255,.22); border-color:var(--sol); transform:translateY(-5px)}
.planeta[disabled]{opacity:.24; pointer-events:none}

.estrelas{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:11px; margin-top:16px; position:relative}
.estrela{padding:13px 8px; border-radius:var(--r-md); background:rgba(255,255,255,.08); border:2.5px solid rgba(255,255,255,.16);
  color:#fff; font-family:var(--f-tit); font-size:1.05rem; transition:var(--t-rapido); display:grid; gap:3px; justify-items:center}
.estrela .brilho{font-size:1.1rem; opacity:.85}
.estrela small{font-size:.66rem; font-weight:700; opacity:.65; font-family:var(--f-txt)}
.estrela:hover{background:rgba(255,255,255,.18); transform:scale(1.05)}
.estrela[aria-pressed="true"]{background:var(--sol); color:#4a3200; border-color:#fff; box-shadow:0 0 26px -4px var(--sol)}
.estrela[disabled]{opacity:.2; pointer-events:none; text-decoration:line-through}
.vazio-mapa{color:#b8c2ee; font-weight:700; padding:20px; text-align:center; position:relative}

/* --- passaporte --- */
.passaporte{max-width:520px; margin:0 auto; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sm-3);
  border:3px solid var(--noite); background:var(--papel)}
.pass-topo{background:linear-gradient(120deg,var(--anil),var(--uva)); color:#fff; padding:20px 24px;
  display:flex; align-items:center; gap:14px}
.pass-topo svg{width:64px; height:64px; flex:0 0 auto; background:rgba(255,255,255,.16); border-radius:var(--r-md); padding:4px}
.pass-topo .t{flex:1}
.pass-topo small{opacity:.8; font-weight:800; letter-spacing:.1em; font-size:.66rem; text-transform:uppercase}
.pass-topo b{display:block; font-family:var(--f-tit); font-size:1.45rem; line-height:1.15}
.pass-corpo{padding:22px 24px}
.pass-linha{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1.5px dashed var(--borda); font-weight:700}
.pass-linha:last-child{border:0}
.pass-linha span:first-child{color:var(--tinta-3); font-size:.84rem; text-transform:uppercase; letter-spacing:.05em; font-weight:800}
.pass-linha span:last-child{text-align:right; font-family:var(--f-tit); font-size:1.05rem}
.pass-carimbo{margin:16px auto 0; width:150px; height:150px; display:grid; place-items:center; text-align:center;
  border:5px double var(--coral); border-radius:50%; color:var(--coral); transform:rotate(-13deg);
  font-family:var(--f-tit); font-weight:800; line-height:1.05; opacity:.9}
.pass-carimbo span{font-size:.62rem; letter-spacing:.12em; display:block; opacity:.8}
.pass-cod{font-family:ui-monospace,monospace; letter-spacing:.16em; background:var(--noite); color:var(--sol);
  padding:9px 14px; border-radius:var(--r-sm); text-align:center; font-weight:700; margin-top:14px}

/* ============================================================
   TELA: SALA MÁGICA (jogos)
   ============================================================ */
.jogo-cartao{position:relative; padding:0; overflow:hidden; border-radius:var(--r-lg); background:var(--papel);
  box-shadow:var(--sm-1); border:1px solid var(--borda); text-align:left; transition:var(--t-mole); display:flex; flex-direction:column}
.jogo-cartao:hover{transform:translateY(-6px); box-shadow:var(--sm-2)}
.jogo-capa{height:112px; display:grid; place-items:center; font-size:3rem; background:var(--g,linear-gradient(135deg,#c7d2ff,#e9d5ff))}
.jogo-corpo{padding:16px 18px 20px}
.jogo-corpo b{font-family:var(--f-tit); font-size:1.16rem; display:block; margin-bottom:5px}
.jogo-corpo small{color:var(--tinta-3); font-weight:600; line-height:1.5; display:block}
.jogo-tag{display:inline-block; margin-top:10px; font-size:.68rem; font-weight:900; letter-spacing:.06em;
  text-transform:uppercase; color:var(--menta-esc); background:#e8fff8; padding:4px 10px; border-radius:var(--r-pill)}

.arena{border-radius:var(--r-lg); padding:clamp(16px,3vw,26px); background:var(--papel); border:1px solid var(--borda);
  box-shadow:var(--sm-2); position:relative; overflow:hidden}
.arena-topo{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.placar{display:flex; gap:10px; flex-wrap:wrap}
.placar div{background:var(--papel-2); border:2px solid var(--borda); border-radius:var(--r-md); padding:8px 16px; text-align:center; min-width:80px}
.placar b{display:block; font-family:var(--f-tit); font-size:1.4rem; line-height:1}
.placar small{font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-3); font-weight:800}

/* sopro do dragão */
.sopro{display:grid; place-items:center; gap:16px; padding:14px 0 6px; min-height:330px}
.sopro-anel{position:relative; width:230px; height:230px; display:grid; place-items:center}
.sopro-anel .aro{position:absolute; inset:0; border-radius:50%; border:4px solid var(--borda)}
.sopro-bola{width:96px; height:96px; border-radius:50%; display:grid; place-items:center; font-size:2.6rem;
  background:radial-gradient(circle at 34% 30%,#fff,var(--menta)); box-shadow:0 0 40px -6px var(--menta);
  transition:transform 1s linear, background 1s linear, box-shadow 1s linear}
.sopro-txt{font-family:var(--f-tit); font-size:1.55rem; text-align:center; min-height:2.4em}
.sopro-txt small{display:block; font-family:var(--f-txt); font-size:.88rem; color:var(--tinta-3); font-weight:700}
.velas{display:flex; gap:9px}
.vela{width:22px; height:52px; border-radius:8px 8px 4px 4px; background:linear-gradient(#fff,#ffe9c9); position:relative;
  border:2px solid #e8d5b5; transition:var(--t-mole)}
.vela::after{content:''; position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:12px; height:17px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:radial-gradient(circle at 50% 70%,#fff3b0,var(--sol),var(--coral));
  animation:chama .35s ease-in-out infinite alternate}
.vela.apagada{opacity:.4; filter:grayscale(1)}
.vela.apagada::after{display:none}
@keyframes chama{to{transform:translateX(-50%) scale(1.18) rotate(4deg)}}

/* caça-espirro */
.buracos{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:440px; margin:0 auto}
.buraco{aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 82%,#d8def0,#eef1fa);
  border:3px solid var(--borda); position:relative; overflow:hidden; display:grid; place-items:end center}
.buraco .bicho-pop{width:78%; transform:translateY(110%); transition:transform .22s cubic-bezier(.34,1.56,.64,1); cursor:pointer}
.buraco.ativo .bicho-pop{transform:translateY(12%)}
.buraco.atingido .bicho-pop{transform:translateY(110%) scale(.6) rotate(35deg)}

/* detetive do prato */
.prato{width:min(100%,420px); aspect-ratio:1; margin:0 auto; border-radius:50%; position:relative;
  background:radial-gradient(circle at 50% 50%,#fff 62%,#eef1fa 63%,#e2e7f5 100%); border:10px solid #fff; box-shadow:var(--sm-2)}
.comida{position:absolute; width:22%; transform:translate(-50%,-50%); transition:var(--t-rapido); text-align:center;
  display:grid; justify-items:center; gap:2px; z-index:2}
.comida .em{position:relative; font-size:clamp(1.7rem,6vw,2.5rem); filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.comida small{font-size:.62rem; font-weight:800; color:var(--tinta-2); background:#fff9; border-radius:99px; padding:1px 6px}
/* só amplia onde existe mouse: no toque o :hover fica grudado e a comida cobre a vizinha */
@media (hover:hover){.comida:hover{transform:translate(-50%,-50%) scale(1.14); z-index:5}}
.comida.certa{filter:drop-shadow(0 0 12px var(--menta))}
.comida.certa .em::after{content:'\2713'; position:absolute; right:-4px; bottom:-2px; font-size:.85rem;
  color:var(--menta-esc); text-shadow:0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff}
.comida.errada{animation:treme-prato .4s; opacity:.5}
.comida.pega{opacity:.35; pointer-events:none; z-index:1}
.comida.acende{z-index:6; animation:acende-comida .8s ease-in-out infinite}
@keyframes treme-prato{25%{transform:translate(calc(-50% - 7px),-50%)}75%{transform:translate(calc(-50% + 7px),-50%)}}
@keyframes acende-comida{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}

/* ============================================================
   TELA: DIÁRIO
   ============================================================ */
.calendario{display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:14px}
.cal-cab{text-align:center; font-size:.68rem; font-weight:900; color:var(--tinta-3); text-transform:uppercase; padding-bottom:4px}
.cal-dia{aspect-ratio:1; border-radius:var(--r-sm); background:var(--papel-2); border:2px solid var(--borda);
  display:grid; place-items:center; position:relative; transition:var(--t-rapido); font-weight:800; font-size:.82rem}
.cal-dia:hover{transform:scale(1.07); border-color:var(--anil)}
.cal-dia.fora{opacity:.25; pointer-events:none}
.cal-dia.hoje{border-color:var(--anil); border-width:3px}
.cal-dia .adesivo{position:absolute; font-size:1.35rem; line-height:1}
.cal-dia.tem .num{position:absolute; top:2px; right:5px; font-size:.6rem; opacity:.6}
.grafico{display:flex; align-items:flex-end; gap:5px; height:130px; padding:14px; background:var(--papel-2);
  border-radius:var(--r-md); border:2px solid var(--borda); overflow-x:auto}
.grafico .barra{flex:1; min-width:12px; border-radius:6px 6px 3px 3px; background:linear-gradient(var(--anil),var(--lilas));
  position:relative; transition:height var(--t-mole)}
.grafico .barra small{position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); font-size:.56rem; color:var(--tinta-3); font-weight:800}

.medalheiro{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px}
.medalha{padding:16px 8px; border-radius:var(--r-md); text-align:center; background:var(--papel-2); border:2px solid var(--borda)}
.medalha .ic{font-size:2.2rem; display:block; filter:grayscale(1); opacity:.3}
.medalha.ganha{background:linear-gradient(160deg,#fffbe8,#fff3cf); border-color:var(--sol)}
.medalha.ganha .ic{filter:none; opacity:1; animation:pula 2.4s ease-in-out infinite}
.medalha b{display:block; font-family:var(--f-tit); font-size:.82rem; margin-top:6px; line-height:1.2}
.medalha small{font-size:.64rem; color:var(--tinta-3); font-weight:700}

/* ============================================================
   TELA: CONSULTÓRIO (Dra.)
   ============================================================ */
.dra-topo{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px;
  padding:18px 22px; border-radius:var(--r-lg); background:var(--noite); color:#fff; box-shadow:var(--sm-2)}
.dra-topo h2{color:#fff}
.dra-topo small{color:#a9b4e0; font-weight:700}
/* aceite do responsável — LGPD. Precisa ser visível e clicável de
   verdade, não uma linha cinza de seis pixels no rodapé. */
.aceite{display:flex; gap:12px; align-items:flex-start; margin-top:20px; padding:16px;
  border:2px solid var(--borda); border-radius:var(--r-md); background:var(--papel-2);
  cursor:pointer; font-size:.88rem; line-height:1.5; transition:var(--t-rapido)}
.aceite:hover{border-color:var(--anil)}
.aceite:has(input:checked){border-color:var(--menta); background:color-mix(in srgb, var(--menta) 12%, var(--papel-2))}
.aceite input{width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--anil); cursor:pointer}

.ficha{border-radius:var(--r-lg); background:var(--papel); border:1px solid var(--borda); box-shadow:var(--sm-1);
  padding:0; overflow:hidden; margin-bottom:14px}
.ficha-cab{display:flex; align-items:center; gap:14px; padding:16px 18px; width:100%;
  text-align:left; background:var(--papel-2); border-bottom:1px solid var(--borda)}
.ficha-cab svg{width:52px; height:52px; flex:0 0 auto}
.ficha-cab .info{flex:1; min-width:0}
.ficha-cab .info b{font-family:var(--f-tit); font-size:1.1rem; display:block}
.ficha-cab .info small{color:var(--tinta-3); font-weight:700; font-size:.8rem}
.ficha-cab .quando{text-align:right; font-weight:800; font-size:.86rem; line-height:1.35}
.ficha-cab .quando b{display:block; font-family:var(--f-tit); font-size:1.05rem; color:var(--anil)}
.ficha-corpo{padding:0 18px 20px; border-top:2px dashed var(--borda); padding-top:16px}
.ficha[data-aberta="false"] .ficha-corpo{display:none}

.tag-risco{display:inline-block; padding:4px 12px; border-radius:var(--r-pill); font-size:.68rem; font-weight:900;
  text-transform:uppercase; letter-spacing:.06em}
.risco-leve{background:#e8fff8; color:var(--menta-esc)}
.risco-moderado{background:#fff6e0; color:var(--sol-esc)}
.risco-alto{background:#ffeeeb; color:var(--coral-esc)}

.laudo{background:var(--papel-2); border:2px solid var(--borda); border-radius:var(--r-md); padding:16px 18px;
  font-size:.88rem; line-height:1.7; white-space:pre-wrap; font-family:ui-monospace,'Cascadia Code',monospace; max-height:340px; overflow:auto}
.dra-secao{font-size:.72rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-3);
  margin:18px 0 8px; display:flex; align-items:center; gap:8px}
.dra-secao::after{content:''; flex:1; height:2px; background:var(--borda); border-radius:2px}
.lista-clin{display:grid; gap:7px; margin:0; padding:0; list-style:none}
.lista-clin li{display:flex; gap:10px; align-items:flex-start; padding:9px 13px; background:var(--papel-2);
  border-radius:var(--r-sm); border-left:4px solid var(--cor,var(--anil)); font-size:.9rem; font-weight:600}
.lista-clin li b{font-weight:800}

.vazio{text-align:center; padding:46px 20px; color:var(--tinta-3)}
.vazio .ic{font-size:3.4rem; display:block; margin-bottom:12px; opacity:.6}

/* responsivo */
@media (max-width:860px){
  .capa{grid-template-columns:1fr; text-align:center}
  .capa .sub{margin-inline:auto}
  .capa-acoes{justify-content:center}
  .oficina,.radar{grid-template-columns:1fr}
  .oficina-palco{position:static}
}