/* ===== CORES SIRINEO ===== */
:root {
    --cinza-chumbo: #4a4a4a;
    --cinza-chumbo-claro: #6b6b6b;
    --cinza-chumbo-escuro: #2d2d2d;
    --amarelo-dourado: #d4a843;
    --amarelo-dourado-claro: #e8c85a;
    --amarelo-dourado-escuro: #b8922f;
    --verde: #2e7d32;
    --verde-claro: #43a047;
    --verde-escuro: #1b5e20;
    --branco: #ffffff;
    --branco-fumaca: #f5f5f5;
    --cinza-claro: #e0e0e0;
    
    --primary: #2d2d2d;
    --secondary: #4a4a4a;
    --accent: #d4a843;
    --accent-hover: #e8c85a;
    --success: #2e7d32;
    --text-primary: #f5f5f5;
    --text-secondary: #bdbdbd;
    --text-muted: #9e9e9e;
    --border-color: #4a4a4a;
    --bg-card: #3d3d3d;
    --bg-hover: #555555;
    
    --sidebar-width: 260px;
    --header-height: 64px;
    --radius: 12px;
    --transition: 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--primary);
    color: var(--text-primary);
    height: 100vh;
    /* v1.9.8: no celular, "100vh" é calculado com a barra de
       endereço do navegador ESCONDIDA — quando ela está visível
       (caso normal ao abrir o site), 100vh fica maior que a área
       realmente visível na tela, e tudo que estiver "colado" no
       fim da página (ex: o botão "Sobre" no rodapé do menu) fica
       cortado atrás da barra, sem como rolar até ele (por causa do
       overflow:hidden abaixo). "100dvh" resolve isso porque se
       ajusta em tempo real ao espaço que está realmente visível.
       Navegadores antigos que não conhecem "dvh" simplesmente
       ignoram esta linha e continuam usando o 100vh de cima. */
    height: 100dvh;
    overflow: hidden;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--cinza-chumbo);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--amarelo-dourado);
}

/* ===== LOGIN PAGE ===== */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cinza-chumbo-escuro);
    min-height: 100vh;
    overflow: hidden;
}

.login-container {
    display: flex;
    width: 100%;
    max-width: 1100px;
    height: 90vh;
    max-height: 700px;
    background: var(--cinza-chumbo-escuro);
    border-radius: 24px;
    border: 1px solid var(--cinza-chumbo);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}

.login-box {
    flex: 1;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 380px;
    background: var(--cinza-chumbo-escuro);
    /* v1.8.3: .login-container tem altura fixa (90vh/max 700px) e
       overflow:hidden — pensado pro form de login, que é curto. Os
       forms de cadastro/completar-cadastro têm bem mais campos, e ao
       aparecer a mensagem de erro (2 linhas) o conteúdo passava da
       altura do container: o excesso ficava cortado pelo overflow:
       hidden do pai, deixando o botão de enviar fora da área visível
       e IMPOSSÍVEL de clicar. Com overflow-y:auto aqui, quando o
       conteúdo não cabe, rola dentro da própria caixa — sem afetar o
       login normal (form curto, nunca precisa rolar).
    */
    overflow-y: auto;
}

.login-header {
    margin-bottom: 32px;
    text-align: center;
}

.login-logo {
    width: 300px;
    height: auto;
    object-fit: contain;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group label i {
    margin-right: 8px;
    color: var(--amarelo-dourado);
    width: 16px;
}

.form-group input {
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--cinza-chumbo);
    background: var(--cinza-chumbo-escuro);
    color: var(--text-primary);
    font-size: 14px;
    transition: var(--transition);
    font-family: 'Inter', sans-serif;
}

.form-group input:focus {
    outline: none;
    border-color: var(--amarelo-dourado);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}

.form-group input::placeholder {
    color: var(--text-muted);
}

/* ===== CAMPO DE SENHA COM "OLHINHO" (v1.8.3) =====
   Envolve o input de senha (login e telas de cadastro) num wrapper
   posicionado, com um botão de mostrar/ocultar sobreposto à direita.
   O input ganha padding-right extra pra não passar por baixo do
   ícone. */
.password-field-wrap {
    position: relative;
    display: flex;
}

.password-field-wrap input {
    width: 100%;
    padding-right: 44px;
}

.toggle-senha-visibilidade {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    transition: var(--transition);
}

.toggle-senha-visibilidade:hover {
    color: var(--amarelo-dourado);
    background: rgba(212, 168, 67, 0.1);
}

.login-error {
    display: none;
    color: #f44336;
    font-size: 13px;
    text-align: center;
    padding: 8px;
    background: rgba(244, 67, 54, 0.1);
    border-radius: 8px;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

/* v1.9.28: campo "isca" contra robô de preenchimento automático (ver
   login.html) — precisa estar fora da tela de um jeito que só um
   humano de verdade nunca alcança (nem clicando nem via teclado), mas
   que um robô que varre e preenche todo <input> do formulário ainda
   "vê" e preenche. display:none/visibility:hidden não servem porque
   muitos robôs já ignoram campos assim de propósito. */
.campo-isca-bot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* v1.9.28: captcha simples (continha matemática) na tela de login. */
.captcha-linha {
    display: flex;
    gap: 8px;
}
.captcha-linha input {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--cinza-chumbo);
    background: var(--cinza-chumbo-escuro);
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}
.captcha-linha input:focus {
    outline: none;
    border-color: var(--amarelo-dourado);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}
#captcha-refresh {
    width: 44px;
    flex-shrink: 0;
    background: var(--cinza-chumbo-escuro);
    border: 1px solid var(--cinza-chumbo);
    color: var(--text-secondary);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
}
#captcha-refresh:hover {
    color: var(--amarelo-dourado);
    border-color: var(--amarelo-dourado);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    accent-color: var(--amarelo-dourado);
    width: 16px;
    height: 16px;
}

.forgot-password {
    color: var(--amarelo-dourado);
    text-decoration: none;
    font-size: 13px;
}

.forgot-password:hover {
    text-decoration: underline;
    color: var(--amarelo-dourado-claro);
}

.btn-login {
    padding: 14px;
    border: none;
    border-radius: var(--radius);
    background: var(--amarelo-dourado);
    color: var(--cinza-chumbo-escuro);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.btn-login:hover {
    background: var(--amarelo-dourado-claro);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 168, 67, 0.3);
}

.login-footer {
    margin-top: 32px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    gap: 12px;
}

.login-bg-info {
    flex: 1.2;
    background: var(--cinza-chumbo);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border-left: 1px solid var(--cinza-chumbo);
}

.bg-content {
    text-align: center;
    max-width: 340px;
}

.bg-content i {
    color: var(--amarelo-dourado);
}

.bg-content h2 {
    font-size: 24px;
    margin: 16px 0 8px;
    color: var(--amarelo-dourado);
}

.bg-content p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.bg-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--cinza-chumbo);
}

.bg-stats div {
    color: var(--text-secondary);
    font-size: 13px;
}

.bg-stats strong {
    display: block;
    font-size: 22px;
    color: var(--amarelo-dourado);
    font-weight: 700;
}

/* ===== CADASTRO / CONVITE (login.html -> cadastro.html -> completar-cadastro.html) ===== */
.login-cadastro-link {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}

.login-cadastro-link a {
    color: var(--amarelo-dourado);
    text-decoration: none;
    font-weight: 600;
}

.login-cadastro-link a:hover {
    text-decoration: underline;
    color: var(--amarelo-dourado-claro);
}

.cadastro-intro {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.cadastro-intro strong {
    color: var(--text-primary);
}

.demo-aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(212, 168, 67, 0.1);
    border: 1px solid rgba(212, 168, 67, 0.3);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
}

.demo-aviso i {
    color: var(--amarelo-dourado);
    font-size: 18px;
    margin-top: 2px;
}

.demo-aviso strong {
    display: block;
    color: var(--text-primary);
    font-size: 13px;
    margin-bottom: 4px;
}

.demo-aviso p {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.link-gerado-box {
    display: flex;
    gap: 8px;
}

.link-gerado-box input {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--cinza-chumbo);
    background: var(--cinza-chumbo-escuro);
    color: var(--text-primary);
    font-size: 12px;
    font-family: monospace;
}

.link-gerado-box button {
    padding: 0 16px;
    border-radius: var(--radius);
    border: 1px solid var(--cinza-chumbo);
    background: var(--cinza-chumbo);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.link-gerado-box button:hover {
    background: var(--amarelo-dourado);
    color: var(--cinza-chumbo-escuro);
    border-color: var(--amarelo-dourado);
}

.cadastro-erro-token {
    text-align: center;
    padding: 24px 8px 8px;
}

.cadastro-erro-token i {
    font-size: 40px;
    color: #f44336;
    margin-bottom: 16px;
}

.cadastro-erro-token h3 {
    color: var(--text-primary);
    font-size: 18px;
    margin-bottom: 8px;
}

.cadastro-erro-token p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.convite-resumo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--cinza-chumbo);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 13px;
}

.convite-resumo div {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.convite-resumo i {
    color: var(--amarelo-dourado);
    width: 16px;
}

.badge-papel {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

/* ===== LAYOUT PRINCIPAL ===== */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--cinza-chumbo-escuro);
    border-right: 1px solid var(--cinza-chumbo);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* v1.9.8: mesmo motivo do body — ver comentário lá em cima */
    overflow-y: auto;
    z-index: 10;
    transition: width 0.25s ease, transform 0.25s ease;
}

/* Menu escondido (desktop): a barra lateral recolhe para 0 —
   o botão de hambúrguer no topo liga/desliga isso. */
@media (min-width: 1025px) {
    body.sidebar-hidden .sidebar {
        width: 0;
        min-width: 0;
        border-right: none;
        overflow: hidden;
    }
}

.sidebar-logo {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--cinza-chumbo);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo img {
    /* v1.9.40 — pedido do usuário: logo estava grande demais (ainda
       mais depois de v1.9.39 trocar pela logo da própria empresa
       quando logado como empresa) — 50% menor que antes (150px). */
    width: 75px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* ===== BOTÃO DE MOSTRAR/OCULTAR MENU ===== */
.sidebar-toggle-btn {
    background: none;
    border: 1px solid var(--cinza-chumbo);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: var(--transition);
    flex-shrink: 0;
}
.sidebar-toggle-btn:hover {
    background: var(--cinza-chumbo);
    color: var(--branco);
}

.topbar-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* ===== BREADCRUMB (navegação horizontal no topo) =====
   v1.9.34 (pedido do usuário — 13/09/2026): "quase não dá pra
   enxergar" — fonte foi aumentada de 11px pra 13px (e o separador de
   7px pra 10px), com mais espaço entre os itens, pra ficar legível
   sem precisar chegar perto da tela. */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    flex-wrap: wrap;
}
.breadcrumb-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    font-family: 'Inter', sans-serif;
    transition: var(--transition);
}
.breadcrumb-link:hover {
    color: var(--amarelo-dourado);
    text-decoration: underline;
}
.breadcrumb-current {
    color: var(--text-secondary);
    font-weight: 500;
}
.breadcrumb-sep {
    font-size: 10px;
    color: var(--text-muted);
}

/* ===== FUNDO ESCURECIDO ATRÁS DO MENU (celular/tablet) ===== */
.sidebar-backdrop {
    display: none;
}

.sidebar-menu {
    flex: 1;
    padding: 16px 12px 20px;
    overflow-y: auto;
}

.menu-section {
    margin-bottom: 20px;
}

.menu-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    padding: 0 12px;
    margin-bottom: 6px;
    font-weight: 600;
}

/* v1.9.22: título da seção agora é clicável e recolhe/expande os itens
   dela (Workspace, Organização, Catálogo, Administração), pra quem
   quiser deixar o menu mais enxuto. Reset de <button> pra manter a
   mesma aparência de antes (era uma <div>), só acrescentando o ícone
   de seta e o cursor de "clicável". Estado (aberto/fechado de cada
   seção) fica salvo no localStorage — ver configurarColapsoMenu() em
   main.js. */
.menu-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border-radius: 6px;
    transition: var(--transition);
}

.menu-section-title:hover {
    color: var(--text-secondary);
}

.menu-section-chevron {
    font-size: 9px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.menu-section.collapsed .menu-section-chevron {
    transform: rotate(-90deg);
}

.menu-section.collapsed .menu-section-items {
    display: none;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.menu-item:hover {
    background: var(--cinza-chumbo);
    color: var(--branco);
}

.menu-item.active {
    background: rgba(67, 160, 71, 0.15);
    color: var(--verde-claro);
    border-left: 3px solid var(--verde-claro);
}

.menu-item i {
    width: 20px;
    text-align: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* v1.9.5: marca em vermelho os itens do menu cuja tela ainda não foi
   implementada (Billing, Configurações, Fabricantes, Tipos de Rede,
   Network Servers, Planos de assinatura) — sinal visual temporário até
   cada uma virar uma página de verdade. !important porque precisa
   continuar vermelho mesmo com :hover ou .active (usuário clicando e
   caindo na tela genérica "em breve"). */
.menu-item-pendente,
.menu-item-pendente:hover,
.menu-item-pendente.active,
.menu-item-pendente span,
.menu-item-pendente i {
    color: #f44336 !important;
}
.menu-item-pendente.active {
    background: rgba(244, 67, 54, 0.12) !important;
    border-left: 3px solid #f44336 !important;
}

.menu-item .badge {
    margin-left: auto;
    background: var(--cinza-chumbo);
    color: var(--text-secondary);
    font-size: 10px;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.menu-divider {
    height: 1px;
    background: var(--cinza-chumbo);
    margin: 8px 12px;
}

.sidebar-footer {
    padding: 14px 20px;
    /* v1.9.8: reforço de segurança pro botão "Sobre" não ficar colado
       embaixo da barra de gestos do celular (mesmo princípio já usado
       no rodapé da Home — ver .page-content no @media mobile). Some
       com o "100dvh" do body/.sidebar acima de cima pra cobrir tanto
       o caso da barra de endereço quanto o da barra de gestos. */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--cinza-chumbo);
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.sidebar-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.sidebar-footer .status {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Link "Sobre" (v1.9.7) — leva à página institucional da SirINEO
   Things (mini história, equipe e o patrono da empresa). Fica logo
   abaixo do indicador "Online" no rodapé do menu lateral. */
/* v1.9.24: fundo branco fixo com letra preta (em vez de acompanhar o
   tema escuro/claro), porque o texto ficava apagado/pouco legível —
   pedido do usuário. Fica igual nos dois temas de propósito. */
.sidebar-sobre-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 6px 0;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #ffffff;
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.sidebar-sobre-link:hover {
    color: #000000;
    border-color: var(--amarelo-dourado);
    background: #f2f2f2;
}

.sidebar-footer .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--verde);
    display: inline-block;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ===== MAIN CONTENT ===== */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* v1.9.8: mesmo motivo do body — ver comentário lá em cima */
    background: var(--cinza-chumbo-escuro);
    overflow: hidden;
}

/* ===== TOPBAR ===== */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 28px;
    background: rgba(45, 45, 45, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cinza-chumbo);
    flex-shrink: 0;
    height: var(--header-height);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-left .page-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--branco);
}

.topbar-left .page-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-right .theme-toggle {
    background: none;
    border: 1px solid var(--cinza-chumbo);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.topbar-right .theme-toggle:hover {
    background: var(--cinza-chumbo);
    color: var(--branco);
}

.topbar-right .user {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cinza-chumbo);
    padding: 4px 14px 4px 8px;
    border-radius: 24px;
    border: 1px solid var(--cinza-chumbo);
    cursor: pointer;
    transition: var(--transition);
}

.topbar-right .user:hover {
    border-color: var(--amarelo-dourado);
}

.topbar-right .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--amarelo-dourado);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--cinza-chumbo-escuro);
}

.topbar-right .user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--branco);
}

/* ===== PAGE CONTENT ===== */
.page-content {
    flex: 1;
    padding: 24px 28px 28px;
    overflow-y: auto;
    position: relative;
}

/* ===== GLOBE CONTAINER ===== */
.globe-container {
    width: 100%;
    height: 100%;
    min-height: 500px;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: radial-gradient(ellipse at center, #2d2d2d 0%, #1a1a1a 100%);
}

.globe-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ===== CITY INFO POPUP ===== */
.city-info {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(45, 45, 45, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid var(--cinza-chumbo);
    border-radius: 16px;
    padding: 20px 32px;
    min-width: 280px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
    z-index: 20;
}

.city-info.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.city-info h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--amarelo-dourado);
}

.city-info .coords {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0 12px;
}

.city-info .tags {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.city-info .tag {
    background: var(--cinza-chumbo);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    color: var(--text-secondary);
    border: 1px solid var(--cinza-chumbo);
}

.city-info .tag.active {
    border-color: var(--amarelo-dourado);
    color: var(--amarelo-dourado);
}

.city-info .close-btn {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}

.city-info .close-btn:hover {
    color: var(--amarelo-dourado);
}

/* ===== MAP LEGEND ===== */
.map-legend {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(45, 45, 45, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--cinza-chumbo);
    border-radius: var(--radius);
    padding: 14px 18px;
    z-index: 15;
    font-size: 12px;
    min-width: 150px;
}

.map-legend .legend-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--amarelo-dourado);
    font-size: 12px;
}

.map-legend label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 0;
    font-size: 12px;
}

.map-legend label input[type="checkbox"] {
    accent-color: var(--amarelo-dourado);
    width: 14px;
    height: 14px;
}

.map-legend .color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ===== DASHBOARDS GRID =====
   v1.9.19: trocado de grid (auto-fit preenchendo 100% da largura) pra
   flex-wrap + justify-content:center, senão com menos de 5 cards (ou
   telas bem largas) sobrava um espaço vazio de um lado — ver pedido do
   usuário com print + setas apontando pro vazio à direita. Cada card
   agora também recebe cores próprias via --card-cor1/--card-cor2
   (definidas inline pelo JS, uma por tipo de dashboard) pro degradê
   do ícone e da barra de destaque no hover. */
.dashboards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    padding: 20px 0;
}

.dashboards-grid-loading {
    width: 100%;
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 14px;
}

.dashboard-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 30px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    flex: 1 1 260px;
    max-width: 280px;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--card-cor1, var(--amarelo-dourado)), var(--card-cor2, var(--verde)));
    opacity: 0;
    transition: opacity 0.3s;
}

.dashboard-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    border-color: var(--card-cor1, var(--amarelo-dourado));
}

.dashboard-card:hover::before {
    opacity: 1;
}

.dashboard-card-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, var(--card-cor1, var(--amarelo-dourado)), var(--card-cor2, var(--verde)));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-cor1, var(--amarelo-dourado)) 45%, transparent);
}

.dashboard-card h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dashboard-card p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.dashboard-card-status {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--verde);
    color: white;
}

/* v1.9.19: card "Indisponível" — a empresa logada não tem nenhum
   dispositivo cadastrado deste tipo, então o dashboard ficaria vazio.
   Fica visível (pro usuário entender que o recurso existe), mas
   apagado e sem clique, pra não abrir um dashboard em branco toda
   vez que a tela de Dashboards carrega. */
.dashboard-card-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(70%);
}

.dashboard-card-disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-color);
}

.dashboard-card-disabled:hover::before {
    opacity: 0;
}

.dashboard-card-status-inativo {
    background: var(--text-muted);
}

.btn-back {
    margin-top: 20px;
    padding: 12px 28px;
    background: var(--amarelo-dourado);
    color: var(--cinza-chumbo-escuro);
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Inter', sans-serif;
}

.btn-back:hover {
    background: var(--amarelo-dourado-claro);
    transform: translateY(-2px);
}

/* ===== PÁGINAS EM BRANCO ===== */
.blank-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    text-align: center;
    color: var(--text-secondary);
}

.blank-page i {
    font-size: 64px;
    color: var(--cinza-chumbo);
    margin-bottom: 16px;
}

.blank-page h2 {
    color: var(--amarelo-dourado);
    font-size: 24px;
    margin-bottom: 8px;
}

.blank-page p {
    font-size: 14px;
    max-width: 400px;
}

/* ===== RESPONSIVO ===== */
@media (max-width: 1024px) {
    .login-container {
        max-width: 95%;
        height: auto;
        max-height: none;
        flex-direction: column;
        border-radius: 16px;
    }

    .login-box {
        min-width: auto;
        padding: 32px 28px;
    }

    .login-bg-info {
        border-left: none;
        border-top: 1px solid var(--cinza-chumbo);
        padding: 24px;
    }

    .bg-stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
    }

    /* ===== MENU EM MODO "GAVETA" (celular/tablet) =====
       Abaixo de 1024px o menu some da tela por padrão e vira uma
       gaveta que desliza por cima do conteúdo quando o botão de
       hambúrguer é clicado — sempre no tamanho normal (com texto),
       nunca mais aquele modo "só ícone" apertado de antes. */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-width) !important;
        min-width: var(--sidebar-width) !important;
        transform: translateX(-100%);
        box-shadow: 6px 0 28px rgba(0,0,0,.45);
    }

    body:not(.sidebar-hidden) .sidebar {
        transform: translateX(0);
    }

    body:not(.sidebar-hidden) .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 9;
    }
}

@media (max-width: 768px) {
    .topbar {
        padding: 10px 16px;
        flex-wrap: wrap;
        gap: 8px;
        height: auto;
    }

    .page-content {
        padding: 16px 16px calc(16px + 28px + env(safe-area-inset-bottom, 0px)) 16px;
    }

    .city-info {
        min-width: auto;
        width: 90%;
        padding: 16px 20px;
        bottom: 16px;
    }

    .map-legend {
        top: 12px;
        right: 12px;
        padding: 10px 14px;
        min-width: 120px;
    }

    .topbar-right .user-name {
        display: none;
    }

    .topbar-right .theme-toggle span {
        display: none;
    }

    .login-container {
        max-width: 100%;
        border-radius: 0;
        height: 100vh;
        max-height: 100vh;
        background: var(--cinza-chumbo-escuro);
    }

    .login-bg-info {
        display: none;
    }

    .login-box {
        padding: 32px 24px;
    }

    .dashboards-grid {
        gap: 16px;
    }

    .dashboard-card {
        padding: 24px 20px;
        flex: 1 1 100%;
        max-width: 100%;
    }

    .dashboard-card-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .login-logo {
        width: 190px;
        height: auto;
    }

    .form-group input {
        padding: 10px 14px;
        font-size: 13px;
    }

    .btn-login {
        padding: 12px;
        font-size: 14px;
    }

    .form-options {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .globe-container {
        min-height: 300px;
    }

    /* Gaveta do menu ocupa quase a tela toda no celular, deixando
       uma faixa do fundo escurecido visível (mais fácil de fechar
       tocando fora do menu). */
    .sidebar {
        width: 85vw !important;
        min-width: 0 !important;
    }
}



/* ========================================
   ORGANIZAÇÃO - EMPRESAS
   ======================================== */

.organizacao-container {
    padding: 0;
    width: 100%;
}

/* ===== HEADER ===== */
.organizacao-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.organizacao-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.organizacao-header-left h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.empresas-count {
    background: var(--amarelo-dourado);
    color: var(--cinza-chumbo-escuro);
    padding: 2px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    min-width: 30px;
    text-align: center;
}

.organizacao-header-right {
    display: flex;
    gap: 10px;
}

.btn-add-empresa {
    padding: 10px 20px;
    background: var(--amarelo-dourado);
    color: var(--cinza-chumbo-escuro);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.btn-add-empresa:hover {
    background: var(--amarelo-dourado-claro);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 168, 67, 0.3);
}

.btn-refresh {
    padding: 10px 14px;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
}

.btn-refresh:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: rotate(180deg);
}

/* ===== TABS ===== */
.organizacao-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.tab-btn-org {
    padding: 12px 24px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px 8px 0 0;
    transition: var(--transition);
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    border-bottom: 3px solid transparent;
}

.tab-btn-org:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.tab-btn-org.active {
    color: var(--amarelo-dourado);
    border-bottom-color: var(--amarelo-dourado);
    background: rgba(212, 168, 67, 0.05);
}

.tab-btn-org i {
    font-size: 16px;
}

/* ===== TAB CONTENT ===== */
.organizacao-content {
    width: 100%;
}

.tab-content-org {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content-org.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== TABELA ===== */
.table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.empresas-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 900px;
}

.empresas-table thead {
    background: var(--cinza-chumbo-escuro);
}

.empresas-table thead th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.empresas-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

.empresas-table tbody tr:last-child td {
    border-bottom: none;
}

.empresas-table tbody tr:hover {
    background: rgba(212, 168, 67, 0.05);
}

.empresas-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

/* ===== EMPRESA INFO ===== */
.empresa-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.empresa-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    flex-shrink: 0;
}

/* ===== UPLOAD DE FOTO/LOGO (v1.9.31) =====
   Usado no modal Nova/Editar Empresa (logo), no modal "Editar foto" de
   Usuários e nos formulários de cadastro/convite (completar-cadastro.html)
   — sempre o mesmo par: uma prévia circular + o campo de arquivo. */
.upload-foto-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 0 18px;
}
.upload-foto-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    flex-shrink: 0;
}
.upload-foto-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.upload-foto-info input[type="file"] {
    font-size: 12px;
    color: var(--text-secondary);
    max-width: 100%;
}

/* Foto pequena de funcionário (tabela de Usuários) — mesmo espírito
   de .empresa-logo, só um pouco menor pra caber na linha da tabela. */
.usuario-foto {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    flex-shrink: 0;
}
.usuario-foto-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
}

.empresa-nome {
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== BADGES ===== */
.badge-devices {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(212, 168, 67, 0.15);
    color: var(--amarelo-dourado);
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    min-width: 40px;
}

.badge-gateways {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(46, 125, 50, 0.15);
    color: var(--verde-claro);
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    min-width: 40px;
}

.status-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    min-width: 60px;
}

.status-ativo {
    background: rgba(46, 125, 50, 0.2);
    color: var(--verde-claro);
}

.status-inativo {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

/* v1.9.28: usuário admin de empresa auto-cadastrada ainda não
   aprovada (ver Administração > Usuários) — dourado, nem "erro"
   (vermelho) nem "tudo certo" (verde), porque é um estado neutro de
   espera. */
.status-pendente {
    background: rgba(212, 168, 67, 0.2);
    color: var(--amarelo-dourado);
}

/* ===== AÇÕES ===== */
.btn-action {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
}

.btn-action:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-view:hover {
    color: var(--amarelo-dourado);
}

.btn-edit:hover {
    color: #60a5fa;
}

/* v1.9.26: excluir empresa (na verdade arquiva — ver excluirEmpresa em
   organizacao.js), mesmo padrão visual de btn-view/btn-edit. */
.btn-delete:hover {
    color: #f44336;
}

.btn-action + .btn-action {
    margin-left: 4px;
}

/* v1.9.26: empresa arquivada (excluída "de mentirinha" — dados
   preservados). Cinza neutro, pra não parecer erro/alarme como
   status-inativo. */
.status-arquivada {
    background: rgba(140, 140, 140, 0.2);
    color: var(--text-muted);
}

/* v1.9.26: seção de empresas arquivadas, embaixo da tabela principal. */
.empresas-arquivadas-toggle {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.empresas-arquivadas-wrapper {
    margin-top: 14px;
}

.empresas-table-arquivadas .empresa-nome,
.empresas-table-arquivadas td {
    opacity: 0.85;
}

/* ===== MAPA ===== */
.map-wrapper {
    width: 100%;
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--cinza-chumbo-escuro);
}

#empresas-map {
    width: 100%;
    height: 100%;
}

#empresas-map .leaflet-popup-content-wrapper {
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-primary);
}

#empresas-map .leaflet-popup-tip {
    background: var(--bg-card);
}

#empresas-map .leaflet-popup-content {
    color: var(--text-primary);
}

/* ===== ESTATÍSTICAS ===== */
.estatisticas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    border-color: var(--amarelo-dourado);
}

.stat-icon {
    font-size: 32px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 168, 67, 0.1);
    border-radius: 12px;
    flex-shrink: 0;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--amarelo-dourado);
    line-height: 1.2;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
}

/* ===== GRÁFICO ===== */
.chart-container-org {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    height: 320px;
    margin-top: 8px;
}

.chart-container-org h3 {
    margin: 0 0 16px 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.chart-container-org canvas {
    width: 100% !important;
    height: calc(100% - 40px) !important;
}

/* ========================================
   RESPONSIVO
   ======================================== */

@media (max-width: 1024px) {
    .estatisticas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .map-wrapper {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .organizacao-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    
    .organizacao-header-left {
        justify-content: center;
    }
    
    .organizacao-header-right {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn-add-empresa {
        flex: 1;
        justify-content: center;
        min-width: 140px;
    }
    
    .organizacao-tabs {
        flex-wrap: wrap;
        justify-content: center;
        border-bottom: none;
        gap: 4px;
    }
    
    .tab-btn-org {
        padding: 10px 16px;
        font-size: 13px;
        border-radius: 8px;
        border-bottom: none;
        flex: 1;
        justify-content: center;
        min-width: 80px;
        background: var(--bg-card);
    }
    
    .tab-btn-org.active {
        background: var(--amarelo-dourado);
        color: var(--cinza-chumbo-escuro);
        border-bottom: none;
    }
    
    .tab-btn-org:hover {
        background: var(--bg-hover);
    }
    
    .tab-btn-org.active:hover {
        background: var(--amarelo-dourado-claro);
    }
    
    .estatisticas-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .stat-card {
        padding: 16px;
    }
    
    .stat-value {
        font-size: 22px;
    }
    
    .stat-icon {
        font-size: 24px;
        width: 44px;
        height: 44px;
    }
    
    .map-wrapper {
        height: 300px;
    }
    
    .chart-container-org {
        height: 250px;
        padding: 16px;
    }
    
    .empresas-table {
        font-size: 13px;
        min-width: 700px;
    }
    
    .empresas-table thead th,
    .empresas-table tbody td {
        padding: 10px 12px;
    }
    
    .empresa-logo {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .organizacao-header-left h2 {
        font-size: 17px;
    }
    
    .empresas-count {
        font-size: 12px;
        padding: 2px 10px;
    }
    
    .btn-add-empresa {
        font-size: 13px;
        padding: 8px 14px;
        min-width: 120px;
    }
    
    .btn-refresh {
        padding: 8px 12px;
    }
    
    .tab-btn-org {
        font-size: 11px;
        padding: 8px 12px;
        min-width: 60px;
    }
    
    .tab-btn-org i {
        font-size: 13px;
    }
    
    .estatisticas-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .stat-card {
        padding: 12px;
        gap: 10px;
    }
    
    .stat-value {
        font-size: 18px;
    }
    
    .stat-label {
        font-size: 11px;
    }
    
    .stat-icon {
        font-size: 20px;
        width: 36px;
        height: 36px;
    }
    
    .map-wrapper {
        height: 250px;
    }
    
    .chart-container-org {
        height: 200px;
        padding: 12px;
    }
    
    .empresas-table {
        font-size: 12px;
        min-width: 600px;
    }
    
    .empresas-table thead th,
    .empresas-table tbody td {
        padding: 8px 8px;
    }
    
    .badge-devices,
    .badge-gateways {
        font-size: 11px;
        padding: 2px 8px;
        min-width: 30px;
    }
    
    .status-badge {
        font-size: 10px;
        padding: 2px 10px;
        min-width: 50px;
    }
    
    .empresa-logo {
        width: 28px;
        height: 28px;
    }
    
    .empresa-nome {
        font-size: 12px;
    }
}

/* ========================================
   SCROLL DA TABELA
   ======================================== */

.table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: var(--bg-card);
    border-radius: 3px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: var(--cinza-chumbo);
    border-radius: 3px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--amarelo-dourado);
}

/* ========================================
   ATIVOS (v1.3.0)
   Página real do menu "Ativos" — reaproveita várias
   classes já existentes de Organização (.table-wrapper,
   .status-badge, .badge-devices, .empresa-info-like
   patterns) e adiciona as classes específicas abaixo.
   ======================================== */

.ativos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.ativos-header-left { display: flex; align-items: center; gap: 12px; }
.ativos-header-left h2 { font-size: 20px; font-weight: 700; display: flex; align-items: center; }
.ativos-count {
    background: rgba(212,168,67,.15);
    color: var(--amarelo-dourado);
    font-size: 13px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}
.btn-add-ativo {
    background: var(--amarelo-dourado);
    color: var(--cinza-chumbo-escuro);
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: var(--transition);
}
.btn-add-ativo:hover { background: var(--amarelo-dourado-claro); }

.ativos-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 18px;
}
.ativos-tab-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ativos-tab-btn.active { color: var(--verde-claro); border-bottom-color: var(--verde-claro); }
.ativos-tab-content { display: none; }
.ativos-tab-content.active { display: block; }

.ativos-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ativos-filter-chip {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}
.ativos-filter-chip i { font-size: 11px; }
.ativos-filter-chip.active { border-color: var(--tipo-color, var(--verde-claro)); color: var(--tipo-color, var(--verde-claro)); background: var(--tipo-bg, rgba(67,160,71,.12)); }
.ativos-filter-chip:hover { border-color: var(--tipo-color, var(--verde-claro)); }

.ativos-table { width: 100%; border-collapse: collapse; }
.ativos-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.ativos-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    vertical-align: middle;
}
.ativos-table tbody tr:last-child td { border-bottom: none; }
.ativos-table tbody tr:hover { background: var(--bg-hover); }
.ativos-table tbody tr { cursor: pointer; transition: var(--transition); }

.ativo-info { display: flex; align-items: center; gap: 12px; }
.ativo-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tipo-bg); color: var(--tipo-color);
    font-size: 15px; flex-shrink: 0;
}
.ativo-nome { font-weight: 600; color: var(--text-primary); display: block; }
.ativo-tipo-label { font-size: 11px; color: var(--text-muted); }

.status-manutencao { background: rgba(212,168,67,.2); color: var(--amarelo-dourado); }
/* "Aguardando" (v1.7.0): elemento recém-cadastrado, token gerado mas
   ainda sem nenhuma telemetria real recebida — nem "erro" (vermelho)
   nem "sucesso" (verde): é um estado neutro/informativo, por isso azul. */
.status-aguardando { background: rgba(77,171,247,.18); color: #4dabf7; }
.status-aguardando i { margin-right: 4px; }

.ultima-com { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; }
.ultima-com i { font-size: 10px; color: var(--text-muted); }

.ativos-acoes { display: flex; gap: 6px; }
.ativos-acoes button {
    width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border-color);
    background: transparent; color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    transition: var(--transition);
}
.ativos-acoes button:hover { border-color: var(--verde-claro); color: var(--verde-claro); }

.ativos-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.ativos-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.ativos-stat-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.ativos-stat-value { font-size: 22px; font-weight: 700; display: block; color: var(--text-primary); }
.ativos-stat-label { font-size: 12px; color: var(--text-muted); }
.ativos-chart-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 20px; }
.ativos-chart-box h3 { font-size: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }

.ativos-map-note {
    background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius);
    padding: 14px 18px; margin-bottom: 16px; font-size: 12.5px; color: var(--text-secondary);
    display: flex; gap: 10px; align-items: flex-start;
}
.ativos-map-note i { color: var(--amarelo-dourado); margin-top: 2px; }
.ativos-map-wrapper {
    border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-color);
    height: 560px; position: relative; background: #1a1a2e;
}
#ativos-map { width: 100%; height: 100%; }
.ativos-map-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 13px; gap: 8px;
}
.ativos-map-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.ativos-map-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.ativos-map-legend-dot { width: 12px; height: 12px; border-radius: 50%; }

/* ===== PAINEL DE DETALHES (slide-over) ===== */
.ativos-detail-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 40;
}
.ativos-detail-overlay.open { opacity: 1; pointer-events: auto; }
.ativos-detail-panel {
    position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw;
    background: var(--cinza-chumbo-escuro); border-left: 1px solid var(--border-color);
    z-index: 41; transform: translateX(100%); transition: transform .25s ease;
    overflow-y: auto; padding: 24px;
}
.ativos-detail-panel.open { transform: translateX(0); }
.ativos-detail-close {
    position: absolute; top: 18px; right: 18px; background: var(--bg-card); border: 1px solid var(--border-color);
    color: var(--text-secondary); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.ativos-detail-close:hover { color: var(--text-primary); border-color: var(--verde-claro); }
.ativos-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-right: 36px; }
.ativos-detail-icon { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.ativos-detail-head h3 { font-size: 17px; margin-bottom: 3px; }
.ativos-detail-head span { font-size: 12px; color: var(--text-muted); }
.ativos-detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.ativos-detail-row span:first-child { color: var(--text-muted); }
.ativos-detail-row span:last-child { color: var(--text-primary); text-align: right; font-weight: 500; }
.ativos-detail-devices { margin-top: 18px; }
.ativos-detail-devices h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 10px; }
.ativos-device-item {
    display: flex; align-items: center; gap: 10px; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 12.5px;
}
.ativos-device-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-claro); flex-shrink: 0; }
.ativos-device-dot.off { background: #f44336; }
.ativos-detail-actions { display: flex; gap: 10px; margin-top: 22px; }
.ativos-detail-actions button {
    flex: 1; text-align: center; padding: 11px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: 'Inter', sans-serif; border: none;
}
.ativos-detail-actions .btn-primary { background: var(--verde-claro); color: #fff; }
.ativos-detail-actions .btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }

@media (max-width: 1024px) {
    .ativos-stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .table-wrapper { overflow-x: auto; }
    .ativos-table { min-width: 720px; }
    .ativos-map-wrapper { height: 420px; }
}
@media (max-width: 560px) {
    .ativos-stats-grid { grid-template-columns: 1fr; }
    .ativos-map-wrapper { height: 320px; }
}

/* ========================================
   DISPOSITIVOS (v1.5.0)
   Página real do menu "Dispositivos" — o hardware em si
   (diferente de Ativos, que é a coisa do mundo real
   monitorada). Reaproveita .table-wrapper/.status-badge já
   existentes e adiciona as classes "disp-*" abaixo.
   ======================================== */

.disp-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.disp-header-left { display: flex; align-items: center; gap: 12px; }
.disp-header-left h2 { font-size: 20px; font-weight: 700; display: flex; align-items: center; }
.disp-count { background: rgba(212,168,67,.15); color: var(--amarelo-dourado); font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 20px; }
.btn-add-disp {
    background: var(--amarelo-dourado); color: var(--cinza-chumbo-escuro); border: none;
    padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer;
    font-family: 'Inter', sans-serif; transition: var(--transition);
}
.btn-add-disp:hover { background: var(--amarelo-dourado-claro); }

/* v1.7 (Módulo 9 — botão "Arquivados", visível só pra root/admin —
   ver podeGerenciarEsteDisp em js/dispositivos.js) */
.btn-arquivados-disp {
    background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color);
    padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer;
    font-family: 'Inter', sans-serif; transition: var(--transition);
}
.btn-arquivados-disp:hover { border-color: var(--verde-claro); color: var(--verde-claro); }

.disp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 18px; }
.disp-tab-btn {
    background: none; border: none; color: var(--text-secondary); padding: 10px 16px; font-size: 13px;
    font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; border-bottom: 2px solid transparent;
    display: flex; align-items: center; gap: 6px;
}
.disp-tab-btn.active { color: var(--verde-claro); border-bottom-color: var(--verde-claro); }
.disp-tab-content { display: none; }
.disp-tab-content.active { display: block; }

.disp-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.disp-filter-chip {
    background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary);
    padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer;
    font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 6px; transition: var(--transition);
}
.disp-filter-chip i { font-size: 11px; }
.disp-filter-chip.active { border-color: var(--tipo-color, var(--verde-claro)); color: var(--tipo-color, var(--verde-claro)); background: var(--tipo-bg, rgba(67,160,71,.12)); }
.disp-filter-chip:hover { border-color: var(--tipo-color, var(--verde-claro)); }

.disp-table { width: 100%; border-collapse: collapse; }
.disp-table th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
    padding: 14px 16px; border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.disp-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-color); font-size: 13px; vertical-align: middle; }
.disp-table tbody tr:last-child td { border-bottom: none; }
.disp-table tbody tr:hover { background: var(--bg-hover); }
.disp-table tbody tr { cursor: pointer; transition: var(--transition); }
.disp-table tbody tr.is-offline { opacity: .68; }
.disp-table tbody tr.is-aguardando { background: rgba(77,171,247,.05); }

.disp-info { display: flex; align-items: center; gap: 12px; }
.disp-icon {
    width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: var(--tipo-bg); color: var(--tipo-color); font-size: 15px; flex-shrink: 0;
}
.disp-nome { font-weight: 600; color: var(--text-primary); display: block; }
.disp-sub { font-size: 11px; color: var(--text-muted); }
.disp-ativo-link { color: var(--text-secondary); font-size: 12.5px; }

.disp-signal { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.disp-signal-bars { display: flex; align-items: flex-end; gap: 1px; height: 12px; }
.disp-signal-bars span { width: 3px; background: var(--border-color); border-radius: 1px; }
.disp-signal-bars span:nth-child(1) { height: 4px; }
.disp-signal-bars span:nth-child(2) { height: 7px; }
.disp-signal-bars span:nth-child(3) { height: 10px; }
.disp-signal-bars span:nth-child(4) { height: 13px; }
.disp-signal-bars.lvl-1 span:nth-child(1) { background: #f44336; }
.disp-signal-bars.lvl-2 span:nth-child(1), .disp-signal-bars.lvl-2 span:nth-child(2) { background: #d4a843; }
.disp-signal-bars.lvl-3 span:nth-child(1), .disp-signal-bars.lvl-3 span:nth-child(2), .disp-signal-bars.lvl-3 span:nth-child(3) { background: #43a047; }
.disp-signal-bars.lvl-4 span { background: #43a047; }
.disp-signal-bars.lvl-0 span { background: var(--border-color); }
.disp-signal-value { color: var(--text-secondary); }

.disp-battery { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.disp-battery i.batt-high { color: #43a047; }
.disp-battery i.batt-mid { color: #d4a843; }
.disp-battery i.batt-low { color: #f44336; }
.disp-battery i.batt-off { color: var(--text-muted); }

.disp-acoes { display: flex; gap: 6px; }
.disp-acoes button {
    width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border-color); background: transparent;
    color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 12px; transition: var(--transition);
}
.disp-acoes button:hover { border-color: var(--verde-claro); color: var(--verde-claro); }

.disp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.disp-stat-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 18px; display: flex; align-items: center; gap: 14px;
}
.disp-stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.disp-stat-value { font-size: 22px; font-weight: 700; display: block; color: var(--text-primary); }
.disp-stat-label { font-size: 12px; color: var(--text-muted); }
.disp-chart-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.disp-chart-box h3 { font-size: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.disp-stats-charts { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
/* v1.9.5: sem altura fixa aqui, o Chart.js usava maintainAspectRatio
   (padrão) baseado só na LARGURA do container — o gráfico de rosca
   (aspectRatio 1) virava um círculo gigante, mais alto que a tela
   inteira. Com maintainAspectRatio:false (ver dispositivos.js) +
   este wrapper de altura fixa, os dois gráficos ficam do mesmo
   tamanho e cabem dentro da tela. */
.disp-chart-wrapper { height: 280px; position: relative; width: 100%; }
.disp-chart-wrapper canvas { display: block !important; width: 100% !important; height: 100% !important; }
.disp-chart-wrapper-donut { max-width: 320px; margin: 0 auto; }
@media (max-width: 560px) {
    .disp-chart-wrapper { height: 220px; }
}

.disp-map-note {
    background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius);
    padding: 14px 18px; margin-bottom: 16px; font-size: 12.5px; color: var(--text-secondary);
    display: flex; gap: 10px; align-items: flex-start;
}
.disp-map-note i { color: var(--amarelo-dourado); margin-top: 2px; }
.disp-map-wrapper { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-color); height: 520px; position: relative; background: #1a1a2e; }
#disp-map { width: 100%; height: 100%; }
#gw-map { width: 100%; height: 100%; }
.disp-map-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; gap: 8px; }
.disp-map-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.disp-map-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.disp-map-legend-dot { width: 12px; height: 12px; border-radius: 50%; }

.disp-detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 40; }
.disp-detail-overlay.open { opacity: 1; pointer-events: auto; }
.disp-detail-panel {
    position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw;
    background: var(--cinza-chumbo-escuro); border-left: 1px solid var(--border-color);
    z-index: 41; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; padding: 24px;
}
.disp-detail-panel.open { transform: translateX(0); }
.disp-detail-close {
    position: absolute; top: 18px; right: 18px; background: var(--bg-card); border: 1px solid var(--border-color);
    color: var(--text-secondary); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.disp-detail-close:hover { color: var(--text-primary); border-color: var(--verde-claro); }
.disp-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-right: 36px; }
.disp-detail-icon { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.disp-detail-head h3 { font-size: 17px; margin-bottom: 3px; }
.disp-detail-head span { font-size: 12px; color: var(--text-muted); }
.disp-detail-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 18px 0 8px; }
.disp-detail-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; gap: 12px; }
.disp-detail-row span:first-child { color: var(--text-muted); flex-shrink: 0; }
.disp-detail-row span:last-child { color: var(--text-primary); text-align: right; font-weight: 500; }
.disp-detail-gauge-wrap { margin-top: 4px; }
.disp-detail-gauge-track { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; height: 8px; overflow: hidden; margin-top: 6px; }
.disp-detail-gauge-fill { height: 100%; border-radius: 20px; }
.disp-detail-actions { display: flex; gap: 10px; margin-top: 22px; }
.disp-detail-actions button { flex: 1; text-align: center; padding: 11px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; border: none; }
.disp-detail-actions .btn-primary { background: var(--verde-claro); color: #fff; }
.disp-detail-actions .btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }

/* v1.7 (Módulo 9 — formulário de edição de dispositivo/gateway
   privado, dentro do mesmo painel de detalhe já existente) */
.disp-edit-field { margin-bottom: 14px; }
.disp-edit-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.disp-edit-field input {
    width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border-color);
    background: transparent; color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}
.disp-edit-field input:focus { outline: none; border-color: var(--verde-claro); }
.disp-edit-erro { color: #f44336; font-size: 12px; margin-top: 8px; min-height: 16px; }

/* Botão "Restaurar" usado na lista de Arquivados (dentro de uma
   .disp-detail-row, fora de .disp-detail-actions, então precisa da
   própria cor — mesmo verde do btn-primary) */
.btn-restore-inline {
    background: transparent; color: var(--verde-claro); border: 1px solid var(--verde-claro);
    border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
    font-family: 'Inter', sans-serif; white-space: nowrap;
}
.btn-restore-inline:hover { background: var(--verde-claro); color: #fff; }

/* v1.8 — linha de item dentro da lista de "Arquivados" quando ela
   aparece dentro de um .modal-box (usuários) em vez do
   .disp-detail-panel lateral (dispositivos/gateways) — mesma ideia
   visual do .disp-detail-row, mas com padding próprio pro contexto
   de modal. */
.disp-arquivado-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-color);
}
.disp-arquivado-item:last-child { border-bottom: none; }

@media (max-width: 1024px) {
    .disp-stats-grid { grid-template-columns: 1fr 1fr; }
    .disp-stats-charts { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .disp-table { min-width: 860px; }
    .disp-map-wrapper { height: 400px; }
}
@media (max-width: 560px) {
    .disp-stats-grid { grid-template-columns: 1fr; }
    .disp-map-wrapper { height: 300px; }
}

/* ========================================
   SUB-LINHA "ROOT-ONLY" (v1.6.0)
   Aparece embaixo de cada linha das tabelas de
   Dispositivos e Gateways Privados, só pro usuário
   "root" (dono da plataforma) — mostra ID/token.
   Ver js/auth.js (role) e js/dispositivos.js / js/gateways.js.
   ======================================== */
.disp-subrow td {
    padding: 5px 16px 9px 54px;
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(212,168,67,.04);
}
.disp-subrow i.fa-shield-halved { color: var(--amarelo-dourado); margin-right: 6px; }
.disp-subrow code {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
}
.disp-detail-row code {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

/* ========================================
   GATEWAYS (v1.6.0)
   Reaproveita quase toda a estrutura visual de
   Dispositivos (.disp-*) — só o alternador de
   categoria e a tag de protocolo são exclusivos daqui.
   ======================================== */
.gw-categoria-chips { display: flex; gap: 8px; margin-bottom: 18px; }
.gw-categoria-chip {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}
.gw-categoria-chip i { font-size: 12px; }
/* Cor por tipo — a mesma linguagem usada nos ícones da tabela "Todos"
   e nos marcadores do mapa: dourado = privado, azul = público,
   verde = neutro (agrega os dois, usado em "Todos"). */
.gw-cat-todos.active { border-color: var(--verde-claro); color: var(--verde-claro); background: rgba(67,160,71,.1); }
.gw-cat-todos:hover { border-color: var(--verde-claro); }
.gw-cat-privado.active { border-color: var(--amarelo-dourado); color: var(--amarelo-dourado); background: rgba(212,168,67,.1); }
.gw-cat-privado:hover { border-color: var(--amarelo-dourado); }
.gw-cat-publico.active { border-color: #4dabf7; color: #4dabf7; background: rgba(77,171,247,.1); }
.gw-cat-publico:hover { border-color: #4dabf7; }

.gw-protocolo-tag {
    background: rgba(77,171,247,.15);
    color: #4dabf7;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}
.gw-icon-privado { --tipo-bg: rgba(212,168,67,.15); --tipo-color: var(--amarelo-dourado); }
.gw-icon-publico { --tipo-bg: rgba(77,171,247,.15); --tipo-color: #4dabf7; }
.gw-tipo-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.gw-tipo-badge.privado { background: rgba(212,168,67,.15); color: var(--amarelo-dourado); }
.gw-tipo-badge.publico { background: rgba(77,171,247,.15); color: #4dabf7; }
.gw-map-note-compact { padding: 10px 16px !important; }
.gw-map-note-compact i { font-size: 15px !important; margin-bottom: 0 !important; }

/* Container de altura fixa pro gráfico da aba Estatísticas de Gateways —
   sem isso, um <canvas> sozinho numa caixa de largura total (sem par
   ao lado, como em Dispositivos) cresce demais com o Chart.js padrão
   (maintainAspectRatio) e estoura a página. */
.gw-chart-canvas-wrap { position: relative; height: 260px; }
.gw-chart-canvas-wrap canvas { max-width: 100%; }

/* ========================================
   MODAL GENÉRICO + "+ NOVO ELEMENTO" (v1.6.0)
   js/elementos.js — cadastro de Dispositivo ou
   Gateway Privado, com geração automática de ID/token.
   ======================================== */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 60; padding: 20px;
}
.modal-box {
    background: var(--cinza-chumbo-escuro);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    /* v1.9.27: aumentado de 560px pra 660px — usuário achou os modais
       (Nova Empresa, Editar Empresa e todos os outros que usam esse
       mesmo .modal-box) pequenos demais. */
    width: 660px; max-width: 100%;
    max-height: 88vh; overflow-y: auto;
    padding: 30px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
/* v1.9.28: modal ainda maior, só pra quem precisa (hoje: Empresa, que
   ganhou os campos UF/País e ficou apertada em 660px) — os outros
   modais do sistema continuam em 660px, sem precisar mexer em cada um. */
.modal-box.modal-box-largo {
    width: 760px;
}
.modal-close {
    position: absolute; top: 16px; right: 16px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    color: var(--text-secondary); width: 32px; height: 32px;
    border-radius: 8px; cursor: pointer; font-size: 13px;
}
.modal-close:hover { color: var(--text-primary); border-color: var(--verde-claro); }
.modal-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding-right: 36px; }
.modal-header i { font-size: 18px; }
.modal-header h3 { font-size: 17px; font-weight: 700; }
.modal-subtitle { font-size: 12.5px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
.modal-footer { display: flex; gap: 10px; margin-top: 22px; }
.modal-footer button { flex: 1; text-align: center; padding: 11px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; border: none; }
.modal-footer .btn-primary, .elem-sucesso .btn-primary { background: var(--verde-claro); color: #fff; }
.modal-footer .btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }

.elem-tipo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.elem-tipo-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 20px 16px; text-align: center; cursor: pointer; font-family: 'Inter', sans-serif;
    transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.elem-tipo-card i { font-size: 26px; color: var(--amarelo-dourado); }
.elem-tipo-card span { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.elem-tipo-card small { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.elem-tipo-card:hover { border-color: var(--amarelo-dourado); background: rgba(212,168,67,.08); }

.elem-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* v1.9.28: grade de 3 colunas (UF / País / Telefone no modal de
   Empresa) — reaproveita o mesmo .elem-field de sempre, só muda o
   número de colunas do grid que envolve os campos. */
.elem-form-grid-3 { grid-template-columns: 1fr 1fr 1.4fr; }
.elem-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); }
/* v1.9.27: nome do campo em maiúsculas, pedido do usuário — só o
   texto do rótulo (o <span> direto dentro de .elem-field), não mexe
   no texto digitado nem na dica (.elem-hint).
   v1.9.28: cor e tamanho aumentados — usuário achou o rótulo ainda
   pouco visível mesmo depois do 1.9.27 (era var(--text-muted), a cor
   mais apagada da paleta; agora usa --text-secondary, mais clara). */
.elem-field > span {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    font-size: 11.5px;
    color: var(--text-secondary);
}
.elem-field input, .elem-field select {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px;
    padding: 9px 12px; color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif;
}
.elem-field input:focus, .elem-field select:focus { outline: none; border-color: var(--amarelo-dourado); }
.elem-field input:disabled, .elem-field select:disabled { opacity: .6; cursor: not-allowed; }
.elem-hint { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; font-weight: 400; }

/* Tela de revisão do "+ Novo Elemento" — confere tudo antes de gerar
   ID/token (v1.7.0, pedido depois da primeira revisão do usuário). */
.elem-revisao { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 4px 14px; }
.elem-revisao-linha { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.elem-revisao-linha:last-child { border-bottom: none; }
.elem-revisao-linha span:first-child { color: var(--text-muted); flex-shrink: 0; }
.elem-revisao-linha span:last-child { color: var(--text-primary); font-weight: 500; text-align: right; }

.elem-sucesso { text-align: center; padding: 6px 0 0; }
.elem-sucesso > i.fa-circle-check { font-size: 44px; color: #43a047; margin-bottom: 12px; }
.elem-sucesso h3 { font-size: 18px; margin-bottom: 8px; }
.elem-sucesso p { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 18px; }
.elem-credencial-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px; text-align: left; }
.elem-credencial-linha { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.elem-credencial-linha span { font-size: 11px; color: var(--text-muted); width: 44px; flex-shrink: 0; }
.elem-credencial-linha code { flex: 1; font-family: 'Courier New', monospace; font-size: 12.5px; color: var(--text-primary); word-break: break-all; }
.elem-credencial-linha button { background: none; border: 1px solid var(--border-color); color: var(--text-secondary); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.elem-credencial-linha button:hover { border-color: var(--verde-claro); color: var(--verde-claro); }
.elem-credencial-aviso { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--amarelo-dourado); margin-top: 12px; text-align: left; }

@media (max-width: 640px) {
    .modal-box { padding: 20px; }
    .elem-tipo-grid, .elem-form-grid, .elem-form-grid-3 { grid-template-columns: 1fr; }
}

/* ========================================
   DASHBOARDS: EMPRESAS & TELEMETRIA (v1.7.0)
   js/dashboard-empresas.js — tabela de empresas que expande em
   Gateways (pai) -> Dispositivos (filho), com telemetria em JSON.
   ======================================== */
.dash-carregando { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; }
.dash-vazio-geral { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; }
.dash-vazio { text-align: center; padding: 24px; color: var(--text-muted); font-size: 12.5px; }

.dash-table-empresas th { white-space: nowrap; }
.dash-linha-empresa { cursor: pointer; transition: var(--transition); }
.dash-linha-empresa:hover { background: var(--bg-hover); }
.dash-linha-empresa.expandida { background: rgba(212,168,67,.06); }
.dash-linha-empresa td { padding: 14px 16px; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.dash-caret { width: 14px; display: inline-block; color: var(--text-muted); margin-right: 8px; font-size: 11px; }
.dash-empresa-nome { font-weight: 700; color: var(--text-primary); }
.dash-empresa-nome i { color: var(--amarelo-dourado); margin-right: 6px; }

.dash-linha-sub-header th {
    background: var(--bg-card); text-align: left; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted); padding: 8px 16px; border-bottom: 1px solid var(--border-color);
}

.dash-linha-pai td { padding: 12px 16px; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.dash-linha-pai-privado { background: rgba(212,168,67,.05); }
.dash-linha-pai-publico { background: rgba(77,171,247,.05); }

.dash-linha-filho td { padding: 9px 16px 9px 12px; border-bottom: 1px solid var(--border-color); font-size: 12.5px; background: var(--bg-card); }
.dash-td-hierarquia { display: flex; align-items: center; gap: 10px; padding-left: 34px !important; position: relative; }
.dash-hierarquia-linha { position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: var(--border-color); }
.dash-icone-filho { color: var(--text-muted); font-size: 12px; width: 16px; text-align: center; }
.dash-nome-filho { font-weight: 500; color: var(--text-secondary); }

.telemetria-json { display: block; font-family: 'Courier New', monospace; font-size: 11.5px; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; padding: 5px 9px; white-space: nowrap; overflow-x: auto; max-width: 320px; }
.telemetria-data { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }
.tel-key { color: #4dabf7; }
.tel-num { color: var(--verde-claro); }
.tel-punct { color: var(--text-muted); }
.tel-aguardando { font-size: 12px; color: #4dabf7; }

@media (max-width: 900px) {
    .dash-table-empresas { min-width: 760px; }
    .telemetria-json { max-width: 220px; }
}

/* ========================================
   CATÁLOGO > FABRICANTES (v1.9.9)
   js/fabricantes.js — catálogo de equipamentos por fabricante.
   Duas telas (lista de fabricantes / detalhe com galeria de
   equipamentos), padrão ".active" igual ao dashboard de
   temp-simples (js/dashboards/temp-simples.js: .st-screen/.active).
   ======================================== */
.fab-container { max-width: 1180px; margin: 0 auto; }

.fab-tela { display: none; }
.fab-tela.active { display: block; animation: fabFadeIn .25s ease; }
@keyframes fabFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.fab-header { margin-bottom: 22px; }
.fab-header h2 { display: flex; align-items: center; font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0; }

/* ===== TELA 1: lista de fabricantes ===== */
.fab-lista-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

.fab-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius, 12px);
    padding: 26px 22px; text-align: center; cursor: pointer; transition: var(--transition, all .2s);
    display: flex; flex-direction: column; align-items: center;
}
.fab-card:hover { transform: translateY(-3px); border-color: var(--amarelo-dourado); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.fab-card-logo {
    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(212,168,67,.15); color: var(--amarelo-dourado); font-size: 1.5rem; margin-bottom: 14px;
}
/* v1.9.44: badge "Global" vs. nome da empresa — distingue o catálogo
   compartilhado (SirINEO Technologies, visível a todo mundo) do
   catálogo PRIVADO de uma empresa cliente específica (ver
   js/fabricantes.js:renderListaFabricantes). */
.fab-card-badge {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-muted); background: rgba(148,163,184,.14); border-radius: 999px;
    padding: 3px 10px; margin-bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
}
.fab-card-badge-global { color: var(--amarelo-dourado); background: rgba(212,168,67,.14); }
.fab-card h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px 0; }
.fab-card-count { font-size: .76rem; font-weight: 600; color: var(--amarelo-dourado); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }
.fab-card p { font-size: .82rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

.fab-card-add {
    justify-content: center; color: var(--text-muted); border-style: dashed; background: transparent;
}
.fab-card-add i { font-size: 1.6rem; margin-bottom: 10px; }
.fab-card-add span { font-size: .85rem; font-weight: 600; }
.fab-card-add:hover { color: var(--amarelo-dourado); border-color: var(--amarelo-dourado); }

/* ===== TELA 2: detalhe do fabricante ===== */
.fab-detalhe-header {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-bottom: 26px;
    padding-bottom: 20px; border-bottom: 1px solid var(--border-color);
}
.fab-voltar-btn { white-space: nowrap; }
.fab-detalhe-title { flex: 1; min-width: 220px; }
.fab-detalhe-title h2 { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px 0; }
.fab-detalhe-title p { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 10px 0; max-width: 620px; }
.fab-link-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 20px;
    background: rgba(212,168,67,.12); border: 1px solid rgba(212,168,67,.4); color: var(--amarelo-dourado);
    font-size: .78rem; font-weight: 600; text-decoration: none; transition: var(--transition, all .2s);
}
.fab-link-btn:hover { background: rgba(212,168,67,.22); border-color: var(--amarelo-dourado); }
.fab-link-pendente {
    display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-muted);
    font-style: italic;
}

.fab-equip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

.fab-equip-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius, 12px);
    padding: 24px 20px; display: flex; flex-direction: column; align-items: center; text-align: center;
    transition: var(--transition, all .2s);
}
.fab-equip-card:hover { border-color: var(--amarelo-dourado); box-shadow: 0 8px 20px rgba(0,0,0,.18); }

/* Requisito do usuário: foto do equipamento dentro de um círculo de
   fundo branco (funciona em fotos com fundo transparente E com fundo
   escuro — o círculo branco garante contraste/consistência visual
   em qualquer tema, claro ou escuro). */
.fab-equip-photo-circle {
    width: 140px; height: 140px; border-radius: 50%; background: #ffffff;
    border: 3px solid var(--border-color); box-shadow: 0 2px 10px rgba(0,0,0,.15);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    margin-bottom: 16px; flex-shrink: 0;
}
.fab-equip-photo-circle img { width: 78%; height: 78%; object-fit: contain; }

.fab-equip-card h4 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 8px 0; }

.fab-equip-tipo-badge {
    --tipo-color: var(--amarelo-dourado);
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 14px;
    background: color-mix(in srgb, var(--tipo-color) 16%, transparent); color: var(--tipo-color);
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 14px;
}

.fab-equip-specs { width: 100%; margin-bottom: 12px; }
.fab-equip-spec-row {
    display: flex; justify-content: space-between; gap: 10px; padding: 7px 0;
    border-bottom: 1px solid var(--border-color); font-size: .8rem; text-align: left;
}
.fab-equip-spec-row:last-child { border-bottom: none; }
.fab-equip-spec-row span:first-child { color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.fab-equip-spec-row span:last-child { color: var(--text-primary); text-align: right; }

.fab-equip-descricao { font-size: .8rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 14px 0; }

.fab-equip-editar-btn { margin-top: auto; width: 100%; }

.fab-equip-add {
    justify-content: center; color: var(--text-muted); border-style: dashed; background: transparent; cursor: pointer;
}
.fab-equip-add i { font-size: 1.6rem; margin-bottom: 10px; }
.fab-equip-add span { font-size: .85rem; font-weight: 600; }
.fab-equip-add:hover { color: var(--amarelo-dourado); border-color: var(--amarelo-dourado); }

/* ===== MODAL: seletor de foto do equipamento (v1.9.10) =====
   Sem campo de "caminho do arquivo" — o usuário escolhe a foto pelo
   input file e ela é processada/guardada automaticamente (ver
   processarFotoEquip em js/fabricantes.js). */
.fab-foto-picker { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fab-foto-picker-preview {
    width: 84px; height: 84px; border-radius: 50%; background: #ffffff;
    border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.fab-foto-picker-preview i { color: #c8c8c8; font-size: 1.6rem; }
.fab-foto-picker-preview img { width: 82%; height: 82%; object-fit: contain; }
.fab-foto-picker-input-wrap { display: flex; flex-direction: column; gap: 6px; }
.fab-foto-picker-input-wrap input[type="file"] { display: none; }
.fab-foto-picker-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    color: var(--text-primary); font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: var(--transition, all .2s); width: fit-content;
}
.fab-foto-picker-btn:hover { border-color: var(--amarelo-dourado); color: var(--amarelo-dourado); }

@media (max-width: 640px) {
    .fab-detalhe-header { flex-direction: column; }
    .fab-equip-photo-circle { width: 120px; height: 120px; }
}

/* ========================================
   CATÁLOGO > TIPOS DE REDE (v1.9.15)
   Reaproveita a estrutura visual de .fab- acima (mesmas duas telas:
   grid de categorias / grade de tecnologias dentro da categoria) —
   ver js/tipos-rede.js. Só os dois detalhes abaixo são específicos
   daqui: o selo de "tecnologia principal" e a linha de cross-
   referência com os dados reais de Gateways.
   ======================================== */
.trd-destaque-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 12px;
    background: rgba(212,168,67,.16); color: var(--amarelo-dourado); border: 1px solid rgba(212,168,67,.4);
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 12px;
}
.trd-uso-plataforma {
    width: 100%; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--border-color);
    font-size: .76rem; color: var(--text-muted); line-height: 1.6; text-align: left;
}
.trd-uso-plataforma i { color: var(--amarelo-dourado); margin-right: 4px; }

/* ========================================
   ADMINISTRAÇÃO > PLANOS DE ASSINATURA (v1.9.16)
   Pricing table clássica — 4 cards, o "destaque" (--pl-color por
   plano) com borda/selo. Ver js/planos.js.
   ======================================== */
/* v1.9.17: era max-width:1240px com auto-fit — como só existem 4
   planos (não é uma lista que cresce, tipo Fabricantes), isso deixava
   uma faixa enorme de espaço morto à direita em telas largas (o
   grid "colado" nos 1240px, longe de preencher o resto da tela) e
   dava a impressão de estar desalinhado. Agora usa quase toda a
   largura disponível e trava em exatamente 4 colunas (proporcionais,
   sem espaço sobrando) — cai pra 2 e depois 1 coluna nas media
   queries abaixo. */
.pl-container { max-width: 1680px; margin: 0 auto; }
.pl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1100px) { .pl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pl-grid { grid-template-columns: 1fr; } }

.pl-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius, 12px);
    padding: 30px 22px 22px; display: flex; flex-direction: column; position: relative;
    transition: var(--transition, all .2s);
}
.pl-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.pl-card-destaque { border-color: var(--pl-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pl-color) 30%, transparent); }

.pl-badge-popular {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--pl-color); color: #2d2d2d; font-size: .68rem; font-weight: 700;
    padding: 4px 14px; border-radius: 12px; text-transform: uppercase; letter-spacing: .03em;
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
}

.pl-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--pl-color); margin: 4px 0 12px; text-align: center; }
.pl-preco { font-size: 1.9rem; font-weight: 800; color: var(--text-primary); text-align: center; line-height: 1; }
.pl-preco-ciclo { font-size: .82rem; font-weight: 500; color: var(--text-muted); }
.pl-ciclo-label { text-align: center; font-size: .78rem; color: var(--text-muted); margin: 4px 0 0; font-style: italic; }

.pl-limites {
    margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
    display: flex; flex-direction: column; gap: 9px;
}
.pl-limite-row { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--text-secondary); }
.pl-limite-row i { color: var(--pl-color); width: 16px; text-align: center; }

.pl-recursos { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pl-recursos li { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; color: var(--text-secondary); line-height: 1.5; }
.pl-recursos li i { color: #43a047; margin-top: 3px; flex-shrink: 0; }

.pl-editar-btn { margin-top: auto; width: 100%; }

/* ========================================
   ORGANIZAÇÃO > BILLING (v1.9.16)
   Medidor de uso do ciclo atual — cards com barra de progresso por
   dimensão de cobrança (dispositivos/gateways/mensagens/dados), mais
   tabelas de consumo por item e faturas mock. Ver js/billing.js.
   ======================================== */
.bl-container { max-width: 1180px; margin: 0 auto; }

.bl-header {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 18px;
    margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color);
}
.bl-header h2 { display: flex; align-items: center; font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.bl-header-sub { font-size: .82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bl-empresa-select {
    padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 600;
}
.bl-empresa-fixa { font-weight: 700; color: var(--text-primary); }

.bl-plano-info { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.bl-plano-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 16px;
    background: color-mix(in srgb, var(--bl-color, var(--amarelo-dourado)) 16%, transparent);
    color: var(--bl-color, var(--amarelo-dourado)); font-size: .85rem; font-weight: 700; white-space: nowrap;
}

.bl-metricas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 24px; }
.bl-metrica-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius, 12px); padding: 18px 20px; }
.bl-metrica-card-header { font-size: .8rem; color: var(--text-secondary); font-weight: 600; margin-bottom: 10px; }
.bl-metrica-card-header i { color: var(--amarelo-dourado); margin-right: 7px; }
.bl-metrica-valores { font-size: .78rem; color: var(--text-muted); margin-bottom: 8px; }
.bl-progress-bar { width: 100%; height: 9px; border-radius: 6px; background: rgba(120,120,120,.18); overflow: hidden; }
.bl-progress-fill { height: 100%; border-radius: 6px; transition: width .3s ease; }
.bl-progress-fill.bl-ok { background: #43a047; }
.bl-progress-fill.bl-alerta { background: #d4a843; }
.bl-progress-fill.bl-critico { background: #e53935; }
.bl-metrica-pct { font-size: .72rem; font-weight: 700; margin-top: 7px; text-align: right; }
.bl-metrica-pct.bl-ok { color: #43a047; }
.bl-metrica-pct.bl-alerta { color: #d4a843; }
.bl-metrica-pct.bl-critico { color: #e53935; }

.bl-retencao-card {
    display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius, 12px); padding: 16px 20px; margin-bottom: 28px; font-size: .84rem; color: var(--text-secondary); line-height: 1.5;
}
.bl-retencao-card i { font-size: 1.4rem; color: var(--amarelo-dourado); flex-shrink: 0; }
.bl-retencao-card strong { color: var(--text-primary); }

.bl-secao-titulo { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }

.bl-tabela-wrap { overflow-x: auto; margin-bottom: 30px; }
.bl-tabela { width: 100%; border-collapse: collapse; font-size: .82rem; }
.bl-tabela th { text-align: left; padding: 10px 12px; color: var(--text-muted); font-weight: 600; border-bottom: 2px solid var(--border-color); white-space: nowrap; }
.bl-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); white-space: nowrap; }
.bl-tabela tr:last-child td { border-bottom: none; }

.bl-tabela td.bl-fatura-status-pago { color: #43a047; font-weight: 600; }
.bl-fatura-baixar-btn { background: transparent; border: none; color: var(--amarelo-dourado); cursor: pointer; font-size: .82rem; padding: 0; }
.bl-fatura-baixar-btn:hover { text-decoration: underline; }

.bl-planos-opcoes { display: flex; flex-direction: column; gap: 10px; }
.bl-plano-opcao {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-card);
    cursor: pointer; transition: var(--transition, all .2s); text-align: left; font-family: 'Inter', sans-serif;
}
.bl-plano-opcao:hover:not(:disabled) { border-color: var(--pl-color); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.bl-plano-opcao:disabled { opacity: .55; cursor: default; }
.bl-plano-opcao-nome { font-weight: 700; color: var(--pl-color); flex: 1; }
.bl-plano-opcao-preco { font-weight: 600; color: var(--text-primary); }
.bl-plano-opcao-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 700; }

/* v1.9 (Billing com dados reais) — aviso de cota estourada/bloqueio de
   recepção por falta de pagamento. Três variações de cor conforme o
   status (ver banco_postgres.verificar_e_atualizar_status_plano):
   'alerta' (ainda dentro das 48h de carência, dado continua sendo
   aceito), 'bloqueado' (48h vencidas, dado novo não é mais aceito) e
   'liberado_manual' (root confirmou pagamento manualmente). */
.bl-status-banner {
    display: flex; align-items: center; gap: 14px; padding: 16px 20px;
    border-radius: var(--radius, 12px); margin-bottom: 20px; border: 1px solid;
}
.bl-status-banner i.bl-status-banner-icon { font-size: 1.6rem; flex-shrink: 0; }
.bl-status-banner-texto { flex: 1; font-size: .85rem; color: var(--text-secondary); }
.bl-status-banner-texto strong { color: var(--text-primary); }
.bl-status-banner.bl-status-alerta { background: rgba(212,168,67,.10); border-color: rgba(212,168,67,.4); }
.bl-status-banner.bl-status-alerta i.bl-status-banner-icon { color: #d4a843; }
.bl-status-banner.bl-status-bloqueado { background: rgba(229,57,53,.10); border-color: rgba(229,57,53,.4); }
.bl-status-banner.bl-status-bloqueado i.bl-status-banner-icon { color: #e53935; }
.bl-status-banner.bl-status-liberado { background: rgba(67,160,71,.10); border-color: rgba(67,160,71,.4); }
.bl-status-banner.bl-status-liberado i.bl-status-banner-icon { color: #43a047; }
.bl-status-banner-actions { flex-shrink: 0; }

/* Barrinha compacta de "consumo do device dentro da cota da empresa",
   usada dentro da tabela de dispositivos (uma célula por linha) — bem
   menor que .bl-progress-bar (que é pro card grande do topo). */
.bl-mini-bar-wrap { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.bl-mini-bar { flex: 1; height: 7px; border-radius: 5px; background: rgba(120,120,120,.18); overflow: hidden; }
.bl-mini-bar-fill { height: 100%; border-radius: 5px; }
.bl-mini-bar-fill.bl-ok { background: #43a047; }
.bl-mini-bar-fill.bl-alerta { background: #d4a843; }
.bl-mini-bar-fill.bl-critico { background: #e53935; }
.bl-mini-bar-label { font-size: .7rem; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 640px) {
    .bl-header { flex-direction: column; }
    .bl-plano-info { align-items: flex-start; width: 100%; }
    .bl-status-banner { flex-direction: column; align-items: flex-start; }
}

/* ========================================
   WORKSPACE > ALARMES (v1.9.18)
   Reaproveita a maior parte do visual já existente (.disp-header,
   .disp-tab-btn/.disp-tab-content, .table-wrapper, .disp-table,
   .disp-info/.disp-icon, .disp-acoes, .status-badge, .elem-field,
   .bl-empresa-select) — só os detalhes específicos de Alarmes (badge
   de severidade/status colorido por variável, e o layout do
   Relatório) ganham classes próprias aqui. Ver js/alarmes.js.
   ======================================== */
.al-container { width: 100%; }

/* v1.9.18 fix: as abas reaproveitam .disp-tab-btn (visual do botão),
   mas o show/hide (display:none/active) só existe pra
   .disp-tab-content — sem esta regra própria pras .al-tab-content,
   as 3 abas (Ocorrências/Regras/Relatório) ficavam todas visíveis
   ao mesmo tempo, empilhadas. */
.al-tab-content { display: none; }
.al-tab-content.active { display: block; }

.al-badge {
    --al-color: var(--amarelo-dourado);
    background: color-mix(in srgb, var(--al-color) 18%, transparent);
    color: var(--al-color);
}

.al-canais-cell i { color: var(--text-secondary); margin-right: 8px; font-size: 13px; }

.al-filtros-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.al-filtros-extra { display: flex; gap: 10px; flex-wrap: wrap; }

.al-relatorio-tabelas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin: 22px 0; }
.al-relatorio-bloco { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius, 12px); padding: 20px; margin-top: 22px; }
.al-relatorio-tabelas .al-relatorio-bloco { margin-top: 0; }
.al-relatorio-bloco h3 { font-size: .95rem; font-weight: 700; color: var(--text-primary); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.al-relatorio-bloco h3 i { color: var(--amarelo-dourado); }

/* ========================================
   ORGANIZAÇÃO > CONFIGURAÇÕES (v1.9.20)
   Reaproveita .disp-tab-btn (visual das abas), .elem-field/
   .elem-form-grid (campos de formulário), .modal-* (modais),
   .bl-empresa-select/.bl-empresa-fixa (seletor de empresa do root),
   .badge-papel (chip do papel de acesso), .table-wrapper/.disp-table/
   .status-badge (tabelas de chaves de API e webhooks). Só o que é
   específico desta tela ganha classes .cfg-* aqui.
   ======================================== */
.cfg-container { width: 100%; }

/* Mesmo motivo do fix de v1.9.18 no Alarmes: cada nova classe de aba
   precisa da SUA PRÓPRIA regra de display:none/active — reaproveitar
   .disp-tab-btn (botão) não traz de brinde o show/hide, que é de
   .disp-tab-content. */
.cfg-tab-content { display: none; }
.cfg-tab-content.active { display: block; }

.cfg-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius, 12px);
    padding: 22px 24px;
    margin-bottom: 20px;
}

.cfg-card-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.cfg-card-header i { font-size: 22px; margin-top: 2px; flex-shrink: 0; }
.cfg-card-header h4 { margin: 0 0 4px; font-size: 16px; color: var(--text-primary); }
.cfg-card-header p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

.cfg-perfil-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.cfg-avatar-circle {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--amarelo-dourado), var(--amarelo-dourado-escuro));
    color: var(--cinza-chumbo-escuro);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.cfg-perfil-header h3 { margin: 0 0 6px; font-size: 18px; color: var(--text-primary); }

.cfg-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.cfg-status-msg { font-size: 13px; color: var(--text-secondary); }

.cfg-switch-row { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-secondary); cursor: pointer; }
.cfg-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.cfg-switch input { opacity: 0; width: 0; height: 0; }
.cfg-switch-slider { position: absolute; inset: 0; background: var(--border-color); border-radius: 24px; transition: .2s; }
.cfg-switch-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.cfg-switch input:checked + .cfg-switch-slider { background: var(--verde-claro); }
.cfg-switch input:checked + .cfg-switch-slider::before { transform: translateX(20px); }

.cfg-atividade-lista { display: flex; flex-direction: column; gap: 10px; }
.cfg-atividade-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.cfg-atividade-row:last-child { border-bottom: none; }
.cfg-atividade-row i { width: 18px; text-align: center; flex-shrink: 0; }
.cfg-atividade-desc { flex: 1; color: var(--text-primary); }
.cfg-atividade-tempo { color: var(--text-muted); white-space: nowrap; }

.cfg-empresa-linha { margin: 0 0 16px; font-size: 14px; color: var(--text-secondary); }

.cfg-callout {
    display: flex; align-items: center; gap: 10px;
    background: color-mix(in srgb, var(--amarelo-dourado) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--amarelo-dourado) 35%, transparent);
    color: var(--text-primary);
    border-radius: var(--radius, 12px);
    padding: 12px 16px; font-size: 13px; margin-bottom: 20px;
}
.cfg-callout i { color: var(--amarelo-dourado); }
.cfg-callout a { color: var(--amarelo-dourado); font-weight: 600; }

.cfg-link-demo {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--bg-hover); border-radius: 8px; padding: 10px 14px; margin-top: 10px;
}
.cfg-link-demo code { flex: 1; min-width: 200px; word-break: break-all; font-size: 12px; color: var(--text-primary); }

.cfg-tema-opcoes { display: flex; gap: 12px; }
.cfg-tema-opcao {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: var(--radius, 12px);
    border: 1px solid var(--border-color); background: var(--bg-hover);
    color: var(--text-primary); font-weight: 600; cursor: pointer; transition: all .2s;
}
.cfg-tema-opcao:hover { border-color: var(--amarelo-dourado); }
.cfg-tema-opcao-atual { border-color: var(--amarelo-dourado); background: color-mix(in srgb, var(--amarelo-dourado) 15%, transparent); color: var(--amarelo-dourado); }

/* ========================================
   CATÁLOGO > NETWORK SERVERS (v1.9.21)
   Reaproveita .gw-categoria-chip/.gw-tipo-badge (de Gateways),
   .table-wrapper/.disp-table/.status-badge, .elem-field/.elem-hint,
   .modal-*, .disp-detail-* (painel lateral). Só o callout explicativo
   (pedido do usuário: "colocar algo explicando pros clientes pra que
   serve") ganha classe própria .ns-* aqui.
   ======================================== */
.ns-callout {
    display: flex; align-items: flex-start; gap: 14px;
    background: color-mix(in srgb, var(--amarelo-dourado) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--amarelo-dourado) 30%, transparent);
    border-radius: var(--radius, 12px);
    padding: 18px 20px; margin-bottom: 20px;
}
.ns-callout > i { font-size: 22px; color: var(--amarelo-dourado); margin-top: 3px; flex-shrink: 0; }
.ns-callout strong { color: var(--text-primary); }
.ns-callout p { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.ns-callout a { color: var(--amarelo-dourado); font-weight: 600; }

.ns-callout-fluxo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px !important; }
.ns-fluxo-item {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-hover); border-radius: 20px; padding: 6px 14px;
    font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap;
}
.ns-fluxo-item i { color: var(--text-secondary); }
.ns-fluxo-destaque { background: color-mix(in srgb, var(--amarelo-dourado) 20%, transparent); color: var(--amarelo-dourado); }
.ns-fluxo-destaque i { color: var(--amarelo-dourado); }
.ns-callout-fluxo > i.fa-arrow-right { color: var(--text-muted); font-size: 11px; }