/* =========================================================
   TEMA VISUAL
   Carregado depois dos estilos de cada módulo: refina tipografia,
   formas e estados sem mudar a estrutura dos componentes.
========================================================= */

html{ -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  background: var(--paper);
  color: var(--ink);
}
button, input, select, textarea{ font-family: var(--font-ui); }
:focus-visible{ outline: none; box-shadow: var(--focus); }
::selection{ background: var(--brand-soft); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Barra superior ---------- */
.topbar{
  position: sticky; top: 0; z-index: 150;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark{ width: 38px; height: 38px; flex-shrink: 0; display: block; border-radius: 10px; }
.wordmark{ font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: var(--brand); }
.wordmark span{ color: var(--brand-accent); }
.brand-text{ display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand-text strong{ font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text > span{ font-size: 13px; color: var(--text-muted); }
.topbar-actions{ display: flex; align-items: center; gap: 8px; }

.notif-bell{
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-soft); font-size: 0;
}
.notif-bell:hover{ background: var(--paper); }
.notif-bell > svg{ width: 22px; height: 22px; }
.notif-badge{ top: 3px; right: 2px; font-size: 11px; border: 2px solid #fff; }
.notif-panel{ border-radius: var(--radius); box-shadow: var(--shadow-float); font-size: 14px; }
.notif-panel-header{ font-family: var(--font-ui); font-size: 15px; }
.notif-item.unread{ background: var(--brand-soft); }

.user-chip{
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 4px 4px;
  border: 1px solid var(--line); border-radius: 999px;
}
.user-avatar{
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}
.user-meta{ display: flex; flex-direction: column; line-height: 1.2; }
.user-meta strong{ font-size: 14px; }
.user-meta span{ font-size: 12px; color: var(--text-muted); }

/* ---------- Navegação (lateral no computador) ---------- */
#appRoot .tab-btn{
  display: flex; align-items: center; gap: 12px;
  position: static; top: auto;
  font-size: 15px; font-weight: 700;
  color: var(--ink-soft);
  border: none; border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
}
#appRoot .tab-btn:hover{ background: var(--paper); color: var(--ink); }
#appRoot .tab-btn.active{ background: var(--brand-soft); color: var(--brand); border-bottom: none; }
.tab-icon{ display: grid; place-items: center; flex-shrink: 0; }
.tab-icon svg{ width: 21px; height: 21px; display: block; }
.tab-short{ display: none; }

/* ---------- Cabeçalho de cada tela ---------- */
.toolbar{
  border-top: none; border-bottom: none;
  padding: 0; margin: 0 0 18px;
  align-items: flex-end;
}
.booklet-label{ flex-direction: column; align-items: flex-start; gap: 2px; }
.booklet-title{ font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.booklet-range{ font-size: 14.5px; color: var(--text-muted); }
.section-title{ font-size: 18px; font-weight: 700; margin: 30px 0 12px; }

/* ---------- Botões ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 9px 16px;
  border-radius: 10px;
  font-size: 14.5px; font-weight: 700;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover{ opacity: 1; }
.btn-primary{ background: var(--brand); color: #fff; }
.btn-primary:hover{ background: var(--brand-strong); }
.btn-primary:disabled{ background: var(--line-strong); cursor: not-allowed; }
.btn-ghost{ background: var(--paper-raised); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover{ background: var(--paper); }
.btn-auto{ background: var(--amber); color: #fff; }
.btn-auto:hover{ background: var(--brand-accent-strong); }
.link-btn{ font-family: var(--font-ui); font-size: 14px; border-radius: 8px; }
.link-btn:hover{ background: var(--paper); }
.icon-btn{ width: 34px; height: 34px; border-radius: 9px; }

/* ---------- Superfícies ---------- */
.publication, .report-card, .info-block{ border-radius: var(--radius-lg); box-shadow: none; }
.member-card, .territory-card, .fs-group-card, .mydesig-item, .stat-card{ border-radius: var(--radius); }
.report-card-header{ padding: 14px 20px; gap: 12px; }
.report-card-header h3{ font-family: var(--font-ui); font-size: 16.5px; }
.rc-meta{ font-size: 13px; }
.stat-card{ padding: 18px 20px; }
.stat-card .stat-value{ font-family: var(--font-ui); font-size: 30px; letter-spacing: -0.02em; }
.stat-card .stat-label{ font-size: 13.5px; }

/* ---------- Programação das reuniões ---------- */
.pub-header{ padding: 16px 24px; }
.pub-header-text .pub-scripture{ font-size: 20px; }
.pub-sub{ padding: 12px 24px; font-size: 14px; }
.section-band{
  font-family: var(--font-ui);
  font-size: 12.5px; letter-spacing: .06em;
  padding: 9px 24px;
}
.section-band .song-tag{ letter-spacing: 0; font-size: 12.5px; }
.part{ padding: 13px 24px; }
.part-info .part-title{ font-size: 15px; }
.part-info .part-meta{ font-size: 13px; }
.progress-dot{ height: 6px; }
.progress-dot.filled{ background: var(--brand); }
.pub-fill-status{ font-size: 12.5px; }
.pub-fill-status.complete{ background: var(--ok-bg); color: var(--ok); }

/* O destaque de "você está designado" é o elemento marcante do sistema */
.ro-part.mine, .mydesig-item.now{
  background: var(--highlight-bg);
  box-shadow: inset 4px 0 0 var(--amber);
}
.mydesig-item.now{ border-color: var(--highlight-line); }
.ro-you-badge{ background: var(--amber); font-size: 11.5px; padding: 2px 10px; }
.ro-week-banner{
  background: var(--highlight-bg); color: var(--highlight-ink);
  border: none; box-shadow: inset 4px 0 0 var(--amber);
  font-size: 14px; padding: 11px 24px;
}
.ro-part{ padding: 12px 24px; }
.ro-part-name{ font-size: 14.5px; }

.segmented{ border-radius: 12px; padding: 4px; }
.segmented button{ font-family: var(--font-ui); font-size: 14px; padding: 8px 18px; border-radius: 9px; }
.segmented button.active{ background: var(--brand); }

/* ---------- Campos ---------- */
.assign-field{ border-radius: 10px; min-height: 42px; padding: 7px 10px; }
.assign-field:hover{ border-color: var(--line-strong); }
.assign-field.open{ border-color: var(--brand); box-shadow: var(--focus); }
.avatar{ background: var(--brand); }
.avatar.empty{ background: transparent; }
.assignee-name{ font-size: 14px; }
.dropdown{ border-radius: var(--radius); box-shadow: var(--shadow-float); }
.dropdown-item{ font-size: 14.5px; padding: 10px 12px; }
.dropdown-search input{ min-height: 38px; }

.inline-form input, .inline-form select, .inline-form textarea,
.fs-address-input, .pcard-year, .login-card input{
  border-radius: 10px; min-height: 42px; font-size: 15px;
  border-color: var(--line-strong);
}
.inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus,
.fs-address-input:focus, .login-card input:focus{ border-color: var(--brand); box-shadow: var(--focus); }

/* Rótulos em caixa normal: mais fáceis de ler do que em maiúsculas */
.masthead-sub, .pub-week, .announcement-date, .pcard-label, .mydesig-tag, .member-privilege,
.event-tag, .territory-status, .plan-badge, .status-badge, .pet-status, .soon-group,
.inline-form label, .report-table th, .pcard-table th, .login-eyebrow, .login-card label,
.ro-you-badge, .fs-day-name .fs-day-date{
  text-transform: none; letter-spacing: 0;
}
.mydesig-tag, .member-privilege, .event-tag, .territory-status, .plan-badge,
.status-badge, .pet-status{ font-size: 12px; padding: 3px 10px; }
.pcard-label, .inline-form label, .login-card label{ font-size: 13px; }
.report-table th, .pcard-table th{ font-size: 13px; }
.soon-group{ font-size: 14px; color: var(--ink-soft); }
.pub-week{ font-family: var(--font-ui); font-size: 13.5px; }

/* ---------- Avisos ---------- */
.note-bar{ background: var(--brand-soft); border: none; border-radius: var(--radius); color: var(--ink-soft); font-size: 14px; }
.alert-bar{ border-radius: var(--radius); font-size: 14px; }
.toast{ border-radius: var(--radius); font-size: 14.5px; padding: 12px 20px; box-shadow: var(--shadow-float); }

/* ---------- Tabelas e cartões ---------- */
.report-table{ border-radius: var(--radius-lg); }
.report-table td{ font-size: 14.5px; }
.member-avatar{ background: var(--brand); }
.member-name, .territory-name, .fs-group-name{ font-size: 15.5px; }
.territory-num{ border-radius: 10px; background: var(--brand); }
.fs-group-num{ background: var(--duties); }
.pcard-section-title{ font-family: var(--font-ui); font-size: 16px; }
.info-block summary{ font-family: var(--font-ui); font-size: 16px; }
.modal-box{ border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.modal-head{ border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--brand); }
.modal-head h3{ font-family: var(--font-ui); }

/* ---------- Login ---------- */
.login-screen{ background: linear-gradient(180deg, var(--brand-soft) 0, var(--paper) 55%); }
.login-logo{ display: block; width: 84px; height: 84px; margin: 0 0 18px; border-radius: 20px; }
.login-card{ border-radius: 20px; box-shadow: var(--shadow-float); border: none; padding: 34px 30px; }
.login-title{ font-family: var(--font-ui); font-size: 26px; letter-spacing: -0.01em; }
.login-eyebrow{ font-size: 14px; color: var(--brand); font-weight: 700; }
.login-card input{ font-size: 16px; }

/* ---------- Painel da plataforma ---------- */
#platformAdminRoot .masthead-title{ font-family: var(--font-ui); letter-spacing: -0.01em; }

/* ---------- Início ---------- */
.home-more{ margin: 6px 0 32px; }