/* ============================================================
   ImobiP — Utilitários de layout / acessibilidade (FASE 5.19)
   Substituem inline `style="..."` espalhados pelos templates.
   ============================================================ */

/* ─── Spacing ──────────────────────────────────────────────── */
.p-0  { padding: 0; }
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }

.px-2 { padding-left: 8px; padding-right: 8px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }

.m-0  { margin: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.ml-2 { margin-left: 8px; }
.mr-2 { margin-right: 8px; }

.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

/* ─── Width helpers ────────────────────────────────────────── */
.w-100 { width: 100%; }
.mw-160 { max-width: 160px; }
.mw-240 { max-width: 240px; }
.mw-360 { max-width: 360px; }
.mw-480 { max-width: 480px; }

/* ─── Flex / display ──────────────────────────────────────── */
.flex      { display: flex; }
.flex-col  { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.hidden    { display: none !important; }

/* ─── Texto ─────────────────────────────────────────────────── */
.text-muted  { color: var(--color-text-muted); }
.text-soft   { color: var(--color-text-soft); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-sm    { font-size: 13px; }
.text-xs    { font-size: 12px; }
.fw-600     { font-weight: 600; }
.fw-700     { font-weight: 700; }

/* ─── Visually hidden (a11y) ──────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ─── Foco visível em chips e labels-checkbox (D-3) ───────── */
/* Aplica a TODOS os patterns chip/filter — :focus-within cobre o caso de
   <label><input type="checkbox" hidden></label>. */
.cal-chip:focus-within,
.filter-chip:focus-within,
.chip:focus-within,
.hashtag-chip:focus-within,
[role="button"]:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─── Modal genérico (D-4): role=dialog estilizado ─────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(13, 27, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  animation: modal-fade-in 180ms ease-out;
}
.modal-dialog {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0,0,0,.25);
  max-width: 520px;
  width: calc(100% - 32px);
  padding: 24px;
}
@keyframes modal-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Skeleton (D-24) ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-border-soft) 25%,
    var(--color-border) 50%,
    var(--color-border-soft) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.skeleton-200 { height: 200px; }
.skeleton-line { height: 14px; margin-bottom: 8px; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Banner pequeno (D-27) ────────────────────────────────── */
.banner-sm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
}
.banner-sm.banner-warn {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.banner-sm.banner-info {
  background: var(--color-info-soft);
  color: var(--color-info);
}

/* ─── Plano destacado (D-11) — pricing card "Pro" ─────────── */
.plan-card.is-featured .plan-price {
  font-size: calc(var(--font-size-display, 36px) + 2px);
}
.plan-card.is-featured {
  box-shadow: var(--shadow-lg, 0 16px 32px rgba(11,72,129,0.18));
}
.plan-badge {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ─── Top-post-rank (D-6) — contraste do gradient ─────────── */
.top-post-rank {
  /* Ajuste de cor do texto sobre gradient — passa AAA. */
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* ─── Hashtag chip (D-5): role=button estilizado ──────────── */
.hashtag-chip {
  cursor: pointer;
  user-select: none;
}
.hashtag-chip[aria-pressed="true"] {
  background: var(--color-brand);
  color: #fff;
}

/* ─── Mobile: pricing 1col abaixo de 800px (D-19) ─────────── */
@media (max-width: 800px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }
  .plan-card.is-featured {
    order: -1; /* destaque sobe pra primeira posição */
  }
}

/* ─── Mobile: studio grid colapsa <900px (D-17) ──────────── */
@media (max-width: 900px) {
  .studio-grid {
    grid-template-columns: 1fr !important;
  }
  .studio-grid > .studio-side {
    order: 2; /* form-groups vão pro fim */
  }
}

/* ─── Mobile: calendar toolbar drawer (D-18) ──────────────── */
@media (max-width: 768px) {
  .calendar-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .calendar-toolbar .toolbar-group {
    width: 100%;
  }
}

/* ─── KPI grid (D-29) ──────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* ─── Botão ghost em vermelho (D-2) ────────────────────────── */
.btn.btn-danger-text {
  color: var(--color-danger);
}
.btn.btn-danger-text:hover {
  background: var(--color-danger-soft);
}

/* ─── Spinner ─────────────────────────────────────────────── */
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Topbar refactor (D-8/D-9/D-26/D-33) ───────────────── */
.flex-spacer { flex: 1; }
.mobile-only { display: none; }
@media (max-width: 768px) {
  .mobile-only { display: inline-flex; }
}
.topbar-page-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

/* ─── Disclosure "Mais opções" (D-12) ──────────────────── */
.more-options {
  border-top: 1px solid var(--color-border-soft);
  padding-top: 12px;
  margin-top: 12px;
}
.more-options-summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  padding: 6px 0;
  font-size: 13px; font-weight: 600;
  color: var(--color-text-muted);
  list-style: none;
}
.more-options-summary::-webkit-details-marker { display: none; }
.more-options-chevron {
  margin-left: auto;
  transition: transform 180ms ease-out;
}
.more-options-chevron.is-open { transform: rotate(180deg); }
.more-options[open] .more-options-summary { color: var(--color-brand); }

.fb-icon { color: var(--color-facebook); }

/* schedule-option: estado disabled visual */
.schedule-option.is-disabled { opacity: .55; cursor: not-allowed; }

/* ─── Required-mark (D-7) ─────────────────────────────── */
.required-mark { color: var(--color-danger); margin-left: 2px; }
.text-danger { color: var(--color-danger); }

/* ─── Onboarding skip link ──────────────────────────────── */
.onb-skip {
  position: absolute;
  top: 24px;
  right: 24px;
  text-decoration: none;
}
.onb-skip:hover { text-decoration: underline; }

/* ─── Super-admin (D-2) ───────────────────────────────────── */
.sa-form { margin-bottom: 14px; }
.sa-input { margin-bottom: 8px; font-size: 13px; }
.sa-btn-danger { border-color: var(--color-danger) !important; color: var(--color-danger); }
.sa-btn-warn   { border-color: var(--color-warning) !important; color: var(--color-warning); }

/* ─── Migração D-2 segunda onda ────────────────────────────── */
/* Classes adicionadas para substituir style="..." inline (335 ocorrências
   em 46 arquivos → mapa de classes utilitárias). */

.mb-24       { margin-bottom: 24px; }
.my-28       { margin-top: 28px; margin-bottom: 28px; }
.py-12       { padding-top: 12px; padding-bottom: 12px; }
.ml-auto     { margin-left: auto; }
.w-auto      { width: auto; }
.mx-auto     { margin-left: auto; margin-right: auto; }
.h-60        { height: 60px; }
.block       { display: block; }
.inline-flex { display: inline-flex; }
.justify-center { justify-content: center; }
.opacity-60  { opacity: 0.6; }
.br-md       { border-radius: var(--radius); }
.fs-16       { font-size: 16px; }
.fs-18       { font-size: 18px; }
.fs-22       { font-size: 22px; }
.fs-28       { font-size: 28px; }
.my-16       { margin-top: 16px; margin-bottom: 16px; }

.text-success   { color: var(--color-success); }
.text-facebook  { color: var(--color-facebook); }
.text-instagram { color: var(--color-instagram); }

.label-caps {
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.img-contain {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.avatar-img {
  border-radius: 50%;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.flex-1            { flex: 1; }
.cursor-pointer    { cursor: pointer; }
.opacity-30        { opacity: 0.3; }
.no-underline      { text-decoration: none; }
.text-default      { color: var(--color-text); }
.text-brand        { color: var(--color-brand); }
.color-grey        { color: #888; }
.fs-14             { font-size: 14px; }
.fs-32             { font-size: 32px; }
.mb-1-5            { margin-bottom: 6px; }
.mb-32             { margin-bottom: 32px; }
.mt-24             { margin-top: 24px; }
.mt-32             { margin-top: 32px; }
.bt-soft           { border-top: 1px solid var(--color-border-soft); }
.pt-3              { padding-top: 12px; }

/* Overlay de loading do render no studio */
.render-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
}
.absolute-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CTA "azul brand" usado em emails/landing */
.btn-cta-link {
  background: var(--color-brand);
  border-radius: 6px;
  color: #fff;
  display: inline-block;
  font-weight: 600;
  padding: 14px 28px;
  text-decoration: none;
}
.btn-cta-link:hover { background: var(--color-brand-hover); }

/* ─── Wave 3: classes adicionais ────────────────────── */
.text-white       { color: #fff; }
.text-info        { color: var(--color-info); }
.text-warning     { color: var(--color-warning); }
.bg-surface       { background: var(--color-surface); }
.bg-surface-2     { background: var(--color-surface-2); }
.fs-11            { font-size: 11px; }
.fs-36            { font-size: 36px; }
.font-display     { font-family: 'Montserrat', sans-serif; }
.fw-600           { font-weight: 600; }
.fw-800           { font-weight: 800; }
.bottom-80        { bottom: 80px; }
.gap-1-5          { gap: 6px; }
.pl-4             { padding-left: 20px; }
.br-6             { border-radius: 6px; }
.max-h-240        { max-height: 240px; }
.mw-100           { max-width: 100%; }
.border-warning   { border-color: var(--color-warning); }
.border-danger    { border-color: var(--color-danger); }
.label-caps-wide {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sticky-top-80 {
  position: sticky;
  top: 80px;
}
.grid-120-1fr {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: start;
}
.overlay-dark-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}
.alert-danger-soft {
  background: var(--color-danger-soft, #fde2e2);
  border-color: var(--color-danger);
  color: #b41818;
}

/* ─── Section title em settings (D-16) ────────────────────── */
.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
  margin: 0 0 12px;
}