/* Átrio · cartão Agentes — ATIV#7290. Mesma linguagem do Átrio (vidro, tiles, variáveis do :root do index.html).
   Tudo com prefixo .ag- para não tocar no que já existe. Dados de /api/agentes (js/agentes.js). */
.ag-folha{padding-bottom:40px}
.ag-folha *{min-width:0}
.ag-h3{font:500 12px var(--corpo);letter-spacing:.18em;text-transform:uppercase;color:var(--am-texto-fraco);margin:22px 0 10px}
.ag-link{background:none;border:0;padding:0;font:inherit;color:var(--am-ciano);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ag-link:hover{color:var(--am-texto)}

/* ficha do agente */
.ag-ficha{display:flex;flex-direction:column;gap:12px}
.ag-proposito{margin:0;font-size:14px;line-height:1.55;color:var(--am-texto);max-width:80ch;overflow-wrap:anywhere}

/* responsabilidades */
.ag-rs{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.ag-r{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.ag-r.ag-falhou{border-color:rgba(255,107,122,.45)}
.ag-r-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ag-r-titulo{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.2;margin:0;overflow-wrap:anywhere}
.ag-r-topo .med{flex:none;white-space:nowrap}
.ag-r-per{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:#DCF5FF;padding:8px 12px;border-radius:12px;background:rgba(111,216,255,.08);border:1px solid rgba(111,216,255,.22)}
.ag-r-rel{color:var(--am-ciano);font-size:16px;line-height:1}
.ag-r-dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:12.5px;line-height:1.4}
.ag-r-dl dt{color:var(--am-texto-fraco);white-space:nowrap}
.ag-r-dl dd{margin:0;color:var(--am-texto);overflow-wrap:anywhere}
.ag-mono{font:11.5px var(--mono);color:var(--am-texto-fraco)!important}
.ag-r-desc{margin:0;font-size:12.5px;line-height:1.5;color:var(--am-texto-fraco);border-top:1px solid var(--vidro-borda);padding-top:10px;overflow-wrap:anywhere}
.ag-ponto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--am-texto-fraco);margin-right:7px;vertical-align:middle}
.ag-ponto.vivo{background:var(--bom);box-shadow:0 0 8px var(--bom)}
.ag-ponto.quente{background:var(--atencao)}
.ag-ponto.critico{background:var(--critico);box-shadow:0 0 8px var(--critico)}

@media (max-width:640px){
  .ag-rs{grid-template-columns:1fr}
  .ag-r-topo{flex-direction:column}
  .ag-r-dl{grid-template-columns:1fr}
  .ag-r-dl dt{margin-top:4px}
}