/* Bella V2 — Porta MAIS (Scrapbook, Lovable 12/05/2026).
 * Índice agrupado: cards cream, rows com ícone soft + label + hint italic + chevron.
 */

.mais-screen {
  font-family: var(--font-serif);
  color: var(--foreground);
  max-width: 440px;
  margin: 0 auto;
}

/* ─── Header editorial ────────────────────────────────────────────────────── */
.mais-header { padding: 4px 4px 4px; }
.mais-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--foreground);
  margin: 4px 0 0;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.mais-sub {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--muted-foreground);
  margin: 8px 0 0;
}

/* ─── Grupos ──────────────────────────────────────────────────────────────── */
.mais-main { margin-top: 24px; }
.mais-group { margin-top: 22px; }
.mais-group-title {
  text-transform: uppercase;
  margin: 0 0 10px 4px;
  color: var(--wine);
}

.mais-rows {
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  box-shadow: var(--bella-shadow-card);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ─── Row ─────────────────────────────────────────────────────────────────── */
.mais-row {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-top: 1px solid oklch(0.24 0.03 35 / 0.06);
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}
.mais-row:first-child { border-top: none; }
.mais-row:active { background: color-mix(in oklab, var(--muted) 60%, var(--card)); }

.mais-row-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--wine) 14%, var(--card));
  color: var(--wine);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mais-row-label {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mais-row-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.mais-row-chevron {
  display: inline-flex;
  color: var(--muted-foreground);
  line-height: 0;
}

/* Danger variant (Excluir conta) */
.mais-row-danger .mais-row-icon {
  background: color-mix(in oklab, var(--destructive) 14%, var(--card));
  color: var(--destructive);
}
.mais-row-danger .mais-row-label { color: var(--destructive); }

/* ─── Convite de testadoras (modal) ──────────────────────────────────────── */
.ct-sub {
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted-foreground);
  margin: 0 0 14px;
}
.ct-sub b { color: var(--foreground); font-weight: 600; }
.ct-slots { display: flex; flex-direction: column; gap: 8px; }
.ct-slot {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
  box-shadow: var(--bella-shadow-card);
}
button.ct-slot { cursor: pointer; transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1); }
button.ct-slot:active { transform: scale(0.985); }
button.ct-slot:disabled { opacity: 0.5; cursor: default; }
.ct-slot-ico {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  background: var(--muted); color: var(--muted-foreground);
}
.ct-slot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ct-slot-info b { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--foreground); }
.ct-slot-info small { font-family: var(--font-serif); font-size: 11px; color: var(--muted-foreground); }
.ct-slot-chev { flex-shrink: 0; color: var(--muted-foreground); font-size: 16px; }
.ct-code { font-family: 'DM Mono', ui-monospace, monospace; letter-spacing: 1px; }

/* Estados (cor por situação) */
.ct-slot-vazio { border-style: dashed; }
.ct-slot-vazio .ct-slot-ico { background: color-mix(in oklab, var(--terracotta) 14%, var(--card)); color: var(--terracotta); }
.ct-slot-ativa  { background: color-mix(in oklab, var(--sage) 10%, var(--card)); }
.ct-slot-ativa .ct-slot-ico   { background: var(--sage); color: #fff; }
.ct-slot-pending { background: color-mix(in oklab, var(--peach) 16%, var(--card)); }
.ct-slot-pending .ct-slot-ico { background: color-mix(in oklab, var(--peach) 70%, var(--foreground)); color: #fff; }
.ct-slot-ocupado { background: color-mix(in oklab, var(--terracotta) 8%, var(--card)); }
.ct-slot-ocupado .ct-slot-ico { background: color-mix(in oklab, var(--terracotta) 16%, var(--card)); color: var(--terracotta); }

/* Painel "Convite gerado" */
.ct-code-big {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 26px; letter-spacing: 4px; font-weight: 600;
  text-align: center; color: var(--terracotta);
  background: color-mix(in oklab, var(--terracotta) 8%, var(--card));
  border: 1px dashed color-mix(in oklab, var(--terracotta) 30%, transparent);
  border-radius: 12px; padding: 14px 8px; margin: 0 0 10px;
}
.ct-link {
  font-family: var(--font-ui); font-size: 12px; color: var(--muted-foreground);
  word-break: break-all; text-align: center; margin: 0 0 16px;
}
.ct-acoes { display: flex; gap: 10px; }
.ct-acoes > * { flex: 1; }