:root {
  color-scheme: light;
  /* Marca — iguais nos dois temas */
  --azul: #2563eb;
  --azul-escuro: #1d4ed8;
  --azul2: #6366f1;
  --grad: linear-gradient(135deg, #2563eb 0%, #6366f1 100%);
  --verde: #16a34a;
  --grad-verde: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  --vermelho: #dc2626;
  --amarelo: #f59e0b;

  /* Estruturais — mudam no modo escuro */
  --cinza: #eef1f6;            /* fundo atrás do app */
  --cinza-borda: #e6eaf0;
  --borda: #e2e8f0;
  --texto: #0f172a;
  --texto-fraco: #64748b;
  --surface: #ffffff;         /* fundo do #app e dos cartões */
  --surface-2: #eef2f7;       /* painéis/botões neutros */
  --surface-3: #e5e7eb;
  --chip-neutro: #f1f5f9;     /* icon-btn, hovers claros */
  --hover: #f8fafc;
  --tabs-bg: #e9edf3;
  --toast-bg: #0f172a;
  --toast-fg: #ffffff;
  --switch-off: #cbd5e1;
  --seta: #cbd5e1;
  --sombra: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sombra-btn: 0 6px 16px rgba(37,99,235,.28);

  /* Pastilhas de status (fundo / texto / borda) */
  --tint-red-bg: #fee2e2;    --tint-red-bg2: #fef2f2;  --tint-red-fg: #991b1b;   --tint-red-bd: #fecaca;
  --tint-green-bg: #dcfce7;  --tint-green-bg2: #f0fdf4; --tint-green-fg: #166534; --tint-green-bd: #bbf7d0;
  --tint-amber-bg: #fef3c7;  --tint-amber-bg2: #fffbeb; --tint-amber-fg: #92400e; --tint-amber-bd: #fde68a;
  --tint-orange-bg: #fff7ed; --tint-orange-bg2: #ffedd5; --tint-orange-fg: #9a3412; --tint-orange-bd: #fed7aa;
  --tint-blue-bg: #eff6ff;   --tint-blue-bg2: #dbeafe; --tint-blue-fg: #1e40af;   --tint-blue-bd: #cfe0fd;
  --tint-indigo-bg: #eef2ff; --tint-indigo-bg2: #f5f8ff; --tint-indigo-fg: #3730a3;
  --grad-aviso: linear-gradient(135deg,#f5f8ff,#eef3ff);
}

/* ===== Modo escuro (só redefine as cores; o modo claro fica intacto) ===== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cinza: #0b1120;
  --cinza-borda: #2a3550;
  --borda: #2a3550;
  --texto: #e6eaef;
  --texto-fraco: #93a1b8;
  --surface: #131b2c;
  --surface-2: #1b2437;
  --surface-3: #232d42;
  --chip-neutro: #232d42;
  --hover: #1b2437;
  --tabs-bg: #0e1524;
  --toast-bg: #e6eaef;
  --toast-fg: #0b1120;
  --switch-off: #3a465e;
  --seta: #55617a;
  --sombra: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --sombra-btn: 0 6px 16px rgba(37,99,235,.4);

  --tint-red-bg: #3a1a20;    --tint-red-bg2: #2c1519;  --tint-red-fg: #fca5a5;   --tint-red-bd: #5b2a30;
  --tint-green-bg: #123526;  --tint-green-bg2: #0f2a20; --tint-green-fg: #86efac; --tint-green-bd: #1e4d38;
  --tint-amber-bg: #3a2e12;  --tint-amber-bg2: #2c2410; --tint-amber-fg: #fcd34d; --tint-amber-bd: #5a481e;
  --tint-orange-bg: #3a2612; --tint-orange-bg2: #33240f; --tint-orange-fg: #fdba74; --tint-orange-bd: #5a3d1e;
  --tint-blue-bg: #14233d;   --tint-blue-bg2: #17294a; --tint-blue-fg: #93c5fd;   --tint-blue-bd: #2a3f66;
  --tint-indigo-bg: #1b2140; --tint-indigo-bg2: #171d38; --tint-indigo-fg: #c7d2fe;
  --grad-aviso: var(--tint-blue-bg);
}
/* Fundos em gradiente claro: trocados por tom chapado escuro no tema escuro */
:root[data-theme="dark"] .card.aviso { background: var(--tint-blue-bg); }
:root[data-theme="dark"] .card.aviso.lido { background: var(--surface); }
:root[data-theme="dark"] .stat-card.azul { background: var(--tint-blue-bg); }
:root[data-theme="dark"] .stat-card.amarelo { background: var(--tint-amber-bg); }
:root[data-theme="dark"] .stat-card.verde { background: var(--tint-green-bg); }
:root[data-theme="dark"] .stat-card.roxo { background: var(--tint-indigo-bg); }
:root[data-theme="dark"] .banner { background: var(--tint-blue-bg); }
:root[data-theme="dark"] .card-descendo { background: var(--tint-red-bg2); }
/* A logo colorida foi feita para fundo branco (o interior das letras é branco). No modo
   escuro, exibimos num "selo" branco para não aparecer esse branco solto. */
:root[data-theme="dark"] .login-logo { background: #ffffff; border-color: #dfe4ec; color: #0f172a; }
:root[data-theme="dark"] .login-logo .slogan { color: #64748b; }
/* O box branco no dark mode precisa de texto escuro (título "Recuperar senha", etc.) senão fica branco no branco. */
:root[data-theme="dark"] .login-logo .nome { color: #0f172a; }
:root[data-theme="dark"] .modulo-btn > .modulo-logo-full { background: #ffffff; padding: 8px 10px; border-radius: 12px; }

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

body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cinza);
  color: var(--texto);
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 50px rgba(15,23,42,.07);
}

/* Cabeçalho */
.topbar {
  background: var(--grad);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 3px 14px rgba(37,99,235,.25);
}
.topbar .logo { font-size: 20px; font-weight: 800; letter-spacing: -.3px; display: flex; align-items: center; gap: 8px; }
.topbar .logo span { opacity: .85; font-weight: 400; }
.topbar-logo-img { height: 38px; width: 38px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.topbar .sub { font-size: 12px; opacity: .88; margin-top: 1px; }
.topbar button {
  background: rgba(255,255,255,.2);
  border: none; color: #fff; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 9px; cursor: pointer;
  backdrop-filter: blur(4px); transition: background .15s;
}
.topbar button:active { background: rgba(255,255,255,.32); }
.topbar-acoes { display: flex; align-items: center; gap: 8px; }
.topbar .sino-btn {
  position: relative; width: 40px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.sino-btn .ico { display: block; }
.sino-badge {
  position: absolute; top: -5px; right: -5px; background: #dc2626; color: #fff;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font-size: 11px;
  font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.sino-pop {
  position: fixed; top: 60px; right: 12px; z-index: 300;
  width: 280px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--cinza-borda); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28); overflow: hidden;
}
.sino-cabec { font-weight: 800; font-size: 14px; padding: 12px 14px; color: var(--texto); border-bottom: 1px solid var(--cinza-borda); }
.sino-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border: none; border-bottom: 1px solid var(--borda); padding: 13px 14px;
  font-size: 14px; font-weight: 600; color: var(--texto); text-align: left; cursor: pointer;
}
.sino-item:active { background: var(--hover); }
.sino-num {
  background: #dc2626; color: #fff; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; font-size: 12px; font-weight: 800; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.sino-vazio { padding: 22px 16px; text-align: center; color: var(--texto-fraco); font-size: 14px; }

/* Central de lembretes (interruptores de push) */
.lembrete-linha { display: flex; align-items: center; gap: 12px; }
.lembrete-ico { color: var(--texto-fraco); display: flex; align-items: center; justify-content: center; flex: none; }
.lembrete-txt { flex: 1; min-width: 0; }
.lembrete-nome { font-weight: 700; font-size: 15px; color: var(--texto); }
.lembrete-desc { font-size: 12.5px; color: var(--texto-fraco); margin-top: 2px; line-height: 1.35; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-bola { position: absolute; inset: 0; background: var(--switch-off); border-radius: 26px; transition: .2s; cursor: pointer; }
.switch-bola::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: var(--surface); border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .switch-bola { background: #16a34a; }
.switch input:checked + .switch-bola::before { transform: translateX(20px); }

.content { padding: 18px; flex: 1; }

/* Login */
.login-wrap {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 26px;
}
.login-logo {
  text-align: center; margin-bottom: 26px;
  background: var(--surface); border: 1px solid var(--cinza-borda); border-radius: 24px; padding: 28px 22px;
  box-shadow: var(--sombra);
}
.login-logo-img { width: 100%; max-width: 230px; height: auto; display: inline-block; }
.login-logo .slogan { color: var(--texto-fraco); margin-top: 8px; font-size: 14px; }

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
input, select, textarea {
  width: 100%; padding: 13px 14px; font-size: 16px;
  border: 1.5px solid var(--cinza-borda); border-radius: 11px;
  background: var(--surface); color: var(--texto); font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37,99,235,.13);
}
.senha-wrap { position: relative; }
.senha-wrap input { padding-right: 46px; }
.olho-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 9px;
  color: var(--texto-fraco, #64748b); cursor: pointer;
  transition: color .15s, background .15s;
}
.olho-btn:hover { color: var(--azul); background: rgba(37,99,235,.10); }
.olho-btn:focus { outline: none; }

/* Alternador Área do Síndico / Área do Morador (duplo nível) */
.area-switch { display: flex; padding: 8px 14px; background: var(--surface-2); border-bottom: 1px solid var(--cinza-borda); }
.area-toggle { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border: 1.5px solid var(--azul); border-radius: 10px; background: var(--azul); color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: filter .15s; }
.area-toggle:hover { filter: brightness(1.06); }
.area-toggle.voltar { background: var(--surface); color: var(--azul); }

.hor-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.hor-tabela th { text-align: left; font-weight: 600; color: var(--texto); padding: 6px 10px 6px 0; width: 42%; }
.hor-tabela td { text-align: right; font-weight: 700; color: var(--texto); padding: 6px 0; }
.hor-tabela tr:not(:last-child) th, .hor-tabela tr:not(:last-child) td { border-bottom: 1px solid var(--cinza-borda); }

.btn {
  width: 100%; padding: 15px; font-size: 16px; font-weight: 700;
  border: none; border-radius: 12px; cursor: pointer;
  background: var(--grad); color: #fff; margin-top: 18px;
  box-shadow: var(--sombra-btn);
  transition: transform .1s, box-shadow .15s, opacity .15s;
}
.btn:active { transform: translateY(1px); }
.btn.verde { background: var(--grad-verde); box-shadow: 0 6px 16px rgba(22,163,74,.28); }
.btn.cinza { background: var(--surface-2); color: var(--texto); box-shadow: none; }
.btn.secundario { background: var(--tint-indigo-bg); color: var(--azul); box-shadow: none; margin-top: 8px; }
.btn:disabled { opacity: .55; box-shadow: none; }

.erro { color: var(--vermelho); font-size: 14px; margin-top: 12px; text-align: center; }
.erro:not(:empty) { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px; font-weight: 600; }
.erro:empty { display: none; }
.dica-login { margin-top: 22px; font-size: 12px; color: var(--texto-fraco); text-align: center; line-height: 1.7; }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--cinza-borda);
  border-radius: 16px; padding: 16px; margin-bottom: 12px;
  box-shadow: var(--sombra);
}
.card.aviso { border-left: 4px solid var(--azul); background: linear-gradient(135deg,#f5f8ff,#eef3ff); }
.card.aviso.lido { opacity: .6; border-left-color: var(--cinza-borda); background: var(--surface); }

.titulo-secao { font-size: 13px; font-weight: 800; color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .6px; margin: 22px 0 10px; }

.pkg-desc { font-weight: 700; font-size: 16px; }
.pkg-meta { font-size: 13px; color: var(--texto-fraco); margin-top: 4px; line-height: 1.6; }
.badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px; margin-top: 8px;
}
.badge.recebido { background: var(--tint-amber-bg); color: var(--tint-amber-fg); }
.badge.retirado { background: var(--tint-green-bg); color: var(--tint-green-fg); }

.row { display: flex; gap: 8px; align-items: flex-end; }
.row > div { flex: 1; }

/* Scanner */
#scanner-box { margin-top: 10px; border-radius: 14px; overflow: hidden;
  display: none; background: #000; position: relative; }
#scanner-box.ativo { display: block; }
#video { width: 100%; display: block; }
.scan-mira {
  position: absolute; top: 50%; left: 10%; right: 10%;
  height: 2px; background: #22c55e; box-shadow: 0 0 8px #22c55e;
}

.scan-status { font-size: 13px; line-height: 1.5; margin-top: 8px; color: var(--texto-fraco); }
.scan-status.ok { color: var(--tint-green-fg); background: var(--tint-green-bg2); padding: 10px 12px; border-radius: 11px; }
.scan-status.alerta { color: var(--tint-amber-fg); background: var(--tint-amber-bg2); padding: 10px 12px; border-radius: 11px; }
.scan-status.lendo { color: var(--azul); background: var(--tint-blue-bg); padding: 10px 12px; border-radius: 11px; }
.reg-ok { display: flex; gap: 10px; align-items: flex-start; background: var(--tint-green-bg2);
  border: 1px solid var(--tint-green-bd); color: var(--tint-green-fg); padding: 12px 14px;
  border-radius: 12px; font-size: 14px; line-height: 1.45; margin: 4px 0 12px; }
.reg-ok svg { flex-shrink: 0; margin-top: 1px; }
.reg-ok .muted { color: var(--tint-green-fg); opacity: .8; }
.aviso-morador { display: flex; gap: 8px; align-items: flex-start; background: var(--tint-amber-bg2);
  border: 1px solid var(--tint-amber-bd); color: var(--tint-amber-fg); padding: 10px 12px;
  border-radius: 11px; font-size: 13px; line-height: 1.4; margin: 8px 0 2px; }
.aviso-morador svg { flex-shrink: 0; margin-top: 1px; }
.reg-erro-box { display: flex; gap: 8px; align-items: flex-start; background: var(--tint-red-bg2);
  border: 1px solid var(--tint-red-bd); color: var(--tint-red-fg); padding: 11px 13px;
  border-radius: 11px; font-size: 14px; line-height: 1.45; margin: 6px 0 4px; }
.reg-erro-box svg { flex-shrink: 0; margin-top: 1px; }
.pin-input { text-align: center; font-size: 30px; letter-spacing: 14px; text-indent: 14px; font-weight: 800; }
.pin-erro { color: var(--tint-red-fg); font-size: 13px; min-height: 18px; margin: 6px 0 2px; font-weight: 600; }
.modulo-btn.card-emg-ativa { animation: emgcardblink 1s infinite; }
@keyframes emgcardblink {
  0%, 100% { background: var(--tint-red-bg); border-color: var(--tint-red-fg); }
  50% { background: var(--surface); border-color: var(--tint-red-bd); }
}

.vazio { text-align: center; color: var(--texto-fraco); padding: 36px 20px; font-size: 14px; }
.vazio .emoji { font-size: 40px; display: block; margin-bottom: 8px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-fg); padding: 13px 22px; border-radius: 12px;
  font-size: 14px; font-weight: 600; z-index: 100; max-width: 90%; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

/* Janelinha (modal) — ex: registrar retirada */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
}
.modal-caixa {
  background: var(--surface); border-radius: 18px; padding: 22px; width: 100%; max-width: 400px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  max-height: 88vh; overflow-y: auto;
}
.modal-titulo { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.modal-sub { font-size: 13px; color: var(--texto-fraco); margin-bottom: 14px; }

/* Central de módulos (síndico): botões quadrados lado a lado */
.modulo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modulo-btn {
  position: relative;
  aspect-ratio: 1 / 1; border: 1px solid var(--cinza-borda); border-radius: 18px;
  background: var(--surface); box-shadow: var(--sombra); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s, box-shadow .12s;
}
.modulo-badge {
  position: absolute; top: 10px; right: 12px; background: #dc2626; color: #fff;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: 12px;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
}
/* Badge à esquerda: moradores "descendo" no quadro Encomendas da portaria. */
.modulo-badge.badge-esq { left: 12px; right: auto; background: #dc2626; box-shadow: 0 0 0 3px #fee2e2; }
.modulo-badge.badge-esq::before { content: "↓"; margin-right: 1px; font-size: 12px; }
/* Card destacado quando o morador está descendo buscar. */
.card-descendo { border-color: var(--tint-red-bd); box-shadow: 0 0 0 1px #fecaca, var(--sombra); background: linear-gradient(180deg, #fff6f6, #fff); }
.modulo-btn:active { transform: translateY(1px); }
.modulo-ico { line-height: 1; color: var(--texto-fraco); display: flex; align-items: center; justify-content: center; height: 46px; }
.modulo-ico .ico { display: block; }
.modulo-nome { font-size: 15px; font-weight: 800; color: var(--texto); }
.modulo-logo-full { height: 64px; width: auto; max-width: 94%; object-fit: contain; }

/* Calendário de agendamentos */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 800; color: var(--texto-fraco); padding: 2px 0; }
.cal-day { min-height: 56px; border: 1px solid var(--cinza-borda); border-radius: 9px; padding: 4px;
  background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-day.vazio { background: transparent; border: none; cursor: default; }
.cal-day.hoje { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul) inset; }
.cal-day .dnum { font-size: 12px; font-weight: 700; color: var(--texto); }
.cal-dot { font-size: 9px; line-height: 1.25; border-radius: 5px; padding: 1px 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-dot.pend { background: var(--tint-amber-bg); color: var(--tint-amber-fg); }
.cal-dot.conf { background: var(--tint-green-bg); color: var(--tint-green-fg); }

/* Abas */
.tabs { display: flex; gap: 5px; background: var(--tabs-bg); padding: 5px; border-radius: 13px; margin-bottom: 16px; }
.tab { flex: 1; text-align: center; padding: 10px 3px; border-radius: 10px; font-size: 12px;
  font-weight: 700; color: var(--texto-fraco); cursor: pointer; border: none; background: transparent;
  white-space: nowrap; transition: background .15s, color .15s; }
.tab.active { background: var(--surface); color: var(--azul); box-shadow: 0 2px 6px rgba(15,23,42,.1); }

/* Dashboard / relatórios */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.stat-card { background: var(--surface); border: 1px solid var(--cinza-borda); border-radius: 16px; padding: 15px; text-align: center; box-shadow: var(--sombra); }
.stat-card.azul { background: linear-gradient(135deg,#eff6ff,#e6efff); border-color: var(--tint-blue-bd); }
.stat-card.amarelo { background: linear-gradient(135deg,#fffbeb,#fff5da); border-color: var(--tint-amber-bd); }
.stat-card.verde { background: linear-gradient(135deg,#f0fdf4,#e6fbec); border-color: var(--tint-green-bd); }
.stat-card.roxo { background: linear-gradient(135deg,#eef2ff,#e6e9ff); border-color: #c7d2fe; }
.stat-num { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -1px; }
.stat-label { font-size: 12px; color: var(--texto-fraco); margin-top: 3px; }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 10px; padding: 8px 0; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bar { width: 68%; background: var(--grad); border-radius: 5px 5px 0 0; min-height: 3px; }
.bar-lbl { font-size: 10px; color: var(--texto-fraco); }
.bar-val { font-size: 10px; font-weight: 700; }

/* Itens de lista */
.li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; background: var(--surface); border: 1px solid var(--cinza-borda);
  border-radius: 13px; margin-bottom: 8px; box-shadow: var(--sombra); }
.li .info { min-width: 0; }
.li .nome { font-weight: 700; font-size: 15px; }
.li .det { font-size: 12px; color: var(--texto-fraco); margin-top: 2px; }
.li .acoes { display: flex; gap: 6px; flex-shrink: 0; }
.icon-btn { border: none; background: var(--chip-neutro); width: 38px; height: 38px; border-radius: 10px;
  font-size: 15px; cursor: pointer; transition: filter .1s; }
.icon-btn:active { filter: brightness(.9); }
.icon-btn.danger { background: var(--tint-red-bg2); }

.grupo-bloco { font-size: 12px; font-weight: 800; color: var(--azul); text-transform: uppercase;
  letter-spacing: .6px; margin: 16px 0 6px; }

.foto-thumb { width: 100%; max-height: 160px; object-fit: cover; border-radius: 12px; margin-top: 8px; }

/* Linha compacta de lista (ex.: comunicados publicados p/ o síndico) */
.lista-linha { padding: 12px 14px; margin-bottom: 8px; }
.mini-icone { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--borda, #e2e8f0); border-radius: 10px;
  background: var(--hover); font-size: 17px; line-height: 1; cursor: pointer; text-decoration: none; color: inherit; }
.mini-icone:hover { background: var(--surface-2); }

/* Busca inteligente de unidade/morador (portaria) */
.busca-sug { border: 0.5px solid var(--cinza-borda, #e2e8f0); border-radius: 12px; margin-top: 4px;
  max-height: 260px; overflow-y: auto; background: var(--surface); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.busca-item { padding: 10px 12px; border-bottom: 0.5px solid var(--borda); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; gap: 8px; }
.busca-item:last-child { border-bottom: 0; }
.busca-item:hover { background: var(--tint-indigo-bg2); }
.busca-item svg { flex-shrink: 0; color: var(--texto-fraco); }

/* Grade semanal de atividades (rolável na horizontal) */
.atv-grade { border-collapse: separate; border-spacing: 0; min-width: 480px; font-size: 12px; }
.atv-th { background: var(--azul, #2563eb); color: #fff; font-weight: 700; padding: 8px 6px; text-align: center;
  position: sticky; top: 0; white-space: nowrap; }
.atv-td { border-bottom: 0.5px solid var(--borda); padding: 8px 6px; text-align: center; color: var(--texto-fraco);
  vertical-align: middle; line-height: 1.5; white-space: nowrap; }
.atv-first { text-align: left; min-width: 120px; position: sticky; left: 0; background: var(--hover);
  font-weight: 700; color: var(--texto); z-index: 1; }
.atv-th.atv-first { background: var(--azul, #2563eb); color: #fff; z-index: 2; }
.atv-faixa { font-size: 11px; font-weight: 600; color: #94a3b8; }
.atv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* Puxar para atualizar (app instalado na tela inicial) */
#ptr-ind { position: fixed; top: -48px; left: 50%; transform: translateX(-50%) translateY(0); z-index: 9999;
  width: 40px; height: 40px; border-radius: 50%; background: var(--surface); box-shadow: 0 3px 12px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
  transition: transform .18s ease, opacity .18s ease; }
#ptr-ind .ptr-spin { width: 20px; height: 20px; border: 2.5px solid #dbeafe; border-top-color: var(--azul); border-radius: 50%; }
#ptr-ind.ready .ptr-spin { border-top-color: #16a34a; }
#ptr-ind.loading .ptr-spin { animation: ptr-rot .7s linear infinite; }
@keyframes ptr-rot { to { transform: rotate(360deg); } }

.link { color: var(--azul); font-weight: 700; cursor: pointer; text-decoration: none; }
.center { text-align: center; }
.muted { color: var(--texto-fraco); font-size: 13px; }
.divider { height: 1px; background: var(--cinza-borda); margin: 18px 0; }

.banner { background: linear-gradient(135deg,#eff6ff,#e8eeff); border: 1px solid var(--tint-blue-bd); border-radius: 13px; padding: 12px 14px;
  font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.banner button { margin-left: auto; }
.btn.pequeno { width: auto; padding: 9px 14px; margin: 0; font-size: 13px; box-shadow: none; }

.busca-row { display: flex; gap: 8px; margin-bottom: 12px; }
.busca-row input { flex: 1; }
.busca-row select { width: auto; }

/* Cards de menu do morador */
.menu-card { display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--cinza-borda); border-radius: 16px; padding: 16px; margin-bottom: 10px;
  box-shadow: var(--sombra); cursor: pointer; transition: transform .1s, background .15s; }
.menu-card:active { transform: scale(.99); background: var(--hover); }
.menu-ico { position: relative; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: var(--tint-indigo-bg); border-radius: 14px; flex-shrink: 0; color: var(--azul); }
.menu-ico svg { display: block; }
.card-badge { position: absolute; top: -5px; right: -5px; background: var(--vermelho); color: #fff;
  font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; line-height: 20px; border-radius: 10px;
  padding: 0 5px; box-shadow: 0 2px 6px rgba(220,38,38,.4); }
.menu-txt { flex: 1; min-width: 0; }
.menu-titulo { font-weight: 700; font-size: 16px; }
.menu-sub { font-size: 13px; color: var(--texto-fraco); margin-top: 1px; }
.menu-seta { font-size: 26px; color: var(--seta); flex-shrink: 0; }

.hidden { display: none !important; }