/* Central de Chamados World Wi-Fi — identidade visual (cores amostradas do logotipo oficial, ver CLAUDE.md) */
:root {
  --ww-azul-claro: #3D82C1;
  --ww-azul: #2D69A8;
  --ww-azul-escuro: #1C508E;
  --ww-branco: #FFFFFF;
  --ww-degrade: linear-gradient(45deg, var(--ww-azul-claro) 0%, var(--ww-azul-escuro) 100%);
  /* Topo das telas internas: mesmo degradê, começando no azul médio, para o texto branco ter contraste suficiente
     (no azul claro ficava 4,07:1; no médio fica acima de 5,5:1). O degradê completo continua na tela de login. */
  --ww-degrade-topo: linear-gradient(45deg, var(--ww-azul) 0%, var(--ww-azul-escuro) 100%);
  --foco: 0 0 0 3px var(--ww-branco), 0 0 0 5px var(--ww-azul-escuro);

  --fundo: #F3F6FA;
  --superficie: #FFFFFF;
  --texto: #1B2733;
  --texto-suave: #5A6B7D;
  --borda: #D6DFE9;
  --sucesso: #1E7B4C;
  --sucesso-fundo: #E3F4EA;
  --erro: #B42318;
  --erro-fundo: #FDECEA;
  --alerta: #8A5A00;
  --alerta-fundo: #FFF4D6;
  --raio: 10px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--ww-azul); }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; color: var(--ww-azul-escuro); }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; color: var(--ww-azul-escuro); }

/* Topo */
.topo {
  background: var(--ww-degrade-topo);
  color: var(--ww-branco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: .6rem 1.5rem;
}
.topo-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; border-radius: 8px; }
.marca img { border-radius: 8px; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.25; }
.marca-texto strong { font-size: 1.05rem; }
.marca-empresa { font-weight: 400; }
.marca-texto small { color: #DCE7F3; font-size: .8rem; }

/* Menu principal: itens diretos + grupos (Cadastros, Administração, conta do usuário) */
.menu { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.menu a, .menu .link, .menu-grupo > summary {
  color: var(--ww-branco);
  text-decoration: none;
  padding: .5rem .8rem;
  border-radius: 6px;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-block;
}
.menu a:hover, .menu .link:hover, .menu-grupo > summary:hover { background: rgba(255, 255, 255, .15); }
.menu > a[aria-current="page"], .menu-grupo.atual > summary { font-weight: 600; box-shadow: inset 0 -3px 0 var(--ww-branco); border-radius: 6px 6px 0 0; }
.menu form { margin: 0; }
.menu-grupo { position: relative; }
.menu-grupo > summary { list-style: none; }
.menu-grupo > summary::-webkit-details-marker { display: none; }
.menu-grupo > summary::after { content: ""; display: inline-block; margin-left: .45rem; vertical-align: .2em; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.menu-grupo[open] > summary { background: rgba(255, 255, 255, .15); }
.submenu {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; min-width: 200px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 10px 30px rgba(16, 45, 85, .18); padding: .35rem; display: flex; flex-direction: column;
}
.menu .submenu a, .menu .submenu .link { color: var(--texto); width: 100%; text-align: left; border-radius: 6px; }
.menu .submenu a:hover, .menu .submenu .link:hover { background: var(--fundo); }
.menu-conta { margin-left: .5rem; }
.menu-conta > summary { border: 1px solid rgba(255, 255, 255, .45); }
.menu-botao {
  display: none; align-items: center; gap: .5rem; background: none; color: var(--ww-branco);
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 8px; padding: .45rem .8rem; font: inherit; cursor: pointer;
}
.menu-icone, .menu-icone::before, .menu-icone::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.menu-icone::before, .menu-icone::after { content: ""; position: absolute; left: 0; }
.menu-icone::before { top: -6px; }
.menu-icone::after { top: 6px; }

/* Celular e tablet: menu recolhido atrás do botão "Menu" (só quando o script carregou; sem ele, fica sempre visível) */
@media (max-width: 900px) {
  .topo { flex-direction: column; align-items: stretch; padding: .5rem 1rem; }
  .js .menu-botao { display: inline-flex; }
  .js .menu { display: none; }
  .js .menu.aberto { display: flex; }
  .menu { flex-direction: column; align-items: stretch; padding: .25rem 0 .5rem; border-top: 1px solid rgba(255, 255, 255, .25); }
  .menu a, .menu .link, .menu-grupo > summary { display: block; width: 100%; text-align: left; padding: .7rem .8rem; }
  .menu > a[aria-current="page"], .menu-grupo.atual > summary { box-shadow: inset 4px 0 0 var(--ww-branco); border-radius: 0 6px 6px 0; }
  .submenu { position: static; background: none; border: 0; box-shadow: none; padding: 0 0 0 1rem; min-width: 0; }
  .menu .submenu a, .menu .submenu .link { color: var(--ww-branco); }
  .menu .submenu a:hover, .menu .submenu .link:hover { background: rgba(255, 255, 255, .15); }
  .menu-conta { margin-left: 0; }
  .menu-conta > summary { border: 0; }
}
@media (max-width: 700px) {
  .so-largo { display: none; }
  .marca img { width: 36px; height: 36px; }
}

/* Atalho de teclado para pular o menu */
.pular-conteudo { position: absolute; left: 1rem; top: -100px; z-index: 50; background: var(--superficie); color: var(--ww-azul-escuro); padding: .6rem 1rem; border-radius: 8px; font-weight: 600; }
.pular-conteudo:focus { top: .5rem; }
main:focus { outline: none; }

/* Conteúdo */
.conteudo { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.75rem 1.5rem; }
.subtitulo-pagina { color: var(--texto-suave); margin: 0 0 1.5rem; }
.painel-bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.painel-bloco.estreito { max-width: 520px; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }

.dados { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0; }
.dados dt { color: var(--texto-suave); }
.dados dd { margin: 0; font-weight: 600; }

.modulos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.modulos a {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 1.1rem; border: 1px solid var(--borda); border-left: 4px solid var(--ww-azul);
  border-radius: var(--raio); text-decoration: none; color: var(--texto); background: var(--superficie);
}
.modulos a:hover { border-color: var(--ww-azul); }
.modulos strong { color: var(--ww-azul-escuro); }
.modulos span { color: var(--texto-suave); font-size: .9rem; }

/* Formulários */
.formulario { display: flex; flex-direction: column; gap: .35rem; }
.formulario label, .filtros label { font-weight: 600; font-size: .9rem; }
input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="datetime-local"], select {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font: inherit;
  background: var(--superficie);
  color: var(--texto);
  margin-bottom: .5rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ww-azul-claro); outline-offset: 1px; border-color: var(--ww-azul); }
a:focus-visible, button:focus-visible, summary:focus-visible, .botao:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 6px; }
.topo a:focus-visible, .topo button:focus-visible, .topo summary:focus-visible { box-shadow: 0 0 0 3px var(--ww-azul-escuro), 0 0 0 5px var(--ww-branco); }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--ww-azul); vertical-align: -.2rem; margin: 0 .35rem 0 0; }
.ajuda { color: var(--texto-suave); font-size: .9rem; }
.ajuda ul { margin: .25rem 0 .5rem; padding-left: 1.2rem; }
.erro-campo { color: var(--erro); font-size: .9rem; margin: -.25rem 0 .5rem; }

.botao {
  display: inline-block;
  background: var(--ww-azul);
  color: var(--ww-branco);
  border: 0;
  border-radius: 8px;
  padding: .65rem 1.2rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.botao:hover { background: var(--ww-azul-escuro); }
.botao-secundario { background: var(--superficie); color: var(--ww-azul); border: 1px solid var(--ww-azul); }
.botao-secundario:hover { background: var(--fundo); }
.acoes { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.link-secundario { text-align: center; margin-top: .5rem; font-size: .9rem; }

/* Avisos */
.aviso { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid transparent; }
.aviso-success { background: var(--sucesso-fundo); color: var(--sucesso); border-color: #B8E0C8; }
.aviso-error { background: var(--erro-fundo); color: var(--erro); border-color: #F5C2BD; }
.aviso-warning { background: var(--alerta-fundo); color: var(--alerta); border-color: #F0DB9B; }
.aviso-info { background: #E7F0FA; color: var(--ww-azul-escuro); border-color: #C3D8EE; }
.selo { display: inline-block; padding: .1rem .6rem; border-radius: 999px; background: #EEF1F5; color: #44515F; font-size: .85rem; border: 1px solid transparent; }
.selo-aviso { background: var(--alerta-fundo); color: var(--alerta); }
.selo-info { background: #E7F0FA; color: var(--ww-azul-escuro); }
.selo-ok { background: var(--sucesso-fundo); color: var(--sucesso); }

/* 2FA */
.qrcode { width: 220px; height: 220px; background: #fff; padding: .5rem; border: 1px solid var(--borda); border-radius: 8px; }
.qrcode svg { width: 100%; height: 100%; }
.chave { display: inline-block; padding: .4rem .6rem; background: var(--fundo); border-radius: 6px; word-break: break-all; font-size: .95rem; }

/* Tabelas e filtros */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.filtros > div { min-width: 180px; }
.filtros .botao { margin-bottom: .5rem; }
.tabela-rolagem { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela caption { text-align: left; padding: .75rem 1rem; color: var(--texto-suave); }
.tabela th { background: var(--ww-azul-escuro); color: var(--ww-branco); text-align: left; padding: .6rem 1rem; font-weight: 600; }
.tabela td { padding: .6rem 1rem; border-top: 1px solid var(--borda); vertical-align: top; }
.tabela tbody tr:nth-child(even) { background: #F8FAFC; }
.tabela pre { white-space: pre-wrap; font-size: .8rem; margin: .5rem 0 0; }
.paginacao { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1rem; }

/* Cadastros */
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.cabecalho-pagina .acoes { margin-top: 0; }
.cabecalho-pagina form { margin: 0; }
.trilha { margin: 0 0 .5rem; font-size: .9rem; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.indicador { background: var(--superficie); border: 1px solid var(--borda); border-top: 3px solid var(--ww-azul); border-radius: var(--raio); padding: .75rem 1rem; display: flex; flex-direction: column; }
.painel-bloco .indicador { background: var(--fundo); }
.indicador-rotulo { color: var(--texto-suave); font-size: .85rem; }
.indicador strong { font-size: 1.5rem; color: var(--ww-azul-escuro); }
.indicador small { font-size: .85rem; font-weight: 400; color: var(--texto-suave); }
.selo-essencial { background: #E7F0FA; color: var(--ww-azul-escuro); font-weight: 600; }
.selo-neutro { background: #EEF1F5; color: var(--texto-suave); }
.selo-alerta { background: var(--erro-fundo); color: var(--erro); }
.linha-inativa td { color: var(--texto-suave); }
.acoes-linha { display: flex; gap: .75rem; align-items: center; white-space: nowrap; }
.acoes-linha form { margin: 0; }
.link-botao { background: none; border: 0; padding: .2rem 0; min-height: 24px; color: var(--ww-azul); font: inherit; text-decoration: underline; cursor: pointer; }
.tabela td a, .acoes-linha a { display: inline-block; padding: .2rem 0; min-height: 24px; }
.filtros label:has(input[type="checkbox"]) { display: flex; align-items: center; min-height: 32px; font-weight: 400; }
.obrigatorio { color: var(--erro); }
.botao-perigo { background: var(--erro); }
.botao-perigo:hover { background: #8F1C13; }
.acoes-coluna { flex-direction: column; align-items: stretch; }
.acoes-coluna form, .acoes-coluna .botao { width: 100%; }
.acoes-coluna button { width: 100%; }
input[type="number"], textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--borda); border-radius: 8px; font: inherit; margin-bottom: .5rem; }

/* Importação */
.linha-erro td { background: var(--erro-fundo); }
.sel-classificacao { margin: 0; min-width: 160px; }
.sel-classificacao.pendente { border-color: var(--alerta); background: var(--alerta-fundo); }
.lista-ajuda { padding-left: 1.2rem; }
.lista-ajuda li { margin-bottom: .35rem; }
input[type="file"] { margin-bottom: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Detalhes da auditoria */
.tabela-detalhes { border-collapse: collapse; margin-top: .5rem; font-size: .85rem; }
.tabela-detalhes th, .tabela-detalhes td { border: 1px solid var(--borda); padding: .3rem .6rem; text-align: left; background: var(--superficie); color: var(--texto); }
.tabela-detalhes th { background: var(--fundo); font-weight: 600; }

/* Chamados */
/* Situação do chamado: fundo + bolinha (azul = em curso, verde = resolvido, cinza = aberto/encerrado) */
.selo[class*="selo-situacao-"]::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; margin-right: .4rem; vertical-align: .05rem; }
.selo-situacao-aberto { background: #EEF1F5; color: #1B2733; font-weight: 600; }
.selo-situacao-aberto::before { background: none !important; box-shadow: inset 0 0 0 1.5px currentColor; }
.selo-situacao-em_atendimento { background: #E7F0FA; color: var(--ww-azul-escuro); font-weight: 600; }
.selo-situacao-resolvido { background: var(--sucesso-fundo); color: var(--sucesso); font-weight: 600; }
.selo-situacao-encerrado { background: #EEF1F5; color: var(--texto-suave); }
/* Prioridade: só contorno, para não se confundir com situação e prazo */
.selo[class*="selo-prioridade-"] { background: var(--superficie); border-color: currentColor; }
.selo-prioridade-1 { color: var(--erro); font-weight: 600; }
.selo-prioridade-2 { color: var(--alerta); font-weight: 600; }
.selo-prioridade-3, .selo-prioridade-4, .selo-prioridade-5 { color: #44515F; }
.selo-sla-no_prazo, .selo-sla-cumprido { background: var(--sucesso-fundo); color: var(--sucesso); }
.selo-sla-vence_em_breve { background: var(--alerta-fundo); color: var(--alerta); font-weight: 600; }
.selo-sla-vencido, .selo-sla-descumprido { background: var(--erro-fundo); color: var(--erro); font-weight: 600; }
.selo-sla-sem_prazo, .selo-sla-sem_solucao { background: #EEF1F5; color: var(--texto-suave); }
/* Prazo: semáforo com relógio */
.selo[class*="selo-sla-"]::before { content: "◷"; margin-right: .3rem; }
.colunas-chamado { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; gap: 1.25rem; }
@media (max-width: 900px) { .colunas-chamado { grid-template-columns: 1fr; } }
.texto-livre { white-space: pre-wrap; margin: 0 0 1rem; }
h3 { font-size: 1rem; margin: 1rem 0 .25rem; color: var(--ww-azul-escuro); }
.linha-do-tempo { list-style: none; padding: 0; margin: 0 0 1rem; border-left: 2px solid var(--borda); }
.evento { position: relative; padding: .1rem 0 .9rem 1.1rem; }
.evento::before { content: ""; position: absolute; left: -7px; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--ww-azul); border: 2px solid var(--superficie); }
.evento-comentario::before { background: var(--texto-suave); }
.evento-encerramento::before { background: var(--texto); }
.evento-solucao::before { background: var(--sucesso); }
.evento-cabecalho { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.evento-cabecalho span { color: var(--texto-suave); font-size: .85rem; }
.evento p { margin: .25rem 0 0; }
aside .formulario + .formulario, aside .acao-recolhida { margin-top: 1rem; }
.acao-recolhida summary { cursor: pointer; font-weight: 600; color: var(--ww-azul); padding: .25rem 0; }
.acao-recolhida[open] summary { margin-bottom: .5rem; }

.indicador-link { text-decoration: none; color: inherit; }
.indicador-link:hover { border-color: var(--ww-azul); }

/* Rodapé */
.rodape { text-align: center; color: var(--texto-suave); font-size: .82rem; padding: 1rem; border-top: 1px solid var(--borda); background: var(--superficie); }

/* Telas públicas (login) */
.tela-publica {
  min-height: 100vh;
  background: var(--ww-degrade);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem 1rem;
}
.cartao-publico {
  background: var(--superficie);
  width: 100%; max-width: 400px;
  border-radius: 14px;
  padding: 2rem 1.75rem;
  box-shadow: 0 12px 40px rgba(16, 45, 85, .35);
  text-align: center;
}
.cartao-publico .formulario { text-align: left; margin-top: 1.25rem; }
.cartao-publico .botao { margin-top: .5rem; }
.logo-grande { border-radius: 16px; }
.subtitulo { color: var(--texto-suave); margin: 0; font-size: .9rem; }
.rodape-publico { color: rgba(255, 255, 255, .85); font-size: .82rem; margin-top: 1.25rem; }

@media (max-width: 640px) {
  .topo { padding: .6rem 1rem; }
  .conteudo { padding: 1.25rem 1rem; }
  .dados { grid-template-columns: 1fr; gap: .1rem; }
  .dados dd { margin-bottom: .5rem; }
}

/* Relatórios */
.formulario-linha { margin: .5rem 0; }
.figura-desempenho { margin: 0 0 1rem; border: 1px solid var(--borda); border-radius: 8px; padding: .5rem; background: var(--superficie); }
.figura-desempenho img { max-width: 100%; display: block; margin-bottom: .35rem; }
.figura-desempenho figcaption { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--texto-suave); }

.lista-alertas { list-style: none; padding: 0; margin: 0; }
.lista-alertas li { padding: .35rem 0; border-bottom: 1px solid var(--borda); }

/* Texto de e-mail mostrado para conferência antes do envio (incidentes). */
.previa-texto { white-space: pre-wrap; word-break: break-word; background: #F6F8FB; border: 1px solid #DDE3EA; border-radius: 8px; padding: .75rem 1rem; font-family: inherit; font-size: .9rem; max-height: 28rem; overflow: auto; }

/* Senha temporária mostrada uma única vez ao administrador. */
.senha-temporaria { font-family: Consolas, "Courier New", monospace; font-size: 1.2rem; letter-spacing: .05em; background: #F6F8FB; border: 1px solid #DDE3EA; border-radius: 6px; padding: .2rem .5rem; user-select: all; }

/* Botão travado enquanto o formulário é enviado (static/js/app.js) */
.enviando, button:disabled { opacity: .7; cursor: progress; }

/* Filtros recolhíveis (lista de chamados) */
.filtros-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: .75rem 1rem 0; margin-bottom: 1.25rem; }
.filtros-caixa > summary { cursor: pointer; font-weight: 600; color: var(--ww-azul-escuro); padding-bottom: .75rem; }
.filtros-caixa > summary .ajuda { font-weight: 400; }
.filtros-caixa .filtros { margin-bottom: .25rem; }
.filtros-caixa .filtros > div { flex: 1 1 200px; }
.filtros-caixa .filtros > div.filtros-marcar { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }

/* Tabelas que viram cartões no celular: cada célula mostra o nome da coluna (data-rotulo) */
@media (max-width: 700px) {
  .tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; }
  .tabela-cartoes tr { padding: .6rem .9rem; border-top: 1px solid var(--borda); }
  .tabela-cartoes tbody tr:nth-child(even) { background: none; }
  .tabela-cartoes td { border: 0; padding: .15rem 0; }
  .tabela-cartoes td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--texto-suave); font-size: .85rem; }
  .tabela-cartoes td.cartao-titulo { font-size: 1.05rem; font-weight: 600; }
  .tabela-cartoes td.cartao-selos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; width: auto; padding: .35rem .3rem 0 0; }
  .tabela-cartoes caption { display: block; width: 100%; }
  .tabela-cartoes td.cartao-selos br { display: none; }
}

/* Detalhe do chamado no celular: as ações vêm logo depois do cabeçalho, antes do histórico */
@media (max-width: 900px) {
  .colunas-chamado > aside { display: contents; }
  .colunas-chamado .bloco-acoes { order: -1; }
}
.so-celular { display: none; }
@media (max-width: 700px) {
  .tabela-cartoes .so-celular { display: inline; }
  .tabela-cartoes td.so-largo-celula { display: none; }
}
.tabela summary, .trilha a, .subtitulo-pagina a { display: inline-block; padding: .2rem 0; min-height: 24px; }
.filtros .botao-filtro { margin-bottom: .5rem; }


/* Monitoramento da rede (Painel inicial). Mesmo tamanho dos outros blocos; problema = cor sólida e forte, para ser
   visto de longe também num monitor grande.
   Cores definidas pelo usuário em 2026-11-09: sem sinal vermelho forte, sinal crítico laranja, instável amarelo.
   Cada cor vem sempre com ícone e nome da situação (nunca só a cor). Cores conferidas para daltonismo (ΔE ≥ 15). */
:root {
  --rede-fora: #B0000E;        --rede-fora-texto: #FFFFFF;
  --rede-critico: #F57C00;     --rede-critico-texto: #2B1400;
  --rede-instavel: #F5D000;    --rede-instavel-texto: #2B2000;
  --rede-no_ar: #1E7B4C;       --rede-no_ar-fundo: #E3F4EA;
  --rede-neutro: #5A6B7D;      --rede-neutro-fundo: #EEF1F5;
}
.rede-icone::before { display: inline-block; min-width: 1.2em; text-align: center; font-weight: 700; }
.rede-fora .rede-icone::before { content: "✕"; }
.rede-critico .rede-icone::before { content: "▼"; }
.rede-sem_redundancia .rede-icone::before { content: "⇄"; }
.rede-instavel .rede-icone::before { content: "!"; }
.rede-sem_leitura .rede-icone::before { content: "?"; }
.rede-no_ar .rede-icone::before { content: "✓"; }
.rede-nao_monitorada .rede-icone::before { content: "–"; }

/* Faixa do topo: resumo em uma linha, na cor da pior situação. */
.rede-faixa { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; }
.rede-faixa strong { display: block; font-size: 1.15rem; line-height: 1.3; }
.rede-faixa small { font-size: .85rem; opacity: .9; }
.rede-faixa-icone::before { font-size: 1.75rem; line-height: 1; font-weight: 700; }
.rede-faixa-vermelho { background: var(--rede-fora); color: var(--rede-fora-texto); }
.rede-faixa-laranja { background: var(--rede-critico); color: var(--rede-critico-texto); }
.rede-faixa-amarelo { background: var(--rede-instavel); color: var(--rede-instavel-texto); }
.rede-faixa-verde { background: var(--rede-no_ar); color: #FFFFFF; }
.rede-faixa-vermelho .rede-faixa-icone::before, .rede-faixa-laranja .rede-faixa-icone::before,
.rede-faixa-amarelo .rede-faixa-icone::before { content: "⚠"; }
.rede-faixa-verde .rede-faixa-icone::before { content: "✓"; }


/* Totais por situação: com quantidade, a cor sólida da situação; zerado, apagado. */
.rede-totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.rede-total { border-radius: var(--raio); padding: .65rem .9rem; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .5rem; }
.rede-total strong { font-size: 1.5rem; line-height: 1.1; }
.rede-total > span:last-child { grid-column: 1 / -1; font-size: .85rem; font-weight: 600; }
.rede-total .rede-icone { font-size: 1.1rem; }
.rede-total.rede-fora { background: var(--rede-fora); color: var(--rede-fora-texto); }
.rede-total.rede-critico, .rede-total.rede-sem_redundancia { background: var(--rede-critico); color: var(--rede-critico-texto); }
.rede-total.rede-instavel { background: var(--rede-instavel); color: var(--rede-instavel-texto); }
.rede-total.rede-no_ar { background: var(--rede-no_ar); color: #FFFFFF; }
.rede-total.rede-sem_leitura, .rede-total.rede-nao_monitorada { background: var(--rede-neutro); color: #FFFFFF; }
.rede-total.rede-zerado { background: var(--rede-neutro-fundo); color: var(--texto-suave); }

/* Gráfico: proporção das unidades monitoradas por situação (2px de respiro entre as partes). */
.rede-barra { display: flex; gap: 2px; height: .75rem; border-radius: 6px; overflow: hidden; margin-bottom: 1.25rem; background: var(--superficie); }
.rede-barra .rede-fora { background: var(--rede-fora); }
.rede-barra .rede-critico, .rede-barra .rede-sem_redundancia { background: var(--rede-critico); }
.rede-barra .rede-instavel { background: var(--rede-instavel); }
.rede-barra .rede-sem_leitura { background: var(--rede-neutro); }
.rede-barra .rede-no_ar { background: var(--rede-no_ar); }

/* Cartões por unidade: problema em cor sólida; no ar, discreto. */
.rede-grade { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.rede-cartao { border-radius: var(--raio); padding: .65rem .85rem; display: flex; flex-direction: column; gap: .2rem; border: 1px solid var(--borda); border-left: 6px solid var(--rede-neutro); background: var(--superficie); }
.rede-cartao a { color: inherit; }
.rede-cartao-situacao { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .75rem; }
.rede-cartao-nome { font-size: 1rem; font-weight: 700; text-decoration: none; }
.rede-cartao-nome:hover { text-decoration: underline; }
.rede-cartao-sinal { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.rede-cartao-sinal small { font-size: .5em; font-weight: 600; }
.rede-cartao-detalhe { font-size: .8rem; }
.rede-cartao a.rede-cartao-alerta { color: var(--rede-fora); text-decoration: none; }
.rede-cartao-alerta { align-self: flex-start; background: #FFFFFF; color: var(--rede-fora); font-weight: 700; border-radius: 4px; padding: .1rem .5rem; font-size: .85rem; }
.rede-cartao.rede-fora { background: var(--rede-fora); color: var(--rede-fora-texto); border-color: var(--rede-fora); }
.rede-cartao.rede-critico, .rede-cartao.rede-sem_redundancia { background: var(--rede-critico); color: var(--rede-critico-texto); border-color: var(--rede-critico); }
.rede-cartao.rede-instavel { background: var(--rede-instavel); color: var(--rede-instavel-texto); border-color: var(--rede-instavel); }
.rede-cartao.rede-no_ar { background: var(--rede-no_ar-fundo); border-left-color: var(--rede-no_ar); }
.rede-cartao.rede-no_ar .rede-cartao-situacao { color: var(--rede-no_ar); }
.rede-cartao.rede-sem_leitura, .rede-cartao.rede-nao_monitorada { background: var(--rede-neutro-fundo); color: var(--texto-suave); }

/* Fora do ar pulsa para chamar a atenção de longe (desligado para quem pede menos movimento). */
@keyframes rede-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(176, 0, 14, .6); } 50% { box-shadow: 0 0 0 6px rgba(176, 0, 14, 0); } }
.rede-faixa-vermelho, .rede-cartao.rede-fora { animation: rede-pulso 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rede-faixa-vermelho, .rede-cartao.rede-fora { animation: none; } }

.rede-cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.rede-cabecalho h2 { margin: 0; }
.rede-atualizar { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.rede-atualizar label { font-weight: 600; color: var(--ww-azul-escuro); white-space: nowrap; }
.rede-atualizar label::before { content: "⟳"; margin-right: .3rem; color: var(--ww-azul); }
/* Mesmo visual do botão secundário (azul da marca), com seta própria no lugar da seta do navegador. */
.rede-atualizar select {
  width: auto; margin: 0; padding: .4rem 2rem .4rem .8rem;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--ww-azul); border-radius: 8px;
  background: #E7F0FA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C508E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .7rem center;
  color: var(--ww-azul-escuro); font-weight: 600; cursor: pointer;
}
.rede-atualizar select:hover { background-color: #D6E6F6; }
/* Botão "Ver as outras unidades": mesmo visual do botão secundário. */
.rede-demais { margin-bottom: 1rem; }
.rede-demais > summary { display: inline-block; cursor: pointer; font-weight: 600; color: var(--ww-azul); border: 1px solid var(--ww-azul); border-radius: 8px; padding: .45rem 1rem; background: var(--superficie); }
.rede-demais > summary:hover { background: var(--fundo); }
.rede-demais[open] > summary { margin-bottom: .75rem; }
.rede-detalhes summary { cursor: pointer; font-weight: 600; color: var(--ww-azul-escuro); }

/* Selos da tabela de detalhes. */
.selo-rede-fora { background: var(--rede-fora); color: var(--rede-fora-texto); font-weight: 600; }
.selo-rede-critico, .selo-rede-sem_redundancia { background: var(--rede-critico); color: var(--rede-critico-texto); font-weight: 600; }
.selo-rede-instavel { background: var(--rede-instavel); color: var(--rede-instavel-texto); font-weight: 600; }
.selo-rede-sem_leitura, .selo-rede-nao_monitorada { background: #EEF1F5; color: var(--texto-suave); }
.selo-rede-no_ar { background: var(--sucesso-fundo); color: var(--sucesso); }