@import url('../fonts/fonts.css');

/* =============================================================================
   Paulista Documentação — tema "Obsidian & Gold"
   Dark + dourado, vidro fosco (glassmorphism). Fontes e libs 100% locais.
   Nomes de classe preservados p/ compatibilidade com o PHP.
   ========================================================================== */

:root{
  /* superfícies (azul-ardósia suave — dark mais leve, menos "pesado") */
  --bg:#141a29; --bg-2:#182030; --bg-3:#1e2740;
  --panel:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --input-bg:rgba(255,255,255,.045);
  --input-bg-focus:rgba(255,255,255,.07);
  --th-bg:rgba(255,255,255,.045);
  /* tinta */
  --ink:#eef2fa; --ink-dim:#c7cfdd; --muted:#8b97ad;
  --ink-strong:#ffffff;                         /* texto forte sobre superfície */
  --heading:linear-gradient(180deg,#fff,#c7cfdd); /* h1 (background-clip:text)   */
  /* dourado (marca — amarelo) */
  --gold:#ffd24a; --gold-2:#f5b73c; --gold-3:#ffe08a;
  --gold-ink:#1a1503; --gold-glow:rgba(255,204,74,.35);
  --gold-txt:#ffdd7a;                            /* dourado legível como TEXTO */
  --brand:var(--gold); --brand-ink:var(--gold-ink);
  --primary:var(--gold);
  /* azul (detalhe/secundário) */
  --blue:#5aa0ff; --blue-2:#3d7fe0; --blue-3:#8fc0ff; --blue-glow:rgba(90,160,255,.32);
  --info-soft:rgba(90,160,255,.14);
  /* estados */
  --danger:#ff6b6b; --danger-soft:rgba(255,107,107,.14);
  --ok:#4dd3a0; --ok-soft:rgba(77,211,160,.14);
  /* fundos ambiente (trocáveis por tema) */
  --body-grad:
    radial-gradient(1000px 700px at 80% -10%, rgba(255,210,90,.12), transparent 60%),
    radial-gradient(800px 600px at 0% 100%, rgba(90,150,235,.16), transparent 55%),
    linear-gradient(160deg,#161d2d,#141b2b 60%,#131a29);
  --sidebar-grad:linear-gradient(180deg,rgba(30,39,64,.72),rgba(20,26,41,.78));
  --topbar-bg:rgba(22,29,45,.82);
  --login-grad:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  --blob-op:.55;
  /* geometria */
  --radius:16px; --radius-sm:10px;
  --blur:saturate(150%) blur(16px);
  --shadow:0 10px 30px -14px rgba(6,10,20,.5);
  --shadow-lg:0 24px 60px -22px rgba(6,10,20,.62);
  --font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
}

/* ============================ TEMA CLARO (pastel) ========================= */
/* Mesmas cores (amarelo + azul), porém em tons pastel sobre fundo claro.      */
:root[data-tema="claro"]{
  --bg:#faf6ec; --bg-2:#f3eddd; --bg-3:#fffdf8;
  --panel:rgba(255,253,247,.72);
  --panel-2:rgba(255,254,250,.92);
  --line:rgba(35,46,74,.12);
  --line-soft:rgba(35,46,74,.07);
  --input-bg:rgba(255,255,255,.75);
  --input-bg-focus:#ffffff;
  --th-bg:rgba(35,46,74,.04);
  --ink:#28303f; --ink-dim:#445066; --muted:#78859c; --ink-strong:#1e2735;
  --heading:linear-gradient(180deg,#232c3d,#48566e);
  /* dourado pastel (mais quente p/ contraste no claro) */
  --gold:#eab73a; --gold-2:#d9a52e; --gold-3:#f6d885;
  --gold-ink:#3a2c00; --gold-glow:rgba(224,169,44,.28);
  --gold-txt:#a1720a;                            /* dourado legível como TEXTO */
  /* azul pastel */
  --blue:#4a86d8; --blue-2:#356cbb; --blue-3:#6ea2e2; --blue-glow:rgba(74,134,216,.22);
  --info-soft:rgba(74,134,216,.12);
  --danger:#d64545; --danger-soft:rgba(214,69,69,.10);
  --ok:#1f9d6b; --ok-soft:rgba(31,157,107,.12);
  --body-grad:
    radial-gradient(1000px 720px at 82% -12%, rgba(250,210,110,.55), transparent 60%),
    radial-gradient(820px 620px at -2% 102%, rgba(150,185,240,.42), transparent 55%),
    linear-gradient(160deg,#fdf9ef,#f6f0e2 55%,#faf3e6);
  --sidebar-grad:linear-gradient(180deg,rgba(255,253,247,.85),rgba(248,242,231,.92));
  --topbar-bg:rgba(255,253,247,.85);
  --login-grad:linear-gradient(180deg,rgba(255,254,250,.92),rgba(255,253,247,.74));
  --blob-op:.4;
  --blur:saturate(135%) blur(14px);
  --shadow:0 10px 30px -14px rgba(35,46,74,.26);
  --shadow-lg:0 26px 64px -24px rgba(35,46,74,.34);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);
  background:var(--body-grad);
  background-attachment:fixed;color:var(--ink);
  font-size:15px;line-height:1.5;letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;transition:color .3s;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em}

/* ---- Fundo ambiente (blobs dourados desfocados; criados via JS) ----------- */
.fx-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:var(--body-grad)}
.fx-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--blob-op);will-change:transform}
.fx-blob.b1{width:520px;height:520px;top:-140px;right:-90px;
  background:radial-gradient(circle,rgba(255,204,74,.55),transparent 68%)}
.fx-blob.b2{width:460px;height:460px;bottom:-160px;left:-120px;
  background:radial-gradient(circle,rgba(64,120,200,.5),transparent 68%)}
.fx-blob.b3{width:380px;height:380px;top:40%;left:55%;
  background:radial-gradient(circle,rgba(255,176,60,.28),transparent 70%)}
/* Textura de papel-segurança: linhas guilloché gravadas, discretíssimas.       */
.fx-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2748%27%20height=%2728%27%3E%3Cg%20fill=%27none%27%20stroke=%27%23ffd24a%27%20stroke-width=%27.6%27%20stroke-opacity=%27.6%27%3E%3Cpath%20d=%27M0%2014%20Q12%205%2024%2014%20T48%2014%27/%3E%3Cpath%20d=%27M0%207%20Q12%20-2%2024%207%20T48%207%27/%3E%3Cpath%20d=%27M0%2021%20Q12%2012%2024%2021%20T48%2021%27/%3E%3C/g%3E%3C/svg%3E");
  background-size:48px 28px;
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 8%,#000 25%,transparent 80%);
          mask-image:radial-gradient(ellipse 90% 75% at 50% 8%,#000 25%,transparent 80%);}

/* ---- Cursor luminoso (segue o mouse; criado via JS) ----------------------- */
.fx-cursor{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(255,210,74,.8);margin:-13px 0 0 -13px;z-index:9999;
  pointer-events:none;mix-blend-mode:screen;will-change:transform;
  transition:width .18s,height .18s,background .18s,border-color .18s}
.fx-cursor.hot{background:rgba(255,210,74,.18)}
.fx-dot{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:var(--gold);margin:-3px 0 0 -3px;z-index:9999;pointer-events:none;
  box-shadow:0 0 12px 2px var(--gold-glow);will-change:transform}
@media (hover:none){.fx-cursor,.fx-dot{display:none}}

.layout{display:flex;min-height:100vh}

/* ---- Barra superior + hambúrguer (só no mobile) -------------------------- */
.topbar{display:none;position:sticky;top:0;z-index:60;align-items:center;gap:12px;
  padding:10px 16px;background:var(--topbar-bg);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.topbar-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:700;color:var(--ink-strong);font-size:15px}
.topbar-brand em{font-style:normal;color:var(--muted);font-weight:500;font-size:13px}
.brand-logo.sm{--coin:34px}
.nav-toggle{width:42px;height:42px;flex:0 0 auto;display:grid;place-content:center;gap:5px;
  border:1px solid var(--line);border-radius:11px;background:var(--panel-2);cursor:pointer;padding:0}
.nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .28s,opacity .2s}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-backdrop{position:fixed;inset:0;z-index:90;background:rgba(3,6,12,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .3s}

/* =============================== Sidebar ================================== */
.sidebar{width:264px;flex:0 0 264px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  background:var(--sidebar-grad);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-right:1px solid var(--line);}
.brand{display:flex;gap:12px;align-items:center;padding:20px 20px;
  border-bottom:1px solid var(--line-soft)}
/* ---- Medalhão gravado (intaglio) — usado onde antes havia o quadrado "PD" -- */
.brand-logo,.doc-logo{
  --coin:42px;width:var(--coin);height:var(--coin);border-radius:50%;flex:0 0 auto;
  position:relative;display:grid;place-items:center;isolation:isolate;
  background:radial-gradient(circle at 36% 30%,#20293f,#0a0e18 78%);
  color:var(--gold-3);font-weight:700;font-family:var(--display);
  font-size:calc(var(--coin)*.34);letter-spacing:-.04em;line-height:1;
  border:1px solid rgba(255,210,74,.42);
  text-shadow:0 1px 1px rgba(0,0,0,.6),0 0 10px rgba(255,210,74,.28);
  box-shadow:0 6px 18px -6px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.14),
             inset 0 -6px 12px -6px rgba(0,0,0,.8)}
/* ranhuras (fluting) na borda */
.brand-logo::before,.doc-logo::before{content:"";position:absolute;inset:0;border-radius:50%;
  z-index:-1;background:repeating-conic-gradient(from 0deg,var(--gold-2) 0deg 2deg,transparent 2deg 5.4deg);
  -webkit-mask:radial-gradient(circle,transparent 0 61%,#000 63% 80%,transparent 82%);
          mask:radial-gradient(circle,transparent 0 61%,#000 63% 80%,transparent 82%);opacity:.85}
/* anel interno hairline */
.brand-logo::after,.doc-logo::after{content:"";position:absolute;inset:21%;border-radius:50%;
  z-index:-1;border:1px solid rgba(255,210,74,.5)}
.brand strong{display:block;font-size:15px;color:var(--ink-strong);font-family:var(--display)}
.brand span{font-size:11.5px;color:var(--muted);letter-spacing:.3px}
.sidebar nav{padding:12px 12px;overflow:auto;flex:1}
.nav-group{font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);
  padding:16px 12px 7px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:11px;
  color:var(--ink-dim);margin:2px 0;font-size:14px;position:relative;
  transition:background .18s,color .18s,transform .12s}
.nav-item:hover{background:var(--panel);color:var(--ink-strong);transform:translateX(2px)}
.nav-item.active{background:linear-gradient(90deg,rgba(255,210,74,.16),rgba(255,210,74,.04));
  color:var(--ink-strong);box-shadow:inset 0 0 0 1px rgba(255,210,74,.22)}
.nav-item.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:3px;background:var(--gold);box-shadow:0 0 10px var(--gold-glow)}
.sidebar-foot{padding:14px 20px;font-size:11px;color:var(--muted);
  border-top:1px solid var(--line-soft)}
.sidebar-foot .user{color:var(--ink);font-size:12.5px;font-weight:600;margin-bottom:2px}
.sidebar-foot .logout{color:var(--gold-2)}
.sidebar-foot .logout:hover{color:var(--gold-3)}

/* =============================== Conteúdo ================================= */
.content{flex:1;padding:34px 40px;max-width:1180px;width:100%;margin:0 auto}
.page-head{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:18px;gap:12px;flex-wrap:wrap}
h1{font-size:26px;margin:0;font-weight:700;
  background:var(--heading);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{color:var(--muted);margin:0 0 24px}

/* ================================ Cards =================================== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);margin-bottom:20px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);position:relative}
.note{background:rgba(255,210,74,.07);border-color:rgba(255,210,74,.22)}
.empty{text-align:center;color:var(--muted);padding:40px 22px}
.empty .btn{margin-top:14px}

/* minmax 205px (era 190): com 190 o valor em reais de um indicador — "R$ 1.350,00"
   a 34px — não caberia na linha e quebrava depois do "R$", deixando o número
   pendurado sozinho embaixo (visto no painel de Cobranças em 30/07). */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
  gap:16px;margin-bottom:26px}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);overflow:hidden;position:relative;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s}
.stat-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(255,210,74,.12),transparent 40%);
  opacity:0;transition:opacity .25s}
.stat-card:hover{transform:translateY(-4px);border-color:rgba(255,210,74,.3);
  box-shadow:var(--shadow-lg)}
.stat-card:hover::after{opacity:1}
.stat-icon{font-size:26px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
/* O tamanho ACOMPANHA a largura do card (clamp) e o valor nunca quebra: um
   indicador financeiro partido em duas linhas ("R$" / "1.350,00") lê como dois
   números diferentes. tabular-nums alinha as colunas de dígitos entre os cards. */
.stat-num{font-size:clamp(22px,2.2vw,32px);font-weight:700;line-height:1.15;margin-top:8px;
  font-family:var(--display);color:var(--ink-strong);
  white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat-label{color:var(--muted);font-size:13px;margin-top:2px}
.stat-card.highlight{background:linear-gradient(180deg,var(--gold-3) 0%,var(--gold) 45%,var(--gold-2) 100%);
  border:1px solid color-mix(in srgb,var(--gold-2) 70%,#8a6410);color:var(--gold-ink);
  box-shadow:0 10px 26px -10px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.5)}
.stat-card.highlight .stat-num,.stat-card.highlight .stat-icon{color:var(--gold-ink);
  -webkit-text-fill-color:currentColor}
.stat-card.highlight .stat-label{color:rgba(26,21,3,.72);font-weight:600}
.stat-card.highlight::after{display:none}

/* ================================ Tabela ================================== */
.table-wrap{padding:0;overflow-x:auto}
/* Um .card que também é .table-wrap perde o padding (a tabela vai de borda a
   borda, como deve ser) — mas o TEXTO solto dentro dele ia junto e nascia colado
   na borda esquerda (as notas dos painéis de Cobranças). Devolve a margem só ao
   que não é tabela; o .card-titulo já tem a sua. */
.card.table-wrap>:not(table):not(.card-titulo){padding-left:18px;padding-right:18px}
table{width:100%;border-collapse:collapse}
/* nowrap SÓ no cabeçalho e no que é número/data (classe .num / .nowrap). O
   nowrap global fazia toda célula empurrar a tabela para fora do card: no painel
   de Cobranças a coluna "Devido hoje" ficava cortada, e em Empresas as ações
   sumiam da tela inteira. Texto agora quebra; número, nunca. */
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
th,td.num,td.nowrap{white-space:nowrap}
td.num{text-align:right;font-variant-numeric:tabular-nums}
th{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);
  background:var(--th-bg);font-weight:600}
tbody tr{transition:background .14s}
tbody tr:hover{background:rgba(255,210,74,.05)}
tbody tr:last-child td{border-bottom:none}
.actions-col{text-align:right}

/* ================================ Forms =================================== */
.form{max-width:640px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink-dim)}
.field .req{color:var(--gold-2)}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;background:var(--input-bg);color:var(--ink);
  transition:border-color .16s,box-shadow .16s,background .16s}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold-2);
  background:var(--input-bg-focus);box-shadow:0 0 0 3px rgba(255,210,74,.16)}
select option{background:var(--bg-3);color:var(--ink)}
.hint{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.form-actions{display:flex;gap:10px;margin-top:10px}

/* =============================== Botões =================================== */
/* Acabamento "peça de metal": borda definida, luz de cima, sombra curta.
   Nada de filter:brightness no hover — o gradiente e a sombra é que mudam. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:9px 17px;border-radius:10px;
  border:1px solid var(--btn-bd,var(--line));background:var(--panel-2);color:var(--ink);
  cursor:pointer;font:inherit;font-size:14px;font-weight:600;letter-spacing:.1px;
  position:relative;overflow:hidden;white-space:nowrap;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 1px 2px rgba(6,10,20,.18),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .12s,background .16s,border-color .16s,box-shadow .16s,color .16s}
.btn .nav-ic{width:16px;height:16px;color:currentColor;flex:0 0 auto}
.btn:hover{background:var(--input-bg-focus);border-color:var(--gold-2);
  transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(6,10,20,.35),inset 0 1px 0 rgba(255,255,255,.14)}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(6,10,20,.2)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,210,74,.28),0 0 0 1px var(--gold-2)}
.btn-primary{--btn-bd:transparent;
  background:linear-gradient(180deg,var(--gold-3) 0%,var(--gold) 45%,var(--gold-2) 100%);
  border:1px solid color-mix(in srgb,var(--gold-2) 70%,#8a6410);color:var(--gold-ink);font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:0 6px 16px -6px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 -8px 14px -10px rgba(120,80,0,.55)}
.btn-primary:hover{border-color:color-mix(in srgb,var(--gold-2) 80%,#8a6410);
  background:linear-gradient(180deg,#fff0bd 0%,var(--gold) 40%,var(--gold-2) 100%);
  box-shadow:0 10px 24px -8px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -8px 14px -10px rgba(120,80,0,.55)}
.btn-primary:active{box-shadow:0 2px 8px -4px var(--gold-glow),
             inset 0 2px 6px -2px rgba(120,80,0,.4)}
.btn-ghost{background:transparent;border-color:var(--line);box-shadow:none;font-weight:500}
.btn-ghost:hover{background:var(--panel);box-shadow:none}
.btn-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 38%,transparent);
  background:var(--danger-soft)}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 20%,transparent);
  border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
.btn-sm{min-height:32px;padding:5px 12px;font-size:13px;border-radius:9px;gap:6px}
.btn-sm .nav-ic{width:14px;height:14px}
.btn-block{width:100%;justify-content:center;margin-top:8px}
/* ripple (via JS) */
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.35);animation:ripple .55s ease-out}
@keyframes ripple{to{transform:scale(3);opacity:0}}

/* ================================ Flash =================================== */
/* Cores derivadas das variáveis do tema: o texto fixo claro (#9ff0cf/#ffc2c2)
   ficava ilegível sobre o fundo pastel do tema claro. */
.flash{background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);
  color:color-mix(in srgb,var(--ok) 75%,var(--ink));
  padding:13px 17px;border-radius:12px;margin-bottom:18px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.flash-erro{background:var(--danger-soft);
  border-color:color-mix(in srgb,var(--danger) 35%,transparent);
  color:color-mix(in srgb,var(--danger) 78%,var(--ink))}

/* ================================ Login =================================== */
.login-body{display:grid;place-items:center;min-height:100vh;padding:20px}
.login-card{background:var(--login-grad);
  border:1px solid var(--line);padding:40px 34px;border-radius:22px;width:380px;max-width:92vw;
  box-shadow:var(--shadow-lg);text-align:center;position:relative;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.login-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(255,210,74,.5),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.login-card h1{font-size:22px;margin:16px 0 2px}
.login-card .subtitle{margin-bottom:22px}
.login-card .field{text-align:left}
.brand-logo.big{--coin:64px;margin:0 auto}

/* ============================== Simulador ================================= */
.sim-form{padding:20px 22px}
.sim-inputs{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.sim-inputs .field{margin:0;flex:1;min-width:150px}
.field-btn{flex:0 0 auto}
.result-title{font-size:19px;margin:0 0 14px;color:var(--ink-strong)}
.result-table{width:100%;border-collapse:collapse}
.result-table td{padding:11px 8px;border-bottom:1px solid var(--line-soft)}
.result-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  font-family:var(--display)}
.result-table .total-row td{font-weight:700;font-size:18px;color:var(--gold-txt);
  border-top:2px solid var(--line);border-bottom:none;padding-top:14px}
.result-table .pct-row td{color:var(--muted);font-size:13px;border:none;padding-top:2px}
.save-orc{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:18px;
  border-top:1px dashed var(--line)}
.save-orc input{flex:1;min-width:170px}
.save-orc .btn{flex:0 0 auto}

/* =========================== DOCUMENTOS (Fase 4) ========================== */
/* Chrome escuro + vidro; o "papel" (.doc) fica branco p/ impressão fiel.     */
.doc-body{margin:0;min-height:100vh}
.doc-toolbar{position:sticky;top:0;z-index:10;display:flex;gap:12px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;padding:14px 24px;
  background:var(--topbar-bg);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 8px 24px -16px rgba(0,0,0,.8)}
.doc-toolbar .btn{background:var(--panel-2)}
.doc-toolbar .btn-primary{background:linear-gradient(135deg,var(--gold-3),var(--gold-2));color:var(--gold-ink)}
.doc-tabs{display:flex;gap:8px}
.doc-toolbar-pub{justify-content:space-between}
.doc-pub-brand{color:var(--ink-strong);font-weight:600;display:flex;align-items:center;gap:10px;font-family:var(--display)}
.doc-logo{--coin:42px}
.doc-logo.sm{--coin:32px}

.doc-share{background:rgba(255,255,255,.04);border-bottom:1px solid var(--line);padding:16px 24px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.doc-share>label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.doc-share-row{display:flex;gap:8px;flex-wrap:wrap}
.doc-share-row input{flex:1;min-width:240px;font-size:13px}
.doc-share-row .btn{flex:0 0 auto}
.doc-share .hint{color:var(--muted)}

.doc-canvas{padding:34px 16px 70px;display:flex;justify-content:center}
/* O papel: fundo branco, tipografia formal, selo dourado no topo */
.doc{background:#fff;width:210mm;max-width:100%;padding:22mm 20mm;border-radius:6px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85);color:#1c2430;font-size:13px;line-height:1.55;
  position:relative;overflow:hidden}
.doc::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold-3),var(--gold-2))}

.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding-bottom:18px;border-bottom:2px solid #eceff3}
.doc-brand{display:flex;gap:13px;align-items:center}
.doc-brand-txt strong{display:block;font-size:15px;font-family:var(--display);color:#141a24}
.doc-brand-txt span{display:block;font-size:11px;color:#7a8291}
.doc-meta{text-align:right;font-size:12px;color:#7a8291}
.doc-meta strong{display:block;color:#141a24;font-size:15px;margin:3px 0;font-family:var(--display)}
.doc-tag{display:inline-block;background:linear-gradient(135deg,#141a24,#2a3446);color:var(--gold-3);
  font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:4px 10px;border-radius:20px;font-weight:600}
/* títulos dentro do papel: cor sólida (anula o gradiente global de h1) */
.doc h1,.doc h2,.doc h3{background:none;-webkit-text-fill-color:initial}
.doc-title{font-size:21px;margin:22px 0 14px;color:#141a24;-webkit-text-fill-color:#141a24}
.doc-sub{margin:-6px 0 16px;color:#5c6675}

.doc-info{width:100%;border-collapse:collapse;margin-bottom:8px}
.doc-info td{width:50%;padding:10px 12px;border:1px solid #eceff3;vertical-align:top;background:#fafbfc}
.doc-info span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  color:#9aa2ae;margin-bottom:3px}

.doc-section{margin-top:22px}
.doc-section h2,.doc-bloco-head h2{font-size:13px;margin:0 0 9px;color:#b8860b;
  text-transform:uppercase;letter-spacing:.6px;font-family:var(--display)}
.doc-servicos{margin:0;padding-left:18px}
.doc-servicos li{margin-bottom:5px}

.doc-custos{width:100%;border-collapse:collapse}
.doc-custos th{font-size:11px;background:#f4f6f9;text-transform:uppercase;letter-spacing:.4px;color:#7a8291}
.doc-custos th,.doc-custos td{padding:10px 12px;border-bottom:1px solid #eef1f4;white-space:normal}
.doc-custos .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:var(--display)}
.doc-custos.slim td{padding:7px 12px;border-bottom:1px dotted #e4e8ee}
.doc-total td{font-weight:700;font-size:15px;border-top:2px solid #141a24;border-bottom:none;
  padding-top:12px;color:#141a24}

.doc-bloco{margin-top:18px;padding:16px 18px;border:1px solid #eceff3;border-radius:12px;
  break-inside:avoid;background:#fcfcfd}
.doc-bloco-head{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid #eceff3;padding-bottom:7px;margin-bottom:7px}
.doc-bloco-total{font-weight:700;font-variant-numeric:tabular-nums;font-family:var(--display);color:#141a24}
.doc-pix{margin-top:10px;background:#fffaf0;border:1px solid #f2e2c0;border-radius:10px;padding:11px 14px}
.doc-pix-nome{font-weight:600;margin-bottom:6px;color:#141a24}
.doc-pix-grid{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px}
.doc-pix-grid b{color:#9aa2ae;font-weight:600;margin-right:3px;font-size:11px}
.doc-pix-gatilho{margin-top:8px;font-size:12px;color:#b8860b;font-weight:500}
.doc-pix-nota{background:#f7f9fb;border-color:#eceff3;color:#7a8291;font-size:12px}
.doc-alt{font-size:11px;color:#9aa2ae;margin:10px 0 0}

.doc-foot{margin-top:28px;padding-top:16px;border-top:1px solid #eceff3;font-size:11px;color:#7a8291}
.doc-assinatura{margin-top:12px;text-align:center;font-weight:600;color:#141a24;font-family:var(--display)}

/* =============================== Responsivo =============================== */
/* Tablet: encolhe a sidebar e os espaçamentos */
@media(max-width:1080px){
  .sidebar{width:220px;flex-basis:220px}
  .content{padding:28px 24px}
}

/* Mobile: sidebar vira gaveta deslizante (off-canvas) + barra superior */
@media(max-width:820px){
  .topbar{display:flex}
  .layout{flex-direction:column}
  .sidebar{position:fixed;top:0;left:0;height:100dvh;width:min(86vw,300px);flex:none;
    z-index:100;transform:translateX(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    border-right:1px solid var(--line);box-shadow:none}
  body.nav-open .sidebar{transform:none;box-shadow:24px 0 60px -20px rgba(0,0,0,.7)}
  body.nav-open{overflow:hidden}                 /* trava o scroll de fundo   */
  body.nav-open .nav-backdrop{opacity:1}
  .nav-backdrop[hidden]{display:none}
  /* padding-baixo folgado: o botão flutuante de tema vive no canto e não pode
     terminar em cima do texto do último card */
  .content{padding:20px 16px calc(84px + env(safe-area-inset-bottom));max-width:100%}
  .page-head{margin-bottom:14px}
  h1{font-size:22px}
  .card,.stat-card{padding:16px}
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  /* tabelas: rolagem horizontal suave, sem vazar da tela */
  .table-wrap{margin:0 -16px;border-radius:0}
  .table-wrap table{min-width:560px}
  th,td{padding:11px 14px}
  /* formulários e simulador empilham */
  .sim-inputs{gap:12px}
  .sim-inputs .field,.field-btn{flex:1 1 100%;min-width:0}
  .field-btn .btn{width:100%;justify-content:center}
  .save-orc{flex-direction:column}
  .save-orc .btn{width:100%;justify-content:center}
  .form{max-width:100%}
  .form-actions{flex-wrap:wrap}
  .form-actions .btn{flex:1 1 auto;justify-content:center}
  /* documentos */
  .doc-canvas{padding:18px 12px 50px}
  .doc{padding:24px 18px}
  .doc-head{flex-direction:column}
  .doc-meta{text-align:left}
  .doc-toolbar{padding:12px 16px}
  .doc-tabs{flex:1 1 100%;order:3}
  .doc-tabs .btn{flex:1}
  .doc-info,.doc-info tbody,.doc-info tr,.doc-info td{display:block;width:100%}
  .doc-info td{border-bottom:none}
  .doc-info tr{border-bottom:1px solid #eceff3}
}

/* Telas bem estreitas */
@media(max-width:420px){
  .content{padding:16px 12px 36px}
  .cards-grid{grid-template-columns:1fr 1fr}
  /* 18/08: 28px fixos estouravam o cartão com valor de milhar ("R$ 1.354,90"
     ficava 16px maior que a caixa, medido em 390px), e o cartão com ícone é o
     mais apertado. Quebrar linha NÃO é opção aqui (ver o comentário de
     .stat-num: número partido lê como dois números), então o tamanho passa a
     acompanhar a largura da tela. */
  .stat-num{font-size:clamp(20px,6.2vw,28px)}
  .page-head h1{font-size:20px}
}

/* =============================== Impressão ================================ */
@media print{
  .fx-bg,.fx-grid,.fx-cursor,.fx-dot{display:none !important}
  .doc-body{background:#fff}
  .no-print{display:none !important}
  .doc-canvas{padding:0;display:block}
  .doc{width:auto;max-width:none;box-shadow:none;padding:0;border-radius:0}
  .doc::before{display:none}
  .doc-section,.doc-bloco{break-inside:avoid}
  @page{margin:14mm}
}

/* =============================== Animações ================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .fx-blob{display:none}
}
/* estado inicial p/ reveal via GSAP (só quando o JS marca o body) */
body.fx-ready [data-reveal]{opacity:0}

/* =============================================================================
   Refino v0.5 — "Cartório": ícones gravados, gold com parcimônia, hairlines
   ========================================================================== */

/* Ícones monoline do menu (substituem os emojis) */
.nav-ic{width:18px;height:18px;flex:0 0 auto;color:var(--muted);
  transition:color .18s,transform .18s}
/* Ícone gravado nos stat-cards — azul (detalhe), dourado no card de destaque */
.stat-icon .nav-ic{width:26px;height:26px;color:var(--blue);
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.stat-card.highlight .nav-ic{color:var(--gold-ink)}
.nav-item{color:var(--ink-dim)}
.nav-item span{flex:1;min-width:0}
.nav-item:hover .nav-ic{color:var(--gold-3);transform:translateX(1px)}
.nav-item.active .nav-ic{color:var(--gold)}

/* Marca da sidebar (agora é um link) */
a.brand{transition:background .18s}
a.brand:hover{background:linear-gradient(90deg,rgba(255,210,74,.06),transparent)}
a.brand:hover .brand-logo{box-shadow:0 8px 22px -6px var(--gold-glow),
  inset 0 1px 0 rgba(255,255,255,.16),inset 0 -6px 12px -6px rgba(0,0,0,.8)}
.brand strong{letter-spacing:-.01em}

/* Rodapé da sidebar: "Sair" com ícone alinhado */
.sidebar-foot .logout{display:inline-flex;align-items:center;gap:7px;margin:2px 0 6px}
.sidebar-foot .logout .nav-ic{width:15px;height:15px;color:currentColor}
.sidebar-ver{opacity:.65;font-variant-numeric:tabular-nums}

/* Título de página com fio dourado gravado (rúbrica) */
.page-head h1,h1{position:relative}
.page-head{border-bottom:1px solid var(--line-soft);padding-bottom:14px;
  position:relative}
.page-head::after{content:"";position:absolute;left:0;bottom:-1px;width:46px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent);
  box-shadow:0 0 12px var(--gold-glow)}

/* Rótulos de seção em small-caps gravado (aba lateral) */
.nav-group{color:var(--muted);opacity:.85}
.nav-group::before{content:"";display:inline-block;width:12px;height:1px;
  background:var(--gold-2);opacity:.5;vertical-align:middle;margin-right:7px}

/* Cards: canto superior com fio dourado sutil ao passar o mouse */
.card{transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:rgba(255,210,74,.16)}

/* Stat-cards: numeral com leve brilho dourado no hover */
.stat-card:hover .stat-num{color:var(--gold-3)}
.stat-card .stat-num{transition:color .2s}

/* Tabelas: cabeçalho com fio dourado inferior */
th{border-bottom:1px solid rgba(255,210,74,.12)}

/* Botão primário: acabamento "cunhado" (rúbrica dourada) */
.btn-primary{letter-spacing:.1px}
.btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 45%);
  opacity:.6;pointer-events:none}

/* Documento: selo do medalhão ganha realce no cabeçalho impresso */
.doc-brand .doc-logo{box-shadow:0 4px 12px -4px rgba(0,0,0,.4),
  inset 0 1px 0 rgba(255,255,255,.12)}

/* Selo d'água discreto no rodapé do papel (marca de autenticidade) */
.doc-foot{position:relative}

@media print{
  .nav-ic{color:#000}
  .brand-logo::before,.doc-logo::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .theme-toggle{display:none !important}
}

/* =============================================================================
   Detalhes azuis + botão de tema (claro/escuro)
   ========================================================================== */
/* Rúbrica do título: dourado→azul (as duas cores da marca) */
.page-head::after{background:linear-gradient(90deg,var(--gold),var(--blue));
  box-shadow:0 0 12px var(--gold-glow),0 0 10px var(--blue-glow)}
/* Traço azul no rótulo de seção da sidebar */
.nav-group::before{background:var(--blue)}
/* Foco com anel âmbar + fino contorno azul (detalhe) */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(255,210,74,.16),0 0 0 1px var(--blue-glow)}
/* Flash informativo (azul) */
.flash-info{background:var(--info-soft);border-color:var(--blue-glow);color:var(--blue-3)}

/* Botão flutuante de tema (injetado pelo app.js) */
.theme-toggle{position:fixed;right:18px;bottom:18px;z-index:200;width:46px;height:46px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--shadow);transition:transform .18s,border-color .18s,color .18s,background .18s}
.theme-toggle:hover{transform:translateY(-2px) rotate(-8deg);
  border-color:rgba(255,210,74,.4);color:var(--gold-3)}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .ic-sun{display:none}
:root[data-tema="claro"] .theme-toggle .ic-sun{display:block}
:root[data-tema="claro"] .theme-toggle .ic-moon{display:none}
:root[data-tema="claro"] .theme-toggle:hover{color:var(--blue-2)}
@media(max-width:820px){.theme-toggle{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:42px;height:42px}}

/* ---- Hub de módulos (primeira página) ----
   Vidro com ACENTO dourado, não ouro maciço: o ícone vira uma "moeda" (eco do
   medalhão da marca) e o dourado aparece no fio superior e no hover. */
.modulos-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.modulo-card{min-height:0;padding:22px;display:flex;flex-direction:column;gap:10px}
.modulo-card.highlight{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.modulo-card.highlight::after{display:block}
.modulo-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;
  background:linear-gradient(90deg,var(--gold-2),var(--gold-3) 45%,transparent 85%);
  opacity:.55;transition:opacity .2s}
.modulo-card:hover::before{opacity:1}
.modulo-card .stat-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(255,210,74,.2),rgba(255,210,74,.06));
  border:1px solid rgba(255,210,74,.35);filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.modulo-card .stat-icon .nav-ic,.modulo-card.highlight .nav-ic{width:22px;height:22px;color:var(--gold-txt)}
/* white-space:normal anula o nowrap dos indicadores: aqui o ".stat-num" é o NOME
   do módulo ("Planilha de Escrituras"), que precisa poder quebrar. */
.modulo-card .stat-num{font-size:1.15rem;line-height:1.25;color:var(--ink-strong);
  -webkit-text-fill-color:currentColor;margin-top:2px;display:flex;align-items:center;gap:8px;
  white-space:normal;letter-spacing:-.01em}
.modulo-card.highlight .stat-num{color:var(--ink-strong)}
.modulo-card .stat-label,.modulo-card.highlight .stat-label{text-transform:none;letter-spacing:0;
  line-height:1.5;color:var(--muted);font-weight:400}
/* seta de convite no canto — aparece no hover */
.modulo-card .stat-num::after{content:"→";margin-left:auto;color:var(--gold-2);
  opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s;font-weight:400}
.modulo-card:hover .stat-num::after{opacity:1;transform:none}
.modulo-breve{opacity:.5;cursor:default;border-style:dashed}
.modulo-breve::before{display:none}
.modulo-breve .stat-num::after{display:none}
.modulo-breve:hover{transform:none;border-color:var(--line)}
.modulo-breve:hover::after{opacity:0}

/* No celular o card de módulo fica compacto: ícone à esquerda do título.
   PRECISA vir depois das regras base do .modulo-card acima — @media não ganha
   especificidade, só a ordem decide. */
@media(max-width:820px){
  .modulos-grid{grid-template-columns:1fr}
  .modulo-card{padding:16px;display:grid;grid-template-columns:auto 1fr;
    column-gap:14px;row-gap:4px;align-items:center}
  .modulo-card .stat-icon{width:40px;height:40px;grid-row:1 / span 2;align-self:start}
  .modulo-card .stat-icon .nav-ic{width:19px;height:19px}
  .modulo-card .stat-num{margin:0}
  .modulo-card .stat-label{grid-column:2}
}

/* Faixa "Operando como <cliente>" (suporte do super-admin) — precisa gritar */
.operar-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:18px;padding:11px 16px;border-radius:12px;
  background:rgba(255,210,74,.14);border:1px solid rgba(255,210,74,.55);
  color:var(--ink);font-size:13.5px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.operar-banner>span{display:inline-flex;align-items:center;gap:8px;min-width:0}
.operar-banner .nav-ic{width:16px;height:16px;color:var(--gold-txt);flex:0 0 auto}
.operar-banner strong{color:var(--ink-strong)}
.operar-banner form{margin-left:auto;flex:0 0 auto}

/* Ícone junto ao título da página (substitui o emoji cru no <h1>) */
.h1-ic{display:inline-flex;vertical-align:-3px;margin-right:10px}
.h1-ic .nav-ic{width:22px;height:22px;color:var(--gold-txt)}

/* ==================== v0.7 — módulos, contas e administração ============== */
/* honeypot do registrar.php: invisível p/ humanos, iscando bots */
.hp-field{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.login-alt{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
.login-alt a{color:var(--blue);font-weight:600}
.login-alt a:hover{text-decoration:underline}
.opcional{font-weight:400;color:var(--muted)}
.muted{color:var(--muted);font-size:12.5px}

/* badges de status */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;
  font-weight:700;letter-spacing:.02em;border:1px solid var(--line);vertical-align:middle}
.badge-warn{background:rgba(255,210,74,.16);color:var(--gold-2);border-color:rgba(255,210,74,.4)}
.badge-ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(77,211,160,.35)}
.badge-off{background:var(--danger-soft);color:var(--danger);border-color:rgba(255,107,107,.3)}
.nav-badge{margin-left:auto;background:var(--gold);color:var(--gold-ink);border-radius:999px;
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;padding:0 6px}

/* administração de usuários */
.card-pendentes{border-color:rgba(255,210,74,.35)}
.pendente-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line-soft)}
.pendente-row:last-child{border-bottom:none}
.pendente-info{display:flex;flex-direction:column;gap:2px;min-width:220px;flex:1}
.pendente-modulos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:2}
.pendente-acoes{display:flex;gap:8px}
.chk-modulo{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  padding:5px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer;
  background:var(--input-bg)}
.chk-modulo:hover{border-color:var(--gold-2)}
.chk-modulo input{accent-color:var(--gold-2)}
.inline-form{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.form-modulos{gap:8px}
.inline-form select{background:var(--input-bg);border:1px solid var(--line);color:var(--ink);
  padding:6px 10px;border-radius:8px;font-size:13px}
.nav-voltar{opacity:.75}
.nav-voltar:hover{opacity:1}

/* ==================== módulo Concessionárias =============================== */
.card-titulo{font-size:15px;margin:0;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
/* align-items:start — sem isto o card mais curto do par era esticado até a altura
   do vizinho e ficava com um vão vazio embaixo da tabela. */
.conc-paineis{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;
  align-items:start}
@media(max-width:980px){.conc-paineis{grid-template-columns:1fr}}
.conc-resumo{display:flex;flex-wrap:wrap;gap:26px;align-items:center;padding:18px 20px;margin-bottom:18px}
.conc-resumo>div{display:flex;flex-direction:column;gap:2px}
.conc-resumo .muted{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.conc-resumo strong{font-size:15px}
.conc-obs{flex-basis:100%}
.conc-busca{display:flex;gap:8px;margin-bottom:16px}
.conc-busca input[type=search]{flex:1;max-width:420px;background:var(--input-bg);
  border:1px solid var(--line);color:var(--ink);padding:10px 14px;border-radius:11px}
.stat-card.alerta .stat-num{color:var(--danger)}

/* ============================ Evidon 360 ============================ */
/* O atributo `hidden` precisa vencer as regras de classe.
   Por quê: `[hidden]{display:none}` vem da folha do NAVEGADOR, que perde para
   qualquer regra de classe do autor. Como .t360-carregando e .t360-cm-form
   declaram `display:flex`, marcar `hidden` no JS não escondia nada — o
   "Carregando o tour…" ficava girando para sempre mesmo depois de a cena
   aparecer, e o formulário de comentário nascia aberto. */
[hidden]{display:none!important}
/* --- Editor --- */
.t360-editor .card{margin-bottom:16px}
.t360-editor .card>h2{margin:0 0 4px}
/* checkbox não deve esticar 100% (regra global de input) */
/* align-items:flex-start — em opção de duas linhas ("Permitir comentários dos
   visitantes (passam por sua aprovação)") o center jogava a caixinha para o meio
   do parágrafo, longe da primeira palavra que ela marca. */
.t360-check{display:flex;align-items:flex-start;gap:9px;margin-bottom:10px;cursor:pointer;
  font-size:.95rem;line-height:1.45}
.t360-check input[type=checkbox]{width:auto;flex:0 0 auto;margin:3px 0 0}
.t360-check .hint{display:inline;margin:0 0 0 3px}
.t360-row{display:flex;gap:8px;align-items:center}
.t360-row .btn{flex:0 0 auto}
.t360-status{margin-top:12px;padding:10px 14px;border-radius:10px;
  background:var(--input-bg);border:1px solid var(--line);font-size:.9rem}
.t360-status-ok{border-color:var(--ok,#3a9d5d)}
.t360-status-erro{border-color:var(--danger)}
.t360-bar{height:8px;border-radius:6px;background:var(--input-bg);
  border:1px solid var(--line);margin-top:10px;overflow:hidden}
#t360-bar-fill{height:100%;width:0;background:var(--gold-2,#c98a3a);transition:width .25s}
/* Medidas do iframe da pré-visualização. Estavam em `style=` no HTML, onde
   nenhum @media consegue alcançá-las (inline vence media query sem !important) —
   era o que impedia o celular de ter uma imagem mais alta. */
.t360-preview iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;
  background:#0a0d14;transition:filter .15s}
/* Edição de imagem: sliders + presets */
.t360-sliders{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.t360-slider label{display:flex;justify-content:space-between;font-size:12.5px;
  font-weight:600;color:var(--ink-dim);margin-bottom:4px}
.t360-slider input[type=range]{width:100%;padding:0;accent-color:var(--gold-2)}
.t360-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
@media (max-width:640px){.t360-sliders{grid-template-columns:1fr}}

/* --- Visualizador público --- */
/* 100dvh: no iOS/Android a barra de endereço come a diferença do 100vh e os
   controles ficavam parcialmente fora da tela. O 100vh fica como fallback para
   navegador antigo (a regra seguinte simplesmente o sobrescreve onde há suporte). */
.t360-body{margin:0;overflow:hidden;background:#05070c;height:100vh;height:100dvh;width:100vw}
.t360-pano{position:fixed;inset:0;width:100%;height:100%;touch-action:none}
.t360-topbar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;
  justify-content:space-between;align-items:center;padding:12px 18px;
  color:#fff;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0));
  font-size:.95rem;pointer-events:none}
.t360-title{font-weight:600}
.t360-brand{opacity:.7;font-size:.8rem;letter-spacing:.03em}
.t360-controls{position:fixed;bottom:16px;right:16px;z-index:6;display:flex;gap:8px}
.t360-controls button{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.5);color:#fff;font-size:1.2rem;backdrop-filter:blur(4px)}
.t360-controls button svg{width:22px;height:22px}
.t360-controls button.ativo{background:var(--gold-2,#c98a3a)}
/* Foco visível: sem isso a navegação por teclado (nova nesta versão) fica cega. */
.t360-controls button:focus-visible,.t360-pano:focus-visible,
.t360-hotspot:focus-visible,.t360-scene-thumb:focus-visible{
  outline:3px solid #ffd48a;outline-offset:2px}
/* Reflexo de lente — núcleo NÍTIDO (glint de sol) + halo sutil, não "borrão".
   mix-blend screen = só clareia (some no escuro, brilha no claro). */
.t360-flare{position:fixed;top:0;left:0;z-index:4;width:200px;height:200px;pointer-events:none;
  mix-blend-mode:screen;will-change:transform;background-repeat:no-repeat;background-position:center}
/* Suave: ponto branco compacto + brilho quente curto */
.t360-flare--suave{background:
  radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(255,248,224,.75) 3.5%,rgba(255,231,170,.28) 10%,rgba(255,231,170,0) 30%),
  radial-gradient(circle,rgba(255,236,196,.14) 26%,rgba(255,236,196,0) 60%)}
/* Quente: mesmo glint, tom âmbar/dourado */
.t360-flare--quente{background:
  radial-gradient(circle,rgba(255,255,252,.98) 0%,rgba(255,226,158,.7) 4%,rgba(255,181,92,.26) 12%,rgba(255,170,80,0) 32%),
  radial-gradient(circle,rgba(255,180,90,.12) 28%,rgba(255,180,90,0) 62%)}
/* Anamórfico: ponto nítido + risco horizontal fino azulado (cinema) */
.t360-flare--anamorfico{background:
  radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(255,246,214,.6) 4%,rgba(255,231,170,0) 22%),
  linear-gradient(90deg,rgba(150,200,255,0) 12%,rgba(170,210,255,.7) 50%,rgba(150,200,255,0) 88%);
  background-size:100% 100%,190% 3px}
/* Estrela: ponto nítido + 4 raios finos */
.t360-flare--estrela{background:
  radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(255,244,206,.55) 4%,rgba(255,231,170,0) 20%),
  linear-gradient(0deg,rgba(255,244,210,0) 46%,rgba(255,244,210,.75) 50%,rgba(255,244,210,0) 54%),
  linear-gradient(90deg,rgba(255,244,210,0) 46%,rgba(255,244,210,.75) 50%,rgba(255,244,210,0) 54%),
  linear-gradient(45deg,rgba(255,244,210,0) 48%,rgba(255,244,210,.4) 50%,rgba(255,244,210,0) 52%),
  linear-gradient(135deg,rgba(255,244,210,0) 48%,rgba(255,244,210,.4) 50%,rgba(255,244,210,0) 52%);
  background-size:100% 100%,3px 150%,150% 3px,100% 100%,100% 100%}
.t360-empty{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;color:#889}
.t360-embed .t360-topbar{display:none}

/* --- Estados do player: carregando e erro (antes a tela ficava preta e muda) --- */
.t360-carregando{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:8;
  display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;
  color:#e8ecf5;background:rgba(10,14,22,.72);font-size:.85rem;backdrop-filter:blur(4px)}
.t360-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  border-top-color:#ffd48a;animation:t360spin .8s linear infinite}
@keyframes t360spin{to{transform:rotate(360deg)}}
/* Painel de falha, no centro da tela. `pointer-events:none` no contêiner (e
   `auto` só no botão) é cinto de segurança: enquanto ele capturava o toque, uma
   caixa de 420px no meio do panorama engolia a PINÇA — o gesto de zoom que todo
   mundo faz justamente no centro. O JS já evita mostrá-lo quando a cena está
   visível (ver mostrarErro em tours360-viewer.js), mas se um dia voltar a
   aparecer indevidamente, o visitante ainda consegue navegar. */
.t360-erro{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;
  max-width:min(420px,88vw);padding:22px 24px;border-radius:14px;text-align:center;
  color:#f4f6fb;background:rgba(16,21,32,.96);border:1px solid rgba(255,255,255,.12);
  pointer-events:none}
.t360-erro p{margin:0 0 10px;line-height:1.5}
.t360-erro button{pointer-events:auto}
/* Mesmo motivo: o aviso de carregamento fica sobre o panorama. */
.t360-carregando{pointer-events:none}

/* Botão de WhatsApp do DONO do tour (lead vai para ele, não para a operadora).
   É item da fileira .t360-controls: assim nunca sobrepõe o selo nem a galeria de
   cenas, que no celular ocupa a faixa inteira de baixo. */
/* Nasce CÍRCULO, do tamanho dos outros controles, e só ganha o rótulo em tela
   larga. Foi medição que decidiu o corte (teste_layout_player.py): a galeria de
   cenas reserva `100vw - 290px` para os controles, número calculado quando a
   fileira só tinha botões redondos. Com a pílula de rótulo a fileira passa de
   400px e a galeria a cobria — apareceu no tablet de 768px, exatamente o defeito
   de 29/07 em outra roupa. Por isso são DUAS regras casadas: o rótulo aparece a
   partir de 1024px e, quando aparece, a galeria passa a reservar 480px. */
.t360-wa{display:flex;align-items:center;justify-content:center;gap:8px;
  width:44px;height:44px;padding:0;
  border-radius:999px;text-decoration:none;font-size:13.5px;font-weight:600;
  color:#062e14;background:#25d366;backdrop-filter:blur(4px);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.6);white-space:nowrap}
.t360-wa:hover{background:#1fbe5a}
.t360-wa svg{width:21px;height:21px;flex:0 0 auto}
.t360-wa span{display:none}
.t360-wa:focus-visible{outline:3px solid #ffd48a;outline-offset:2px}
@media (min-width:1024px){
  .t360-wa{width:auto;padding:0 16px}
  .t360-wa span{display:inline}
  /* Só encolhe a galeria QUANDO existe o botão com rótulo — tour sem WhatsApp
     configurado continua com a largura de galeria de sempre. */
  body:has(.t360-controls .t360-wa) .t360-scenes{max-width:calc(100vw - 480px)}
}

/* Botão ▶ do tour guiado: os dois ícones (play/pausa) moram na mesma célula, um
   deles sempre hidden. */
.t360-guiado span{display:flex;align-items:center;justify-content:center}
/* E a MESMA aritmética das regras acima: o botão entra na fileira exatamente
   quando a galeria de cenas existe (ambos exigem 2+ cenas), então a reserva
   cresce 52px = 44 do botão + 8 do intervalo. Sem esta regra casada o defeito de
   29/07 volta na hora — a galeria passando por cima do zoom no tablet.
   ⚠ DENTRO de min-width:701px OBRIGATORIAMENTE: o :has() é mais específico que
   a regra `.t360-scenes` do @media do celular, então fora daqui ele vencia a
   media query e deixava a galeria com 100vw−342 = 48px numa tela de 390 — meia
   miniatura, sem sinal de que havia mais cenas (relato do dono em 06/08; no
   celular a galeria tem linha própria e não precisa de reserva nenhuma). É a
   MESMA armadilha do editor em 04/08: regra fora de media query anulando a de
   dentro. Medido por teste_layout_player.py, que agora exige largura útil. */
@media (min-width:701px){
  body:has(.t360-controls .t360-guiado) .t360-scenes{max-width:calc(100vw - 342px)}
}
@media (min-width:1024px){
  body:has(.t360-controls .t360-guiado):has(.t360-controls .t360-wa) .t360-scenes{
    max-width:calc(100vw - 532px)}
}

/* ===== Arredores (pontos de interesse do imóvel) ===== */
/* O botão é item de .t360-controls, então já vem circular e 44px daquela regra.
   Fica SÓ com ícone de propósito (o rótulo viraria mais largura na fileira e
   reabriria a aritmética frágil da galeria de cenas — defeito de 29/07). O nome
   acessível vem do aria-label, não do <span>. */
.t360-arr-btn span{display:none}
/* Painel: acima dos controles (z 7 > controles 6), canto inferior direito, com
   FUNDO OPACO — --panel é translúcido nos dois temas e o texto passaria fantasma
   por cima do panorama (mesma lição do card fixo do editor). */
.t360-arr-painel{position:fixed;z-index:7;right:16px;bottom:70px;
  width:min(320px,calc(100vw - 32px));max-height:min(60vh,420px);overflow-y:auto;
  background:#0f1420;color:#eef2f8;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:12px 14px;box-shadow:0 10px 30px -8px rgba(0,0,0,.7)}
.t360-arr-cab{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px}
.t360-arr-cab strong{font-size:15px}
.t360-arr-fechar{background:none;border:0;color:inherit;font-size:22px;
  line-height:1;cursor:pointer;padding:0 4px}
.t360-arr-grupo{margin-top:10px}
.t360-arr-grupo h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  opacity:.7;margin:0 0 4px}
.t360-arr-grupo ul{list-style:none;margin:0;padding:0}
.t360-arr-grupo li{display:flex;justify-content:space-between;gap:12px;
  padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.t360-arr-grupo li:last-child{border-bottom:0}
.t360-arr-painel .t360-arr-dist{opacity:.7;white-space:nowrap;flex:0 0 auto}
@media (max-width:700px){
  .t360-arr-painel{right:8px;left:8px;width:auto;bottom:64px}
}

/* Linhas de arredores no EDITOR: blocos que empilham no celular (não tabela — a
   tabela rola dentro da caixa e o campo sai da tela em 390px, lição de 19/08). */
.t360-arr-linha{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.t360-arr-linha .t360-arr-nome{flex:1 1 160px;min-width:0}
.t360-arr-linha .t360-arr-dist{flex:0 1 90px;min-width:0}
.t360-arr-linha .t360-arr-cat{flex:0 1 130px;min-width:0}
.t360-arr-linha .t360-arr-remover{flex:0 0 auto;line-height:1}
/* Busca automática de arredores (Fase 3). */
.t360-arr-auto{margin:6px 0 12px;padding:10px;border:1px dashed rgba(128,128,128,.4);border-radius:10px}
.t360-arr-achados{margin-top:10px}
.t360-arr-achado{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:14px}
.t360-arr-achado input{flex:0 0 auto;width:auto}

/* ===== Capa aérea (Fase 2): pins sobre a foto de abertura ===== */
/* No PLAYER: camada de pins sobre o fundo da capa. O ponteiro só nos pins (a
   capa toda continua clicável para entrar); rótulo escondido até tocar/hover. */
.t360-capa-pins{position:absolute;inset:0;z-index:1;pointer-events:none}
.t360-capa-pin{position:absolute;transform:translate(-50%,-100%);
  pointer-events:auto;background:none;border:0;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:4px}
.t360-capa-pin-ponto{width:16px;height:16px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:#e0483d;border:2px solid #fff;
  box-shadow:0 2px 6px -1px rgba(0,0,0,.6)}
.t360-capa-pin-rotulo{max-width:180px;font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(15,20,32,.9);padding:3px 8px;border-radius:8px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .15s ease;
  transform:translateY(-4px)}
.t360-capa-pin-rotulo em{font-style:normal;opacity:.7;margin-left:4px}
.t360-capa-pin:hover .t360-capa-pin-rotulo,
.t360-capa-pin.aberto .t360-capa-pin-rotulo,
.t360-capa-pin:focus-visible .t360-capa-pin-rotulo{opacity:1}
.t360-capa-pin:focus-visible{outline:3px solid #ffd48a;outline-offset:3px;border-radius:6px}

/* No EDITOR: a foto com os pins arrastáveis. Imagem responsiva, pins por cima. */
.t360-aerea-mapa{position:relative;max-width:100%;margin-bottom:6px;
  border:1px solid rgba(128,128,128,.35);border-radius:10px;overflow:hidden;
  touch-action:none}
.t360-aerea-mapa img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.t360-aerea-pins{position:absolute;inset:0}
.t360-aerea-pin{position:absolute;transform:translate(-50%,-100%);cursor:grab;
  background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.t360-aerea-pin:active{cursor:grabbing}
.t360-aerea-pin-ponto{width:15px;height:15px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:#e0483d;border:2px solid #fff;
  box-shadow:0 2px 5px -1px rgba(0,0,0,.5)}
.t360-aerea-pin-txt{font-size:11.5px;font-weight:600;color:#fff;
  background:rgba(15,20,32,.9);padding:2px 7px;border-radius:7px;white-space:nowrap;
  max-width:150px;overflow:hidden;text-overflow:ellipsis}

/* ===== Tela de capa (primeiro quadro antes do panorama) ===== */
/* Desenhada pelo servidor; o JS só a remove. Cobre a tela inteira e fica ACIMA
   de tudo (z-index 10 > erro 9 > controles 6) — enquanto ela está aberta, o tour
   ainda está carregando atrás e não há nada para interagir. */
.t360-capa{position:fixed;inset:0;z-index:10;display:grid;place-items:center;
  padding:24px;cursor:pointer;transition:opacity .3s ease;
  background:radial-gradient(120% 90% at 50% 15%,#16203a 0%,#0b0f18 70%)}
.t360-capa-saindo{opacity:0}
.t360-capa-fundo{position:absolute;inset:0;background:center/cover no-repeat;
  filter:brightness(.45) saturate(1.05);transform:scale(1.04)}
.t360-capa-caixa{position:relative;max-width:min(560px,92vw);text-align:center;color:#fff}
.t360-capa-marca{margin:0 0 10px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
/* O h1 global é pintado por GRADIENTE clipado no texto
   (`background:var(--heading)` + `-webkit-text-fill-color:transparent`), então
   `color` sozinho não muda nada — o título da capa saía cinza-azulado e menos
   legível que o subtítulo (visto na primeira captura). Anulado do mesmo jeito que
   `.doc h1` já fazia para o papel do orçamento. */
.t360-capa-titulo{margin:0;font-size:clamp(24px,5.5vw,38px);line-height:1.15;
  background:none;color:#fff;-webkit-text-fill-color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.6)}
.t360-capa-texto{margin:12px 0 0;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.t360-capa-btn{margin-top:22px;min-height:48px;padding:0 26px;font-size:15.5px}
.t360-capa-dica{margin:14px 0 0;font-size:12.5px;color:rgba(255,255,255,.6)}

/* ===== Selo do chão (patch de nadir) ===== */
/* O elemento é DEITADO no plano do chão pelo `perspective` do Marzipano (ver
   desenharNadir); aqui só a aparência. `pointer-events:none` porque ele fica
   sobre a área onde o visitante arrasta para girar. */
.t360-nadir{display:grid;place-items:center;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(12,16,26,.96) 62%,rgba(12,16,26,.72) 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.22) inset,0 0 40px rgba(0,0,0,.6)}
.t360-nadir span{max-width:76%;text-align:center;font-size:26px;font-weight:700;
  letter-spacing:.04em;line-height:1.2;color:rgba(255,255,255,.9);
  text-transform:uppercase;overflow-wrap:break-word}

/* Linhas de "antes e depois" no EDITOR: blocos que empilham no celular, como as
   linhas de arredores (a lição de 19/08: tabela rola dentro da caixa e o campo
   sai da tela em 390px). `min-width:0` nos filhos porque item de flex não encolhe
   abaixo do conteúdo, e sem isso o select estoura a linha (defeito de 18/08 no
   campo de renomear pasta do Vídeo). */
.t360-cmp-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.t360-cmp-linha select{flex:1 1 150px;min-width:0}
.t360-cmp-linha .t360-cmp-rot{flex:0 1 110px;min-width:0}
.t360-cmp-seta{flex:0 0 auto;opacity:.6;font-size:16px}

/* ===== Antes e depois (28/08) ===== */
/* Alternador no TOPO AO CENTRO, e não na fileira de controles: aquela fileira
   disputa largura com a galeria de cenas por uma aritmética frágil (defeito de
   29/07, que voltou em 06/08), e mais um botão ali a reabriria. O topo ao centro
   está livre com a topbar (título à esquerda, logo à direita) e no embed.
   `top:58px` deixa a topbar respirar; no embed ela não existe e ele sobe. */
.t360-comparar{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;gap:0;padding:3px;border-radius:999px;background:rgba(10,14,22,.72);
  backdrop-filter:blur(4px);box-shadow:0 4px 14px -4px rgba(0,0,0,.55)}
.t360-embed .t360-comparar{top:14px}
.t360-comparar button{border:0;cursor:pointer;padding:7px 15px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;line-height:1;
  background:transparent;color:rgba(255,255,255,.72);white-space:nowrap;
  max-width:42vw;overflow:hidden;text-overflow:ellipsis}
/* O lado em que já se está fica marcado e DESABILITADO: clicar nele não faria
   nada, e um botão que não faz nada é pior que um botão ausente. */
.t360-comparar button.ativo{background:#fff;color:#101828;cursor:default}
.t360-comparar button:not(.ativo):hover{color:#fff;background:rgba(255,255,255,.14)}
.t360-comparar button:focus-visible{outline:3px solid #ffd48a;outline-offset:2px}
@media (max-width:700px){
  .t360-comparar{top:52px}
  .t360-comparar button{padding:6px 12px;font-size:12px}
}

/* ===== Marca do cliente no player (Fase 5, 27/08) ===== */
/* Logo: canto superior DIREITO, o único livre no player (embaixo à esquerda é o
   selo do Evidon, a faixa de baixo é a galeria de cenas, embaixo à direita são os
   controles e em cima à esquerda é o título). z-index 5 = o mesmo da topbar, com
   a qual ele nunca disputa espaço, porque a topbar esconde o nome em texto quando
   existe logo. Abaixo da capa (z 10), que tem o seu próprio.
   `pointer-events:none` porque ele fica sobre a área onde se arrasta para girar:
   sem isso, começar o giro no canto do logo não giraria nada. */
.t360-logo{position:fixed;top:10px;right:16px;z-index:5;max-height:38px;max-width:26vw;
  opacity:.92;pointer-events:none;user-select:none;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
/* No embed a topbar não existe, então o logo sobe para o topo real. */
.t360-embed .t360-logo{top:12px}
@media (max-width:700px){
  /* No celular a topbar tem o título ocupando a largura, e o logo grande roubaria
     a leitura dele. Medido em 390px. */
  .t360-logo{max-height:28px;max-width:34vw;right:10px}
}
/* Logo na capa: ali ele é conteúdo da caixa central, não canto, e substitui a
   linha de nome em texto (.t360-capa-marca). */
.t360-capa-logo{display:block;margin:0 auto 14px;max-height:64px;max-width:min(240px,60vw)}

/* Marca d'água: a POSIÇÃO vem do JavaScript (ela passeia pelos cantos a cada 20s,
   porque marca parada é marca que se recorta), e aqui fica só a aparência. Começa
   em cima à esquerda, que é o canto sem controle nenhum. Discreta de propósito:
   ela serve para dizer "esta cópia saiu daqui", não para estragar a foto que o
   cliente está vendendo. */
.t360-agua{position:fixed;top:52px;left:14px;z-index:5;pointer-events:none;user-select:none;
  font-size:clamp(9px,1.6vw,12.5px);color:rgba(255,255,255,.42);letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.6);transition:top .5s ease,bottom .5s ease,
  left .5s ease,right .5s ease}

/* Selo do produto (o tenant pode desligar em Ajustes do tour). */
.t360-selo{position:fixed;left:12px;top:auto;bottom:16px;z-index:5;padding:5px 11px;
  border-radius:999px;font-size:11px;letter-spacing:.02em;text-decoration:none;
  color:rgba(255,255,255,.82);background:rgba(0,0,0,.42);backdrop-filter:blur(4px)}
.t360-selo:hover{color:#fff;background:rgba(0,0,0,.6)}
/* Com galeria de cenas no canto esquerdo, o selo sobe para não cobri-la. */
.t360-scenes~.t360-selo,.t360-selo:has(~.t360-scenes){bottom:86px}

/* ===== Multi-cena + hotspots (fase 5) ===== */
/* Cursor no modo "escolher ponto" (editor pediu {t360:'pick-on'}) */
.t360-pano.t360-picking,.t360-pano.t360-picking *{cursor:crosshair!important}

/* --- Marcadores de hotspot dentro do panorama --- */
/* Agora é um <button> (foco e Enter funcionam): zera a aparência nativa. */
.t360-hotspot{position:relative;display:flex;align-items:center;gap:6px;pointer-events:auto;
  cursor:pointer;transform:translate(-50%,-50%);user-select:none;-webkit-user-select:none;
  padding:0;border:0;background:none;font:inherit;color:inherit}
.t360-hotspot-ic svg{width:19px;height:19px}
.t360-hotspot-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  flex:0 0 auto;border-radius:50%;font-size:17px;font-weight:700;line-height:1;color:#fff;
  background:rgba(20,26,38,.72);border:2px solid rgba(255,255,255,.9);
  box-shadow:0 2px 10px rgba(0,0,0,.45);transition:transform .12s,background .12s}
.t360-hotspot:hover .t360-hotspot-ic{transform:scale(1.12);background:rgba(201,138,58,.95)}
.t360-hotspot--info .t360-hotspot-ic{font-style:italic;font-family:Georgia,serif}
.t360-hotspot-lb{max-width:200px;padding:4px 9px;border-radius:8px;font-size:12.5px;color:#fff;
  background:rgba(20,26,38,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
.t360-hotspot::before{content:"";position:absolute;left:17px;top:17px;width:34px;height:34px;
  margin:-17px 0 0 -17px;border-radius:50%;border:2px solid rgba(255,255,255,.7);
  animation:t360pulse 2s ease-out infinite;pointer-events:none}
@keyframes t360pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.2);opacity:0}}
/* Rótulo de texto não pulsa (não é um botão a ser encontrado, é conteúdo). */
.t360-rotulo::before{display:none}

/* Quem pediu menos movimento no sistema não recebe pulso nem rotação
   (o player também não liga a autorrotação nesse caso — ver o viewer). */
@media (prefers-reduced-motion:reduce){
  .t360-hotspot::before{animation:none;opacity:.35}
  .t360-spin{animation:none}
}

/* --- Rótulo de TEXTO sobre a imagem (hotspot tipo 'texto') --- */
.t360-rotulo{position:relative;display:flex;flex-direction:column;gap:2px;max-width:min(320px,60vw);
  transform:translate(-50%,-50%);color:#fff;text-align:center;pointer-events:none;
  text-shadow:0 2px 8px rgba(0,0,0,.7);user-select:none;-webkit-user-select:none}
.t360-rotulo strong{font-weight:600;line-height:1.2}
.t360-rotulo span{opacity:.92;line-height:1.35}
.t360-rotulo--pequeno{font-size:12px}
.t360-rotulo--medio{font-size:15px}
.t360-rotulo--grande{font-size:21px}
.t360-rotulo--fundo{padding:7px 13px;border-radius:10px;background:rgba(16,21,32,.68);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(3px);text-shadow:none}

/* --- Comentário do visitante: marcador e formulário --- */
.t360-hotspot--comentario .t360-hotspot-ic{background:rgba(58,157,93,.82)}
.t360-cm-form{position:fixed;right:16px;bottom:74px;z-index:9;width:min(330px,90vw);
  display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:14px;
  color:#f4f6fb;background:rgba(16,21,32,.97);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.55)}
.t360-cm-form h3{margin:0 0 2px;font-size:1rem}
.t360-cm-form input,.t360-cm-form textarea{width:100%;padding:8px 10px;border-radius:8px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f4f6fb;
  font:inherit;font-size:.9rem}
.t360-cm-form textarea{resize:vertical}
.t360-cm-aviso{margin:0;font-size:11.5px;opacity:.7}
.t360-cm-acoes{display:flex;gap:8px}
.t360-cm-msg{margin:0;font-size:12.5px;min-height:1em;opacity:.9}
/* Campo-armadilha para robô de spam: fora da tela, nunca visto por gente. */
.t360-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none}

/* --- Popup de informação --- */
.t360-hs-popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;
  max-width:min(420px,86vw);padding:20px 22px;border-radius:14px;color:#f4f6fb;
  background:rgba(16,21,32,.96);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.55)}
.t360-hs-popup h3{margin:0 0 8px;font-size:1.1rem}
.t360-hs-popup p{margin:0;line-height:1.55;font-size:.95rem;opacity:.92;white-space:pre-wrap}
.t360-hs-popup-x{position:absolute;top:8px;right:10px;width:30px;height:30px;border:0;cursor:pointer;
  border-radius:50%;background:transparent;color:#f4f6fb;font-size:22px;line-height:1;opacity:.7}
.t360-hs-popup-x:hover{opacity:1}

/* --- Vídeo do hotspot (iframe de plataforma externa) ---
   Largura em vw/vh e não em px: o vídeo tem de caber no CELULAR em pé, onde
   min(...) resolve para a largura da tela. A moldura usa aspect-ratio 16/9 com
   o iframe em position:absolute porque o iframe do YouTube ignora height:auto.
   z-index 10 = um acima do popup de informação (.t360-hs-popup, z-index 9),
   para o caso de um clique abrir os dois em sequência. */
.t360-video{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;
  width:min(880px,94vw);max-height:92vh;padding:14px;border-radius:14px;color:#f4f6fb;
  background:rgba(12,16,24,.98);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 60px rgba(0,0,0,.66)}
.t360-video h3{margin:2px 34px 10px 4px;font-size:1rem;font-weight:600}
.t360-video-frame{position:relative;width:100%;aspect-ratio:16/9;max-height:78vh;
  border-radius:10px;overflow:hidden;background:#000}
.t360-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.t360-video-x{position:absolute;top:6px;right:8px;width:34px;height:34px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(0,0,0,.45);color:#f4f6fb;font-size:24px;line-height:1;opacity:.85}
.t360-video-x:hover{opacity:1}

/* --- Galeria de miniaturas no rodapé do player --- */
/* A reserva à direita tem de caber a FILEIRA DE CONTROLES inteira: 5 botões de
   44px com 8px de intervalo = 252px. Estava 130px, menos da metade — e como as
   duas caixas são fixed no mesmo bottom, a galeria passava por cima da lupa e do
   zoom. (No celular nem 252px de folga resolvem: ver o @media abaixo.) */
.t360-scenes{position:fixed;left:12px;bottom:16px;z-index:6;display:flex;gap:8px;max-width:calc(100vw - 290px);
  overflow-x:auto;padding:4px;scrollbar-width:thin}
.t360-scene-thumb{position:relative;flex:0 0 auto;width:104px;height:60px;border-radius:8px;cursor:pointer;
  border:2px solid rgba(255,255,255,.25);background:#0a0d14 center/cover no-repeat;overflow:hidden;padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,.4);transition:border-color .12s,transform .12s}
.t360-scene-thumb:hover{transform:translateY(-2px)}
.t360-scene-thumb.ativo{border-color:var(--gold-2,#c98a3a)}
.t360-scene-cap{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font-size:10.5px;color:#fff;
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.75))}

/* No celular a galeria e os controles NÃO cabem na mesma linha: a fileira de
   botões mede 252px e três miniaturas medem 336px, então em 360px de tela a
   galeria invadia 150px dos controles e cobria a lupa e o zoom (relato do
   usuário em 2026-07-29). A galeria passa a ter linha própria ACIMA deles, com
   miniatura menor, e o selo sobe para não ficar embaixo dela.
   O empilhamento é por posição, não por z-index: os dois estão em z-index 6 e a
   galeria é criada por JS depois no DOM, então ela ganharia sempre. */
@media (max-width:700px){
  /* env(safe-area-inset-bottom): no iPhone (barra de gesto) e em navegador
     Android com barra inferior, a faixa de baixo da tela não é utilizável —
     era uma das metades do "as cenas cortam" relatado em 06/08. Em desktop a
     função vale 0 e nada muda. */
  .t360-scenes{left:8px;right:8px;bottom:calc(70px + env(safe-area-inset-bottom));max-width:none}
  .t360-scene-thumb{width:84px;height:50px}
  .t360-scene-cap{font-size:10px;padding:2px 5px}
  .t360-scenes~.t360-selo,.t360-selo:has(~.t360-scenes){bottom:calc(134px + env(safe-area-inset-bottom))}
  .t360-controls{bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* "Tem mais cena para o lado": no celular não existe barra de rolagem, então a
   última miniatura visível parecia a última que existe. A máscara esvanece a
   borda direita ENQUANTO houver conteúdo escondido (classe posta pelo player,
   que ouve o scroll) — meia miniatura sumindo no fade é o sinal universal de
   "arrasta para ver mais". */
.t360-scenes--mais{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.t360-scenes{scroll-snap-type:x proximity;scroll-behavior:smooth}
.t360-scene-thumb{scroll-snap-align:start}

/* ===== Leads: kanban ===== */
/* Colunas lado a lado com rolagem horizontal — no celular (onde o dono tria
   lead) cada coluna ocupa quase a tela e desliza com o dedo; scroll-snap para
   a coluna "encaixar". Grid de colunas fixas quebraria em 5 colunas de 70px. */
.leads-kanban{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;
  scroll-snap-type:x proximity;align-items:flex-start}
.leads-col{flex:0 0 272px;scroll-snap-align:start;background:var(--panel);
  border:1px solid var(--line-soft,rgba(255,255,255,.08));border-radius:14px;padding:12px}
.leads-col-titulo{margin:0 0 10px;font-size:14px;display:flex;align-items:center;gap:8px}
.leads-card{background:var(--input-bg);border:1px solid var(--line-soft,rgba(255,255,255,.08));
  border-radius:10px;padding:10px 12px;margin-bottom:10px;display:flex;flex-direction:column;gap:6px}
.leads-nome{font-size:14px}
.leads-msg{margin:0;font-size:12.5px;opacity:.85;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.leads-acoes{gap:6px}
/* Verde do WhatsApp: é o botão de AÇÃO do cartão, quem tria quer responder.
   `.btn-zap` é o nome geral (Cobranças usa em "A receber" e no painel, para abrir
   a cobrança); `.leads-wa` continua valendo para não reescrever o kanban. Uma
   cor, dois nomes, nenhuma cópia do valor hexadecimal. */
.btn-zap,.leads-wa{background:#25d366;color:#062e14;border:0}
.btn-zap:hover,.leads-wa:hover{background:#1fbe5a;color:#062e14}
.leads-mover{gap:6px;margin-top:2px}
.leads-mover select{flex:1;min-width:0;font-size:12.5px;padding:6px 8px}
.leads-vazia{text-align:center;opacity:.5;margin:14px 0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}

/* --- Editor: lista de cenas --- */
.t360-cenas-list{display:flex;flex-direction:column;gap:10px}
.t360-cena-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px;border-radius:10px;background:var(--input-bg);border:1px solid var(--border,rgba(255,255,255,.08))}
.t360-cena-thumb{flex:0 0 auto;width:64px;height:38px;border-radius:6px;background:#0a0d14 center/cover no-repeat}
.t360-cena-titulo{flex:1 1 160px;min-width:120px}
.t360-cena-item .t360-row{margin-left:auto}

/* --- Editor: hotspots --- */
.t360-hs-form{padding:14px;border-radius:10px;background:var(--input-bg);
  border:1px solid var(--border,rgba(255,255,255,.08));margin-bottom:14px}
.t360-hs-list{display:flex;flex-direction:column;gap:8px}
.t360-hs-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  background:var(--input-bg);border:1px solid var(--border,rgba(255,255,255,.08))}
.t360-hs-info{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.t360-hs-info>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t360-hs-item .btn{flex:0 0 auto}

/* --- Editor: cena cadastrada cujos arquivos sumiram do servidor --- */
.t360-alerta{border-color:var(--danger)!important}
.t360-alerta h2{color:var(--danger)}
.t360-alerta p{margin:0 0 8px;line-height:1.5}
.badge-danger{background:var(--danger);color:#fff}
.t360-cena-quebrada{border-color:var(--danger)}
.t360-cena-quebrada .t360-cena-thumb{background:repeating-linear-gradient(45deg,
  rgba(190,60,60,.18) 0 6px,rgba(190,60,60,.06) 6px 12px)}

/* --- Editor: painel da panorâmica de celular --- */
.t360-pano-form{margin-top:14px;padding:14px 16px;border-radius:10px;
  background:var(--input-bg);border:1px solid var(--gold-2,#c98a3a)}
.t360-pano-form h3{margin:0 0 6px;font-size:1rem}
.t360-pano-form p{margin:0 0 10px;line-height:1.5;font-size:.93rem}
.t360-pano-form .t360-sliders{margin:12px 0}

/* Guia de captura (recolhido por padrão: só interessa a quem não tem câmera) */
.t360-ajuda{margin-top:14px;padding:10px 14px;border-radius:10px;background:var(--input-bg)}
.t360-ajuda summary{cursor:pointer;font-weight:600;font-size:.92rem}
.t360-ajuda p{margin:10px 0 0;line-height:1.55;font-size:.9rem}

/* --- Editor: números de visualização --- */
.t360-metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.t360-metricas>div{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 6px;border-radius:10px;background:var(--input-bg);
  border:1px solid var(--card-bd,rgba(0,0,0,.08))}
.t360-metricas strong{font-size:1.35rem;line-height:1}
.t360-metricas span{font-size:11.5px;opacity:.72}

/* --- Editor: fila de moderação de comentários --- */
.t360-cm-list{display:flex;flex-direction:column;gap:10px}
.t360-cm-item{display:flex;flex-direction:column;gap:8px;padding:11px 13px;border-radius:10px;
  background:var(--input-bg);border:1px solid var(--card-bd,rgba(0,0,0,.08))}
.t360-cm-corpo{display:flex;flex-direction:column;gap:3px}
.t360-cm-corpo p{margin:4px 0 0;line-height:1.45;font-size:.93rem;white-space:pre-wrap}
.t360-cm-item .t360-row{flex-wrap:wrap}

/* --- Editor 360 em tela dividida (preview fixa + controles roláveis) --- */
/* A tela dividida exige `.t360-nav-on`, classe que o JS põe no editor ao ligar
   as abas (26/08). Sem JavaScript não há navegação, e duas colunas com TODOS os
   painéis abertos deixariam os campos num corredor estreito: sem a classe tudo
   empilha em largura cheia, que é a degradação honesta. A lateral cresceu de
   440 para 560px porque agora é ela que carrega os ajustes, que viviam numa
   faixa de largura cheia embaixo. */
/* 🔴 A regra de tela dividida NÃO pode nascer fora de media query, e isto já
   custou a pré-visualização de 0×0 no celular em 04/08. `.t360-split.t360-nav-on`
   tem DUAS classes, então vence o `display:block` de uma classe do
   `@media(max-width:980px)` por especificidade, e o grid volta a valer no
   celular: a lateral leva seu mínimo e sobra zero para a imagem. O grid mora
   inteiro no media query de 981px, abaixo. */
.t360-split .t360-col-side{min-width:0}
@media (max-width:980px){
  /* `display:block`, não grid de uma coluna: em grid cada item ganha a SUA
     linha, e `position:sticky` não sai da própria linha — a imagem "fixa" que
     esta regra promete desde sempre nunca funcionou no celular. Em fluxo de
     bloco os dois filhos dividem o mesmo contexto e a imagem acompanha a
     rolagem dos controles, que é o que permite marcar hotspot e definir a vista
     inicial vendo o que se está fazendo. */
  .t360-split{display:block}
  /* `top:62px` = altura da .topbar do hub, que é sticky com z-index 60 no
     celular. Com top:0 a imagem escorregaria PARA BAIXO dela e perderia essa
     faixa. Se a topbar mudar de altura, este número muda junto. */
  .t360-split .t360-col-main{position:sticky;top:62px;z-index:3;margin-bottom:14px}
  /* A imagem é o instrumento de trabalho: ganha proporção mais alta (4/3 em vez
     de 16/9) e o card aperta as próprias margens para não roubar altura dela. */
  .t360-preview iframe{aspect-ratio:4/3;max-height:42vh}
  /* Fundo OPACO e sombra: `--panel` é translúcido (rgba) nos dois temas, e num
     card fixo isso deixa o conteúdo que passa por baixo aparecer fantasma
     através dele — o título "Edição da imagem" era lido dentro da imagem
     (visto na captura de 04/08). Sombra para o card se ler como camada acima. */
  .t360-col-main .card{padding:12px;background:var(--bg-3);
    box-shadow:0 10px 24px -14px rgba(0,0,0,.55)}
  .t360-col-main .card>h2{font-size:14px;margin-bottom:8px}
  /* A dica ("a imagem reflete os ajustes ao vivo") custa duas linhas de altura na
     área que precisa ser imagem. Ela continua no desktop. */
  .t360-col-main .hint{display:none}
}

/* --- Barra lateral recolhível (só desktop; no mobile já é gaveta) ---
   ATENÇÃO aos seletores: o medalhão da marca é um <div> e o ícone do botão é um
   <span> — esconder ".brand>div" e ".nav-collapse span" apagava o medalhão e
   deixava o botão vazio (bug relatado em 2026-07-30). Por isso os alvos têm
   classe própria: .brand-txt e .nav-collapse-tx. */
.nav-collapse{display:none}
@media (min-width:821px){
  .nav-collapse{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-start;
    padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;
    color:var(--muted);cursor:pointer;font:inherit;font-size:12.5px;margin-bottom:8px;
    transition:background .16s,color .16s,border-color .16s}
  .nav-collapse:hover{background:var(--panel);color:var(--ink-strong);border-color:var(--gold-2)}
  .nav-collapse-ic{display:inline-flex;line-height:1;transition:transform .2s}
  .nav-collapse-ic .nav-ic{width:15px;height:15px;color:currentColor}
  .sidebar{transition:width .22s,flex-basis .22s}
  body.sidebar-collapsed .sidebar{width:68px;flex-basis:68px}
  body.sidebar-collapsed .sidebar .brand{justify-content:center;padding:20px 0}
  body.sidebar-collapsed .brand-txt,
  body.sidebar-collapsed .nav-item span,
  body.sidebar-collapsed .nav-group,
  body.sidebar-collapsed .sidebar-foot .user,
  body.sidebar-collapsed .sidebar-foot .logout span,
  body.sidebar-collapsed .sidebar-ver,
  body.sidebar-collapsed .nav-collapse-tx{display:none}
  body.sidebar-collapsed .brand-logo{--coin:38px}
  body.sidebar-collapsed .sidebar nav{padding:12px 10px}
  body.sidebar-collapsed .nav-item{justify-content:center;padding:11px 0}
  body.sidebar-collapsed .nav-item:hover{transform:none}
  /* o contador vira um ponto no canto do ícone (o número não cabe centrado) */
  body.sidebar-collapsed .nav-badge{position:absolute;top:6px;right:10px;margin:0;
    min-width:9px;width:9px;height:9px;padding:0;font-size:0;overflow:hidden}
  body.sidebar-collapsed .nav-collapse{justify-content:center;padding:9px 0}
  body.sidebar-collapsed .nav-collapse-ic{transform:scaleX(-1)}
  body.sidebar-collapsed .sidebar-foot{padding:14px 10px;text-align:center}
  body.sidebar-collapsed .sidebar-foot .logout{display:flex;justify-content:center;
    margin:4px 0;padding:7px 0;border-radius:9px}
  body.sidebar-collapsed .sidebar-foot .logout:hover{background:var(--panel)}
  body.sidebar-collapsed .sidebar-foot .logout .nav-ic{width:17px;height:17px}
}

/* ==========================================================================
   CAPTURA GUIADA 360° NO CELULAR (Etapa 1) — app/tours360_captura.php
   O usuário aponta o celular para os alvos e o disparo é automático; por isso a
   tela é preta, sem cromo, e tudo que não é a imagem fica em cantos fixos.
   ========================================================================== */
.t360cap-passos{margin:0 0 12px;padding-left:22px;line-height:1.55}
.t360cap-passos li{margin-bottom:7px}
.t360cap-alerta{padding:11px 14px;border-radius:10px;background:var(--danger-soft,rgba(214,69,69,.1));
  border:1px solid var(--danger);}
.t360cap-alerta p{margin:0 0 8px;line-height:1.5}
.t360cap-alerta p:last-child{margin:0}

/* 100dvh com fallback 100vh: no iOS/Android a barra de endereço come a diferença
   do 100vh e os botões de baixo ficariam fora da tela (achado U3 do 360). */
.t360cap-tela{position:fixed;inset:0;z-index:300;background:#05070c;
  height:100vh;height:100dvh;width:100vw;overflow:hidden}
body.t360cap-ativo{overflow:hidden}
.t360cap-video{position:absolute;inset:0;width:100%;height:100%;
  /* contain (e não cover): o que aparece é exatamente o que vai para o arquivo,
     então o alvo desenhado cai no mesmo ponto que a foto vai registrar. */
  object-fit:contain;background:#05070c}
.t360cap-camada{position:absolute;inset:0;pointer-events:none}

/* Mira central fixa — referência para o usuário centralizar o alvo. */
.t360cap-mira{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border:1.5px solid rgba(255,255,255,.55);border-radius:50%;pointer-events:none}
.t360cap-mira::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;border-radius:50%;background:rgba(255,255,255,.8)}
/* Anel de travamento: conic-gradient sobre --trava (0..1, escrito pelo JS a cada
   quadro). É o progresso do disparo automático VISTO NA MIRA — o olho do usuário
   está no centro da tela enquanto ele tenta firmar, não na frase do topo.
   Transição curta em opacity só: animar o gradiente a 60 fps custaria pintura à
   toa e o valor já vem suavizado pelo filtro. */
.t360cap-mira{--trava:0}
.t360cap-mira-anel{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  opacity:calc(var(--trava) * .95);transition:opacity .12s linear;
  background:conic-gradient(rgba(120,230,150,.95) calc(var(--trava) * 360deg),
                            transparent 0);
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px))}

/* Alvos: círculo pendente → dourado quando mirado → verde quando capturado. */
.t360cap-alvo{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);background:rgba(0,0,0,.25);
  box-shadow:0 0 0 1px rgba(0,0,0,.35);transition:background .15s,border-color .15s}
.t360cap-alvo--opcional{border-style:dashed}
.t360cap-alvo--mirado{border-color:var(--gold,#ffd24a);background:rgba(255,210,74,.3);
  animation:t360cap-pulso 1s ease-in-out infinite}
.t360cap-alvo--feito{border-color:#3a9d5d;background:rgba(58,157,93,.45);width:26px;height:26px}
.t360cap-alvo--feito::after{content:"";position:absolute;left:7px;top:11px;width:10px;height:5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
@keyframes t360cap-pulso{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.14)}}
/* Movimento infinito é o caso clássico de gatilho vestibular — quem pediu menos
   animação recebe o mesmo destaque sem pulsar. */
@media (prefers-reduced-motion:reduce){
  .t360cap-alvo--mirado{animation:none;background:rgba(255,210,74,.5)}
  .t360cap-alvo{transition:none}
}

.t360cap-hud-topo{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:10px 12px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.62),transparent);
  font-size:13.5px}
.t360cap-progresso{flex:0 0 auto;font-weight:600;padding:4px 9px;border-radius:8px;
  background:rgba(0,0,0,.45)}
/* Selo de direção: flex:0 0 auto para não roubar largura da mensagem, e
   font-variant-numeric tabular para o número não "pular" a cada grau. */
.t360cap-norte{flex:0 0 auto;font-weight:600;padding:4px 8px;border-radius:8px;
  background:rgba(0,0,0,.45);font-variant-numeric:tabular-nums;white-space:nowrap}
.t360cap-norte--bussola{background:rgba(22,120,60,.62)}
/* min-width:0 para a mensagem PODER encolher: sem isso um item flex nunca fica
   menor que o próprio conteúdo, e o selo de direção empurraria o botão de sair
   fora da tela em celular estreito. */
.t360cap-msg{flex:1 1 auto;min-width:0;line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.t360cap-hud-base{position:absolute;bottom:0;left:0;right:0;display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(0,0,0,.62),transparent)}
.t360cap-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;
  padding:9px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.5);color:#fff;font:inherit;font-size:13.5px;cursor:pointer}
.t360cap-btn:hover{background:rgba(0,0,0,.68)}
.t360cap-btn:disabled{opacity:.45;cursor:default}
.t360cap-btn--ok{background:var(--gold-2,#c98a3a);border-color:transparent;color:#1a1503;font-weight:600}
.t360cap-btn--x{flex:0 0 auto;width:42px;padding:0}
.t360cap-btn--x svg{width:20px;height:20px}
.t360cap-btn:focus-visible{outline:2px solid var(--gold,#ffd24a);outline-offset:2px}

.t360cap-painel{position:absolute;left:12px;right:12px;bottom:74px;z-index:2;padding:12px 14px;
  border-radius:12px;background:rgba(8,11,18,.92);border:1px solid rgba(255,255,255,.16);
  color:#fff;max-width:min(460px,calc(100vw - 24px));margin:0 auto}
.t360cap-painel label{display:block;margin-bottom:6px;font-size:13px}
.t360cap-painel input[type=range]{width:100%;accent-color:var(--gold-2,#c98a3a)}
.t360cap-painel .hint{color:rgba(255,255,255,.72);margin:8px 0 0;line-height:1.45}

.t360cap-aviso{position:absolute;left:12px;right:12px;top:52px;z-index:3;padding:10px 13px;
  border-radius:11px;background:rgba(8,11,18,.94);border:1px solid var(--gold-2,#c98a3a);
  color:#fff;font-size:13px;line-height:1.45;max-width:min(520px,calc(100vw - 24px));margin:0 auto}
.t360cap-aviso--erro{border-color:var(--danger,#d64545)}

.t360cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
/* Convite de resgate: fotos de uma captura interrompida achadas no aparelho.
   Borda de aviso para não passar por card comum — é uma decisão a tomar. */
.t360cap-resgate{border:1px solid var(--gold-2,#c98a3a);margin-bottom:14px}
.t360cap-resgate p{margin:0 0 10px}
.t360cap-item{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.t360cap-item img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:9px;background:#05070c}
.t360cap-item .hint{margin:0;font-size:11.5px;line-height:1.35}

/* ---- Publicação (Etapa 2c): destino, progresso, revisão e erro -------------
   Reusa .t360-status e .t360-bar do editor para a barra e o texto de etapa; só
   o preenchimento precisa de regra própria (o do editor é preso ao id
   #t360-bar-fill). */
#t360cap-publicar h3{margin:18px 0 4px}
#t360cap-prog{margin-top:14px}
#t360cap-prog-fill{height:100%;width:0;border-radius:6px;
  background:var(--gold-2,#c98a3a);transition:width .25s linear}
/* Barra que salta de 12% em 12% enjoa quem pediu menos movimento; o número no
   texto continua dando a informação. */
@media (prefers-reduced-motion:reduce){
  #t360cap-prog-fill{transition:none}
}
#t360cap-prog-eta{margin:6px 0 0}
/* A lista de ressalvas é o que decide "publicar assim" × "voltar e fotografar":
   precisa ser confortável de ler no celular, não um parágrafo comprimido. */
#t360cap-revisao-lista{margin:8px 0 10px;padding-left:22px;line-height:1.5}
#t360cap-revisao-lista li{margin-bottom:6px}
#t360cap-erro .t360-row,#t360cap-revisao .t360-row,#t360cap-falta .t360-row{margin-top:10px}

/* ==========================================================================
   LISTA DE REGISTROS EM CARTÃO (.reg-*) — 2026-07-30
   Substitui a "tabela com formulário dentro" das telas de Administração.
   POR QUÊ: cada linha de Usuários tinha 5 formulários (nome/e-mail, empresa,
   papel, módulos, ações) e cada linha de Empresas trazia 5 caixinhas de módulo
   numa coluna. Com <td> em nowrap a tabela crescia além do card e as colunas da
   direita — inclusive "Operar como" e "Desativar" — ficavam FORA DA TELA, sem
   nada indicando que existiam. Cartão resolve na origem: cada registro tem a
   largura da página e os campos se reorganizam por conta própria.
   ========================================================================== */
.reg-list{display:flex;flex-direction:column;gap:14px}
.reg-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:border-color .2s,box-shadow .2s}
.reg-card:hover{border-color:rgba(255,210,74,.22)}
.reg-card.reg-inativo{opacity:.72}
.reg-card.reg-inativo:hover{opacity:1}

/* Cabeçalho: quem é o registro + o que ele é (badges). Sempre legível primeiro. */
.reg-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 18px;background:var(--th-bg);border-bottom:1px solid var(--line-soft)}
.reg-ident{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 240px}
.reg-ident strong{font-family:var(--display);font-size:15px;color:var(--ink-strong);
  overflow-wrap:anywhere}
.reg-ident .muted{overflow-wrap:anywhere}
.reg-num{flex:0 0 auto;font-family:var(--display);font-size:12px;font-weight:700;
  color:var(--muted);padding:3px 9px;border-radius:8px;background:var(--input-bg);
  border:1px solid var(--line-soft)}
.reg-tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto}

/* Corpo: blocos que se acomodam sozinhos (auto-fit) — some a coluna apertada. */
.reg-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px 20px;padding:18px}
.reg-bloco{display:flex;flex-direction:column;gap:8px;min-width:0}
.reg-bloco--full{grid-column:1/-1}
.reg-bloco h4{margin:0;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--muted)}
.reg-bloco .hint{margin:0}
.reg-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.reg-linha>select,.reg-linha>input{flex:1 1 150px;min-width:0}
.reg-linha .btn{flex:0 0 auto}
/* Ficha de dados só-leitura (CNPJ, cidade, plano…) */
/* minmax 150px: um CNPJ formatado mede ~148px na fonte do corpo — com 130 a
   coluna era mais estreita que o dado e o número tinha de quebrar. */
.reg-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px 18px;margin:0}
.reg-specs>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.reg-specs dt,.reg-specs .rot{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);font-weight:600}
/* NUNCA quebrar o valor: CNPJ, mensalidade e contagem são unidades — partir
   "48.710.558/0001-97" no meio (efeito do overflow-wrap:anywhere que estava
   aqui) lê como dois documentos. Se não couber, a caixa rola; o número não
   quebra. */
.reg-specs dd,.reg-specs .val{margin:0;font-size:14px;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* Rodapé de ações: os botões ficam SEMPRE visíveis, alinhados à direita. */
.reg-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:12px 18px;border-top:1px solid var(--line-soft);background:var(--th-bg)}
.reg-acoes .inline-form{margin:0}
.reg-acoes-dir{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* Caixinhas de módulo como "chips" que preenchem a largura disponível. */
.chk-grid{display:flex;flex-wrap:wrap;gap:8px}
.chk-grid .chk-modulo{margin:0}
.chk-modulo{transition:border-color .16s,background .16s}
.chk-modulo:has(input:checked){border-color:var(--gold-2);background:rgba(255,210,74,.12);
  color:var(--ink-strong)}
.chk-modulo input{width:auto;flex:0 0 auto;margin:0}
/* Chip só-leitura (o que a EMPRESA contratou: a pessoa herda, não desmarca aqui) */
.chip-lida{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 10px;
  border-radius:9px;border:1px dashed var(--line);color:var(--muted);background:transparent}

@media(max-width:820px){
  .reg-head,.reg-body,.reg-acoes{padding:12px 14px}
  .reg-tags{margin-left:0;width:100%}
  .reg-acoes-dir{margin-left:0;width:100%}
  /* Cada ação ocupa a linha inteira no celular. O botão está DENTRO de um
     <form class="inline-form"> (um form por ação, para não juntar POSTs), então
     esticar só o .btn não bastava: quem define a largura é o form. */
  .reg-acoes .inline-form{flex:1 1 auto;width:100%}
  .reg-acoes .btn{flex:1 1 auto;justify-content:center;width:100%}
}

/* Formulário de convite: campos lado a lado em vez de uma coluna de 1180px de
   largura (o campo "Nome" media a página inteira). */
.form-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0 18px;max-width:none}
.form-grade .form-actions{grid-column:1/-1;margin-top:4px}
/* Caixa do link do convite: o campo estica e o botão fica do lado (min-width:0
   é o que impede um token de 64 caracteres de esticar a linha e empurrar o botão
   para fora do card). */
.link-convite{flex:1 1 260px;min-width:0;padding:9px 11px;
  font-family:ui-monospace,monospace;font-size:12.5px}
.convite-novo .reg-linha{gap:8px}
.convites-titulo{margin:26px 0 4px;font-size:15px;display:flex;align-items:center;gap:8px}
.convites-titulo+.hint{margin:0 0 12px}

/* Tabela que vira LISTA DE CARTÕES no celular (rótulo → valor).
   Tabela de muitas colunas em 390px só rola de lado, e o que fica escondido é
   sempre a última coluna — a das ações. O rótulo vem do data-rotulo de cada
   célula, então o cabeçalho pode desaparecer sem perder o significado.
   (O módulo Cobranças tem um equivalente em cobrancas.css, .cob-tab; vale
   unificar quando um dos dois precisar mudar.) */
@media(max-width:820px){
  .tab-cartao thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tab-cartao,.tab-cartao tbody,.tab-cartao tr,.tab-cartao td{display:block;width:auto}
  .tab-cartao{min-width:0!important}
  .tab-cartao tr{border:1px solid var(--line);border-radius:12px;margin:0 16px 10px;
    padding:6px 2px;background:var(--panel)}
  .tab-cartao td{border-bottom:none;display:flex;gap:12px;align-items:baseline;
    padding:6px 14px;white-space:normal}
  .tab-cartao td::before{content:attr(data-rotulo);flex:0 0 34%;font-size:10.5px;
    text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:600}
  .tab-cartao td.actions-col{justify-content:stretch;padding-top:8px}
  .tab-cartao td.actions-col::before{display:none}
  .tab-cartao td.actions-col .inline-form,.tab-cartao td.actions-col .btn{width:100%;justify-content:center}
}

/* O botão flutuante de tema fica no canto inferior direito: sem folga no fim da
   página ele terminava em cima do último card também no desktop. */
@media(min-width:821px){.content{padding-bottom:78px}}

/* Título de seção FORA de card (as listas de registro não vivem dentro de um
   card único; sem isto o "Contas" ficava solto e do mesmo peso do <h1>). */
.secao-titulo{font-family:var(--display);font-size:17px;margin:26px 0 4px;
  color:var(--ink-strong);display:flex;align-items:center;gap:9px}
.secao-titulo+.subtitle{margin-bottom:14px}

/* Tabela dentro de painel em GRADE (dois cards lado a lado): metade da largura,
   mesmo número de colunas — respiro menor e o detalhe secundário da célula de
   valor ("saldo X + juros Y") pode quebrar, só o número não. */
.conc-paineis th,.conc-paineis td{padding:11px 12px}
td.num .muted,td.num small{white-space:normal;display:block;font-size:11.5px}

/* ==========================================================================
   EVIDON 360 — cartão de tour no painel (2026-07-30)
   Tour é imagem: o cartão mostra a capa da primeira cena. Antes reusava
   .stat-card (cartão de indicador numérico) e o resultado era título espremido
   em coluna de 205px com os metadados numa frase corrida que quebrava no meio.
   ========================================================================== */
.t360-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:18px;margin-bottom:26px}
.t360-card{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s}
.t360-card:hover{transform:translateY(-3px);border-color:rgba(255,210,74,.3);
  box-shadow:var(--shadow-lg)}
/* Capa 16/9 — mesma proporção da pré-visualização do editor, então a miniatura
   mostra o mesmo recorte que o cliente vai ver ao abrir o link. */
.t360-card-capa{position:relative;display:block;aspect-ratio:16/9;
  background:#0a0d14 center/cover no-repeat;border-bottom:1px solid var(--line-soft)}
.t360-card-capa--vazia{display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(255,210,74,.12),rgba(90,160,255,.10))}
.t360-card-capa--vazia .nav-ic{width:34px;height:34px;color:var(--gold-txt);opacity:.8}
.t360-card-selos{position:absolute;top:9px;left:9px;display:flex;gap:6px;flex-wrap:wrap}
.t360-card-selos .badge{background:rgba(10,14,22,.72);color:#f3f6fc;border-color:rgba(255,255,255,.22)}
.t360-card-selos .badge-ok{color:#9ff0cf}
.t360-card-selos .badge-warn{color:#ffdd7a}
/* "imagem ausente" precisa VENCER o fundo escuro dos selos: é o aviso de que o
   tour abre vazio para quem recebe o link — se sair cinza, passa por rótulo. */
.t360-card-selos .badge-danger{background:var(--danger);color:#fff;
  border-color:color-mix(in srgb,var(--danger) 70%,#000)}
.t360-card-selos .nav-ic{width:13px;height:13px;color:currentColor;vertical-align:-2px}
.t360-card-corpo{display:flex;flex-direction:column;gap:7px;padding:14px 16px;flex:1}
.t360-card-titulo{font-family:var(--display);font-size:15px;font-weight:700;
  color:var(--ink-strong);line-height:1.25;overflow-wrap:anywhere}
.t360-card-titulo:hover{color:var(--gold-txt)}
/* Campo de renomear: ocupa a linha do título (que fica hidden enquanto ele está
   aberto), então o cartão não muda de altura ao entrar em edição — a lista é uma
   grade, e um cartão crescendo empurraria os vizinhos. Só declaramos o que difere
   da regra global de input (linha ~270): a tipografia do título e um padding
   menor, para o campo não ficar mais alto que a linha que substitui. */
.t360-card-rename input{box-sizing:border-box;font-family:var(--display);
  font-size:15px;font-weight:700;padding:6px 9px}
/* Metadados como itens SEPARADOS (não uma frase com "·"): cada um tem sua caixa,
   então nenhum quebra deixando o pontinho órfão no fim da linha. */
.t360-card-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted)}
.t360-card-meta>span{padding:3px 9px;border-radius:999px;background:var(--input-bg);
  border:1px solid var(--line-soft);white-space:nowrap}
.t360-card-tag{color:var(--ink-dim);border-color:rgba(255,210,74,.3)!important;
  background:rgba(255,210,74,.10)!important}
.t360-card-slug{margin-top:auto;font-size:11.5px;color:var(--muted);
  font-family:ui-monospace,monospace;overflow-wrap:anywhere}
.t360-card-pe{display:flex;gap:8px;padding:11px 16px;border-top:1px solid var(--line-soft);
  background:var(--th-bg)}
.t360-card-pe .btn{flex:1 1 auto;justify-content:center}

/* ---- Editor 360: faixa inferior e proporções da tela dividida -------------- */
/* A lateral ganhou 40px (480 no máximo): é ela que abriga os dois sliders por
   linha da edição de imagem e a linha de uma cena (miniatura + título + selos +
   botões). Em 440px esses controles chegavam encostados um no outro. */
/* 🔴 DENTRO de `min-width:981px` de propósito. Esta regra nasceu solta e, por vir
   DEPOIS do @media(max-width:980px) com a mesma especificidade, anulava a coluna
   única do celular: o grid mantinha as duas colunas, a lateral levava seus 340px
   mínimos e sobrava ZERO para a coluna da imagem — a pré-visualização do editor
   media 0×0 no celular (medido em 04/08; o relato foi "no celular a imagem fica
   pequena"). Proporção de tela dividida é assunto de tela larga; nunca deixar
   esta linha escapar do media query. */
@media (min-width:981px){
  /* A tela dividida exige `.t360-nav-on`, classe que o JS põe ao ligar as abas.
     Sem JavaScript não há navegação, e duas colunas com TODOS os painéis
     abertos deixariam os campos num corredor estreito: sem a classe tudo
     empilha em largura cheia, que é a degradação honesta. A lateral cresceu de
     480 para 560px porque agora carrega os ajustes, que viviam numa faixa de
     largura cheia embaixo. */
  /* A lateral é PROPORCIONAL, com piso e teto: em pixels fixos ela comia a
     área da imagem justamente no notebook (medido em 1280px: a
     pré-visualização caiu para 312px de largura, contra os ~620px que este
     clamp devolve). Teto de 560px porque acima disso os campos ficam largos
     sem ganhar legibilidade. */
  /* 🔴 A largura da lateral é em PIXELS, por degraus, e não em porcentagem:
     `clamp(340px,34%,560px)` travava no PISO (medido: 360px numa tela de
     1600px). Numa grade cuja primeira coluna é `auto`, o navegador faz uma
     passada de dimensionamento intrínseco em que a porcentagem não tem contra
     o que resolver, e ela vira o mínimo. Degrau em pixel é previsível, e é o
     que se quer aqui: a lateral carrega os ajustes que antes tinham a largura
     inteira da tela. */
  .t360-split.t360-nav-on{display:grid;gap:18px;align-items:start;
    grid-template-columns:minmax(0,1fr) 420px}
  .t360-split.t360-nav-on .t360-col-main{position:sticky;top:16px;align-self:start}
}
/* Cards de "resultado e distribuição" (números, comentários, link, ajustes) numa
   grade larga embaixo, em vez de enfileirados na coluna estreita. */
/* minmax 380px: com 330 cabiam três colunas na área de conteúdo (1180px) e tanto
   o textarea do código embed quanto os rótulos de "Ajustes do tour" ficavam
   comprimidos — dois é o número certo para cards de formulário. */
.t360-extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:18px;align-items:start;margin-top:2px}
.t360-extras>.card{margin-bottom:0}
/* Dentro do editor o subtítulo explica o card seguinte; 24px de folga (o padrão
   de topo de página) abria um vão no meio de cada bloco. */
.t360-editor .subtitle,.t360-extras .subtitle{margin-bottom:14px}
/* Linha de cena: o título ocupa a largura toda e os selos/botões vão para a
   linha de baixo — os três disputando 440px viravam um amontoado. */
.t360-cena-item{gap:8px 10px;padding:10px 12px}
.t360-cena-titulo{flex:1 1 140px}

/* Ajustes do tour: faixa inteira, campos em colunas. As opções de player
   (checkboxes), o botão de posicionar reflexo e as ações atravessam a largura —
   texto de opção não deve competir por 300px com um <select>. */
.t360-extras>.t360-ajustes{grid-column:1/-1}
/* Ajustes em SEÇÕES (06/08): antes era uma grade automática de 24 campos onde
   assuntos diferentes caíam lado a lado (senha junto do nadir, GA no meio do
   guiado). Cada fieldset agrupa um assunto e vira uma coluna na tela larga;
   no celular empilham. A moldura sutil delimita onde um assunto acaba. */
.t360-ajustes .form{max-width:none;display:grid;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px 18px}
.t360-cfg-grupo{border:1px solid var(--line-soft,rgba(255,255,255,.08));
  border-radius:12px;padding:14px 16px 6px;margin:0;min-width:0}
.t360-cfg-grupo legend{font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;opacity:.75;padding:0 6px}
.t360-cfg-grupo .field{margin-bottom:12px}
.t360-cfg-grupo .t360-check{margin:0 0 12px;flex-wrap:wrap}
/* A dica entre parênteses vai para a LINHA DE BAIXO, alinhada com o rótulo, em
   vez de disputar a mesma linha com ele: num flex o texto do rótulo e o
   `<span class="hint">` são dois itens, e os dois encolhiam ao mesmo tempo, o
   que punha "Não oferecer tour guiado neste tour" em duas linhas e "Começar
   sozinho ao abrir o tour" em três (visto na captura de 26/08, em 1600px). O
   recuo de 24px é a largura da caixa mais o gap, para a dica começar embaixo do
   texto e não embaixo do quadradinho. */
.t360-cfg-grupo .t360-check>.hint{flex:1 0 100%;margin:2px 0 0 24px}
.t360-ajustes .form>.form-actions{grid-column:1/-1;margin-top:2px}

/* ===== Página pública de interesse (destino do selo do player 360) ===== */
/* Reaproveita o cartão do login (mesma moldura, mesma moeda da marca) e só
   acrescenta o que é próprio de página de convite: um pouco mais de largura
   para o texto respirar, o botão do WhatsApp e a lista do que está incluso. */
.int-card{max-width:480px;text-align:center}
.int-card .subtitle{margin-bottom:16px;line-height:1.55}
.int-origem{margin:0 0 16px;padding:9px 12px;border-radius:10px;font-size:13.5px;
  color:var(--muted);background:var(--input-bg);border:1px solid var(--line)}
/* Verde do WhatsApp: o botão é reconhecido pela cor antes de ser lido, e este é
   o único caminho de resposta da página — não pode competir com o resto. */
.int-wa{margin-top:0;min-height:48px;font-weight:700;font-size:15.5px;
  background:#25d366;color:#062e14;border-color:transparent;box-shadow:0 6px 18px -8px rgba(37,211,102,.7)}
.int-wa:hover{background:#1fbe5a;border-color:transparent;color:#062e14}
.int-wa:focus-visible{box-shadow:0 0 0 3px rgba(37,211,102,.35)}
.int-nota{margin:9px 0 20px;font-size:12.5px;color:var(--muted)}
.int-lista{margin:0 0 18px;padding:0;list-style:none;text-align:left;
  font-size:13.5px;color:var(--muted)}
.int-lista li{position:relative;padding:5px 0 5px 20px}
.int-lista li::before{content:"";position:absolute;left:4px;top:12px;width:6px;height:6px;
  border-radius:50%;background:var(--gold-2)}

/* Caixa de seleção que ENCABEÇA um grupo nos ajustes do tour (capa, selo do
   chão): ganha respiro acima para o grupo se ler como bloco, e não como mais uma
   linha na fila de 12 campos. */
.t360-ajustes .t360-check-chefe{grid-column:1/-1;margin-top:6px;font-weight:600}

/* ===== Editor 360: abas na lateral e guias na área grande (26/08) =====
   O problema medido: dez cartões e sessenta campos em fila única, sem índice,
   metade na coluna de 440px e metade numa faixa embaixo. Não faltava espaço,
   faltava navegação. Agora cada cartão declara sua aba em `data-painel` e o JS
   mostra um assunto por vez, no molde do Kuula. Duas consequências de desenho:
   a foto aérea saiu de um fieldset de ~340px para a área grande (arrastar pino
   é trabalho de precisão), e o formulário de ajustes continua sendo UM só
   atravessando três abas, porque campo escondido por `hidden` segue indo no
   POST e quebrá-lo em vários faria salvar uma aba apagar as outras. */
.t360-abas{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.t360-aba-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;
  border-radius:999px;border:1px solid var(--card-bd,rgba(0,0,0,.10));
  background:transparent;color:inherit;font:inherit;font-size:13.5px;
  cursor:pointer;line-height:1.1;white-space:nowrap}
.t360-aba-btn svg{width:16px;height:16px;flex:0 0 auto;opacity:.8}
.t360-aba-btn:hover{background:var(--input-bg)}
.t360-aba-btn[aria-selected="true"]{background:var(--input-bg);font-weight:650;
  border-color:var(--brand,#4c8dff);box-shadow:inset 0 0 0 1px var(--brand,#4c8dff)}
.t360-aba-btn[aria-selected="true"] svg{opacity:1}

/* Guias da área grande: as duas superfícies de imagem do editor. */
.t360-guias{display:flex;gap:6px;margin:0 0 12px}
.t360-guia-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border-radius:10px;border:1px solid var(--card-bd,rgba(0,0,0,.10));
  background:transparent;color:inherit;font:inherit;font-size:13.5px;cursor:pointer}
.t360-guia-btn svg{width:16px;height:16px;opacity:.8}
.t360-guia-btn[aria-selected="true"]{background:var(--input-bg);font-weight:650;
  border-color:var(--brand,#4c8dff)}

/* A partir de 1200px a tira vira coluna de ícones à esquerda dos painéis, que é
   o padrão que o dono escolheu. `grid-row:1/-1` faz ela abranger a altura toda,
   e o sticky a mantém à vista enquanto o painel rola. Os cartões da antiga
   faixa de baixo entram no mesmo grid por `display:contents`, senão eles
   ficariam fora da coluna 2 e ao lado da tira. */
/* Entre 981 e 1400px a tira atravessa o topo das duas colunas: virar coluna de
   ícones ali consumiria ~130px de uma lateral que já está no piso, e o painel
   de campos sairia mais estreito do que era ANTES das abas (foi o que a
   medição de 1600px mostrou quando a tira morava dentro da lateral: 200px de
   painel e rótulo quebrando em seis linhas). */
@media (min-width:981px){
  .t360-split.t360-nav-on>.t360-abas{grid-column:1/-1}
}
/* A partir de 1400px ela é a PRIMEIRA COLUNA do editor, à esquerda da imagem:
   ícones na borda, imagem no meio, campos à direita. */
@media (min-width:1400px){
  .t360-split.t360-nav-on{grid-template-columns:auto minmax(0,1fr) 460px}
  .t360-split.t360-nav-on>.t360-abas{grid-column:1;grid-row:1/-1;margin:0;
    position:sticky;top:16px;flex-direction:column;gap:4px;max-width:190px}
  .t360-split.t360-nav-on>.t360-abas .t360-aba-btn{width:100%;justify-content:flex-start}
}
@media (min-width:1700px){
  .t360-split.t360-nav-on{grid-template-columns:auto minmax(0,1fr) 520px}
}
/* 🔴 O editor era estrangulado pelo `.content{max-width:1180px}` do hub: em
   1920px de tela ele ocupava 1100px úteis, e a pré-visualização ficava com
   385px enquanto sobrava meia tela vazia. O teto de 1180 é bom para página de
   texto e formulário, e errado para uma FERRAMENTA de imagem. Aqui ele sobe,
   só nesta página e só em tela grande. `:has()` cobre quem está sem
   JavaScript; com JS a classe `t360-largo` faz o mesmo, e é ela que vale nos
   navegadores sem `:has()`. */
@media (min-width:1400px){
  .content:has(.t360-editor),.content.t360-largo{max-width:1560px}
}
@media (min-width:1700px){
  .content:has(.t360-editor),.content.t360-largo{max-width:1780px}
}
/* Abaixo disso a tira é uma fila que rola de lado, sem quebrar em duas alturas
   (duas linhas de pílula empurram o painel para fora da primeira tela). */
@media (max-width:1399px){
  .t360-abas{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .t360-abas::-webkit-scrollbar{display:none}
}
/* Dentro da coluna a antiga faixa deixa de ser grade: um painel por vez. */
.t360-col-side .t360-extras{display:block;margin-top:0}
.t360-col-side .t360-extras>.card{margin-bottom:16px}
.t360-col-side .t360-ajustes .form{grid-template-columns:minmax(0,1fr)}

/* A foto aérea na área grande: é ela o instrumento de trabalho aqui, então
   ocupa a largura do painel. Sem `object-fit`, de propósito: os pinos são
   posicionados em porcentagem sobre a imagem, e recortá-la desalinharia todos. */
.t360-aerea-bloco{min-width:0}
.t360-col-main .t360-aerea-mapa{margin:6px 0 8px}