/* Central do Assinante (portal de atendimento): celular primeiro, sem dependencias, sem JS obrigatorio. */
:root {
  --azul: #1d5fa8;
  --azul-escuro: #154a85;
  --azul-claro: #e8f0fa;
  --texto: #1f2933;
  --suave: #5b6875;
  --borda: #d9e0e7;
  --fundo: #f4f6f9;
  --cartao: #ffffff;
  --verde: #2e8b57;
  --verde-claro: #e6f4ec;
  --amarelo: #a86b00;
  --amarelo-claro: #fff4dc;
  --vermelho: #c0392b;
  --vermelho-claro: #fdecea;
  --raio: 12px;
  --largura: 1100px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --texto: #e6ebf0;
    --suave: #a3afbb;
    --borda: #33404d;
    --fundo: #12181f;
    --cartao: #1b232c;
    --azul: #5b9be0;
    --azul-escuro: #7fb0e8;
    --azul-claro: #1c2b3d;
    --verde-claro: #16301f;
    --amarelo-claro: #33280f;
    --vermelho-claro: #3a1a17;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  background: var(--fundo);
}
a { color: var(--azul); }
a:hover { color: var(--azul-escuro); }
h1 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
p { margin: 0 0 .75rem; }

.topo { background: var(--cartao); border-bottom: 1px solid var(--borda); }
.topo-in {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  max-width: var(--largura); margin: 0 auto; padding: .55rem 1rem;
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--texto); min-width: 0; }
/* logo na proporcao original: altura fixa, largura acompanha (antes 36x36 achatava o logo largo) */
.marca .logo { flex: none; display: block; height: 40px; width: auto; max-width: 160px; object-fit: contain; }
.marca .nome { font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.marca .sub { color: var(--suave); font-size: .9rem; border-left: 1px solid var(--borda); padding-left: .6rem; white-space: nowrap; }
.quem { display: none; margin: 0; text-align: right; line-height: 1.25; min-width: 0; }
.quem span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem-cliente { font-weight: 600; font-size: .9rem; }
.quem-nome { color: var(--suave); font-size: .8rem; }

.faixa-menu { border-top: 1px solid var(--borda); }
.menu {
  display: flex; gap: .15rem; max-width: var(--largura); margin: 0 auto; padding: 0 .5rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.menu a {
  flex: none; padding: .7rem .75rem .6rem; text-decoration: none; color: var(--suave); font-size: .95rem;
  white-space: nowrap; border-bottom: 3px solid transparent;
}
.menu a:hover { color: var(--azul-escuro); }
.menu a.ativo { color: var(--azul-escuro); border-bottom-color: var(--azul); font-weight: 600; }
.menu a.sair { margin-left: auto; }

.conteudo { max-width: 760px; margin: 0 auto; padding: 1.25rem 1rem; }
.conteudo.largo { max-width: var(--largura); }
.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.1rem 1rem; margin-bottom: 1rem;
}
.cartao.destaque { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }
.cabeca { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cabeca h1 { margin: 0; }
.lead { color: var(--suave); }
.dica, .meta { color: var(--suave); font-size: .9rem; }
.vazio { color: var(--suave); font-style: italic; }

.form { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.form label { font-weight: 600; }
.form label.opcao, .form label.nota { font-weight: 400; }
input[type=text], select, textarea {
  width: 100%; font: inherit; color: var(--texto); background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 8px; padding: .7rem .8rem;
}
input:focus, select:focus, textarea:focus, .botao:focus, a:focus {
  outline: 3px solid var(--azul-claro); outline-offset: 1px; border-color: var(--azul);
}
textarea { resize: vertical; min-height: 6rem; }
input.codigo { font-size: 1.6rem; letter-spacing: .4rem; text-align: center; max-width: 14rem; }
fieldset { border: 0; padding: 0; margin: .25rem 0; display: flex; flex-direction: column; gap: .35rem; }
legend { font-weight: 600; margin-bottom: .35rem; padding: 0; }
.opcao, .nota {
  display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem;
  border: 1px solid var(--borda); border-radius: 8px; cursor: pointer;
}
.opcao:hover, .nota:hover { border-color: var(--azul); }
.notas .nota span { display: inline-block; min-width: 1.6rem; height: 1.6rem; line-height: 1.6rem; text-align: center;
  border-radius: 50%; background: var(--azul-claro); color: var(--azul-escuro); font-weight: 700; }
.contador { align-self: flex-end; color: var(--suave); font-size: .8rem; margin-top: -.4rem; }

.botao {
  display: inline-block; text-align: center; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--azul); color: #fff; border: 0; border-radius: 8px;
  padding: .75rem 1.1rem; text-decoration: none; min-height: 44px;
}
.botao:hover { background: var(--azul-escuro); color: #fff; }
.botao.secundario { background: transparent; color: var(--azul); border: 1px solid var(--azul); }
.botao[disabled] { opacity: .6; cursor: wait; }
.form .botao { width: 100%; }

.aviso { border-radius: 8px; padding: .75rem .9rem; margin-bottom: 1rem; border: 1px solid transparent; }
.aviso-info { background: var(--azul-claro); border-color: var(--borda); }
.aviso-ok { background: var(--verde-claro); border-color: var(--verde); }
.aviso-atencao { background: var(--amarelo-claro); border-color: var(--amarelo); }
.aviso-erro { background: var(--vermelho-claro); border-color: var(--vermelho); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li + li { border-top: 1px solid var(--borda); }
.item { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .25rem; text-decoration: none; color: var(--texto); }
.item:hover { background: var(--fundo); }
.linha1 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.num { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--suave); font-size: .9rem; margin: 0; }
.titulo { font-weight: 600; }
.titulo-chamado { margin: .2rem 0 .5rem; }

.pill { display: inline-block; font-size: .8rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px;
  background: var(--azul-claro); color: var(--azul-escuro); }
.st-aguardando_cliente { background: var(--amarelo-claro); color: var(--amarelo); }
.st-resolvido { background: var(--verde-claro); color: var(--verde); }
.st-fechado, .st-cancelado { background: var(--fundo); color: var(--suave); }

.dados { display: grid; grid-template-columns: 1fr; gap: .4rem; margin: .9rem 0 0; }
.dados div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px dashed var(--borda); padding-top: .35rem; }
.dados dt { color: var(--suave); }
.dados dd { margin: 0; text-align: right; }
.avaliado { margin-top: .75rem; }

.conversa { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.msg { border-radius: 10px; padding: .6rem .8rem; max-width: 92%; }
.msg-equipe { background: var(--azul-claro); align-self: flex-start; }
.msg-eu { background: var(--fundo); border: 1px solid var(--borda); align-self: flex-end; }
.msg-cab { display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; color: var(--suave); margin-bottom: .25rem; flex-wrap: wrap; }
.msg-cab strong { color: var(--texto); }
.msg-texto p:last-child { margin-bottom: 0; }
.msg-texto { overflow-wrap: anywhere; }

details summary { cursor: pointer; color: var(--azul); font-weight: 600; padding: .5rem 0; }
.nao-resolveu { margin-top: .75rem; }

.servicos { list-style: none; margin: 0; padding: 0; }
.servico { display: flex; flex-direction: column; gap: .2rem; padding: .7rem 0; }
.servico + .servico { border-top: 1px solid var(--borda); }
.nome-servico { font-weight: 600; overflow-wrap: anywhere; }
.estado { font-size: .9rem; font-weight: 600; }
.estado::before { content: ""; display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; background: var(--suave); }
.est-no_ar { color: var(--verde); }
.est-no_ar::before { background: var(--verde); }
.est-fora { color: var(--vermelho); }
.est-fora::before { background: var(--vermelho); }
.est-degradado { color: var(--amarelo); }
.est-degradado::before { background: var(--amarelo); }
.est-sem_informacao { color: var(--suave); }

/* Central do Assinante (P1): servico clicavel, painel, graficos SVG (cores por classe: CSP sem inline) */
.servico-link { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--texto); width: 100%; }
.servico-link:hover .nome-servico { color: var(--azul); }
.estado-grande { font-size: 1.25rem; font-weight: 700; margin: 0; }
.simples { list-style: none; margin: 0 0 .5rem; padding: 0; }
.simples li { display: flex; flex-direction: column; padding: .45rem 0; }
.simples li + li { border-top: 1px solid var(--borda); }
.cartao .cabeca { margin-bottom: .5rem; }
.cartao .cabeca h2 { margin: 0; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.kpis { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: .75rem; }
.kpi { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .8rem; border: 1px solid var(--borda); border-radius: 10px; }
.kpi-rotulo { color: var(--suave); font-size: .85rem; }
.kpi-valor { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-nota { font-size: .85rem; color: var(--suave); }
.nota-ok { color: var(--verde); }
.nota-atencao { color: var(--amarelo); }
.barra { width: 100%; max-width: 220px; height: auto; display: block; }
.b-fundo { fill: var(--borda); }
.b-valor { fill: var(--verde); }
.b-objetivo { stroke: var(--texto); stroke-width: 2; }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tabela { border-collapse: collapse; width: 100%; font-size: .85rem; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: .4rem .35rem; border-top: 1px solid var(--borda); text-align: right; white-space: nowrap; }
.tabela th[scope=row], .tabela thead th:first-child { text-align: left; white-space: normal; }
.tabela thead th { color: var(--suave); font-weight: 600; border-top: 0; }
.tabela .fora { display: block; font-size: .75rem; color: var(--amarelo); font-weight: 600; }
.resultado { font-size: .9rem; margin-top: .5rem; }
.grafico { width: 100%; height: auto; display: block; margin: .25rem 0 .5rem; }
.g-grade { stroke: var(--borda); stroke-width: 1; }
.g-eixo { fill: var(--suave); font-size: 13px; font-family: inherit; }
.g-download { fill: none; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; }
.g-upload { fill: none; stroke: var(--verde); stroke-width: 1.6; stroke-linejoin: round; }
.g-area { fill: var(--azul-claro); stroke: none; }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; color: var(--suave); }
.leg::before { content: ""; display: inline-block; width: 1rem; height: 3px; margin-right: .35rem; vertical-align: middle; }
.leg-download::before { background: var(--azul); }
.leg-upload::before { background: var(--verde); }
.dados-trafego { margin-top: 0; }
.incidente { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .25rem; }
.manut { padding: .6rem 0; }
.manut + .manut { border-top: 1px solid var(--borda); }
.manut h3 { margin-top: 0; }
.form-inline { margin-top: .5rem; }
.relatorio { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .6rem .25rem; }
.relatorio > span { display: flex; flex-direction: column; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }

/* ---- layout de varios circuitos (inicio, lista de servicos, painel) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.conta {
  display: inline-block; min-width: 1.5rem; padding: 0 .45rem; border-radius: 999px; text-align: center;
  font-size: .8rem; font-weight: 600; line-height: 1.5rem; background: var(--fundo); color: var(--suave);
  border: 1px solid var(--borda); vertical-align: middle;
}
.grade-inicio { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; align-items: start; }
.resumo { border-radius: 10px; padding: .7rem .9rem; margin-bottom: 1rem; border: 1px solid var(--borda); background: var(--fundo); }
.resumo-frase { margin: 0; font-weight: 600; }
.resumo-frase::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .5rem; vertical-align: middle; background: var(--suave); }
.resumo-ok { background: var(--verde-claro); border-color: var(--verde); }
.resumo-ok .resumo-frase::before { background: var(--verde); }
.resumo-atencao { background: var(--amarelo-claro); border-color: var(--amarelo); }
.resumo-atencao .resumo-frase::before { background: var(--amarelo); }
.resumo-erro { background: var(--vermelho-claro); border-color: var(--vermelho); }
.resumo-erro .resumo-frase::before { background: var(--vermelho); }
.resumo .filtros { margin: .6rem 0 0; }
.barra-resumo { margin-bottom: .75rem; }

.filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtro {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .4rem .3rem .75rem; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); text-decoration: none; font-size: .9rem;
}
.filtro:hover { border-color: var(--azul); color: var(--azul-escuro); }
.filtro.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.filtro.ativo .conta { background: rgba(255,255,255,.2); border-color: transparent; color: #fff; }
.f-fora .conta { color: var(--vermelho); }
.f-degradado .conta { color: var(--amarelo); }
.f-no_ar .conta { color: var(--verde); }

.cartoes-servico { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .6rem; }
.cartao-servico {
  display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: .7rem .85rem; border-radius: 10px;
  border: 1px solid var(--borda); border-left: 5px solid var(--suave); text-decoration: none; color: var(--texto);
}
.cartao-servico:hover { border-color: var(--azul); }
.cs-nome { font-weight: 600; overflow-wrap: anywhere; }
.cs-meta { color: var(--suave); font-size: .85rem; }
.cartao-servico .estado { font-size: .8rem; }
.c-no_ar { border-left-color: var(--verde); }
.c-fora { border-left-color: var(--vermelho); background: var(--vermelho-claro); }
.c-degradado { border-left-color: var(--amarelo); background: var(--amarelo-claro); }
.c-sem_informacao { border-left-color: var(--borda); }
.rodape-cartao { margin: .9rem 0 0; }

.ferramentas { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.busca { display: flex; gap: .5rem; }
.busca input[type=search] {
  flex: 1; min-width: 0; font: inherit; color: var(--texto); background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 8px; padding: .55rem .8rem;
}
.busca .botao { min-height: 0; padding: .55rem 1rem; }

.grupo-servicos h2 { display: flex; align-items: center; gap: .5rem; }
.resultado-busca { color: var(--suave); font-size: .9rem; }
.opcao input[type=checkbox] { flex: none; margin-top: .15rem; align-self: flex-start; }
.opcao small { font-size: .85rem; }
.permissoes dt { font-weight: 600; color: var(--texto); }
.permissoes dd { text-align: left; color: var(--suave); }
.contrato { padding: .4rem 0 .8rem; }
.contrato + .contrato { border-top: 1px solid var(--borda); padding-top: 1rem; }
.contrato h3 { margin: 0 0 .25rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .95rem; }
.contrato .dados { margin-top: .5rem; }
.circuito {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; letter-spacing: .02em;
  color: var(--azul-escuro); white-space: nowrap;
}
.cartao-servico .circuito { align-self: flex-start; background: var(--azul-claro); border-radius: 4px; padding: 0 .35rem; }
.ident dd .circuito, .ident dd { overflow-wrap: anywhere; }
.tabela-servicos { list-style: none; margin: 0; padding: 0; }
.tabela-servicos li + li { border-top: 1px solid var(--borda); }
.ts-cab { display: none; }
.ts-linha {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; padding: .7rem .6rem; text-decoration: none;
  color: var(--texto); border-left: 4px solid transparent; border-radius: 6px;
}
.ts-linha:hover { background: var(--fundo); }
.ts-linha:hover .nome-servico { color: var(--azul); }
.ts-linha.c-fora { border-left-color: var(--vermelho); }
.ts-linha.c-degradado { border-left-color: var(--amarelo); }
.ts-linha.c-no_ar, .ts-linha.c-sem_informacao { background: none; }
.ts-nome { grid-column: 1 / -1; display: flex; flex-direction: column; }
.ts-sub { color: var(--suave); font-size: .85rem; }
.ts-cidade, .ts-banda { color: var(--suave); font-size: .9rem; }
.ts-banda { text-align: right; font-variant-numeric: tabular-nums; }
.ts-linha .estado { grid-column: 1 / -1; }

.trilha { font-size: .9rem; color: var(--suave); margin-bottom: .5rem; }
.trilha span:last-child { color: var(--texto); }
.entre { display: flex; align-items: center; gap: .9rem; font-size: .95rem; }
.entre .meta { margin: 0; }
.cab-servico { border-left: 6px solid var(--suave); }
.cab-servico.c-fora, .cab-servico.c-degradado { background: var(--cartao); }
.cab-servico-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.cab-servico-topo .meta { margin: 0; }
.ident { margin-top: .75rem; }
.duas-colunas { display: grid; grid-template-columns: 1fr; gap: 0 1rem; align-items: start; }

.rodape { max-width: 760px; margin: 1rem auto 2rem; padding: 0 1rem; color: var(--suave); font-size: .85rem; text-align: center; }
.rodape p { margin: .2rem 0; }

@media (min-width: 640px) {
  h1 { font-size: 1.6rem; }
  .cartao { padding: 1.4rem 1.5rem; }
  .form .botao { width: auto; align-self: flex-start; }
  .dados { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .servico { flex-direction: row; justify-content: space-between; align-items: center; }
  .servico-link { flex-direction: row; justify-content: space-between; align-items: center; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .notas { flex-direction: row; flex-wrap: wrap; }
  .notas .nota { flex: 1 1 8rem; }
  .quem { display: block; }
  .cartoes-servico { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .ferramentas { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .busca { flex: 0 1 26rem; }
}
@media (min-width: 760px) {
  .ts-cab, .ts-linha { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1.5fr); }
  .ts-cab {
    display: grid; gap: .75rem; padding: 0 .6rem .4rem; border-left: 4px solid transparent;
    color: var(--suave); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  }
  .ts-cab span:nth-child(3), .ts-banda { text-align: right; padding-right: 1.5rem; }
  .ts-linha { align-items: center; gap: .75rem; }
  .ts-nome, .ts-linha .estado { grid-column: auto; }
}
@media (min-width: 960px) {
  .grade-inicio { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .largo .cartoes-servico { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .duas-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .largo .duas-colunas .kpis { grid-template-columns: 1fr; }
  .trafego-periodos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; }
  .trafego-periodos .dados { grid-template-columns: 1fr; }
}