/* ============================================================================ redesign.css — Camada visual FIEL do protótipo Cloud Design (18/jul/2026) Carregado DEPOIS do estilo.css: onde os dois pisam na mesma classe, este vence. Nas classes que ainda vivem só no estilo.css antigo, o mapeamento de tokens em :root garante que o visual novo se aplica sem quebrar código. Playbook §36: visual do redesign é DETERMINANTE. Este arquivo é o começo da correção — tokens/fontes/componentes-base do mock. Reescrita HTML das telas (viewCerimonial, viewPagamentos etc.) vem em commits seguintes, aba por aba, cada um usando os nomes CORRETOS do mock (não os inventados do handoff.md). ============================================================================ */ /* ----------------------------------------------------------------------------- TOKENS OFICIAIS do protótipo (verbatim das linhas 14-22 do paineladmin.html e 17-25 do portal-noiva.html — idênticos entre os dois). ---------------------------------------------------------------------------*/ :root{ /* Cores do mock */ --azul:#1a3a7c; --azul-d:#12285a; --dourado:#b8923f; --dourado-c:#d9b86a; --dourado-suave:#f3e7c9; --creme:#f6f2ea; --carvao:#22242b; --cinza:#6b6f76; --linha:#e7e0d3; --verde:#1a6b3c; --verde-bg:#e8f3ec; --ambar:#a9701a; --ambar-bg:#f6ecd6; --vermelho:#b23a3a; --vermelho-bg:#f6e4e4; --azul-bg:#e6ebf5; --branco:#fffdf9; --sombra:0 1px 2px rgba(18,40,90,.05),0 8px 24px rgba(18,40,90,.07); --r:14px; /* ALIASES pros nomes antigos que o estilo.css usa em várias regras — não podemos apagar as regras antigas de uma vez, então as vars antigas apontam pras novas equivalentes. Assim todo `color:var(--noite)` que ficou perdido no estilo.css agora renderiza no --azul-d do mock. */ --noite: var(--azul-d); --noite-d: #0a1226; /* mais escuro que o azul-d — usado em fundos hero */ --noite-l: var(--azul); --cream: var(--creme); /* variação de grafia — aliases */ --neve: var(--branco); --bruma: var(--linha); --pedra: var(--cinza); --ouro: var(--dourado); --ouro-c: var(--dourado); --ouro-l: var(--dourado-c); --musgo: var(--verde); --musgo-d: #0f4a24; --amarelo: var(--dourado-c); --azul-token: var(--azul); /* --azul já usada; guarda referência */ --sombra-h: 0 8px 32px rgba(18,40,90,.14); --rs: 10px; /* radius small, usado em várias regras antigas */ --t: .18s cubic-bezier(.4,0,.2,1); } /* ----------------------------------------------------------------------------- Reset + tipografia do mock (linhas 23-29 admin / 26-34 noiva). O :where() garante especificidade zero — as classes específicas antigas continuam vencendo quando precisarem. ---------------------------------------------------------------------------*/ *{min-width:0} html,body{overflow-x:clip;max-width:100%} html{scroll-behavior:smooth} body{ font-family:'DM Sans',system-ui,sans-serif; color:var(--carvao); background:var(--creme); line-height:1.5; -webkit-font-smoothing:antialiased; font-size:14.5px; } h1, h2, h3, .serif{ font-family:'Playfair Display', Georgia, serif } a{ color:inherit } .tnum{ font-variant-numeric:tabular-nums } .muted{ color:var(--cinza) } /* ----------------------------------------------------------------------------- Botões do mock (linhas 46-64 admin). O estilo.css antigo tinha um `.btn` próprio — esse aqui SOBRESCREVE porque carrega depois. ---------------------------------------------------------------------------*/ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; border:none; border-radius:11px; padding:11px 16px; font-family:inherit; font-weight:700; font-size:.9rem; cursor:pointer; transition:.15s; text-decoration:none; white-space:nowrap; } .btn:active{ transform:scale(.98) } .btn[disabled]{ opacity:.55; cursor:default } .btn-p{ background:var(--azul); color:#fff } .btn-p:hover{ background:var(--azul-d) } .btn-v{ background:var(--verde); color:#fff } .btn-v:hover{ filter:brightness(1.07) } .btn-g{ background:var(--dourado); color:#fff } .btn-o{ background:var(--branco); color:var(--azul); border:1.5px solid var(--linha) } .btn-o:hover{ border-color:var(--dourado) } .btn-x{ background:var(--creme); color:var(--carvao); border:1px solid var(--linha) } .btn-mini{ padding:7px 11px; font-size:.8rem; border-radius:9px } .btn-perigo{ background:var(--vermelho-bg); color:var(--vermelho) } .btn-full{ width:100% } .btn-cancel{ background:var(--creme); color:var(--carvao); border:1px solid var(--linha) } /* ----------------------------------------------------------------------------- Pills (linhas 103-108 admin). Categorias do mock: ok / parcial / pende / neutra / erro. O estilo.css antigo tinha `.pill` diferente — sobrescreve. ---------------------------------------------------------------------------*/ .pill{ font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; } .pill.ok{ background:var(--verde-bg); color:var(--verde) } .pill.parcial{ background:var(--azul-bg); color:var(--azul) } .pill.pende{ background:var(--ambar-bg); color:var(--ambar) } .pill.neutra{ background:#efeadd; color:var(--cinza) } .pill.erro{ background:var(--vermelho-bg); color:var(--vermelho) } /* Utilitários do mock */ .vazio{ font-style:italic; color:var(--cinza); font-size:.92rem; background:var(--branco); border:1px dashed var(--linha); border-radius:var(--r); padding:20px; text-align:center; } .note{ background:#fdf9ef; border:1px solid var(--dourado-suave); border-left:3px solid var(--dourado); border-radius:10px; padding:10px 14px; font-size:.8rem; color:var(--cinza); margin-top:16px; } .note b{ color:var(--carvao) } /* Chip de arquivo (`.chip-arq`) */ .chip-arq{ font-size:.76rem; font-weight:600; color:var(--azul); background:var(--creme); border:1px solid var(--linha); border-radius:8px; padding:4px 8px; text-decoration:none; display:inline-flex; align-items:center; gap:4px; } /* Icon button */ .ico-btn{ background:none; border:none; cursor:pointer; font-size:.95rem; padding:4px 6px; border-radius:7px; opacity:.75; } .ico-btn:hover{ background:var(--creme); opacity:1 } /* Skeleton */ @keyframes shimmer{ to { background-position:-400px 0 } } .skel{ border-radius:var(--r); background:linear-gradient(90deg,#efe9dc 25%,#f8f4eb 50%,#efe9dc 75%); background-size:400px 100%; animation:shimmer 1.1s infinite linear; } /* Foco visível */ button:focus-visible, a:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--dourado); outline-offset:2px; border-radius:8px; } /* ----------------------------------------------------------------------------- Correções pontuais no HERO EXISTENTE (index.html linhas 50-74). O shell atual do index.html usa `.hero` que já existe no estilo.css antigo, mas com estética diferente. Aqui reforço os detalhes do mock: linhas de ornamento, cor da linha inferior, halo dourado no topo. Depois de portar o Cerimonial, faço rewrite completo do shell pra usar o padrão do mock (`.top` bar + `.wrap` + `.dtabs`). ---------------------------------------------------------------------------*/ .hero{ border-bottom:3px solid var(--dourado) } .hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% -20%, rgba(217,184,106,.22), transparent 60%); pointer-events:none; } .hero h1{ font-family:'Playfair Display', Georgia, serif } .hero h1 .amp{ color:var(--dourado-c); font-style:italic; font-weight:500; padding:0 .12em } /* ----------------------------------------------------------------------------- Toast (linhas 534-538 admin, 247-251 noiva). ---------------------------------------------------------------------------*/ #toast{ position:fixed; left:50%; bottom:20px; z-index:120; transform:translateX(-50%) translateY(20px); background:var(--azul-d); color:#fff; border-radius:12px; padding:11px 20px; font-size:.9rem; font-weight:600; opacity:0; pointer-events:none; transition:.25s; box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:92vw; text-align:center; } #toast.on{ opacity:1; transform:translateX(-50%) translateY(0) } #toast.ok{ background:var(--verde) } #toast.erro{ background:var(--vermelho) } /* ----------------------------------------------------------------------------- Sombras / cards genéricos usados por muitos componentes (linhas 143+). ---------------------------------------------------------------------------*/ .card{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra); } /* ============================================================================ CERIMONIAL — port fiel do bloco cer-* do prototype (linhas 237-370 do paineladmin.html). Aplica-se dentro da aba Cerimonial do eternizze-app quando renderCerimoniaTimelineMock() emite HTML. ============================================================================ */ /* Estado vazio (escolher modelo de rito) */ .cer-empty{text-align:center;padding:32px 20px;max-width:640px;margin:0 auto} .cer-empty-ico{font-size:2.6rem;margin-bottom:6px} .cer-empty h4{font-family:'Playfair Display',serif;color:var(--azul);font-size:1.4rem;margin-bottom:6px} .cer-empty p{color:var(--cinza);font-size:.92rem;margin-bottom:18px} .cer-modelos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px} .cer-modelo-card{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:14px 16px;border:1.5px solid var(--linha);border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;transition:.14s} .cer-modelo-card:hover{border-color:var(--dourado);background:var(--dourado-suave);transform:translateY(-1px)} .cer-modelo-card b{color:var(--azul);font-size:1rem} .cer-modelo-card span{color:var(--cinza);font-size:.78rem} .cer-modelo-card.ghost{border-style:dashed} /* Panel head (compartilhado — usado em Cerimônia, Pagamentos etc.) */ .panel-head{margin-bottom:14px} .panel-head h3{font-size:1.25rem;color:var(--azul);font-family:'Playfair Display',serif;font-weight:600} .panel-head .sub{font-size:.86rem;color:var(--cinza);margin-top:2px} .panel-head .acts{float:right;display:flex;gap:8px;flex-wrap:wrap;max-width:60%;justify-content:flex-end} @media (max-width:640px){ .panel-head .acts{float:none;max-width:none;margin-bottom:10px} .panel-head .acts .btn{flex:1 1 auto} } /* Filtro sticky por tipo (chips) */ .pg-filtro{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 14px} .cer-filtro{position:sticky;top:0;z-index:20;background:var(--creme);padding:8px 0;margin:0 0 8px} .pgf-chip{padding:5px 12px;border:1px solid var(--linha);border-radius:999px;background:#fff;font-family:inherit;font-size:.78rem;font-weight:600;color:var(--cinza);cursor:pointer;transition:all .12s} .pgf-chip:hover{border-color:var(--dourado);color:var(--carvao)} .pgf-chip.on{background:var(--azul);border-color:var(--azul);color:#fff} .pgf-chip.mom{background:#f0f4fb;border-color:#cdd9ee;color:#3a5488} .pgf-chip.mom.on{background:var(--azul);border-color:var(--azul);color:#fff} .pgf-chip b{opacity:.85;margin-left:3px} /* Timeline de cards */ .cer-timeline{display:flex;flex-direction:column;gap:0;position:relative} .cer-timeline .cer-card{margin:4px 0} .cer-insert{height:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:2} .cer-insert span{width:22px;height:22px;border-radius:50%;background:var(--dourado);color:#fff;font-size:.9rem;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.7);transition:.12s;box-shadow:0 2px 6px rgba(184,146,63,.4)} .cer-insert::before{content:"";position:absolute;left:8px;right:8px;height:2px;background:var(--dourado-c);opacity:0;transition:.12s} .cer-insert:hover span{opacity:1;transform:scale(1)} .cer-insert:hover::before{opacity:.5} @media(hover:none){.cer-insert{height:20px}.cer-insert span{opacity:.6;transform:scale(.92)}.cer-insert::before{opacity:.3}} /* Card do momento */ .cer-card{display:flex;align-items:stretch;gap:12px;background:#fff;border:1px solid var(--linha);border-radius:13px;padding:11px 12px;cursor:pointer;position:relative;z-index:1;transition:.12s;box-shadow:0 1px 2px rgba(60,40,20,.04)} .cer-card:hover{border-color:var(--dourado);box-shadow:0 3px 12px -4px rgba(184,146,63,.3)} .cer-card-n{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;font-variant-numeric:tabular-nums;align-self:center} .cer-card-body{flex:1;min-width:0} .cer-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cer-card-top b{font-size:.98rem;color:var(--carvao);line-height:1.25} .cer-tipo-pill{font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .cer-card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px} .cer-tag{font-size:.74rem;padding:2px 8px;border-radius:7px;background:#f4f1e8;color:var(--carvao);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;font-family:inherit;cursor:default} .cer-tag.mus{background:#fbf4e3;color:#a9701a} .cer-tag.leit{background:#f7f0dd;color:#7a5b12} .cer-tag.pes{background:#eaf0fb;color:#1a3a7c} .cer-tag.oferta{background:#e3f4ec;color:#166a4e} .cer-tag.obs{background:#f0ece2;color:#5a5347;cursor:help} .cer-tag.com{background:#efe8fb;color:#5b3aa2} button.cer-tag{cursor:pointer} button.cer-tag:hover{filter:brightness(.95)} .cer-card-acts{display:flex;flex-direction:column;gap:2px;justify-content:center} .cer-card-acts .ico-btn{padding:2px 7px;font-size:.72rem;line-height:1.1;opacity:.85} .cer-card-acts .ico-btn:disabled{opacity:.25;cursor:default} /* Chip do lado (esquerda/centro/direita) — o app já tem isso */ .lado-chip{padding:4px 9px;border:1px solid var(--linha);border-radius:20px;background:#fff;font-size:.72rem;color:var(--cinza);cursor:pointer;font-family:inherit} .lado-chip.on{background:var(--dourado-suave);border-color:var(--dourado);color:#7a5b12;font-weight:700} /* Ajuste sticky do .cer-filtro: o eternizze-app tem .tabs-wrap sticky em cima (não .top como o mock). Compensar essa altura pra o filtro não colar em cima das abas — patterns.md §3 (alinhar sticky à altura real da top bar) aplicado. Ajuste medido em runtime também não é necessário aqui porque .tabs-wrap tem altura fixa via CSS antigo. */ .cer-filtro{top:56px} /* fica abaixo das .tabs-wrap sticky no eternizze */ /* ============================================================================ DIA D / ROTEIRO — .dd-row + .dd-add + .share-l do mock (linhas 448-463). Portado pra ficar disponível quando reescrevermos o Checklist do dia com o layout novo. Por enquanto o CSS fica no repositório mas viewChecklist atual mantém seu HTML .dia-row (semântica diferente: lista de presença). ============================================================================ */ .dd-row{display:flex;align-items:center;gap:11px;background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:10px 13px;margin-bottom:7px} .dd-row.ok{opacity:.62} .dd-row.ok .tt{text-decoration:line-through} .dd-row .ck{flex:0 0 auto;width:23px;height:23px;border-radius:7px;border:2px solid var(--linha);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;transition:.15s} .dd-row.ok .ck{background:var(--verde);border-color:var(--verde)} .dd-row .tt{flex:1;font-size:.9rem;font-weight:600} .dd-row .hh{font-weight:700;color:var(--azul);font-size:.88rem;white-space:nowrap;font-variant-numeric:tabular-nums} .dd-add{display:flex;gap:8px;margin:4px 0 6px} .dd-add input{flex:1;padding:10px 12px;border:1px solid var(--linha);border-radius:10px;font-family:inherit;font-size:.9rem;background:var(--branco)} .dd-add input:focus{outline:none;border-color:var(--dourado)} .share-l{display:flex;align-items:center;gap:10px;background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:11px 13px;margin-bottom:8px;flex-wrap:wrap} .share-l .ic{font-size:1.1rem} .share-l .tx{flex:1;min-width:150px} .share-l .tx b{display:block;font-size:.9rem} .share-l .tx span{font-size:.76rem;color:var(--cinza)} .share-l .btn{flex:1 1 auto} /* ============================================================================ DATAS / TIMELINE — .tl (portal) + .mk (marcos) do mock (linhas 134-159 do portal-noiva.html). Portado pra uso quando reescrevermos a aba Datas. ============================================================================ */ .tl{position:relative;margin-left:8px;padding-left:26px} .tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--dourado-c),var(--linha))} .tl .ev{position:relative;padding:0 0 22px} .tl .ev::before{content:"";position:absolute;left:-26px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--branco);border:3px solid var(--dourado)} .tl .ev .hora{font-weight:700;color:var(--azul);font-size:.92rem} .tl .ev .tit{font-weight:600;margin-top:1px} .tl .ev .det{font-size:.86rem;color:var(--cinza)} .tl .fase-h{font-family:'Playfair Display',serif;font-weight:600;color:var(--azul);font-size:1.1rem;padding-bottom:12px} .tl .fase-h.festa{padding-top:10px} .mk{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--linha)} .mk:last-child{border-bottom:none} .mk.passado{opacity:.55} .mk .d{flex:0 0 54px;text-align:center;background:var(--creme);border:1px solid var(--linha);border-radius:10px;padding:6px 4px} .mk .d .dia{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:600;color:var(--azul);line-height:1} .mk .d .mes{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--cinza);margin-top:2px} .mk .t{flex:1;min-width:0} .mk .t b{display:block;font-weight:600} .mk .t span{font-size:.84rem;color:var(--cinza)} .mk .quando{flex:0 0 auto;font-size:.72rem;color:var(--dourado);font-weight:700;align-self:center;white-space:nowrap} /* ============================================================================ PORTAL NOIVA — foundation CSS (portal-noiva.html linhas 15-434). Escopado com body[data-perfil="noiva"] quando conflita com o admin. Ordem: hero cheio → tabs SVG → panels → seções (início, cerimonia, datas, musicas, pagamentos, fornecedores, equipe) → flutuantes. ============================================================================ */ /* Container principal da noiva (max-width menor que o admin) */ body[data-perfil="noiva"] .wrap-mock{max-width:760px;margin:0 auto;padding:0 16px} /* ===== HERO CHEIO (o "capa" do casamento) ===== */ body[data-perfil="noiva"] .hero{ background:linear-gradient(160deg,var(--azul) 0%,var(--azul-d) 100%); color:var(--branco); text-align:center; padding:30px 16px 26px; position:relative; overflow:hidden; border-bottom:3px solid var(--dourado); container-type:inline-size; min-height:auto; /* override do estilo.css antigo que tinha min-height:100vh */ } body[data-perfil="noiva"] .hero::after{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 50% -20%,rgba(217,184,106,.22),transparent 60%); pointer-events:none; } body[data-perfil="noiva"] .hero .logo, body[data-perfil="noiva"] .hero .hero-lua{display:inline-flex;align-items:center;gap:10px;margin-bottom:8px} body[data-perfil="noiva"] .hero .logo svg, body[data-perfil="noiva"] .hero .hero-lua{height:34px;width:auto} body[data-perfil="noiva"] .hero .selo, body[data-perfil="noiva"] .hero .brand-mark{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--dourado-c);font-weight:600;margin:0} body[data-perfil="noiva"] .hero .brand-mark .bm-1, body[data-perfil="noiva"] .hero .brand-mark .bm-2, body[data-perfil="noiva"] .hero .brand-mark .bm-dot{color:inherit} body[data-perfil="noiva"] .hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.5rem,10cqi,3.1rem);font-weight:600;margin:.15em 0 .05em;line-height:1.05;overflow-wrap:break-word;word-break:break-word;color:var(--branco)} body[data-perfil="noiva"] .hero h1 .amp{color:var(--dourado-c);font-style:italic;font-weight:500;padding:0 .12em} body[data-perfil="noiva"] .hero .info, body[data-perfil="noiva"] .hero .data-evento{font-size:clamp(.85rem,3.5cqi,1.02rem);opacity:.92;margin-top:.35em;color:var(--branco)} body[data-perfil="noiva"] .hero .info b, body[data-perfil="noiva"] .hero .data-evento b{color:var(--dourado-c);font-weight:600} /* Esconde botão "↓ jornada" antigo pra noiva (o mock não tem) */ body[data-perfil="noiva"] .hero-scroll{display:none} /* Início FIEL: esconde bloco legacy (#stats, .painel-h, #prox-eventos, #locais-grid, .locais-grid) porque agora o layout vem via .jornada-prog + .tarefa + .resumo-grid dentro de #galeria-noiva. Sub-navegação #visao-subnav também é ocultada — só serve pra admin. */ body[data-perfil="noiva"] #visao-geral .painel-h, body[data-perfil="noiva"] #stats, body[data-perfil="noiva"] #locais-grid, body[data-perfil="noiva"] #locais-h, body[data-perfil="noiva"] .proximos, body[data-perfil="noiva"] #visao-subnav{display:none !important} /* .saudacao vira .ola (mock): mesma fonte + tamanho */ body[data-perfil="noiva"] .saudacao{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--azul);margin-bottom:2px;font-weight:600} body[data-perfil="noiva"] .saudacao-sub{color:var(--cinza);font-size:.92rem;margin:2px 0 8px} /* Countdown do mock (.count .c .n .l) — o eternizze usa .countdown-box .cd-item; ambos convivem. O JS antigo continua populando .countdown-box; o CSS abaixo estiliza as duas variantes pra ficarem parecidas. */ body[data-perfil="noiva"] .count{display:flex;justify-content:center;gap:10px;margin:18px auto 2px;flex-wrap:wrap} body[data-perfil="noiva"] .count .c{background:rgba(255,255,255,.08);border:1px solid rgba(217,184,106,.3);border-radius:12px;min-width:60px;padding:9px 6px} body[data-perfil="noiva"] .count .n{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:600;color:#fff;line-height:1} body[data-perfil="noiva"] .count .l{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dourado-c);margin-top:4px} /* Alias visual: aplicar o mesmo estilo do .count aos .countdown-box existentes */ body[data-perfil="noiva"] .countdown-box{display:flex;justify-content:center;gap:10px;margin:18px auto 2px;flex-wrap:wrap} body[data-perfil="noiva"] .countdown-box .cd-item{background:rgba(255,255,255,.08);border:1px solid rgba(217,184,106,.3);border-radius:12px;min-width:60px;padding:9px 6px} body[data-perfil="noiva"] .countdown-box .cd-num{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:600;color:#fff;line-height:1} body[data-perfil="noiva"] .countdown-box .cd-lbl{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dourado-c);margin-top:4px} /* Ornamento dourado (linha + losango) */ body[data-perfil="noiva"] .orn{width:130px;height:1px;margin:16px auto 0;background:linear-gradient(90deg,transparent,var(--dourado-c),transparent);position:relative} body[data-perfil="noiva"] .orn::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;transform:translateX(-50%) rotate(45deg);background:var(--dourado-c)} /* Rodapé */ body[data-perfil="noiva"] .foot{text-align:center;padding:26px 16px;color:var(--cinza);font-size:.78rem;border-top:1px solid var(--linha);background:var(--branco)} body[data-perfil="noiva"] .foot b{color:var(--dourado)} /* ===== TABS COM ÍCONES SVG ===== */ body[data-perfil="noiva"] .tabs-wrap{position:sticky;top:0;z-index:30;background:var(--branco);border-bottom:1px solid var(--linha);box-shadow:0 2px 10px rgba(0,0,0,.03);padding:0} body[data-perfil="noiva"] .tabs{max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;padding:0} body[data-perfil="noiva"] .tab-btn{flex:1 1 auto;min-width:78px;text-align:center;padding:12px 12px;font-weight:600;font-size:.84rem;color:var(--cinza);background:none;border:none;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:.15s;font-family:inherit;position:relative;border-radius:0} body[data-perfil="noiva"] .tab-btn.ativa{color:var(--azul);border-bottom-color:var(--dourado);background:none;box-shadow:none} body[data-perfil="noiva"] .tab-btn:hover{background:none} body[data-perfil="noiva"] .tab-btn .tab-icone{display:block;font-size:1.15rem;margin-bottom:1px} body[data-perfil="noiva"] .tab-btn .tab-icone svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block} /* ===== PANEL padrão (containers das abas) ===== */ body[data-perfil="noiva"] .tab-painel{display:none;padding:22px 0 90px;animation:none} body[data-perfil="noiva"] .tab-painel.ativo{display:block} body[data-perfil="noiva"] main{max-width:760px;margin:0 auto;padding:0 16px} /* ===== INÍCIO NOIVA ===== */ body[data-perfil="noiva"] .ola{font-size:1.5rem;color:var(--azul);margin-bottom:2px;font-family:'Playfair Display',serif;font-weight:600} body[data-perfil="noiva"] .jornada-prog{display:flex;align-items:center;gap:12px;margin:14px 0 18px} body[data-perfil="noiva"] .jornada-prog .barra{flex:1;height:8px;border-radius:8px;background:#ece7da;overflow:hidden} body[data-perfil="noiva"] .jornada-prog .barra i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--dourado),var(--dourado-c));transition:width .4s ease} body[data-perfil="noiva"] .jornada-prog span{font-size:.82rem;color:var(--cinza);white-space:nowrap} body[data-perfil="noiva"] .jornada-prog span b{color:var(--verde)} body[data-perfil="noiva"] .tarefa{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;margin-bottom:10px;cursor:pointer;transition:.15s;position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra)} body[data-perfil="noiva"] .tarefa:hover{border-color:var(--dourado);transform:translateY(-1px)} body[data-perfil="noiva"] .tarefa .ic{flex:0 0 42px;height:42px;border-radius:12px;background:radial-gradient(circle at 30% 25%,var(--dourado-suave),var(--dourado-c));display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} body[data-perfil="noiva"] .tarefa.feita .ic{background:var(--verde-bg);box-shadow:none} body[data-perfil="noiva"] .tarefa .tx{flex:1;min-width:0} body[data-perfil="noiva"] .tarefa .tx b{display:block;font-weight:600;font-size:.98rem} body[data-perfil="noiva"] .tarefa .tx span{font-size:.83rem;color:var(--cinza);display:block;margin-top:1px} body[data-perfil="noiva"] .tarefa .aba-lado{flex:0 0 auto;align-self:center;color:var(--dourado);font-size:1.1rem} body[data-perfil="noiva"] .resumo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px} body[data-perfil="noiva"] .resumo-grid .card{padding:13px 14px;cursor:pointer;transition:.15s} body[data-perfil="noiva"] .resumo-grid .card:hover{border-color:var(--dourado)} body[data-perfil="noiva"] .resumo-grid .rl{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--cinza);font-weight:700} body[data-perfil="noiva"] .resumo-grid .rv{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:600;color:var(--azul);margin-top:3px;line-height:1.25} body[data-perfil="noiva"] .resumo-grid .rs{font-size:.76rem;color:var(--cinza);margin-top:2px} body[data-perfil="noiva"] .equipe-mini{margin-top:24px} body[data-perfil="noiva"] .equipe-mini h3{font-size:1.1rem;color:var(--azul);margin-bottom:10px;font-family:'Playfair Display',serif} /* ===== CERIMÔNIA NOIVA ===== */ body[data-perfil="noiva"] .cer-rito{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#fdf9ef,#f6efdd);border:1px solid var(--dourado-suave);border-radius:var(--r);padding:13px 16px;margin-bottom:16px} body[data-perfil="noiva"] .cer-rito .ico{font-size:1.5rem} body[data-perfil="noiva"] .cer-rito b{font-family:'Playfair Display',serif;color:var(--azul);font-size:1.05rem} body[data-perfil="noiva"] .cer-rito span{display:block;font-size:.78rem;color:var(--cinza)} body[data-perfil="noiva"] .cer-precisa{background:linear-gradient(135deg,#fff8e9,#fdf2d6);border:1px solid var(--dourado-c);border-radius:var(--r);padding:15px 16px;margin-bottom:20px} body[data-perfil="noiva"] .cer-precisa h3{font-family:'Playfair Display',serif;color:#7a5b12;font-size:1.08rem;margin-bottom:3px} body[data-perfil="noiva"] .cer-precisa p{font-size:.82rem;color:var(--cinza);margin-bottom:11px} body[data-perfil="noiva"] .cer-precisa-item{display:flex;align-items:center;gap:11px;background:var(--branco);border:1px solid var(--dourado-suave);border-radius:11px;padding:11px 13px;margin-bottom:8px;cursor:pointer;transition:.14s;width:100%;text-align:left;font-family:inherit} body[data-perfil="noiva"] .cer-precisa-item:last-child{margin-bottom:0} body[data-perfil="noiva"] .cer-precisa-item:hover{border-color:var(--dourado);transform:translateY(-1px)} body[data-perfil="noiva"] .cer-precisa-item .em{font-size:1.3rem;flex:0 0 auto} body[data-perfil="noiva"] .cer-precisa-item .tx{flex:1;min-width:0} body[data-perfil="noiva"] .cer-precisa-item .tx b{display:block;font-size:.92rem;color:var(--carvao)} body[data-perfil="noiva"] .cer-precisa-item .tx span{font-size:.76rem;color:var(--cinza)} body[data-perfil="noiva"] .cer-precisa-item .seta{color:var(--dourado);font-size:1.15rem} body[data-perfil="noiva"] .cer-mom{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra);padding:15px 16px;margin-bottom:12px;position:relative;overflow:hidden} body[data-perfil="noiva"] .cer-mom::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--dourado-c)} body[data-perfil="noiva"] .cer-mom.tem-escolha::before{background:var(--dourado)} body[data-perfil="noiva"] .cer-mom.entrada::before{background:#9db5e0} body[data-perfil="noiva"] .cer-mom.rito::before{background:#d6a9c6} body[data-perfil="noiva"] .cer-mom.saida::before{background:#a9d6bf} body[data-perfil="noiva"] .cer-mom-top{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;flex-wrap:wrap} body[data-perfil="noiva"] .cer-mom-n{font-family:'Playfair Display',serif;color:var(--dourado);font-weight:700;font-size:1rem} body[data-perfil="noiva"] .cer-mom-tit{font-family:'Playfair Display',serif;font-size:1.14rem;color:var(--azul);font-weight:600;line-height:1.2} body[data-perfil="noiva"] .cer-mom-pessoas{font-size:.82rem;color:var(--cinza);margin-bottom:8px} body[data-perfil="noiva"] .cer-mom-pessoas b{color:var(--carvao);font-weight:600} body[data-perfil="noiva"] .cer-bloco{margin-top:10px;padding-top:10px;border-top:1px dashed var(--linha)} body[data-perfil="noiva"] .cer-bloco-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cinza);font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:5px} body[data-perfil="noiva"] .cer-def{display:flex;align-items:center;gap:10px;background:#f7faf7;border:1px solid #cde7d5;border-radius:10px;padding:10px 12px} body[data-perfil="noiva"] .cer-def .em{font-size:1.15rem} body[data-perfil="noiva"] .cer-def .tx{flex:1;min-width:0} body[data-perfil="noiva"] .cer-def .tx b{display:block;font-size:.94rem} body[data-perfil="noiva"] .cer-def .tx span{font-size:.78rem;color:var(--cinza)} body[data-perfil="noiva"] .cer-def .play{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--azul);color:#fff;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center} body[data-perfil="noiva"] .cer-op{display:flex;align-items:center;gap:11px;border:1.5px solid var(--linha);border-radius:11px;padding:11px 13px;margin-bottom:8px;cursor:pointer;transition:.14s;background:var(--branco);width:100%;text-align:left;font-family:inherit} body[data-perfil="noiva"] .cer-op:hover{border-color:var(--dourado);background:#fdfbf5} body[data-perfil="noiva"] .cer-op.escolhida{border-color:var(--verde);background:var(--verde-bg)} body[data-perfil="noiva"] .cer-op .radio{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--dourado-c);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff} body[data-perfil="noiva"] .cer-op.escolhida .radio{background:var(--verde);border-color:var(--verde)} body[data-perfil="noiva"] .cer-op .tx{flex:1;min-width:0} body[data-perfil="noiva"] .cer-op .tx b{display:block;font-size:.94rem} body[data-perfil="noiva"] .cer-op .tx span{font-size:.78rem;color:var(--cinza)} body[data-perfil="noiva"] .cer-op .ouvir{flex:0 0 auto;background:none;border:1px solid var(--linha);border-radius:8px;padding:6px 10px;font-size:.76rem;color:var(--azul);cursor:pointer;font-family:inherit;font-weight:600} body[data-perfil="noiva"] .cer-ver{display:flex;align-items:center;gap:9px;border:1.5px solid var(--linha);border-radius:11px;padding:10px 12px;margin-bottom:7px;cursor:pointer;background:var(--branco);width:100%;text-align:left;font-family:inherit} body[data-perfil="noiva"] .cer-ver.escolhida{border-color:var(--verde);background:var(--verde-bg)} body[data-perfil="noiva"] .cer-ver .radio{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--dourado-c)} body[data-perfil="noiva"] .cer-ver.escolhida .radio{background:var(--verde);border-color:var(--verde)} body[data-perfil="noiva"] .cer-ver .tx{flex:1;min-width:0} body[data-perfil="noiva"] .cer-ver .tx b{font-size:.9rem} body[data-perfil="noiva"] .cer-ver .tx span{display:block;font-size:.74rem;color:var(--cinza)} body[data-perfil="noiva"] .cer-mini-btn{background:none;border:1px solid var(--linha);border-radius:9px;padding:8px 12px;font-size:.8rem;color:var(--azul);cursor:pointer;font-family:inherit;font-weight:600;display:inline-flex;align-items:center;gap:6px} body[data-perfil="noiva"] .cer-mini-btn:hover{border-color:var(--dourado)} body[data-perfil="noiva"] .cer-badge-voce{background:var(--verde-bg);color:var(--verde);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:20px} body[data-perfil="noiva"] .cer-pend-pill{background:var(--ambar-bg);color:var(--ambar);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:20px} body[data-perfil="noiva"] .cer-ops-hint{font-size:.8rem;color:#7a5b12;background:var(--dourado-suave);border-radius:8px;padding:7px 11px;margin-bottom:8px;display:flex;align-items:center;gap:6px} /* ===== PAGAMENTOS NOIVA ===== */ body[data-perfil="noiva"] .pg-topo{padding:16px;margin-bottom:16px} body[data-perfil="noiva"] .pg-global{background:linear-gradient(135deg,var(--azul),var(--azul-d));color:#fff;border:none;padding:16px;border-radius:var(--r);box-shadow:var(--sombra);margin-bottom:16px} body[data-perfil="noiva"] .pg-global .pg-tit{color:#fff} body[data-perfil="noiva"] .pg-global .pg-tit span{color:var(--dourado-c)} body[data-perfil="noiva"] .pg-global .pg-nums .bl{color:rgba(255,255,255,.75)} body[data-perfil="noiva"] .pg-global .pg-nums .bv{color:#fff} body[data-perfil="noiva"] .pg-global .pg-nums .bv.ok{color:#8fe0ab} body[data-perfil="noiva"] .pg-global .pg-barra{background:rgba(255,255,255,.18)} body[data-perfil="noiva"] .pg-global .pg-prox{color:var(--dourado-c)} body[data-perfil="noiva"] .pg-nums{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between} body[data-perfil="noiva"] .pg-nums .b{min-width:31%} body[data-perfil="noiva"] .pg-nums .bl{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--cinza);font-weight:700} body[data-perfil="noiva"] .pg-nums .bv{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:600;color:var(--azul);margin-top:2px} body[data-perfil="noiva"] .pg-nums .bv.ok{color:var(--verde)} body[data-perfil="noiva"] .parc{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--linha)} body[data-perfil="noiva"] .parc:last-child{border-bottom:none} body[data-perfil="noiva"] .parc .px{flex:1;min-width:0} body[data-perfil="noiva"] .parc .px b{font-weight:600;display:block} body[data-perfil="noiva"] .parc .px span{font-size:.78rem;color:var(--cinza)} body[data-perfil="noiva"] .parc .pv{text-align:right} body[data-perfil="noiva"] .parc .pv .v{font-weight:700;color:var(--azul)} body[data-perfil="noiva"] .parc .pv .p{font-size:.75rem;color:var(--verde)} body[data-perfil="noiva"] .lanc{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--linha);font-size:.9rem} body[data-perfil="noiva"] .lanc:last-child{border-bottom:none} body[data-perfil="noiva"] .lanc .lic{flex:0 0 34px;height:34px;border-radius:50%;background:var(--verde-bg);color:var(--verde);display:flex;align-items:center;justify-content:center;font-size:.95rem} body[data-perfil="noiva"] .lanc .lx{flex:1;min-width:0} body[data-perfil="noiva"] .lanc .lx b{font-weight:600} body[data-perfil="noiva"] .lanc .lx span{display:block;font-size:.78rem;color:var(--cinza)} body[data-perfil="noiva"] .lanc .comp{flex:0 0 auto;font-size:.76rem;font-weight:600;color:var(--azul);background:var(--creme);border:1px solid var(--linha);border-radius:8px;padding:5px 9px;text-decoration:none;display:inline-flex;align-items:center;gap:4px} body[data-perfil="noiva"] .h3-bloco{font-size:1.05rem;color:var(--azul);margin:20px 0 10px;font-family:'Playfair Display',serif} body[data-perfil="noiva"] .pg-tit{font-size:.82rem;font-weight:700;color:var(--azul);margin-bottom:10px} body[data-perfil="noiva"] .pg-tit span{font-weight:500;color:var(--cinza);font-size:.76rem} body[data-perfil="noiva"] .pforn{padding:14px 16px;margin-bottom:10px;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra)} body[data-perfil="noiva"] .pforn .ph{display:flex;align-items:flex-start;gap:8px;margin-bottom:9px} body[data-perfil="noiva"] .pforn .ph b{font-size:.98rem} body[data-perfil="noiva"] .pforn .cat{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dourado);font-weight:700;display:block} body[data-perfil="noiva"] .pforn .nums{display:flex;gap:8px;justify-content:space-between;font-size:.76rem;color:var(--cinza);flex-wrap:wrap} body[data-perfil="noiva"] .pforn .nums b{display:block;color:var(--azul);font-size:.94rem} body[data-perfil="noiva"] .pforn .barra{height:7px;border-radius:8px;background:#ece7da;overflow:hidden;margin-top:9px} body[data-perfil="noiva"] .pforn .barra i{display:block;height:100%;background:linear-gradient(90deg,var(--verde),#37945d)} body[data-perfil="noiva"] .pforn .venc{font-size:.78rem;color:var(--cinza);margin-top:8px} body[data-perfil="noiva"] .pforn .venc b{color:var(--azul)} body[data-perfil="noiva"] .alerta{display:flex;gap:12px;align-items:center;padding:13px 15px;margin-bottom:14px;border-left:3px solid var(--ambar);background:var(--ambar-bg);cursor:pointer;border-radius:0 var(--rs) var(--rs) 0} body[data-perfil="noiva"] .alerta.venc{border-left-color:var(--vermelho);background:var(--vermelho-bg)} body[data-perfil="noiva"] .alerta .aic{flex:0 0 36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem} body[data-perfil="noiva"] .alerta .atx{flex:1;min-width:0;font-size:.88rem} body[data-perfil="noiva"] .alerta .atx b{display:block} body[data-perfil="noiva"] .alerta .atx span{color:var(--cinza);font-size:.8rem} body[data-perfil="noiva"] .alerta .aval{font-weight:700;color:var(--azul);white-space:nowrap} body[data-perfil="noiva"] .pg-prox{margin-top:10px;font-size:.82rem;color:var(--cinza)} body[data-perfil="noiva"] .pg-prox b{color:var(--azul)} /* ===== FORNECEDORES NOIVA (variante — usa .fic ícone) ===== */ body[data-perfil="noiva"] .prog{font-size:.84rem;color:var(--cinza);margin-bottom:14px} body[data-perfil="noiva"] .prog b{color:var(--verde)} body[data-perfil="noiva"] .grupo .gh{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dourado);font-weight:700;margin:18px 0 8px} body[data-perfil="noiva"] .forn{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--linha);border-radius:12px;background:var(--branco);margin-bottom:8px} body[data-perfil="noiva"] .forn .fic{flex:0 0 30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;background:var(--ambar-bg)} body[data-perfil="noiva"] .forn.feito .fic{background:var(--verde-bg)} body[data-perfil="noiva"] .forn .meta{flex:1;min-width:0} body[data-perfil="noiva"] .forn .meta b{font-weight:600;display:block} body[data-perfil="noiva"] .forn .meta .sub{font-size:.8rem;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-perfil="noiva"] .forn .meta .forn-pag{color:var(--azul);font-weight:600;text-decoration:none} body[data-perfil="noiva"] .forn .arq{flex:0 0 auto;font-size:.78rem;font-weight:600;color:var(--azul);background:var(--creme);border:1px solid var(--linha);border-radius:8px;padding:6px 9px;text-decoration:none;display:inline-flex;align-items:center;gap:5px} /* ===== MÚSICAS NOIVA (variante — usa .mic ícone circular) ===== */ body[data-perfil="noiva"] .mus{padding:14px 16px;margin-bottom:10px;display:flex;gap:13px;align-items:flex-start;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra)} body[data-perfil="noiva"] .mus .mic{flex:0 0 40px;height:40px;border-radius:50%;background:var(--azul-bg);display:flex;align-items:center;justify-content:center;font-size:1.05rem} body[data-perfil="noiva"] .mus.confirmada .mic{background:var(--verde-bg)} body[data-perfil="noiva"] .mus .mx{flex:1;min-width:0} body[data-perfil="noiva"] .mus .momento{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dourado);font-weight:700} body[data-perfil="noiva"] .mus .titulo{font-weight:600;margin-top:1px} body[data-perfil="noiva"] .mus .titulo.sem{color:var(--cinza);font-weight:500;font-style:italic} body[data-perfil="noiva"] .mus .sub{font-size:.82rem;color:var(--cinza)} body[data-perfil="noiva"] .mus .sub a{color:var(--azul);font-weight:600;text-decoration:none} body[data-perfil="noiva"] .mus .lado{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px} body[data-perfil="noiva"] .ops{margin-top:8px;display:flex;flex-direction:column;gap:6px} body[data-perfil="noiva"] .ops .op{text-align:left;background:var(--creme);border:1px solid var(--linha);border-radius:10px;padding:8px 12px;font-family:inherit;font-size:.85rem;cursor:pointer;transition:.13s} body[data-perfil="noiva"] .ops .op:hover{border-color:var(--dourado)} body[data-perfil="noiva"] .ops .op b{color:var(--azul)} body[data-perfil="noiva"] .ops-hint{font-size:.72rem;color:var(--cinza);font-style:italic} /* ===== EQUIPE NOIVA (grid 2 colunas centralizado) ===== */ body[data-perfil="noiva"] .team{display:grid;grid-template-columns:1fr 1fr;gap:12px} body[data-perfil="noiva"] .mem{padding:16px;text-align:center;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra)} body[data-perfil="noiva"] .mem .av{width:56px;height:56px;border-radius:50%;margin:0 auto 10px;background:linear-gradient(135deg,var(--azul),var(--dourado));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:600} body[data-perfil="noiva"] .mem b{display:block;font-weight:600} body[data-perfil="noiva"] .mem .fn{font-size:.78rem;color:var(--dourado);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:2px 0 8px} body[data-perfil="noiva"] .mem .zap{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;color:var(--verde);font-weight:600;text-decoration:none;background:var(--verde-bg);border-radius:20px;padding:5px 12px} @media(min-width:560px){ body[data-perfil="noiva"] .team{grid-template-columns:1fr 1fr 1fr} body[data-perfil="noiva"] .resumo-grid{grid-template-columns:1fr 1fr 1fr} } /* ===== MOBILE tweaks (portal-noiva.html 61-75) ===== */ @media (max-width:560px){ body[data-perfil="noiva"] .hero{padding:16px 14px 14px} body[data-perfil="noiva"] .hero .logo{margin-bottom:4px} body[data-perfil="noiva"] .hero .logo svg{height:26px} body[data-perfil="noiva"] .hero .selo{font-size:.6rem;letter-spacing:.24em} body[data-perfil="noiva"] .count{margin:11px auto 0;gap:7px} body[data-perfil="noiva"] .count .c{min-width:52px;padding:6px 5px} body[data-perfil="noiva"] .count .n{font-size:1.2rem} body[data-perfil="noiva"] .count .l{font-size:.54rem;margin-top:2px} body[data-perfil="noiva"] .countdown-box{margin:11px auto 0;gap:7px} body[data-perfil="noiva"] .countdown-box .cd-item{min-width:52px;padding:6px 5px} body[data-perfil="noiva"] .countdown-box .cd-num{font-size:1.2rem} body[data-perfil="noiva"] .countdown-box .cd-lbl{font-size:.54rem;margin-top:2px} body[data-perfil="noiva"] .orn{margin:8px auto} body[data-perfil="noiva"] .tab-btn{padding:6px 7px;font-size:.75rem;min-width:66px} body[data-perfil="noiva"] .tabs{justify-content:center} body[data-perfil="noiva"] .tab-btn .tab-icone{margin-bottom:0} body[data-perfil="noiva"] .tab-btn .tab-icone svg{width:19px;height:19px} } /* Rótulo de filtro pequeno */ .cer-filtro-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cinza);font-weight:700;margin:2px 0 4px} /* ============================================================================ PAGAMENTOS — port fiel do renderPagamentos() do mock (linhas 1681-1774 do paineladmin.html) + CSS (linhas 203-236, 389-418). ============================================================================ */ .stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px} .stat{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);padding:13px 16px;box-shadow:var(--sombra)} .stat .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--cinza);font-weight:700} .stat .v{font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:600;color:var(--azul);margin-top:2px} .stat .v.ok{color:var(--verde)} .pg-barra{height:9px;border-radius:8px;background:#ece7da;overflow:hidden;margin:2px 0 18px} .pg-barra.sm{height:6px;margin:6px 0 10px} .pg-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--verde),#37945d);transition:width .4s} .pg-forn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-top:4px} .pg-forn{border:1px solid var(--linha);border-radius:14px;background:#fff;padding:14px 16px;box-shadow:0 1px 2px rgba(60,40,20,.04)} .pg-forn-h{display:flex;align-items:center;gap:10px;margin-bottom:10px} .pg-forn-nome{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .pg-forn-nome b{font-size:1.02rem;color:var(--carvao);line-height:1.2} .pg-forn-cat{font-size:.72rem;color:var(--cinza);letter-spacing:.02em} .pg-forn-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:2px} .pg-forn-nums .l{display:block;font-size:.68rem;color:var(--cinza);text-transform:uppercase;letter-spacing:.04em} .pg-forn-nums .v{font-size:1.02rem;font-weight:700;color:var(--carvao)} .pg-forn-nums .v.ok{color:var(--verde)} .pg-forn-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .pg-forn-acts .btn{flex:1 1 auto} .pg-semfin{display:flex;flex-direction:column;gap:6px} .pg-semfin-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px dashed var(--linha);border-radius:10px;background:#fbf9f4} .pg-semfin-row .meta{flex:1;min-width:0} .pg-semfin-row .meta b{display:block;font-size:.92rem;color:var(--carvao)} .pg-semfin-row .meta .sub{font-size:.74rem;color:var(--cinza)} .bloco-h{margin-top:20px;margin-bottom:6px} .bloco-h h4{font-family:'Playfair Display',serif;color:var(--azul);font-size:1.05rem} /* Quando o admin OU a noiva renderiza o layout novo em #pag-mock, esconde os blocos antigos. Ambos os perfis agora usam #pag-mock (Onda 7 · 18/jul). */ #pag-mock:not(:empty) ~ .pag-legado, #pag-mock:not(:empty) ~ .so-noiva-bloco, #pag-mock:not(:empty) ~ .so-noiva{ display:none !important } /* Esconde o painel-h "Financeiro" antigo pra noiva — vem no card global do mock */ body[data-perfil="noiva"] #pagamentos .so-noiva-bloco{display:none !important} body[data-perfil="noiva"] #pagamentos .so-noiva{display:none !important} /* Botão CTA "Avisar pagamento" pra noiva — verde chamativo */ body[data-perfil="noiva"] .btn.btn-g{background:var(--verde);color:#fff;border:none} body[data-perfil="noiva"] .btn.btn-g:hover{filter:brightness(1.08)} body[data-perfil="noiva"] .btn-full{width:100%;padding:12px 14px;border-radius:12px;font-weight:700;font-size:.92rem;font-family:inherit;cursor:pointer} body[data-perfil="noiva"] .h3-bloco{font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--azul);margin:18px 0 8px;font-weight:600} body[data-perfil="noiva"] .pg-tit{font-family:'Playfair Display',serif;color:var(--azul);font-size:1.02rem;font-weight:600;margin-bottom:10px} body[data-perfil="noiva"] .pg-tit span{color:var(--cinza);font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:400} body[data-perfil="noiva"] .pg-barra{background:#ece7da;height:8px;border-radius:8px;overflow:hidden;margin:10px 0 6px} body[data-perfil="noiva"] .pg-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--dourado),var(--dourado-c))} body[data-perfil="noiva"] .pforn .ph{display:flex;align-items:center;gap:10px;margin-bottom:10px} body[data-perfil="noiva"] .pforn .ph .cat{font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:var(--cinza);display:block;font-weight:700} body[data-perfil="noiva"] .pforn .ph b{font-family:'Playfair Display',serif;color:var(--azul);font-size:1rem;display:block} body[data-perfil="noiva"] .pforn .nums{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--cinza)} body[data-perfil="noiva"] .pforn .nums div{display:flex;flex-direction:column;gap:1px} body[data-perfil="noiva"] .pforn .nums b{font-family:'Playfair Display',serif;font-weight:600;color:var(--carvao);font-size:1rem} /* ============================================================================ FORNECEDORES — port fiel do renderFornecedores() do mock (linhas 2409- 2473 de paineladmin.html) + CSS (linhas 371-387). Estrutura: 2 filtros (.pg-filtro categoria + .pg-filtro status) + grupos com .gh header + .forn cards flex horizontal com .ck check + .meta + .forn-st select + .btn Abrir + .ico-btn 🗑. ============================================================================ */ .gh{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dourado);font-weight:700;margin:16px 0 8px} .forn{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--linha);border-radius:12px;background:var(--branco);margin-bottom:7px} .forn .ck{flex:0 0 auto;width:23px;height:23px;border-radius:7px;border:2px solid var(--linha);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;transition:.15s} .forn.feito .ck{background:var(--verde);border-color:var(--verde)} .forn .meta{flex:1;min-width:0} .forn .meta.forn-abrir{cursor:pointer;border-radius:8px;padding:2px 4px;margin:-2px -4px;transition:background .12s} .forn .meta.forn-abrir:hover{background:#f6f0e2} .forn .meta b{font-weight:600;display:block;font-size:.92rem} .forn .meta .sub{font-size:.78rem;color:var(--cinza)} .forn .forn-st{padding:5px 8px;border:1px solid var(--linha);border-radius:8px;font-family:inherit;font-size:.76rem;font-weight:600;background:#fff;color:var(--carvao);cursor:pointer} .forn.feito .forn-st{color:var(--verde);border-color:#c9e2c9;background:#f4faf4} .forn .arqs{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px} @media (max-width:640px){ .forn{flex-wrap:wrap} .forn .meta{flex-basis:calc(100% - 40px)} .forn .forn-st, .forn .btn, .forn .ico-btn{margin-left:auto} } /* Esconde legado quando #forn-mock preenchido */ body[data-perfil="patricia"] #forn-mock:not(:empty) ~ .forn-legado{ display:none !important } /* ============================================================================ CONTRATO — port fiel do renderContrato() do mock (paineladmin.html linhas 552-605). Foundation VERBATIM. Reset das classes .ctr-* que eu tinha inventado na Onda 5 (Fase C mínima) — as classes CERTAS estão aqui, com o CSS do mock direto. ============================================================================ */ .ctr-status{display:flex;gap:12px;align-items:center;background:var(--branco);border:1px solid var(--linha);border-left:4px solid var(--dourado);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;box-shadow:var(--sombra)} .ctr-status .ico{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--dourado-suave);display:flex;align-items:center;justify-content:center;font-size:1.5rem} .ctr-status .tx{flex:1;min-width:0} .ctr-status .tx b{display:block;font-family:'Playfair Display',serif;color:var(--azul);font-size:1.05rem;line-height:1.2} .ctr-status .tx span{color:var(--cinza);font-size:.82rem;display:block;margin-top:2px} .ctr-status .pill{align-self:flex-start} .ctr-blocos{display:grid;grid-template-columns:1fr;gap:14px} .ctr-bloco{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);padding:16px;box-shadow:var(--sombra)} .ctr-bloco > h4{font-family:'Playfair Display',serif;color:var(--azul);font-size:1.05rem;line-height:1.15;font-weight:600} .ctr-bloco > .sub{color:var(--cinza);font-size:.8rem;margin:2px 0 12px} .ctr-bloco .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .ctr-kvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 16px;background:var(--creme);border:1px solid var(--linha);border-radius:10px;padding:12px 14px} .ctr-kvgrid > div{display:flex;flex-direction:column;gap:1px} .ctr-kvgrid > div > b{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--cinza);font-weight:700} .ctr-kvgrid > div > span{font-size:.9rem;color:var(--carvao);word-break:break-word} .ctr-kvgrid > div > span.vazio{color:var(--cinza);font-style:italic;font-size:.83rem;background:none;border:none;padding:0;text-align:left;display:inline} /* Barra sticky de fases (o CSS meu antigo usava .ctr-step; o mock é .step nested) */ .ctr-fase{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;position:sticky;top:0;z-index:25;background:var(--creme);padding:8px 6px;border-radius:10px;box-shadow:0 6px 12px -8px rgba(18,40,90,.15)} .ctr-fase .step{flex:1 1 auto;min-width:130px;padding:8px 10px;border:1px solid var(--linha);border-radius:10px;background:var(--branco);font-size:.8rem;color:var(--cinza);display:flex;align-items:center;gap:7px;cursor:pointer;transition:.15s;font-family:inherit} .ctr-fase .step:hover{border-color:var(--dourado);color:var(--carvao);transform:translateY(-1px)} .ctr-fase .step:focus-visible{outline:2px solid var(--dourado);outline-offset:2px} .ctr-fase .step.ok{background:var(--verde-bg);border-color:var(--verde);color:var(--verde);font-weight:700} .ctr-fase .step.cur{background:var(--dourado-suave);border-color:var(--dourado);color:var(--ambar);font-weight:700} .ctr-fase .step .d{width:22px;height:22px;border-radius:50%;background:var(--linha);color:var(--cinza);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex:0 0 auto} .ctr-fase .step.ok .d{background:var(--verde);color:#fff} .ctr-fase .step.cur .d{background:var(--dourado);color:#fff} .ctr-contratada{background:linear-gradient(135deg,rgba(184,146,63,.08),rgba(184,146,63,.02));border:1px solid var(--dourado-c);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .ctr-contratada .badge-c{flex:0 0 auto;background:var(--dourado);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:8px;align-self:flex-start} .ctr-contratada .info{flex:1;min-width:0;font-size:.86rem;line-height:1.5} .ctr-contratada .info b{font-family:'Playfair Display',serif;color:var(--azul);font-size:1.05rem;display:block;margin-bottom:2px;font-weight:600} .ctr-contratada .info small{color:var(--cinza);font-size:.78rem;display:block;margin-top:3px} /* Selo obrigatório/opcional */ .selo-req{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--verde-bg);color:var(--verde);padding:2px 7px;border-radius:8px;vertical-align:middle} .selo-opc{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--linha);color:var(--cinza);padding:2px 7px;border-radius:8px;vertical-align:middle} /* Reset das classes antigas .ctr-panel/.ctr-step/.ctr-btn/.ctr-badge-tipo/ .ctr-acoes que eu tinha inventado na Onda 5 — as classes CERTAS do mock estão acima. Deixo as antigas visualmente sinalizando "esse era o layout errado; foi substituído pelo painel-status certo abaixo": zero altura. */ .ctr-panel > .ctr-fase:not(.step){ /* mantém a versão certa */ } .ctr-step-old{display:none} /* placeholder — nada usa esse nome */ /* ============================================================================ HOME ADMIN (painel.html · lista de casamentos) — port fiel do renderHome() do mock (paineladmin.html linhas 82-108, 511-513). ============================================================================ */ .wrap-mock{max-width:1020px;margin:0 auto;padding:22px 18px 90px} .head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap} .head h2{font-size:1.55rem;color:var(--azul);font-family:'Playfair Display',serif;font-weight:600} .head .sp{flex:1} .head .busca{padding:10px 14px;border:1px solid var(--linha);border-radius:11px;font-family:inherit;font-size:.9rem;background:#fff;min-width:200px} .head .busca:focus{outline:none;border-color:var(--dourado)} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px} .kpi{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);padding:13px 16px;box-shadow:var(--sombra)} .kpi .n{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:600;color:var(--azul);line-height:1.15} .kpi .l{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--cinza);margin-top:3px;font-weight:600} .grid-mock{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px} .cas{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);padding:16px;box-shadow:var(--sombra);position:relative;overflow:hidden;cursor:pointer;transition:.16s;text-align:left;font-family:inherit;display:block;width:100%;color:inherit;text-decoration:none} .cas::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--dourado)} .cas:hover{border-color:var(--dourado);transform:translateY(-2px)} .cas h3{font-size:1.15rem;color:var(--azul);font-family:'Playfair Display',serif;font-weight:600;line-height:1.2} .cas h3 .amp{color:var(--dourado);font-style:italic;padding:0 .1em} .cas .meta{font-size:.8rem;color:var(--cinza);margin:3px 0 10px} .cas .tags{display:flex;flex-wrap:wrap;gap:6px} .cas .cd{margin-top:11px;font-size:.76rem;color:var(--cinza);border-top:1px solid var(--linha);padding-top:9px;display:flex;justify-content:space-between;align-items:flex-end} .cas .cd b{color:var(--azul);font-family:'Playfair Display',serif;font-size:.98rem} .cas .abrir{color:var(--dourado);font-weight:700;font-size:.8rem} .cas .dcount{color:var(--dourado);font-weight:700;font-family:'DM Sans',sans-serif;font-size:.72rem;display:block;margin-top:2px} @media(max-width:640px){ .wrap-mock{padding:16px 13px 96px} .head h2{font-size:1.3rem;width:100%} .head .busca{flex:1 1 100%;order:3;min-width:0} .kpis{grid-template-columns:1fr 1fr;gap:9px} .kpi{padding:11px 13px} .grid-mock{grid-template-columns:1fr} } /* Tabela genérica (usada dentro dos cards de pagamento e outras telas) */ .tbl{width:100%;border-collapse:collapse;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)} .tbl-wrap{overflow-x:auto;border-radius:var(--r)} .tbl th{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cinza);text-align:left;padding:9px 12px;background:#f1ece0;border-bottom:1px solid var(--linha);white-space:nowrap;font-weight:700} .tbl td{padding:10px 12px;border-bottom:1px solid var(--linha);font-size:.88rem;vertical-align:middle} .tbl tr:last-child td{border-bottom:none} .tbl tr:hover td{background:#fcf9f1} .tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums} .tbl .acts{white-space:nowrap;text-align:right} .tbl.mini{font-size:.8rem} .tbl.mini th{font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:var(--cinza)} .tbl.mini td,.tbl.mini th{padding:5px 8px} /* ============================================================================ SHELL ADMIN (painel.html) — Onda 7 (18/jul, playbook §36). FIEL ao mock paineladmin.html linhas 69-79 + 923-940: .top (barra sticky com gradient azul + marca + who + botões) e .wrap (max-width 1020). Aplicado só em painel.html — .topo é exclusivo dessa página. O painel.html tem:
…
…
============================================================================ */ .topo{ background:linear-gradient(135deg,var(--azul),var(--azul-d)); color:#fff; border-bottom:3px solid var(--dourado); position:sticky;top:0;z-index:40; display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:12px 18px; max-width:1020px;margin:0 auto; box-sizing:border-box; } .topo .marca{ font-family:'Playfair Display',serif; font-size:1.15rem;line-height:1.1; color:#fff;font-weight:600; display:flex;flex-direction:column; margin:0; } .topo .marca small{ font-family:'DM Sans','Inter',sans-serif; font-size:.62rem;letter-spacing:.22em;text-transform:uppercase; color:var(--dourado-c);font-weight:600;margin-top:2px; } .topo .user{ margin-left:auto;display:flex;align-items:center;gap:10px; font-size:.8rem;opacity:.95; } .topo .user #user-nome{color:#fff;opacity:.9} .topo .user #btn-sair{ font-size:.8rem;color:#fff;background:rgba(255,255,255,.12); border:none;border-radius:8px;padding:6px 12px;cursor:pointer;font-weight:600; font-family:inherit; } .topo .user #btn-sair:hover{background:rgba(255,255,255,.2)} /* Ajuste do .wrap na painel.html — mock quer 1020px de largura */ body:not([data-perfil]) .wrap{max-width:1020px;padding:22px 18px 90px} /* ============================================================================ CERIMÔNIA NOIVA — aliases das classes legacy pra visual do mock. viewCerimNoiva() emite .prog-item/.prog-papel/.prog-pessoas/.cer-num etc. Aqui replicamos o visual de .cer-mom/.cer-mom-tit/.cer-mom-n do mock nessas classes. Zero risco de quebrar JS (só CSS). ============================================================================ */ body[data-perfil="noiva"] .prog-item{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra);padding:15px 16px;margin-bottom:12px;position:relative;overflow:hidden;display:flex;gap:12px} body[data-perfil="noiva"] .prog-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--dourado-c)} body[data-perfil="noiva"] .prog-item.prog-liturgico::before{background:#d6a9c6} body[data-perfil="noiva"] .prog-item .cer-num{font-family:'Playfair Display',serif;color:var(--dourado);font-weight:700;font-size:1.1rem;flex:0 0 auto;padding-right:6px;border-right:1px solid var(--linha);display:flex;align-items:center;min-height:32px} body[data-perfil="noiva"] .prog-item .prog-corpo{flex:1;min-width:0} body[data-perfil="noiva"] .prog-item .prog-papel{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--azul);font-weight:600;line-height:1.2;margin-bottom:2px} body[data-perfil="noiva"] .prog-item .prog-pessoas{font-size:.82rem;color:var(--cinza);margin:2px 0 6px} body[data-perfil="noiva"] .prog-item .prog-pessoas b{color:var(--carvao);font-weight:600} body[data-perfil="noiva"] .cer-h{font-family:'Playfair Display',serif;color:var(--azul);font-size:1.15rem;margin:22px 0 10px;font-weight:600;padding-bottom:4px;border-bottom:1px solid var(--linha)} body[data-perfil="noiva"] .cer-vazio{font-style:italic;color:var(--cinza);background:var(--branco);border:1px dashed var(--linha);border-radius:var(--r);padding:14px;text-align:center;font-size:.9rem} body[data-perfil="noiva"] .cer-intro{color:var(--cinza);font-size:.9rem;line-height:1.55} body[data-perfil="noiva"] .cer-intro b{color:var(--carvao)} body[data-perfil="noiva"] .chk-prog{margin:0 0 16px;padding:12px 14px;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra)} body[data-perfil="noiva"] .chk-prog-bar{background:#ece7da;height:8px;border-radius:8px;overflow:hidden;margin-bottom:6px} body[data-perfil="noiva"] .chk-prog-fill{height:100%;background:linear-gradient(90deg,var(--dourado),var(--dourado-c))} body[data-perfil="noiva"] .chk-prog-lbl{font-size:.82rem;color:var(--cinza)} body[data-perfil="noiva"] .chk-prog-lbl b{color:var(--verde)} body[data-perfil="noiva"] .noiva-atalhos{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px} body[data-perfil="noiva"] .noiva-atalhos button{background:var(--branco);border:1px solid var(--linha);border-radius:10px;padding:9px 14px;font-family:inherit;font-size:.86rem;color:var(--azul);cursor:pointer;font-weight:600;transition:.14s} body[data-perfil="noiva"] .noiva-atalhos button:hover{border-color:var(--dourado);transform:translateY(-1px)} /* Cards internos da cerimônia (.cer-card usado no viewPartesNoiva) — igual ao admin porém escopo noiva */ body[data-perfil="noiva"] .cer-card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;box-shadow:var(--sombra)} body[data-perfil="noiva"] .cer-card-h{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;justify-content:space-between} body[data-perfil="noiva"] .cer-card-h b{font-family:'Playfair Display',serif;color:var(--azul);font-size:1.02rem} body[data-perfil="noiva"] .cer-card-h .opc{color:var(--cinza);font-size:.78rem} body[data-perfil="noiva"] .lente-card.solo{display:flex;align-items:center;gap:14px;padding:16px 18px;background:linear-gradient(135deg,#f6efd8,#fdf9e8);border:1px solid var(--dourado-c);border-radius:14px;color:var(--carvao);text-decoration:none;box-shadow:var(--sombra)} body[data-perfil="noiva"] .lente-card .lente-emoji{font-size:2.1rem} body[data-perfil="noiva"] .lente-card .lente-tit{flex:1;font-family:'Playfair Display',serif;color:var(--azul);font-size:1.05rem;font-weight:600} body[data-perfil="noiva"] .lente-card .lente-cta{font-size:.82rem;color:var(--dourado);font-weight:700} /* ============================================================================ FORNECEDORES NOIVA — visual FIEL do mock (.forn) mapeado nas classes legacy que renderFornecedores emite (.forn-card / .forn-nome / .forn-cat / .forn-status). Zero risco de quebrar JS. ============================================================================ */ body[data-perfil="noiva"] .forn-grid{display:grid;grid-template-columns:1fr;gap:12px} body[data-perfil="noiva"] .forn-card{display:flex;gap:14px;padding:14px 16px;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra);align-items:center;cursor:pointer;transition:.14s;position:relative;overflow:hidden} body[data-perfil="noiva"] .forn-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--dourado-c)} body[data-perfil="noiva"] .forn-card[data-st="fechado"]::before{background:var(--verde)} body[data-perfil="noiva"] .forn-card[data-st="cotacao"]::before{background:var(--ambar)} body[data-perfil="noiva"] .forn-card[data-st="afazer"]::before{background:var(--cinza)} body[data-perfil="noiva"] .forn-card:hover{border-color:var(--dourado);transform:translateY(-1px)} body[data-perfil="noiva"] .forn-card .forn-info{flex:1;min-width:0} body[data-perfil="noiva"] .forn-card .forn-cat{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--cinza);font-weight:700} body[data-perfil="noiva"] .forn-card .forn-nome{font-family:'Playfair Display',serif;color:var(--azul);font-size:1.05rem;font-weight:600;margin:2px 0} body[data-perfil="noiva"] .forn-card .forn-status{flex:0 0 auto;text-align:right} body[data-perfil="noiva"] .forn-card .forn-valor{font-size:.85rem;color:var(--carvao);font-weight:600} body[data-perfil="noiva"] .forn-card .muted{color:var(--cinza);font-weight:400} body[data-perfil="noiva"] .painel-h h2{font-family:'Playfair Display',serif;color:var(--azul);font-size:1.35rem;font-weight:600} body[data-perfil="noiva"] .painel-h .info{color:var(--cinza);font-size:.85rem;margin-top:2px} body[data-perfil="noiva"] .filtros{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;position:sticky;top:56px;background:var(--creme);padding:10px 0;z-index:10} body[data-perfil="noiva"] .filtros button{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:7px 13px;font-size:.82rem;color:var(--cinza);cursor:pointer;font-family:inherit;font-weight:600;transition:.14s} body[data-perfil="noiva"] .filtros button.ativo,body[data-perfil="noiva"] .filtros button:hover{border-color:var(--dourado);color:var(--azul);background:var(--dourado-suave)} body[data-perfil="noiva"] .como-add{background:var(--dourado-suave);border-radius:10px;padding:11px 14px;margin-bottom:14px;font-size:.85rem;color:var(--carvao)} body[data-perfil="noiva"] .como-add b{color:var(--azul)} /* ============================================================================ AGENDA / JORNADA NOIVA — timeline visual FIEL do mock. O legacy usa .timeline > li + .painel-h. Aliases mapeando pra visual .tl > .tl-item. ============================================================================ */ body[data-perfil="noiva"] #agenda .painel-h h2{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--azul);font-weight:600} body[data-perfil="noiva"] .timeline{list-style:none;padding:0;margin:14px 0;position:relative} body[data-perfil="noiva"] .timeline::before{content:"";position:absolute;left:19px;top:4px;bottom:4px;width:2px;background:var(--linha)} body[data-perfil="noiva"] .timeline li{position:relative;padding:12px 14px 12px 52px;margin-bottom:12px;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra)} body[data-perfil="noiva"] .timeline li::before{content:"";position:absolute;left:12px;top:16px;width:16px;height:16px;background:var(--dourado);border:3px solid var(--branco);border-radius:50%;box-shadow:0 0 0 1px var(--dourado)} body[data-perfil="noiva"] .timeline li.feito::before{background:var(--verde);box-shadow:0 0 0 1px var(--verde)} body[data-perfil="noiva"] .timeline li.atrasado::before{background:var(--vermelho);box-shadow:0 0 0 1px var(--vermelho)} /* ============================================================================ CALENDÁRIO NOIVA — cabeçalho + grid mais aconchegante (visual FIEL do mock). ============================================================================ */ body[data-perfil="noiva"] #calendario .painel-h h2{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--azul);font-weight:600} body[data-perfil="noiva"] .cal-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 10px} body[data-perfil="noiva"] .cal-btn{background:var(--branco);border:1px solid var(--linha);border-radius:50%;width:36px;height:36px;font-size:1.1rem;color:var(--azul);cursor:pointer;font-family:inherit;font-weight:700} body[data-perfil="noiva"] .cal-btn:hover{background:var(--dourado-suave);border-color:var(--dourado)} body[data-perfil="noiva"] .cal-mes{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--azul);font-weight:600;min-width:180px;text-align:center;text-transform:capitalize} /* ============================================================================ CONTRATO NOIVA — canvas de assinatura + botões FIEL do mock. Classes legacy: .ct-canvas, .ct-ass-acoes, .ct-aceite, .ct-pdf-acoes, .ed-add, .mus-btn, mark.ct-conf. ============================================================================ */ body[data-perfil="noiva"] .ct-canvas{width:100%;height:180px;background:#fff;border:2px dashed var(--dourado-c);border-radius:12px;cursor:crosshair;touch-action:none;display:block;margin:12px 0} body[data-perfil="noiva"] .ct-ass-acoes{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:8px} body[data-perfil="noiva"] .ct-aceite{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);padding:16px;box-shadow:var(--sombra);margin-top:14px} body[data-perfil="noiva"] .ct-aceite p{color:var(--carvao);font-size:.92rem;line-height:1.55;margin:0 0 10px} body[data-perfil="noiva"] .ct-aceite.ok{background:var(--verde-bg);border-color:var(--verde);color:var(--verde);font-weight:600} body[data-perfil="noiva"] .ct-aceite.ok b{color:var(--verde)} body[data-perfil="noiva"] .ct-pdf-acoes{margin-top:12px;display:flex;justify-content:center} body[data-perfil="noiva"] mark.ct-conf{background:var(--dourado-suave);color:var(--carvao);border-bottom:1px dashed var(--dourado);padding:0 2px;font-weight:600} body[data-perfil="noiva"] .ed-add{background:var(--verde);color:#fff;border:none;border-radius:12px;padding:11px 18px;font-family:inherit;font-weight:700;cursor:pointer;font-size:.92rem;transition:.14s} body[data-perfil="noiva"] .ed-add:hover{filter:brightness(1.08);transform:translateY(-1px)} body[data-perfil="noiva"] .mus-btn{background:var(--branco);color:var(--azul);border:1px solid var(--linha);border-radius:10px;padding:8px 14px;font-family:inherit;font-weight:600;cursor:pointer;font-size:.82rem;transition:.14s} body[data-perfil="noiva"] .mus-btn:hover{border-color:var(--dourado);background:var(--dourado-suave)} body[data-perfil="noiva"] .mus-btn.ghost{background:none} body[data-perfil="noiva"] .mus-btn.escolher.on{background:var(--verde);color:#fff;border-color:var(--verde)} /* ============================================================================ MÚSICAS NOIVA — cards de opções .rep-card + .lei-opt FIEL do mock. ============================================================================ */ body[data-perfil="noiva"] .rep-card{background:var(--branco);border:1.5px solid var(--linha);border-radius:11px;padding:12px 14px;margin-bottom:8px;transition:.14s} body[data-perfil="noiva"] .rep-card.lei-opt.escolhida{border-color:var(--verde);background:var(--verde-bg)} body[data-perfil="noiva"] .rep-card:hover{border-color:var(--dourado)} body[data-perfil="noiva"] .rep-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px} body[data-perfil="noiva"] .rep-card .rep-t{font-family:'Playfair Display',serif;color:var(--azul);font-size:1rem;font-weight:600} body[data-perfil="noiva"] .rep-card .rep-a{font-size:.82rem;color:var(--cinza);margin-top:2px} body[data-perfil="noiva"] .rep-card .lei-ofer-tag{background:var(--verde);color:#fff;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;font-weight:700;margin-left:6px;vertical-align:middle} body[data-perfil="noiva"] .rep-card .tag-inst,body[data-perfil="noiva"] .rep-card .tag-mat{background:var(--azul-bg);color:var(--azul);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:6px;font-weight:700} body[data-perfil="noiva"] .rep-card .rep-acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} body[data-perfil="noiva"] .lei-refrao{background:var(--dourado-suave);border-radius:8px;padding:8px 10px;font-size:.85rem;color:var(--carvao);margin:6px 0;font-style:italic} body[data-perfil="noiva"] .lei-texto{margin-top:6px} body[data-perfil="noiva"] .lei-texto summary{cursor:pointer;color:var(--azul);font-weight:600;font-size:.85rem;padding:4px 0} body[data-perfil="noiva"] .lei-hist{margin-top:10px} body[data-perfil="noiva"] .lei-hist summary{cursor:pointer;color:var(--cinza);font-size:.85rem;padding:8px 0;border-top:1px dashed var(--linha)} body[data-perfil="noiva"] .lei-hist summary:hover{color:var(--dourado)} body[data-perfil="noiva"] .rep-vidbox{margin-top:10px;position:relative;padding-bottom:56.25%;height:0;border-radius:10px;overflow:hidden} body[data-perfil="noiva"] .rep-vidbox iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none} body[data-perfil="noiva"] .rep-letra{background:var(--creme);border:1px solid var(--linha);border-radius:8px;padding:10px 12px;font-size:.86rem;color:var(--carvao);line-height:1.55;margin-top:8px;white-space:pre-wrap} body[data-perfil="noiva"] .lei-leitor-noiva{background:var(--branco);border:1px solid var(--linha);border-radius:10px;padding:10px 12px;margin-top:8px;display:flex;gap:10px;align-items:center} body[data-perfil="noiva"] .lei-leitor-noiva .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cinza);font-weight:700;flex:0 0 auto} body[data-perfil="noiva"] .ed-inp{background:var(--branco);border:1px solid var(--linha);border-radius:8px;padding:9px 11px;font-family:inherit;font-size:.9rem;color:var(--carvao);flex:1;min-width:0} body[data-perfil="noiva"] .ed-inp:focus{outline:2px solid var(--dourado);outline-offset:1px;border-color:var(--dourado)} body[data-perfil="noiva"] .ed-inp.sm{padding:7px 10px;font-size:.85rem} /* ============================================================================ SINO / CONVERSAS NOIVA — modais e itens de pendência. ============================================================================ */ body[data-perfil="noiva"] .modal-bg{background:rgba(18,40,90,.5)} body[data-perfil="noiva"] .modal-h{border-bottom:1px solid var(--linha);padding-bottom:10px;margin-bottom:12px;position:relative} body[data-perfil="noiva"] .modal-h .cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dourado);font-weight:700} body[data-perfil="noiva"] .modal-h .nome{font-family:'Playfair Display',serif;font-size:1.25rem;color:var(--azul);font-weight:600;margin-top:2px} body[data-perfil="noiva"] .modal-fechar{position:absolute;top:-4px;right:-4px;background:none;border:none;font-size:1.6rem;color:var(--cinza);cursor:pointer;padding:4px 8px;line-height:1} body[data-perfil="noiva"] .modal-fechar:hover{color:var(--vermelho)} body[data-perfil="noiva"] .pend-item{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--linha);border-radius:12px;margin-bottom:8px;background:var(--branco);transition:.14s} body[data-perfil="noiva"] .pend-item:hover{border-color:var(--dourado)} body[data-perfil="noiva"] .pend-item.alta{border-left:4px solid var(--vermelho)} body[data-perfil="noiva"] .pend-item.media{border-left:4px solid var(--ambar)} body[data-perfil="noiva"] .pend-item.baixa{border-left:4px solid var(--dourado-c)} body[data-perfil="noiva"] .pend-ico{flex:0 0 auto;width:36px;height:36px;background:var(--dourado-suave);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.05rem} body[data-perfil="noiva"] .pend-corpo{flex:1;min-width:0} body[data-perfil="noiva"] .pend-tit{font-weight:600;color:var(--carvao);font-size:.94rem;line-height:1.3} body[data-perfil="noiva"] .pend-sub{color:var(--cinza);font-size:.82rem;margin-top:2px} body[data-perfil="noiva"] .pend-vazio{text-align:center;padding:20px 12px;color:var(--cinza);font-style:italic;font-size:.9rem} body[data-perfil="noiva"] .pend-vazio .big{font-size:2.4rem;display:block;margin-bottom:6px;opacity:.5} body[data-perfil="noiva"] .conv-badge-mini{background:var(--vermelho);color:#fff;font-size:.62rem;padding:2px 6px;border-radius:8px;font-weight:700;margin-left:6px} /* ============================================================================ FORMULÁRIO NOIVA (dados do contrato) — inputs cerimoniosos. ============================================================================ */ body[data-perfil="noiva"] .ficha-item{margin-bottom:10px} body[data-perfil="noiva"] .ficha-item .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cinza);font-weight:700;margin-bottom:4px;display:block} body[data-perfil="noiva"] .ficha-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media (max-width: 560px){ body[data-perfil="noiva"] .ficha-grid{grid-template-columns:1fr} } body[data-perfil="noiva"] .lin-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;align-items:center} body[data-perfil="noiva"] .ed-rem{background:none;border:none;color:var(--vermelho);cursor:pointer;font-size:1.2rem;padding:4px 8px;font-weight:700} body[data-perfil="noiva"] .ck-princ{display:flex;align-items:center;gap:5px;font-size:.85rem;color:var(--carvao);cursor:pointer} /* --- FIM do foundation. --- */ /* Próximos commits vão adicionar cada aba individualmente, com base no docs/mapa-visual-prototipo.md. Ordem prevista: 1. Cerimonial (o que Bruno cobrou) 2. Pagamentos 3. Fornecedores 4. Datas + Roteiro 5. Contrato (visual completo — o que fiz na Onda 5 foi parcial) 6. Documentos, Equipe, Links, Visão Cada commit reescreve o renderX() correspondente pra emitir o HTML com as classes CORRETAS do mock, e adiciona o CSS específico daquela aba aqui neste arquivo. */