/**
 * Design system Monta — paleta oficial 2026 (PRD 20 / spec 20a).
 *
 * Fonte da verdade visual: mockups em monta-handoff/ (CSS copiado de lá).
 * Este arquivo carrega ANTES de wizard.css e client-portal.css: os demais CSS
 * do frontend usam estes tokens (nada de cor hardcoded nova fora daqui).
 * Prefixo me- em todas as classes para não vazar estilo pro tema.
 * Mobile-first: estilos base para telas pequenas; media queries ampliam.
 */

:root {
  /* Paleta oficial Monta — Manual SincroGrowth 2026 */
  --me-noite:      #3A000F;  /* fundo escuro/âncora (nav escura, cover, hub) */
  --me-crimson:    #6B0020;  /* ação secundária, links fortes, badge confirmado */
  --me-coral:      #FF8370;  /* AÇÃO PRIMÁRIA (CTAs), destaques, energia */
  --me-cinza:      #E0DDD8;  /* bordas/inativos */
  --me-offwhite:   #F4F4F2;  /* fundo geral da página */
  /* Papéis derivados (usados nos mockups) */
  --me-ink:        #3A000F;  /* títulos */
  --me-ink2:       #45252E;  /* texto corrido */
  --me-muted:      #9B8389;  /* texto secundário */
  --me-rule:       #E6E0DD;  /* linhas divisórias/bordas de card */
  --me-white:      #FFFFFF;  /* superfície de card */
  --me-coral-bg:   #FFEFEA;  /* fundo suave coral (vale lembrar, hovers) */
  --me-crimson-bg: #F2E7EA;  /* fundo suave crimson (seleção) */
  --me-surface2:   #F0EBE8;  /* superfícies secundárias (chips, defs) */

  /* Tipografia (D-09: Montserrat provisório; trocar só o @font-face quando
     a cliente entregar Bigstage/Articulat CF) */
  --me-font: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;

  /* Sombras oficiais dos mockups (sem glow, sem sombra colorida) */
  --me-shadow-container: 0 0 40px rgba(58, 0, 15, .06);
  --me-shadow-card:      0 5px 16px rgba(58, 0, 15, .07);
  --me-shadow-fab:       0 8px 26px rgba(58, 0, 15, .24);
  --me-shadow-drawer:    -10px 0 40px rgba(58, 0, 15, .18);
}

/* ---------------------------------------------------------------------------
 * Pixel Cor — assinatura de marca (barra de blocos chapados, 6px)
 * Sequência exata dos mockups; uso pontual (topo do app, covers), não fundo.
 * ------------------------------------------------------------------------- */
.me-pixelcor { display: flex; width: 100%; height: 6px; }
.me-pixelcor span { flex: 1; }

/* ---------------------------------------------------------------------------
 * Botões
 * ------------------------------------------------------------------------- */
.me-btn-primary {
  background: var(--me-coral);
  color: var(--me-noite);
  border: none;
  border-radius: 11px;
  padding: 14px 30px;
  font-size: 14.5px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.me-btn-primary:hover { filter: brightness(1.05); }

.me-btn-ghost {
  background: none;
  border: none;
  color: var(--me-muted);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 10px 4px;
}
.me-btn-ghost:hover { color: var(--me-ink); }

.me-btn-dark {
  background: var(--me-noite);
  color: var(--me-offwhite);
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.me-btn-dark:hover { filter: brightness(1.15); }

/* ---------------------------------------------------------------------------
 * Card de opção do wizard (.opt do mockup) e chips
 * ------------------------------------------------------------------------- */
.me-opt {
  border: 1.5px solid var(--me-rule);
  border-radius: 13px;
  padding: 16px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 13px;
  transition: border-color .12s, background .12s, transform .1s;
  background: var(--me-white);
}
.me-opt:hover { border-color: var(--me-coral); transform: translateY(-1px); }
.me-opt.is-selected { border-color: var(--me-crimson); background: var(--me-crimson-bg); }
.me-opt.is-selected .me-opt-badge { margin-left: auto; color: var(--me-crimson); font-weight: 800; font-size: 15px; }
.me-opt-title { font-size: 15px; font-weight: 700; color: var(--me-ink); }
.me-opt-desc { font-size: 11.5px; color: var(--me-muted); line-height: 1.35; margin-top: 1px; }
/* Card "escape" (Outro): borda tracejada, estilo do mapa de fluxo */
.me-opt--dashed { border-style: dashed; }

.me-chip {
  border: 1.5px solid var(--me-rule);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--me-ink2);
  cursor: pointer;
  background: var(--me-white);
  transition: all .12s;
  display: inline-block;
}
.me-chip:hover { border-color: var(--me-coral); }
.me-chip.is-selected {
  background: var(--me-coral);
  border-color: var(--me-coral);
  color: var(--me-noite);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Inputs
 * ------------------------------------------------------------------------- */
.me-bigfield input {
  width: 100%;
  border: 1.5px solid var(--me-cinza);
  border-radius: 13px;
  padding: 18px 18px;
  font-size: 20px;
  font-weight: 700;
  font-family: inherit;
  color: var(--me-ink);
}
.me-bigfield input:focus {
  outline: none;
  border-color: var(--me-coral);
  box-shadow: 0 0 0 4px var(--me-coral-bg);
}

.me-field { margin-bottom: 18px; }
.me-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--me-ink);
  margin-bottom: 7px;
}
.me-field input,
.me-field select,
.me-field textarea {
  width: 100%;
  border: 1px solid var(--me-cinza);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--me-ink);
  background: var(--me-white);
}
.me-field input:focus,
.me-field select:focus,
.me-field textarea:focus {
  outline: none;
  border-color: var(--me-coral);
  box-shadow: 0 0 0 3px var(--me-coral-bg);
}
.me-field .me-hint { font-size: 11.5px; color: var(--me-muted); margin-top: 5px; }

/* ---------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------- */
.me-card {
  background: var(--me-white);
  border: 1px solid var(--me-rule);
  border-radius: 14px;
  padding: 18px 20px;
}
.me-card-h {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--me-muted);
  font-weight: 700;
  margin-bottom: 14px;
}

/* Card de grupo de serviço do painel (.g do mockup) */
.me-g {
  background: var(--me-white);
  border: 1px solid var(--me-rule);
  border-radius: 13px;
  padding: 15px 18px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  display: flex;
  align-items: center;
  gap: 15px;
}
.me-g:hover { transform: translateY(-1px); box-shadow: var(--me-shadow-card); }
.me-g.is-filled {
  border: 1px solid var(--me-rule);
  border-left: 4px solid var(--me-coral);
  box-shadow: 0 5px 16px rgba(58, 0, 15, .10);
}
.me-g.is-empty {
  border-style: dashed;
  border-color: var(--me-cinza);
  background: transparent;
  opacity: .66;
}
.me-g.is-empty:hover { opacity: 1; box-shadow: none; transform: none; }

/* ---------------------------------------------------------------------------
 * Faixa Vale Lembrar (.vale do mockup) — com "M" pulsante quando há dica nova
 * ------------------------------------------------------------------------- */
.me-vale {
  background: var(--me-coral-bg);
  border: 1px solid #FAD9CF;
  border-left: 4px solid var(--me-coral);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.me-vale .me-vale-tx { font-size: 13px; color: var(--me-ink2); line-height: 1.55; }
.me-vale .me-vale-tx b { color: var(--me-crimson); font-weight: 700; }
.me-vale .me-vale-tx a { color: var(--me-crimson); font-weight: 700; text-decoration: underline; cursor: pointer; }
.me-vale-icon { flex-shrink: 0; font-weight: 800; color: var(--me-crimson); }
.me-vale-icon.is-new { animation: me-pulse 1.6s ease-in-out infinite; }

@keyframes me-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ---------------------------------------------------------------------------
 * "Faltou uma peça?" (.faltou do mockup)
 * ------------------------------------------------------------------------- */
.me-faltou {
  border: 1.5px dashed var(--me-coral);
  border-radius: 13px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--me-coral-bg);
  cursor: pointer;
}
.me-faltou .me-faltou-ic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--me-coral);
  color: var(--me-noite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.me-faltou .me-faltou-tx { font-size: 13px; color: var(--me-ink2); line-height: 1.45; }
.me-faltou .me-faltou-tx b { color: var(--me-crimson); font-weight: 700; }

/* ---------------------------------------------------------------------------
 * Gaveta lateral (.drawer/.scrim do mockup)
 * ------------------------------------------------------------------------- */
.me-scrim {
  position: fixed;
  inset: 0;
  background: rgba(58, 0, 15, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s;
  z-index: 40;
}
.me-scrim.is-open { opacity: 1; visibility: visible; }

.me-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  /* Mobile: ~90% de largura para deixar claro que e um painel deslizante da
     direita (nao a tela toda). Desktop volta a 340px na media abaixo. */
  width: 90%;
  max-width: 92vw;
  background: var(--me-white);
  box-shadow: var(--me-shadow-drawer);
  transform: translateX(100%);
  transition: transform .24s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.me-drawer.is-open { transform: translateX(0); }
.me-drawer-head {
  background: var(--me-noite);
  color: var(--me-offwhite);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
@media (min-width: 481px) {
  .me-drawer { width: 340px; max-width: 88vw; }
}

/* ---------------------------------------------------------------------------
 * Modal de detalhe (.mscrim/.modal do mockup)
 * ------------------------------------------------------------------------- */
.me-mscrim {
  position: fixed;
  inset: 0;
  background: rgba(58, 0, 15, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.me-mscrim.is-open { opacity: 1; visibility: visible; }
.me-modal {
  background: var(--me-white);
  border-radius: 18px;
  max-width: 540px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(14px);
  transition: transform .22s;
}
.me-mscrim.is-open .me-modal { transform: translateY(0); }

/* ---------------------------------------------------------------------------
 * Stepper de quantidade (−/valor/+)
 * ------------------------------------------------------------------------- */
.me-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--me-rule);
  border-radius: 9px;
  overflow: hidden;
}
.me-stepper button {
  background: var(--me-surface2);
  border: none;
  width: 32px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  color: var(--me-ink);
  font-family: inherit;
}
.me-stepper button:hover { background: var(--me-cinza); }
.me-stepper .me-stepper-v {
  min-width: 40px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--me-ink);
}

/* ---------------------------------------------------------------------------
 * Barra de progresso discreta (R10)
 * ------------------------------------------------------------------------- */
.me-prog-bar {
  height: 8px;
  background: var(--me-surface2);
  border-radius: 5px;
  overflow: hidden;
}
.me-prog-fill {
  height: 100%;
  background: var(--me-coral);
  border-radius: 5px;
  transition: width .25s ease;
}

/* ---------------------------------------------------------------------------
 * Dots de progresso do wizard (sem texto "Passo X de Y")
 * ------------------------------------------------------------------------- */
.me-dots { display: flex; gap: 7px; }
.me-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--me-cinza);
  transition: all .2s;
}
.me-dots i.is-on { background: var(--me-coral); width: 22px; border-radius: 5px; }
.me-dots i.is-done { background: var(--me-crimson); }

/* ---------------------------------------------------------------------------
 * Badges de status do portal (monta-meus-eventos.html)
 * .me-badge--rasc existe no mockup mas NÃO é usada (R7: sem rascunho no portal)
 * ------------------------------------------------------------------------- */
.me-badge {
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
}
.me-badge--rasc { background: rgba(244, 244, 242, .9); color: var(--me-ink2); }
.me-badge--sinal { background: var(--me-coral); color: var(--me-noite); }
.me-badge--conf { background: var(--me-crimson); color: var(--me-offwhite); }

/* ---------------------------------------------------------------------------
 * Switcher de evento (nav do painel)
 * ------------------------------------------------------------------------- */
.me-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--me-surface2);
  border-radius: 10px;
  padding: 7px 12px;
  cursor: pointer;
}
.me-switcher .me-switcher-thumb {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--me-noite);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--me-offwhite);
}

/* ---------------------------------------------------------------------------
 * Tipografia utilitária (escala dos mockups)
 * ------------------------------------------------------------------------- */
.me-eyebrow {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--me-coral);
  font-weight: 700;
}
.me-q-title {
  font-size: 23px;
  font-weight: 800;
  color: var(--me-ink);
  letter-spacing: -.8px;
  line-height: 1.12;
}
.me-q-sub { font-size: 14px; color: var(--me-muted); line-height: 1.55; }
.me-microlabel {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--me-muted);
  font-weight: 700;
}
@media (min-width: 661px) {
  .me-q-title { font-size: 28px; }
}

/* ---------------------------------------------------------------------------
 * Imagens de serviço (R18): proporção única 3:2, foto no topo do card
 * ------------------------------------------------------------------------- */
.me-photo-32 {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  display: block;
  background: var(--me-surface2);
}

/* ---------------------------------------------------------------------------
 * Acessibilidade (spec 20a secao 8)
 * Coral sobre branco NÃO passa AA em texto: coral só como fundo de botão com
 * texto noite, ou detalhe decorativo; texto coral pequeno só sobre noite.
 * ------------------------------------------------------------------------- */
.me-wizard :focus-visible,
.me-portal :focus-visible,
[class^="me-"]:focus-visible {
  outline: 2px solid var(--me-coral);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .me-vale-icon.is-new { animation: none; }
  /* Neutraliza transições (hover, slide de drawer/modal, barra de progresso)
     via duração ~0. Não zera keyframes essenciais (spinner de carregamento). */
  .me-wizard *,
  .me-portal *,
  [class^="me-"] {
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}