/* =============================================================
   MÓDULOS VISUAIS — planta 2D, 3D, papelaria, quadro de tarefas,
   galeria, conquistas, simuladores
   ============================================================= */

/* ---------- Editor de planta ---------- */
.cfg-espaco { flex: 1 1 100%; }
.cfg-espaco > summary { display: none; }
@media (max-width: 820px) {
  .cfg-espaco > summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: var(--white); font-size: .85rem; color: var(--ink-700); width: fit-content;
  }
  .cfg-espaco > summary::-webkit-details-marker { display: none; }
  .cfg-espaco[open] > summary { margin-bottom: 12px; border-color: var(--rose-400); color: var(--rose-600); }
  .cfg-espaco .row { flex-wrap: wrap; }
}
.planta-layout { display: grid; grid-template-columns: 232px 1fr 250px; gap: 14px; align-items: start; }
@media (max-width: 1250px) { .planta-layout { grid-template-columns: 200px 1fr; } .planta-props { grid-column: 1 / -1; } }
@media (max-width: 820px)  { .planta-layout { grid-template-columns: 1fr; } }

.cat-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; max-height: 74vh; overflow-y: auto; }
.cat-grupo { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-500); margin: 14px 0 6px; font-weight: 600; }
.cat-grupo:first-child { margin-top: 0; }
.cat-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--white);
  font-size: .8rem; cursor: pointer; margin-bottom: 5px; transition: var(--transition); font-family: inherit; color: var(--ink-700);
}
.cat-item:hover { border-color: var(--rose-400); background: var(--blush-50); transform: translateX(2px); }
.cat-item span:first-child { font-size: 1rem; }

.planta-palco { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.planta-canvas-wrap { position: relative; overflow: auto; background: var(--blush-50); border-radius: var(--radius-sm); }
svg.planta { display: block; width: 100%; height: auto; touch-action: none; background: #FBF7F3; border-radius: var(--radius-sm); }
svg.planta .grade line { stroke: rgba(120, 100, 90, .12); stroke-width: .02; }
svg.planta .grade line.forte { stroke: rgba(120, 100, 90, .22); stroke-width: .035; }
svg.planta .parede { fill: none; stroke: #8C7B6C; stroke-width: .18; }
svg.planta .item { cursor: move; }
svg.planta .item .corpo { stroke: rgba(80,66,58,.45); stroke-width: .03; transition: filter .15s; }
svg.planta .item:hover .corpo { filter: brightness(.96); }
svg.planta .item.sel .corpo { stroke: var(--rose-500); stroke-width: .09; }
svg.planta .item text { font-family: 'Jost', sans-serif; fill: #5A4A40; pointer-events: none; }
svg.planta .cadeira { fill: #E6D9CC; stroke: rgba(80,66,58,.3); stroke-width: .02; }
svg.planta .handle { fill: var(--rose-500); cursor: grab; }
svg.planta .medida { font-size: .5px; fill: var(--muted-500); font-family: 'Jost', sans-serif; }

.planta-props { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 86px; }
.planta-props .field { margin-bottom: 10px; }
.planta-props label { font-size: .68rem; }
.planta-props input, .planta-props select { padding: 7px 10px; font-size: .84rem; }

.zoom-bar { display: flex; align-items: center; gap: 8px; }
.zoom-bar input[type=range] { width: 110px; accent-color: var(--rose-500); }

.mini-stat { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--muted-600); }
.mini-stat b { color: var(--ink-900); }

/* ---------- Visualizador 3D ---------- */
.viewer3d { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #0F1115; }
.viewer3d canvas { display: block; width: 100%; height: 100%; }
.viewer3d .hud {
  position: absolute; left: 14px; bottom: 14px; display: flex; gap: 7px; flex-wrap: wrap;
  background: rgba(20,17,15,.62); backdrop-filter: blur(8px); padding: 8px; border-radius: var(--radius-pill);
}
.viewer3d .hud button {
  border: none; background: rgba(255,255,255,.12); color: #fff; padding: 7px 14px;
  border-radius: var(--radius-pill); font-size: .78rem; cursor: pointer; transition: var(--transition); font-family: inherit;
}
.viewer3d .hud button:hover { background: rgba(255,255,255,.26); }
.viewer3d .hud button.on { background: var(--rose-500); }
.viewer3d .badge-3d {
  position: absolute; top: 14px; left: 14px; background: rgba(20,17,15,.62); color: #fff;
  padding: 6px 14px; border-radius: var(--radius-pill); font-size: .74rem; backdrop-filter: blur(8px);
}
.viewer3d .loading3d { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .9rem; text-align: center; }
.viewer3d .loading3d .spin { font-size: 2rem; animation: spin3d 2s linear infinite; display: block; margin-bottom: 10px; }
@keyframes spin3d { to { transform: rotate(360deg) } }

/* ---------- Papelaria ---------- */
.papel-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .papel-layout { grid-template-columns: 1fr; } }
.papel-preview { display: grid; place-items: center; background: var(--blush-50); border-radius: var(--radius); padding: 26px; }
.papel-card { width: 100%; max-width: 420px; aspect-ratio: 5/7; box-shadow: var(--shadow-lg); border-radius: 4px; overflow: hidden; }
.papel-card svg { width: 100%; height: 100%; display: block; }
.modelo-chips { display: flex; gap: 7px; flex-wrap: wrap; }

/* ---------- Quadro de tarefas (kanban) ---------- */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .kanban { grid-template-columns: 1fr; } }
.kb-col { background: var(--blush-50); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-height: 180px; }
.kb-col.hover { border-color: var(--rose-400); background: var(--blush-100); }
.kb-col h4 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: .88rem; }
.kb-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  margin-bottom: 8px; cursor: grab; font-size: .85rem; box-shadow: var(--shadow-xs); transition: var(--transition);
}
.kb-card:hover { border-color: var(--blush-300); transform: translateY(-1px); }
.kb-card:active { cursor: grabbing; }
.kb-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

/* ---------- Conquistas ---------- */
.medalhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.medalha {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: center;
  opacity: .45; filter: grayscale(1); transition: var(--transition);
}
.medalha.on { opacity: 1; filter: none; border-color: var(--champagne-200); background: linear-gradient(160deg, var(--white), var(--champagne-100)); }
.medalha .ic { font-size: 2rem; display: block; margin-bottom: 8px; }
.medalha b { display: block; font-size: .88rem; }
.medalha small { color: var(--muted-500); font-size: .75rem; }

/* ---------- Galeria de fotos ---------- */
.galeria { columns: 4 210px; column-gap: 12px; }
.galeria figure { break-inside: avoid; margin: 0 0 12px; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.galeria img { width: 100%; display: block; }
.galeria figcaption { padding: 9px 12px; font-size: .8rem; background: var(--white); }
.lightbox { position: fixed; inset: 0; background: rgba(15,12,10,.92); z-index: 950; display: grid; place-items: center; padding: 24px; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius); }
.lightbox .fechar { position: absolute; top: 20px; right: 24px; font-size: 1.6rem; color: #fff; background: none; border: none; cursor: pointer; }

/* ---------- Simulador ---------- */
.slider-row { display: grid; grid-template-columns: 1fr 90px; gap: 12px; align-items: center; margin-bottom: 14px; }
.slider-row input[type=range] { width: 100%; accent-color: var(--rose-500); }
.cenario { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--white); }
.cenario.melhor { border-color: var(--ok-500); }

/* ---------- Comparador ---------- */
.compare-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

/* ---------- Assistente (onboarding) ---------- */
.wizard-steps { display: flex; gap: 6px; margin-bottom: 20px; }
.wizard-steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.wizard-steps i.on { background: var(--rose-500); }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.opt {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center;
  cursor: pointer; transition: var(--transition); background: var(--white); font-size: .84rem;
}
.opt:hover { border-color: var(--rose-400); }
.opt.sel { border: 2px solid var(--rose-500); background: var(--blush-50); }
.opt .ic { font-size: 1.5rem; display: block; margin-bottom: 6px; }

/* ---------- Amostras de cor (também usadas nas páginas públicas) ---------- */
.palette { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 62px; height: 62px; border-radius: var(--radius); border: 1px solid var(--line); position: relative; cursor: pointer; overflow: hidden; display: inline-block; }
.swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- Paletas ---------- */
.paleta-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: var(--transition); background: var(--white); }
.paleta-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.paleta-card.sel { border: 2px solid var(--rose-500); }
.paleta-cores { display: flex; height: 62px; }
.paleta-cores i { flex: 1; }
.paleta-card b { display: block; padding: 10px 12px; font-size: .84rem; font-weight: 500; }

/* ---------- Mesa posta (preview de decoração) ---------- */
.mesa-preview { background: var(--blush-50); border-radius: var(--radius); padding: 20px; display: grid; place-items: center; }
.mesa-preview svg { width: 100%; max-width: 460px; height: auto; }

/* ---------- Calendário ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-500); text-align: center; padding: 6px 0; }
.cal-dia { background: var(--white); border: 1px solid var(--line); border-radius: 9px; min-height: 78px; padding: 6px; font-size: .74rem; }
.cal-dia.fora { opacity: .35; }
.cal-dia.hoje { border-color: var(--rose-500); box-shadow: 0 0 0 2px var(--blush-200); }
.cal-dia.casamento { background: linear-gradient(160deg, var(--blush-100), var(--champagne-100)); border-color: var(--rose-400); }
.cal-dia .num { font-weight: 600; color: var(--ink-800); }
.cal-ev { display: block; margin-top: 3px; padding: 2px 5px; border-radius: 4px; font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Barra de comparação de fornecedores ---------- */
.vs-tabela th:first-child { width: 190px; }

/* =============================================================
   POLIMENTO MOBILE — a maioria dos casais usa o celular
   ============================================================= */
@media (max-width: 820px) {
  /* editor de planta: primeiro o desenho, depois o catálogo */
  .planta-layout { display: flex; flex-direction: column; gap: 12px; }
  .planta-palco { order: 1; }
  .cat-box { order: 2; max-height: 300px; }
  .planta-props { order: 3; position: static; }

  /* barra de ferramentas mais compacta */
  .toolbar { gap: 8px; }
  .toolbar .field { flex: 1 1 46%; margin: 0 !important; }
  .toolbar .field input, .toolbar .field select { width: 100% !important; }
  .toolbar select { min-width: 0; width: 100%; }
  .toolbar > .row { flex: 1 1 100%; flex-wrap: wrap; }
  .toolbar .btn { flex: 0 1 auto; }
  .zoom-bar { flex: 1 1 100%; }
  .zoom-bar input[type=range] { flex: 1; width: auto; }

  /* tabelas roláveis com dica visual */
  .tbl-wrap { -webkit-overflow-scrolling: touch; position: relative; }
  table.tbl th, table.tbl td { padding: 10px 12px; font-size: .82rem; }

  /* modais ocupam a tela toda no celular */
  .modal { width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-footer { position: sticky; bottom: 0; background: var(--white); padding-bottom: 18px; }
  .modal-footer .btn { flex: 1; }

  /* KPIs e painéis */
  .kpi .val { font-size: 1.8rem; }
  .panel { padding: 16px; }
  .panel-head { gap: 8px; }
  .panel-head h3 { font-size: 1.05rem; }

  /* mood board e galeria */
  .mood-grid { columns: 2 150px; }
  .galeria { columns: 2 150px; }
  .video-grid { grid-template-columns: 1fr; }

  /* 3D mais alto e com HUD rolável */
  .viewer3d { height: min(56vh, 420px) !important; }
  .viewer3d .hud { left: 8px; right: 8px; bottom: 8px; overflow-x: auto; justify-content: flex-start; }
  .viewer3d .hud button { flex-shrink: 0; padding: 8px 12px; font-size: .74rem; }

  /* construtor de site */
  .papel-layout { grid-template-columns: 1fr; }
  .planta-props { max-height: none; }

  /* chips e abas roláveis em vez de quebrar */
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .chips .chip { flex-shrink: 0; }

  /* formulários com alvo de toque maior */
  input, select, textarea, .btn { min-height: 44px; }
  .btn-xs, .btn-sm { min-height: 38px; }
  .btn-icon { width: 40px; height: 40px; }

  /* timeline e listas */
  .tl-item { flex-wrap: wrap; }
  .tl-hora { min-width: 54px; }
  .check-item { flex-wrap: wrap; }

  /* kanban vira colunas empilhadas com rolagem interna */
  .kb-col { max-height: 420px; overflow-y: auto; }
}

@media (max-width: 520px) {
  .grid.g2, .grid.g3, .grid.g4, .grid.g-2-1, .grid.g-1-2 { grid-template-columns: 1fr !important; }
  .guest-stats { grid-template-columns: repeat(2, 1fr); }
  .opt-grid { grid-template-columns: repeat(2, 1fr); }
  .medalhas { grid-template-columns: repeat(2, 1fr); }
  .app-content { padding: 14px; }
  .cal-dia { min-height: 58px; font-size: .66rem; padding: 4px; }
  .cal-ev { font-size: .58rem; }
  h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .budget-row { grid-template-columns: 1fr 1fr; }
  .tables-grid { grid-template-columns: 1fr; }
  .integra-grid { gap: 8px; }
}

/* evita zoom automático do iOS ao focar campos */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
  .toolbar .field input, .toolbar .field select, .planta-props input, .planta-props select { font-size: 15px !important; }
}

/* ---------- Documentos legais ---------- */
.legal-texto { padding: clamp(22px, 4vw, 40px); line-height: 1.85; }
.legal-texto h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 30px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.legal-texto h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-texto h3 { font-family: var(--font-body); font-size: .98rem; font-weight: 600; margin: 18px 0 4px; }
.legal-texto p { color: var(--muted-600); font-size: .95rem; margin: 0 0 12px; }
.legal-texto b { color: var(--ink-800); }
.legal-texto a { color: var(--rose-600); }

/* ---------- Tour guiado ---------- */
.tour-camada { position: fixed; inset: 0; z-index: 1000; }
.tour-camada::before { content: ''; position: absolute; inset: 0; background: rgba(24, 20, 18, .62); backdrop-filter: blur(1.5px); }
.tour-furo {
  position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(24, 20, 18, .62);
  border: 2px solid var(--rose-400); transition: all .3s cubic-bezier(.2,.8,.3,1); pointer-events: none;
}
.tour-caixa {
  position: absolute; background: var(--white); border-radius: var(--radius-lg); padding: 20px 22px;
  box-shadow: var(--shadow-lg); animation: modalIn .3s cubic-bezier(.2,.8,.3,1); max-width: calc(100vw - 24px);
}
.tour-caixa.centro { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); text-align: center; }
.tour-caixa h3 { margin: 6px 0 8px; font-size: 1.3rem; }
.tour-caixa p { font-size: .92rem; color: var(--muted-600); line-height: 1.65; margin: 0 0 14px; }
.tour-topo { display: flex; align-items: center; justify-content: space-between; }
.tour-passo { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-600); font-weight: 600; }
.tour-x { background: none; border: none; font-size: 1rem; color: var(--muted-500); cursor: pointer; padding: 4px; }
.tour-capa { font-size: 2.4rem; margin: 6px 0; }
.tour-barra { height: 4px; background: var(--blush-100); border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.tour-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--rose-400), var(--gold-500)); transition: width .35s ease; }
.tour-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 620px) {
  .tour-caixa { left: 12px !important; right: 12px; width: auto !important; bottom: 14px; top: auto !important; }
  .tour-caixa.centro { top: 50% !important; bottom: auto; transform: translate(-50%, -50%); left: 50% !important; }
}

/* ---------- Densidade compacta ---------- */
[data-densidade="compacto"] .panel { padding: 14px; }
[data-densidade="compacto"] .kpi { padding: 13px; }
[data-densidade="compacto"] .kpi .val { font-size: 1.6rem; }
[data-densidade="compacto"] .app-content { padding: 16px; }
[data-densidade="compacto"] .grid { gap: 11px; }
[data-densidade="compacto"] table.tbl th, [data-densidade="compacto"] table.tbl td { padding: 8px 11px; font-size: .82rem; }
[data-densidade="compacto"] .task { padding: 10px 12px; }

/* ---------- Página pública (convite / rsvp) ---------- */
.pub-hero { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 60px 20px;
  background: radial-gradient(circle at 15% 15%, var(--blush-100), transparent 45%), radial-gradient(circle at 85% 85%, var(--champagne-100), transparent 45%), var(--paper); }
.pub-count { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin: 26px 0; }
.pub-count div { min-width: 74px; }
.pub-count b { font-family: var(--font-display); font-size: 2.6rem; display: block; line-height: 1; color: var(--rose-600); }
.pub-count small { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-500); }
.pub-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.mapa-embed { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); }