/* * Wizard Monta Evento — Fase 1 "Definir" (PRD 20 / spec 20b). * Layout copiado de monta-handoff/monta-fase1-wizard.html (fonte da verdade), * exceto emojis → SVG monocromático. Tokens --me-* vêm de design-system.css * (carrega antes). Escopo me-wizard-/me-w1- para não conflitar com o tema. * * As etapas legadas (serviços, checklist, revisão, checkout) mantêm o layout * anterior até as sub-fases 20C/20D — classe me-w1--wide no wrapper. */ /* --------------------------------------------------------------------------- * Shell (.app do mockup): 720px, coluna flex, branco com sombra do container * ------------------------------------------------------------------------- */ .me-wizard-wrapper { --me-danger: #b3261e; --me-radius: 13px; box-sizing: border-box; max-width: 720px; margin: 0 auto; width: 100%; color: var(--me-ink2); font-family: var(--me-font, 'Montserrat', sans-serif); font-size: 14px; line-height: 1.6; background: var(--me-white); box-shadow: var(--me-shadow-container); overflow: clip; /* clip mantém cantos sem bloquear position:sticky dos filhos */ } /* Etapas legadas (serviços/revisão) precisam de mais largura até a 20C/20D. */ .me-wizard-wrapper.me-w1--wide { max-width: 1080px; } .me-wizard-wrapper *, .me-wizard-wrapper *::before, .me-wizard-wrapper *::after { box-sizing: border-box; } .me-wizard-loading { text-align: center; padding: 56px 16px; color: var(--me-muted); } .me-wizard-noscript { padding: 16px; color: var(--me-danger); } .me-wizard-app { display: flex; flex-direction: column; min-height: 78vh; } .me-wizard-app[hidden] { display: none; } .me-w1--wide .me-wizard-app { min-height: 0; } /* --------------------------------------------------------------------------- * Topo: logo Monta + dots de progresso (estados em design-system .me-dots) * ------------------------------------------------------------------------- */ .me-w1-top { padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--me-rule); } .me-w1-logo { width: 96px; height: 32px; background-image: url('data:image/png;base64,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'); background-repeat: no-repeat; background-position: left center; background-size: contain; } /* --------------------------------------------------------------------------- * Miolo (.stage do mockup): centralizado verticalmente na fase 1 * ------------------------------------------------------------------------- */ .me-w1-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 36px 32px; } .me-w1-main { width: 100%; } .me-w1-main:focus { outline: none; } .me-w1--wide .me-w1-stage { justify-content: flex-start; gap: 18px; padding: 20px; } /* Animação de troca de etapa (fade 0.25s do mockup) */ @keyframes me-w1-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .me-w1-main.me-w1-fade { animation: me-w1-fade .25s ease; } /* Cabeçalho das perguntas (.q-ey/.q-t/.q-s do mockup) */ .me-w1-ey { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--me-coral); font-weight: 700; margin-bottom: 12px; } .me-w1-t { font-size: 28px; font-weight: 800; color: var(--me-ink); letter-spacing: -.8px; line-height: 1.12; margin: 0 0 8px; font-family: inherit; } .me-w1-s { font-size: 14px; color: var(--me-muted); margin: 0 0 26px; max-width: 520px; line-height: 1.55; } /* --------------------------------------------------------------------------- * Cards de opção (.opts/.opt do mockup — base .me-opt no design-system) * ------------------------------------------------------------------------- */ .me-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .me-opt .me-opt-ic { flex-shrink: 0; color: var(--me-crimson); display: inline-flex; } .me-opt .me-opt-badge { display: none; margin-left: auto; } .me-opt.is-selected .me-opt-badge { display: inline; } .me-opt-img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex-shrink: 0; } .me-opt-feat { color: var(--me-crimson); font-weight: 700; } /* Subcamada Celebração (.sublayer do mockup) */ .me-sublayer { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--me-cinza); display: none; } .me-sublayer.is-show { display: block; } .me-sl-h { font-size: 12.5px; font-weight: 700; color: var(--me-crimson); margin-bottom: 10px; } .me-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Helper do nome (💡 → SVG lâmpada) */ .me-w1-helper { font-size: 12.5px; color: var(--me-muted); margin-top: 10px; } .me-w1-helper-ic { display: inline-flex; vertical-align: -3px; color: var(--me-coral); } /* Região (D-05): select discreto abaixo dos cards */ .me-w1-region { margin-top: 18px; max-width: 420px; transition: opacity .15s; } /* --------------------------------------------------------------------------- * Etapa "Quando" (.daterow/.check/.periods do mockup) * ------------------------------------------------------------------------- */ .me-daterow { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .me-daterow input[type=date] { border: 1.5px solid var(--me-cinza); border-radius: 12px; padding: 14px 16px; font-size: 15px; font-family: inherit; color: var(--me-ink); background: var(--me-white); } .me-daterow input[type=date]:focus { outline: none; border-color: var(--me-coral); box-shadow: 0 0 0 4px var(--me-coral-bg); } .me-w1-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--me-ink2); cursor: pointer; margin-top: 16px; } .me-w1-check input { width: 18px; height: 18px; accent-color: var(--me-crimson); } .me-periods { margin-top: 24px; } .me-periods .me-pl { font-size: 12.5px; font-weight: 700; color: var(--me-ink); margin-bottom: 10px; } /* --------------------------------------------------------------------------- * Etapa "Quantas pessoas" (.sizewrap do mockup) * ------------------------------------------------------------------------- */ .me-sizewrap { text-align: center; padding: 8px 0 4px; } .me-sizenum { font-size: 52px; font-weight: 800; color: var(--me-ink); letter-spacing: -1.5px; line-height: 1; } .me-sizenum small { font-size: 16px; font-weight: 600; color: var(--me-muted); } .me-sizeband { display: inline-block; margin: 12px 0 26px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--me-coral); background: var(--me-coral-bg); padding: 5px 14px; border-radius: 20px; } .me-wizard-wrapper input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 5px; background: var(--me-cinza); outline: none; } .me-wizard-wrapper input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--me-coral); cursor: pointer; border: 3px solid var(--me-white); box-shadow: 0 2px 8px rgba(58, 0, 15, .25); } .me-wizard-wrapper input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--me-coral); cursor: pointer; border: 3px solid var(--me-white); } .me-rangelabels { display: flex; justify-content: space-between; font-size: 11px; color: var(--me-muted); margin-top: 10px; } .me-w1-guests-exact { max-width: 260px; margin: 0 auto; } .me-w1-guests-exact input { text-align: center; } .me-w1-guests-toggle { text-align: center; margin: 18px 0 0; } .me-w1-linklike { background: none; border: none; color: var(--me-muted); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: underline; padding: 4px; } .me-w1-linklike:hover { color: var(--me-crimson); } /* --------------------------------------------------------------------------- * Micro-transição "Pronto pra montar!" (.final do mockup, 🎉 → SVG confete) * ------------------------------------------------------------------------- */ .me-w1-final { text-align: center; padding: 10px; } .me-w1-final-mk { width: 76px; height: 76px; border-radius: 50%; background: var(--me-coral-bg); border: 2px solid var(--me-coral); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--me-crimson); } .me-w1-final h2 { font-size: 27px; font-weight: 800; color: var(--me-ink); letter-spacing: -.6px; margin: 0 0 10px; font-family: inherit; } .me-w1-final p { font-size: 14px; color: var(--me-muted); margin: 0 auto 24px; max-width: 440px; line-height: 1.6; } /* --------------------------------------------------------------------------- * Rodapé (.foot do mockup): Voltar ghost + Continuar primário * ------------------------------------------------------------------------- */ .me-w1-foot { padding: 18px 32px; border-top: 1px solid var(--me-rule); display: flex; justify-content: space-between; align-items: center; background: var(--me-white); } .me-w1-foot[hidden] { display: none; } /* --------------------------------------------------------------------------- * Campos de formulário (contato/checklist — estilo .field do mockup) * ------------------------------------------------------------------------- */ .me-wizard-field { margin-bottom: 15px; } .me-wizard-field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; color: var(--me-ink); } .me-wizard-field input, .me-wizard-field select, .me-wizard-field textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--me-cinza); border-radius: 10px; font-size: 14px; font-family: inherit; background: var(--me-white); color: var(--me-ink); transition: border-color 0.15s, box-shadow 0.15s; } .me-wizard-field input:focus, .me-wizard-field select:focus, .me-wizard-field textarea:focus { outline: none; border-color: var(--me-coral); box-shadow: 0 0 0 3px var(--me-coral-bg); } .me-wizard-error-msg { color: var(--me-danger); font-size: 0.82rem; margin-top: 10px; font-weight: 600; } /* Erros inline por campo */ .me-field--error input, .me-field--error select, .me-field--error textarea { border: 2px solid #d32f2f !important; background: #fff5f5 !important; } .me-field-error-msg { color: #d32f2f; font-size: 0.88rem; font-weight: 600; margin-top: 4px; display: block; } /* Grid 2 colunas: contato (pares de campo) e checklist do local */ .me-wizard-field-grid { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 768px) { .me-wizard-field-grid { grid-template-columns: repeat(2, 1fr); gap: 0 14px; } .me-wizard-field-grid .me-wizard-field--full { grid-column: 1/-1; } } .me-wizard-consent { display: flex; gap: 9px; align-items: flex-start; margin: 8px 0 11px; font-size: 0.88rem; } .me-wizard-consent input { width: auto; margin-top: 3px; accent-color: var(--me-crimson); } .me-wizard-consent a { color: var(--me-crimson); font-weight: 700; } /* Modal de data bloqueada */ .me-modal-overlay { position: fixed; inset: 0; background: rgba(58, 0, 15, 0.5); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; } .me-modal-overlay .me-modal { background: var(--me-white); border-radius: var(--me-radius); padding: 28px 24px; max-width: 420px; width: 100%; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22); text-align: center; } .me-modal-overlay .me-modal p { font-size: 1rem; color: var(--me-ink2); margin: 0 0 20px; line-height: 1.5; } .me-modal-close { min-width: 100px; } /* Spinner de carregamento */ @keyframes me-spin { to { transform: rotate(360deg); } } .me-wizard-spinner { display: inline-block; width: 34px; height: 34px; border: 3px solid var(--me-cinza); border-top-color: var(--me-crimson); border-radius: 50%; animation: me-spin 0.8s linear infinite; } .me-wizard-spinner-wrap { text-align: center; padding: 48px 20px; } .me-wizard-spinner-wrap .me-wizard-spinner { width: 44px; height: 44px; border-width: 4px; margin: 0 auto 20px; } .me-wizard-spinner-wrap p { color: var(--me-muted); font-size: 0.95rem; } /* Toast */ .me-wizard-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--me-noite); color: var(--me-offwhite); padding: 13px 20px; border-radius: 10px; font-size: 0.9rem; font-weight: 600; z-index: 99999; max-width: 90vw; box-shadow: 0 6px 24px rgba(58, 0, 15, 0.3); } .me-wizard-toast.is-error { background: var(--me-danger); } /* =========================================================================== * ETAPAS LEGADAS (serviços, checklist, revisão, checkout) — layout anterior * até as sub-fases 20C/20D. Tudo abaixo será redesenhado. * ======================================================================== */ .me-wizard-step-title { font-weight: 800; letter-spacing: -.5px; color: var(--me-ink); font-size: 1.5rem; line-height: 1.1; margin: 0 0 6px; font-family: inherit; } .me-wizard-step-desc { color: var(--me-muted); margin: 0 0 18px; } .me-wizard-cards { display: grid; grid-template-columns: 1fr; gap: 12px; } .me-wizard-card { border: 1.5px solid var(--me-rule); border-radius: var(--me-radius); padding: 16px; cursor: pointer; background: var(--me-white); transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; } .me-wizard-card:hover { border-color: var(--me-coral); transform: translateY(-1px); } .me-wizard-card.is-selected { border-color: var(--me-crimson); box-shadow: 0 0 0 3px var(--me-crimson-bg); } .me-wizard-card h4 { margin: 0 0 4px; font-size: 1.05rem; color: var(--me-ink); } .me-wizard-card p { margin: 0; color: var(--me-muted); font-size: 0.86rem; } .me-wizard-card-img { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; } .me-wizard-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; margin-right: 5px; letter-spacing: 0.02em; text-transform: uppercase; } .me-wizard-badge-required { background: #f7d9d6; color: var(--me-danger); } .me-wizard-badge-recommended { background: var(--me-coral-bg); color: var(--me-crimson); } .me-wizard-badge-validation { background: #fdeccf; color: #8a5a00; } /* Botões legados (Adicionar, modal, etc.) */ .me-wizard-btn { padding: 10px 26px; border-radius: 10px; border: none; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.1s; } .me-wizard-btn:active { transform: translateY(1px); } .me-wizard-btn-primary { background: var(--me-crimson); color: var(--me-offwhite); } .me-wizard-btn-primary:hover { background: var(--me-noite); } .me-wizard-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .me-wizard-btn-ghost { background: transparent; color: var(--me-crimson); } .me-wizard-btn-ghost:hover { background: var(--me-crimson-bg); } /* Cards de serviço com imagem — imagem flush com bordas do card */ .me-service-card { display: flex; gap: 0; align-items: stretch; border: 1.5px solid var(--me-rule); border-radius: var(--me-radius); padding: 0; background: var(--me-white); overflow: hidden; transition: border-color .15s, box-shadow .15s; } .me-service-card.is-selected { border-color: var(--me-crimson); box-shadow: 0 0 0 3px var(--me-crimson-bg); } .me-service-card__img { width: 110px; min-width: 110px; max-width: 110px; flex-shrink: 0; object-fit: cover; border-radius: calc(var(--me-radius) - 1.5px) 0 0 calc(var(--me-radius) - 1.5px); display: block; align-self: stretch; min-height: 90px; } .me-service-card__img--placeholder { background: var(--me-cinza); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0a8aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 40%; } .me-service-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; } .me-service-card__info { flex: 1; } .me-service-card__info h4 { margin: 0 0 3px; font-size: 1rem; color: var(--me-ink); } .me-service-card__info p { margin: 0; color: var(--me-muted); font-size: 0.84rem; line-height: 1.4; } @media (max-width: 640px) { .me-service-card__img { width: 80px; max-width: 80px; min-height: 80px; } } .me-wizard-price { font-weight: 800; color: var(--me-crimson); font-size: 0.92rem; } /* Controles de quantidade */ .me-wizard-qty { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; } .me-wizard-qty-btn { width: 30px; height: 30px; border: 1.5px solid var(--me-cinza); background: var(--me-white); border-radius: 6px; font-size: 1rem; cursor: pointer; color: var(--me-crimson); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .me-wizard-qty-btn:hover { border-color: var(--me-crimson); background: var(--me-crimson-bg); } .me-wizard-qty input[data-qty] { width: 46px; text-align: center; padding: 5px 4px; border: 1.5px solid #a09098; border-radius: 6px; font-size: 0.9rem; font-family: inherit; } .me-wizard-btn-remove { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.8rem; font-weight: 700; color: var(--me-danger); padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.02em; } .me-wizard-btn-remove:hover { background: rgba(179, 38, 30, 0.08); } /* Tabs de categoria e subcategoria */ .me-wizard-tabs-outer { position: relative; /* overflow: clip removido — em iOS Safari cai para hidden e bloqueia scroll do filho */ margin-bottom: 2px; } .me-wizard-tabs-outer::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; background: linear-gradient(to right, transparent, #fff); pointer-events: none; z-index: 1; } .me-wizard-cat-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 64px 4px 4px; margin-bottom: 0; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .me-wizard-cat-tabs::-webkit-scrollbar { display: none; } .me-wizard-subcat-tabs-outer { position: relative; margin-bottom: 12px; margin-left: 4px; background: rgba(107, 0, 32, 0.03); border-radius: 10px; padding-top: 2px; } .me-wizard-subcat-label { display: block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--me-muted); padding: 6px 0 0 12px; } .me-wizard-subcat-tabs-outer::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 48px; background: linear-gradient(to right, transparent, #fff); pointer-events: none; z-index: 1; } .me-wizard-subcat-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 6px 52px 10px 12px; margin-bottom: 0; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .me-wizard-subcat-tabs::-webkit-scrollbar { display: none; } .me-wizard-subcat-tab { flex: 0 0 auto; padding: 6px 14px; border: 1.5px solid var(--me-cinza); border-radius: 999px; background: var(--me-offwhite); cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--me-muted); transition: background 0.12s, border-color 0.12s, color 0.12s; display: inline-flex; align-items: center; font-family: inherit; } .me-wizard-subcat-tab.is-active { background: var(--me-coral); color: var(--me-noite); border-color: var(--me-coral); } .me-wizard-subcat-tab:hover:not(.is-active) { border-color: var(--me-coral); color: var(--me-crimson); } .me-cat-icon { display: inline-flex; align-items: center; margin-right: 5px; vertical-align: middle; opacity: 0.7; } .me-wizard-cat-tab.is-active .me-cat-icon, .me-wizard-subcat-tab.is-active .me-cat-icon { opacity: 1; } .me-wizard-cat-tab { flex: 0 0 auto; padding: 9px 16px; border: 1.5px solid var(--me-cinza); border-radius: 999px; background: var(--me-white); cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--me-ink2); display: inline-flex; align-items: center; font-family: inherit; } .me-wizard-cat-tab.is-active { background: var(--me-crimson); color: var(--me-offwhite); border-color: var(--me-crimson); } .me-wizard-cat-tab--highlight { border-color: var(--me-coral); color: var(--me-crimson); font-weight: 700; } /* Resumo lateral (etapas legadas) */ .me-wizard-summary { background: var(--me-offwhite); border: 1.5px solid var(--me-cinza); border-radius: var(--me-radius); padding: 18px; } .me-wizard-summary[hidden] { display: none; } .me-wizard-summary h3 { font-weight: 800; letter-spacing: -.3px; margin: 0 0 14px; font-size: 1.1rem; color: var(--me-ink); font-family: inherit; } .me-wizard-summary-row { display: flex; justify-content: space-between; font-size: 0.86rem; margin-bottom: 7px; gap: 10px; } .me-wizard-summary-row span:first-child { color: var(--me-muted); } .me-wizard-summary-total { font-size: 1.25rem; font-weight: 800; color: var(--me-ink); border-top: 2px solid var(--me-cinza); padding-top: 12px; margin-top: 12px; display: flex; justify-content: space-between; } .me-wizard-summary-deposit { color: var(--me-crimson); font-weight: 700; display: flex; justify-content: space-between; margin-top: 8px; } .me-wizard-summary-note { font-size: 0.74rem; color: var(--me-muted); margin-top: 12px; line-height: 1.45; } .me-wizard-notice { background: var(--me-coral-bg); border: 1px solid #FAD9CF; border-radius: 10px; padding: 12px 14px; font-size: 0.84rem; margin: 14px 0; color: var(--me-ink2); } /* Revisão */ .me-wizard-review-block { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--me-cinza); } .me-wizard-review-block h4 { margin: 0 0 8px; color: var(--me-ink); display: flex; justify-content: space-between; align-items: center; } .me-wizard-review-cat { margin-bottom: 10px; } .me-wizard-review-cat-name { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--me-crimson); margin: 10px 0 4px; } .me-wizard-review-subcat-name { font-size: 0.76rem; font-weight: 600; color: var(--me-muted); margin: 6px 0 3px 10px; } .me-wizard-review-edit { background: none; border: 1.5px solid var(--me-crimson); border-radius: 6px; color: var(--me-crimson); cursor: pointer; font-size: 0.78rem; font-weight: 700; padding: 4px 14px; text-transform: uppercase; letter-spacing: 0.03em; transition: background .12s, color .12s; font-family: inherit; } .me-wizard-review-edit:hover { background: var(--me-crimson); color: #fff; } .me-wizard-completed { text-align: center; padding: 32px 12px; } .me-wizard-completed h2 { font-weight: 800; letter-spacing: -.5px; color: var(--me-crimson); font-size: 1.6rem; font-family: inherit; } .me-wizard-completed a { color: var(--me-crimson); font-weight: 700; } /* Barra de total fixo (passo serviços) */ .me-wizard-nav-total { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-weight: 700; color: #fff; background: var(--me-crimson); padding: 7px 14px; } .me-wizard-nav-total[hidden] { display: none; } /* -------- Drawer de categorias (etapa serviços) -------- */ .me-cat-drawer-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 14px; margin-bottom: 8px; border: 1.5px dashed var(--me-cinza); border-radius: 8px; background: transparent; color: var(--me-crimson); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, background 0.15s; font-family: inherit; } .me-cat-drawer-btn:hover { border-color: var(--me-crimson); background: rgba(154, 16, 48, 0.04); } .me-cat-drawer-btn__plus { font-size: 1.15em; font-weight: 700; line-height: 1; } .me-cat-drawer-overlay { position: fixed; inset: 0; background: rgba(58, 0, 15, 0.45); z-index: 1000; opacity: 0; transition: opacity 0.25s; } .me-cat-drawer-overlay.is-open { opacity: 1; } .me-cat-drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(90vw, 380px); background: #fff; z-index: 1001; display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s; box-shadow: var(--me-shadow-drawer); } .me-cat-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .me-cat-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--me-cinza); background: var(--me-noite); color: var(--me-offwhite); flex-shrink: 0; } .me-cat-drawer-head strong { font-size: 0.95rem; } .me-cat-drawer-close { background: none; border: none; color: var(--me-offwhite); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; line-height: 1; } .me-cat-drawer-nav { flex: 1; overflow-y: auto; padding: 8px 6px; } .me-drawer-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: none; border: none; border-bottom: 1px solid #f4f0f2; text-align: left; font-size: 0.9rem; font-weight: 600; color: var(--me-ink2); cursor: pointer; transition: background 0.12s; font-family: inherit; border-radius: 8px; } .me-drawer-item:hover { background: var(--me-offwhite); } .me-drawer-item.is-active { color: var(--me-crimson); background: rgba(154, 16, 48, 0.05); } .me-drawer-group-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: none; border: none; border-bottom: 1px solid #f4f0f2; text-align: left; font-size: 0.9rem; font-weight: 600; color: var(--me-ink2); cursor: pointer; transition: background 0.12s; font-family: inherit; border-radius: 8px; } .me-drawer-group-head:hover { background: var(--me-offwhite); } .me-drawer-chevron { margin-left: auto; font-size: 1rem; transition: transform 0.2s; display: inline-block; } .me-drawer-group.is-open .me-drawer-chevron { transform: rotate(90deg); } .me-drawer-subitems { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .me-drawer-group.is-open .me-drawer-subitems { max-height: 500px; } .me-drawer-subitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px 10px 30px; background: rgba(0, 0, 0, 0.025); border: none; border-bottom: 1px solid #f4f0f2; text-align: left; font-size: 0.85rem; font-weight: 500; color: var(--me-muted); cursor: pointer; transition: background 0.12s, color 0.12s; font-family: inherit; border-radius: 8px; } .me-drawer-subitem:hover { background: var(--me-offwhite); color: var(--me-ink2); } .me-drawer-subitem.is-active { color: var(--me-crimson); font-weight: 700; background: var(--me-crimson-bg); } /* --------------------------------------------------------------------------- * Responsivo * ------------------------------------------------------------------------- */ /* Mobile (≤600px, breakpoint do mockup): opts em 1 coluna, título menor */ @media (max-width: 600px) { .me-opts { grid-template-columns: 1fr; } .me-w1-t { font-size: 23px; } .me-w1-stage { padding: 26px 22px; } .me-w1-top, .me-w1-foot { padding-left: 22px; padding-right: 22px; } } /* Mobile: rodapé fixo (usabilidade preservada da versão anterior) */ @media (max-width: 767px) { .me-w1-foot { position: sticky; bottom: 0; z-index: 50; padding-top: 12px; padding-bottom: 12px; } .me-wizard-step-title { font-size: 1.2rem; } .me-wizard-cat-tab { font-size: 0.78rem; padding: 7px 10px; } .me-w1--wide .me-wizard-summary { margin-top: 20px; border-top: 2px solid var(--me-cinza); padding-top: 16px; } } /* Desktop nas etapas legadas: resumo lateral fixo, cards em 2 colunas */ @media (min-width: 768px) { .me-w1--wide .me-w1-stage { flex-direction: row; } .me-w1--wide .me-w1-main { flex: 1 1 auto; min-width: 0; } .me-w1--wide .me-wizard-summary { flex: 0 0 310px; position: sticky; top: 16px; align-self: flex-start; } .me-w1--wide .me-wizard-cards { grid-template-columns: repeat(2, 1fr); } } /* =========================================================================== * SUB-FASE 20C — Painel do Evento (layout de monta-painel-mockup-v5.html). * Os primitivos (.me-g, .me-card, .me-vale, .me-faltou, .me-scrim, .me-drawer, * .me-mscrim, .me-modal, .me-stepper, .me-prog-*, .me-switcher, .me-badge, * .me-photo-32) já vêm do design-system.css (20A). Aqui vai o layout do painel * (shell, nav, grid, cover, defs, budget, catálogo, internos da gaveta/modal) e * o mobile R9. Emojis do mockup viram SVG monocromático no JS. * ======================================================================== */ /* Shell: o passo do painel escapa dos 720px do wizard e vira o app 1080px. */ .me-wizard-wrapper.me-panel-mode { max-width: 1080px; } .me-panel-mode .me-w1-top, .me-panel-mode .me-w1-foot, .me-panel-mode .me-wizard-summary { display: none !important; } .me-panel-mode .me-w1-stage { display: block; padding: 0; } .me-panel-mode .me-w1-main { padding: 0; } .me-pnl { display: block; } /* NAV do painel (desktop) */ .me-pnl-nav { background: var(--me-white); border-bottom: 1px solid var(--me-rule); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .me-pnl-nav-left { display: flex; align-items: center; gap: 34px; min-width: 0; } .me-pnl-links { display: flex; gap: 22px; } .me-pnl-links a { font-size: 13px; color: var(--me-muted); text-decoration: none; font-weight: 500; } .me-pnl-links a.is-on { color: var(--me-crimson); font-weight: 600; } .me-switcher .me-switcher-name { font-size: 12.5px; font-weight: 700; color: var(--me-ink); line-height: 1.1; } .me-switcher .me-switcher-sub { font-size: 10.5px; color: var(--me-muted); } .me-switcher .me-switcher-chev { color: var(--me-muted); font-size: 12px; margin-left: 2px; display: flex; } /* GRID 2 colunas */ .me-pnl-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; padding: 18px 28px 40px; align-items: start; } .me-pnl-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .me-pnl-col-main { gap: 11px; } /* Buildbar sticky */ .me-pnl-buildbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--me-offwhite); padding: 10px 2px; border-bottom: 1px solid var(--me-rule); } .me-pnl-bt { font-size: 17px; font-weight: 800; color: var(--me-ink); letter-spacing: -.4px; } .me-addbar { background: var(--me-coral); color: var(--me-noite); border: none; border-radius: 10px; padding: 11px 18px; font-size: 13.5px; font-weight: 800; font-family: inherit; cursor: pointer; white-space: nowrap; } .me-addbar:hover { filter: brightness(1.05); } .me-pnl-buildsub { font-size: 12px; color: var(--me-muted); margin: 2px 2px 8px; } .me-pnl-groups { display: flex; flex-direction: column; gap: 11px; } /* Detalhes internos do card de grupo (.g do mockup) */ .me-g-ic { flex-shrink: 0; width: 30px; display: flex; align-items: center; justify-content: center; color: var(--me-crimson); } .me-g-bd { flex: 1; min-width: 0; } .me-g-nm { font-size: 15px; font-weight: 700; color: var(--me-ink); margin-bottom: 2px; display: flex; align-items: center; gap: 4px; } .me-g-nm .me-g-check { color: var(--me-coral); display: inline-flex; } .me-g-st { font-size: 12.5px; line-height: 1.4; color: var(--me-muted); } .me-g.is-filled .me-g-st { color: var(--me-ink2); } .me-g-arrow { color: var(--me-cinza); flex-shrink: 0; display: flex; } .me-g-right { text-align: right; flex-shrink: 0; } .me-g-right .me-g-price { font-size: 14px; font-weight: 700; color: var(--me-ink); } .me-g-right .me-g-edit { font-size: 11.5px; color: var(--me-crimson); font-weight: 600; margin-top: 2px; } .me-g.is-empty .me-g-nm { color: var(--me-ink2); font-weight: 600; } .me-g.is-empty .me-g-ic { opacity: .6; } /* Sugerido: vazio, mas em destaque (não apagado) e com dica coral */ .me-g.is-sugerido { opacity: 1; border-style: dashed; border-color: var(--me-coral); background: var(--me-coral-bg); } .me-g.is-sugerido .me-g-st { color: var(--me-crimson); font-weight: 600; } .me-g.is-sugerido .me-g-ic { opacity: 1; } /* Faixa "avisa e mantém" (warnings[]) */ .me-warn { background: var(--me-coral-bg); border: 1px solid #FAD9CF; border-left: 4px solid var(--me-crimson); border-radius: 10px; padding: 11px 14px; font-size: 12.5px; color: var(--me-crimson); font-weight: 600; line-height: 1.45; display: flex; gap: 9px; align-items: flex-start; } .me-warn-close { margin-left: auto; background: none; border: none; color: var(--me-crimson); cursor: pointer; font-size: 15px; line-height: 1; flex-shrink: 0; } /* Vale Lembrar: link "ver todas" e botão dispensar */ .me-vale-icon { display: inline-flex; } .me-vale-close { margin-left: auto; background: none; border: none; color: var(--me-muted); cursor: pointer; font-size: 14px; line-height: 1; flex-shrink: 0; align-self: flex-start; } .me-vale-more { font-size: 12px; color: var(--me-crimson); font-weight: 700; text-decoration: underline; cursor: pointer; background: none; border: none; align-self: flex-start; padding: 2px; } /* COVER */ .me-cover { position: relative; /* 0.25.6: um pouco mais alto porque titulo e acoes agora dividem UMA linha. */ height: 140px; border-radius: 14px; overflow: hidden; background: var(--me-noite); } .me-cover-pix { position: absolute; inset: 0; display: flex; opacity: .16; } .me-cover-pix span { flex: 1; } /* Faixa unica: titulo a esquerda, Compartilhar/Renomear a direita, na mesma linha e centralizados na vertical (pedido do Deco no teste live 0.25.5). */ .me-cover-row { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 20px; } .me-cover-acts { display: flex; gap: 8px; flex-shrink: 0; } .me-cover-act { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; color: var(--me-noite); cursor: pointer; border: none; } .me-cover-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; } .me-cover-title h1 { font-size: 22px; font-weight: 800; color: var(--me-white); letter-spacing: -.5px; line-height: 1.05; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .me-cover-pen { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; color: var(--me-white); cursor: pointer; border: none; flex-shrink: 0; } .me-cover-rename { flex: 1; min-width: 0; } .me-cover-rename input { width: 100%; font-size: 20px; font-weight: 800; color: var(--me-noite); border: none; border-radius: 8px; padding: 6px 10px; font-family: inherit; } /* DEFINIÇÕES */ .me-defs { display: flex; flex-direction: column; gap: 9px; } .me-def { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--me-surface2); border-radius: 9px; cursor: pointer; border: none; width: 100%; text-align: left; font-family: inherit; } .me-def .me-def-l { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--me-ink); font-weight: 500; min-width: 0; } .me-def .me-def-l .me-def-ic { display: inline-flex; color: var(--me-crimson); flex-shrink: 0; } .me-def .me-def-edit { font-size: 11px; color: var(--me-crimson); font-weight: 600; opacity: .75; flex-shrink: 0; } .me-def-edit-box { padding: 10px 12px; background: var(--me-surface2); border-radius: 9px; } .me-def-edit-box .me-field { margin: 0; } .me-def-edit-actions { display: flex; gap: 8px; margin-top: 10px; } /* PROGRESSO */ .me-prog-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .me-prog-h .me-prog-t { font-size: 12px; color: var(--me-ink2); font-weight: 600; } .me-prog-h .me-prog-pct { font-size: 12px; color: var(--me-crimson); font-weight: 700; } /* ORÇAMENTO */ .me-budget .me-budget-lb { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--me-muted); font-weight: 700; } .me-budget .me-budget-total { font-size: 34px; font-weight: 800; color: var(--me-ink); letter-spacing: -1px; margin: 2px 0; } .me-budget .me-budget-total small { font-size: 13px; font-weight: 500; color: var(--me-muted); letter-spacing: 0; } .me-budget .me-budget-est { font-size: 11.5px; color: var(--me-muted); margin-bottom: 14px; } .me-budget .me-budget-lines { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .me-budget .me-budget-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--me-ink2); } .me-budget .me-budget-line span:last-child { font-weight: 600; color: var(--me-ink); } .me-budget .me-budget-line.is-muted span:last-child { color: var(--me-muted); font-weight: 500; } .me-finalize { width: 100%; background: var(--me-coral); color: var(--me-noite); border: none; border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; } .me-finalize:hover { filter: brightness(1.05); } /* GAVETA — internos (a casca .me-drawer/.me-scrim vêm do design-system) */ .me-drawer-head .me-drawer-h { font-size: 15px; font-weight: 700; } .me-drawer-head .me-drawer-x { background: none; border: none; color: rgba(244, 244, 242, .8); font-size: 20px; cursor: pointer; line-height: 1; } .me-drawer-body { overflow-y: auto; flex: 1; padding: 0; } .me-drawer-search { padding: 12px 16px; border-bottom: 1px solid var(--me-rule); position: relative; } .me-drawer-search input { width: 100%; border: 1px solid var(--me-cinza); border-radius: 10px; padding: 11px 12px 11px 38px; font-size: 13.5px; font-family: inherit; color: var(--me-ink); } .me-drawer-search .me-drawer-search-ic { position: absolute; left: 27px; top: 50%; transform: translateY(-50%); color: var(--me-muted); pointer-events: none; display: flex; } .me-drawer-results { padding: 6px 0; } .me-drawer-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 20px; cursor: pointer; border-top: 1px solid rgba(0,0,0,.04); background: none; border-left: none; border-right: none; width: 100%; font-family: inherit; text-align: left; } .me-drawer-result:hover { background: var(--me-surface2); } .me-drawer-result .me-drawer-result-nm { font-size: 13px; font-weight: 600; color: var(--me-ink); } .me-drawer-result .me-drawer-result-cat { font-size: 11px; color: var(--me-muted); } .me-drawer-result .me-drawer-result-price { font-size: 11.5px; color: var(--me-crimson); font-weight: 600; white-space: nowrap; } .me-drawer-empty { padding: 22px 20px; font-size: 12.5px; color: var(--me-muted); line-height: 1.5; } .me-cat { border-bottom: 1px solid var(--me-rule); } .me-cat-head { display: flex; align-items: center; gap: 10px; padding: 13px 20px; cursor: pointer; user-select: none; background: none; border: none; width: 100%; font-family: inherit; text-align: left; } .me-cat-head:hover { background: var(--me-surface2); } .me-cat-head .me-cat-ic { display: inline-flex; color: var(--me-crimson); width: 20px; justify-content: center; } .me-cat-head .me-cat-nm { font-size: 13.5px; font-weight: 600; color: var(--me-ink); flex: 1; display: flex; align-items: center; } .me-cat-head .me-cat-ch { color: var(--me-muted); font-size: 12px; transition: transform .18s; display: flex; } .me-cat.is-open .me-cat-head .me-cat-ch { transform: rotate(90deg); } .me-cat.is-sugerido .me-cat-nm::after { content: 'sugerido'; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--me-coral); background: var(--me-coral-bg); padding: 2px 7px; border-radius: 8px; margin-left: 8px; font-weight: 700; } .me-cat-subs { max-height: 0; overflow: hidden; transition: max-height .22s ease; background: var(--me-surface2); } .me-cat.is-open .me-cat-subs { max-height: 400px; overflow-y: auto; } .me-sub { padding: 10px 20px 10px 50px; font-size: 12.5px; color: var(--me-ink2); cursor: pointer; border-top: 1px solid rgba(0,0,0,.04); background: none; border: none; width: 100%; text-align: left; font-family: inherit; display: block; } .me-sub:hover { color: var(--me-crimson); font-weight: 600; } .me-drawer-faltou { flex-shrink: 0; border-top: 1px solid var(--me-rule); padding: 14px 20px; background: var(--me-coral-bg); font-size: 12.5px; color: var(--me-ink2); line-height: 1.45; cursor: pointer; } .me-drawer-faltou b { color: var(--me-crimson); font-weight: 700; } /* CATÁLOGO (view interna) */ .me-cat-view { display: block; } /* Barra de voltar fixa: categorias com muitos serviços rolam, mas o botão "Voltar ao painel" fica sempre acessível no topo (feedback Deco, 20C). */ .me-cat-top { background: var(--me-noite); color: var(--me-offwhite); padding: 16px 28px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 10; } .me-cat-top .me-cat-back { background: rgba(255, 255, 255, .12); border: none; color: var(--me-offwhite); border-radius: 9px; padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .me-cat-top .me-cat-back:hover { background: rgba(255, 255, 255, .2); } .me-cat-top .me-cat-crumb { font-size: 12.5px; color: rgba(244, 244, 242, .6); } .me-cat-top .me-cat-crumb b { color: var(--me-coral); font-weight: 700; } .me-cat-wrap { padding: 24px 28px 90px; } .me-cat-h2 { font-size: 23px; font-weight: 800; color: var(--me-ink); letter-spacing: -.6px; margin-bottom: 4px; } .me-cat-sub2 { font-size: 13px; color: var(--me-muted); margin-bottom: 22px; } .me-forn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .me-forn { background: var(--me-white); border: 1px solid var(--me-rule); border-radius: 14px; overflow: hidden; transition: transform .12s, box-shadow .12s; display: flex; flex-direction: column; } .me-forn.is-focus { box-shadow: 0 0 0 3px var(--me-coral); } /* 16:9 corta a imagem (object-fit cover, centralizado) num padrão baixo e uniforme em desktop e mobile — evita rolagem gigante (feedback Deco, 20C). */ .me-forn .me-forn-ph { aspect-ratio: 16 / 9; background: var(--me-surface2); display: flex; align-items: center; justify-content: center; color: var(--me-muted); font-size: 12px; } .me-forn .me-forn-ph img { width: 100%; height: 100%; object-fit: cover; } .me-forn .me-forn-bd { padding: 16px; display: flex; flex-direction: column; gap: 0; flex: 1; } .me-forn .me-forn-nm { font-size: 15px; font-weight: 700; color: var(--me-ink); margin-bottom: 5px; } .me-forn .me-forn-bio { font-size: 12.5px; color: var(--me-ink2); line-height: 1.45; margin-bottom: 10px; } .me-forn .me-forn-price { font-size: 15px; font-weight: 700; color: var(--me-crimson); margin-bottom: 12px; } .me-forn .me-forn-price small { font-size: 11.5px; color: var(--me-muted); font-weight: 500; } .me-forn .me-forn-price.is-consulta { color: var(--me-crimson); } .me-forn .me-forn-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; flex-wrap: wrap; } .me-forn .me-forn-add { 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-forn .me-forn-add:hover { filter: brightness(1.15); } .me-forn .me-forn-add.is-added { background: var(--me-coral-bg); color: var(--me-crimson); } .me-forn .me-forn-dethint { font-size: 11.5px; color: var(--me-crimson); font-weight: 600; cursor: pointer; background: none; border: none; font-family: inherit; } .me-forn .me-chip-validacao { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--me-coral); background: var(--me-coral-bg); padding: 3px 8px; border-radius: 8px; font-weight: 700; } /* MODAL FICHA — internos (.me-mscrim/.me-modal vêm do design-system) */ .me-modal .me-modal-ph { aspect-ratio: 16 / 9; background: var(--me-surface2); display: flex; align-items: center; justify-content: center; color: var(--me-muted); font-size: 13px; } .me-modal .me-modal-ph img { width: 100%; height: 100%; object-fit: cover; } .me-modal .me-modal-bd { padding: 24px 26px 26px; } .me-modal .me-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .me-modal .me-modal-nm { font-size: 20px; font-weight: 800; color: var(--me-ink); letter-spacing: -.4px; } .me-modal .me-modal-x { background: none; border: none; font-size: 20px; color: var(--me-muted); cursor: pointer; line-height: 1; } .me-modal .me-modal-price { font-size: 14px; font-weight: 700; color: var(--me-crimson); margin: 6px 0 18px; } .me-modal .me-modal-price small { color: var(--me-muted); font-weight: 500; } .me-modal .me-modal-fam { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--me-coral); background: var(--me-coral-bg); padding: 3px 8px; border-radius: 6px; font-weight: 700; margin-left: 4px; } .me-modal h4 { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--me-crimson); font-weight: 700; margin: 16px 0 6px; } .me-modal p { font-size: 13px; color: var(--me-ink2); line-height: 1.6; } .me-modal ul { margin: 0; padding-left: 20px; } .me-modal li { font-size: 13px; color: var(--me-ink2); line-height: 1.7; } .me-modal .me-modal-min { background: var(--me-coral-bg); border-radius: 9px; padding: 11px 14px; font-size: 12.5px; color: var(--me-crimson); font-weight: 600; margin: 16px 0 18px; display: flex; gap: 8px; align-items: center; } .me-modal .me-modal-validacao { background: var(--me-surface2); border-radius: 9px; padding: 11px 14px; font-size: 12.5px; color: var(--me-ink2); line-height: 1.5; margin: 16px 0 18px; } .me-modal .me-modal-add { width: 100%; background: var(--me-coral); color: var(--me-noite); border: none; border-radius: 11px; padding: 14px; font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer; } .me-modal .me-modal-add:hover { filter: brightness(1.05); } /* Modal simples "Faltou uma peça" */ .me-modal-simple { padding: 24px 26px 26px; } .me-modal-simple textarea { width: 100%; border: 1px solid var(--me-cinza); border-radius: 10px; padding: 12px; font-size: 13.5px; font-family: inherit; min-height: 110px; resize: vertical; } .me-modal-simple .me-modal-simple-count { font-size: 11px; color: var(--me-muted); text-align: right; margin-top: 4px; } /* Header/Total fixos do mobile (R9) — só aparecem ≤820px */ .me-pnl-mobtop, .me-pnl-mobtotal { display: none; } /* -------------------------------------------------------------------------- * Mobile R9 (≤ 820px): coluna única com ordem própria (prevalece sobre o * mockup). Header fixo (logo + Editar detalhes + Adicionar) e Total fixo são * os ÚNICOS elementos fixos. Definições vão para o FINAL. * ------------------------------------------------------------------------ */ @media (max-width: 820px) { .me-pnl-nav { display: none; } .me-pnl-grid { display: flex; flex-direction: column; grid-template-columns: none; align-items: stretch; gap: 14px; padding: 14px 16px 16px; } .me-pnl-col { display: contents; } .me-cover { order: 1; } .me-prog-card { order: 2; } .me-pnl-buildbar { order: 3; position: static; } .me-pnl-buildbar .me-addbar { display: none; } .me-pnl-buildsub { order: 3; } .me-pnl-groups { order: 4; } .me-vale { order: 5; } .me-faltou { order: 6; } .me-budget { order: 7; } .me-defs-card { order: 8; } .me-forn-grid { grid-template-columns: 1fr; } .me-cover-title h1 { font-size: 26px; } /* Header fixo */ .me-pnl-mobtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; z-index: 45; background: var(--me-white); border-bottom: 1px solid var(--me-rule); padding: 10px 14px; } /* sticky ocupa espaco no fluxo, entao nao precisa mais compensar com padding. */ .me-panel-mode .me-w1-stage { padding-top: 0; } .me-pnl-mobtop .me-w1-logo { width: 86px; height: 30px; } .me-pnl-mobtop-btns { display: flex; gap: 8px; } .me-pnl-mobtop .me-mob-edit { background: var(--me-surface2); color: var(--me-ink); border: none; border-radius: 9px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 6px; } .me-pnl-mobtop .me-mob-add { background: var(--me-coral); color: var(--me-noite); border: none; border-radius: 9px; padding: 9px 14px; font-size: 12.5px; font-weight: 800; font-family: inherit; cursor: pointer; white-space: nowrap; } /* Total fixo (bottom) */ .me-pnl-mobtotal { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; bottom: 0; z-index: 45; background: var(--me-noite); color: var(--me-white); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); } .me-pnl-mobtotal .me-mobtotal-lb { font-size: 11px; color: rgba(244,244,242,.7); } .me-pnl-mobtotal .me-mobtotal-v { font-size: 17px; font-weight: 800; color: var(--me-white); } .me-pnl-mobtotal .me-mobtotal-btn { background: var(--me-coral); color: var(--me-noite); border: none; border-radius: 9px; padding: 11px 18px; font-size: 13px; font-weight: 800; font-family: inherit; cursor: pointer; white-space: nowrap; } } /* ======================================================================== * FECHO (Fase 3, spec 20d) — Revisão / Dados da empresa / Confirmação. * Shell próprio 1080px (como o painel): esconde dots/rodapé/resumo do wizard. * Layout de monta-corporativo-proposta.html e -dados-confirmacao.html. * ======================================================================== */ .me-wizard-wrapper.me-fecho-mode { max-width: 1080px; } .me-fecho-mode .me-w1-top, .me-fecho-mode .me-w1-foot, .me-fecho-mode .me-wizard-summary { display: none !important; } .me-fecho-mode .me-w1-stage { display: block; padding: 0; } .me-fecho-mode .me-w1-main { padding: 0; } .me-fecho { display: block; } .me-fecho-nav { background: var(--me-white); border-bottom: 1px solid var(--me-rule); padding: 14px 28px; display: flex; align-items: center; gap: 16px; } .me-fecho-modetag { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--me-crimson); background: var(--me-crimson-bg); padding: 5px 11px; border-radius: 20px; } .me-fecho-head { padding: 28px 28px 6px; } .me-fecho-head .ey { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--me-coral); font-weight: 700; margin-bottom: 8px; } .me-fecho-head h1 { font-size: 28px; font-weight: 800; color: var(--me-ink); letter-spacing: -.7px; margin: 0; } .me-fecho-head .sub { font-size: 13.5px; color: var(--me-muted); margin-top: 4px; max-width: 560px; } .me-fecho-grid { padding: 18px 28px 50px; display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: start; } .me-fecho-card { background: var(--me-white); border: 1px solid var(--me-rule); border-radius: 14px; padding: 20px 22px; } .me-fecho-card-h { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--me-muted); font-weight: 700; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; } .me-fecho-edit { background: none; border: none; color: var(--me-crimson); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; font-family: inherit; } .me-fecho-edit:hover { text-decoration: underline; } .me-fecho-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--me-rule); font-size: 13.5px; } .me-fecho-row .k { color: var(--me-muted); } .me-fecho-row .v { color: var(--me-ink); font-weight: 600; text-align: right; } .me-fecho-sech { font-size: 12px; font-weight: 700; color: var(--me-crimson); margin: 18px 0 6px; } .me-fecho-svc { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--me-rule); } .me-fecho-svc .n { color: var(--me-ink2); } .me-fecho-svc .n .ex { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; font-weight: 700; color: var(--me-coral); background: var(--me-coral-bg); padding: 2px 7px; border-radius: 8px; margin-left: 7px; white-space: nowrap; } .me-fecho-svc .p { color: var(--me-ink); font-weight: 600; white-space: nowrap; } .me-fecho-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--me-ink); } .me-fecho-total .l { font-size: 14px; font-weight: 700; color: var(--me-ink); } .me-fecho-total .v { font-size: 24px; font-weight: 800; color: var(--me-ink); letter-spacing: -.5px; } .me-fecho-total-note { font-size: 11.5px; color: var(--me-muted); margin-top: 6px; text-align: right; } .me-fecho-side { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 16px; } .me-fecho-prop { background: var(--me-noite); color: var(--me-offwhite); border-radius: 14px; padding: 22px; } .me-fecho-prop h3 { font-size: 17px; font-weight: 800; color: var(--me-offwhite); margin: 0 0 8px; letter-spacing: -.3px; } .me-fecho-prop p { font-size: 12.5px; color: rgba(244,244,242,.62); line-height: 1.6; margin: 0 0 16px; } .me-fecho-prop .steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .me-fecho-prop .stp { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: rgba(244,244,242,.85); line-height: 1.45; } .me-fecho-prop .stp .n { width: 20px; height: 20px; border-radius: 50%; background: var(--me-coral); color: var(--me-noite); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .me-fecho-undernote { font-size: 11.5px; color: rgba(244,244,242,.85); background: rgba(255,131,112,.14); border-radius: 9px; padding: 10px 12px; margin-bottom: 14px; line-height: 1.5; } .me-fecho-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 11.5px; color: rgba(244,244,242,.82); line-height: 1.45; margin-bottom: 14px; cursor: pointer; } .me-fecho-consent input { width: auto; margin-top: 2px; accent-color: var(--me-coral); flex-shrink: 0; } .me-fecho-cta { width: 100%; background: var(--me-coral); color: var(--me-noite); border: none; border-radius: 11px; padding: 14px; font-size: 14.5px; font-weight: 800; font-family: inherit; cursor: pointer; } .me-fecho-cta:hover { filter: brightness(1.05); } .me-fecho-cta:disabled { opacity: .6; cursor: default; } .me-fecho-prop .fine { font-size: 11px; color: rgba(244,244,242,.4); margin-top: 12px; line-height: 1.5; text-align: center; } .me-fecho-err { color: #FFB4A6; font-size: 12px; margin-top: 10px; } .me-fecho-estbox { background: var(--me-white); border: 1px solid var(--me-rule); border-radius: 14px; padding: 18px 20px; } .me-fecho-estbox .lb { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--me-muted); font-weight: 700; } .me-fecho-estbox .v { font-size: 26px; font-weight: 800; color: var(--me-ink); letter-spacing: -.6px; margin: 2px 0 4px; } .me-fecho-estbox .note { font-size: 11.5px; color: var(--me-muted); line-height: 1.5; } /* Dados da empresa (form, view 1 do mockup) */ .me-fecho-formwrap { padding: 18px 28px 50px; } .me-fecho-formcard { background: var(--me-white); border: 1px solid var(--me-rule); border-radius: 16px; padding: 26px; max-width: 680px; } .me-fecho-field { margin-bottom: 18px; } .me-fecho-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--me-ink); margin-bottom: 7px; } .me-fecho-field label small { color: var(--me-muted); font-weight: 500; } .me-fecho-field input { 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-fecho-field input:focus { outline: none; border-color: var(--me-coral); box-shadow: 0 0 0 3px var(--me-coral-bg); } .me-fecho-field .hint { font-size: 11.5px; color: var(--me-muted); margin-top: 5px; } .me-fecho-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .me-fecho-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--me-rule); } .me-fecho-actions .me-fecho-cta { width: auto; padding: 13px 24px; } .me-fecho-back { background: var(--me-white); border: 1px solid var(--me-cinza); color: var(--me-ink2); border-radius: 10px; padding: 12px 20px; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; } .me-fecho-formcard .me-fecho-err { color: var(--me-crimson); } /* Confirmação (view 2 do mockup) — também o sucesso pós-sinal */ .me-fecho-conf { max-width: 560px; margin: 10px auto 0; text-align: center; padding: 40px 20px 60px; } .me-fecho-conf .mark { width: 78px; height: 78px; border-radius: 50%; background: var(--me-coral-bg); border: 2px solid var(--me-coral); color: var(--me-coral); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; } .me-fecho-conf h2 { font-size: 27px; font-weight: 800; color: var(--me-ink); letter-spacing: -.6px; margin: 0 0 10px; } .me-fecho-conf p { font-size: 14px; color: var(--me-ink2); line-height: 1.65; margin: 0 0 6px; } .me-fecho-conf p b { color: var(--me-crimson); font-weight: 700; } .me-fecho-conf .protocol { display: inline-block; background: var(--me-surface2); border-radius: 9px; padding: 8px 16px; font-size: 13px; color: var(--me-ink); font-weight: 600; margin: 16px 0 22px; } .me-fecho-conf .next { background: var(--me-white); border: 1px solid var(--me-rule); border-radius: 14px; padding: 20px 22px; text-align: left; margin: 0 auto 24px; max-width: 460px; } .me-fecho-conf .next .nh { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--me-muted); font-weight: 700; margin-bottom: 12px; } .me-fecho-conf .next .stp { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--me-ink2); line-height: 1.45; margin-bottom: 11px; } .me-fecho-conf .next .stp:last-child { margin-bottom: 0; } .me-fecho-conf .next .stp .n { width: 21px; height: 21px; border-radius: 50%; background: var(--me-crimson); color: var(--me-offwhite); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .me-fecho-conf-cta { display: inline-block; background: var(--me-noite); color: var(--me-offwhite); border: none; border-radius: 11px; padding: 14px 28px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; } .me-fecho-conf-cta:hover { filter: brightness(1.1); } /* Mobile: 1 coluna, lateral depois do resumo (R9), sem scroll horizontal. */ @media (max-width: 820px) { .me-fecho-nav, .me-fecho-head { padding-left: 20px; padding-right: 20px; } .me-fecho-head h1 { font-size: 23px; } .me-fecho-grid { grid-template-columns: 1fr; padding: 16px 20px 40px; } .me-fecho-side { position: static; } .me-fecho-two { grid-template-columns: 1fr; } .me-fecho-formwrap { padding: 16px 20px 40px; } .me-fecho-formcard { padding: 20px; } } /* --------------------------------------------------------------------------- * 20F · Acessibilidade — área de toque dos botões de ícone (WCAG 2.5.8). * Os "×" de fechar tinham área tocável do tamanho do glifo (14–20px). Aqui a * área sobe pra ~40–44px SEM mudar o layout do mockup: o padding é transparente * (fundo none) e a margem negativa cancela o box no fluxo. Os que usam * margin-left:auto preservam o auto no lado esquerdo. * ------------------------------------------------------------------------- */ .me-drawer-head .me-drawer-x, .me-modal .me-modal-x { padding: 12px; margin: -12px -12px -12px 0; display: inline-flex; align-items: center; justify-content: center; } .me-warn-close, .me-vale-close { padding: 10px; margin: -10px -10px -10px auto; display: inline-flex; align-items: center; justify-content: center; } /* --------------------------------------------------------------------------- * 20F · D5 — blindagem contra a cascata do tema/Elementor no painel e CTAs. * O tema estiliza