/* ============================================================
   OMNI LOCKER — Painel (síndico, portaria e admin)
   Cores e fontes do pacote de referência "omni site e gestao".
   ============================================================ */
:root {
  --fundo: #071F33;
  --fundo2: #0A2A40;
  --cartao: #0E3350;
  --borda: #1E4058;
  --borda2: #2C506A;
  --linha: #14324A;
  --texto: #EAF2F6;
  --texto2: #C6D5DF;
  --legenda: #A8BBC8;
  --ciano: #00ABDE;
  --sobre-ciano: #04192A;
  --ocupada-fundo: #06384F;
  --atencao: #F5CF7E;
  --atencao-fundo: #1F1C12;
  --erro: #F2777A;
  --erro-fundo: #2A1519;
  --ok: #3DDC97;
  --ok-texto: #7FE0B5;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --titulo: 'Montserrat', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); }
body { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.5; }
a { color: #7FD3EE; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--ciano); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--titulo); color: #fff; margin: 0; line-height: 1.2; }
h1 { font-size: 30px; font-weight: 800; }
h2 { font-size: 19px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--legenda); }
.mono { font-family: var(--mono); }
.erro { color: var(--erro); min-height: 1.2em; font-size: 14px; }

/* ── Botões ─────────────────────────────────────────────── */
.btn {
  min-height: 44px; padding: 10px 18px; border-radius: 6px; border: 1px solid transparent;
  font-family: var(--titulo); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--ciano); color: var(--sobre-ciano); }
.btn-secundario { background: transparent; color: var(--texto); border-color: var(--borda2); }
.btn-perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
.btn-atencao { background: transparent; color: var(--atencao); border-color: var(--atencao); }
.btn-pequeno { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.btn-link {
  background: none; border: 0; padding: 6px 0; color: #7FD3EE; cursor: pointer;
  font-family: var(--titulo); font-weight: 700; font-size: 13px;
}
.linha-botoes { display: flex; gap: 12px; flex-wrap: wrap; }
.linha-botoes .btn { flex: 1 1 160px; }

/* ── Formulários ────────────────────────────────────────── */
label { display: block; font-size: 13px; font-weight: 700; color: var(--texto); margin: 12px 0 6px; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 6px;
  border: 1px solid var(--borda2); background: var(--fundo); color: var(--texto);
  font: inherit;
}
textarea { resize: vertical; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* ── Telas centrais (login, carregando) ─────────────────── */
.tela-centro { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 12px; }
.logo-grande { width: 72px; }
.cartao-login {
  width: 100%; max-width: 400px; padding: 32px 28px; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--fundo2); display: flex; flex-direction: column; gap: 6px;
}
.cartao-login h1 { font-size: 24px; margin-top: 8px; }
.cartao-login .btn { margin-top: 8px; }
.marca-login { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-family: var(--titulo); font-weight: 700; font-size: 18px; }
.marca-login img { width: 40px; }

/* ── Estrutura do painel ────────────────────────────────── */
.app { display: flex; min-height: 100vh; }
.lateral {
  width: 248px; flex: none; display: flex; flex-direction: column; gap: 20px;
  padding: 24px 18px; background: var(--fundo2); border-right: 1px solid var(--borda);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marca { display: flex; align-items: center; gap: 10px; }
.marca img { width: 38px; }
.marca strong { display: block; font-family: var(--titulo); font-size: 17px; color: #fff; line-height: 1.15; }
.marca span { font-size: 12px; }
.etiqueta {
  display: inline-block; padding: 1px 6px; border-radius: 3px; background: var(--legenda); color: var(--fundo);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
}
.rotulo { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--legenda); text-transform: uppercase; }
.cartao-predio { padding: 12px 14px; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); display: flex; flex-direction: column; gap: 2px; }
.cartao-predio strong { color: #fff; }
.cartao-predio select { margin-top: 6px; min-height: 36px; padding: 4px 8px; }

#menu { display: flex; flex-direction: column; gap: 4px; }
.item-menu {
  min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 8px;
  font-family: var(--titulo); font-size: 14px; font-weight: 600; color: var(--texto2); text-decoration: none;
}
.item-menu::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--borda2); flex: none; }
.item-menu[aria-current="page"] { background: var(--ocupada-fundo); color: #fff; font-weight: 700; }
.item-menu[aria-current="page"]::before { background: var(--ciano); }
.contador { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #D9363E; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.lista-condominios { display: flex; flex-direction: column; gap: 6px; }
.lista-condominios input { min-height: 38px; padding: 6px 10px; font-size: 14px; }
.item-cond {
  display: flex; gap: 10px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--texto);
}
.item-cond[aria-current="page"] { background: var(--ocupada-fundo); }
.item-cond strong { display: block; font-size: 14px; }
.item-cond small { font-size: 12px; color: var(--legenda); }
.ponto { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--legenda); }
.ponto.ok { background: var(--ok); }
.ponto.ruim { background: var(--erro); }
.ponto.medio { background: var(--atencao); }

.rodape-lateral { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--borda); font-size: 13px; }

.conteudo { flex: 1; min-width: 0; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 24px; }
.conteudo:focus { outline: none; }
.cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cabecalho-dir { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--legenda); }

.selo { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid; }
.selo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.selo.ok { color: var(--ok-texto); border-color: #1F6B4C; background: #0B2E25; }
.selo.ruim { color: var(--erro); border-color: #6B2A2E; background: var(--erro-fundo); }
.selo.cinza { color: var(--legenda); border-color: var(--borda2); }
.pilula { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.pilula.ok { background: #0B2E25; color: var(--ok-texto); }
.pilula.ruim { background: var(--erro-fundo); color: var(--erro); }
.pilula.medio { background: var(--atencao-fundo); color: var(--atencao); }
.pilula.cinza { background: var(--cartao); color: var(--legenda); }

/* ── Números do topo ────────────────────────────────────── */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.numero { padding: 16px 18px; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); }
.numero span { font-size: 13px; color: var(--texto2); }
.numero strong { display: block; font-family: var(--titulo); font-size: 30px; font-weight: 800; color: #fff; line-height: 1.2; }
.numero strong small { font-size: 16px; font-weight: 700; color: var(--texto2); }
.numero.atencao { border-color: #6B5A2A; background: var(--atencao-fundo); }
.numero.atencao span, .numero.atencao strong { color: var(--atencao); }
.numero.ruim { border-color: #6B2A2E; background: var(--erro-fundo); }
.numero.ruim span, .numero.ruim strong { color: var(--erro); }

/* ── Cartões e grades ───────────────────────────────────── */
.cartao { padding: 20px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo2); min-width: 0; }
.cartao > h2 { margin-bottom: 14px; }
.cartao-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vazio { padding: 18px 0; color: var(--legenda); }

/* ── Mapa do armário ────────────────────────────────────── */
.armario { display: flex; gap: 8px; padding: 8px; background: #050F18; border-radius: 8px; width: 100%; max-width: 560px; }
.coluna { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fileira { display: flex; gap: 8px; }
.porta {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 8px 10px; border-radius: 4px; border: 1px solid #23435A; background: #0B2238; color: var(--legenda);
  font-family: var(--mono); font-size: 13px; text-align: left; cursor: pointer;
}
.porta-topo { display: flex; justify-content: space-between; gap: 6px; }
.porta.ocupada { border-color: var(--ciano); background: var(--ocupada-fundo); color: #7FD3EE; }
.porta.mais24 { border-color: var(--atencao); background: #3B3218; color: var(--atencao); }
.porta.aberta { border: 1px dashed var(--erro); background: #3A1A1E; color: var(--erro); }
.porta.fora { opacity: .45; border-style: dotted; }
.porta[aria-pressed="true"] { box-shadow: 0 0 0 3px #071F33, 0 0 0 5px currentColor; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13px; color: var(--texto2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 12px; height: 12px; border-radius: 2px; border: 1px solid #23435A; display: inline-block; }
.legenda i.ocupada { border-color: var(--ciano); }
.legenda i.mais24 { border-color: var(--atencao); }
.legenda i.aberta { border: 1px dashed var(--erro); }

/* ── Detalhe da porta ───────────────────────────────────── */
.caixa-aviso { padding: 12px 14px; border-radius: 8px; border: 1px solid; margin-bottom: 14px; }
.caixa-aviso strong { display: block; font-family: var(--titulo); }
.caixa-aviso.medio { border-color: #6B5A2A; background: var(--atencao-fundo); color: var(--atencao); }
.caixa-aviso.medio p { color: var(--texto2); }
.caixa-aviso.ruim { border-color: #6B2A2E; background: var(--erro-fundo); color: var(--erro); }
.caixa-aviso.ruim p { color: var(--texto2); }
.caixa-aviso.info { border-color: var(--borda2); background: var(--cartao); color: var(--texto); }
.dados { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0 0 14px; }
.dados dt { font-size: 12px; color: var(--legenda); }
.dados dd { margin: 0; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.linha-tempo { list-style: none; margin: 0 0 16px; padding: 14px 0 0; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: 8px; }
.linha-tempo li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.linha-tempo li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ciano); flex: none; transform: translateY(-1px); }
.linha-tempo li.medio { color: var(--atencao); }
.linha-tempo li.medio::before { background: var(--atencao); }
.linha-tempo li.ruim { color: var(--erro); }
.linha-tempo li.ruim::before { background: var(--erro); }
.linha-tempo li.pendente { color: var(--texto2); }
.linha-tempo li.pendente::before { background: transparent; border: 1px solid var(--legenda); }
.linha-tempo time { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--legenda); white-space: nowrap; }
.nota { margin-top: 12px; font-size: 13px; color: var(--legenda); }

/* ── Tabelas ────────────────────────────────────────────── */
.rolagem { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.t th { padding: 10px 12px; border-bottom: 1px solid var(--borda); text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--legenda); white-space: nowrap; text-transform: uppercase; }
table.t td { padding: 11px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.dir, table.t th.dir { text-align: right; }
table.t tr.clicavel { cursor: pointer; }
table.t tr.clicavel:hover td { background: #0C2E46; }
.porta-cod { font-family: var(--mono); color: #7FD3EE; }

/* ── Alertas ────────────────────────────────────────────── */
.alertas { display: flex; flex-direction: column; gap: 12px; }
.alerta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 8px; border: 1px solid; }
.alerta strong { display: block; font-family: var(--titulo); color: #fff; }
.alerta p { color: var(--texto2); font-size: 14px; }
.alerta.ruim { border-color: #6B2A2E; background: var(--erro-fundo); }
.alerta.medio { border-color: #6B5A2A; background: var(--atencao-fundo); }
.alerta.info { border-color: var(--borda); background: var(--cartao); }

/* ── Filtros ────────────────────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.filtros input { max-width: 240px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { min-height: 36px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--borda2); background: transparent; color: var(--texto2); font-weight: 700; font-size: 13px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ciano); border-color: var(--ciano); color: var(--sobre-ciano); }

/* ── Gráfico de barras ──────────────────────────────────── */
.barras { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding-top: 24px; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.barra b { font-size: 12px; color: var(--texto2); }
.barra div { width: 100%; background: #1D5E80; border-radius: 3px 3px 0 0; min-height: 2px; }
.barra.hoje div { background: var(--ciano); }
.barra span { font-family: var(--mono); font-size: 11px; color: var(--legenda); }

/* ── Novo armário ───────────────────────────────────────── */
.passos { display: flex; flex-direction: column; gap: 20px; }
.passo h2 { display: flex; align-items: center; gap: 10px; }
.passo h2 .num { width: 28px; height: 28px; border-radius: 4px; background: var(--ciano); color: var(--sobre-ciano); font-family: var(--mono); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.passo.feito h2 .num { background: var(--ok); }
.passo.bloqueado { opacity: .5; pointer-events: none; }
.segredo { padding: 12px; border-radius: 6px; background: #050F18; border: 1px solid var(--atencao); font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; color: var(--atencao); }
.distribuicao { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }

/* ── Janela e avisos ────────────────────────────────────── */
.janela { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--borda2); border-radius: 10px; background: var(--fundo2); color: var(--texto); }
.janela::backdrop { background: rgba(2, 10, 18, .7); }
.janela h2 { margin-bottom: 6px; }
.janela .linha-botoes { margin-top: 12px; }
.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 8px; background: var(--cartao); border: 1px solid var(--borda2); color: #fff; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.aviso.ok { border-color: #1F6B4C; }
.aviso.ruim { border-color: var(--erro); color: var(--erro); }

/* ── Só no celular / só no computador ── */
.so-celular { display: none; }

/* ── Abas do celular ────────────────────────────────────── */
.abas-celular { display: none; }

@media (max-width: 900px) {
  .grade-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .app { flex-direction: column; }
  .lateral { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--borda); }
  .lateral #menu { display: none; }
  .lateral .rodape-lateral { order: 1; margin: 0 0 0 auto; padding: 0; border: 0; }
  .lateral .rodape-lateral #nomeUsuario { display: none; }
  .lateral #blocoPredio { order: 2; flex: 1 1 100%; }
  .lateral #blocoCondominios { order: 2; flex: 1 1 100%; }
  .lateral #blocoPredio:empty, .lateral #blocoCondominios:empty { display: none; }
  .lista-condominios .itens, .so-desktop { display: none; }
  .so-celular { display: block; }
  .conteudo { padding: 20px 16px 96px; gap: 18px; }
  h1 { font-size: 26px; }
  .numeros { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .numero { padding: 12px 14px; }
  .numero strong { font-size: 26px; }
  .cartao { padding: 16px; }
  .campos-2, .distribuicao { grid-template-columns: 1fr 1fr; }
  .abas-celular {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--fundo2); border-top: 1px solid var(--borda);
  }
  .abas-celular a {
    flex: 1; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-family: var(--titulo); font-size: 12px; font-weight: 600; color: var(--legenda); text-decoration: none; position: relative;
  }
  .abas-celular a[aria-current="page"] { color: #fff; box-shadow: inset 0 3px 0 var(--ciano); }
  .abas-celular .contador { position: absolute; top: 6px; right: calc(50% - 26px); margin: 0; }
}