/* Central de Alertas — redesenho (18/09/2026): cartões que filtram, categorias em chips,
   lista em cartões agrupada por equipamento. Tons próprios (claro por padrão, escuro no
   data-theme="dark"); o resto vem dos tokens do design-system (--bg-card, --border, --text-*). */
:root { --ca-acc:#0e9f94; --ca-crit:#dc2626; --ca-warn:#b45309; --ca-ok:#15803d; --ca-in:#2563eb; --ca-vio:#7c3aed; }
html[data-theme="dark"] { --ca-acc:#35e0d0; --ca-crit:#f87171; --ca-warn:#fbbf24; --ca-ok:#4ade80; --ca-in:#60a5fa; --ca-vio:#a78bfa; }

.ca-oculto { display: none !important; }

/* Cartões do topo */
.ca-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.ca-kpi { --t: var(--ca-acc); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 11px 12px 10px 15px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
  font: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
button.ca-kpi { cursor: pointer; }
.ca-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--t); }
button.ca-kpi:hover { border-color: color-mix(in srgb, var(--t) 45%, var(--border)); transform: translateY(-1px); }
.ca-kpi.is-on { border-color: color-mix(in srgb, var(--t) 60%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--t) 22%, transparent); }
.ca-kpi:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }
.ca-kpi--crit { --t: var(--ca-crit); } .ca-kpi--warn { --t: var(--ca-warn); } .ca-kpi--in { --t: var(--ca-in); } .ca-kpi--mu { --t: var(--text-secondary); }
.ca-kpi__l { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.ca-kpi__v { font-family: 'Outfit', system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ca-kpi--crit .ca-kpi__v { color: var(--ca-crit); }
.ca-kpi__d { font-size: 11px; color: var(--text-secondary); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Categorias + modo */
.ca-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.ca-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; padding: 4px 11px; border-radius: 99px;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; }
.ca-chip b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ca-chip:hover { border-color: color-mix(in srgb, var(--ca-acc) 45%, var(--border)); }
.ca-chip.is-on { color: var(--ca-acc); border-color: color-mix(in srgb, var(--ca-acc) 55%, transparent); background: color-mix(in srgb, var(--ca-acc) 9%, transparent); }
.ca-chip.is-on b { color: var(--ca-acc); }
.ca-chip--crit { color: var(--ca-crit); border-color: color-mix(in srgb, var(--ca-crit) 35%, var(--border)); }
.ca-chip--warn { color: var(--ca-warn); border-color: color-mix(in srgb, var(--ca-warn) 35%, var(--border)); }
.ca-chip--crit i, .ca-chip--warn i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ca-chip--crit.is-on, .ca-chip--crit.is-on b { color: var(--ca-crit); border-color: color-mix(in srgb, var(--ca-crit) 60%, transparent); background: color-mix(in srgb, var(--ca-crit) 10%, transparent); }
.ca-chip--warn.is-on, .ca-chip--warn.is-on b { color: var(--ca-warn); border-color: color-mix(in srgb, var(--ca-warn) 60%, transparent); background: color-mix(in srgb, var(--ca-warn) 10%, transparent); }
.ca-cats__sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.ca-chip:focus-visible, .ca-seg button:focus-visible { outline: 2px solid var(--ca-acc); outline-offset: 2px; }
.ca-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ca-seg button { font: inherit; font-size: 12px; padding: 5px 11px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.ca-seg button + button { border-left: 1px solid var(--border); }
.ca-seg button[aria-pressed="true"] { color: var(--ca-acc); background: color-mix(in srgb, var(--ca-acc) 12%, transparent); font-weight: 600; }

/* Lista */
.ca-lista { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; }
.ca-carregando { color: var(--text-secondary); text-align: center; padding: 24px 0; font-size: 13px; }
.ca-grupo { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }
.ca-grupo b { color: var(--text-primary); font-family: ui-monospace, Menlo, monospace; }
.ca-grupo--velho { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--border-strong, var(--border)); border-radius: 12px; text-transform: none; letter-spacing: 0; font-size: 13px; flex-wrap: wrap; }
.ca-grupo--velho button { font: inherit; font-weight: 700; background: transparent; border: 0; color: var(--text-primary); cursor: pointer; padding: 0; }
.ca-grupo--velho span { font-weight: 400; font-size: 12px; color: var(--text-secondary); }
.ca-cartoes { display: flex; flex-direction: column; gap: 8px; }
.ca-al { --t: var(--ca-warn); display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); overflow: hidden; }
.ca-al--crit { --t: var(--ca-crit); } .ca-al--ok { --t: var(--ca-ok); } .ca-al--in { --t: var(--ca-in); }
.ca-al__s { background: var(--t); }
.ca-al--crit .ca-al__s { box-shadow: 0 0 12px color-mix(in srgb, var(--ca-crit) 60%, transparent); }
.ca-al--ok { opacity: .85; }
.ca-al--chegou { animation: caChegou 1.8s ease-out; }
@keyframes caChegou { from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ca-acc) 60%, transparent); } to { box-shadow: none; } }
.ca-al__c { padding: 10px 0; min-width: 0; }
.ca-al__t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ca-al__t b { font-size: 13.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-al__c p { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }
.ca-mono { font-family: ui-monospace, Menlo, monospace; }
.ca-cnt { flex: none; font-size: 11px; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 99px; padding: 0 7px; }
.ca-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ca-pill { --t: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 1px 9px; border-radius: 99px;
  color: var(--t); background: color-mix(in srgb, var(--t) 11%, transparent); white-space: nowrap; }
.ca-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ca-pill--crit { --t: var(--ca-crit); } .ca-pill--warn { --t: var(--ca-warn); } .ca-pill--ok { --t: var(--ca-ok); } .ca-pill--in { --t: var(--ca-in); } .ca-pill--novo { --t: var(--ca-acc); }
.ca-rel { margin-top: 7px; font-size: 12px; color: var(--ca-warn); }
.ca-rel b { color: var(--text-primary); font-weight: 600; }
.ca-sub { margin-top: 6px; font-size: 12px; }
.ca-sub summary { cursor: pointer; color: var(--ca-acc); font-weight: 600; list-style: none; }
.ca-sub summary::-webkit-details-marker { display: none; }
.ca-sub ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ca-sub li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-secondary); }
.ca-sub time { font-family: ui-monospace, Menlo, monospace; font-size: 11px; opacity: .8; }
.ca-al__r { padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
.ca-tm { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.ca-vendo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ca-acc); font-weight: 600; }
.ca-vendo__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ca-acc); }
.ca-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ca-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.ca-btn:hover { border-color: color-mix(in srgb, var(--ca-acc) 45%, var(--border)); }
.ca-btn:focus-visible { outline: 2px solid var(--ca-acc); outline-offset: 2px; }
.ca-btn:disabled { opacity: .5; cursor: wait; }
.ca-btn--icone { padding: 4px 6px; }
.ca-menu { position: fixed; z-index: 95; min-width: 230px; padding: 5px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); box-shadow: 0 14px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; }
.ca-menu button { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 13px; border-radius: 8px; cursor: pointer; text-align: left; }
.ca-menu button:hover, .ca-menu button:focus-visible { background: var(--bg-hover); outline: none; }

@media (max-width: 1100px) { .ca-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ca-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-al { grid-template-columns: 4px minmax(0, 1fr); }
  .ca-al__r { grid-column: 2; align-items: flex-start; padding: 0 12px 10px 0; }
  .ca-acts { justify-content: flex-start; }
  .ca-al__t b { white-space: normal; }
  .ca-seg { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ca-kpi, .ca-al--chegou { transition: none; animation: none; } }

/* Celular (18/09/2026): filtros recolhidos, cartão com faixa inteira e logo acima do título */
.ca-filtros-btn { display: none; }
@media (max-width: 760px) {
  .page-header .btn.ghost[onclick="toggleTheme()"] { display: none; }
  .page-header .row { flex-wrap: wrap; gap: 8px; }
  #btnTvMode { flex-direction: row; }
  .filter-card { padding: 10px !important; }
  .ca-filtros-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; margin: 2px 0 10px;
    border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text-primary); cursor: pointer; }
  .ca-filtros-btn b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--ca-acc); color: #042523; font-size: 11px; display: inline-grid; place-items: center; }
  .ca-filtros-btn b.hidden { display: none; }
  .ca-filtros-btn:focus-visible { outline: 2px solid var(--ca-acc); outline-offset: 2px; }
  #caFiltros:not(.is-aberto) { display: none; }
  .ca-al__s { grid-row: 1 / span 2; }
  .ca-al__t { flex-wrap: wrap; row-gap: 4px; }
  .ca-al__t b { flex: 1 1 100%; font-size: 14px; line-height: 1.35; }
  .ca-al__c { padding: 12px 12px 0 0; }
  .ca-kpi__v { font-size: 22px; }
  .ca-kpis { gap: 8px; }
  .ca-cats { gap: 5px; }
  .ca-cats__sep { display: none; }
  .ca-acts { flex-wrap: nowrap; gap: 5px; }
  .ca-btn:not(.ca-btn--icone) svg, .ca-btn:not(.ca-btn--icone) i[data-lucide] { display: none; }
  .ca-btn { padding: 5px 9px; }
}

/* ── Ocorrências de queda (06/10/2026) ───────────────────────────────────────
   A Central contava alertas; passou a contar ocorrências. Medido no parque: 289
   alertas ativos, 33 quedas — e essas 33 são 20 ocorrências, porque dez pontos
   caem em bloco (MASTER + SLAVE + CORP do mesmo local, no mesmo minuto). O que
   caiu ganha o topo e um cartão por PONTO, não por equipamento. */
.ca-grupo--queda { color: var(--red, #ef4444); }
.ca-grupo--queda span { color: var(--text-secondary); font-weight: 500; }
.ca-ocs { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.ca-oc {
    border: 1px solid var(--border); border-left: 3px solid var(--ca-oc, #eab308);
    border-radius: 13px; background: var(--bg-card); padding: 13px 15px;
}
.ca-oc--crit { --ca-oc: #ef4444; } .ca-oc--alto { --ca-oc: #f97316; } .ca-oc--un { --ca-oc: #eab308; }
.ca-oc header { display: flex; align-items: flex-start; gap: 14px; }
.ca-oc__t { flex: 1; min-width: 0; }
.ca-oc h3 { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.25; }
.ca-oc__t p { font-size: 11.5px; color: var(--text-secondary); margin: 3px 0 0; }
.ca-oc__cli { font-size: 11px; color: var(--text-secondary); opacity: .8; margin-top: 4px; }
.ca-oc__n { text-align: right; flex: none; }
.ca-oc__n b { display: block; font-size: 21px; font-weight: 800; line-height: 1; color: var(--ca-oc, #eab308); }
.ca-oc__n span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 700; color: var(--text-secondary); margin-top: 3px; }
.ca-oc__hosts { margin: 10px 0; border-top: 1px solid var(--border); padding-top: 8px; }
.ca-oc__h { display: grid; grid-template-columns: 8px minmax(0, 1fr) 120px minmax(0, 1fr);
    gap: 10px; align-items: center; padding: 3px 0; font-size: 12px; }
.ca-oc__h i { width: 6px; height: 6px; border-radius: 999px; background: var(--ca-oc, #eab308); }
.ca-oc__h b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-oc__h em { font-style: normal; font-size: 11px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-oc footer { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ca-oc__sem { margin-left: auto; font-size: 11px; color: #f59e0b; }
.ca-oc__vendo { margin-left: auto; font-size: 11px; color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
    .ca-oc__h { grid-template-columns: 8px 1fr; }
    .ca-oc__h .ca-mono, .ca-oc__h em { grid-column: 2; font-size: 10.5px; }
    .ca-oc__sem, .ca-oc__vendo { margin-left: 0; flex-basis: 100%; }
}

/* ── Panorama: a onda e quem está sem serviço (06/10/2026) ───────────────────
   Duas perguntas que a lista por alerta nunca respondeu: «caiu muita coisa
   junto?» (pico de quedas iniciadas na hora = enlace/energia, não equipamento
   isolado) e «quem está sem serviço agora?» (o corte por contrato). */
/* `align-items: start`: sem isso o bloco da onda esticava até a altura da lista de
   contratos e ficava com um vazio embaixo. */
.ca-pano { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin: 4px 0 16px; align-items: start; }
/* `min-width: 0`: item de grid não encolhe abaixo do próprio min-content, e o cabeçalho
   («Está em onda?» + «1557 quedas em 24 h» lado a lado) empurrava o bloco para 485 px
   dentro de uma tela de 390. */
.ca-pano__bl { border: 1px solid var(--border); border-radius: 13px; background: var(--bg-card);
    padding: 12px 15px; min-width: 0; }
.ca-pano__k { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-secondary); display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px; flex-wrap: wrap; }
.ca-pano__k span { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11px; opacity: .85; }
.ca-pano__n { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; margin: 8px 0 0; }
.ca-onda { display: flex; align-items: flex-end; gap: 2px; height: 56px; margin: 10px 0 3px; min-width: 0; }
.ca-onda i { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--text-secondary) 38%, transparent); }
.ca-onda i.ca-onda--pico { background: var(--red, #ef4444); }
.ca-onda i.ca-onda--alto { background: #f97316; }
.ca-onda__x { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-secondary);
    font-family: ui-monospace, Menlo, monospace; opacity: .8; }
.ca-cli { margin-top: 8px; }
.ca-cli { min-width: 0; }
.ca-cli button { display: flex; width: 100%; min-width: 0; align-items: baseline; gap: 10px; padding: 6px 0; text-align: left;
    background: none; border: 0; border-bottom: 1px solid var(--border); color: inherit; font: inherit;
    font-size: 12.5px; cursor: pointer; }
.ca-cli button:last-child { border-bottom: 0; }
.ca-cli button:hover b, .ca-cli button:hover span { text-decoration: underline; }
.ca-cli b { font-size: 15px; font-weight: 800; min-width: 24px; color: var(--red, #ef4444); }
.ca-cli span { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .ca-pano { grid-template-columns: 1fr; } }