/* CSS específico do Monitor Via3 — usa só os tokens do via3-ui.css */

/* Cartões de container */
.cont-cartao { cursor: pointer; transition: border-color var(--transicao), transform var(--transicao); display: flex; flex-direction: column; gap: 10px; }
.cont-cartao:hover { border-color: var(--azul); transform: translateY(-1px); }
.cont-cartao .nome { font: 700 16px var(--fonte-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-cartao .imagem { font: 11px var(--fonte-mono); color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-cartao .metrica { display: grid; grid-template-columns: 54px 1fr 64px; align-items: center; gap: 10px; font-size: 12px; }
.cont-cartao .metrica .v { font-family: var(--fonte-mono); text-align: right; }
.cont-cartao .rodape { display: flex; justify-content: space-between; font: 11px var(--fonte-mono); color: var(--tinta-3); border-top: 1px solid var(--borda); padding-top: 8px; margin-top: 2px; }
.cont-cartao.parado { opacity: .75; border-style: dashed; }

/* Host */
.host-grafico { height: 200px; position: relative; }
.grafico { position: relative; height: 230px; }
.periodos { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); overflow: hidden; }
.periodos button { background: none; border: 0; border-right: 1px solid var(--borda-forte); color: var(--tinta-2); padding: 5px 10px; font: 500 12px var(--fonte-mono); cursor: pointer; }
.periodos button:last-child { border-right: 0; }
.periodos button.ativo { background: var(--azul); color: #fff; }

/* Alertas */
.alerta-item { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--borda); align-items: flex-start; }
.alerta-item .barra { width: 4px; border-radius: 2px; align-self: stretch; background: var(--erro); flex: none; }
.alerta-item .barra.media { background: var(--aviso); }
.alerta-item .barra.fechado { background: var(--ok); }
.alerta-item .titulo { font-weight: 600; }
.alerta-item .detalhe { font-size: 13px; color: var(--tinta-2); }
.alerta-item .meta { font: 11px var(--fonte-mono); color: var(--tinta-3); margin-top: 4px; }

/* Faixa de disponibilidade (HTTP) */
.faixa { display: flex; gap: 2px; height: 22px; align-items: flex-end; overflow: hidden; }
.faixa i { flex: 1 1 0; min-width: 0; background: var(--ok); border-radius: 1px; opacity: .85; }
.faixa i.falha { background: var(--erro); }
.faixa i.vazio { background: var(--superficie-3); }

/* Volumes */
.volumes li { display: flex; justify-content: space-between; gap: 10px; font: 12px var(--fonte-mono); padding: 5px 0; border-bottom: 1px dashed var(--borda); }
.volumes { list-style: none; padding: 0; margin: 0; }

.lista-filtros { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.lista-filtros input { padding: 8px 12px; border-radius: var(--raio-p); border: 1px solid var(--borda-forte); background: var(--campo-fundo); color: var(--tinta); font: 13px var(--fonte-texto); min-width: 220px; }
.tour-popup { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--superficie); border: 1px solid var(--azul); border-radius: var(--raio); padding: 16px 20px; box-shadow: var(--sombra); z-index: 80; max-width: 440px; }

/* legenda dos status (aba Containers) */
.legenda summary { cursor: pointer; list-style: none; }
.legenda summary::-webkit-details-marker { display: none; }
.legenda summary::before { content: "▸"; display: inline-block; width: 14px; color: var(--tinta-2); transition: transform .15s; }
.legenda[open] summary::before { transform: rotate(90deg); }
.legenda-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 18px; margin-top: 14px; }
.legenda-item { display: flex; gap: 10px; align-items: flex-start; }
.legenda-item .ponto { margin-top: 6px; flex: none; }

/* contador do menu Containers (o vermelho padrão fica para Alertas) */
.menu nav a .cont.neutro { background: var(--superficie-2, rgba(255,255,255,.12)); color: var(--tinta-2); }
.menu nav a .cont.aviso { background: var(--aviso); color: #1a1200; }