/* Painel ao vivo [dnp_ao_vivo] — referencia/widgets-rodada2.html, seção 1.
   Escopado a .dnp-vivo. Mesmos tokens de cor de dnp-resultado.css/dnp-horarios.css.

   Regra crítica (documentada no CLAUDE.md): .dnp-vivo-item usa
   grid-template-columns:1fr auto com itens de múltiplas linhas — cada filho
   (título, status, ação) declara grid-column/grid-row explícitos, senão o
   auto-placement do CSS Grid preenche por linha antes de coluna e o botão
   "Ver" quebra para a primeira posição, ocupando a largura toda. */
:root{
  --dnp-verde-esc:#0d3a22;
  --dnp-verde-vivo:#0e7a43;
  --dnp-cinza:#6c8177;
}
.dnp-vivo,
.dnp-vivo *{box-sizing:border-box}
.dnp-vivo{
  max-width:none;margin:10px auto 35px;
  padding:18px;background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%);
  border:1px solid rgba(13,58,34,.09);border-radius:20px;
  box-shadow:0 10px 26px rgba(0,0,0,.055);
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
.dnp-vivo-head{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.dnp-vivo-ico{
  flex:0 0 auto;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:linear-gradient(180deg,#eaf8ee 0%,#dff2e6 100%);
  color:var(--dnp-verde-esc);box-shadow:inset 0 0 0 1px rgba(13,58,34,.08);
}
.dnp-vivo-ico svg{width:20px;height:20px}
.dnp-vivo-head h2{margin:0;font-size:1.2rem;color:var(--dnp-verde-esc);letter-spacing:-.02em}
.dnp-vivo-head p{margin:2px 0 0;font-size:.84rem;color:var(--dnp-cinza);font-weight:600}
.dnp-vivo-refresh{display:flex;justify-content:center;align-items:center;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.dnp-vivo-btn{
  min-height:40px;padding:.66rem 1rem;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,var(--dnp-verde-vivo) 0%,#00381d 100%);color:#fff;
  font:inherit;font-size:.82rem;font-weight:800;box-shadow:0 7px 16px rgba(0,56,29,.16);
}
.dnp-vivo-btn:disabled{opacity:.65;cursor:wait}
.dnp-vivo-btn:focus-visible{outline:2px solid var(--dnp-verde-esc);outline-offset:2px}
.dnp-vivo-status{font-size:.76rem;color:var(--dnp-cinza);font-weight:700;min-height:1em}
.dnp-vivo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dnp-vivo-card{
  padding:14px;background:#fff;border:1px solid rgba(13,58,34,.08);border-radius:16px;
  box-shadow:0 6px 16px rgba(0,41,22,.04);
}
.dnp-vivo-card-titulo{
  margin:0 0 12px;padding:11px 13px;border-radius:13px;
  background:linear-gradient(90deg,#eefbf4 0%,#fff 100%);border-left:5px solid var(--dnp-verde-esc);
}
.dnp-vivo-card-titulo strong{display:block;font-size:1rem;color:var(--dnp-verde-esc);font-weight:900}
.dnp-vivo-card-titulo span{display:block;margin-top:2px;font-size:.78rem;color:var(--dnp-cinza);font-weight:700}
.dnp-vivo-lista{display:flex;flex-direction:column;gap:8px}
.dnp-vivo-item,.dnp-vivo-item:visited{
  display:grid;grid-template-columns:1fr auto;column-gap:.7rem;row-gap:.1rem;align-items:center;
  min-height:56px;padding:.7rem .8rem;background:#fff;border:1px solid rgba(13,58,34,.09);
  border-radius:13px;text-decoration:none;color:inherit;box-shadow:0 5px 13px rgba(0,41,22,.04);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
  scroll-margin-top:80px;
}
.dnp-vivo-item:hover{transform:translateY(-1px);border-color:rgba(14,122,67,.28);box-shadow:0 9px 18px rgba(0,41,22,.07)}
.dnp-vivo-item:focus-visible{outline:2px solid var(--dnp-verde-esc);outline-offset:2px}
.dnp-vivo-item.destaque{background:linear-gradient(180deg,#f2fbf5 0%,#eaf7ee 100%);border-color:rgba(14,122,67,.22)}
.dnp-vivo-titulo-item{grid-column:1;grid-row:1;font-size:.88rem;font-weight:900;color:var(--dnp-verde-esc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dnp-vivo-status-item{grid-column:1;grid-row:2;font-size:.76rem;font-weight:800;color:var(--dnp-verde-vivo)}
.dnp-vivo-status-item[data-mode="andamento"],
.dnp-vivo-status-item[data-mode="countdown"]{color:#a66a00}
.dnp-vivo-hora{color:var(--dnp-cinza);font:inherit;font-variant-numeric:tabular-nums}
.dnp-vivo-acao{
  grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;min-height:32px;padding:0 .65rem;border-radius:999px;
  background:linear-gradient(180deg,var(--dnp-verde-vivo) 0%,#00381d 100%);color:#fff;
  font-size:.74rem;font-weight:900;
}
.dnp-vivo .dnp-aviso{margin:0;padding:14px;text-align:center;font-size:.84rem;color:var(--dnp-cinza)}

@media(max-width:640px){.dnp-vivo-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .dnp-vivo-item{transition:none !important}
}