:root {
  --bg: #FFF9F2;
  --ink: #2B1B12;
  --muted: #8A7365;
  --panel: #FFFFFF;
  --line: #F3DCC8;
  --coral: #E8441C;
  --coral-dark: #C6350F;
  --emerald: #0E8F6B;
  --lavender: #E8441C;
  --lavender-bg: #FFF1E8;
  --gold: #FFC72C;
  --gold-dark: #E0A800;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, .brand-name {
  font-family: 'Space Grotesk', sans-serif;
}

.shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.brand-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--coral-dark);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.nav-item:hover {
  background: var(--lavender-bg);
  color: var(--ink);
}

.nav-item.active {
  background: var(--coral);
  color: white;
}

.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1001;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 999;
}

.sidebar-backdrop.visible { display: block; }

.status-box {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-line {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C9C2B4;
  display: inline-block;
}

.dot.ok { background: var(--emerald); }
.dot.pending { background: var(--gold-dark); }

/* Content */
.content {
  flex: 1;
  padding: 40px 48px;
  max-width: 900px;
}

.view.hidden { display: none; }

.view-header h1 {
  font-size: 26px;
  margin: 0 0 6px;
}

.view-header p {
  color: var(--muted);
  margin: 0 0 28px;
  font-size: 14px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}

.form-grid {
  display: grid;
  /* minmax(0, 1fr): sem isso a coluna não encolhe abaixo do conteúdo e
     campos largos vazam pra fora da tela em vez de ficar do tamanho da
     coluna (achado da auditoria mobile). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.field.full { grid-column: 1 / -1; }

textarea, input[type="datetime-local"], input[type="file"] {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #FDFCF9;
  color: var(--ink);
}

textarea:focus, input:focus {
  outline: 2px solid var(--lavender);
  outline-offset: 1px;
}

.checkbox-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #FDFCF9;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.group-search {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #FDFCF9;
  color: var(--ink);
  margin-bottom: 8px;
}

.group-search:focus {
  outline: 2px solid var(--lavender);
  outline-offset: 1px;
}

.group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
}

.group-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.muted { color: var(--muted); font-size: 13px; }

.actions { margin-top: 4px; }

.btn-primary {
  background: var(--coral);
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary:hover { background: var(--coral-dark); }

.btn-secondary {
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink);
}

.agenda-status-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.agenda-status-tab {
  background: #FDFCF9;
  border: 1px solid var(--line);
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
}

.agenda-status-tab.active {
  background: var(--coral);
  border-color: var(--coral);
  color: white;
}

.agenda-canal-tabs {
  margin-top: -8px;
}

.agenda-canal-tabs .agenda-status-tab.active {
  background: #67A1A4;
  border-color: #67A1A4;
  color: white;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

/* Item flex sem min-width:0 nunca encolhe abaixo do conteúdo — o texto do
   post recusava quebra de linha e vazava pra fora da tela em vez de quebrar
   (achado da auditoria mobile). */
.post-card > div:first-child {
  min-width: 0;
  overflow-wrap: break-word;
}

.post-text {
  font-size: 14px;
  margin: 0 0 6px;
}

.post-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tag.agendado { background: #FFF6DE; color: var(--gold-dark); }
.tag.enviando { background: #FFF1E8; color: var(--coral); }
.tag.enviado { background: #E4F5EE; color: var(--emerald); }
.tag.erro { background: #FCE4E4; color: #C0392B; }

.author-tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--lavender-bg);
  color: var(--muted);
}

.group-picker-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.group-picker-controls .group-search {
  flex: 1;
  margin-bottom: 0;
  min-width: 200px;
}

/* Discreto de propósito: é uma ação de "selecionar tudo" (mais rara e mais
   arriscada que os filtros acima), não deve competir visualmente com eles. */
.select-all-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.select-all-row:hover {
  color: var(--ink);
}

.select-all-row input[type="checkbox"] {
  cursor: pointer;
}

.rule-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.favorite-star {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 16px;
  color: #C9C2B4;
  cursor: pointer;
  flex-shrink: 0;
}

.favorite-star:hover {
  border-color: var(--coral);
}

.favorite-star.active {
  color: var(--coral);
  border-color: var(--coral);
  background: #FFF3E0;
}

.spacing-adjusted-note {
  color: var(--gold-dark);
  font-weight: 500;
}

.schedule-warning-note {
  color: var(--gold-dark);
  font-weight: 500;
}

.detail-spacing-note {
  font-size: 13px;
  background: #FFF6DE;
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
}

.detail-schedule-warning-note {
  font-size: 13px;
  background: #FFF6DE;
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
}

.detail-schedule-warning-groups {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 0;
  padding-left: 18px;
}

.rule-card {
  margin-bottom: 12px;
}

.rule-desc {
  font-style: italic;
  background: #FDFCF9;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  /* Descrição de grupo é texto livre copiado do WhatsApp — às vezes tem uma
     URL longa sem espaço nenhum, que não tem onde quebrar e vaza pra fora
     do card (achado da auditoria mobile). */
  overflow-wrap: break-word;
}

.rule-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin: 12px 0;
}

.hour-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hour-range input {
  width: 70px;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #FDFCF9;
  color: var(--ink);
}

.hour-range span {
  font-size: 13px;
  color: var(--muted);
}

.rule-maxPerDay {
  width: 100%;
}

.save-rule-status {
  font-size: 12px;
}

.post-card-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.post-card-wrap .post-card {
  border: none;
  border-radius: 0;
}

.post-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.post-details {
  border-top: 1px solid var(--line);
  padding: 20px;
  background: #FDFCF9;
}

.post-details.hidden {
  display: none;
}

.detail-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 16px 0 6px;
}

.detail-label:first-child {
  margin-top: 0;
}

.detail-full-text {
  font-size: 14px;
  white-space: pre-wrap;
  margin: 0;
}

.detail-image {
  max-width: 240px;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
}

.detail-group-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.detail-group-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding: 6px 10px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.detail-status {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.detail-status.ok { color: var(--emerald); }
.detail-status.err { color: #C0392B; white-space: normal; text-align: right; }
.detail-status.blocked { color: var(--coral); white-space: normal; text-align: right; }
.detail-status.pending { color: var(--muted); }

.detail-errors {
  font-size: 13px;
  color: #C0392B;
}

.detail-executed {
  margin-top: 16px;
}

.qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.qr-wrap img {
  width: 240px;
  height: 240px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* Fase 2 — operação */
.distribution-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.preset-btn {
  background: #FDFCF9;
  border: 1px solid var(--line);
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
}

.preset-btn.active {
  background: var(--coral);
  border-color: var(--coral);
  color: white;
}

.eligibility-summary {
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #FDFCF9;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.group-status-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.status-metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-metric strong { font-size: 24px; }
.status-metric span { color: var(--muted); font-size: 12px; }
.status-metric.ok strong { color: var(--emerald); }
.status-metric.blocked strong { color: var(--coral); }
.status-reasons { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .group-status-dashboard { grid-template-columns: 1fr; }
}

.product-history-box {
  font-size: 11px;
  margin-top: 2px;
}

/* 2.2.1 — Diagnóstico pré-disparo */
.diagnostic-card {
  border: 1px solid rgba(255, 140, 0, .25);
  border-radius: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, .02);
}
.diagnostic-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.diagnostic-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.diagnostic-connections {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.diagnostic-note {
  padding: 10px 12px;
  border-radius: 8px;
  margin: 10px 0;
  background: rgba(255, 180, 0, .08);
}
.diagnostic-details {
  margin-top: 12px;
}
.diagnostic-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid rgba(128, 128, 128, .15);
}
.diagnostic-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
@media (max-width: 700px) {
  .diagnostic-metrics { grid-template-columns: 1fr; }
  .diagnostic-header, .diagnostic-row { flex-direction: column; }
}


/* FASE 2.2.2 — Agenda detalhada */
.agenda-detail-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fffaf0;
}
.agenda-detail-note.ok {
  color: #0a8f6a;
}
.agenda-detail-note.blocked {
  color: #e34a1f;
}
.agenda-detail-note.pending {
  color: #9a6f00;
}
.agenda-detail-panel {
  margin: 8px 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fffaf0;
  border: 1px solid #f1dfc9;
}
.agenda-detail-panel p {
  margin: 4px 0;
}

/* =========================================================
   FASE 2.2.4 — MÉTRICAS OPERACIONAIS
   ========================================================= */

.metrics-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.metrics-grid .status-metric {
  min-height: 105px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.metric-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.metrics-columns {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.metrics-columns .card h2,
.metrics-recent h2 {
  margin-top: 0;
  margin-bottom: 18px;
}

.metrics-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metrics-row {
  display: grid;
  /* minmax(0, 1fr) em vez de 1fr: uma coluna de grid também não encolhe
     abaixo do conteúdo por padrão — sem isso a ellipsis de
     .metrics-group-name nunca chegava a entrar em ação de verdade. */
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2, rgba(255,255,255,.03));
}

.metrics-rank {
  font-weight: 700;
  text-align: center;
}

.metrics-group-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metrics-group-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metrics-group-name .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.metrics-reason {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}

.metrics-reason:last-child {
  border-bottom: 0;
}

.metric-success {
  font-weight: 600;
}

.metrics-recent {
  margin-bottom: 30px;
}

@media (max-width: 900px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .metrics-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .metrics-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Catálogo Shopee */
.shopee-search-card {
  margin-bottom: 20px;
  padding: 20px;
}

.shopee-search-row {
  display: flex;
  gap: 10px;
}

.shopee-search-row input {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #FDFCF9;
  color: var(--ink);
}

.shopee-search-row input:focus {
  outline: 2px solid var(--lavender);
  outline-offset: 1px;
}

.shopee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.shopee-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.shopee-rank-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(11, 17, 58, 0.75);
  border-radius: 999px;
  padding: 2px 8px;
}

.shopee-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--lavender-bg);
}

.shopee-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.shopee-card-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shopee-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shopee-card-row strong {
  font-size: 15px;
  color: var(--coral-dark);
}

.shopee-card-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.shopee-card-actions .btn-primary,
.shopee-card-actions .btn-secondary {
  width: 100%;
}

.shopee-generated-link {
  font-size: 12px;
  word-break: break-all;
  background: var(--lavender-bg);
  border-radius: 8px;
  padding: 6px 8px;
}

.shopee-filtros-card {
  margin-bottom: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.shopee-filtros-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shopee-filtros-header select {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #FDFCF9;
  color: var(--ink);
}

.shopee-filtros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.shopee-filtros-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.shopee-filtros-grid input {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #FDFCF9;
  color: var(--ink);
}

.shopee-filtros-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Prévia de imagem no formulário "Novo disparo" (imagem baixada do catálogo Shopee) */
.post-image-preview {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.post-image-preview.hidden {
  display: none;
}

.post-image-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--lavender-bg);
}

/* Produto vinculado (link/preço/desconto fora do texto livre, Bloco 4.3) */
.produto-vinculado-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--lavender-bg);
  font-size: 13px;
  font-weight: 400;
}

.produto-vinculado-card strong {
  font-weight: 600;
  margin-right: 4px;
}

#produtoVinculadoLink {
  word-break: break-all;
}

.post-text-hint {
  font-size: 12px;
  font-weight: 400;
  margin: 0;
}

.warning-banner {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--coral-dark);
  background: #FFF1EE;
  color: var(--coral-dark);
  font-size: 13px;
  font-weight: 500;
}

.warning-banner.hidden,
#produtoVinculadoBox.hidden {
  display: none;
}

/* =========================================================
   NAVEGAÇÃO MOBILE
   A sidebar fixa de 240px (.shell/.sidebar no topo do arquivo) consumia
   ~64% da largura numa tela de 375px, forçando scroll horizontal em TODA
   tela do painel (achado da auditoria visual mobile). Abaixo de 768px ela
   vira um menu ocultável (drawer) acionado por um botão hambúrguer
   (.mobile-menu-toggle/.sidebar-backdrop, definidos perto de .sidebar), e o
   conteúdo principal passa a ocupar a largura inteira da tela.
   Fica tudo num bloco só no FIM do arquivo (em vez de logo junto de
   .sidebar, ou espalhado como as outras media queries deste arquivo) de
   propósito: várias regras aqui (.metrics-group-name, .form-grid,
   .rule-grid, .btn-secondary, .agenda-status-tab...) têm a MESMA
   especificidade da regra "desktop" que estão sobrescrevendo — em CSS, um
   empate de especificidade é resolvido pela ORDEM no arquivo, então esse
   bloco só tem efeito se vier depois de todas elas. Colocá-lo mais cedo
   (como na primeira tentativa) fazia a versão desktop ganhar mesmo dentro
   da media query, e o ajuste virava letra morta silenciosamente.
   ========================================================= */
@media (max-width: 768px) {
  .mobile-menu-toggle { display: block; }

  .shell { display: block; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    max-width: 82vw;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000;
    overflow-y: auto;
  }

  .sidebar.open { transform: translateX(0); }

  .nav-item {
    padding: 13px 12px;
    font-size: 15px;
  }

  .content {
    max-width: 100%;
    /* padding-top maior pra não ficar embaixo do botão hambúrguer fixo */
    padding: 76px 16px 32px;
  }

  /* Grids de 2 colunas que não cabiam numa tela de 375px mesmo depois do
     minmax(0,1fr) (ver regras base de .form-grid/.rule-grid) — em vez de
     ficar com colunas espremidas demais, empilha numa coluna só. */
  .form-grid,
  .rule-grid {
    grid-template-columns: 1fr;
  }

  /* Alvos de toque menores que ~44px são difíceis de acertar com o dedo
     (referência: Apple HIG / Material Design). Ver detalhes, Remover,
     Salvar regra, Atualizar métricas, Limpar filtros, Copiar link de
     afiliado e Gerar link rastreável usam .btn-secondary/.btn-primary. */
  .btn-secondary {
    padding: 13px 16px;
    font-size: 14px;
    min-height: 44px;
  }

  .btn-primary {
    min-height: 44px;
  }

  .agenda-status-tab {
    padding: 11px 14px;
    font-size: 13px;
    min-height: 40px;
  }

  .favorite-star {
    width: 44px;
    height: 44px;
  }

  /* Nome/ID de grupo e timestamp em Métricas eram cortados com "…" —
     numa tela estreita isso escondia informação sem nenhum jeito de ver o
     resto. Passam a quebrar linha (cards ficam mais altos, mas legíveis). */
  .metrics-group-name strong,
  .metrics-group-name .muted {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }
}