/* Portal do Condomínio Bela Vista — tokens, reset, tipografia e estrutura */
/* Faixas por dispositivo (DESIGN_SYSTEM.md 1.2; CSS não aceita variável em @media):
   celular max-width 600px; tablet 601px a 1099px; computador min-width 1100px; 860px só para o menu. */
/* Tokens do DESIGN_SYSTEM.md (tema Azul, o padrão). As cores de marca de cada tema ficam em temas.css. */
:root {
  --petroleo: #0b3d78;
  --petroleo-2: #1976d2;
  --petroleo-3: #082b57;
  --agua: #1e88e5;
  --agua-claro: #90caf9;
  --ouro: #d9b45a;

  /* estados: verde = normal, laranja = atenção, vermelho = erro/falha, azul-claro = informação */
  --ok: #2e7d32;
  --atencao: #ed6c02;
  --perigo: #d32f2f;
  --perigo-forte: #b3261e; /* fundo cheio com texto branco (6,5:1), igual nos dois temas: Travar aberto dos portões */
  --grafite-forte: #4b5d68; /* fundo cheio com texto branco (6,9:1), igual nos dois temas: Destravar dos portões */
  --info: #0288d1;

  --fundo: #f5f7fa;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --linha: #e2e8f0;
  --texto: #1f2937;
  --texto-2: #64748b;
  --destaque: var(--petroleo-2);
  /* ação principal (botões preenchidos, chips e abas marcadas) */
  --primaria: var(--petroleo-2);
  --primaria-hover: color-mix(in srgb, var(--primaria) 85%, #000);
  --sobre-primaria: #fff;
  --sobre-erro: #fff;
  --borda-campo: rgba(31, 41, 55, .23);
  --atencao-texto: #b45309;
  --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .05);

  /* raios: 8 px em botões e campos; 12 px em cartões, painéis e diálogos */
  --raio-p: 8px;
  --raio: 12px;
  --raio-g: 12px;
  /* espaçamentos em múltiplos de 4 px */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px;
  /* transições */
  --rapido: 140ms;
  --estado: 180ms;

  /* foco realçado (âmbar, igual em todos os temas de cor): fundo, borda de 2 px, anel, rótulo e linha de tabela */
  --foco-fundo: #fff6d6;
  --foco-borda: #a86b00;
  --foco-anel: rgba(217, 180, 90, .45);
  --foco-rotulo: #8a5600;
  --foco-linha: #fffaeb;

  --fonte: Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

:root[data-modo="escuro"] {
  --fundo: #121820;
  --superficie: #1e2935;
  --superficie-2: #233040;
  --linha: #334155;
  --texto: #f1f5f9;
  --texto-2: #b0bec5;
  --destaque: var(--agua-claro);
  --primaria: var(--agua-claro);
  --primaria-hover: color-mix(in srgb, var(--primaria) 80%, #fff);
  --sobre-primaria: #0b1f33;
  --sobre-erro: #2b0b0b;
  --borda-campo: rgba(241, 245, 249, .25);
  --atencao-texto: var(--atencao);
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2);
  --ok: #81c784;
  --atencao: #ffb74d;
  --perigo: #ef9a9a;
  --info: #4fc3f7;
  --foco-fundo: #3a3016;
  --foco-borda: #f3c969;
  --foco-anel: rgba(243, 201, 105, .35);
  --foco-rotulo: #f3c969;
  --foco-linha: #2b2a22;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 .875rem/1.5 var(--fonte);
  min-height: 100vh;
}
/* escala do DESIGN_SYSTEM.md: página 24 px, seção 20 px, cartão 16 px, todos com peso 500 */
h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 500; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
a { color: var(--destaque); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
.mudo { color: var(--texto-2); }
.pequeno { font-size: .75rem; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--foco-borda); outline-offset: 2px; }
/* movimento reduzido: sem animações nem transições longas */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- estrutura do portal (área logada) ---------- */
.casca { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.menu {
  position: sticky; top: 0; height: 100vh;
  background: linear-gradient(180deg, var(--petroleo) 0%, var(--petroleo-3) 100%);
  color: var(--menu-texto); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px;
}
.menu .marca { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; font-weight: 700; letter-spacing: -0.01em; }
.menu .marca span { line-height: 1.15; }
.menu .marca small { display: block; font-weight: 500; color: var(--agua-claro); font-size: .78rem; }
.menu a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px;
  color: inherit; text-decoration: none; font-weight: 500; font-size: .9375rem; min-height: 44px;
  transition: background-color .2s ease;
}
.menu a svg { width: 22px; height: 22px; flex: none; opacity: .9; }
.menu a:hover { background: rgba(255, 255, 255, .07); }
.menu a[aria-current="page"] { background: rgba(var(--agua-claro-rgb), .16); color: var(--sobre-cor); box-shadow: inset 3px 0 0 var(--agua-claro); }
.menu .rodape { margin-top: auto; padding: 12px; font-size: .85rem; color: var(--menu-rodape); }
.menu .rodape button { margin-top: 8px; }
.conteudo { padding: 32px clamp(16px, 4vw, 48px) 48px; max-width: 1180px; width: 100%; }
.cabecalho-tela { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cabecalho-tela p { margin: 6px 0 0; }

@media (max-width: 860px) {
  .casca { grid-template-columns: minmax(0, 1fr); }
  .menu {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 20;
    flex-direction: row; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto; scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu .marca, .menu .rodape { display: none; }
  .menu a { flex: 1 0 72px; flex-direction: column; gap: 3px; padding: 7px 4px; font-size: .7rem; font-weight: 600; text-align: center; }
  .menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--agua-claro); }
  .conteudo { padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* texto só para leitor de tela (fica fora da vista, mas é lido) */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }