@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}
  .stat-num{font-size: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)}
}

/* ===== 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}

/* 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) --- */
.t360-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);
  gap:18px;align-items:start}
.t360-split .t360-col-main{position:sticky;top:16px;align-self:start}
.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){
  .t360-split{grid-template-columns:minmax(0,1fr) minmax(340px,480px)}
}
/* 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}
.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}