/* ==========================================================================
   Central de Chips — extensões do Nuvem Azul (comum aos dois painéis).
   Fonte única em ui-comum/; ferramentas/sincronizar-ui.mjs copia para web/ui e cloud/frontend/ui.
   Ordem: tokens.css → components.css → marca.css → este arquivo.
   Regras: só tokens, só os raios medidos, só a escala --text-*. Não redefine token de marca
   (o `design.mjs conferir` reprova). Classes na-* daqui são candidatas a voltar para a biblioteca;
   cc-* são cola deste app.
   ========================================================================== */

/* O atributo hidden tem de vencer o display das classes (.na-app é flex e apagaria o hidden). */
[hidden] { display: none !important; }

html, body { margin: 0; background: var(--bg); }

/* o principal recebe o foco por programa quando a linha que o tinha some: é ponto de chegada, não controle */
[data-foco-de-volta]:focus { outline: none; }

/* Modo leitura (token de leitura): toda ação some, com o que a abre. */
body.viewer .admin-only { display: none !important; }

/* ---------- casca: área principal que rola (telas de cartões) e painel com formulário ---------- */
.cc-main-rola { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
.cc-painel { display: flex; flex-direction: column; overflow-y: auto; padding-bottom: var(--space-6); }
.cc-painel .na-panel__head { gap: var(--space-3); }
.cc-form { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.cc-form .na-btn--primary { justify-content: center; }
.cc-form__dica { margin: 0; font-size: var(--text-caption); color: var(--muted); line-height: 1.4; }
.cc-form-dialogo { display: grid; gap: var(--space-4); }
/* o X do painel só existe quando ele é gaveta (abaixo de 1280) */
.na-so-gaveta { display: none; }
@media (max-width: 1279px) { .na-so-gaveta { display: grid; } }

/* topo da área principal: ações da tela à esquerda, estado à direita */
.cc-topo { justify-content: space-between; }
.cc-topo__acoes, .cc-topo__estado { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.cc-topo__estado { margin-left: auto; }

/* bloco da área principal com título e uma tabela que ocupa o que sobra */
.cc-bloco { flex: 1 1 0; min-height: 220px; display: flex; flex-direction: column; gap: var(--space-3); }
.cc-bloco--curto { flex: 0 1 auto; min-height: 0; }
.cc-bloco__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex: none; }
.cc-bloco__titulo { margin: 0; font-size: var(--text-card-title); font-weight: var(--weight-bold); line-height: 1.2; color: var(--fg); }
/* a tabela tem a altura do conteúdo e rola por dentro quando passa da tela (lista curta não vira cartão vazio) */
.cc-bloco > .na-table { flex: 0 1 auto; }
.cc-bloco--curto > .na-table { flex: none; }

/* ---------- grade de cartões (Status) ---------- */
.na-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); align-content: start; align-items: start; }
.na-cartoes > .na-card { min-width: 0; }
/* o que não é cartão de porta ocupa a linha inteira (indicadores, alerta, vazio, título do gateway) */
.na-cartoes > :not(section) { grid-column: 1 / -1; }
.cc-porta--antiga dd span { color: var(--muted); }
.cc-nota { margin: 0; font-size: var(--text-caption); line-height: 1.4; color: var(--fg-2); }
/* portas sem chip: um cartão só, uma linha por porta (com o reinício, quando o agente sabe fazer) */
.cc-vazias__lista { list-style: none; margin: 0; padding: 4px 12px 8px 16px; display: grid; }
.cc-vazias__item { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; border-top: 1px solid var(--divider); }
.cc-vazias__item:first-child { border-top: 0; }
.cc-vazias__porta { font-size: var(--text-control); font-weight: var(--weight-semibold); color: var(--fg); }
.cc-vazias__modem { flex: 1; min-width: 0; font-size: var(--text-caption); color: var(--fg-2); }
@media (max-width: 767px) { .cc-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Status em duas colunas a partir de 1280: à esquerda o que é do gateway e das portas, à direita o dia.
   A 1920 a tela de uma coluna usava cerca de 23% da largura (06/10/2026). Abaixo de 1280, uma coluna só. ---------- */
.cc-status { display: grid; gap: var(--space-5); align-items: start; }
.cc-status__coluna { display: grid; gap: var(--space-5); align-content: start; min-width: 0; container-type: inline-size; }
/* coluna estreita (1440 com a lateral, ou de 768 a 1279): indicadores 2 × 2, sem um sobrando sozinho na 2ª linha */
@container (max-width: 860px) { .cc-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cc-status { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); } }
.cc-cartao { min-width: 0; }
/* o corpo tem o respiro do .na-dados (o .na-painel zera o padding do cartão) */
.cc-cartao__corpo { display: grid; gap: var(--space-3); padding: 14px 16px 18px; }
.cc-bloco-vazio { margin: 0; font-size: var(--text-control); line-height: 1.4; color: var(--fg-2); }

/* Precisa de atenção: cada item diz o problema e, quando há onde resolver, leva até lá */
.cc-atencao { list-style: none; margin: 0 -10px; padding: 0; display: grid; gap: 2px; }
.cc-atencao__link { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--fg); font: inherit; font-size: var(--text-control); text-align: left; }
button.cc-atencao__link { cursor: pointer; }
button.cc-atencao__link:hover { background: var(--surface-soft); }
.cc-atencao__link > .na-icon { width: 18px; height: 18px; flex: none; }
.cc-atencao__item--perigo .cc-atencao__link > .na-icon:first-child { color: var(--danger); }
.cc-atencao__item--aviso .cc-atencao__link > .na-icon:first-child { color: var(--warning); }
.cc-atencao__texto { flex: 1; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.cc-atencao__link > .cc-atencao__seta { color: var(--muted); }
.cc-tudo-certo { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-control); color: var(--fg-2); }
.cc-tudo-certo > .na-icon { width: 18px; height: 18px; flex: none; color: var(--success); }
/* sem alerta, mas com algo que não deu para ler: não é "tudo em ordem" */
.cc-tudo-certo--parcial > .na-icon { color: var(--muted); }
.cc-atencao__nota { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-caption); line-height: 1.4; color: var(--fg-2); }
.cc-atencao__nota > .na-icon { width: 16px; height: 16px; flex: none; color: var(--muted); }

/* Hoje: números do dia, dois por linha, cada um com o nome em cima */
.cc-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin: 0; }
.cc-numero { display: grid; gap: 2px; align-content: start; min-width: 0; }
.cc-numero__rotulo { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--fg-2); }
.cc-numero__valor { margin: 0; font-size: var(--text-heading-sm); line-height: 1.15; font-weight: var(--weight-bold); color: var(--fg); overflow-wrap: anywhere; }
.cc-numero__detalhe { margin: 0; font-size: var(--text-caption); color: var(--muted); }

/* Sinal nas últimas 24 h: porta, linha e o valor de agora; a escala é a do CSQ (−113 a −51 dBm). A coluna do valor
   tem largura fixa: com "auto" cada gráfico tinha uma largura e o eixo não casava com nenhum. */
.cc-sinal24 { display: grid; gap: var(--space-3); }
.cc-sinal24__linha { display: grid; grid-template-columns: 56px minmax(0, 1fr) 112px; grid-template-areas: "porta grafico valor" "porta grafico faixa"; column-gap: var(--space-3); align-items: center; }
.cc-sinal24__porta { grid-area: porta; font-size: var(--text-label); font-weight: var(--weight-semibold); color: var(--fg); }
.cc-sinal24__valor { grid-area: valor; align-self: end; text-align: right; font-size: var(--text-control); font-weight: var(--weight-semibold); color: var(--fg); white-space: nowrap; }
.cc-sinal24__faixa { grid-area: faixa; align-self: start; text-align: right; font-size: var(--text-caption); color: var(--fg-2); white-space: nowrap; }
.cc-grafico { grid-area: grafico; display: block; width: 100%; height: 40px; border-bottom: 1px solid var(--divider); }
/* cores de texto (passam 3:1 sobre o cartão nos dois temas); a marca de "sem sinal" tem espessura fixa na tela */
.cc-grafico__linha { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cc-grafico__ref { stroke: var(--fg-2); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.cc-grafico__sem { stroke: var(--danger); stroke-width: 4; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.cc-sinal24__eixo { grid-template-areas: none; font-size: var(--text-caption); color: var(--fg-2); }
.cc-sinal24__pontas { display: flex; justify-content: space-between; }
.cc-sinal24__legenda { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-caption); color: var(--fg-2); }
.cc-sinal24__legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.cc-legenda { display: inline-block; width: 16px; flex: none; }
.cc-legenda--linha { height: 2px; border-radius: 1px; background: var(--accent-text); }
.cc-legenda--ref { height: 0; border-top: 1px dashed var(--fg-2); }
.cc-legenda--sem { height: 4px; background: var(--danger); }
/* coluna estreita (de 1280 a 1440, e no celular): o gráfico ganha a linha inteira */
@container (max-width: 480px) {
  .cc-sinal24__linha { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "porta valor" "grafico grafico" "faixa faixa"; row-gap: 4px; }
  .cc-sinal24__faixa { text-align: left; }
  .cc-sinal24__eixo > span:empty { display: none; }
  .cc-sinal24__eixo > .cc-sinal24__pontas { grid-column: 1 / -1; } /* mesma largura do gráfico, que ocupa as duas colunas */
}

/* Últimos comandos (nuvem) e eventos (local) */
.cc-ultimos { list-style: none; margin: 0; padding: 0; display: grid; }
.cc-ultimos__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding-block: 6px; border-top: 1px solid var(--divider); }
.cc-ultimos__item:first-child { border-top: 0; }
.cc-ultimos__item > .cc-celula-duas { flex: 1; }
.cc-ultimos__titulo { font-size: var(--text-control); font-weight: var(--weight-medium); color: var(--fg); }
.cc-ver-todos { justify-self: start; }

/* ---------- filtros de lista: na lateral a partir de 1024 (lá ela some); abaixo, seletos no topo da lista ---------- */
.cc-filtros-topo { display: none; }
@media (max-width: 1023px) {
  .cc-filtros-topo { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .cc-filtro-topo { display: grid; gap: 2px; }
  .cc-filtro-topo__rotulo { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--fg-2); }
  .cc-filtro-topo__select { min-width: 150px; }
  .cc-filtro-topo__campo { height: 40px; }
}

/* ---------- sinal: 5 barras (cheia em --brand; fraca em --warning; muito fraca em --danger) ---------- */
.na-sinal { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; }
.na-sinal > i { display: block; width: 4px; border-radius: var(--radius-pill); background: var(--track); }
.na-sinal > i:nth-child(1) { height: 20%; }
.na-sinal > i:nth-child(2) { height: 40%; }
.na-sinal > i:nth-child(3) { height: 60%; }
.na-sinal > i:nth-child(4) { height: 80%; }
.na-sinal > i:nth-child(5) { height: 100%; }
.na-sinal > i.is-cheia { background: var(--brand); }
.na-sinal--fraco > i.is-cheia { background: var(--warning); }
.na-sinal--ruim > i.is-cheia { background: var(--danger); }
.cc-sinal { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---------- tabela: linha que cresce com o texto, célula que quebra, cartão no celular ---------- */
.na-tabela--quebra .na-table__body .na-table__row { height: auto; min-height: 44px; padding-block: 10px; align-items: start; }
.na-tabela--quebra .na-table__body [role="cell"] { padding-top: 2px; }
.na-celula--quebra { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; color: var(--fg); }
/* direção da mensagem: a seta diz o sentido (verde leria como "deu certo"); falha é selo à parte */
.cc-direcao { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-semibold); color: var(--accent-text); }
.cc-direcao .na-icon { width: 16px; height: 16px; }
.cc-celula-duas { display: grid; gap: 2px; min-width: 0; }
.cc-celula-duas > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-celula-duas__meta { font-size: var(--text-caption); color: var(--muted); }
.cc-titulo-linha { font-size: var(--text-row); font-weight: var(--weight-medium); color: var(--fg); }
@media (max-width: 767px) {
  /* as células de área (a, b, c, g) aparecem; o pacote esconde a 2ª e a 3ª, a marca só remapeia */
  .na-tabela--celular-areas .na-table__body .na-table__row > [data-area] { display: block; }
  /* a marca mapeia a, b, c e g; d e e abrem espaço para não esconder dado no cartão (senha, linha, porta) */
  .na-tabela--celular-areas [data-area="d"] { grid-area: d; }
  .na-tabela--celular-areas [data-area="e"] { grid-area: e; }
  .na-tabela--celular-areas .na-table__body .na-table__row > :not([data-area]) { display: none; }
  .na-tabela--celular-areas .na-table__body .na-table__row > [data-area="g"] { justify-self: start; }
  .na-tabela--celular-areas .na-table__body .na-table__row > [data-area="b"] { justify-self: end; }
  /* no cartão não há coluna a alinhar: a vaga sai, e a linha de ações sem botão também */
  .na-acoes-linha > [aria-hidden="true"] { display: none; }
  .na-tabela--celular-areas .na-table__body .na-table__row > [data-area="g"]:has(.na-acoes-linha):not(:has(button)) { display: none; }
  /* tabela sem colunas conhecidas (histórico de chamadas): tudo empilhado */
  .na-tabela--pilha .na-table__body .na-table__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .na-tabela--pilha .na-table__body .na-table__row > * { display: block; }
  .cc-bloco { min-height: 0; flex: none; }
}

/* ---------- discador do telefone ---------- */
.na-teclado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); max-width: 300px; }
.na-teclado .na-btn { justify-content: center; height: 48px; font-size: var(--text-card-title); font-variant-numeric: tabular-nums; }
.na-chamada { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--selected); box-shadow: inset 3px 0 0 var(--brand); }
.na-chamada__info { margin: 0; font-size: var(--text-card-title); font-weight: var(--weight-bold); color: var(--fg); }
.na-chamada__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cc-telefone { display: grid; gap: var(--space-5); align-content: start; max-width: 720px; }
.cc-telefone .na-card { display: grid; gap: var(--space-4); }
.cc-linha-campos { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.cc-linha-campos > .na-field { flex: 1 1 220px; min-width: 0; }

/* ---------- QR de configuração do telefone ---------- */
.na-qr:not(:has(img)) { background: transparent; } /* sem o QR (offline) é só texto: no fundo do cartão, que passa AA */
/* Branco literal de propósito: QR sobre fundo escuro não é lido pela câmera. nuvem-azul:permitir */
.na-qr { display: inline-grid; place-items: center; min-width: 146px; min-height: 146px; padding: var(--space-2); border-radius: var(--radius-md); background: #ffffff; color: var(--muted); font-size: var(--text-caption); }
.na-qr img { display: block; }
.cc-config-tel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: start; }
.cc-config-tel > dl { padding: 0; }
.cc-config-tel__qr { display: grid; justify-items: center; gap: var(--space-2); max-width: 200px; text-align: center; }
@media (max-width: 767px) { .cc-config-tel { grid-template-columns: minmax(0, 1fr); } .cc-config-tel__qr { justify-self: center; } }

/* ---------- aviso onde há FAB (abaixo de 1024): no alto. Embaixo, e ficando até ser fechado, ele cobria o FAB e o
   campo da folha. Com a gaveta aberta volta para baixo: no alto cobria o título e o X dela. ---------- */
@media (max-width: 1023px) {
  .cc-avisos-alto.na-toast.is-floating { top: calc(var(--space-4) + env(safe-area-inset-top)); bottom: auto; }
  body:has(.na-panel.is-open) .cc-avisos-alto.na-toast.is-floating { top: auto; bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
}

/* ---------- caixa de marcar: a do pacote tem 18 px de altura; o alvo de toque mínimo é 24 ---------- */
.na-check { min-height: 24px; }


/* ---------- Preferências no celular: em 3 colunas o rótulo "Sistema" (100 px) não cabe nos 78 px do cartão
   a 375 px (medido em 06/10/2026). Uma coluna. Defeito da marca a devolver para a biblioteca. ---------- */
@media (max-width: 767px) { .na-pref [role="radiogroup"] { grid-template-columns: minmax(0, 1fr); } }


/* ---------- contas (PR 3): o link que troca e-mail e senha pelo token, a conta em Preferências e o detalhe do
   usuário no painel direito (coluna fixa a partir de 1280, gaveta abaixo) ---------- */
.cc-login-modo { justify-self: center; }
.cc-conta__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cc-painel__titulo { min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.cc-painel__titulo:focus { outline: none; } /* recebe o foco por programa ao abrir o detalhe: é ponto de chegada */
.cc-detalhe { display: grid; gap: var(--space-5); margin-top: var(--space-5); min-width: 0; }
.cc-detalhe .na-dados { padding: 0; }
.cc-detalhe__selos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cc-detalhe__secao { display: grid; gap: var(--space-2); min-width: 0; }
.cc-detalhe__titulo { margin: 0; font-size: var(--text-label); font-weight: var(--weight-bold); color: var(--fg); }
.cc-detalhe__acoes { display: grid; gap: var(--space-2); }
.cc-detalhe__acoes .na-btn { justify-content: flex-start; }
/* a senha provisória: o valor inteiro à vista (não corta com reticências), para ditar ou copiar */
.cc-senha-provisoria .na-celula-copia__texto { overflow: visible; white-space: normal; overflow-wrap: anywhere; font-size: var(--text-card-title); }