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

/* Grelha viva da tela de acesso — escala com a largura da tela */
.grelha-viva { --mod: clamp(34px, 3.3vw, 60px); display: grid; grid-template-columns: repeat(8, var(--mod)); gap: clamp(6px, .55vw, 10px); margin-top: clamp(34px, 3vw, 52px); }
.grelha-viva .mod { width: var(--mod); height: var(--mod); border: 1px solid rgba(255,255,255,.22); position: relative; overflow: hidden; transition: border-color .2s; cursor: default; }
.grelha-viva .mod > i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(36,87,230,.55); transition: height .6s ease; }
.grelha-viva .mod.azul { background: var(--azul); border-color: var(--azul); }
.grelha-viva .mod.falha { border-color: var(--erro); }
.grelha-viva .mod.falha > i { background: rgba(224,70,58,.55); }
.grelha-viva .mod:hover { border-color: #fff; }
.grelha-viva .mod::after { content: attr(data-n); position: absolute; top: 3px; left: 5px; font: 500 clamp(8px, .65vw, 12px) var(--fonte-mono); color: rgba(255,255,255,.7); }

/* Textos do painel esquerdo da tela de acesso proporcionais à tela (só no Monitor; grid-ui.css fica intacto) */
@media (min-width: 901px) {
  .acesso-painel { padding: clamp(56px, 4.5vw, 88px) clamp(64px, 5.5vw, 112px); }
  .acesso-painel .marca img { height: clamp(40px, 3vw, 56px) !important; }
  .acesso-painel h1 { font-size: clamp(44px, 3.6vw, 68px); max-width: 15em; text-wrap: balance; margin: clamp(18px, 1.6vw, 30px) 0 clamp(14px, 1.2vw, 22px); }
  .acesso-painel p.descricao { font-size: clamp(16px, 1.3vw, 22px); max-width: 32em; margin-bottom: clamp(28px, 2.4vw, 40px); }
  .beneficios { max-width: 36em; gap: clamp(12px, 1vw, 18px); }
  .beneficios li { font-size: clamp(14px, 1.15vw, 19px); }
  .beneficios li::before { width: .7em; height: .7em; margin-top: .42em; }
  .acesso-assinatura { font-size: clamp(12px, .85vw, 14px); }
}

/* 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; }

/* Cartão de login (lado direito) acompanhando a escala do painel esquerdo */
@media (min-width: 901px) {
  .acesso-cartao { max-width: clamp(400px, 27vw, 520px); padding: clamp(36px, 2.8vw, 52px) clamp(32px, 2.6vw, 48px); }
  .acesso-cartao .produto { font-size: clamp(24px, 1.9vw, 34px); margin: 0 0 clamp(4px, .4vw, 8px); }
  .acesso-cartao .produto-sub { font-size: clamp(13px, 1vw, 16px); margin-bottom: clamp(24px, 1.9vw, 34px); }
  .acesso-cartao .campo { margin-bottom: clamp(14px, 1.1vw, 20px); }
  .acesso-cartao .campo label { font-size: clamp(13px, .95vw, 16px); }
  .acesso-cartao .campo input { font-size: clamp(14px, 1.05vw, 17px); padding: clamp(10px, .8vw, 14px) clamp(12px, .9vw, 16px); }
  .acesso-cartao .botao { font-size: clamp(14px, 1.05vw, 17px); padding: clamp(11px, .85vw, 15px) 18px; }
  .acesso-cartao .aviso { font-size: clamp(13px, .95vw, 15px); }
  .rodape-institucional { font-size: clamp(11px, .8vw, 13px); margin-top: clamp(20px, 1.6vw, 28px); }
}

/* Cartão de login sem logo (a marca fica só no painel esquerdo) */
.acesso-cartao .produto { margin-top: 0; }