* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
input, textarea, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}
:root {
  --red: #df0000;
  --red-dark: #b00000;
  --black: #111;
  --grey-1: #666;
  --grey-2: #999;
  --grey-3: #ddd;
  --grey-4: #f5f5f5;
  --grey-5: #fafafa;
  --white: #fff;
  --font-scale: 1;
}
html[data-theme="dark"] {
  --black: #f0f0f0;
  --grey-1: #b0b0b0;
  --grey-2: #888;
  --grey-3: #3a3a3a;
  --grey-4: #222;
  --grey-5: #1a1a1a;
  --white: #121212;
}
html,
body {
  height: 100%;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--black);
  background: var(--bg-app, #e8e8e8);
}
html[data-theme="dark"] {
  --bg-app: #000;
}
body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
}

.stage {
  display: flex;
  gap: 24px;
  padding: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}
.phone {
  width: 390px;
  height: 780px;
  background: var(--white);
  border-radius: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: #000;
  border-radius: 0 0 18px 18px;
  z-index: 50;
}
.view {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.view.active {
  display: flex;
}
.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px 100px;
  /* Tamanho de fonte (Meu Perfil > Tamanho da fonte): escala só o conteúdo da
     tela, não o frame do app inteiro. Zoom no .phone (frame fixo 390x780)
     fazia o "celular" simulado renderizar maior que a janela do navegador e
     cortar nas bordas — aqui o .content já tem overflow-y:auto, então o extra
     vertical apenas gera scroll, e overflow-x:hidden evita vazar na horizontal. */
  zoom: var(--font-scale);
}

/* Header */
.header {
  padding: 40px 20px 16px;
  border-bottom: 1px solid var(--grey-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.header .templo {
  font-size: 12px;
  color: var(--grey-1);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.header .sessao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.header .sessao h1 {
  font-size: 18px;
  font-weight: 700;
}
.header .sessao .badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  background: #e6f5e9;
  color: #1a7a3a;
  font-weight: 600;
}
.header .meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--grey-1);
}

/* Tabs */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--grey-3);
  background: var(--white);
}
.tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-1);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab.active {
  color: var(--red);
  border-bottom-color: var(--red);
}
.tab .count {
  display: inline-block;
  background: var(--grey-4);
  color: var(--grey-1);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
}
.tab.active .count {
  background: var(--red);
  color: var(--white);
}

/* Senha card */
.senha {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--grey-3);
  border-radius: 10px;
  margin-bottom: 8px;
  gap: 12px;
  background: var(--white);
  position: relative;
}
.senha.atendido {
  opacity: 0.45;
}
.senha.em-atendimento {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 6%, var(--white));
}
.senha .codigo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 58px;
}
.senha .codigo {
  font-weight: 700;
  font-size: 15px;
  color: var(--black);
  font-family: "SF Mono", Consolas, monospace;
}
.senha .codigo.pref {
  color: var(--red);
}
.senha .info {
  flex: 1;
  min-width: 0;
}
.senha .nome {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.senha .tags {
  font-size: 11px;
  color: var(--grey-1);
  margin-top: 2px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.tag.pref {
  background: var(--red);
  color: white;
}
.tag.clickable {
  cursor: pointer;
  user-select: none;
}
.tag.clickable:hover {
  background: var(--red-dark);
}
.tag.com {
  background: var(--grey-4);
  color: var(--grey-1);
}
.tag.v1 {
  background: #eaf3ff;
  color: #0a5dab;
}
.tag.v2 {
  background: #f2eaff;
  color: #5e2ba8;
}
.tag.done {
  background: #e6f5e9;
  color: #1a7a3a;
}
.tag.wait {
  background: var(--grey-4);
  color: var(--grey-1);
}
.tag.time {
  background: #fff3e0;
  color: #b05500;
  font-family: "SF Mono", Consolas, monospace;
}
.crono {
  font-size: 11px;
  color: var(--grey-1);
  font-family: "SF Mono", Consolas, monospace;
  font-weight: 600;
  margin-left: 2px;
}
.crono.live {
  color: #b05500;
}
.senha .senha-actions {
  display: flex;
  gap: 2px;
}
.senha .eye,
.senha .trash {
  color: var(--grey-2);
  padding: 6px;
  cursor: pointer;
}
.senha .eye:hover {
  color: var(--red);
}
.senha .trash:hover {
  color: var(--red);
}

.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--grey-2);
  font-size: 13px;
}

/* Bottom bar */
.bottombar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px 20px;
  background: linear-gradient(to top, var(--white) 70%, rgba(255, 255, 255, 0));
  display: flex;
  gap: 8px;
}
.bottombar button {
  flex: 1;
}

/* ── Aviso persistente: instalar como app (PWA) ──────────────────────── */
#pwa-install-banner {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
#pwa-install-banner.visible {
  display: flex;
}
#pwa-install-banner .pwa-ico {
  font-size: 20px;
  flex-shrink: 0;
}
#pwa-install-banner .pwa-txt {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
#pwa-install-banner .pwa-txt b {
  display: block;
  font-size: 12.5px;
}
#pwa-install-banner .pwa-txt span {
  display: block;
  font-size: 11px;
  opacity: 0.9;
}
#pwa-install-banner .pwa-btn {
  flex-shrink: 0;
  background: #fff;
  color: var(--red-dark);
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#pwa-install-banner .pwa-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 2px;
}

/* ── Global Bottom Nav ──────────────────────────────────────────────── */
#app-bottom-nav {
  flex-shrink: 0;
  display: none;
  border-top: 1px solid var(--grey-3);
  background: var(--white);
}
#app-bottom-nav.visible {
  display: flex;
}
.bnav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--grey-1);
  background: none;
  border: none;
  border-radius: 0;
  padding: 8px 4px 12px;
  cursor: pointer;
  transition: color .15s;
  position: relative;
}
.bnav-btn:active { background: var(--grey-4); }
.bnav-btn.active { color: var(--red); }
.bnav-btn svg { width: 22px; height: 22px; stroke: currentColor; }
.bnav-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  /* AVISO: vermelho FIXO, nunca `var(--red)` (decisao do usuario em
     01/10/2026). A cor da marca e escolhida por cada casa, e numa casa de marca
     azul o aviso de mensagem nao lida sairia azul -- deixaria de ser lido como
     aviso. Vale para os dois badges da barra (caixa e pendencias do Admin):
     dois vermelhos diferentes lado a lado pareceriam defeito. Mesma regra do
     semaforo da mensalidade e da tarja de suporte (§9, §13). */
  background: #c62828;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  padding: 0 3px;
  text-align: center;
  display: none;
}
/* Buttons */
button {
  font-family: inherit;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}
.btn-primary {
  background: var(--red);
  color: white;
}
.btn-primary:hover {
  background: var(--red-dark);
}
.btn-primary:disabled {
  background: var(--grey-3);
  color: var(--grey-1);
  cursor: not-allowed;
}
.btn-secondary {
  background: var(--grey-4);
  color: var(--black);
}
.btn-secondary:hover {
  background: var(--grey-3);
}
.btn-ghost {
  background: transparent;
  color: var(--red);
}
.btn-danger {
  background: #b00000;
  color: white;
}

/* Modal */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
#modal-dialogo {
  z-index: 200;
}
.modal-backdrop.active {
  display: flex;
}
.modal {
  background: var(--white);
  width: 100%;
  max-height: 92%;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.25s ease-out;
}
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes wppPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
  }
}
#wpp-header-dot {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
  margin-right: 2px;
  pointer-events: none;
}
#wpp-header-dot.wpp-ok {
  background: #22c55e;
  animation: wppPulse 2s ease-in-out infinite;
}
#wpp-header-dot.wpp-err {
  background: #ef4444;
  animation: none;
}
.modal h2 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}
.modal h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 20px;
}
.modal label {
  font-size: 12px;
  color: var(--grey-1);
  font-weight: 600;
}
.modal input,
.modal select,
.modal textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--grey-3);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: var(--white);
  color: var(--black);
  margin-top: 4px;
}
.modal input:focus,
.modal select:focus {
  outline: none;
  border-color: var(--red);
}
input,
select,
textarea {
  color: var(--black);
  background: var(--white);
  /* textarea criado por JS sem classe saía em monoespaçada (motivo da
     rejeição do reembolso, comentário e pedido de despesa do rateio). */
  font-family: inherit;
}
input::placeholder,
textarea::placeholder {
  color: var(--grey-2);
}
html[data-theme="dark"] .chip.pref,
html[data-theme="dark"] .tag.pref {
  background: #4a1a1a;
  color: #ffb4b4;
}
html[data-theme="dark"] .senha.em_passe,
html[data-theme="dark"] .senha.em_atendimento {
  background: #2a1515;
}
html[data-theme="dark"] .tag.time {
  background: #3a2508;
  color: #ffd08c;
}
html[data-theme="dark"] .tag.v1 {
  background: #0a2040;
  color: #90c4ff;
}
html[data-theme="dark"] .tag.v2 {
  background: #220a40;
  color: #c4a0ff;
}
html[data-theme="dark"] .tag.done {
  background: #0a2a14;
  color: #7ae09a;
}
html[data-theme="dark"] .tag.com {
  background: #2a2a2a;
  color: var(--grey-1);
}
html[data-theme="dark"] .tag.wait {
  background: #2a2a2a;
  color: var(--grey-1);
}
html[data-theme="dark"] .admin-item {
  background: var(--white);
  border-color: var(--grey-3);
}
html[data-theme="dark"] .config-row {
  background: var(--white);
  border-color: var(--grey-3);
}
html[data-theme="dark"] .senha {
  background: var(--white);
}
html[data-theme="dark"] .role-pill {
  background: var(--grey-4);
  color: var(--grey-1);
}
html[data-theme="dark"] .role-pill.admin {
  background: #4a1a1a;
  color: #ffb4b4;
}
html[data-theme="dark"] select option {
  background: var(--grey-4);
  color: var(--black);
}
html[data-theme="dark"] code {
  background: #2a2a2a;
  color: #e0e0e0;
  padding: 1px 4px;
  border-radius: 3px;
}
html[data-theme="dark"] .approval-card {
  background: #2a2000;
  border-color: #6a4a00;
}
html[data-theme="dark"] .approval-card .who {
  color: #ffcf60;
}
html[data-theme="dark"] .approval-card .reason {
  background: var(--grey-4);
}
html[data-theme="dark"] .dash-pend {
  background: #2a2000;
  border-color: #6a4a00;
  color: #ffcf60;
}
html[data-theme="dark"] .senha.em-atendimento {
  background: #2a1515;
}
html[data-theme="dark"] #consulente-selecionado {
  background: #2a1515;
  border-color: var(--red);
}
html[data-theme="dark"] .avatar-lg .cam {
  background: var(--grey-4);
  border-color: var(--grey-4);
}
html[data-theme="dark"] #aviso-pendencias {
  background: #2a2000 !important;
  border-color: #6a4a00 !important;
  color: #ffcf60 !important;
}
html[data-theme="dark"] .dash-pend .cnt {
  background: #6a4a00;
}
html[data-theme="dark"] .fin-saldo-pos {
  background: #0a2a14;
}
html[data-theme="dark"] .fin-saldo-neg {
  background: #2a0a0a;
}
.field {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}
/* LGPD badge via ::before */
/* Quatro estados, quatro cores. "Aguardando" (pedido feito, sem resposta) não pode
   dividir a bolinha com "nunca pediram": são filas diferentes — uma espera a
   pessoa, a outra espera a Casa. */
.admin-item[data-lgpd="ok"]::before,
.senha[data-lgpd="ok"]::before,
.admin-item[data-lgpd="no"]::before,
.senha[data-lgpd="no"]::before,
.admin-item[data-lgpd="aguardando"]::before,
.senha[data-lgpd="aguardando"]::before,
.admin-item[data-lgpd="recusado"]::before,
.senha[data-lgpd="recusado"]::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 1;
}
.admin-item[data-lgpd="ok"]::before,
.senha[data-lgpd="ok"]::before { background: #2E7D32; }
.admin-item[data-lgpd="no"]::before,
.senha[data-lgpd="no"]::before { background: #b00000; }
.admin-item[data-lgpd="aguardando"]::before,
.senha[data-lgpd="aguardando"]::before { background: #e08900; }
.admin-item[data-lgpd="recusado"]::before,
.senha[data-lgpd="recusado"]::before { background: #333; }
/* Event cards */
.ev-card {
  border: 1px solid var(--grey-3);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--white);
}
.ev-card-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.3;
}
.ev-card-data {
  font-size: 12px;
  color: var(--grey-1);
  margin-top: 2px;
}
.ev-btn-editar {
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0 2px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ev-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ev-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}
.ev-tag-pub {
  background: #e3f2fd;
  color: #1565c0;
}
.ev-tag-fec {
  background: #ede7f6;
  color: #6a1b9a;
}
.ev-obs {
  font-size: 12px;
  color: var(--grey-2);
  font-style: italic;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev-not-ok {
  font-size: 11px;
  font-weight: 600;
  color: #2e7d32;
}
.ev-not-off {
  font-size: 11px;
  color: var(--grey-3);
}
.ev-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--grey-1);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 14px 0 8px;
}
html[data-theme="dark"] .ev-card {
  background: var(--white);
  border-color: var(--grey-3);
}
html[data-theme="dark"] .ev-tag-pub {
  background: #0a2040;
  color: #90c4ff;
}
html[data-theme="dark"] .ev-tag-fec {
  background: #220a40;
  color: #c4a0ff;
}
html[data-theme="dark"] .ev-not-ok {
  color: #7ae09a;
}

/* Toggle buttons */
/* Pill switch — segmented control unificado */
.pill-switch,
.toggle-group {
  display: flex;
  background: var(--grey-4);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
  margin-top: 6px;
}
.pill-switch button,
.toggle-group button {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-1);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.pill-switch button.active,
.toggle-group button.active {
  background: var(--red);
  color: white;
}
html[data-theme="dark"] .pill-switch,
html[data-theme="dark"] .toggle-group {
  background: var(--grey-3);
}
html[data-theme="dark"] .pill-switch button.active,
html[data-theme="dark"] .toggle-group button.active {
  background: var(--red);
  color: white;
}

/* Search result list */
.search-results {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--grey-3);
  border-radius: 8px;
  margin-top: 6px;
}
.search-results.empty {
  display: none;
}
.search-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--grey-3);
  cursor: pointer;
}
.search-item:last-child {
  border: none;
}
.search-item:hover {
  background: var(--grey-4);
}
.search-item .nome {
  font-size: 14px;
  font-weight: 500;
}
.search-item .meta {
  font-size: 12px;
  color: var(--grey-1);
  margin-top: 2px;
}

/* Ficha */
.ficha-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--grey-3);
}
.ficha-row:last-child {
  border: none;
}
.ficha-row .lbl {
  color: var(--grey-1);
  font-size: 12px;
}
.ficha-row .val {
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}
/* Sanfona (accordion) */
.sanfona {
  border: 1px solid var(--grey-3);
  border-radius: 10px;
  margin-top: 10px;
  overflow: hidden;
}
.sanfona-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  cursor: pointer;
  background: var(--grey-5);
  user-select: none;
  gap: 8px;
}
.sanfona-hdr.sanfona-open {
  border-bottom: 1px solid var(--grey-3);
}
.sanfona-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sanfona-arrow {
  font-size: 13px;
  color: var(--grey-1);
  display: inline-block;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.sanfona-hdr.sanfona-open .sanfona-arrow {
  transform: rotate(180deg);
}
.sanfona-body {
  display: none;
  padding: 4px 14px 14px;
  background: var(--white);
}
.sanfona-body.sanfona-open {
  display: block;
}
/* Linhas de detalhe no modal de visualização de lançamento */
._ver-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--grey-3);
}
._ver-row:last-child {
  border-bottom: none;
}
._ver-row > span:first-child {
  color: var(--grey-1);
  font-size: 13px;
  flex-shrink: 0;
  margin-right: 12px;
}
._ver-row > span:last-child {
  font-weight: 600;
  color: var(--text);
}
/* Limita histórico, anotações e msgs wpp a ~3 itens com scroll */
#ficha-historico,
#ficha-anotacoes,
#ficha-mensagens {
  max-height: 120px;
  overflow-y: auto;
}
/* Itens do histórico */
.hist-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--grey-3);
  font-size: 13px;
}
.hist-item:last-child {
  border: none;
}
.hist-item .top {
  display: flex;
  justify-content: space-between;
}
.hist-item .gira {
  font-weight: 600;
}
.hist-item .data {
  color: var(--grey-1);
  font-size: 12px;
}
.hist-item .tipo {
  font-size: 12px;
  color: var(--grey-1);
  margin-top: 2px;
}

/* Chamada */
.chamada-box {
  padding: 30px 20px;
  text-align: center;
  background: var(--red);
  color: white;
  border-radius: 14px;
}
.chamada-box .label {
  font-size: 13px;
  opacity: 0.85;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.chamada-box .codigo {
  font-size: 56px;
  font-weight: 800;
  font-family: "SF Mono", Consolas, monospace;
  margin: 12px 0 4px;
  letter-spacing: 2px;
}
.chamada-box .nome {
  font-size: 20px;
  font-weight: 500;
}
.chamada-box .sub {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 8px;
}

/* Fase switch */
.fase-switch {
  padding: 8px;
  background: var(--grey-5);
  border-bottom: 1px solid var(--grey-3);
}
.fase-switch .pill {
  display: flex;
  background: var(--white);
  border: 1px solid var(--grey-3);
  border-radius: 20px;
  overflow: hidden;
}
.fase-switch .pill.pill-full {
  width: 100%;
  border-radius: 10px;
}
.fase-switch .pill button {
  padding: 4px 12px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-1);
  cursor: pointer;
}
.fase-switch .pill.pill-full button {
  flex: 1;
  padding: 8px 0;
  font-size: 14px;
}
.fase-switch .pill button.active {
  background: var(--red);
  color: white;
}

/* Login */
#view-login {
  background: var(--white);
}
.login-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
}
.login-inner img {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  border-radius: 10px;
}
.login-inner .templo-nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  text-align: center;
  margin-bottom: 50px;
}
.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-form form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--grey-3);
  border-radius: 10px;
  font-size: 14px;
}
.login-form .btn-primary {
  width: 100%;
}
.login-form input:focus {
  outline: none;
  border-color: var(--red);
}
/* Atalho do consulente para o calendário, abaixo do login (index.html). */
.login-calendario { width: 100%; margin-top: 28px; }
.login-calendario[hidden] { display: none; }
.login-calendario-sep { display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 12px; color: var(--grey-1); }
.login-calendario-sep::before, .login-calendario-sep::after { content: ""; flex: 1; height: 1px; background: var(--grey-3); }
.login-calendario-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--grey-3); background: var(--grey-4); color: var(--black); text-decoration: none; }
.login-calendario-card:active { transform: scale(.99); }
.login-calendario-card .ic { flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--red); color: #fff;
  display: grid; place-items: center; }
.login-calendario-card .txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.login-calendario-card b { font-size: 14px; }
.login-calendario-card small { font-size: 12px; color: var(--grey-1); }
.login-calendario-card .seta { font-size: 24px; line-height: 1; color: var(--red); }
.login-pin-input {
  text-align: center;
  font-size: 22px !important;
  font-family: 'SF Mono', Consolas, monospace;
  font-weight: 700;
  letter-spacing: 10px !important;
  padding-left: 20px !important;
}

/* Caption / doc */
.caption {
  max-width: 320px;
  font-size: 13px;
  color: #333;
  line-height: 1.6;
}
.caption h3 {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--red);
}
.caption ul {
  margin-left: 18px;
  margin-top: 8px;
}
.caption li {
  margin-bottom: 4px;
}
.caption code {
  background: var(--grey-4);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
}

.mini-btn {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--grey-3);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  color: var(--grey-1);
}
.mini-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.passe-btn {
  font-size: 11px;
  padding: 3px 8px;
  background: #e6f5e9;
  color: #1a7a3a;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  margin-left: 6px;
}
.atender-btn {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  margin-left: 6px;
}

/* Admin */
.admin-header {
  padding: 40px 16px 12px;
  border-bottom: 1px solid var(--grey-3);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
}
.admin-header h1 {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}
.admin-header .icon-btn {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--grey-1);
  display: flex;
}
.admin-header .icon-btn:hover {
  color: var(--red);
}
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.admin-card {
  padding: 16px 12px;
  border: 1px solid var(--grey-3);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  background: var(--white);
  transition: all 0.15s;
  position: relative;
}
.admin-card:hover {
  border-color: var(--red);
  transform: translateY(-1px);
}
.admin-card .ico {
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--red);
  display: flex;
  justify-content: center;
}
.admin-card .ttl {
  font-size: 13px;
  font-weight: 600;
}
.admin-card .sub {
  font-size: 11px;
  color: var(--grey-1);
  margin-top: 2px;
}
.admin-card .pin {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--red);
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
}
.admin-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-item {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--grey-3);
  border-radius: 10px;
  gap: 10px;
  background: var(--white);
  margin-bottom: 5px;
  position: relative;
}
.admin-item .info {
  flex: 1;
  min-width: 0;
}
.admin-item .info .nome {
  font-size: 14px;
  font-weight: 600;
}
/* ⚠️ As MESMAS medidas sem exigir o `.info` no meio. A lista de pedidos da rifa
   monta `.nome` e `.meta` como filhos diretos do `.admin-item`, não casava com
   a regra acima e caía no tamanho base do conteúdo: nome e detalhe saíam os
   dois com 16px, maiores que o resto do app e sem hierarquia entre si.
   ⚠️ Vem DEPOIS da regra do `.info` e com a mesma especificidade de classe, mas
   só alcança filho direto — então quem já usa `.info` continua mandando. */
.admin-item > .nome { font-size: 14px; }
.admin-item > .meta { font-size: 12px; }
.admin-item .info .meta {
  font-size: 12px;
  color: var(--grey-1);
  margin-top: 2px;
}
.admin-item .ord {
  font-size: 11px;
  color: var(--grey-2);
  width: 22px;
  text-align: center;
  font-weight: 700;
}
.admin-item .acts {
  display: flex;
  gap: 4px;
}
.admin-item .acts button {
  padding: 6px 8px;
  font-size: 11px;
  background: transparent;
  color: var(--grey-1);
  border: none;
}
.admin-item .acts button:hover {
  color: var(--red);
}
.admin-section-title {
  font-size: 11px;
  color: var(--grey-1);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 14px 0 6px;
}
/* Pontos cantados: cada linha de trabalho é uma sanfona.
   A lista inteira aberta passava de cem itens e obrigava a rolar muito para
   achar a linha do dia. Fechada, cabe tudo na tela e a contagem no cabeçalho
   diz o que tem dentro sem precisar abrir. */
.linha-sanfona {
  border: 1px solid var(--grey-3);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--white);
}
.linha-sanfona > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--grey-1);
  user-select: none;
}
.linha-sanfona > summary::-webkit-details-marker { display: none; }
.linha-sanfona > summary .conta {
  font-weight: 600;
  color: var(--grey-2);
  letter-spacing: 0;
}
.linha-sanfona > summary .seta {
  margin-left: auto;
  transition: transform .18s ease;
  color: var(--grey-2);
  flex-shrink: 0;
}
.linha-sanfona[open] > summary { border-bottom: 1px solid var(--grey-3); }
.linha-sanfona[open] > summary .seta { transform: rotate(90deg); }
.linha-sanfona .corpo { padding: 8px 10px 10px; }
/* Dentro da sanfona os itens já estão emoldurados pelo bloco. */
.linha-sanfona .corpo .admin-item { margin-bottom: 6px; }
.linha-sanfona .corpo .admin-item:last-child { margin-bottom: 0; }
.chip {
  display: inline-block;
  padding: 0px 8px;
  background: var(--grey-4);
  border-radius: 10px;
  font-size: 9px;
  color: var(--grey-1);
  margin: 2px;
}
.chip.pref {
  background: color-mix(in srgb, var(--red) 6%, var(--white));
  color: var(--red);
  border: 1px solid var(--red);
}
.config-row {
  padding: 12px 14px;
  border: 1px solid var(--grey-3);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--white);
}
.config-row .lbl {
  font-size: 11px;
  color: var(--grey-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.config-row .val {
  font-size: 14px;
  font-weight: 500;
  margin-top: 4px;
}
.config-row .ed {
  float: right;
  font-size: 11px;
  color: var(--red);
  cursor: pointer;
  font-weight: 600;
}
.approval-card {
  padding: 14px;
  border: 1px solid #f5b400;
  border-radius: 12px;
  background: #fff8e5;
  margin-bottom: 10px;
}
.approval-card .who {
  font-size: 12px;
  color: #7a5400;
  font-weight: 600;
}
.approval-card .nome {
  font-size: 15px;
  font-weight: 700;
  margin-top: 4px;
}
.approval-card .reason {
  font-size: 12px;
  color: var(--grey-1);
  margin: 6px 0;
  padding: 8px;
  background: white;
  border-radius: 6px;
}
.approval-card .acts {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.approval-card .acts button {
  flex: 1;
  padding: 8px;
  font-size: 12px;
}
.role-pill {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--grey-4);
  color: var(--grey-1);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.role-pill.admin {
  background: var(--red);
  color: white;
}

.pwd-wrap {
  position: relative;
}
.pwd-wrap input {
  padding-right: 38px !important;
}
.pwd-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--grey-1);
  padding: 4px;
  display: flex;
}
.pwd-toggle:hover {
  color: var(--red);
}
.avatar-sm {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
}
.avatar-lg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-lg .cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .sl {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--grey-3);
  border-radius: 22px;
  transition: 0.2s;
}
.switch .sl:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}
.switch input:checked + .sl {
  background: #1a7a3a;
}
.switch input:checked + .sl:before {
  transform: translateX(18px);
}

/* Dashboard */
.dash-header {
  padding: 34px 16px 10px;
  background: var(--white);
  border-bottom: 1px solid var(--grey-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-header .saud {
  flex: 1;
  min-width: 0;
}
.dash-header .saud .hi {
  font-size: 12px;
  color: var(--grey-1);
}
.dash-header .saud .nome {
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-header .saud .tp {
  font-size: 11px;
  color: var(--grey-2);
  margin-top: 1px;
}
.dash-block {
  background: var(--white);
  border: 1px solid var(--grey-3);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}
.dash-block .hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dash-block .hdr .ttl {
  font-size: 11px;
  color: var(--grey-1);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dash-block .hdr .act {
  font-size: 11px;
  color: var(--red);
  font-weight: 600;
  cursor: pointer;
}
.dash-mes-nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.dash-mes-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--grey-3);
  background: var(--white);
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.dash-mes-btn:active {
  background: var(--grey-4);
}
.dash-sessao {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: white;
}
.dash-sessao .ttl {
  color: rgba(255, 255, 255, 0.75) !important;
}
.dash-sessao .hdr {
  margin-bottom: 2px;
}
.dash-sessao .dash-total {
  color: white;
  text-align: right;
}
.dash-sessao .gira {
  font-size: 18px;
  font-weight: 700;
}
.dash-sessao .sub {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}
.dash-sessao .stats {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.dash-sessao .stat {
  flex: 1;
}
.dash-sessao .stat .n {
  font-size: 22px;
  font-weight: 700;
}
.dash-sessao .stat .l {
  font-size: 10px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.dash-sessao .abrir {
  width: 100%;
  background: white;
  color: var(--red);
  font-weight: 700;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 4px;
}
.dash-sessao .entrar {
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-weight: 600;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  cursor: pointer;
  margin-top: 10px;
}
.dash-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--grey-4);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.dash-item:last-child {
  border-bottom: none;
}
.dash-item .meta {
  font-size: 11px;
  color: var(--grey-1);
}
.dash-empty {
  font-size: 12px;
  color: var(--grey-1);
  text-align: center;
  padding: 10px;
}
.dash-atalhos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dash-atalho {
  padding: 12px 8px;
  border: 1px solid var(--grey-3);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  background: var(--white);
  font-size: 12px;
  font-weight: 600;
  color: var(--black);
}
.dash-atalho .ico {
  font-size: 18px;
  margin-bottom: 3px;
  color: var(--red);
}
.dash-atalho:hover {
  border-color: var(--red);
}
/* ── O semáforo da mensalidade, por CLASSE ───────────────────────
   ⚠️⚠️ Mora aqui, e nao em estilo na linha, porque o tema ESCURO precisa
   alcanca-lo. Com o fundo claro fixo, no escuro o card ficava claro sobre
   claro: o texto de dentro usa `var(--grey-1)`/`var(--black)`, que viram tons
   claros, e o valor da mensalidade e a chave PIX sumiam (02/10/2026).
   ⚠️ Quem muda e o FUNDO, nunca a cor do texto: os filhos trazem a propria
   `color` em linha e venceriam qualquer regra posta no pai.
   ⚠️ Os tons escuros seguem os do `.caixa-item-tag`, que ja resolvia isto para
   a tarja da Caixa — uma paleta so de "aviso" no tema escuro. */
/* ⚠️ `!important` porque UM dos dois cards (o da ficha do membro) monta o
   estilo em linha e nao e `.dash-block`, entao nao tem de onde herdar o
   neutro. Estilo em linha vence classe; sem isto a cor do estado nunca
   aparecia naquele card. */
.mens-caixa.mens-paga    { background: #E7F5EC !important; border-color: #9ED3B2 !important; }
.mens-caixa.mens-aberta  { background: #FFF4E5 !important; border-color: #F0C27B !important; }
.mens-caixa.mens-vencida { background: #FDECEC !important; border-color: #F2B8B5 !important; }
html[data-theme="dark"] .mens-caixa.mens-paga    { background: #12301f !important; border-color: #2c5e40 !important; }
html[data-theme="dark"] .mens-caixa.mens-aberta  { background: #3a2c12 !important; border-color: #6b5220 !important; }
html[data-theme="dark"] .mens-caixa.mens-vencida { background: #3a1a1a !important; border-color: #6b2f2f !important; }

/* Linha de um interruptor: o texto à esquerda, o toggle à direita, alinhados
   pelo topo. ⚠️ A classe era usada no HTML e NAO EXISTIA no CSS, entao o
   `label` caia no desenho padrao e o toggle ia parar embaixo do texto. */
.switch-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-top: 16px; cursor: pointer;
}
.switch-row > div { min-width: 0; }
.switch-row .switch { flex: none; margin-top: 2px; }

.dash-pend {
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff4e5;
  border: 1px solid #f5b400;
  color: #7a5400;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.dash-pend:last-child {
  margin-bottom: 0;
}
.dash-pend .cnt {
  background: #f5b400;
  color: white;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}
.fin-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
}
.fin-row.total {
  font-weight: 700;
  border-top: 1px solid var(--grey-3);
  padding-top: 8px;
  margin-top: 2px;
}
.fin-row .rec {
  color: #1a7a3a;
}
.fin-row .des {
  color: var(--red);
}

.nav-brand { display: none; }

/* ══════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT  ≥ 801 px
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 801px) {

  /* ── Remove phone-frame illusion ─────────────────────────────── */
  body { align-items: stretch; }

  .stage {
    width: 100%;
    height: 100vh;
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .phone {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
    flex-direction: row;
  }

  .notch { display: none; }

  /* ── Banner PWA: fixo na base da área de conteúdo (não invade a sidebar) ── */
  #pwa-install-banner.visible {
    position: fixed;
    left: 220px;
    right: 0;
    bottom: 0;
    z-index: 40;
  }

  /* ── Left sidebar ─────────────────────────────────────────────── */
  #app-bottom-nav {
    order: -1;
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    flex-direction: column;
    border-top: none;
    border-right: 1px solid var(--grey-3);
    padding: 0;
    justify-content: flex-start;
    align-items: stretch;
    overflow-y: auto;
  }

  .nav-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px 16px 14px;
    border-bottom: 1px solid var(--grey-3);
  }

  .nav-brand-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--red);
  }

  .nav-brand-sub {
    font-size: 10px;
    color: var(--grey-1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
  }

  .bnav-btn {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    padding: 13px 20px;
    gap: 12px;
    font-size: 13px;
    border-radius: 0;
    width: 100%;
  }

  /* Hover só em botões não-ativos */
  .bnav-btn:not(.active):hover { background: var(--grey-4); }

  /* Active: indicador visual com borda esquerda. Fundo = tom claro derivado
     da cor da marca (color-mix com o --white, que flipa no modo escuro). */
  .bnav-btn.active {
    background: color-mix(in srgb, var(--red) 8%, var(--white));
    border-left: 3px solid var(--red);
    padding-left: 17px; /* 20 - 3 para compensar a borda */
  }

  .bnav-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .bnav-badge {
    position: static;
    top: unset;
    right: unset;
    margin-left: auto;
  }

  /* Active view fills remaining width without overflow */
  .view.active { min-width: 0; }

  /* ── Fix header top padding (no notch on desktop) ─────────────── */
  .header       { padding-top: 20px; }
  .admin-header { padding-top: 16px; }
  .dash-header  { padding-top: 16px; }

  /* ── Melhor padding de conteúdo no desktop ────────────────────── */
  .content {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ── Dashboard: grid de 2 colunas ────────────────────────────── */
  #view-dashboard .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-content: start;
    padding-bottom: 24px;
  }

  /* Alertas, primeiros passos e gira atual: largura total */
  #dash-onboarding-wrap,
  #dash-pendencias-wrap,
  #dash-aniversari-wrap,
  #dash-sessao-wrap {
    grid-column: 1 / -1;
  }

  /* ── Admin: grid de 4 colunas ─────────────────────────────────── */
  .admin-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Dash atalhos: 4 colunas aproveitando espaço */
  .dash-atalhos {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Fila (view-home): max-width e painel de chamada ─────────── */
  #view-home .content {
    max-width: 760px;
  }

  /* ── Senha cards: melhor aproveitamento no desktop ────────────── */
  .senha {
    padding: 14px 16px;
  }

  /* ── Modals: centered dialog instead of bottom-sheet ──────────── */
  .modal-backdrop {
    position: fixed;
    align-items: center;
  }

  .modal {
    border-radius: 16px;
    max-width: 560px;
    width: 90%;
    animation: dtFadeIn 0.2s ease-out;
  }

  @keyframes dtFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* ── Login: card on grey background ──────────────────────────── */
  #view-login.active {
    background: var(--grey-4);
    justify-content: center;
    align-items: center;
  }

  .login-inner {
    flex: 0 0 auto;
    background: var(--white);
    border-radius: 20px;
    padding: 40px;
    width: 380px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
  }

  /* ── Dark mode: sidebar ───────────────────────────────────────── */
  html[data-theme="dark"] .bnav-btn.active {
    background: #2a1515;
  }
}

@media (max-width: 800px) {
  .stage {
    flex-direction: column;
    padding: 0;
  }

  .phone {
    border-radius: 0;
    box-shadow: none;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
  }
  .notch {
    display: none;
  }
  .caption {
    padding: 20px;
    max-width: 100%;
  }
}

/* ── Módulo Educacional (EAD) ────────────────────────────── */
.ead-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.ead-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ead-progresso-track {
  height: 8px;
  border-radius: 4px;
  background: var(--grey-3);
  overflow: hidden;
}
.ead-progresso-fill {
  height: 100%;
  width: 0%;
  background: var(--grey-2);
  transition: width .3s ease, background .3s ease;
}
.ead-opcao-selecionada {
  border-color: var(--red) !important;
  background: color-mix(in srgb, var(--red) 6%, var(--white));
}

/* ── Trunqueira: slider de nível (arrastar, passos de 5%) ──
   Slider 100% customizado (SEM <input type=range>) — controlado por
   pointerdown/move/up em JS. O <input type=range> nativo tem renderização
   inconsistente entre navegadores/dispositivos (track interno opaco escondia
   as bolinhas, e alargar o input pra alinhar as pontas quebrava o arraste em
   alguns navegadores) — em vez de empilhar hacks de CSS por cima de um
   controle nativo que a gente não controla de verdade, o polegar aqui é só
   uma div posicionada via JS (ver _trunqBindSlider em trunqueira.js).
   Camadas dentro de .trunq-range-wrap (ordem no HTML não importa mais, cada
   uma tem seu próprio z-index): fundo cinza, bolinhas, polegar. */
.trunq-range-wrap {
  position: relative;
  height: 24px;
  margin: 10px 0;
  touch-action: none; /* evita rolar a página ao arrastar no touch */
}
.trunq-range-track-bg {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 3px;
  background: var(--grey-3);
  z-index: 1;
}
.trunq-range-dots {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.trunq-range-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grey-2);
}
.trunq-range-thumb {
  position: absolute;
  top: 50%;
  left: 10px; /* posição inicial — _trunqPosicionarThumb ajusta via JS */
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  cursor: grab;
  z-index: 3;
}
/* ── Trunqueira: toggle "tem estoque?" ── */
.trunq-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.trunq-toggle input { opacity: 0; width: 0; height: 0; }
.trunq-toggle .track {
  position: absolute;
  inset: 0;
  background: var(--grey-3);
  border-radius: 24px;
  transition: .2s;
  cursor: pointer;
}
.trunq-toggle .track:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
}
.trunq-toggle input:checked + .track { background: #43A047; }
.trunq-toggle input:checked + .track:before { transform: translateX(20px); }
html[data-theme="dark"] .ead-opcao-selecionada {
  background: #2a1515;
}
.ead-ranking-voce {
  border-color: var(--red) !important;
  background: color-mix(in srgb, var(--red) 6%, var(--white));
}
html[data-theme="dark"] .ead-ranking-voce {
  background: #2a1515;
}

/* ── Assinatura ────────────────────────────────────────────────────────────
   Tela de leitura: situação da casa, PIX à mão e os documentos legais.
   Usa os tokens de tema (--white/--black/--grey-*) para acompanhar claro,
   escuro e a cor de marca definida por cada casa. */
.ass-cartao{background:var(--white);border:1px solid var(--grey-3);border-radius:12px;
  padding:18px 18px;margin-bottom:14px}
.ass-selo{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;padding:5px 11px;border-radius:99px;margin-bottom:11px;
  background:var(--grey-4);color:var(--grey-1)}
.ass-ok    .ass-selo{background:rgba(46,125,50,.14);color:#2E7D32}
.ass-aviso .ass-selo{background:rgba(214,140,0,.16);color:#B57200}
.ass-alerta .ass-selo{background:rgba(191,54,12,.14);color:#BF360C}
.ass-ok    {border-left:4px solid #2E7D32}
.ass-aviso {border-left:4px solid #D68C00}
.ass-alerta{border-left:4px solid #BF360C}
.ass-tit{font-size:16px;font-weight:700;color:var(--black);margin-bottom:8px}
.ass-txt{font-size:15px;line-height:1.6;color:var(--grey-1);margin:0}
.ass-txt b{color:var(--black)}
.ass-valor{font-size:24px;font-weight:700;color:var(--black);margin:13px 0 0}
.ass-valor span{font-size:14px;font-weight:400;color:var(--grey-2)}
.ass-recado{margin:13px 0 0;padding:11px 13px;border-radius:8px;background:var(--grey-4);
  font-size:14px;line-height:1.55;color:var(--grey-1)}
/* O código PIX é longo e sem espaços: sem o break-all ele estoura a caixa
   no celular em vez de quebrar em várias linhas. */
.ass-pix{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  line-height:1.5;word-break:break-all;background:var(--grey-4);border:1px solid var(--grey-3);
  border-radius:8px;padding:11px 13px;margin:11px 0 13px;max-height:130px;overflow-y:auto;
  color:var(--grey-1);user-select:all}
.ass-cartao .btn{display:inline-block;text-align:center;text-decoration:none}
.ass-legais{display:flex;flex-wrap:wrap;gap:9px 16px;align-items:center;
  margin-top:22px;padding-top:15px;border-top:1px solid var(--grey-3);font-size:13px}
.ass-legais a{color:var(--grey-1)}
.ass-legais .ass-quando{color:var(--grey-2);margin-left:auto}

/* Divisor do painel administrativo: separa os módulos da casa do que trata da
   relação dela com quem fornece o sistema (assinatura, suporte). Ocupa a
   largura toda da grade — sem isso viraria mais um cartão numa das colunas. */
.admin-divisor {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 4px;   /* alinhado com a borda dos cartões */
}
.admin-divisor::before,
.admin-divisor::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--grey-3);
}
.admin-divisor span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--grey-2);
  white-space: nowrap;
}

/* Domínio próprio, dentro da tela de Assinatura */
.ass-passos{margin:14px 0 4px;padding:13px 15px;border-radius:8px;background:var(--grey-4);
  border:1px solid var(--grey-3)}
.ass-passos p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--grey-1)}
.ass-passos p:last-child{margin-bottom:0}
.ass-passos b{color:var(--black)}
/* O débito do escaneio: precisa ser lido antes de escanear, não depois. */
.ass-aviso-debito{margin:10px 0;padding:10px 12px;border-radius:9px;font-size:13.5px;
  line-height:1.5;color:var(--black);background:var(--grey-4);border-left:3px solid #E8A33D}

/* Titular do pagamento já cadastrado: o que está valendo, com saída para trocar. */
.ass-titular{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 13px;margin:10px 0 4px;background:var(--grey-4);border-radius:10px;font-size:13.5px;
  line-height:1.45}
/* Sem `flex:1;min-width:0` o texto vira uma coluna de uma palavra por linha:
   o botão fica com a largura que quer e sobra um filete para o resto. */
.ass-titular > div{flex:1 1 auto;min-width:0}
/* ⚠️ `.btn-texto` nasce com `display:block;width:100%`. Dentro de um flex isso
   vira a base do item: o botão tomava a linha inteira e o texto ficava com
   zero. `width:auto` é o que devolve a largura do conteúdo. */
.ass-titular .btn-texto{flex:0 0 auto;width:auto;margin-top:0;padding:0;white-space:nowrap}

/* Motivos de saída: lista de escolha única, alvo de toque confortável. */
.ass-motivos{display:flex;flex-direction:column;gap:2px;margin:10px 0}
.ass-motivo{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;
  font-size:13.5px;color:var(--black);cursor:pointer}
.ass-motivo:hover{background:var(--grey-4)}
.ass-motivo input{margin:0;width:17px;height:17px;flex-shrink:0;accent-color:var(--red);cursor:pointer}

/* QR e código do PIX Automático: lado a lado quando há largura (computador,
   onde se escaneia com o celular), empilhados no telefone (onde se copia e
   cola no próprio aparelho). */
.ass-pixauto-grade{display:flex;gap:16px;align-items:flex-start;margin:10px 0 6px;flex-wrap:wrap}
.ass-qr{flex:0 0 auto;background:#fff;border:1px solid var(--grey-3);border-radius:12px;padding:8px;line-height:0}
.ass-qr img{display:block;width:172px;height:172px;image-rendering:pixelated}
.ass-pixauto-lado{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:8px}
.ass-pixauto-lado .ass-pix{margin:0}
@media (max-width:640px){
  .ass-pixauto-grade{flex-direction:column;align-items:center}
  .ass-qr{align-self:center}
  .ass-pixauto-lado{width:100%}
}

.ass-campo{width:100%;padding:11px 13px;border:1px solid var(--grey-3);border-radius:8px;
  font-size:15px;margin:13px 0 11px;background:var(--white);color:var(--black)}
.ass-campo:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:transparent}
.ass-bom{background:rgba(46,125,50,.10);border:1px solid rgba(46,125,50,.3);color:#2E7D32;
  border-radius:8px;padding:11px 13px;font-size:14px;line-height:1.5;margin-bottom:11px}
.ass-ruim{background:rgba(191,54,12,.10);border:1px solid rgba(191,54,12,.3);color:#BF360C;
  border-radius:8px;padding:11px 13px;font-size:14px;line-height:1.5;margin-bottom:11px}
.btn-texto{display:block;width:100%;margin-top:9px;background:none;border:none;
  color:var(--grey-1);font-size:13.5px;text-decoration:underline;cursor:pointer;padding:6px}
.btn-texto:hover{color:var(--black)}

/* Exportação e encerramento, na tela de Assinatura */
.ass-botoes{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.ass-botoes .btn{flex:1 1 auto;min-width:150px}
.ass-mini{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--grey-2)}
/* O botão de encerrar não compete com o resto: quem procura acha, quem não
   procura não esbarra nele por engano. */
#ass-cancel-abrir{margin-top:14px;color:var(--grey-2)}
#ass-cancel-form{margin-top:6px;padding-top:14px;border-top:1px solid var(--grey-3)}
/* O pagamento automático é o caminho que queremos que a casa siga: ganha
   destaque, mas sem alarme — não é aviso de problema. */
.ass-cartao.ass-destaque{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}

/* Sanfona da tela de Assinatura. O cabeçalho é um <button> de verdade: teclado
   e leitor de tela precisam alcançá-lo, e ele carrega o aria-expanded. */
.ass-painel{padding:0;overflow:hidden}
.ass-painel .ass-cab{display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:12px;padding:16px 18px;background:none;border:none;cursor:pointer;
  text-align:left;font-family:inherit;border-radius:12px}
.ass-painel .ass-cab .ass-tit{margin:0}
.ass-painel .ass-cab:hover{background:var(--grey-4)}
.ass-painel .ass-cab:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
/* Seta desenhada em CSS: sem dependência de fonte de ícone. */
.ass-seta{flex-shrink:0;width:9px;height:9px;border-right:2px solid var(--grey-2);
  border-bottom:2px solid var(--grey-2);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s ease}
.ass-painel.aberto .ass-seta{transform:rotate(-135deg) translate(-2px,-2px)}
.ass-painel .ass-corpo{display:none;padding:0 18px 18px}
.ass-painel.aberto .ass-corpo{display:block}
@media (prefers-reduced-motion:reduce){ .ass-seta{transition:none} }

/* Paleta de figurinhas na tela de templates. Quatro por linha: a lista passa de
   sessenta itens, e empilhada tomava a tela toda antes de o texto aparecer. */
/* flex-basis 100%: a paleta mora dentro de um contêiner flex-wrap (#tpl-vars).
   Como item flex, ela encolhia para 80px — as miniaturas ainda não carregaram e
   não empurram largura nenhuma. */
.fig-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;
  flex:0 0 100%;width:100%}
.fig-chip{padding:6px;background:var(--grey-4);border:1px solid var(--grey-3);
  border-radius:10px;cursor:pointer;line-height:0;aspect-ratio:1;
  transition:border-color .15s,background .15s}
.fig-chip:hover{border-color:var(--red);background:var(--white)}
.fig-chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* A proporção fica no botão (acima), não na imagem: <img> sem src mede 0x0, e
   um alvo de área zero nunca é considerado visível pelo IntersectionObserver —
   nenhuma miniatura chegava a ser buscada. */
.fig-chip img{width:100%;height:100%;object-fit:contain;
  /* Figurinha com fundo transparente some no cartão claro; o xadrez leve dá
     a ela um fundo sem competir com o desenho. */
  background-image:linear-gradient(45deg,#0000001a 25%,transparent 25%,transparent 75%,#0000001a 75%),
                   linear-gradient(45deg,#0000001a 25%,transparent 25%,transparent 75%,#0000001a 75%);
  background-size:12px 12px;background-position:0 0,6px 6px;border-radius:6px}
/* Cada figurinha é um item com a miniatura e dois controles por cima. */
.fig-item{position:relative}
.fig-item .fig-chip{width:100%}
.fig-acao{position:absolute;top:4px;width:24px;height:24px;padding:0;border-radius:7px;
  border:1px solid var(--grey-3);background:rgba(255,255,255,.94);cursor:pointer;
  font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;
  /* Escondidos até o toque/mouse chegar: com 29 miniaturas, dois botões em cada
     uma competiriam com a figurinha, que é o que a pessoa veio olhar. */
  opacity:0;transition:opacity .15s}
.fig-guardar,.fig-desmarcar{left:4px}
.fig-excluir{right:4px;color:#b00000}
.fig-item:hover .fig-acao,.fig-item:focus-within .fig-acao{opacity:1}
.fig-acao:hover{border-color:var(--red)}
.fig-acao:focus-visible{outline:2px solid var(--red);outline-offset:1px;opacity:1}
/* Guardada fica sempre visível: é o estado da figurinha, não um controle. */
.fig-item.guardada .fig-desmarcar{opacity:1;background:#FFF7E6;border-color:#E0B44C}
.fig-item.guardada .fig-chip{border-color:#E0B44C}
/* Sem hover (celular), os controles precisam aparecer sozinhos. */
@media (hover:none){ .fig-acao{opacity:1} }
@media (max-width:420px){ .fig-grade{grid-template-columns:repeat(3,1fr)} }

/* ── Tour guiado (tour.js) ─────────────────────────────────────────────────── */
.tour-foco { position: fixed; z-index: 9000; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--red), 0 0 0 9999px rgba(17, 17, 17, .58); transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.tour-foco.sem-alvo { box-shadow: 0 0 0 9999px rgba(17, 17, 17, .58); }
.tour-balao { position: fixed; z-index: 9001; width: min(340px, calc(100vw - 32px)); background: var(--white); color: var(--black);
  border-radius: 16px; padding: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); }
.tour-balao .t-prog { font-size: 11px; font-weight: 700; color: var(--grey-2); letter-spacing: .5px; text-transform: uppercase; }
.tour-balao h3 { margin: 4px 0 6px; font-size: 16px; }
.tour-balao p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--grey-1); }
.tour-balao .t-espera { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #1A7A3A; }
.tour-balao .t-acoes { display: flex; gap: 8px; margin-top: 14px; }
.tour-balao .t-acoes button { flex: 1; padding: 10px; border-radius: 10px; border: none; font-weight: 600; font-size: 13px; cursor: pointer; }
.tour-balao .t-sair { display: block; margin: 10px auto 0; background: none; border: none; color: var(--grey-2); font-size: 12px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .tour-foco { transition: none; } }

/* ── Primeiros passos (onboarding.js) ──────────────────────────────────────── */
.onb .onb-conta { font-size: 11px; font-weight: 700; color: var(--red); }
.onb .onb-prog { height: 6px; background: var(--grey-4); border-radius: 99px; overflow: hidden; margin: 2px 0 8px; }
.onb .onb-prog i { display: block; height: 100%; background: var(--red); border-radius: 99px; transition: width .4s ease; }
.onb-item { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--grey-4); }
.onb-item:last-child { border-bottom: none; }
.onb-check { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--grey-3);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.onb-item.feito .onb-check { background: #1A7A3A; border-color: #1A7A3A; }
.onb-item.proxima .onb-check { border-color: var(--red); }
.onb-txt { flex: 1; min-width: 0; }
.onb-txt b { display: block; font-size: 13.5px; }
.onb-txt span { display: block; font-size: 12px; color: var(--grey-1); line-height: 1.35; }
.onb-item.feito .onb-txt b { color: var(--grey-1); }
.onb-btn { flex: none; border: 1px solid var(--red); background: var(--red); color: #fff; border-radius: 99px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.onb-btn.onb-btn-leve { background: transparent; color: var(--grey-1); border-color: var(--grey-3); }
.onb-item:not(.proxima):not(.feito) .onb-btn { background: transparent; color: var(--red); }
.onb-opc summary { cursor: pointer; font-size: 11px; font-weight: 700; color: var(--grey-1); text-transform: uppercase; letter-spacing: .5px; padding: 10px 0 4px; }
.onb-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--grey-2); }
.onb-rodape a { color: var(--grey-1); text-decoration: underline; cursor: pointer; }

/* ── Tarja de sessão de suporte ────────────────────────────────────────────
   Aparece só quando a equipe do O Terreiro entrou pelo painel. A sessão é de
   um admin REAL da casa: tudo que for feito fica no nome dele, nas atas, no
   financeiro e nos convites. Esta tarja é o único aviso disso, então ela é
   `fixed` e fica acima de tudo, inclusive do tour (9001).
   ⚠️ Cor fixa de propósito, sem usar var(--red): a cor da marca é escolhida
   por cada casa, e uma casa de tema vermelho faria a tarja sumir no cabeçalho.
   ⚠️ `position: fixed` não reflui nada — o `.phone` ocupa 100dvh e empurrar
   o layout por causa de um aviso quebraria a tela de quem está sendo ajudado. */
#tarja-suporte {
  position: fixed; z-index: 9100;
  top: 8px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: #7C2D12; color: #FFEDD5;
  font-size: 12.5px; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
#tarja-suporte span { overflow: hidden; text-overflow: ellipsis; }
#tarja-suporte b { color: #fff; }
#tarja-suporte button {
  flex: none; cursor: pointer; font: inherit; font-weight: 700;
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid rgba(255, 237, 213, .45);
  background: transparent; color: #FFEDD5;
}
#tarja-suporte button:hover { background: rgba(255, 237, 213, .15); }

/* ── Link do calendário público, no topo de Eventos & Convites ─────────────
   A página existe desde 15/09 e quase ninguém sabia: ficava só dentro da
   sanfona de Configurações. Aqui ela aparece ao lado dos eventos que a
   alimentam, que é quando a pessoa pensa em divulgar.
   ⚠️ `user-select:text` no endereço é obrigatório: o `*` do topo deste
   arquivo desliga a seleção em TUDO, e sem isso nem o toque longo nem o
   arrastar do mouse pegam o link — por isso o botão de copiar existe. */
.ev-link-publico {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 12px; margin-bottom: 10px;
  border: 1px solid var(--grey-3); border-radius: 10px;
  background: var(--grey-5); color: var(--grey-1);
}
.ev-link-publico > svg { flex: none; color: var(--grey-2); }
.ev-link-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ev-link-rot {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--grey-2);
}
.ev-link-publico a {
  font-size: 12.5px; color: var(--red); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  user-select: text; -webkit-user-select: text;
}
.ev-link-publico a:hover { text-decoration: underline; }
.ev-link-publico .icon-btn { flex: none; color: var(--grey-1); }
/* Copiar em texto: numa barra que ja tem globo e engrenagem, mais um icone
   viraria adivinhacao. `flex:none` para o botao nunca ser espremido pelo
   endereco, que e quem deve encolher. */
.ev-link-copiar {
  flex: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 99px;
  border: 1px solid var(--grey-3); background: var(--white); color: var(--grey-1);
}
.ev-link-copiar:hover { border-color: var(--grey-2); color: var(--black); }
.ev-link-copiar.copiado { border-color: var(--red); color: var(--red); }

/* ── Editor de templates: os balões SÃO o editor ───────────────────────────
   Cada balão é um campo, dentro da moldura do celular e no fundo do WhatsApp.
   Antes eram duas colunas (editor à esquerda, prévia à direita) dizendo a mesma
   coisa duas vezes; agora é uma só, e o "Ver como chega" troca o conteúdo dos
   mesmos balões pelos valores reais.
   ⚠️ O balão editável mostra o texto CRU: é o que se edita. */
.tpl-fone {
  border: 8px solid #2A2A2A; border-radius: 26px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); margin-bottom: 10px;
}
.tpl-fone-tela {
  min-height: 140px; max-height: 460px; overflow-y: auto; padding: 12px 10px;
  /* Fundo do WhatsApp: bege com um pontilhado bem fraco. Sem imagem externa,
     que exigiria um arquivo novo no repositório para um enfeite. */
  background-color: #E5DDD5;
  background-image: radial-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
                    radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
}

/* ---- modo edição ---- */
.tpl-balao-edit { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
.tpl-balao-x {
  flex: none; width: 24px; height: 24px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.75); color: #54656F; font-size: 12px;
  opacity: 0; transition: opacity .12s;
}
/* Coluna estreita com subir / remover / descer. Empilhado, e não em linha,
   para as três ações caberem nos mesmos 24px que o ✕ ocupava sozinho: a tela
   é de celular e a largura é do texto. */
.tpl-balao-acoes { flex: none; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.tpl-balao-mv {
  flex: none; width: 24px; height: 20px; padding: 0;
  border: none; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,.75); color: #54656F; font-size: 9px; line-height: 1;
  opacity: 0; transition: opacity .12s;
}
.tpl-balao-edit:hover .tpl-balao-x,
.tpl-balao-edit:focus-within .tpl-balao-x,
.tpl-balao-edit:hover .tpl-balao-mv,
.tpl-balao-edit:focus-within .tpl-balao-mv { opacity: 1; }
.tpl-balao-x:hover { background: #fff; color: var(--red); }
.tpl-balao-mv:hover { background: #fff; color: var(--red); }
.tpl-balao-txt {
  flex: 1; min-width: 0; max-width: 88%; margin-left: auto;
  padding: 8px 10px; border: none; border-radius: 8px 2px 8px 8px;
  background: #D9FDD3; color: #111B21;
  font-size: 13px; font-family: inherit; line-height: 1.45;
  box-sizing: border-box; resize: none; overflow: hidden;
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.tpl-balao-txt:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.tpl-balao-txt::placeholder { color: #7A8B93; }

.tpl-barra { display: flex; gap: 8px; margin-bottom: 10px; }
.tpl-add, .tpl-ver {
  flex: 1; padding: 9px; cursor: pointer; border-radius: 10px;
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.tpl-add { border: 1px dashed var(--grey-3); background: transparent; color: var(--grey-1); }
.tpl-add:hover { border-color: var(--red); color: var(--red); }
.tpl-ver { flex: 0 0 auto; border: 1px solid var(--grey-3); background: var(--white); color: var(--grey-1); }
.tpl-ver:hover { border-color: var(--grey-2); color: var(--black); }
.tpl-ver.ligado { border-color: var(--red); color: var(--red); background: #FFF5F5; }

/* ---- modo "ver como chega" (só leitura, com os valores trocados) ---- */
.tpl-bolha {
  position: relative; max-width: 88%; margin: 0 0 8px auto; padding: 7px 10px 17px;
  background: #D9FDD3; border-radius: 8px 2px 8px 8px;
  font-size: 13px; line-height: 1.45; color: #111B21;
  word-wrap: break-word; overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.tpl-bolha-hora { position: absolute; right: 9px; bottom: 4px; font-size: 10px; color: #667781; }
/* Figurinha chega sem fundo nem hora, como no WhatsApp. */
.tpl-bolha-fig { background: transparent; box-shadow: none; padding: 0; }
.tpl-previa-fig { max-width: 120px; max-height: 120px; display: block; margin-left: auto; }
.tpl-previa-img {
  display: inline-block; padding: 16px 12px; border-radius: 6px;
  background: rgba(0,0,0,.06); color: #54656F; font-size: 12px;
}
/* Variável sem exemplo conhecido: mostra o NOME, para ninguém confundir com
   texto de verdade. Fingir um valor seria pior que admitir que não sabemos. */
.tpl-previa-var { background: #FFF3C4; border-radius: 3px; padding: 0 3px; color: #7A5400; }
.tpl-previa-vazio { color: #54656F; font-size: 12.5px; text-align: center; padding: 34px 10px; }
/* A arte real da próxima gira, dentro do balão da prévia. Largura cheia como
   chega no WhatsApp, e altura limitada para uma arte alta não empurrar o texto
   da mensagem para fora da tela. */
.tpl-previa-arte {
  display: block; width: 100%; max-height: 190px; object-fit: cover;
  border-radius: 6px; margin-bottom: 6px;
}

/* ── Rifa: a grade de números (rifa-grade.js) ─────────────────────────────
   10 colunas fixas, como o desenho pede. Em 360px cada célula fica com ~30px,
   que ainda cabe três dígitos. Reservado é laranja, pago é verde, escolhido é
   a cor da casa; livre é branco com borda. */
.rifa-grade { display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:4px; }
.rifa-num {
  font-size:11px; font-weight:600; line-height:1; padding:8px 0; border:1px solid var(--grey-3);
  border-radius:6px; background:#fff; color:var(--black); cursor:pointer;
  font-variant-numeric:tabular-nums; text-align:center; min-width:0;
}
.rifa-num.reservado { background:#FFE8CC; border-color:#F5A623; color:#8a5200; cursor:default; }
.rifa-num.pago      { background:#DDF5E3; border-color:#3BB061; color:#1d6b36; cursor:default; }
.rifa-num.sel       { background:var(--red); border-color:var(--red); color:#fff; }
.rifa-legenda { display:flex; gap:12px; font-size:11px; color:var(--grey-1); margin-bottom:8px; }
.rifa-legenda span { display:flex; align-items:center; gap:4px; }
.rifa-legenda i { display:inline-block; width:14px; height:14px; padding:0; border-radius:4px; }
/* A faixa de reserva: presa embaixo, dentro do .phone. */
.rifa-faixa {
  position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:#fff; border-top:1px solid var(--grey-3); font-size:13px;
  box-shadow:0 -4px 12px rgba(0,0,0,.06);
}

/* ── Rifa: o Sorteador (tela para a live) ─────────────────────────────────
   Fundo na cor da casa, número gigante no centro. É a tela que aparece na
   transmissão, então o que importa é ler de longe. */
.view.sorteio .content { background: var(--red); color: #fff; min-height: calc(100dvh - 56px); }
.sorteio-conteudo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px 40px; text-align: center; }
.sorteio-arte { width: min(100%, 420px); aspect-ratio: 16/9; object-fit: cover; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.sorteio-sub { font-size: 13px; opacity: .85; }
.sorteio-aviso { font-size: 12px; background: rgba(255,255,255,.18); padding: 8px 12px; border-radius: 10px; }
.sorteio-palco { background: #fff; color: var(--black); border-radius: 18px; padding: 22px 18px; width: min(100%, 420px); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.sorteio-rotulo { font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--grey-1); }
.sorteio-premio { font-size: 14px; color: var(--grey-1); margin-top: 4px; }
.sorteio-num { font-size: 96px; font-weight: 900; line-height: 1.1; color: var(--red); font-variant-numeric: tabular-nums; margin: 8px 0; }
.sorteio-ganhador { font-size: 24px; font-weight: 800; }
.sorteio-tel { font-size: 15px; color: var(--grey-1); font-variant-numeric: tabular-nums; }
.sorteio-ok { font-size: 12px; color: #1d6b36; margin-top: 8px; }
.sorteio-btn { width: min(100%, 420px); padding: 14px; font-size: 16px; background: #fff !important; color: var(--red) !important; }
.sorteio-podio { width: min(100%, 420px); display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sorteio-linha { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.14); border-radius: 12px; padding: 8px 12px; text-align: left; }
.sorteio-col { font-weight: 900; font-size: 18px; width: 34px; }
.sorteio-num-p { font-weight: 900; font-size: 22px; font-variant-numeric: tabular-nums; }
.sorteio-nome { font-size: 14px; font-weight: 600; display: flex; flex-direction: column; }
.sorteio-nome small { font-weight: 400; opacity: .8; }

/* Modal SOBRE modal: a confirmacao e o visualizador de comprovante/cartaz sao
   abertos DE DENTRO de outro modal (convidar, lancar pedido, editar rifa).
   Todo .modal-backdrop tem z-index 100, entao quem decide quem fica por cima e
   a ordem no HTML - e os dois estao ANTES no arquivo, ou seja, abriam ATRAS.
   O efeito era o pior possivel: a pessoa clicava em "Enviar convites", a
   pergunta de confirmacao abria escondida e nada acontecia na tela; a Promise
   ficava esperando para sempre uma resposta que ninguem podia dar (achado em
   30/09/2026, com o usuario tentando convidar). */
#modal-rifa-confirmar.active,
#modal-rifa-comprovante.active { z-index: 120; }


/* ── Caixa de entrada do WhatsApp (docs/11-caixa-whatsapp.md) ─────────────
   Duas telas dentro da mesma view: lista e conversa. O botao de voltar da
   conversa leva a lista, nao ao inicio. */
.caixa-vazio { padding: 28px 16px; text-align: center; color: var(--grey-1); font-size: 14px; line-height: 1.5; }
.caixa-item { padding: 12px 14px; border-bottom: 1px solid var(--grey-3); cursor: pointer;
  display: flex; align-items: center; gap: 11px; }
/* min-width:0 e o que deixa o nome longo cortar com reticencias em vez de
   empurrar a hora para fora da linha: filho de flex nao encolhe abaixo do
   proprio conteudo sem isto. */
.caixa-item-corpo { flex: 1; min-width: 0; }
.caixa-item:active { background: var(--grey-4); }
.caixa-item-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* ⚠️ `min-width: 0` para o nome poder encolher: sem ele um nome comprido empurra
   o selo e a hora para fora em vez de virar reticências. */
.caixa-item-nome { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.caixa-item-hora { font-size: 12px; color: var(--grey-1); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.caixa-item-previa { font-size: 13px; color: var(--grey-1); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caixa-item-tag { font-size: 11px; color: #8a5300; background: #fdf3e3; display: inline-block;
  padding: 2px 7px; border-radius: 999px; margin-top: 5px; }
html[data-theme="dark"] .caixa-item-tag { color: #f0c27b; background: #3a2c12; }

/* Cabecalho da conversa. Sem botao de ligacao nem de video: nao temos como
   fazer chamada, e botao que nao funciona e pior que botao nenhum. */
.caixa-topo { gap: 8px; }
.caixa-ident { flex: 1; min-width: 0; }
.caixa-nome { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caixa-sub { font-size: 11.5px; color: var(--grey-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.caixa-msgs { flex: 1; overflow-y: auto; padding: 12px 12px 20px; display: flex; flex-direction: column; gap: 8px;
  /* ⚠️ A barra fica VISIVEL aqui, ao contrario do campo de escrever: numa
     conversa longa e preciso saber que da para rolar, e some-la esconderia
     isso. O que sai e a feiura -- o trilho branco e as setinhas do Windows,
     que no tema escuro viram duas faixas claras encostadas no conteudo. */
  scrollbar-width: thin; scrollbar-color: rgba(128,128,128,.45) transparent; }
.caixa-msgs::-webkit-scrollbar { width: 7px; }
.caixa-msgs::-webkit-scrollbar-track { background: transparent; }
.caixa-msgs::-webkit-scrollbar-thumb { background: rgba(128,128,128,.4); border-radius: 99px; }
.caixa-msgs::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,.6); }
/* As setinhas de cima e de baixo: so existem no Windows e sao o que mais
   destoa -- nem o WhatsApp nem o resto do app as tem. */
.caixa-msgs::-webkit-scrollbar-button { display: none; height: 0; }
/* A lista de conversas tem o mesmo tratamento: e a outra area que rola. */
#caixa-lista-tela .content { scrollbar-width: thin; scrollbar-color: rgba(128,128,128,.45) transparent; }
#caixa-lista-tela .content::-webkit-scrollbar { width: 7px; }
#caixa-lista-tela .content::-webkit-scrollbar-track { background: transparent; }
#caixa-lista-tela .content::-webkit-scrollbar-thumb { background: rgba(128,128,128,.4); border-radius: 99px; }
#caixa-lista-tela .content::-webkit-scrollbar-button { display: none; height: 0; }
.caixa-aviso-topo { font-size: 11.5px; color: var(--grey-1); text-align: center; padding: 4px 0 8px; }
.caixa-balao { max-width: 82%; padding: 8px 11px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
/* ⚠️ Sem `align-self`: o pai do balao passou a ser `.caixa-linha`, nao a lista.
   Quem alinha agora e a linha (`justify-content`), e o align-self aqui nao
   teria efeito nenhum -- regra morta que confunde a proxima leitura. */
.caixa-balao.dele { background: var(--grey-4); border-bottom-left-radius: 4px; }
.caixa-balao.nosso { background: #e7f5ec; color: #123524; border-bottom-right-radius: 4px; }
/* ⚠️ O balao "nosso" tem fundo FIXO, entao precisa de cor de texto fixa e de
   uma variante escura propria: a cor herdada e var(--black), que no tema
   escuro vira #f0f0f0 -- branco sobre verde claro, texto invisivel. Apareceu
   so ao abrir a caixa no tema escuro. O balao "dele" nao sofre porque usa
   var(--grey-4), que vira junto. */
html[data-theme="dark"] .caixa-balao.nosso { background: #11452a; color: #e8f5ec; }
html[data-theme="dark"] .caixa-balao.nosso .caixa-hora { color: #9bbfa8; }
/* Quem respondeu. Numa casa em que tres pessoas atendem pelo mesmo numero, e
   isto que falta saber: `origem` sempre disse O QUE respondeu, nunca QUEM. */
/* Tres grupos, tres cores (pedido do usuario em 01/10/2026): quem le precisa
   saber de relance se do outro lado havia uma PESSOA -- e, quando havia, qual.
   O nome em verde e gente; o assistente em roxo; o automatico em cinza, que o
   apaga de proposito, porque disparo do sistema nao e conversa. */
.caixa-autor { font-size: 11.5px; font-weight: 700; color: var(--red); margin-bottom: 2px; }
.caixa-autor.pessoa { color: #1b7a3d; }
.caixa-autor.ia     { color: #7b3fa0; }
.caixa-autor.auto   { color: var(--grey-1); font-weight: 600; }
/* ⚠️ Variantes escuras: as tres cores acima sao fixas e vivem sobre o verde
   escuro do balao no tema escuro -- as claras sumiriam ali. */
html[data-theme="dark"] .caixa-autor.pessoa { color: #7fd6a0; }
html[data-theme="dark"] .caixa-autor.ia     { color: #c9a3e0; }
html[data-theme="dark"] .caixa-autor.auto   { color: #a8bdb0; }
.caixa-texto { white-space: pre-wrap; word-break: break-word; }
/* Link no balão: sublinhado e com a cor do texto, para servir nos dois temas e
   nos dois lados (fundo verde nosso, branco do contato). */
.caixa-link { color: inherit; text-decoration: underline; word-break: break-all; }
/* Formatação do WhatsApp no balão (06/10/2026). Só os tokens do app.css:
   eles se redefinem no tema escuro, e `var()` indefinido apagaria a regra. */
.caixa-texto strong { font-weight: 700; }
.caixa-wpp-mono, .caixa-wpp-bloco { font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .92em; background: var(--grey-4); border-radius: 4px; padding: 0 3px; }
.caixa-wpp-bloco { display: block; padding: 6px 8px; margin: 2px 0; white-space: pre-wrap; }
.caixa-wpp-cit { display: block; border-left: 3px solid var(--grey-3); padding-left: 8px; color: var(--grey-1); margin: 2px 0; }
.caixa-wpp-li { display: block; padding-left: 14px; text-indent: -12px; }
.caixa-hora { font-size: 10.5px; color: var(--grey-1); text-align: right; margin-top: 3px; font-variant-numeric: tabular-nums; }

.caixa-info { border-bottom: 1px solid var(--grey-3); background: var(--grey-4); padding: 10px 14px; }
.caixa-info-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
.caixa-info-linha b { font-weight: 600; }
.caixa-info-linha span { color: var(--grey-1); text-align: right; }
.caixa-info .btn-sec { margin-top: 8px; width: 100%; }

/* A conversa ocupa a altura toda da view: a lista de mensagens rola por
   dentro, nao a pagina. Sem isto o cabecalho sairia da tela ao rolar.
   ⚠️⚠️ NUNCA ponha `display` no `#view-caixa`. O sistema de telas e
   `.view{display:none}` + `.view.active{display:flex}`, e um seletor de ID
   (especificidade 100) vence a classe (10): a view ficava SEMPRE visivel e
   dividia a tela com a que estava ativa. O `.view.active` ja da flex e column
   -- so os filhos precisam de regra. */
#caixa-lista-tela, #caixa-conversa-tela { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* A bolinha do contato. NUNCA a foto dele (decisao do usuario em 01/10/2026):
   buscar a foto e uma chamada ao servidor do WhatsApp por conversa aberta, e
   navegar por vinte conversas viraria vinte chamadas em um minuto. Fica o
   SIGNO quando ha data de nascimento, e as iniciais do primeiro e do ultimo
   nome quando nao ha. */
.caixa-foto { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--grey-3); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--grey-1); letter-spacing: .02em; }
/* O glifo do signo e um caractere de texto: no mesmo corpo das iniciais ele sai
   miudo demais para se reconhecer, e sem peso para nao virar um borrao. */
.caixa-foto.signo { font-size: 20px; font-weight: 400; line-height: 1; }

/* Barra de escrever. Fica FORA da area que rola: so as mensagens rolam. */
.caixa-escrever { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px;
  border-top: 1px solid var(--grey-3); background: var(--white); flex-shrink: 0; }
.caixa-escrever textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--grey-3);
  border-radius: 18px; padding: 9px 13px; font: inherit; font-size: 14px; line-height: 1.35;
  max-height: 110px; background: var(--grey-4); overflow-y: auto;
  /* ⚠️ Sem barra de rolagem VISIVEL, como no WhatsApp. O campo cresce ate o
     teto e dali em diante rola -- mas a barra nativa aparecia como um trilho
     cinza com setinhas, encostado na borda arredondada, e era o que mais
     chamava atencao na barra inteira. `scrollbar-width` cobre Firefox; o
     ::-webkit-scrollbar cobre Chrome e Safari. Rolar segue funcionando. */
  scrollbar-width: none; -ms-overflow-style: none; }
.caixa-escrever textarea::-webkit-scrollbar { width: 0; height: 0; }
/* ⚠️ Emoji e glifo de TEXTO, nao SVG: no tamanho desta barra o traco fino do
   SVG saia borrado e fora de centro. Como e texto, o alinhamento depende de
   line-height:1 -- sem isso o emoji fica alto dentro do circulo, que e o
   desalinhamento classico de icone-caractere. */
.caixa-acao, .caixa-enviar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
  padding: 0; line-height: 1; }
.caixa-acao { background: none; color: var(--grey-1); }
.caixa-acao svg { width: 23px; height: 23px; display: block; }
/* ⚠️ Verde do WhatsApp, nao var(--red): este botao vive na area de WhatsApp e a
   referencia do usuario e o botao verde com o triangulo escuro. A cor da marca
   e escolhida por cada casa -- usa-la aqui faria o botao de enviar mudar de cor
   de casa para casa, e o triangulo escuro so funciona sobre o verde. */
.caixa-enviar { background: #25D366; color: #0b2e1a; }
.caixa-enviar svg { width: 21px; height: 21px; display: block; }
.caixa-enviar:disabled { opacity: .5; cursor: default; }

/* Paleta de figurinhas: as que a casa JA tem salvas em Admin > WhatsApp. */
/* UMA linha, rolando de lado (pedido do usuario em 01/10/2026): a paleta
   divide a tela com a conversa, e uma grade de varias linhas comeria metade
   dela. `flex-wrap:nowrap` e o padrao do flex, mas fica explicito para nao se
   perder numa edicao futura. */
/* ⚠️ `align-items:center` e essencial: por padrao o flex ESTICA os itens na
   altura, e com `aspect-ratio` a largura passa a seguir essa altura esticada --
   a figurinha inflou para o max-width e so cabiam tres por tela, o oposto do
   pedido. Com o centro, a altura vem da largura, que e o que manda. */
.caixa-figs { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; overflow-x: auto; padding: 8px 10px;
  border-top: 1px solid var(--grey-3); background: var(--grey-4); flex-shrink: 0;
  /* Sem barra de rolagem visivel, como no campo de escrever. */
  scrollbar-width: none; -ms-overflow-style: none; }
.caixa-figs::-webkit-scrollbar { height: 0; }
/* ⚠️ Fundo claro nos DOIS temas, de proposito: figurinha e webp com
   transparencia e arte quase sempre clara -- sobre o var(--white) do tema
   escuro (#121212) a figurinha branca sumiria e a pessoa escolheria no escuro. */
/* ⚠️⚠️ Medida FIXA, nao porcentagem. Tentei `flex-basis: calc(25% - 5.25px)`
   para caber sempre quatro, e deu errado de um jeito que so a medicao mostra:
   o `clientWidth` desta faixa e ZERO (ela nao tem largura definida para o
   percentual resolver), entao o 25% virava 0, a largura caia no tamanho
   intrinseco da imagem e o `max-width` dava 120px -- tres por tela, o oposto
   do pedido. 84px cabe quatro na largura de celular (375 - 20 de respiro - 3
   vaos de 7 = 334, dividido por 4). */
.caixa-fig { flex: 0 0 auto; width: 84px; height: 84px;
  object-fit: contain; cursor: pointer;
  background: #f0f0f0; border-radius: 11px; padding: 4px; }
.caixa-figs-vazio { font-size: 12.5px; color: var(--grey-1); padding: 18px 12px; text-align: center; width: 100%; line-height: 1.45; }

/* Figurinha dentro do balao: a previa do que foi enviado ou recebido. Sem
   fundo nem borda -- no WhatsApp a figurinha flutua, nao vem em caixinha. */
.caixa-fig-balao { width: 110px; height: 110px; object-fit: contain; display: block; }
/* ⚠️ `:has` com o filho DIRETO: se a figurinha falhar em carregar ela e trocada
   por um .caixa-texto, o seletor deixa de casar e o balao recupera o fundo
   sozinho -- sem isso ficaria uma palavra solta sem balao. */
.caixa-balao:has(> .caixa-fig-balao) { background: none !important; padding: 0; }

/* A linha que envolve o balao: o X fica FORA dele, acompanhando. Dentro do
   balao seria tocado sem querer ao ler, e apagar nao tem desfazer. */
.caixa-linha { display: flex; align-items: center; gap: 6px; }
/* O balao do contato encosta a esquerda e o nosso a direita; a ORDEM dos
   botoes ja e decidida no JS, por direcao. */
.caixa-linha.nossa { justify-content: flex-end; }
.caixa-linha .caixa-balao { max-width: 82%; }
/* ⚠️ Cor e opacidade com peso suficiente para SER VISTO. A primeira versao era
   cinza-claro a 45% de opacidade: o botao ocupava o espaco dele e simplesmente
   nao aparecia na tela -- o espaco reservado existia e o X nao. Discreto nao
   pode virar invisivel. */
/* ⚠️⚠️ Cores EXPLICITAS nos dois temas, medidas. A versao anterior usava
   `background: var(--white)` com `color: var(--grey-1)`: no tema escuro isso
   deu fundo claro com X cinza-claro, contraste 2.17 -- abaixo do minimo de 4.5
   e praticamente invisivel. Herdar variavel nao basta quando o par de cores
   precisa funcionar junto. */
/* 28px, nao 24: e alvo de TOQUE num celular, e apagar e acao que nao tem
   desfazer -- errar o alvo e clicar no balao de baixo seria pior que o botao
   ocupar dois pixels a mais. */
.caixa-apagar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #d8d8d8; background: #fff; color: #555;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; }
.caixa-apagar svg { width: 15px; height: 15px; display: block; }
html[data-theme="dark"] .caixa-apagar { border-color: #4a4a4a; background: #2b2b2b; color: #e0e0e0; }
.caixa-apagar:hover { color: #fff; background: var(--red); border-color: var(--red); }

/* Botoes que acompanham o balao (apagar e responder citando). */
.caixa-acao-msg { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #d8d8d8; background: #fff; color: #555; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; }
.caixa-acao-msg svg { width: 15px; height: 15px; display: block; }
html[data-theme="dark"] .caixa-acao-msg { border-color: #4a4a4a; background: #2b2b2b; color: #e0e0e0; }
.caixa-acao-msg:hover { color: #fff; background: var(--grey-1); border-color: var(--grey-1); }
.caixa-acao-msg.apagar:hover { background: var(--red); border-color: var(--red); }

/* A tarja do que foi citado: dentro do balao, e na previa acima do campo.
   A barra colorida a esquerda e o que o WhatsApp usa, e e o que faz a citacao
   ser lida como citacao e nao como parte da mensagem. */
.caixa-citada { border-left: 3px solid var(--red); border-radius: 5px;
  padding: 4px 8px; margin-bottom: 5px; background: rgba(0,0,0,.05); }
html[data-theme="dark"] .caixa-citada { background: rgba(255,255,255,.07); }
.caixa-citada-quem { font-size: 11px; font-weight: 700; color: var(--red); }
.caixa-citada-txt { font-size: 12.5px; color: var(--grey-1); overflow: hidden;
  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.caixa-citando { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0;
  background: var(--white); flex-shrink: 0; }

/* Os botoes do balao ficam EMPILHADOS (X em cima, responder embaixo): dois
   circulos lado a lado comem 62px de largura, e no celular isso espreme o
   balao. Em coluna ocupam 28px. */
.caixa-acoes { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

/* Rastro da mensagem apagada: fica no lugar do texto, como no WhatsApp. Em
   italico e esmaecida -- nao e conteudo, e a marca de que houve conteudo. */
.caixa-apagada { display: flex; align-items: center; gap: 6px;
  font-style: italic; font-size: 13.5px; opacity: .65; }
.caixa-apagada svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Anexo recebido: a foto e o audio que o consulente mandou. Ate 01/10/2026 o
   arquivo era descartado e sobrava so a descricao da IA -- que nao deixa ler o
   valor de um comprovante, e nem existe em casa sem conta de IA. */
.caixa-anexo { margin-bottom: 5px; }
.caixa-anexo-img { max-width: 100%; max-height: 260px; border-radius: 9px; display: block; cursor: zoom-in; }
.caixa-img-link { display: block; }
/* Lançamento cancelado: apaga o CONTEÚDO, nunca a linha. Com opacity na linha
   inteira o fundo ficava translúcido e o botão "Excluir" do gesto, que mora
   atrás dela, aparecia por cima do valor (06/10/2026). */
.fin-lanc-canc > * { opacity: .5; }
.caixa-img-link + .caixa-texto { margin-top: 6px; }
/* AVISO: o piso e `min-width`, e NAO pode ser percentual. O balao encolhe ate
   o conteudo, entao `max-width:100%` no tocador vira circular - a largura
   dele depende do pai, que depende dele - e o navegador resolve isso
   colapsando: sobra um circulo com tres pontinhos, sem play nem barra. Ja
   aconteceu duas vezes. O `min()` com `vw` nao depende do pai em momento
   nenhum: da os ~230px que os controles nativos precisam e cede em tela
   estreita. O `width:100%` so deixa crescer quando o balao ja e maior. */
/* AVISO: o vermelho da bolinha de nao lidas e FIXO, nunca `var(--red)`
   (decisao do usuario em 01/10/2026). Aquela e a cor da MARCA e cada casa
   escolhe a sua: numa casa de marca azul o aviso de nao lido sairia azul e
   deixaria de ser reconhecivel como aviso. Mesma regra do semaforo da
   mensalidade e da tarja de suporte (§9, §13). Branco sobre #c62828 passa dos
   4,5:1, e o significado nunca depende so da cor -- vai o numero junto. */

/* ── Agenda de servicos (docs/12-agenda-servicos.md) ───────────────────── */
/* AVISO: a arte fica ao LADO, nao acima. A lista e de leitura rapida -- capa
   larga por servico empurraria os proximos agendamentos para fora da tela,
   que e justamente o que quem atende abre o app para ver. */
.agenda-servico { display: flex; gap: 11px; align-items: flex-start; position: relative; }
.agenda-servico-corpo { min-width: 0; flex: 1; }
/* ⚠️ QUADRADA (pedido do usuario em 02/10/2026), e a mesma proporcao nos tres
   lugares: aqui, na pagina publica da casa e na lista de servicos do /agendar.
   O que a casa ve ao cadastrar e o que o consulente ve — com duas proporcoes,
   a arte que fica boa num lugar aparece cortada no outro. */
.agenda-capa {
  width: 60px; aspect-ratio: 1; flex: none; border-radius: 9px;
  object-fit: cover; border: 1px solid var(--grey-3); background: var(--grey-4);
}
/* A arte, o nome e quem atende sao as tres coisas que identificam o servico:
   ficam na mesma linha, com a arte a esquerda. */
.agenda-serv-topo { display: flex; gap: 12px; align-items: stretch; }
/* Os dois campos ocupam a MESMA altura da foto, espalhados: o primeiro comeca
   na borda de cima dela e o segundo termina na de baixo. Sem isto o
   `margin-top` de 15px do `.field` empurrava o primeiro rotulo para baixo e a
   dupla transbordava por baixo da foto — ficava claro que eram dois blocos
   soltos lado a lado, nao uma linha so. */
.agenda-serv-topo-campos {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
.agenda-serv-topo-campos .field { margin-top: 0; }
/* ⚠️ A area de soltar tambem e 1:1, pelo mesmo motivo: ela e a previa. Largura
   em % para acompanhar o modal, com teto e piso — abaixo do piso o "Criativo"
   nao cabe, acima do teto ela rouba a linha dos dois campos. */
.agenda-dz {
  display: flex; align-items: center; justify-content: center;
  width: 31%; min-width: 118px; max-width: 160px; flex: none;
  aspect-ratio: 1; cursor: pointer; overflow: hidden;
  border: 2px dashed var(--grey-3); border-radius: 11px; background: var(--grey-5);
}
.agenda-dz:hover { border-color: var(--grey-2); }
.agenda-dz img { width: 100%; height: 100%; object-fit: cover; display: none; }
.agenda-dz span { font-size: 13px; font-weight: 700; color: var(--grey-2); }
.agenda-servico.off { opacity: .55; }
.agenda-servico-topo { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-right: 30px; }
.agenda-servico-nome { font-weight: 600; font-size: 15px; }
.agenda-servico-sub { font-size: 12.5px; color: var(--grey-1); margin-top: 2px; }
.agenda-servico-dias { font-size: 11px; color: var(--grey-1); margin-top: 4px; letter-spacing: .4px; }
.agenda-servico-acoes { margin-top: 8px; }
.agenda-servico-acoes .btn-secondary { font-size: 12px; padding: 5px 10px; width: auto; }

.agenda-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--grey-4); color: var(--grey-1);
}
/* AVISO: verde e vermelho FIXOS, nunca `var(--red)`. Aquela e a cor da MARCA e
   cada casa escolhe a sua: numa casa de marca azul o "confirmou" sairia azul e
   o aviso deixaria de ser lido como aviso. Mesma regra do semaforo da
   mensalidade e da bolinha de nao lidas (§9, §13 do CLAUDE.md). */
.agenda-tag.ok { background: #1a7a3a; color: #fff; }
.agenda-tag.off { background: #c62828; color: #fff; }
.agenda-alerta {
  margin-top: 7px; font-size: 12px; line-height: 1.35;
  background: #fff4e0; color: #7a4b00; border-radius: 7px; padding: 6px 9px;
}
html[data-theme="dark"] .agenda-alerta { background: #3a2c10; color: #f0c57a; }

.agenda-dia-titulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--grey-1); margin: 14px 0 6px;
}
.agenda-reserva { display: flex; align-items: center; gap: 11px; }
.agenda-reserva-hora {
  font-size: 15px; font-weight: 700; min-width: 48px;
  font-variant-numeric: tabular-nums;
}
.agenda-reserva-corpo { flex: 1; min-width: 0; }
/* O verde e FIXO, nao `var(--red)`: e a cor do WhatsApp, nao a da casa. Numa
   casa de marca azul um icone azul do WhatsApp deixaria de ser reconhecido —
   e o que faz este botao ser entendido sem rotulo e exatamente a cor. Mesma
   regra do semaforo da mensalidade (§9), pelo mesmo motivo. */
/* Acao de cabecalho escrita por extenso, ao lado dos icones. Sem caixa e sem
   respiro proprio: ela divide a linha com botoes de 20px e qualquer padding a
   faria empurrar os outros ou desalinhar da altura deles. */
/* Atalhos do campo de lembretes: somam um valor ao que ja esta escrito. */
/* Titulo do modal com uma acao a direita. */
.modal-titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* ⚠️ Vermelho FIXO, nao `var(--red)`: a cor da marca e escolhida por cada casa,
   e numa casa de marca verde a lixeira perderia o unico sinal de que ela e
   destrutiva. Mesma regra do semaforo da mensalidade. */
.agenda-lixeira {
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0; flex: none;
  width: 32px; height: 32px; cursor: pointer; color: var(--grey-2);
}
.agenda-lixeira svg { width: 18px; height: 18px; display: block; }
.agenda-lixeira:hover { color: #c62828; }
.agenda-lixeira.armada { color: #c62828; }

.agenda-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.agenda-chips button {
  border: 1px solid var(--grey-3); background: none; color: var(--grey-1);
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  border-radius: 20px; padding: 4px 11px; cursor: pointer;
}
.agenda-chips button:hover { border-color: var(--red); color: var(--red); }

.link-topo {
  border: none; background: none; padding: 0 4px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--grey-1);
  white-space: nowrap; align-self: center;
}
.link-topo:hover { color: var(--black); }

.agenda-zap {
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0; flex: none;
  width: 34px; height: 34px; cursor: pointer; color: #25D366;
}
.agenda-zap svg { width: 21px; height: 21px; display: block; }
.agenda-zap:hover { color: #1da851; }
.agenda-reserva-nome { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.agenda-reserva-sub { font-size: 12px; color: var(--grey-1); margin-top: 2px; }

/* Grade semanal do servico */
/* AVISO: `flex-shrink: 0` nao e enfeite -- sem ele a grade ENCOLHE e some.
   O `.modal` e `display:flex; flex-direction:column` com `max-height:92%`, e
   num container flex o item so resiste a compressao por causa do
   `min-height:auto`. Mas `overflow` diferente de `visible` ANULA esse minimo
   automatico: o `overflow:hidden` que eu pus aqui para arredondar o canto foi
   o que permitiu espremer 265px de grade em 66px -- e esconder as 4 linhas de
   baixo sem erro nenhum. Media no navegador em 01/10/2026, porque de olho
   parecia que os dias nem tinham sido desenhados.
   Vale para todo bloco deste modulo que tenha `overflow` e possa crescer. */
.agenda-grade { border: 1px solid var(--grey-3); border-radius: 9px; overflow: hidden; flex-shrink: 0; }
.agenda-grade-linha {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-bottom: 1px solid var(--grey-3);
}
.agenda-grade-linha:last-child { border-bottom: none; }
.agenda-grade-dia { font-size: 12.5px; font-weight: 600; min-width: 62px; }
.agenda-grade-faixas { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.agenda-faixa {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--grey-4); border-radius: 999px; padding: 3px 4px 3px 10px;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.agenda-faixa button {
  border: none; background: none; cursor: pointer; color: var(--grey-1);
  font-size: 15px; line-height: 1; padding: 0 4px;
}
.agenda-faixa-add {
  border: 1px dashed var(--grey-3); background: none; color: var(--grey-1);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer;
  font-family: inherit;
}

/* Escolher dia e hora */
.agenda-mes { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.agenda-mes span { font-size: 13px; font-weight: 600; }
/* Redondos e centrados por flex, com a seta em SVG — como no /agendar. Com o
   glifo de texto e `line-height: 1` a seta saia acima do centro da caixa. */
.agenda-mes button {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--grey-3); background: none; color: var(--grey-1);
  border-radius: 50%; width: 32px; height: 32px; padding: 0; cursor: pointer;
}
.agenda-mes button svg { width: 15px; height: 15px; display: block; }
.agenda-mes button:hover { border-color: var(--grey-2); color: var(--black); }
/* O MES INTEIRO, em grade — o mesmo desenho da pagina publica (decisao do
   usuario em 02/10/2026). Aqui vivia uma tira rolante, e ela escondia o mes:
   so os primeiros dias apareciam, e quem nao percebesse que rolava concluiria
   que a casa so atende naquela semana.
   AVISO: a primeira linha comeca com celulas VAZIAS ate cair no dia da semana
   certo. Sem isso os numeros alinham embaixo do rotulo errado e o calendario
   mente sobre o dia — o erro mais caro desta tela. */
.agenda-sem-cab { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.agenda-sem-cab span {
  text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .4px;
  color: var(--grey-2); text-transform: uppercase;
}
.agenda-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; flex-shrink: 0; }
.agenda-dia {
  border: none; background: var(--grey-4); color: inherit; border-radius: 9px;
  aspect-ratio: 1; cursor: pointer; font-size: 15px; font-weight: 700; font-family: inherit;
  display: flex; align-items: center; justify-content: center; position: relative; padding: 0;
}
.agenda-dia:hover:not(:disabled) { background: var(--grey-3); }
/* Dia sem vaga continua VISIVEL, apagado: tira-lo deixaria buracos na grade e
   faria o mes parecer menor do que e. */
.agenda-dia:disabled { background: none; color: var(--grey-2); font-weight: 500; cursor: default; }
.agenda-dia.vazio { background: none; cursor: default; }
.agenda-dia.on { background: var(--red); color: #fff; }
.agenda-ponto { position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--red); }
.agenda-dia.on .agenda-ponto { background: #fff; }

/* Os horarios moram num CARD proprio: soltos embaixo do calendario pareciam
   continuacao dele, sem nada separando "o dia" de "a hora". */
.agenda-horarios { display: flex; flex-direction: column; gap: 9px; min-width: 0; margin-top: 10px; flex-shrink: 0; }
.agenda-horarios.cheio { border: 1px solid var(--grey-3); border-radius: 12px; padding: 13px; }
.agenda-horarios-dia { font-size: 13px; font-weight: 700; }
/* Teto com rolagem: dia cheio pode ter dez ou mais horarios, e a lista
   empurraria os botoes do modal para fora da tela. */
.agenda-horarios-lista {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 300px; overflow-y: auto; padding-right: 2px;
}
/* AVISO: horario e BOTAO, e tem de parecer um. Com borda cinza fina e texto da
   cor do corpo eles liam como celulas de uma tabela. Agora levam a cor da marca
   no texto e na borda.
   `color-mix` clareia a cor da CASA sem a gente escolher um tom: cada casa tem
   a sua, e um tom fixo brigaria com marca vermelha ou verde. A mistura e sempre
   para o BRANCO, inclusive no tema escuro — ali um vermelho claro sobre fundo
   escuro e o que se le; misturar com o fundo do tema sumiria com a borda.
   A borda cinza vem ANTES como reserva, para navegador sem `color-mix` nao
   ficar com botao sem contorno nenhum. */
.agenda-hora {
  width: 100%; border: 1.5px solid var(--grey-3);
  border-color: color-mix(in srgb, var(--red) 42%, #fff);
  background: none; color: var(--red); font-family: inherit;
  border-radius: 9px; padding: 12px 6px; cursor: pointer; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.agenda-hora:hover { border-color: var(--red); background: color-mix(in srgb, var(--red) 7%, transparent); }
.agenda-hora-par { display: flex; gap: 7px; }
/* O escolhido fica NEUTRO ao lado do Avancar: dois botoes coloridos lado a lado
   disputariam o toque, e o que decide ali e o Avancar. */
.agenda-hora-par .agenda-hora {
  flex: 1; background: var(--grey-4); border-color: var(--grey-4); color: var(--black); cursor: default;
}
.agenda-avancar {
  flex: 1; border: none; border-radius: 9px; background: var(--red); color: #fff; font-family: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer; padding: 11px 6px;
}
/* O que foi escolhido, no topo do passo dos dados: sem isso a pessoa preenche
   nome e telefone sem nada na tela dizendo para que dia. */
.agenda-resumo {
  background: var(--grey-4); border-radius: 9px; padding: 9px 11px;
  font-size: 13px; font-weight: 600; margin-bottom: 4px;
}
.agenda-carregando { font-size: 12.5px; color: var(--grey-1); padding: 8px 0; }

/* ── Esperar sem recolher a tela ─────────────────────────────────────────
   ⚠️ Trocar o conteudo por "Carregando…" fazia o modal encolher para tres
   linhas e voltar a crescer a CADA dia escolhido — a tela inteira piscava
   para buscar uma lista de horarios. Agora o que ja esta na tela fica, so
   apagado e pulsando, e a altura nao muda entre o pedido e a resposta. */
@keyframes agenda-pulsa { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.agenda-dias.esqueleto .agenda-dia {
  color: transparent; background: var(--grey-4); cursor: default;
  animation: agenda-pulsa 1.1s ease-in-out infinite;
}
.agenda-dias.esqueleto .agenda-dia.vazio { background: none; animation: none; }
.agenda-horarios.aguardando .agenda-horarios-lista {
  opacity: .4; pointer-events: none; animation: agenda-pulsa 1.1s ease-in-out infinite;
}
/* Tem a MESMA altura de um botao de horario (12px de respiro em cima e
   embaixo + a linha do texto), para o card nascer do tamanho que vai ter. */
.agenda-hora-esqueleto {
  display: block; height: 45px; border-radius: 9px; background: var(--grey-4);
  animation: agenda-pulsa 1.1s ease-in-out infinite;
}

/* O lapis fica no canto do card, e so aparece porque o resto do card agora faz
   outra coisa (marcar). Posicao absoluta para nao disputar largura com o titulo
   nem empurrar a linha de baixo. */
/* Sem moldura: o lapis e uma affordance discreta num cartao que inteiro ja e
   clicavel. A borda o fazia disputar atencao com o proprio cartao. */
.agenda-editar {
  position: absolute; top: 7px; right: 8px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--grey-2); padding: 0;
  width: 30px; height: 30px; cursor: pointer;
}
.agenda-editar svg { width: 17px; height: 17px; display: block; }
.agenda-editar:hover { color: var(--black); }

/* Erro DENTRO do modal, nao em toast: o toast aparece atras do modal aberto,
   e quem esta olhando o formulario nao ve o motivo da recusa. */
.agenda-faixa-erro {
  font-size: 12.5px; line-height: 1.35; margin-top: 2px;
  background: #fdecea; color: #a01b1b; border-radius: 7px; padding: 7px 9px;
}
html[data-theme="dark"] .agenda-faixa-erro { background: #3a1a1a; color: #f2a5a5; }

.agenda-bloq-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--grey-3);
}
.agenda-bloq-item:last-child { border-bottom: none; }
.agenda-bloq-quando { font-size: 13px; font-weight: 600; }
.agenda-bloq-sub { font-size: 11.5px; color: var(--grey-1); margin-top: 1px; }


/* "da casa" na linha da conversa: quem opera precisa saber que do outro lado
   esta um filho, nao um visitante. Discreto — e informacao, nao alerta. */
/* ⚠️ `margin-right: auto` cola o selo NO NOME. A linha é `space-between` com
   três itens, e sem isto o selo ia parar no meio do vazio, longe da pessoa a
   que se refere — parecia enfeite solto em vez de etiqueta de quem está ali. */
.caixa-selo-membro {
  flex: none; margin-right: auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--grey-1);
  background: var(--grey-4); border-radius: 20px; padding: 2px 7px;
}

.caixa-filtros { display: flex; gap: 8px; margin-bottom: 10px; }
.caixa-chip {
  border: 1px solid var(--grey-3);
  background: none;
  color: var(--grey-1);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.caixa-chip.on { background: var(--black); color: var(--white); border-color: var(--black); }
.caixa-chip b { font-weight: 700; }
.caixa-chip.on b { opacity: .85; }

.caixa-item-previa { position: relative; padding-right: 30px; }
.caixa-nao-lidas {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #c62828;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  text-align: center;
}

.caixa-anexo audio { width: 100%; min-width: min(232px, 68vw); height: 38px; display: block; }
.caixa-anexo-esperando { font-size: 12.5px; opacity: .7; font-style: italic; }

/* Gravando: o botao do microfone fica vermelho e pulsando, para nao restar
   duvida de que o microfone esta aberto -- gravar sem perceber seria pessimo. */
#caixa-btn-gravar.gravando { color: #fff; background: var(--red); }
@keyframes caixa-pulso { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
#caixa-btn-gravar.gravando { animation: caixa-pulso 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #caixa-btn-gravar.gravando { animation: none } }

/* ── Agenda: para quem e o atendimento, e a busca do nome (02/10/2026) ───── */
/* ⚠️⚠️ Os tokens deste arquivo sao `--grey-1..5`, `--white`, `--black`, `--red`.
   A primeira versao usou `--line`, `--muted` e `--bg`, que NAO EXISTEM aqui — e
   `var()` indefinido invalida a DECLARACAO INTEIRA: os botoes ficaram sem borda
   nenhuma, a lista de busca sem separador e sem hover. Nada quebra, nada avisa,
   so some. Usar os tokens certos tambem da o tema escuro de graca, porque e
   justamente eles que o `html[data-theme="dark"]` redefine. */
.agenda-publico { display:flex; gap:10px; margin-top:12px; }
.agenda-publico-bt {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:14px 10px; border:1.5px solid var(--grey-3); border-radius:12px;
  background:var(--grey-5); color:var(--black); font:inherit; cursor:pointer;
}
.agenda-publico-bt:hover { border-color:var(--red); background:var(--white); }
.agenda-publico-bt:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.agenda-publico-bt .ap-rotulo {
  font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.02em;
  line-height:1.25; text-align:center;
}
.agenda-publico-bt .ap-valor { font-size:13px; color:var(--grey-1); }
/* A busca precisa de um ancora posicionada; sem isto a lista cai no canto da
   tela em vez de debaixo do campo. */
.agenda-busca-campo { position:relative; }
.agenda-busca {
  position:absolute; left:0; right:0; top:100%; z-index:40; max-height:210px; overflow-y:auto;
  background:var(--white); border:1px solid var(--grey-3); border-radius:10px; margin-top:4px;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.35);
}
/* ⚠️ `display:flex` numa classe venceria o atributo `hidden` (que e so o
   display:none do navegador) e a lista ficaria aberta para sempre. */
.agenda-busca[hidden] { display:none; }
.agenda-busca-item {
  display:block; width:100%; text-align:left; padding:9px 11px; font:inherit;
  color:var(--black); background:none; border:0; border-bottom:1px solid var(--grey-3); cursor:pointer;
}
.agenda-busca-item:last-child { border-bottom:0; }
.agenda-busca-item:hover { background:var(--grey-4); }
.agenda-busca-item small { display:block; color:var(--grey-1); font-size:12px; }
.agenda-busca-item.novo { color:var(--red); font-weight:600; }
.agenda-busca-vazio { padding:9px 11px; color:var(--grey-1); font-size:13px; }
/* Horario fora da grade: discreto de proposito, e a excecao. */
.agenda-outro { margin-top:10px; }
.agenda-outro-link {
  background:none; border:0; padding:0; font:inherit; font-size:13px;
  color:var(--grey-1); text-decoration:underline; cursor:pointer;
}
.agenda-outro-caixa { display:flex; gap:8px; align-items:center; margin-top:8px; }
.agenda-outro-caixa input[type="time"] {
  flex:1; min-width:0; padding:8px 10px; border:1px solid var(--grey-3);
  border-radius:8px; font:inherit; background:var(--white); color:var(--black);
}

/* Barra do historico: grudada no fim do `.content`, logo acima do menu de baixo
   (02/10/2026). ⚠️ `sticky`, nunca `fixed` — ver o aviso na marcacao. */
.agenda-historico-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 18px; padding: 12px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--black); background: var(--grey-5);
  border: 1px solid var(--grey-3); border-radius: 12px;
  /* O conteudo rola POR BAIXO dela; sem um fundo opaco a lista apareceria
     atravessada no meio do texto. */
  box-shadow: 0 -8px 16px -12px rgba(0,0,0,.25);
}
.agenda-historico-bar:hover { background: var(--white); border-color: var(--red); }
/* Com histórico, a coluna empurra a barra para o fim mesmo com a tela vazia. */
#view-agenda .content.com-historico { display: flex; flex-direction: column; padding-bottom: 14px; }
#view-agenda .content.com-historico .agenda-historico-bar { margin-top: auto; }
.agenda-tag.fim { background: var(--grey-3); color: var(--black); }

/* ── Caixa: arrastar a linha para a direita e arquivar (02/10/2026) ──────── */
/* `pan-y` entrega a rolagem vertical ao navegador e deixa o horizontal
   para nos: sem isto, arrastar de lado tambem rolava a lista. */
.caixa-swipe { position: relative; overflow: hidden; touch-action: pan-y; }
/* A acao mora ATRAS da linha, revelada pelo deslocamento — nao e inserida e
   removida do DOM, senao a lista saltaria a cada gesto. */
.caixa-swipe-acao {
  position: absolute; top: 0; bottom: 0; left: 0; width: 104px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: #1f6f9c; color: #fff;
}
.caixa-swipe-acao.desarq { background: var(--grey-1); }
.caixa-swipe > .caixa-item { position: relative; background: var(--white); transition: transform .18s ease; }
.caixa-swipe.aberta > .caixa-item { transform: translateX(104px); }
/* ⚠️ Enquanto o dedo esta arrastando a transicao sai, senao a linha anda
   atrasada em relacao ao dedo e o gesto parece travado. */
.caixa-swipe.arrastando > .caixa-item { transition: none; }
@media (prefers-reduced-motion: reduce) { .caixa-swipe > .caixa-item { transition: none; } }

/* ── Rifa: as caixas de aviso, legíveis nos dois temas (02/10/2026) ──────── */
/* ⚠️ Estavam com o fundo claro FIXO escrito em linha e sem cor de texto: no
   tema escuro o texto herdava `var(--black)`, que vira quase branco, e a frase
   "Sorteio confirmado…" sumia dentro do verde. É exatamente a mesma praga do
   `.mens-caixa` logo acima, e vai resolvida do mesmo jeito: o par fundo+texto
   declarado para cada tema, nunca só o fundo. */
.rifa-aviso { margin-top: 10px; padding: 10px; border-radius: 10px; font-size: 13px; border: 1px solid transparent; }
.rifa-aviso.atencao { background: #FFF4D6; color: #5a3c00; border-color: #F0C27B; }
.rifa-aviso.ok      { background: #DDF5E3; color: #14532d; border-color: #9ED3B2; }
html[data-theme="dark"] .rifa-aviso.atencao { background: #3a2c12; color: #f0d9a8; border-color: #6b5220; }
html[data-theme="dark"] .rifa-aviso.ok      { background: #12301f; color: #bfe6cd; border-color: #2c5e40; }

/* ── Categoria financeira de fábrica (02/10/2026) ────────────────────────── */
.cat-fixa {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--grey-1); background: var(--grey-4); border: 1px solid var(--grey-3);
  border-radius: 5px; padding: 3px 6px; white-space: nowrap;
}

/* ── Arte da rifa: área 16:9 clicável, com a prévia dentro (02/10/2026) ──── */
.arte-zona {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;                  /* a proporção que a capa usa */
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--grey-3); border-radius: 10px;
  background: var(--grey-4); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.arte-zona:hover { border-color: var(--grey-2); }
/* Arrastando um arquivo por cima. Classe, e não `:hover`: o ponteiro com botão
   pressionado não dispara hover de forma confiável durante o arraste. */
.arte-zona.arrastando { border-color: var(--red); background: var(--grey-3); }
.arte-zona:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.arte-zona-txt {
  /* ⚠️ --grey-1, não --grey-2: com o -2 o rótulo dava 4,49:1 sobre o fundo no
     tema escuro, um fio abaixo dos 4,5 que texto de 16px pede. Medido, não
     estimado. */
  font-size: 16px; font-weight: 700; color: var(--grey-1);
  pointer-events: none;                  /* o clique é sempre da zona */
}
.arte-zona img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none;
}
/* Com arte: a imagem ocupa a caixa, o rótulo sai e a borda deixa de ser
   tracejada — tracejado quer dizer "vazio, solte algo aqui". */
.arte-zona.tem-arte img { display: block; }
.arte-zona.tem-arte .arte-zona-txt { display: none; }
.arte-zona.tem-arte { border-style: solid; border-color: var(--grey-3); }
/* O × só existe quando há o que remover: sem ele, arte escolhida por engano não
   teria como sair (clicar na zona TROCA, não limpa). */
.arte-zona-x {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0;
}
.arte-zona.tem-arte .arte-zona-x { display: flex; }
.arte-zona-x:hover { background: rgba(0,0,0,.75); }

/* ── PDF desenhado na tela (mostrarPdf, utils.js) ──────────────────────── */
/* O celular não mostra PDF em <iframe>: as páginas viram <canvas>. */
.pdf-caixa { width: 100%; align-self: stretch; }
.pdf-paginas { display: flex; flex-direction: column; gap: 8px; }
.pdf-pagina { width: 100%; height: auto; display: block; background: #fff; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.pdf-aviso { font-size: 13px; color: var(--grey-1); padding: 14px 10px; text-align: center; }
.pdf-baixar { display: block; text-align: center; margin: 10px 0 4px; font-size: 13px; font-weight: 600; color: var(--red); }