/* ============================================================
   VARIÁVEIS
============================================================ */
:root {
  /* ── Paleta Aixa's Lashes ─────────────────────────── */
  --marrom:        #3A241A;   /* chocolate escuro — topo, autoridade */
  --caramelo:      #8C5A3C;   /* marrom médio — segundo no degradê */
  --creme:         #FBF4E8;   /* fundo creme claro */
  --creme-escuro:  #EFE2CD;   /* fundo creme de apoio */
  --rose:          #A8584E;   /* terracota — ação, botões, ativo */
  --rose-claro:    #D98A6A;   /* terracota suave */
  --dourado:       #C9A24B;   /* dourado — conquista, progresso */
  --dourado-claro: #E8C97E;   /* dourado suave */
  --texto:         #442A1E;   /* texto escuro sobre creme */
  --texto-sec:     #9A7B5C;   /* rótulos e texto secundário */

  /* ── Degradês ─────────────────────────────────────── */
  --grad-topo:    linear-gradient(135deg, #3A241A 0%, #8C5A3C 100%);
  --grad-rose:    linear-gradient(135deg, #A8584E 0%, #D98A6A 100%);
  --grad-dourado: linear-gradient(135deg, #C9A24B 0%, #E8C97E 100%);

  /* ── Sombras em marrom (não cinza) ───────────────── */
  --sombra:       0 2px 16px rgba(68,42,30,0.10);
  --sombra-forte: 0 4px 28px rgba(68,42,30,0.18);

  /* ── Tipografia ───────────────────────────────────── */
  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --fonte-corpo:  'Raleway', system-ui, sans-serif;

  /* ── Layout ───────────────────────────────────────── */
  --topo-h:    56px;
  --nav-h:     64px;
  --sidebar-w: 220px;
}

/* ============================================================
   RESET E BASE
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--fonte-corpo);
  background: var(--creme);
  color: #442A1E;
}

/* ============================================================
   FAIXA DE TOPO — fixed no mobile
============================================================ */
#topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topo-h);
  background: var(--marrom);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  z-index: 20;
}

#topo-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--creme);
  letter-spacing: 0.01em;
}

/* ============================================================
   ÁREA DE CONTEÚDO
============================================================ */
#conteudo {
  padding-top: calc(var(--topo-h) + 1.75rem);
  padding-bottom: calc(var(--nav-h) + 1.75rem);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  min-height: 100dvh;
}

/* ============================================================
   TELAS
============================================================ */
.tela {
  display: none;
}

.tela.ativa {
  display: block;
}

.tela h2 {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--marrom);
  margin-bottom: 0.75rem;
}

.tela > p {
  line-height: 1.65;
  color: #5C3D2A;
}

/* Cards de atalho na tela Hoje */
.hj-atalhos {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hj-atalho-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(68,42,30,0.10);
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: box-shadow 0.18s, transform 0.18s;
}

.hj-atalho-card:hover,
.hj-atalho-card:focus-visible {
  box-shadow: 0 6px 24px rgba(68,42,30,0.16);
  transform: translateY(-2px);
}

.hj-atalho-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(68,42,30,0.10);
}

.hj-atalho-icone {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hj-atalho-icone svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  stroke-width: 2;
}

.hj-atalho-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hj-atalho-nome {
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  font-weight: 600;
  color: #442A1E;
  line-height: 1.2;
}

.hj-atalho-desc {
  font-size: 0.78rem;
  color: #9A7B5C;
  line-height: 1.3;
}

.hj-atalho-seta {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke: #D9C5A8;
  stroke-width: 2;
}

/* ============================================================
   NAVEGAÇÃO MOBILE — fixed na base da tela
============================================================ */
#nav-principal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: #fff;
  border-top: 1px solid #D9C5A8;
  z-index: 100;
  display: flex;
  align-items: center;
}

#nav-marca {
  display: none;
}

#nav-lista {
  list-style: none;
  display: flex;
  width: 100%;
  height: 100%;
}

#nav-lista li {
  flex: 1;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #9A7B5C;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

.nav-item.ativa {
  color: var(--rose);
}

.nav-item:hover {
  color: var(--rose);
}

/* ============================================================
   DESKTOP — a partir de 768px
============================================================ */
@media (min-width: 768px) {

  body {
    margin-left: var(--sidebar-w);
  }

  /* Sidebar no lugar da nav de baixo */
  #nav-principal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    width: var(--sidebar-w);
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    border-top: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--marrom);
    padding: 1.75rem 0 1rem;
    overflow-y: auto;
  }

  #nav-marca {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--creme);
    padding: 0 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.75rem;
  }

  #nav-lista {
    flex-direction: column;
    height: auto;
    width: 100%;
    padding: 0 0.75rem;
    gap: 0.2rem;
  }

  #nav-lista li {
    flex: none;
  }

  .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    color: rgba(251, 244, 232, 0.82);
    width: 100%;
    height: auto;
  }

  .nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .nav-item:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .nav-item.ativa {
    background: var(--rose);
    color: #fff;
  }

  /* Topo: sticky no desktop (entra no fluxo do documento) */
  #topo {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    width: 100%;
  }

  /* Conteúdo centralizado com largura máxima legível */
  #conteudo {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 720px;
    margin: 0 auto;
    min-height: auto;
  }

  /* Onboarding: container mais estreito, centralizado */
  #ob-container {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ============================================================
   ONBOARDING — overlay de tela cheia
============================================================ */

body.ob-aberto {
  overflow: hidden;
}

#onboarding {
  position: fixed;
  inset: 0;
  background: var(--creme);
  z-index: 200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#onboarding.ob-oculto {
  display: none;
}

#ob-container {
  padding: 1.5rem 1.25rem 3rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Barra de progresso */
#ob-header {
  margin-bottom: 2rem;
}

#ob-barra {
  height: 4px;
  background: #D9C5A8;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.6rem;
}

#ob-barra-fill {
  height: 100%;
  background: var(--rose);
  border-radius: 2px;
  width: 0%;
  transition: width 0.35s ease;
}

#ob-passo-label {
  font-size: 0.78rem;
  color: #9A7B5C;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Etapas */
.ob-etapa {
  display: none;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

.ob-etapa.ativa {
  display: flex;
}

.ob-etapa h2 {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--marrom);
  line-height: 1.25;
}

.ob-etapa p {
  line-height: 1.65;
  color: #5C3D2A;
}

.ob-etapa strong {
  color: var(--marrom);
}

.ob-intro {
  color: #7A5C40;
  font-size: 0.9rem;
}

/* Lista ACR (etapa 1) */
.ob-acr-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--creme-escuro);
  border-radius: 10px;
  border-left: 3px solid var(--dourado);
}

.ob-acr-lista li {
  color: #5C3D2A;
  line-height: 1.5;
}

/* Campo de nome na etapa 1 */
.ob-nome-bloco {
  margin-top: 1.25rem;
  max-width: 320px;
}

.ob-nome-bloco label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--marrom);
  margin-bottom: 0.4rem;
}

.ob-nome-bloco input {
  font-size: 1rem;
  max-width: 100%;
}

/* Cartões de perfil */
.ob-perfil-cartoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ob-perfil-cartao {
  padding: 1rem 1.25rem;
  border: 2px solid #D9C5A8;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: #fff;
}

.ob-perfil-cartao strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  color: var(--marrom);
}

.ob-perfil-cartao p {
  font-size: 0.85rem;
  color: #7A5C40;
  line-height: 1.5;
  margin: 0;
}

.ob-perfil-cartao:hover {
  border-color: var(--rose);
}

.ob-perfil-cartao.selecionado {
  border-color: var(--rose);
  background: #F5E8E6;
}

.ob-aviso {
  font-size: 0.85rem;
  color: var(--rose);
  font-weight: 500;
}

.ob-aviso-oculto {
  display: none;
}

/* Aviso não editável — destaque dourado no topo da etapa 1 */
.ob-aviso-fixo {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  background: rgba(201,162,75,0.12);
  border: 1.5px solid var(--dourado);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.ob-aviso-fixo-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--dourado);
  margin-top: 0.1rem;
}

.ob-aviso-fixo p {
  font-size: 0.85rem;
  color: var(--texto);
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

/* Fundação — checklist */
.ob-fundacao-lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ob-fundacao-item {
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #D9C5A8;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.15s;
}

.ob-fundacao-item.item-marcado {
  border-color: var(--dourado);
  background: #FBF7E8;
}

.ob-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--marrom);
  font-size: 0.95rem;
}

.ob-check-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--dourado);
  cursor: pointer;
}

.ob-desc {
  font-size: 0.85rem;
  color: #7A5C40;
  line-height: 1.55;
  margin: 0;
}

/* Siglas */
.ob-siglas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  background: var(--creme-escuro);
  border-radius: 8px;
}

.ob-siglas li {
  font-size: 0.85rem;
  color: #5C3D2A;
  line-height: 1.5;
}

.ob-siglas strong {
  font-family: var(--fonte-corpo);
  color: var(--marrom);
  background: #D9C5A8;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* Bloco de exemplos de contatos */
.ob-exemplos {
  background: var(--creme-escuro);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.ob-exemplos-titulo {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9A7B5C;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.ob-exemplos-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ob-exemplos-lista li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.ob-ex-nome {
  font-weight: 600;
  color: var(--marrom);
  white-space: nowrap;
  font-family: var(--fonte-corpo);
}

.ob-ex-desc {
  color: #7A5C40;
  font-size: 0.8rem;
}

/* Caixa de mensagem copiável */
.ob-msg-copiavel {
  background: var(--creme-escuro);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ob-msg-texto {
  font-size: 0.875rem;
  color: #442A1E;
  line-height: 1.6;
  margin: 0;
}

/* Botão copiar */
.btn-copiar {
  align-self: flex-start;
  padding: 0.35rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: var(--fonte-corpo);
  background: transparent;
  color: var(--rose);
  border: 1.5px solid var(--rose);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-copiar:hover {
  background: var(--rose);
  color: #fff;
}

.btn-copiar.btn-copiado {
  background: var(--dourado);
  border-color: var(--dourado);
  color: #fff;
}

/* Blocos da etapa 4 (Piso / Base) */
.ob-bloco {
  background: #fff;
  border: 1px solid #D9C5A8;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ob-bloco-titulo {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--marrom);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #D9C5A8;
}

/* Input com prefixo R$ */
.ob-input-reais {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #D9C5A8;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s;
}

.ob-input-reais:focus-within {
  border-color: var(--rose);
}

.ob-reais-simbolo {
  padding: 0.6rem 0.75rem;
  background: var(--creme-escuro);
  color: #7A5C40;
  font-size: 0.875rem;
  font-weight: 500;
  border-right: 1.5px solid #D9C5A8;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ob-input-reais input {
  border: none;
  padding: 0.6rem 0.75rem;
  flex: 1;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  color: var(--marrom);
  background: transparent;
  min-width: 0;
}

.ob-input-reais input:focus {
  outline: none;
}

/* Campos numéricos (etapa 4) */
.ob-campo-grupo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ob-campo-label {
  font-weight: 500;
  color: var(--marrom);
  font-size: 0.95rem;
}

.ob-tres-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.ob-input-bloco {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ob-input-bloco label,
.ob-campo-hint {
  font-size: 0.78rem;
  color: #9A7B5C;
}

.ob-input-bloco input,
.ob-input-unico {
  padding: 0.6rem 0.75rem;
  border: 1.5px solid #D9C5A8;
  border-radius: 8px;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  color: var(--marrom);
  background: #fff;
  width: 100%;
  transition: border-color 0.15s;
}

.ob-input-bloco input:focus,
.ob-input-unico:focus {
  outline: none;
  border-color: var(--rose);
}

.ob-input-unico {
  max-width: 140px;
}

.ob-resultado {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--marrom);
  min-height: 1.4em;
}

/* ── Metas e Medalhas — Onboarding ──────────────────────────── */
.ob-metas-resultado {
  background: var(--creme);
  border: 1.5px solid rgba(201,162,75,0.35);
  border-radius: 14px;
  padding: 1rem 1rem 0.85rem;
  margin: 0.5rem 0 0.75rem;
}

.ob-metas-oculto { display: none; }

.ob-piso-txt {
  font-size: 0.82rem;
  color: var(--marrom);
  font-weight: 600;
  margin-bottom: 0.85rem;
  padding: 0.4rem 0.65rem;
  background: rgba(168,88,78,0.08);
  border-radius: 7px;
}

.ob-medalhas {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.ob-medalha {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1.5px solid rgba(217,197,168,0.5);
  border-radius: 12px;
  padding: 0.65rem 0.25rem 0.5rem;
  gap: 0.15rem;
}

.ob-medalha-prata {
  border-color: var(--dourado);
  background: rgba(201,162,75,0.06);
}

.ob-med-ico  { width: 28px; height: 28px; display: block; margin: 0 auto 0.1rem; }
.ob-med-nome { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-sec); }
.ob-med-val  { font-size: 1.5rem; font-weight: 800; color: var(--marrom); line-height: 1.1; }
.ob-med-sub  { font-size: 0.62rem; color: var(--texto-sec); }
.ob-med-desc { font-size: 0.68rem; color: var(--rose); font-weight: 600; }

.ob-metas-explicacao {
  font-size: 0.8rem;
  color: var(--texto-sec);
  line-height: 1.5;
  margin: 0;
}

/* ── Evolução mensal — Tela Hoje ─────────────────────────────── */
.hj-evolucao-wrap { margin-bottom: 1rem; }

.hj-evolucao-bloco {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--sombra);
  border: 1px solid rgba(217,197,168,0.4);
  padding: 1rem 1.25rem 0.9rem;
}

.hj-ev-inicio {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

.hj-ev-ini-rotulo {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hj-ev-ini-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--marrom);
}

.hj-ev-medalhas {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.hj-ev-medalha {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--creme);
  border: 1.5px solid rgba(217,197,168,0.45);
  border-radius: 10px;
  padding: 0.5rem 0.2rem 0.4rem;
  gap: 0.1rem;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}

.hj-ev-medalha-ok {
  background: rgba(201,162,75,0.1);
  border-color: var(--dourado);
}

.hj-ev-ico       { width: 22px; height: 22px; display: block; margin: 0 auto; }
.hj-ev-num       { font-size: 1.15rem; font-weight: 800; color: var(--marrom); line-height: 1.1; }
.hj-ev-label-med { font-size: 0.62rem; color: var(--texto-sec); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.hj-ev-check {
  position: absolute;
  top: 3px;
  right: 5px;
  width: 13px;
  height: 13px;
  color: var(--dourado);
}

.hj-ev-frase {
  font-size: 0.82rem;
  color: var(--texto-sec);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}

/* ── Nota da tarefa de segunda-feira ────────────────────────── */
.hj-rotina-nota {
  font-size: 0.75rem;
  color: var(--texto-sec);
  font-style: italic;
  line-height: 1.4;
  margin: 0.2rem 0 0 1.65rem;
}

/* ── Badges de meta em Meus Números ─────────────────────────── */
.mn-metas-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.mn-meta-badge {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--creme-escuro);
  color: var(--texto-sec);
  border: 1px solid rgba(217,197,168,0.5);
}

.mn-meta-badge.mn-badge-prata {
  border-color: var(--dourado);
  color: var(--marrom);
}

.mn-meta-badge.mn-badge-ok {
  background: var(--dourado);
  color: #fff;
  border-color: transparent;
}

/* Botão primário (usado no onboarding) */
.btn-primario {
  margin-top: 0.5rem;
  padding: 0.85rem 1.5rem;
  background: var(--rose);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s, transform 0.1s;
}

.btn-primario:hover   { background: #8A453C; }
.btn-primario:active  { transform: scale(0.98); }

.btn-primario.btn-travado,
.btn-primario:disabled {
  background: #d9ccc9;
  color: #a08a88;
  cursor: not-allowed;
  transform: none;
}

.btn-primario.btn-travado:hover {
  background: #d9ccc9;
}

.ob-fundacao-contador {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--dourado);
  text-align: center;
  margin-top: 0.25rem;
}

.ob-fundacao-aviso {
  font-size: 0.78rem;
  color: #9A7B5C;
  text-align: center;
  margin-bottom: -0.25rem;
}

/* ============================================================
   TELA HOJE
============================================================ */

#hoje-saudacao {
  font-size: 1rem;
  color: #7A5C40;
  margin-bottom: 1.25rem;
  font-weight: 500;
}

/* Card de foco */
.hoje-card {
  background: var(--marrom);
  color: var(--creme);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.hoje-card-rotulo {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(251, 247, 240, 0.55);
  margin-bottom: 0.5rem;
}

.hoje-card h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.hoje-semana-label {
  font-size: 0.8rem;
  color: rgba(251, 247, 240, 0.5);
  margin: 0;
}

/* Dois números */
.hoje-dois-numeros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.hoje-numero-bloco {
  background: #fff;
  border: 1px solid #D9C5A8;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.hoje-numero {
  font-family: var(--fonte-titulo);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--marrom);
  line-height: 1;
}

.hoje-numero-label {
  font-size: 0.7rem;
  color: #9A7B5C;
  text-align: center;
  line-height: 1.3;
}

/* Ações de hoje */
.hoje-secao-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--marrom);
  margin-bottom: 0.75rem;
}

.hoje-acoes-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.hoje-acao-item {
  background: #fff;
  border: 1px solid #D9C5A8;
  border-radius: 10px;
  padding: 0.875rem 1rem;
  transition: border-color 0.15s;
}

.hoje-acao-item:has(.hoje-acao-check:checked) {
  border-color: var(--dourado);
  background: #FBF7E8;
}

.hoje-acao-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #442A1E;
  line-height: 1.5;
}

.hoje-acao-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--dourado);
  cursor: pointer;
}

.hoje-acao-label span {
  transition: color 0.15s;
}

.hoje-acao-item:has(.hoje-acao-check:checked) .hoje-acao-label span {
  color: #9A7B5C;
  text-decoration: line-through;
  text-decoration-color: var(--dourado);
}

/* ============================================================
   TELA SCRIPTS
============================================================ */

/* Campo de busca */
.sc-busca-wrap {
  position: relative;
  margin-bottom: 1rem;
}

.sc-busca-ico {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #9A7B5C;
  stroke-width: 2;
  pointer-events: none;
}

.sc-busca-input {
  width: 100%;
  padding: 0.7rem 0.75rem 0.7rem 2.25rem;
  border: 1.5px solid #D9C5A8;
  border-radius: 10px;
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
  color: var(--marrom);
  background: #fff;
  transition: border-color 0.15s;
}

.sc-busca-input:focus {
  outline: none;
  border-color: var(--rose);
}

/* Chips de categoria */
.sc-chips-wrap {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sc-chips-wrap::-webkit-scrollbar { display: none; }

.sc-chip {
  flex-shrink: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid #D9C5A8;
  background: #fff;
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  font-weight: 500;
  color: #7A5C40;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.sc-chip:hover {
  border-color: var(--rose);
  color: var(--rose);
}

.sc-chip.ativa {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}

/* Lista de cards */
.sc-lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sc-vazio {
  text-align: center;
  color: #9A7B5C;
  padding: 2.5rem 0;
  font-size: 0.9rem;
}

/* Card de script */
.sc-card {
  background: #fff;
  border: 1px solid #D9C5A8;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sc-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sc-num {
  font-size: 0.7rem;
  font-weight: 600;
  color: #C4A882;
  font-variant-numeric: tabular-nums;
}

.sc-cat-nome {
  font-size: 0.7rem;
  color: #C4A882;
}

.sc-cat-nome::before {
  content: '·';
  margin-right: 0.5rem;
}

.sc-card-titulo {
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--marrom);
  line-height: 1.3;
  margin: 0;
}

/* Bloco de texto da mensagem */
.sc-texto {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #442A1E;
  background: var(--creme-escuro);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0;
}

/* Placeholder de CLIENTE [nome] — rosé, intencional */
.ph-cliente {
  font-style: normal;
  color: var(--rose);
  font-weight: 600;
}

/* Placeholder SITUACIONAL [dia], [hora], etc. — dourado, preencher antes de enviar */
.ph-situacional {
  color: #8A6020;
  font-weight: 500;
  background: #F5EDDA;
  border-radius: 3px;
  padding: 0 3px;
}

/* Botão Copiar do script */
.sc-btn-copiar {
  align-self: flex-end;
  margin-top: 0.1rem;
}

/* ============================================================
   TELA MÉTODO
============================================================ */

/* Toast de conclusão de fase */
.mt-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: var(--dourado);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 300;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  pointer-events: none;
}

.mt-toast.mt-toast-visivel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Lista de fases */
#mt-lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Card de fase */
.mt-card {
  border-radius: 14px;
  border: 1.5px solid #D9C5A8;
  overflow: hidden;
  background: #fff;
}

.mt-concluida  { border-color: var(--dourado); background: #FBF7E8; }
.mt-andamento  { border-color: var(--rose);    background: #fff;    }
.mt-bloqueada  { border-color: #D9C5A8;        background: var(--creme-escuro); opacity: 0.65; }

/* Header do card */
.mt-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.mt-bloqueada .mt-header { cursor: default; }

.mt-header-info { flex: 1; min-width: 0; }

.mt-fase-num {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9A7B5C;
  margin-bottom: 0.25rem;
}

.mt-concluida .mt-fase-num { color: var(--dourado); }
.mt-andamento .mt-fase-num { color: var(--rose);    }

.mt-fase-nome {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--marrom);
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

.mt-bloqueada .mt-fase-nome { color: #9A7B5C; }

.mt-fase-marco {
  font-size: 0.775rem;
  color: #7A5C40;
  line-height: 1.5;
  margin: 0;
}

.mt-bloqueada .mt-fase-marco { color: #C4A882; }

/* Lado direito do header */
.mt-header-estado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}

.mt-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.mt-badge-concluida {
  background: var(--dourado);
  color: #fff;
}

.mt-badge-andamento {
  background: #F5E8E6;
  color: var(--rose);
  border: 1.5px solid var(--rose);
}

.mt-badge-bloqueada {
  color: #C4A882;
  font-size: 0.8rem;
  padding: 0;
}

/* Chevron (seta de expandir) */
.mt-chevron {
  width: 18px;
  height: 18px;
  color: #9A7B5C;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  margin-top: 2px;
}

.mt-card.aberta .mt-chevron { transform: rotate(180deg); }

/* Blocos de conteúdo */
.mt-blocos {
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border-top: 1px solid rgba(0,0,0,0.07);
}

.mt-card.aberta .mt-blocos { display: flex; }

/* Tipo: ensino */
.mt-ensino {
  font-size: 0.875rem;
  line-height: 1.75;
  color: #442A1E;
  margin: 0;
}

/* Tipo: subtitulo */
.mt-subtitulo {
  font-family: var(--fonte-titulo);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--marrom);
  background: var(--creme-escuro);
  border-left: 3px solid var(--marrom);
  padding: 0.6rem 0.875rem;
  border-radius: 0 8px 8px 0;
  margin: 0;
}

/* Tipo: estrategia — cabeçalho de nova estratégia com destaque caramelo */
.mt-estrategia {
  background: #FBF3E4;
  border-left: 4px solid #8C5A3C;
  border-radius: 0 10px 10px 0;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mt-est-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mt-est-num {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8C5A3C;
}

.mt-est-nome {
  font-family: var(--fonte-titulo);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--marrom);
}

.mt-est-esforco {
  font-size: 0.72rem;
  font-weight: 600;
  color: #8C5A3C;
  margin: 0;
}

.mt-est-desc {
  font-size: 0.82rem;
  color: #442A1E;
  line-height: 1.6;
  margin: 0;
}

/* Tipo: atencao */
.mt-atencao {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  background: #F5EDDA;
  border-left: 3px solid var(--dourado);
  border-radius: 0 8px 8px 0;
}

.mt-atencao-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #8C6A2F;
}

.mt-atencao p {
  font-size: 0.85rem;
  line-height: 1.65;
  color: #5C3D2A;
  margin: 0;
}

/* ── Lucide icon utility — medalhas e ícones de interface ────── */

/* Cores de medalha (aplicadas em data-lucide="award" gerados via JS) */
.med-ico-bronze { color: #A87840; }   /* cobre/bronze */
.med-ico-prata  { color: #6E8A9E; }   /* prata/cinza azulado */
.med-ico-ouro   { color: var(--dourado); }

/* Ícone pequeno dentro de badge (concluída / bloqueada) */
.mt-badge-ico {
  width: 10px;
  height: 10px;
  vertical-align: middle;
  margin-right: 2px;
  margin-top: -1px;
}

/* Troféu na mensagem de fase concluída (toast) */
.mt-toast-ico {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-left: 3px;
}

/* Troféu / ícone inline na Meta Prata atingida (card hoje) */
.hj-meta-trofeu {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-left: 3px;
  color: var(--dourado);
}

/* Check-circle no feedback do registro */
.reg-fb-ico {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
}

/* Tipo: mensagem */
.mt-mensagem {
  background: #fff;
  border: 1px solid #D9C5A8;
  border-radius: 10px;
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mt-msg-rotulo {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9A7B5C;
  margin: 0;
}

.mt-msg-texto {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #442A1E;
  background: var(--creme-escuro);
  border-radius: 8px;
  padding: 0.75rem 0.875rem;
  margin: 0;
}

.mt-msg-copiar { align-self: flex-end; }

.mt-msg-nota {
  font-size: 0.75rem;
  color: var(--texto-sec);
  font-style: italic;
  margin-top: 0.15rem;
  opacity: 0.9;
}

/* Tipo: acao */
.mt-acao {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #fff;
  border: 1.5px solid #D9C5A8;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.mt-acao.mt-acao-marcada {
  border-color: var(--dourado);
  background: #FBF7E8;
}

.mt-acao input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--dourado);
  cursor: pointer;
}

.mt-acao[disabled],
.mt-acao:has(input:disabled) { cursor: default; }

.mt-acao-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mt-acao-titulo {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--marrom);
  line-height: 1.3;
}

.mt-acao.mt-acao-marcada .mt-acao-titulo {
  text-decoration: line-through;
  text-decoration-color: var(--dourado);
  color: #9A7B5C;
}

.mt-acao-desc {
  font-size: 0.8rem;
  color: #7A5C40;
  line-height: 1.55;
}

/* Tipo: resumo */
.mt-resumo {
  background: #F8F2E4;
  border: 1.5px solid var(--dourado);
  border-radius: 10px;
  padding: 0.875rem 1rem;
}

.mt-resumo-titulo {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dourado);
  margin-bottom: 0.6rem;
}

.mt-resumo-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.mt-resumo-lista li {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #5C3D2A;
  padding-left: 1rem;
  position: relative;
}

.mt-resumo-lista li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--dourado);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
}

/* Tipo: criterio */
.mt-criterio {
  padding: 0.875rem 1rem;
  background: var(--creme-escuro);
  border-top: 2px solid var(--marrom);
  border-radius: 0 0 8px 8px;
}

.mt-criterio-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--marrom);
  margin-bottom: 0.4rem;
}

.mt-criterio-texto {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #5C3D2A;
  margin: 0;
}

/* Botão de conclusão manual */
.mt-btn-concluir {
  margin-top: 0.5rem;
}

/* ── Cadência (encerramento do ciclo) ─── */
.mt-cadencia {
  background: #3A241A;
  border-radius: 12px;
  padding: 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.mt-cad-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.mt-cad-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #C9A24B;
}

.mt-cad-titulo {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9A24B;
}

.mt-cad-texto {
  font-size: 0.84rem;
  color: #FBF4E8;
  line-height: 1.65;
  margin: 0;
}

/* ── Ações do Mês ─── */
.acm-wrap {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(58, 36, 26, 0.1);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.acm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.acm-rotulo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marrom);
  margin: 0;
}

.acm-rotulo-ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--rose);
}

.acm-reset-info {
  font-size: 0.6rem;
  color: var(--texto-sec);
  font-style: italic;
  white-space: nowrap;
}

.acm-frente {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.acm-frente-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(58, 36, 26, 0.08);
}

.acm-frente-ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--dourado);
}

.acm-frente-nome {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marrom);
}

.acm-frente-sub {
  font-size: 0.58rem;
  color: var(--texto-sec);
  margin-left: 0.2rem;
}

.acm-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.acm-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.acm-label {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.acm-check {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--rose);
  margin-top: 2px;
  cursor: pointer;
}

.acm-txt {
  font-size: 0.8rem;
  color: var(--texto);
  line-height: 1.45;
}

.acm-item.acm-feito .acm-txt {
  text-decoration: line-through;
  color: var(--texto-sec);
}

.acm-atalho {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--rose);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.1rem 0.38rem;
  border: 1px solid var(--rose);
  border-radius: 4px;
  flex-shrink: 0;
  background: none;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  transition: background 0.15s, color 0.15s;
}

.acm-atalho:hover {
  background: var(--rose);
  color: #fff;
}

/* Diagnóstico embutido dentro da última fase do Método */
.mt-diag-wrap {
  margin-top: 0.5rem;
}

.mt-diag-lista .diag-card {
  border-radius: 12px;
}

/* Instrução de conclusão — aparece abaixo das ações de toda fase em andamento */
.mt-instrucao-conclusao {
  font-size: 0.8rem;
  color: var(--rose);
  font-weight: 600;
  text-align: center;
  margin: 0.85rem 0 0.1rem;
  padding: 0.45rem 1rem;
  background: rgba(168,88,78,0.07);
  border-radius: 8px;
}

/* Botão atalho interno de fase (ex: ir para Bônus) */
.mt-atalho-btn {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.55rem 1.4rem;
  background: var(--grad-dourado);
  color: #fff;
  border-radius: 8px;
  font-family: var(--fonte-corpo);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}

.mt-atalho-btn:hover { opacity: 0.85; }

/* ============================================================
   TELA PROGRESSO
============================================================ */

/* Anel SVG */
.pr-anel-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.pr-anel {
  width: 160px;
  height: 160px;
}

.pr-anel-bg {
  fill: none;
  stroke: #D9C5A8;
  stroke-width: 8;
}

.pr-anel-pct {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 600;
  fill: var(--marrom);
}

.pr-anel-sub {
  font-size: 9px;
  fill: #9A7B5C;
  font-family: var(--fonte-corpo);
}

/* Dois números */
.pr-numeros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.pr-num-bloco {
  background: #fff;
  border: 1px solid #D9C5A8;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.pr-num {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.pr-num-feitas    { color: var(--dourado); }
.pr-num-restantes { color: var(--rose);    }

.pr-num-label {
  font-size: 0.7rem;
  color: #9A7B5C;
  text-align: center;
}

/* Barras por fase */
.pr-fases-lista {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.pr-fase-item { display: flex; flex-direction: column; gap: 0.35rem; }

.pr-fase-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.pr-fase-nome {
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--marrom);
}

.pr-fase-cont {
  font-size: 0.72rem;
  color: #9A7B5C;
}

.pr-barra-bg {
  height: 6px;
  background: #D9C5A8;
  border-radius: 999px;
  overflow: hidden;
}

.pr-barra-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
  background: #D9C5A8;
}

.pr-fill-concluida { background: var(--dourado); }
.pr-fill-andamento { background: var(--rose);    }

/* Próximo passo */
.pr-proximo {
  background: var(--marrom);
  color: var(--creme);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}

.pr-proximo-fim { background: var(--creme-escuro); }
.pr-proximo-fim .pr-proximo-label,
.pr-proximo-fim .pr-proximo-txt { color: var(--marrom); }

.pr-proximo-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(251,247,240,0.55);
  margin-bottom: 0.4rem;
}

.pr-proximo-fase {
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.pr-proximo-txt {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(251,247,240,0.75);
  margin: 0;
}

.pr-proximo-link {
  display: inline-block;
  margin-top: 0.875rem;
  padding: 0.5rem 1rem;
  background: var(--rose);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s;
}

.pr-proximo-link:hover { background: #8A453C; }

/* ============================================================
   TELA MINHA ROTINA
============================================================ */

/* Foco atual */
.rot-foco {
  background: var(--marrom);
  color: var(--creme);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.rot-foco-rotulo {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(251,247,240,0.5);
  margin-bottom: 0.3rem;
}

.rot-foco-fase {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.rot-foco-txt {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(251,247,240,0.75);
  margin: 0;
}

/* Blocos de checklist */
.rot-bloco {
  background: #fff;
  border: 1px solid #D9C5A8;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.rot-bloco-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #D9C5A8;
  background: var(--creme-escuro);
}

.rot-bloco-titulo {
  font-family: var(--fonte-titulo);
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--marrom);
  margin: 0;
}

.rot-bloco-cont {
  font-size: 0.72rem;
  color: #9A7B5C;
  font-weight: 500;
}

/* Item de checklist */
.rot-item {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #f0e8e4;
  transition: background 0.15s;
}

.rot-item:last-child { border-bottom: none; }

.rot-item.rot-item-feito { background: #FBF7E8; }

.rot-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #442A1E;
  line-height: 1.5;
}

.rot-item.rot-item-feito .rot-label span {
  text-decoration: line-through;
  text-decoration-color: var(--dourado);
  color: #9A7B5C;
}

.rot-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--dourado);
  cursor: pointer;
}

/* ============================================================
   TELA DIAGNÓSTICO
============================================================ */

.diag-oculto { display: none; }

/* Cards da lista */
.diag-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid #D9C5A8;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.diag-card:hover { border-color: var(--rose); }

.diag-card-info { flex: 1; min-width: 0; }

.diag-card-nome {
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--marrom);
  margin-bottom: 0.3rem;
}

.diag-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.diag-badge-ok      { background: var(--dourado);    color: #fff; }
.diag-badge-parcial { background: #F5E8E6; color: var(--rose); border: 1px solid var(--rose); }
.diag-badge-novo    { background: var(--creme-escuro); color: #7A5C40; }

.diag-chevron {
  width: 18px;
  height: 18px;
  color: #C4A882;
  flex-shrink: 0;
}

/* Maior buraco */
.diag-buraco {
  background: var(--creme-escuro);
  border: 1.5px solid var(--dourado);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-top: 0.5rem;
}

.diag-buraco-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dourado);
  margin-bottom: 0.3rem;
}

.diag-buraco-nome {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--marrom);
  margin-bottom: 0.35rem;
}

.diag-buraco-txt {
  font-size: 0.83rem;
  color: #5C3D2A;
  line-height: 1.55;
  margin: 0;
}

/* Detalhe do diagnóstico */
.diag-voltar {
  background: none;
  border: none;
  color: var(--rose);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--fonte-corpo);
  cursor: pointer;
  padding: 0;
  margin-bottom: 1rem;
  display: block;
}

.diag-detalhe-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--marrom);
  margin-bottom: 0.5rem;
}

.diag-intro {
  font-size: 0.875rem;
  color: #7A5C40;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* Perguntas */
.diag-perguntas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.diag-pergunta {
  background: #fff;
  border: 1px solid #D9C5A8;
  border-radius: 10px;
  padding: 0.875rem 1rem;
}

.diag-p-txt {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #442A1E;
  margin-bottom: 0.75rem;
}

.diag-resp-wrap {
  display: flex;
  gap: 0.5rem;
}

.diag-btn-resp {
  padding: 0.4rem 1rem;
  border-radius: 8px;
  border: 1.5px solid #D9C5A8;
  background: #fff;
  font-family: var(--fonte-corpo);
  font-size: 0.825rem;
  font-weight: 500;
  color: #7A5C40;
  cursor: pointer;
  transition: all 0.15s;
}

.diag-btn-resp:hover         { border-color: #9A7B5C; color: var(--marrom); }
.diag-btn-resp.ativa.sim     { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.diag-btn-resp.ativa.nao     { background: #F5E8E6; border-color: var(--rose); color: var(--rose); }

/* Devolutiva */
.diag-espera {
  font-size: 0.83rem;
  color: #9A7B5C;
  text-align: center;
  padding: 1rem 0;
}

.diag-devolutiva {
  background: var(--creme-escuro);
  border-left: 3px solid var(--dourado);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem;
}

.diag-dev-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dourado);
  margin-bottom: 0.4rem;
}

.diag-dev-txt {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #442A1E;
  margin-bottom: 1rem;
}

.diag-fase-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--rose);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--fonte-corpo);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.diag-fase-link:hover { background: #8A453C; }

/* Mensagem de fase ainda bloqueada na devolutiva */
.diag-fase-futura {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #5C3D2A;
  background: var(--creme);
  border: 1px solid var(--creme-escuro);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

/* Botão secundário "Ver progresso" para fase bloqueada */
.diag-ver-progresso {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--rose);
  border: 2px solid var(--rose);
  border-radius: 8px;
  font-family: var(--fonte-corpo);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.diag-ver-progresso:hover {
  background: var(--rose);
  color: #fff;
}

/* ============================================================
   TELA HOJE v2
============================================================ */

/* 1. Linha de topo */
.hj-topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.hj-topo-direita {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hj-btn-logout {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--texto-sec);
  opacity: 0.55;
  display: flex;
  align-items: center;
  transition: opacity 0.15s;
}

.hj-btn-logout:hover { opacity: 1; }

.hj-btn-logout svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.hj-data-label {
  font-family: var(--fonte-corpo);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-sec);
}

.hj-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--caramelo), var(--dourado));
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(68,42,30,0.25);
}

/* 2. Faixa-cabeçalho */
.hj-cabecalho {
  background: var(--grad-topo);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  padding: 1.375rem 1.5rem 1.375rem;
  margin-bottom: 0.875rem;
  box-shadow: var(--sombra-forte);
}

/* Ícone de período: grande, difuso, canto inferior direito */
.hj-icone-bg {
  position: absolute;
  bottom: -20px;
  right: -14px;
  opacity: 0.13;
  pointer-events: none;
  color: var(--dourado-claro);
}

.hj-icone-bg svg {
  width: 130px;
  height: 130px;
  stroke-width: 1;
}

.hj-icone-bg.oculto { display: none; }

/* Conteúdo acima do ícone de fundo */
.hj-cab-inner { position: relative; z-index: 1; }

.hj-cabecalho .hj-saudacao {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  color: #F6E8D2;
  line-height: 1.2;
  margin-bottom: 0.45rem;
}

.hj-foco-label {
  font-family: var(--fonte-corpo);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dourado-claro);
  margin-bottom: 0.875rem;
  line-height: 1.45;
  opacity: 0.9;
}

.hj-streak {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(201,162,75,0.30);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
}

.hj-streak-chama { width: 14px; height: 14px; color: var(--rose); vertical-align: middle; }

.hj-streak-txt {
  font-family: var(--fonte-corpo);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(251,244,232,0.80);
}

/* 3. Dois cards */
.hj-dois-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

/* Card meta */
.hj-card-meta {
  background: #fff;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: var(--sombra);
  border: 1px solid rgba(217,197,168,0.4);
  display: flex;
  flex-direction: column;
}

/* Rótulo editorial (maiúscula espaçada) */
.hj-rotulo {
  font-family: var(--fonte-corpo);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-sec);
  margin-bottom: 0.7rem;
  display: block;
}

.hj-rotulo-inv { color: rgba(251,244,232,0.65); margin-bottom: 0.4rem; }

.hj-meta-layout {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
}

.hj-mini-anel-wrap { flex-shrink: 0; }

.hj-mini-anel { width: 54px; height: 54px; display: block; }

.hj-meta-nums {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.hj-meta-de {
  font-family: var(--fonte-titulo);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto);
  margin: 0;
  white-space: nowrap;
}

.hj-meta-faltam {
  font-size: 0.7rem;
  color: var(--texto-sec);
  margin: 0;
}

/* Medalhas dentro do card META */
.hj-meta-medalhas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.hj-met-ico {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.62rem;
  color: var(--texto-sec);
  font-weight: 600;
}

.hj-met-ico svg, .hj-met-ico i {
  width: 14px;
  height: 14px;
}

.hj-met-destaque .hj-met-ico,
.hj-met-destaque {
  font-weight: 700;
  color: var(--marrom);
}

/* Card progresso (degradê dourado) */
.hj-card-pct {
  background: var(--grad-dourado);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 4px 16px rgba(201,162,75,0.30);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hj-pct-num {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin: 0.1rem 0;
}

.hj-pct-sub {
  font-family: var(--fonte-corpo);
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* 4. Card ações */
.hj-card-acoes {
  background: #fff;
  border-radius: 18px;
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: var(--sombra);
  border: 1px solid rgba(217,197,168,0.4);
  margin-bottom: 1.5rem;
}

.hj-acoes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.hj-acoes-header .hj-rotulo { margin-bottom: 0; }

.hj-acoes-pill {
  font-family: var(--fonte-corpo);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--rose);
  background: #F5E8E6;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  transition: background 0.2s, color 0.2s;
}

.hj-acoes-pill.hj-acoes-pill-ok {
  background: var(--dourado);
  color: #fff;
}

/* Label "Comece/Continue na Fase X" */
.hj-fase-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--rose);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
  min-height: 1rem;
}

.hj-acoes-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hj-acao-item {
  background: var(--creme);
  border: 1px solid rgba(217,197,168,0.5);
  border-radius: 12px;
  padding: 0.75rem 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.15s, background 0.15s;
}

/* Ações clicáveis que levam ao Método */
.hj-acao-item.hj-acao-clicavel {
  cursor: pointer;
  user-select: none;
}

.hj-acao-item.hj-acao-clicavel:hover {
  background: #fff;
  border-color: var(--rose);
}

.hj-acao-item.hj-acao-clicavel .hj-acao-txt {
  font-size: 0.875rem;
  color: var(--texto);
  line-height: 1.4;
  flex: 1;
}

.hj-acao-item.hj-acao-feita {
  background: #FBF7E8;
  border-color: rgba(201,162,75,0.45);
}

.hj-acao-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--texto);
  line-height: 1.4;
  flex: 1;
}

.hj-acao-item.hj-acao-feita .hj-acao-txt {
  text-decoration: line-through;
  text-decoration-color: var(--dourado);
  color: var(--texto-sec);
}

.hj-acao-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--dourado);
  cursor: pointer;
}

.hj-acao-seta {
  color: var(--rose);
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-left: 0.4rem;
  opacity: 0.7;
}

/* ── Tela Hoje: Rotina Diária ────────────────────────────── */
.hj-acoes-grupo-sep {
  border-top: 1px solid rgba(217,197,168,0.55);
  margin: 1rem 0;
}

.hj-rotina-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.hj-rotina-item {
  display: flex;
  align-items: flex-start;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(217,197,168,0.35);
  transition: opacity 0.15s;
}

.hj-rotina-item:last-child { border-bottom: none; }

.hj-rotina-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  flex: 1;
  cursor: pointer;
  user-select: none;
}

.hj-rotina-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--rose-claro);
  border-radius: 4px;
  margin-top: 0.1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  background: #fff;
}

.hj-rotina-check:checked {
  background: var(--rose);
  border-color: var(--rose);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='2,7 5.5,10.5 12,3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.hj-rotina-txt {
  font-family: var(--fonte-corpo);
  font-size: 0.875rem;
  color: var(--texto);
  line-height: 1.45;
  transition: color 0.15s;
}

.hj-rotina-feito .hj-rotina-txt {
  color: var(--texto-sec);
  text-decoration: line-through;
  text-decoration-color: var(--rose-claro);
}

.hj-rotina-feito .hj-rotina-check {
  border-color: var(--rose-claro);
  opacity: 0.7;
}

.hj-rotina-link {
  flex-shrink: 0;
  text-decoration: none;
  align-self: center;
  padding-left: 0.2rem;
}

/* Desktop: cabecalho um pouco maior */
@media (min-width: 768px) {
  .hj-cabecalho .hj-saudacao { font-size: 1.75rem; }
  .hj-icone-bg svg { width: 150px; height: 150px; }
  .hj-card-pct { padding: 1.25rem; }
  .hj-pct-num  { font-size: 2.25rem; }
}

/* ============================================================
   IDENTIDADE AIXA'S LASHES — OVERRIDES GLOBAIS
   Aplicados em cima da base acima; todos têm precedência.
============================================================ */

/* Fundo: gradiente radial suave em vez de cor chapada */
body {
  background: radial-gradient(ellipse at 70% 0%, var(--creme) 0%, var(--creme-escuro) 100%);
  color: var(--texto);
}

/* Faixa de topo com degradê chocolate */
#topo {
  background: var(--grad-topo);
  position: relative;
  overflow: hidden;
}

/* ── Na tela Hoje: oculta a faixa de título padrão ──────────────────
   O cabeçalho integrado (hj-topo-linha + hj-cabecalho) cumpre esse papel.
   Todas as outras telas mantêm a faixa normalmente.
   ------------------------------------------------------------------ */
body.hoje-ativa #topo {
  display: none;
}

/* Mobile: sem a barra fixa, remove o offset que compensava os 56px dela */
body.hoje-ativa #conteudo {
  padding-top: 1rem;
}

/* Desktop: barra é sticky (já estava no fluxo); ajuste mínimo de respiração */
@media (min-width: 768px) {
  body.hoje-ativa #conteudo {
    padding-top: 1.5rem;
  }
}

/* Ícone climático de fundo (tela Hoje) */
#topo-clima-icone {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.14;
  pointer-events: none;
  color: var(--creme);
  display: flex;
  align-items: center;
}

#topo-clima-icone svg {
  width: 44px;
  height: 44px;
  stroke-width: 1.2;
}

#topo-clima-icone.oculto { display: none !important; }

/* Sidebar desktop — cores corrigidas para legibilidade sobre fundo escuro */
@media (min-width: 768px) {
  #nav-principal { background: var(--grad-topo); }
  .nav-item       { color: rgba(251,244,232,0.82); }
  .nav-item:hover { color: #fff; background: rgba(255,255,255,0.12); }
  .nav-item.ativa { background: var(--rose); color: #fff; }
}
/* Nav mobile — fundo branco e ativa em rose (sem tocar no desktop) */
@media (max-width: 767px) {
  #nav-principal  { background: #fff; }
  .nav-item.ativa { color: var(--rose); }
}

/* Botão primário com degradê */
.btn-primario {
  background: var(--grad-rose);
  border-radius: 12px;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.btn-primario:hover {
  background: linear-gradient(135deg, #8A453C 0%, #BF7050 100%);
}
.btn-primario.btn-travado,
.btn-primario:disabled {
  background: #D5C8BC;
  color: #A89480;
}
.btn-primario.btn-travado:hover { background: #D5C8BC; }

/* ── Cards: raios maiores + sombra marrom ────────────── */
.ob-fundacao-item,
.ob-perfil-cartao,
.ob-bloco {
  border-radius: 18px;
  box-shadow: var(--sombra);
}

.sc-card {
  border-radius: 18px;
  box-shadow: var(--sombra);
}

.mt-card {
  border-radius: 18px;
  box-shadow: var(--sombra);
}
.mt-concluida { background: #FBF7E8; }
.mt-mensagem  { border-radius: 12px; box-shadow: 0 1px 8px rgba(68,42,30,0.06); }
.mt-acao      { border-radius: 12px; box-shadow: 0 1px 6px rgba(68,42,30,0.05); }
.mt-acao.mt-acao-marcada { background: #FBF7E8; }
.mt-resumo    { border-radius: 12px; }
.mt-criterio  { border-radius: 0 0 12px 12px; }

.hoje-card          { border-radius: 18px; box-shadow: var(--sombra); background: var(--grad-topo); }
.hoje-numero-bloco  { border-radius: 14px; box-shadow: 0 1px 8px rgba(68,42,30,0.07); }
.hoje-acao-item     { border-radius: 12px; box-shadow: 0 1px 6px rgba(68,42,30,0.05); }
.hoje-acao-item:has(.hoje-acao-check:checked) { background: #FBF7E8; }

.pr-num-bloco  { border-radius: 14px; box-shadow: 0 1px 8px rgba(68,42,30,0.07); }
.pr-proximo    { border-radius: 18px; background: var(--grad-topo); box-shadow: var(--sombra-forte); }
.pr-proximo-fim { background: var(--creme-escuro); box-shadow: var(--sombra); }
.pr-proximo-fim .pr-proximo-label,
.pr-proximo-fim .pr-proximo-txt { color: var(--texto); }

.rot-bloco     { border-radius: 14px; box-shadow: var(--sombra); }

.diag-card      { border-radius: 18px; box-shadow: var(--sombra); }
.diag-devolutiva { border-radius: 0 14px 14px 0; }
.diag-buraco    { border-radius: 14px; }

/* ── Barras de progresso com gradiente ──────────────── */
.pr-fill-andamento { background: var(--grad-rose); }
.pr-fill-concluida { background: var(--grad-dourado); }

/* ── Toast com sombra marrom ────────────────────────── */
.mt-toast { box-shadow: 0 4px 20px rgba(68,42,30,0.25); background: var(--grad-dourado); color: var(--texto); }

/* ── Rótulos editoriais (maiúscula + spacing) ────────── */
.hoje-card-rotulo,
.hoje-numero-label,
.rot-foco-rotulo,
.pr-proximo-label,
.pr-fase-nome,
.diag-buraco-label,
.diag-dev-label,
.mt-fase-num,
.mt-msg-rotulo,
.mt-criterio-label,
.ob-bloco-titulo,
.ob-exemplos-titulo,
.sc-num,
.sc-cat-nome {
  font-family: var(--fonte-corpo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-sec);
  font-weight: 700;
}
.mt-concluida .mt-fase-num { color: var(--dourado); }
.mt-andamento .mt-fase-num { color: var(--rose); }
.hoje-card-rotulo           { color: rgba(251,244,232,0.55); }

/* ── Cores de placeholder nos scripts ───────────────── */
.ph-cliente    { color: var(--rose); }
.ph-situacional { color: #8A6020; background: #F5EDDA; }

/* ── Inputs com borda e foco na nova paleta ──────────── */
.ob-input-bloco input:focus,
.ob-input-unico:focus,
.sc-busca-input:focus,
.ob-input-reais:focus-within { border-color: var(--rose); }

/* ── Chips com identidade atualizada ─────────────────── */
.sc-chip.ativa { background: var(--rose); border-color: var(--rose); }
.sc-chip:hover { border-color: var(--rose); color: var(--rose); }

/* ── Botão Copiar com nova terracota ────────────────── */
.btn-copiar { color: var(--rose); border-color: var(--rose); }
.btn-copiar:hover { background: var(--rose); }
.btn-copiar.btn-copiado { background: var(--dourado); border-color: var(--dourado); }

/* ── Badges do diagnóstico ───────────────────────────── */
.diag-badge-ok      { background: var(--dourado); }
.diag-badge-parcial { background: #F5E8E6; color: var(--rose); border-color: var(--rose); }
.diag-btn-resp.ativa.sim { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.diag-btn-resp.ativa.nao { background: #F5E8E6; border-color: var(--rose); color: var(--rose); }
.diag-fase-link { background: var(--rose); }
.diag-fase-link:hover { background: #8A453C; }

/* ============================================================
   TELA FERRAMENTAS
============================================================ */

.ferr-wrap {
  padding-bottom: 1rem;
}

.ferr-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--marrom);
  margin-bottom: 0.5rem;
}

.ferr-intro {
  font-size: 0.9rem;
  color: var(--texto-sec);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.ferr-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ferr-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--sombra);
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ferr-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--marrom);
}

.ferr-desc {
  font-size: 0.88rem;
  color: var(--texto);
  line-height: 1.55;
  flex: 1;
}

.ferr-btn {
  display: inline-block;
  margin-top: 0.5rem;
  align-self: flex-start;
  padding: 0.5rem 1.25rem;
  background: var(--grad-rose);
  color: #fff;
  border-radius: 8px;
  font-family: var(--fonte-corpo);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}

.ferr-btn:hover { opacity: 0.85; }

.ferr-rotulo {
  font-size: 0.75rem;
  color: var(--rose);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.ferr-acoes {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.ferr-btns-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ferr-btn-sec {
  background: transparent;
  color: var(--rose);
  border: 2px solid var(--rose);
}

.ferr-btn-sec:hover {
  background: var(--rose);
  color: #fff;
  opacity: 1;
}

.ferr-cupom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ferr-cupom-label {
  font-size: 0.78rem;
  color: var(--texto-sec);
  font-weight: 600;
}

.ferr-cupom-btn {
  background: var(--grad-dourado);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.28rem 0.8rem;
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}

.ferr-cupom-btn:hover { opacity: 0.85; }
.ferr-cupom-btn.copiado { background: #5a9e6a; }

.ferr-cupom-detalhe {
  font-size: 0.78rem;
  color: var(--texto-sec);
  font-style: italic;
}

.ferr-nota {
  font-size: 0.8rem;
  color: var(--texto-sec);
  line-height: 1.55;
  border-left: 3px solid var(--dourado);
  padding-left: 0.65rem;
  margin: 0;
}

.ferr-rodape {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--texto-sec);
  line-height: 1.65;
  font-style: italic;
  text-align: center;
  padding: 0.75rem 0 0.25rem;
}

@media (min-width: 768px) {
  .ferr-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

/* ============================================================
   TELA REGISTRO — formulário semanal
============================================================ */

.reg-wrap {
  padding-bottom: 1.5rem;
}

/* ── Cabeçalho com acesso a Meus Números ─── */
.reg-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.reg-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--marrom);
  margin: 0;
}

.reg-btn-numeros {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.42rem 0.75rem;
  background: var(--creme);
  border: 1.5px solid var(--dourado);
  border-radius: 8px;
  color: var(--marrom);
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

.reg-btn-numeros:hover { background: #F0E6D0; }

.reg-btn-numeros-ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── Instrução de período ─── */
.reg-instrucao {
  background: var(--creme);
  border-left: 3px solid var(--rose);
  border-radius: 0 10px 10px 0;
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.reg-instr-ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--rose);
  margin-top: 1px;
}

.reg-instr-txt {
  font-size: 0.82rem;
  color: var(--texto);
  line-height: 1.55;
  margin: 0 0 0.22rem;
}

.reg-instr-periodo {
  font-size: 0.82rem;
  color: var(--marrom);
  margin: 0;
}

/* ── Aviso de lançamento existente ─── */
.reg-aviso-dupl {
  background: rgba(201,162,75,0.08);
  border: 1px solid #C9A24B;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.reg-aviso-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #8C6A2F;
  margin-top: 1px;
}

.reg-aviso-dupl p {
  font-size: 0.8rem;
  color: var(--marrom);
  line-height: 1.5;
  margin: 0;
}

/* ── Intro (mantida para compatibilidade) ─── */
.reg-intro {
  font-size: 0.9rem;
  color: var(--texto-sec);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ── Grade de campos ─── */
.reg-campos {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.reg-campo {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.reg-campo-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.reg-campo-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto);
  line-height: 1.3;
}

.reg-campo-desc {
  font-size: 0.7rem;
  color: var(--texto-sec);
  line-height: 1.4;
}

.reg-contador {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.reg-menos,
.reg-mais {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--rose);
  background: transparent;
  color: var(--rose);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.reg-menos:hover,
.reg-mais:hover {
  background: var(--rose);
  color: #fff;
}

.reg-num {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--marrom);
  min-width: 2ch;
  text-align: center;
}

.reg-btn-salvar {
  width: 100%;
  padding: 0.9rem;
  background: var(--grad-rose);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}

.reg-btn-salvar:hover { opacity: 0.88; }

.reg-feedback {
  margin-top: 0.75rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: opacity 0.3s;
}

.reg-feedback-ok  { color: #2d7a3a; background: #e8f5ea; }
.reg-feedback-erro { color: var(--rose); background: #fdecea; }

.reg-btn-salvar:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.reg-nota {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--texto-sec);
  text-align: center;
}

.reg-nota-topo {
  margin-bottom: 0.75rem;
  margin-top: 0;
  text-align: left;
  font-style: normal;
  background: rgba(201,162,75,0.08);
  border-left: 3px solid var(--dourado);
  padding: 0.4rem 0.65rem;
  border-radius: 0 6px 6px 0;
}

.reg-link-numeros {
  margin-top: 1.75rem;
  text-align: center;
}

.reg-link-btn {
  background: none;
  border: none;
  color: var(--rose);
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Histórico de lançamentos ─── */
.reg-historico {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(58, 36, 26, 0.1);
}

.reg-hist-titulo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin: 0 0 1rem;
}

.reg-hist-ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.reg-hist-vazio {
  font-size: 0.85rem;
  color: var(--texto-sec);
  font-style: italic;
  text-align: center;
  padding: 0.75rem 0;
  margin: 0;
}

.reg-hist-mes {
  margin-bottom: 1.25rem;
}

.reg-hist-mes-titulo {
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--marrom);
  margin: 0 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(58, 36, 26, 0.08);
}

.reg-hist-item {
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(58, 36, 26, 0.08);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.reg-hist-periodo {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--marrom);
}

.reg-hist-item-ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--rose);
}

.reg-hist-vals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
}

.reg-hv {
  font-size: 0.75rem;
  color: var(--texto);
}

.reg-hv strong {
  color: var(--marrom);
}

.reg-hist-salvo {
  font-size: 0.64rem;
  color: var(--texto-sec);
  margin: 0;
  font-style: italic;
}

/* ── Escolha de ritmo ─── */

.reg-ritmo-wrap {
  padding-bottom: 1rem;
}

.reg-ritmo-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 1.25rem;
}

.reg-ritmo-btn {
  width: 100%;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 1.1rem 1.25rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.reg-ritmo-btn:hover {
  border-color: var(--rose);
  box-shadow: var(--sombra-forte);
}

.reg-ritmo-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--marrom);
}

.reg-ritmo-sub {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--rose);
}

.reg-ritmo-desc {
  font-size: 0.82rem;
  color: var(--texto-sec);
}

/* ============================================================
   MEUS NÚMEROS — painel de evolução
============================================================ */

.mn-wrap {
  padding-bottom: 1rem;
}

.mn-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.mn-voltar {
  background: none;
  border: none;
  color: var(--rose);
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.mn-mudar-ritmo {
  background: none;
  border: 1px solid var(--creme-escuro);
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  font-family: var(--fonte-corpo);
  font-size: 0.75rem;
  color: var(--texto-sec);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.mn-mudar-ritmo:hover {
  border-color: var(--rose);
  color: var(--rose);
}

.mn-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--marrom);
  margin-bottom: 1.25rem;
}

/* ── Metas (3 quadradinhos) ─── */

.mn-metas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.mn-meta-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 0.85rem 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
}

.mn-meta-prata {
  background: #3A241A;
  color: #FBF4E8;
}

.mn-meta-ico {
  width: 20px;
  height: 20px;
  margin-bottom: 0.1rem;
}

.mn-meta-nome {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

.mn-meta-prata .mn-meta-nome {
  color: rgba(255,255,255,0.7);
}

.mn-meta-val {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--marrom);
  line-height: 1.1;
}

.mn-meta-prata .mn-meta-val {
  color: #FBF4E8;
}

.mn-meta-info {
  font-size: 0.62rem;
  color: var(--texto-sec);
  line-height: 1.3;
}

.mn-meta-prata .mn-meta-info {
  color: rgba(255,255,255,0.65);
}

.mn-meta-ok .mn-meta-val { color: var(--rose); }
.mn-meta-prata.mn-meta-ok .mn-meta-val { color: #E8C97E; }

/* ── Seção com título ─── */

.mn-secao {
  margin-bottom: 1.25rem;
}

.mn-secao-titulo {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin: 0 0 0.6rem;
}

/* ── De onde você partiu ─── */

.mn-partida {
  background: var(--creme);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.mn-partida-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mn-partida-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mn-partida-val {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--marrom);
}

/* ── Como ler seus números ─── */

.mn-como-ler {
  background: var(--creme);
  border-radius: 10px;
  border-left: 4px solid var(--dourado);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mn-como-rotulo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin: 0;
}

.mn-como-ico {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--dourado);
}

.mn-como-txt {
  font-size: 0.82rem;
  color: var(--texto);
  line-height: 1.6;
  margin: 0;
}

/* Legenda da linha "hoje" no gráfico mensal */
.mn-leg-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 2px;
}

.mn-lab-hoje {
  font-weight: 700;
  fill: #A8584E;
}

/* ── Cards 2×2 (mantidos para compatibilidade) ─── */

.mn-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.mn-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mn-card-titulo {
  font-size: 0.72rem;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-sec);
  line-height: 1.3;
}

.mn-card-valor {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.25rem;
}

.mn-card-unidade {
  font-size: 0.9rem;
  font-family: var(--fonte-corpo);
  font-weight: 500;
}

.mn-card-sub {
  font-size: 0.78rem;
  color: var(--texto-sec);
}

.mn-card-dourado .mn-card-valor { color: var(--dourado); }
.mn-card-rose    .mn-card-valor { color: var(--rose); }
.mn-card-neutro  .mn-card-valor { color: var(--marrom); }

/* ── Leitura da semana ─── */

.mn-leitura {
  background: var(--creme-escuro);
  border-left: 4px solid var(--rose);
  border-radius: 0 12px 12px 0;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--texto);
  line-height: 1.5;
}

/* ── Fechamento mensal ─── */

.mn-fechamento {
  background: #FBF7E8;
  border: 1px solid var(--dourado-claro);
  border-radius: 14px;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
}

.mn-fech-rotulo {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dourado);
  margin-bottom: 0.35rem;
}

.mn-fech-txt {
  font-size: 0.9rem;
  color: var(--texto);
  line-height: 1.5;
}

/* ── Aviso teto ─── */

.mn-aviso-teto {
  background: #FBF7E8;
  border: 1px solid var(--dourado);
  border-radius: 14px;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--texto);
  line-height: 1.5;
}

.mn-link-fase {
  color: var(--rose);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Gráfico ─── */

.mn-grafico-wrap {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 1rem;
  margin-bottom: 1rem;
}

.mn-grafico-legenda {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}

.mn-leg {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--texto-sec);
}

.mn-leg::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
}

.mn-leg-barra::before { background: var(--rose); }
.mn-leg-meta::before  { background: var(--dourado); height: 3px; border-radius: 2px; }

.mn-grafico {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.mn-grafico-barra { fill: var(--rose); opacity: 0.85; }

.mn-grafico-meta {
  stroke: var(--dourado);
  stroke-width: 2.5;
  stroke-dasharray: 5 3;
}

.mn-grafico-grid {
  stroke: var(--creme-escuro);
  stroke-width: 1;
}

.mn-grafico-label {
  font-family: var(--fonte-corpo);
  font-size: 9px;
  fill: var(--texto-sec);
}

.mn-sem-dados {
  font-size: 0.85rem;
  color: var(--texto-sec);
  font-style: italic;
  text-align: center;
  padding: 1rem 0;
}

/* ── Responsivo desktop ─── */

@media (min-width: 768px) {
  .reg-campos { max-width: 600px; }
  .reg-btn-salvar { max-width: 300px; }
  .reg-ritmo-opcoes { flex-direction: row; }
  .reg-ritmo-btn { flex: 1; }

  .mn-cards { grid-template-columns: repeat(4, 1fr); }
  .mn-card-valor { font-size: 1.75rem; }
}

/* ============================================================
   TELA BÔNUS
============================================================ */

.bonus-wrap {
  padding-bottom: 1.5rem;
}

.bonus-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--marrom);
  margin-bottom: 0.5rem;
}

.bonus-intro {
  font-size: 0.9rem;
  color: var(--texto-sec);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

/* ── Card de bônus (acordeão) ─── */

.bonus-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--sombra);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Header clicável */
.bonus-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.bonus-header-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.bonus-header-sub {
  font-size: 0.8rem;
  color: var(--texto-sec);
  margin: 0;
  line-height: 1.4;
}

.bonus-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--texto-sec);
  transition: transform 0.22s ease;
  margin-top: 4px;
}

.bonus-card.aberta .bonus-chevron {
  transform: rotate(180deg);
}

/* Corpo recolhível */
.bonus-corpo {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.85rem;
  margin-top: 0.6rem;
  border-top: 1px solid rgba(58, 36, 26, 0.08);
}

.bonus-card.aberta .bonus-corpo {
  display: flex;
}

.bonus-num {
  font-family: var(--fonte-corpo);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dourado);
}

.bonus-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--marrom);
  margin: 0;
}

.bonus-desc {
  font-size: 0.9rem;
  color: var(--texto);
  line-height: 1.55;
  margin: 0;
}

/* ── Botões de atalho ─── */

.bonus-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.bonus-btn-atalho {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--rose);
  border-radius: 8px;
  color: var(--rose);
  background: transparent;
  font-family: var(--fonte-corpo);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.bonus-btn-atalho svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  flex-shrink: 0;
}

.bonus-btn-atalho:hover {
  background: var(--rose);
  color: #fff;
}

/* ── Calendário de retenção ─── */

.bonus-cal {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.5rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--creme-escuro);
}

.bonus-cal-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--creme-escuro);
}

.bonus-cal-item:last-child {
  border-bottom: none;
}

.bonus-cal-item:nth-child(odd) {
  background: #fff;
}

.bonus-cal-item:nth-child(even) {
  background: var(--creme);
}

.bonus-cal-mes {
  font-family: var(--fonte-titulo);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--rose);
  min-width: 2.5rem;
  padding-top: 0.1rem;
  flex-shrink: 0;
}

.bonus-cal-corpo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.bonus-cal-foco {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--marrom);
}

.bonus-cal-acao {
  font-size: 0.82rem;
  color: var(--texto-sec);
  line-height: 1.45;
}

/* ── Desktop ─── */

@media (min-width: 768px) {
  .bonus-wrap {
    max-width: 680px;
    margin: 0 auto;
  }

  .bonus-cal {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bonus-cal-item {
    border-right: 1px solid var(--creme-escuro);
  }

  .bonus-cal-item:nth-child(even) {
    border-right: none;
  }

  /* Recalcula border-bottom para grid 2 colunas */
  .bonus-cal-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

/* ── Calendário Editorial 2026 — Bônus / Entrega 3 ─────────── */

.cal26-wrap {
  background: var(--creme);                   /* #FBF4E8 */
  border-radius: 12px;
  padding: 1.1rem 1rem 1rem;
}

.cal26-sup {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--texto-sec);
  text-transform: uppercase;
  margin: 0 0 0.15rem;
}

.cal26-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--marrom);
  margin: 0 0 1rem;
}

/* Grid: 2 col mobile → 3 col a partir de 480px → 4 col desktop */
.cal26-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

@media (min-width: 480px) {
  .cal26-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .cal26-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Card de cada mês */
.cal26-mes {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(58, 36, 26, 0.12);
  padding: 0.8rem 0.7rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Topo: nome + badge */
.cal26-mes-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.2rem;
  flex-wrap: wrap;
  margin-bottom: 0.05rem;
}

.cal26-nome {
  font-family: var(--fonte-titulo);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--marrom);
  line-height: 1.2;
}

/* Selos PICO / ALTA */
.cal26-badge {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}

.cal26-badge-pico { background: var(--rose); color: #fff; }
.cal26-badge-alta { background: var(--dourado); color: var(--marrom); }

/* Seção interna (DATAS / CAMPANHAS) */
.cal26-secao {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cal26-rotulo {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--texto-sec);
  text-transform: uppercase;
  margin: 0;
}

/* Lista de datas com ícone */
.cal26-datas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.cal26-datas li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--texto);
  line-height: 1.3;
}

.cal26-ico {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: var(--rose);
}

/* Lista de campanhas com bolinha dourada */
.cal26-camps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.cal26-camps li {
  display: flex;
  align-items: flex-start;
  gap: 0.32rem;
  font-size: 0.76rem;
  color: var(--marrom);
  line-height: 1.35;
}

.cal26-dot {
  width: 5px;
  height: 5px;
  background: var(--dourado);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.42rem;
}

/* Aviso especial (ex: maio lota) */
.cal26-aviso {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--rose);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  border-top: 1px solid rgba(168, 88, 78, 0.18);
  padding-top: 0.4rem;
}

.cal26-aviso-ico {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: var(--rose);
}

/* ── CAMPANHAS POR ESTAÇÃO ────────────────────────────── */
.cal26-estacoes {
  margin-top: 1.5rem;
}

.cal26-estacoes-sup {
  margin-bottom: 0.65rem;
}

.cal26-estacao-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

@media (min-width: 540px) {
  .cal26-estacao-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.cal26-estacao-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(58, 36, 26, 0.12);
  padding: 0.85rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cal26-estacao-header {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.cal26-estacao-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--dourado);
  margin-top: 2px;
}

.cal26-estacao-nome {
  font-family: var(--fonte-titulo);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--marrom);
  margin: 0 0 0.08rem;
}

.cal26-estacao-inicio {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--texto-sec);
  margin: 0;
}

.cal26-estacao-dica {
  font-size: 0.76rem;
  color: var(--texto);
  line-height: 1.5;
  margin: 0;
}

/* ── ATENÇÃO: CARNAVAL ────────────────────────────────── */
.cal26-alerta-carnaval {
  margin-top: 1rem;
  background: #FBF3E4;
  border: 1.5px solid var(--dourado);
  border-radius: 12px;
  padding: 0.95rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cal26-alerta-topo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.cal26-alerta-ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--dourado);
}

.cal26-alerta-titulo {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--marrom);
  text-transform: uppercase;
}

.cal26-alerta-texto {
  font-size: 0.78rem;
  color: var(--texto);
  line-height: 1.55;
  margin: 0;
}

/* ══ CAIXA RÁPIDO TODO MÊS ═══════════════════════════════ */

.cr-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 0.25rem;
}

/* Cabeçalhos de seção */
.cr-secao {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cr-secao-sup {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--texto-sec);
  text-transform: uppercase;
  margin: 0;
}

.cr-secao-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--marrom);
  margin: 0;
}

/* ── Blocos de briefing ─── */
.cr-bloco {
  background: var(--creme);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cr-bloco-rotulo {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--texto-sec);
  text-transform: uppercase;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cr-bloco-rotulo-ico {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--dourado);
}

.cr-bloco-texto {
  font-size: 0.82rem;
  color: var(--texto);
  line-height: 1.6;
  margin: 0;
}

.cr-bloco-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cr-bloco-lista li {
  font-size: 0.82rem;
  color: var(--texto);
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}

.cr-bloco-lista li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 5px;
  height: 5px;
  background: var(--dourado);
  border-radius: 50%;
}

/* ── Regra de Ouro ─── */
.cr-regra-ouro {
  background: #3A241A;
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cr-regra-rotulo {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #C9A24B;
  text-transform: uppercase;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cr-regra-rotulo-ico {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.cr-regra-texto {
  font-size: 0.82rem;
  color: #FBF4E8;
  line-height: 1.6;
  margin: 0;
}

/* ── Cards de fase ─── */
.cr-fases {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

@media (min-width: 540px) {
  .cr-fases {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.cr-fase {
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(58, 36, 26, 0.1);
  border-left-width: 4px;
  padding: 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cr-fase-dourada  { border-left-color: #C9A24B; }
.cr-fase-terracota { border-left-color: #A8584E; }
.cr-fase-caramelo  { border-left-color: #8C5A3C; }
.cr-fase-chocolate { border-left-color: #3A241A; }

.cr-fase-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.cr-fase-id {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.cr-fase-num {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--texto-sec);
  text-transform: uppercase;
}

.cr-fase-nome {
  font-family: var(--fonte-titulo);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--marrom);
}

.cr-fase-topo-badges {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.cr-fase-dias {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--texto-sec);
  background: var(--creme);
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  white-space: nowrap;
}

.cr-fase-janela {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #FBF4E8;
  background: #3A241A;
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.cr-fase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.cr-fase-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--marrom);
  background: var(--creme);
  border-radius: 4px;
  padding: 0.1rem 0.38rem;
  text-transform: uppercase;
}

/* ── Dias do cronograma ─── */
.cr-dias {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cr-dia {
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(58, 36, 26, 0.1);
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cr-dia-topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cr-dia-num {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #8C5A3C;
  background: #FBF3E4;
  border-radius: 5px;
  padding: 0.18rem 0.48rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.cr-dia-fase {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cr-dia-tipo {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: auto;
}

.cr-dia-tipo-ico {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.cr-dia-orientacao {
  font-size: 0.8rem;
  color: var(--texto-sec);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}

.cr-dia-variante {
  font-size: 0.7rem;
  font-weight: 700;
  color: #8C5A3C;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0.1rem 0 0;
}

/* Nota de exemplo embaixo da mensagem copiável */
.cr-msg-nota {
  font-size: 0.68rem;
  color: var(--texto-sec);
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

/* ── Kit Fidelidade — lista de ideias ─── */
.kf-ideias {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.kf-ideias li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--texto);
  line-height: 1.55;
}

.kf-ideia-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--dourado);
  margin-top: 2px;
}

/* ══ CAPTAÇÃO ATIVA NO INSTAGRAM ═════════════════════════ */

.ci-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.ci-secao-sup {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin: 0 0 0.6rem;
}

/* ── Selo degradê ─── */
.ci-selo {
  background: linear-gradient(135deg, #A8584E 0%, #C9A24B 100%);
  border-radius: 14px;
  padding: 1.4rem 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
}

.ci-selo-ico {
  width: 28px;
  height: 28px;
  color: rgba(255,255,255,0.92);
  margin-bottom: 0.2rem;
}

.ci-selo-badge {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
  padding: 0.14rem 0.65rem;
}

.ci-selo-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0.1rem 0 0;
  line-height: 1.2;
}

.ci-selo-sub {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.82);
  margin: 0;
  font-style: italic;
}

/* ── Briefing ─── */
.ci-briefing {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* ── Escada de prioridade ─── */
.ci-escada-wrap {
  display: flex;
  flex-direction: column;
}

.ci-escada {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ci-degrau {
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(58, 36, 26, 0.1);
  border-left-width: 4px;
  padding: 0.7rem 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.ci-degrau-1 { border-left-color: #A8584E; margin-left: 0; }
.ci-degrau-2 { border-left-color: #C9A24B; margin-left: 1rem; }
.ci-degrau-3 { border-left-color: #8C5A3C; margin-left: 2rem; }
.ci-degrau-4 { border-left-color: #D9C5A8; margin-left: 3rem; }

.ci-degrau-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ci-degrau-1 .ci-degrau-ico { color: #A8584E; }
.ci-degrau-2 .ci-degrau-ico { color: #C9A24B; }
.ci-degrau-3 .ci-degrau-ico { color: #8C5A3C; }
.ci-degrau-4 .ci-degrau-ico { color: #C0A880; }

.ci-degrau-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marrom);
  margin-bottom: 0.12rem;
}

.ci-degrau-desc {
  font-size: 0.77rem;
  color: var(--texto);
  line-height: 1.5;
  margin: 0;
}

/* ── A Isca — Degustação ─── */
.ci-isca {
  background: #3A241A;
  border-radius: 12px;
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ci-isca-rotulo {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9A24B;
  margin: 0;
}

.ci-isca-rotulo-ico {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #C9A24B;
}

.ci-isca-texto {
  font-size: 0.82rem;
  color: #FBF4E8;
  line-height: 1.6;
  margin: 0;
}

/* ── Mensagens de abordagem ─── */
.ci-msgs-wrap {
  display: flex;
  flex-direction: column;
}

.ci-msgs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ci-msg-bloco {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ci-msg-rotulo {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin: 0;
}

.ci-msg-rotulo-ico {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: var(--dourado);
}

/* ── 10 ideias de stories ─── */
.ci-stories-wrap {
  display: flex;
  flex-direction: column;
}

.ci-stories-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 540px) {
  .ci-stories-grid { grid-template-columns: repeat(3, 1fr); }
}

.ci-story-card {
  background: var(--creme);
  border-radius: 10px;
  padding: 0.75rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.ci-story-ico {
  width: 17px;
  height: 17px;
  color: var(--dourado);
  flex-shrink: 0;
  margin-bottom: 0.15rem;
}

.ci-story-num {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

.ci-story-nome {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--marrom);
  line-height: 1.25;
}

.ci-story-desc {
  font-size: 0.7rem;
  color: var(--texto);
  line-height: 1.45;
  margin: 0;
}

.ci-stories-nota {
  font-size: 0.75rem;
  color: var(--texto);
  line-height: 1.55;
  margin: 0;
  background: var(--creme);
  border-left: 3px solid var(--dourado);
  border-radius: 0 8px 8px 0;
  padding: 0.65rem 0.85rem;
  font-style: italic;
}

/* Mensagem de erro quando arquivo de dados não carrega */
.tela-erro {
  font-size: 0.9rem;
  color: var(--rose);
  background: #FDF0EE;
  border: 1px solid #E8C0BA;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  line-height: 1.5;
}

/* ============================================================
   TELA DE LOGIN
============================================================ */

/* ══ TELA DE BOAS-VINDAS (?bemvinda=1) ══════════════════════ */

#tela-bemvinda {
  position: fixed;
  inset: 0;
  z-index: 10000;  /* acima do login */
  background: radial-gradient(ellipse at 60% 0%, var(--creme) 0%, var(--creme-escuro) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}

#tela-bemvinda.bv-oculto { display: none; }

.bv-box { max-width: 420px; }

.bv-corpo {
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.bv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(201,162,75,0.12);
  border: 1px solid var(--dourado);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--caramelo);
  align-self: flex-start;
}

.bv-badge-dot {
  width: 7px;
  height: 7px;
  background: var(--dourado);
  border-radius: 50%;
}

.bv-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--marrom);
  line-height: 1.2;
}

.bv-intro {
  font-size: 0.88rem;
  color: var(--texto-sec);
  line-height: 1.55;
  margin-top: -0.4rem;
}

.bv-passos {
  background: var(--creme);
  border-radius: 12px;
  padding: 1rem 1rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.bv-passos-sup {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin-bottom: 0.1rem;
}

.bv-passo {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.bv-passo-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grad-rose);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.bv-passo-txt {
  font-size: 0.84rem;
  color: var(--texto);
  line-height: 1.5;
  flex: 1;
}

.bv-aviso {
  background: rgba(201,162,75,0.09);
  border: 1.5px solid var(--dourado);
  border-radius: 9px;
  padding: 0.7rem 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.bv-aviso-icone { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

.bv-aviso-txt {
  font-size: 0.8rem;
  color: var(--marrom);
  line-height: 1.5;
}

.bv-aviso-txt strong { color: var(--rose); }

.bv-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.bv-btn-principal {
  width: 100%;
  padding: 0.88rem 1.5rem;
  background: var(--grad-rose);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(168,88,78,0.3);
  transition: opacity 0.15s;
}

.bv-btn-principal:hover { opacity: 0.88; }

.bv-link-entrar {
  background: none;
  border: none;
  color: var(--rose);
  font-family: var(--fonte-corpo);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.bv-link-entrar:hover { opacity: 0.7; }

/* ─────────────────────────────────────────────────────────── */

#tela-login {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(ellipse at 60% 0%, var(--creme) 0%, var(--creme-escuro) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}

#tela-login.login-oculto {
  display: none;
}

.login-box {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--sombra-forte);
  width: 100%;
  max-width: 380px;
  overflow: hidden;
}

.login-header {
  background: var(--grad-topo);
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
}

.login-marca {
  font-family: var(--fonte-titulo);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--creme);
  margin: 0 0 0.2rem;
  letter-spacing: 0.01em;
}

.login-tagline {
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  color: rgba(251,244,232,0.6);
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.login-corpo {
  padding: 1.5rem;
}

/* ── Tabs Entrar / Criar conta ─── */
.login-tabs {
  display: flex;
  border-bottom: 2px solid var(--creme-escuro);
  margin-bottom: 1.5rem;
}

.login-tab {
  flex: 1;
  padding: 0.65rem 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-sec);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.login-tab.ativa {
  color: var(--rose);
  border-bottom-color: var(--rose);
}

/* ── Campos ─── */
.login-campo {
  margin-bottom: 1rem;
}

.login-campo label {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-sec);
  margin-bottom: 0.35rem;
}

.login-campo input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--creme-escuro);
  border-radius: 10px;
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  color: var(--texto);
  background: var(--creme);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.login-campo input:focus {
  border-color: var(--rose);
  background: #fff;
}

/* ── Botão submit ─── */
.login-btn-submit {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.875rem;
  background: var(--grad-rose);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.15s;
}

.login-btn-submit:hover   { opacity: 0.88; }
.login-btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Mensagem de feedback ─── */
.auth-msg {
  min-height: 1.25rem;
  margin-top: 0.875rem;
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: center;
}

.auth-msg-erro { color: var(--rose); }
.auth-msg-ok   { color: #2d6a3f; font-weight: 600; }

/* ── Utilitário: esconde elemento sem display:none brusco ─── */
.login-item-oculto { display: none !important; }

/* ── Dica contextual (muda conforme a tab ativa) ─── */
.login-dica {
  background: var(--creme);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.1rem;
  border-left: 3px solid var(--rose);
}

.login-dica-txt {
  font-size: 0.78rem;
  color: var(--texto);
  line-height: 1.5;
  margin: 0;
}

/* ── Nota sobre e-mail da compra (Primeiro acesso) ─── */
.login-nota-email {
  font-size: 0.75rem;
  color: #8C5A2A;
  background: rgba(201,162,75,0.1);
  border: 1px solid rgba(201,162,75,0.35);
  border-radius: 6px;
  padding: 0.45rem 0.65rem;
  margin: 0 0 0.85rem;
  line-height: 1.45;
}

/* ── Esqueci minha senha ─── */
.login-esqueci-wrap {
  margin: 0 0 0.75rem;
  text-align: right;
}

.login-btn-esqueci {
  background: none;
  border: none;
  color: var(--rose);
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.login-btn-esqueci:hover { opacity: 0.75; }

/* ── Formulário de redefinição de senha ─── */
.login-redefinir-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--marrom);
  margin: 0 0 0.3rem;
  text-align: center;
}

.login-redefinir-sub {
  font-size: 0.8rem;
  color: var(--texto-sec);
  line-height: 1.5;
  text-align: center;
  margin: 0 0 1.25rem;
}