/*
 * CUBO MÍDIA — tema dos painéis (admin e anunciante), no padrão do DESIGN.md.
 *
 * Escrito à mão e servido estático: o projeto não tem etapa de build (sem Node), no mesmo
 * padrão dos demais sistemas Hidroall. As regras ficam fora de cascade layers, então
 * prevalecem sobre o CSS do Filament (que é todo "layered") sem precisar de !important.
 *
 * Regras da marca:
 *   - fundo branco, texto quase preto (#0a0b0d), cinzas neutros e frios;
 *   - azul (#0052ff) é a ÚNICA cor de ação, sempre com texto branco, e aparece pouco;
 *   - verde/vermelho só como cor de texto ou indicador, nunca como fundo de botão;
 *   - superfícies planas com linha fina (1 px); uma única sombra suave, só ao passar o mouse;
 *   - botões, selos, abas e busca em pílula; cartões com raio de 24 px; campos com 12 px;
 *   - títulos grandes com peso 400 e espaçamento negativo; números com algarismos tabulares.
 *
 * As mesmas cores estão em App\Support\Marca (PHP) e nos e-mails. Classe cubo-* nova usada
 * numa view precisa de regra aqui — tests/Feature/Design/IdentidadeVisualTest.php falha se faltar.
 */

/* ======================================================================
   1. Tokens
   ====================================================================== */
:root {
    --cubo-azul: #0052ff;
    --cubo-azul-ativo: #003ecc;
    --cubo-azul-desativado: #a8b8cc;
    --cubo-tinta: #0a0b0d;
    --cubo-escuro: #0a0b0d;
    --cubo-escuro-elevado: #16181c;

    --cubo-fundo: #ffffff;
    --cubo-superficie: #ffffff;
    --cubo-superficie-suave: #f7f7f7;
    --cubo-superficie-forte: #eef0f3;
    --cubo-linha: #dee1e6;
    --cubo-linha-suave: #eef0f3;
    --cubo-texto: #0a0b0d;
    --cubo-texto-corpo: #5b616e;
    --cubo-texto-suave: #7c828a;
    --cubo-alta: #05b169;
    --cubo-baixa: #cf202f;

    --cubo-raio-cartao: 24px;
    --cubo-raio-medio: 16px;
    --cubo-raio-campo: 12px;
    --cubo-raio-linha: 8px;
    --cubo-pilula: 100px;
    --cubo-sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.04);
    --cubo-anel-foco: 0 0 0 2px var(--cubo-azul);
    --cubo-transicao: 160ms ease;
}

.dark {
    --cubo-fundo: #0a0b0d;
    --cubo-superficie: #16181c;
    --cubo-superficie-suave: #121417;
    --cubo-superficie-forte: #1f2228;
    --cubo-linha: rgba(255, 255, 255, 0.10);
    --cubo-linha-suave: rgba(255, 255, 255, 0.06);
    --cubo-texto: #ffffff;
    --cubo-texto-corpo: #a8acb3;
    --cubo-texto-suave: #a8acb3;
    --cubo-sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ======================================================================
   2. Base
   ====================================================================== */
.fi-body {
    background-color: var(--cubo-fundo);
    color: var(--cubo-texto);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.fi-main {
    padding-block: 2rem 4rem;
}

::selection {
    background: rgba(0, 82, 255, 0.16);
    color: var(--cubo-tinta);
}

/* Números alinhados em colunas (valores, contagens, datas). */
.fi-ta-cell,
.fi-wi-stats-overview-stat-value,
.fi-in-text {
    font-variant-numeric: tabular-nums;
}

/* ======================================================================
   3. Barra superior (64 px, branca, linha fina)
   ====================================================================== */
.fi-topbar {
    min-height: 4rem;
    background-color: var(--cubo-fundo);
    border-bottom: 1px solid var(--cubo-linha);
    box-shadow: none;
}

/* Busca global em pílula cinza. */
.fi-topbar .fi-global-search-field .fi-input-wrp {
    background-color: var(--cubo-superficie-forte);
    border-radius: var(--cubo-pilula);
    --tw-ring-color: transparent;
}

/* ======================================================================
   4. Menu lateral
   ====================================================================== */
.fi-sidebar {
    background-color: var(--cubo-fundo);
    border-right: 1px solid var(--cubo-linha);
}

.fi-sidebar-header {
    border-bottom: 1px solid var(--cubo-linha);
    box-shadow: none;
}

.fi-sidebar-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--cubo-texto-suave);
}

.fi-sidebar-item-btn {
    border-radius: var(--cubo-pilula);
    transition: background-color var(--cubo-transicao), color var(--cubo-transicao);
}

.fi-sidebar-item-btn:hover {
    background-color: var(--cubo-superficie-suave);
}

.fi-sidebar-item-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--cubo-superficie-forte);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--cubo-texto);
    font-weight: 600;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--cubo-azul);
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #ffffff;
}

/* ======================================================================
   5. Cabeçalho da página: título editorial (peso 400, espaçamento negativo)
   ====================================================================== */
.fi-header-heading {
    color: var(--cubo-texto);
    font-size: 2rem;
    line-height: 1.13;
    font-weight: 400;
    letter-spacing: -0.4px;
}

.fi-header-subheading {
    color: var(--cubo-texto-corpo);
}

.fi-breadcrumbs {
    font-size: 0.8125rem;
}

/* Navegação interna dos clusters (ex.: Controle de ativos): trilho cinza em pílula ocupando a
   linha toda, abas de largura igual e a aba atual em branco. Sem espaço, rola na horizontal. */
.fi-page-sub-navigation-tabs {
    width: 100%;
    margin-inline: 0;
    padding: 4px;
    gap: 4px;
    background-color: var(--cubo-superficie-forte);
    border-radius: var(--cubo-pilula);
    box-shadow: none;
    --tw-ring-color: transparent;
}

.fi-page-sub-navigation-tabs > .fi-tabs-item {
    flex: 1 1 0;
    justify-content: center;
    border-radius: var(--cubo-pilula);
}

.fi-page-sub-navigation-tabs > .fi-tabs-item:hover {
    background-color: rgba(10, 11, 13, 0.04);
}

.fi-page-sub-navigation-tabs > .fi-tabs-item.fi-active {
    background-color: var(--cubo-superficie);
    box-shadow: var(--cubo-sombra-suave);
}

.fi-page-sub-navigation-tabs > .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-page-sub-navigation-tabs > .fi-tabs-item.fi-active .fi-icon {
    color: var(--cubo-texto);
    font-weight: 600;
}

/* Abas em pílula dentro da página (ex.: períodos na pré-visualização): mesmo trilho cinza,
   na largura do conteúdo. */
.cubo-abas {
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    gap: 4px;
    background-color: var(--cubo-superficie-forte);
    border-radius: var(--cubo-pilula);
    box-shadow: none;
    --tw-ring-color: transparent;
}

.cubo-abas > .fi-tabs-item {
    border-radius: var(--cubo-pilula);
}

.cubo-abas > .fi-tabs-item.fi-active {
    background-color: var(--cubo-superficie);
    box-shadow: var(--cubo-sombra-suave);
}

.cubo-abas > .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--cubo-texto);
    font-weight: 600;
}

/* Telas de notebook (1280–1440 px com o menu lateral aberto): abas mais justas, sem rolagem. */
@media (max-width: 1439px) {
    .fi-page-sub-navigation-tabs > .fi-tabs-item {
        padding-inline: 0.5rem;
        column-gap: 0.375rem;
    }
}

/* ======================================================================
   6. Cartões: seções, widgets, estatísticas e tabelas (planos, linha fina, raio 24)
   ====================================================================== */
.fi-section:not(.fi-section-not-contained),
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border-radius: var(--cubo-raio-cartao);
    background-color: var(--cubo-superficie);
    --tw-shadow: 0 0 #0000;
    --tw-ring-color: var(--cubo-linha);
}

.fi-section-header-heading {
    color: var(--cubo-texto);
    font-size: 1.125rem;
    font-weight: 600;
}

.fi-section-header-description {
    color: var(--cubo-texto-corpo);
}

.fi-wi-stats-overview-stat {
    transition: box-shadow var(--cubo-transicao);
}

.fi-wi-stats-overview-stat:hover {
    --tw-shadow: var(--cubo-sombra-suave);
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem;
    color: var(--cubo-texto-corpo);
}

.fi-wi-stats-overview-stat-value {
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--cubo-texto);
}

/* ======================================================================
   7. Tabelas
   ====================================================================== */
.fi-ta-ctn {
    overflow: hidden;
}

.fi-ta-header-cell {
    background-color: var(--cubo-superficie);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cubo-texto-suave);
}

.fi-ta-row {
    transition: background-color var(--cubo-transicao);
}

.fi-ta-row:hover {
    background-color: var(--cubo-superficie-suave);
}

/* ======================================================================
   8. Formulários (o foco usa o anel azul do próprio Filament)
   ====================================================================== */
.fi-input-wrp {
    border-radius: var(--cubo-raio-campo);
}

.fi-fo-field-label-content {
    font-weight: 600;
    color: var(--cubo-texto);
}

/* Grupo de opções com rótulo próprio (Fieldset sem moldura, ex.: períodos do dia): a legenda tem
   o peso dos rótulos de campo e as opções ficam na altura do centro dos campos vizinhos. */
.fi-fieldset > legend {
    font-weight: 600;
}

.fi-fieldset.fi-fieldset-not-contained {
    padding-top: calc(var(--spacing) * 3);
}

/* Interruptor com o rótulo em cima (inline(false)): ocupa a altura de um campo (36 px) para
   ficar no centro dos campos vizinhos da mesma linha. */
.fi-fo-field-content-col > .fi-toggle {
    margin-block: calc(var(--spacing) * 1.5);
}

/* ======================================================================
   9. Botões: pílula; principal azul com texto branco; secundário cinza
   ====================================================================== */
.fi-btn {
    border-radius: var(--cubo-pilula);
    font-weight: 600;
    transition: background-color var(--cubo-transicao), color var(--cubo-transicao);
}

.fi-btn.fi-color-primary:not(.fi-outlined) {
    background-color: var(--cubo-azul);
    color: #ffffff;
}

.fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-btn.fi-color-primary:not(.fi-outlined):active {
    background-color: var(--cubo-azul-ativo);
}

.fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon {
    color: #ffffff;
}

.fi-btn.fi-color-primary:disabled {
    background-color: var(--cubo-azul-desativado);
}

/* Botão secundário (cinza do Filament, ex.: Exportar, Cancelar): pílula cinza sem contorno. */
.fi-btn:not(.fi-color):not(.fi-outlined) {
    background-color: var(--cubo-superficie-forte);
    color: var(--cubo-texto);
    --tw-ring-color: transparent;
    --tw-shadow: 0 0 #0000;
}

.fi-btn:not(.fi-color):not(.fi-outlined):hover {
    background-color: var(--cubo-linha);
}

/* Botões de alternância (ToggleButtons): só a opção escolhida fica azul; as demais, cinza. */
.fi-fo-toggle-buttons-input:not(:checked) + .fi-btn.fi-color-primary {
    background-color: var(--cubo-superficie-forte);
    color: var(--cubo-texto);
    --tw-ring-color: transparent;
}

.fi-fo-toggle-buttons-input:not(:checked) + .fi-btn.fi-color-primary .fi-icon {
    color: var(--cubo-texto-corpo);
}

.fi-btn:focus-visible {
    box-shadow: var(--cubo-anel-foco);
    outline: none;
}

/* Link de ação (sem fundo) na cor da marca. */
.fi-link.fi-color-primary {
    color: var(--cubo-azul);
}

/* ======================================================================
   10. Selos, modais e menus suspensos
   ====================================================================== */
.fi-badge {
    border-radius: var(--cubo-pilula);
    font-weight: 600;
}

.fi-modal-window {
    border-radius: var(--cubo-raio-cartao);
}

.fi-dropdown-panel {
    border-radius: var(--cubo-raio-medio);
    box-shadow: var(--cubo-sombra-suave), 0 0 0 1px var(--cubo-linha);
}

/* ======================================================================
   11. Login, recuperação de senha e verificação: faixa escura com o cartão branco por cima
   ====================================================================== */
.fi-simple-layout {
    background-color: var(--cubo-escuro);
}

.fi-simple-main {
    background-color: var(--cubo-superficie);
    border-radius: var(--cubo-raio-cartao);
    --tw-shadow: 0 0 #0000;
    --tw-ring-color: transparent;
}

.dark .fi-simple-main {
    --tw-ring-color: var(--cubo-linha);
}

.fi-simple-header .fi-logo {
    height: 2.5rem;
}

.fi-simple-header-heading {
    font-size: 2rem;
    line-height: 1.13;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--cubo-texto);
}

.fi-simple-header-subheading {
    color: var(--cubo-texto-corpo);
}

/* ======================================================================
   12. Componentes das telas customizadas (cubo-*)
   ====================================================================== */

/* Cards clicáveis (ex.: fluxo de caixa) */
.cubo-grade-cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) { .cubo-grade-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cubo-grade-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cubo-card {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: inherit;
    background: var(--cubo-superficie);
    border: 1px solid var(--cubo-linha);
    border-radius: var(--cubo-raio-cartao);
    padding: 1.5rem 1.75rem;
    transition: box-shadow var(--cubo-transicao), border-color var(--cubo-transicao);
}
.cubo-card:hover { box-shadow: var(--cubo-sombra-suave); }
.cubo-card:focus-visible { outline: none; box-shadow: var(--cubo-anel-foco); }
.cubo-card.is-ativo { border-color: var(--cubo-azul); box-shadow: inset 0 0 0 1px var(--cubo-azul); }
.cubo-card__rotulo { font-size: 0.8125rem; font-weight: 600; color: var(--cubo-texto-corpo); }
.cubo-card__valor { margin-top: 0.5rem; font-size: 2rem; font-weight: 400; line-height: 1.13; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; color: var(--cubo-texto); }
.cubo-card__valor--perigo { color: var(--cubo-baixa); }
.cubo-card__valor--sucesso { color: var(--cubo-alta); }
.cubo-card__dica { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--cubo-texto-suave); }

/* Barras por faixa */
.cubo-barras { display: flex; flex-direction: column; gap: 1rem; }
.cubo-barra { display: block; width: 100%; padding: 0; text-align: left; color: inherit; background: none; border: 0; border-radius: var(--cubo-raio-linha); cursor: pointer; }
.cubo-barra:focus-visible { outline: none; box-shadow: var(--cubo-anel-foco); }
.cubo-barra__linha { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cubo-barra__trilho { margin-top: 0.4rem; height: 8px; width: 100%; overflow: hidden; border-radius: var(--cubo-pilula); background: var(--cubo-superficie-forte); }
.cubo-barra__preenchimento { height: 100%; border-radius: var(--cubo-pilula); background: var(--cubo-azul); transition: width 400ms ease; }
.cubo-barra__preenchimento--perigo { background: var(--cubo-baixa); }

/* Texto e tabelas simples */
.cubo-nota { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.5; color: var(--cubo-texto-suave); }
.cubo-suave { color: var(--cubo-texto-corpo); }
.cubo-tabela { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cubo-tabela th { padding: 0 0.5rem 0.6rem; text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--cubo-texto-suave); }
.cubo-tabela td { padding: 0.75rem 0.5rem; border-top: 1px solid var(--cubo-linha); }
.cubo-tabela tbody tr { transition: background-color var(--cubo-transicao); }
.cubo-tabela tbody tr:hover { background-color: var(--cubo-superficie-suave); }
.cubo-tabela tfoot td { font-weight: 600; border-top: 1px solid var(--cubo-tinta); }
.cubo-tabela .cubo-direita { text-align: right; font-variant-numeric: tabular-nums; }
.cubo-tabela tr.is-ativo td { font-weight: 600; color: var(--cubo-azul); }
/* Alça de arrastar (lista ordenável que salva ao soltar). */
.cubo-alca { width: 1.75rem; color: var(--cubo-texto-suave); cursor: grab; touch-action: none; }
.cubo-alca:active { cursor: grabbing; }
.cubo-alca .fi-icon { width: 1rem; height: 1rem; }
.cubo-oculto { display: none !important; } /* ex.: botão "reordenar" das tabelas que arrastam pela alça */
span.cubo-alca { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--cubo-raio-linha); }
span.cubo-alca:hover { background-color: var(--cubo-superficie-forte); color: var(--cubo-texto); }
.fi-ta-row.fi-sortable-ghost { background-color: var(--cubo-superficie-forte); }
.cubo-tabela tr.fi-sortable-ghost td { background-color: var(--cubo-superficie-forte); }

/* Pré-visualização da sequência (TV simulada) */
.cubo-previa { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .cubo-previa { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.cubo-tv {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: #000;
    border: 10px solid var(--cubo-escuro-elevado);
    border-radius: var(--cubo-raio-medio);
}
/* TV vertical (retrato, 9:16): a altura é que manda, para caber na tela; centralizada. */
.cubo-tv--vertical { aspect-ratio: 9 / 16; width: auto; height: min(62vh, 560px); margin-inline: auto; }
.cubo-tv img, .cubo-tv video { display: block; width: 100%; height: 100%; object-fit: contain; }
.cubo-tv--esticada img, .cubo-tv--esticada video { object-fit: fill; } /* igual ao player da TV */
.cubo-tv__legenda { margin-top: 0.75rem; text-align: center; font-size: 0.875rem; color: var(--cubo-texto-corpo); }
.cubo-tv__vazia { display: flex; height: 100%; align-items: center; justify-content: center; padding: 1rem; text-align: center; font-size: 0.8125rem; color: #a8acb3; }
.cubo-tv-moldura { display: flex; flex-direction: column; align-items: center; }
.cubo-tv-moldura .cubo-tv { border-radius: var(--cubo-raio-campo); }
.cubo-tv-pe { width: 32%; height: 10px; margin-top: 2px; border-radius: 0 0 8px 8px; background: var(--cubo-escuro-elevado); }

/* Anotações de cobrança */
.cubo-anotacoes { display: flex; flex-direction: column; gap: 0.75rem; max-height: 260px; overflow-y: auto; }
.cubo-anotacao { padding: 0.75rem 1rem; font-size: 0.875rem; background: var(--cubo-superficie-suave); border: 1px solid var(--cubo-linha-suave); border-radius: var(--cubo-raio-campo); }
.cubo-anotacao__meta { margin-top: 0.25rem; font-size: 0.75rem; color: var(--cubo-texto-suave); }

/* Controle de ativos: QR da etiqueta na ficha, miniatura da foto e relatórios */
.cubo-qr { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.cubo-qr__codigo { width: 148px; height: 148px; padding: 8px; background: #fff; border: 1px solid var(--cubo-linha); border-radius: var(--cubo-raio-medio); line-height: 0; }
.cubo-qr__codigo svg { width: 100%; height: 100%; }
.cubo-qr__codigo svg path { fill: var(--cubo-tinta); }
.cubo-qr__etiqueta { margin: 0; font: 500 1rem/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--cubo-texto); }
.cubo-qr__imprimir { font-size: 0.875rem; font-weight: 600; color: var(--cubo-azul); text-decoration: none; }
.cubo-qr__imprimir:hover { color: var(--cubo-azul-ativo); }
.cubo-qr__imprimir:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--cubo-anel-foco); }
.cubo-miniatura { object-fit: cover; border-radius: var(--cubo-raio-linha); border: 1px solid var(--cubo-linha); }
.cubo-relatorio { overflow-x: auto; }
.cubo-relatorio .cubo-tabela td { vertical-align: top; }
.cubo-relatorio__vazio { padding: 1.5rem 0.5rem; text-align: center; color: var(--cubo-texto-corpo); }
.cubo-relatorio__aviso { margin-top: 1rem; font-size: 0.8125rem; color: var(--cubo-texto-suave); }

/* Mapa das localidades (Leaflet). z-index 0 cria um contexto próprio: os painéis do Leaflet
   (z-index 400+) não passam por cima da barra superior nem dos menus do Filament. */
.cubo-mapa { position: relative; z-index: 0; }
.cubo-mapa__area { height: min(70vh, 640px); min-height: 360px; border: 1px solid var(--cubo-linha); border-radius: var(--cubo-raio-cartao); overflow: hidden; background: var(--cubo-superficie-forte); }
.cubo-mapa--formulario .cubo-mapa__area { height: 340px; min-height: 280px; border-radius: var(--cubo-raio-medio); }
.cubo-mapa__dica { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--cubo-texto-suave); }
.cubo-mapa .leaflet-container { font-family: inherit; }
.cubo-mapa-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; font-size: 0.875rem; }
.cubo-mapa-legenda__item { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--cubo-texto); }
.cubo-mapa-legenda__ponto { width: 0.85rem; height: 0.85rem; border-radius: 9999px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--cubo-linha); }
.cubo-mapa-legenda__ponto--online { background: var(--cubo-alta); }
.cubo-mapa-legenda__ponto--offline { background: var(--cubo-baixa); }
.cubo-mapa-legenda__ponto--desativada { background: #a8acb3; }
.cubo-mapa-pendentes { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; }
.cubo-mapa-pendentes__link { font-weight: 600; color: var(--cubo-azul); text-decoration: none; }
.cubo-mapa-pendentes__link:hover { color: var(--cubo-azul-ativo); }

/* Popup do marcador (montado em public/js/mapa-localidades.js). */
.cubo-mapa .leaflet-popup-content-wrapper { border-radius: var(--cubo-raio-medio); box-shadow: var(--cubo-sombra-suave), 0 0 0 1px var(--cubo-linha); }
.cubo-mapa .leaflet-popup-content { margin: 14px 16px; }
.cubo-mapa-popup { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; line-height: 1.45; color: var(--cubo-texto); }
.cubo-mapa-popup__titulo { font-size: 0.9375rem; font-weight: 600; color: var(--cubo-texto) !important; text-decoration: none; }
.cubo-mapa-popup__titulo:hover { color: var(--cubo-azul) !important; }
.cubo-mapa-popup__cidade { color: var(--cubo-texto-suave); }
.cubo-mapa-popup__situacao { font-weight: 600; }
.cubo-mapa-popup__situacao--online { color: var(--cubo-alta); }
.cubo-mapa-popup__situacao--offline { color: var(--cubo-baixa); }
.cubo-mapa-popup__situacao--desativada { color: var(--cubo-texto-suave); }
.cubo-mapa-popup__rotulo { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--cubo-texto-suave); }
.cubo-mapa-popup__vazio { margin: 0.5rem 0 0 !important; color: var(--cubo-texto-suave); }
.cubo-mapa-popup__ativos { margin: 0.15rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; max-height: 220px; overflow-y: auto; }
.cubo-mapa-popup__ativos li { display: flex; flex-direction: column; padding: 0.35rem 0; border-top: 1px solid var(--cubo-linha-suave); }
.cubo-mapa-popup__etiqueta { font: 600 0.8125rem/1.3 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--cubo-azul) !important; text-decoration: none; }
.cubo-mapa-popup__etiqueta:hover { color: var(--cubo-azul-ativo) !important; text-decoration: underline; }
.cubo-mapa-popup__descricao { color: var(--cubo-texto-corpo); }

/* ======================================================================
   13. Acessibilidade e impressão
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
    .fi-btn,
    .fi-wi-stats-overview-stat,
    .cubo-card,
    .cubo-barra__preenchimento { transition: none; }
}

@media print {
    .fi-topbar, .fi-sidebar, .fi-header-actions-ctn { display: none !important; }
    .fi-body { background: #fff; }
}