/* SAFIRE · Área de Cliente — identidade: preto profundo, azul SAFIRE, tipografia larga */
:root {
  --ink: #05070b;
  --ink-2: #0a0d14;
  --panel: #0d1119;
  --panel-2: #121722;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #eef1f7;
  --mute: #8a93a6;
  --blue: #3b6cf4;
  --blue-2: #6b92ff;
  --blue-glow: rgba(59, 108, 244, .35);
  --red: #ff3b3b;
  --ok: #3ddc97;
  --radius: 14px;
  --display: 'Michroma', 'Manrope', sans-serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
svg { width: 1.1em; height: 1.1em; flex: none; }
.mono { font-family: var(--display); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.muted { color: var(--mute); }
::selection { background: var(--blue); color: #fff; }

/* ── grão de película ── */
.grain {
  pointer-events: none; position: fixed; inset: -50%; z-index: 100; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0) } 20% { transform: translate(-3%, 2%) } 40% { transform: translate(2%, -4%) }
  60% { transform: translate(-4%, -1%) } 80% { transform: translate(3%, 3%) } 100% { transform: translate(0, 0) }
}

/* ── barras letterbox (abrem ao carregar) ── */
.letterbox { position: absolute; left: 0; right: 0; height: 50vh; background: #000; z-index: 20; pointer-events: none; transition: height 1.4s var(--ease) .15s; }
.lb-top { top: 0; } .lb-bottom { bottom: 0; }
.is-ready .letterbox { height: 7vh; }
.page-dash .is-ready .letterbox, .page-dash.is-ready .hero .letterbox { height: 5.5vh; }

/* ── REC ── */
.rec { display: inline-flex; align-items: center; gap: .55em; font-family: var(--display); font-size: 10px; letter-spacing: .22em; color: var(--text); }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15 } }

/* ── HUD ── */
.hud { position: absolute; left: 0; right: 0; z-index: 25; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(16px, 4vw, 48px); opacity: 0; transition: opacity 1s 1.1s; }
.is-ready .hud { opacity: 1; }
.hud-top { top: calc(7vh + 18px); }
.hud-bottom { bottom: calc(7vh + 18px); }
.tc { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── reveal ao scroll ── */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ── botões / campos ── */
.btn {
  --bg: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 13px 22px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg);
  color: var(--text); font: 600 14px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform .3s var(--ease), background .3s, border-color .3s, box-shadow .3s;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .3); }
.btn-primary { --bg: var(--blue); border-color: var(--blue); box-shadow: 0 10px 30px -10px var(--blue-glow); }
.btn-primary:hover { --bg: #4a78ff; border-color: #4a78ff; box-shadow: 0 14px 40px -10px var(--blue-glow); }
.btn-ghost { --bg: rgba(255, 255, 255, .03); }
.btn-danger { border-color: rgba(255, 59, 59, .4); color: #ff8a8a; }
.btn-danger:hover { background: rgba(255, 59, 59, .1); border-color: var(--red); }
.btn-wide { width: 100%; }
.btn-arrow { display: inline-flex; transition: transform .3s var(--ease); }
.btn:hover .btn-arrow { transform: translate(3px, -3px); }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field > span { font-size: 12px; font-weight: 600; color: var(--mute); letter-spacing: .02em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 10px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .035); color: var(--text); font: 500 15px var(--sans); outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); background: rgba(59, 108, 244, .06); box-shadow: 0 0 0 4px rgba(59, 108, 244, .15); }
.field input[type=file] { padding: 10px; font-size: 13px; }
.field input[type=file]::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--text); font: 600 12px var(--sans); cursor: pointer; }
.field select option { background: var(--panel); }

.flash { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; border: 1px solid; }
.flash-error { background: rgba(255, 59, 59, .08); border-color: rgba(255, 59, 59, .35); color: #ffb0b0; }
.flash-ok { background: rgba(61, 220, 151, .07); border-color: rgba(61, 220, 151, .3); color: #a8f0cf; }

/* ═════════════════════ LOGIN ═════════════════════ */
.login-stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: grid; place-items: center; }
.login-bg { position: absolute; inset: -4%; background-size: cover; background-position: 35% center; animation: kenburns 28s ease-in-out infinite alternate; filter: saturate(.85) contrast(1.05); }
@keyframes kenburns { from { transform: scale(1.04) translate(0, 0) } to { transform: scale(1.16) translate(-2.5%, -1.5%) } }
.login-shade { position: absolute; inset: 0; background:
  radial-gradient(ellipse at 75% 50%, rgba(5, 7, 11, .55), rgba(5, 7, 11, .92) 70%),
  linear-gradient(90deg, rgba(5, 7, 11, .2) 0%, rgba(5, 7, 11, .75) 55%, rgba(5, 7, 11, .96) 100%); }
.login-inner { position: relative; z-index: 10; width: min(1180px, 100%); padding: 14vh clamp(16px, 4vw, 48px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.login-brand .brand-logo { width: min(440px, 80%); margin: 0 auto; filter: drop-shadow(0 0 40px rgba(255, 255, 255, .15)); }
.login-tag { margin: 28px auto 0; font-size: clamp(16px, 1.6vw, 20px); color: rgba(238, 241, 247, .78); font-weight: 400; max-width: 46ch; text-wrap: balance; }
.login-card {
  --d: 250ms; position: relative; padding: 36px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(18, 23, 34, .72), rgba(10, 13, 20, .82));
  border: 1px solid var(--line-2); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.login-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, var(--blue), transparent 40%, transparent 70%, rgba(107, 146, 255, .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.card-label { color: var(--blue-2); }
.login-card h1 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 10px 0 24px; }
.login-help { margin: 18px 0 0; font-size: 13px; color: var(--mute); text-align: center; }
.login-help a { color: var(--blue-2); text-decoration: none; }

/* ═════════════════════ TOPBAR ═════════════════════ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 18px;
  padding: 16px clamp(16px, 4vw, 48px); transition: background .4s, backdrop-filter .4s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.topbar.solid { background: rgba(5, 7, 11, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: 12px; padding-bottom: 12px; border-color: var(--line); }
.page-admin .topbar { background: rgba(5, 7, 11, .85); border-color: var(--line); backdrop-filter: blur(14px); }
.tb-brand img { height: 22px; width: auto; }
.tb-x { color: var(--mute); font-weight: 300; font-size: 18px; }
.tb-client { display: flex; align-items: center; height: 34px; padding: 5px 2px; background: none; border-radius: 8px; }
.tb-client img { max-height: 24px; width: auto; max-width: 140px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; } /* logótipo do cliente a branco, sem caixa */
.tb-client-name { font-weight: 700; letter-spacing: .02em; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tb-right form { margin: 0; }
.nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 0; background: none; color: var(--text); font: 600 13px var(--sans); text-decoration: none; cursor: pointer; transition: background .25s; }
.nav-link:hover { background: rgba(255, 255, 255, .07); }
.nav-out { color: var(--mute); }
.preview-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 90; padding: 10px 18px; border-radius: 999px; background: var(--blue); color: #fff; box-shadow: 0 10px 40px -8px var(--blue-glow); white-space: nowrap; }

/* ═════════════════════ HERO CLIENTE ═════════════════════ */
.hero { position: relative; min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: -6%; background-size: cover; background-position: center 40%; animation: kenburns 32s ease-in-out infinite alternate; will-change: transform; }
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(5, 7, 11, .45) 0%, rgba(5, 7, 11, .25) 35%, rgba(5, 7, 11, .85) 78%, var(--ink) 100%),
  linear-gradient(90deg, rgba(5, 7, 11, .85) 0%, rgba(5, 7, 11, .2) 70%); }
.hero-inner { position: relative; z-index: 10; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) calc(5.5vh + 90px); }
.hero-kicker { display: flex; align-items: center; gap: 12px; color: var(--text); }
.hero-title { margin: 22px 0 0; font-size: clamp(38px, 6.4vw, 92px); line-height: .98; letter-spacing: -.035em; font-weight: 800; --d: 120ms; }
.hero-title span { display: inline-block; margin-top: .12em; font-weight: 300; color: var(--blue-2); font-size: .55em; letter-spacing: -.02em; line-height: 1.1; }
.hero-lede { --d: 220ms; max-width: 58ch; margin: 22px 0 0; color: rgba(238, 241, 247, .78); font-size: 17px; }
.hero-meta { --d: 320ms; display: flex; flex-wrap: wrap; gap: 0; margin: 40px 0 0; border-top: 1px solid var(--line-2); }
.hero-meta > div { padding: 18px 40px 0 0; margin-right: 40px; border-right: 1px solid var(--line); }
.hero-meta > div:last-child { border-right: 0; }
.hero-meta dt { margin-bottom: 6px; }
.hero-meta dd { margin: 0; font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.hero-hud { bottom: calc(5.5vh + 18px); }
.scroll-cue { color: var(--text); text-decoration: none; }

/* ═════════════════════ BLOCOS ═════════════════════ */
.dash { position: relative; max-width: 1280px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 48px) 80px; }
.block { padding: 70px 0 30px; scroll-margin-top: 70px; }
.block-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.label { color: var(--blue-2); margin-bottom: 14px; }
.label a { color: inherit; text-decoration: none; }
.block h2 { margin: 0; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.025em; font-weight: 700; }
.block-head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.025em; font-weight: 700; }
.sub { margin: 14px 0 0; color: var(--mute); max-width: 56ch; }
.count { color: var(--mute); font-weight: 300; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--mute); font: 600 13px var(--sans); cursor: pointer; transition: all .3s var(--ease); }
.chip sup { font-size: 10px; opacity: .7; }
.chip:hover { color: var(--text); border-color: rgba(255, 255, 255, .3); }
.chip.is-on { background: var(--text); color: var(--ink); border-color: var(--text); }

/* ── cronograma ── */
.timeline { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; background: linear-gradient(90deg, var(--blue), var(--line-2) 60%); }
.step { position: relative; display: flex; flex-direction: column; gap: 16px; padding-right: 18px; }
.step-dot { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); border: 1px solid var(--line-2); font-family: var(--display); font-size: 10px; color: var(--mute); }
.step-done .step-dot { background: var(--blue); border-color: var(--blue); color: #fff; font-family: var(--sans); font-size: 16px; }
.step-now .step-dot { border-color: var(--blue-2); color: var(--text); box-shadow: 0 0 0 6px rgba(59, 108, 244, .15), 0 0 30px var(--blue-glow); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(59, 108, 244, .05), 0 0 40px var(--blue-glow); } }
.step strong { display: block; font-size: 16px; line-height: 1.3; margin-bottom: 6px; }
.step-next strong { color: var(--mute); }
.step em { display: block; font-style: normal; font-size: 13px; color: var(--mute); margin-top: 4px; }
.step-now strong { color: #fff; }
.proj-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; margin-top: 18px; }
.proj-card { padding: 26px 28px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.plan-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 4px; }
.plan-list dt { font-size: 12px; color: var(--mute); font-weight: 600; }
.plan-list dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.includes { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.includes ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.includes li { position: relative; padding-left: 20px; color: rgba(238, 241, 247, .85); }
.includes li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 1px; background: var(--blue-2); }
.proj-actions { display: grid; gap: 12px; }
.action { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 18px 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); text-decoration: none; transition: border-color .3s, transform .4s var(--ease), background .3s, filter 1s var(--ease), opacity 1s var(--ease); }
.action:hover { border-color: rgba(59, 108, 244, .55); background: var(--panel-2); transform: translateX(4px); }
.action-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(59, 108, 244, .12); border: 1px solid rgba(59, 108, 244, .25); color: var(--blue-2); font-size: 20px; }
.action strong { font-size: 16px; }
.action p { margin: 2px 0 0; color: var(--mute); font-size: 13px; }
.action-go { color: var(--mute); transition: color .3s, transform .3s var(--ease); }
.action:hover .action-go { color: var(--blue-2); transform: translate(3px, -3px); }

/* ── cartões de entrega ── */
.reel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.reel-card { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease), opacity .4s, filter 1s var(--ease); }
.reel-card:hover { transform: translateY(-6px); border-color: rgba(59, 108, 244, .5); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9), 0 0 0 1px rgba(59, 108, 244, .2), 0 20px 60px -30px var(--blue-glow); }
.reel-card.is-hidden { display: none; }
.reel-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.reel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.9) brightness(.9); }
.reel-card:hover .reel-media img { transform: scale(1.07); filter: saturate(1.05) brightness(1); }
.reel-empty { display: grid; place-items: center; background:
  radial-gradient(ellipse at 30% 20%, rgba(59, 108, 244, .28), transparent 60%),
  radial-gradient(ellipse at 80% 90%, rgba(107, 146, 255, .12), transparent 55%), #070a11; }
.reel-icon { color: rgba(238, 241, 247, .85); transition: transform .6s var(--ease), color .4s; }
.reel-icon svg { width: 54px; height: 54px; stroke-width: 1.1; }
.reel-card:hover .reel-icon { transform: scale(1.12); color: #fff; }
.reel-kind, .reel-num { position: absolute; top: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(5, 7, 11, .6); backdrop-filter: blur(8px); color: var(--text); font-size: 9px; }
.reel-kind { left: 14px; } .reel-num { right: 14px; }
.reel-media::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 10px rgba(5, 7, 11, 0); transition: box-shadow .5s var(--ease); pointer-events: none; }
.reel-sweep { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); transform: translateX(-110%); transition: transform 1s var(--ease); pointer-events: none; }
.reel-card:hover .reel-sweep { transform: translateX(110%); }
.reel-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 20px 22px 22px; }
.reel-body h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.reel-body p { margin: 6px 0 0; color: var(--mute); font-size: 14px; }
.reel-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.reel-open { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--blue-2); transition: gap .3s var(--ease); }
.reel-card:hover .reel-open { gap: 10px; }

/* ── contrato ── */
.contract { display: flex; align-items: center; gap: 24px; padding: 26px 28px; border-radius: var(--radius); background: linear-gradient(120deg, rgba(59, 108, 244, .12), var(--panel) 45%); border: 1px solid var(--line-2); flex-wrap: wrap; }
.contract-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: rgba(59, 108, 244, .14); color: var(--blue-2); border: 1px solid rgba(59, 108, 244, .3); }
.contract-icon svg { width: 30px; height: 30px; }
.contract-info { flex: 1; min-width: 200px; }
.contract-info h3 { margin: 0 0 6px; font-size: 19px; }
.contract-info .mono { color: var(--ok); margin: 0; }
.contract-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.contract-view { margin-top: 18px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); background: #fff; animation: unfold .7s var(--ease); }
.contract-view iframe { display: block; width: 100%; height: 78vh; border: 0; }
@keyframes unfold { from { opacity: 0; transform: translateY(-10px) scaleY(.96); transform-origin: top } to { opacity: 1; transform: none } }

/* ── contacto ── */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.contact { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; background: var(--ink-2); text-decoration: none; transition: background .3s; }
.contact:hover { background: var(--panel-2); }
.contact strong { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }

.empty { text-align: center; padding: 70px 24px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: rgba(255, 255, 255, .015); }
.empty-sm { padding: 40px 24px; }
.empty-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(59, 108, 244, .12); color: var(--blue-2); margin-bottom: 14px; }
.empty-icon svg { width: 28px; height: 28px; }
.empty h3 { margin: 0 0 6px; font-size: 22px; }
.empty p { margin: 0; color: var(--mute); }

.foot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 16px 70px; border-top: 1px solid var(--line); }
.foot img { height: 26px; width: auto; opacity: .8; }

/* ═════════════════════ ADMIN ═════════════════════ */
.admin { padding-top: 110px; }
.admin .block-head h2 { font-size: clamp(28px, 3vw, 40px); }
.client-list { display: grid; gap: 12px; }
.client-tile { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 22px; padding: 16px 22px 16px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); text-decoration: none; transition: border-color .3s, transform .4s var(--ease), background .3s; }
.client-tile:hover { border-color: rgba(59, 108, 244, .5); transform: translateX(4px); background: var(--panel-2); }
.ct-logo { width: 76px; height: 56px; border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 8px; overflow: hidden; }
.ct-logo img { max-height: 100%; object-fit: contain; }
.ct-logo span { color: var(--ink); font-weight: 800; font-size: 18px; }
.ct-body h3 { margin: 0; font-size: 18px; }
.ct-body p { margin: 2px 0 0; color: var(--mute); font-size: 14px; }
.ct-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; font-size: 9px; }
.ct-meta .on { color: var(--ok); } .ct-meta .off { color: #ff8a8a; }

.admin-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }
.side { display: grid; gap: 22px; }
.panel { padding: 28px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.panel .label:not(:first-of-type) { margin-top: 18px; }
.panel.narrow { max-width: 520px; }
.panel.danger { border-color: rgba(255, 59, 59, .2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field-full { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 22px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 84px; font-family: ui-monospace, Menlo, monospace; }
.pw-gen { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 8px 12px; border: 0; border-radius: 8px; background: var(--panel-2); color: var(--blue-2); cursor: pointer; font-size: 9px; }
.logo-preview { width: 140px; height: 70px; padding: 10px; background: #fff; border-radius: 10px; display: grid; place-items: center; }
.logo-preview img { max-height: 100%; object-fit: contain; }
.file-current { color: var(--ok); text-decoration: none; font-size: 9px; }
.dl-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.dl-row:first-of-type { border-top: 0; }
.dl-thumb { width: 64px; height: 40px; border-radius: 6px; overflow: hidden; background: #070a11; display: grid; place-items: center; color: var(--blue-2); }
.dl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dl-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dl-info strong { font-size: 14px; }
.dl-info .mono { font-size: 8px; }
.dl-url { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.dl-row form { margin: 0; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--mute); cursor: pointer; transition: all .25s; }
.icon-btn:hover { color: var(--red); border-color: var(--red); }

.page-error .err { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 18px; padding: 24px; }
.page-error h1 { margin: 0; font-size: 28px; }

/* ── faturação ── */
.bill-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; }
.bill-stats > div { padding: 24px 26px; background: var(--ink-2); display: flex; flex-direction: column; gap: 8px; }
.bill-stats strong { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bill-stats em { font-style: normal; font-size: 13px; color: var(--mute); }
.bill-stats .is-open { background: linear-gradient(140deg, rgba(59, 108, 244, .16), var(--ink-2) 60%); }
.bill-stats .is-open strong { color: #fff; }
.bill-stats .is-warn { background: linear-gradient(140deg, rgba(255, 170, 60, .14), var(--ink-2) 60%); }
.bill-stats .is-warn em { color: #ffc27a; }
.bill-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
.inv-list { display: grid; gap: 10px; }
.inv-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; grid-template-areas: "ic main dates amount pill" "ic act act act act"; gap: 6px 18px; align-items: center; padding: 18px 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); transition: border-color .3s, background .3s, filter 1s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); }
.inv-row:hover { border-color: var(--line-2); background: var(--panel-2); }
.inv-ic { grid-area: ic; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--mute); }
.inv-ic svg { width: 22px; height: 22px; }
.inv-ic.pago { background: rgba(61, 220, 151, .1); border-color: rgba(61, 220, 151, .3); color: var(--ok); }
.inv-ic.vencida { background: rgba(255, 170, 60, .1); border-color: rgba(255, 170, 60, .35); color: #ffc27a; }
.inv-ic.pendente, .inv-ic.verificar { background: rgba(59, 108, 244, .1); border-color: rgba(59, 108, 244, .3); color: var(--blue-2); }
.inv-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }
.inv-main strong { font-size: 16px; }
.inv-main span { color: var(--mute); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-dates { grid-area: dates; display: flex; flex-direction: column; gap: 4px; font-size: 9px; text-align: right; }
.inv-dates .warn { color: #ffc27a; }
.inv-amount { grid-area: amount; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; min-width: 110px; }
.pill { grid-area: pill; justify-self: end; padding: 6px 12px; border-radius: 999px; font: 700 11px var(--sans); letter-spacing: .02em; white-space: nowrap; border: 1px solid; }
.pill-pago { color: var(--ok); border-color: rgba(61, 220, 151, .35); background: rgba(61, 220, 151, .08); }
.pill-pendente { color: var(--blue-2); border-color: rgba(59, 108, 244, .4); background: rgba(59, 108, 244, .1); }
.pill-verificar { color: #c9b6ff; border-color: rgba(160, 130, 255, .4); background: rgba(160, 130, 255, .1); }
.pill-vencida { color: #ffc27a; border-color: rgba(255, 170, 60, .45); background: rgba(255, 170, 60, .1); }
.pill-anulado, .pill-info { color: var(--mute); border-color: var(--line-2); background: transparent; }
.inv-actions { grid-area: act; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.inv-actions form { margin: 0; }
.mini-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text); font: 600 12px var(--sans); text-decoration: none; cursor: pointer; transition: all .25s; }
.mini-btn:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); }
.mini-primary { background: var(--blue); border-color: var(--blue); }
.mini-primary:hover { background: #4a78ff; border-color: #4a78ff; }
.pay-card { position: sticky; top: 84px; padding: 24px; border-radius: var(--radius); background: linear-gradient(170deg, rgba(59, 108, 244, .14), var(--panel) 45%); border: 1px solid rgba(59, 108, 244, .28); }
.pay-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.pay-head .label { margin-bottom: 4px; }
.pay-head strong { font-size: 17px; }
.pay-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(59, 108, 244, .16); color: var(--blue-2); }
.pay-ic svg { width: 24px; height: 24px; }
.pay-row { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.pay-val { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pay-val strong { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.copy-btn { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: none; color: var(--mute); font: 600 11px var(--sans); cursor: pointer; transition: all .25s; }
.copy-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, .3); }
.copy-btn.done { color: var(--ok); border-color: rgba(61, 220, 151, .4); }
.copy-btn svg { width: 14px; height: 14px; }
.pay-note { margin: 12px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }

/* admin faturas */
.btn-sm { padding: 9px 14px; font-size: 12px; }
.ct-meta .warn { color: #ffc27a; } .ct-meta .notif { color: #c9b6ff; }
.notify-panel { margin-bottom: 18px; border-color: rgba(160, 130, 255, .35); background: linear-gradient(120deg, rgba(160, 130, 255, .1), var(--panel) 50%); }
.notify-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.notify-row div { display: flex; flex-direction: column; }
.notify-row span { color: var(--mute); font-size: 13px; }
.notify-row form { margin: 0; }
.inv-form { padding-bottom: 8px; }
.ainv-row { position: relative; padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.ainv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-right: 44px; }
.ainv-top div { display: flex; flex-direction: column; gap: 3px; }
.ainv-top .mono { font-size: 9px; }
.ainv-top .pill { font-size: 10px; padding: 4px 10px; }
.ainv-links { display: flex; gap: 14px; font-size: 9px; }
.ainv-links a { color: var(--blue-2); text-decoration: none; }
.ainv-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.ainv-form select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font: 500 13px var(--sans); }
.mini-file { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--line-2); color: var(--mute); font: 600 12px var(--sans); cursor: pointer; }
.mini-file svg { width: 15px; height: 15px; }
.mini-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mini-file.has-file { color: var(--ok); border-color: rgba(61, 220, 151, .4); border-style: solid; }
.ainv-del { position: absolute; top: 12px; right: 0; margin: 0; }

/* ── recuperação de password ── */
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.forgot { color: var(--blue-2); text-decoration: none; font-weight: 600; font-size: 12px; }
.forgot:hover { text-decoration: underline; }
.card-sub { margin: -10px 0 22px; color: var(--mute); font-size: 14px; line-height: 1.6; }
.card-sub strong { color: var(--text); }
.card-sub.muted { margin-top: -8px; font-size: 13px; }
.login-help a { color: var(--blue-2); text-decoration: none; }
.sent-ic { width: 64px; height: 64px; margin: 18px 0 4px; border-radius: 18px; display: grid; place-items: center; background: rgba(59, 108, 244, .14); border: 1px solid rgba(59, 108, 244, .35); color: var(--blue-2); animation: float 3.2s ease-in-out infinite; }
.sent-ic svg { width: 30px; height: 30px; }
@keyframes float { 50% { transform: translateY(-6px); box-shadow: 0 16px 40px -12px var(--blue-glow); } }
.strength { display: flex; align-items: center; gap: 6px; margin: -6px 0 18px; }
.strength i { flex: 1; height: 3px; border-radius: 3px; background: var(--line-2); transition: background .3s; }
.strength span { flex: none; margin-left: 8px; font-size: 8px; min-width: 120px; text-align: right; }
.strength[data-level="1"] i:nth-child(-n+1) { background: #ff6b6b; }
.strength[data-level="2"] i:nth-child(-n+2) { background: #ffb44d; }
.strength[data-level="3"] i:nth-child(-n+3) { background: var(--blue-2); }
.strength[data-level="4"] i { background: var(--ok); }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.head-actions form { margin: 0; }
.form-actions .btn-ghost { margin-right: 6px; }

/* planos */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.field-pair select:disabled { opacity: .45; }
.ct-meta .plan-tag { color: var(--blue-2); }

/* ═════════════════════ GLOW SAFIRE (hover) ═════════════════════ */
/* Luz azul que segue o rato + contorno que acende + halo */
.glow { position: relative; isolation: isolate; --mx: 50%; --my: 50%; }
.glow::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(59, 108, 244, .07), rgba(59, 108, 244, .02) 35%, transparent 60%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.glow:not(.login-card)::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(140, 170, 255, .45), rgba(59, 108, 244, .15) 30%, transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s var(--ease);
}
.glow:hover::after, .glow:hover::before { opacity: 1; }
.glow:hover {
  border-color: rgba(107, 146, 255, .25) !important;
  box-shadow: 0 14px 40px -20px rgba(0, 0, 0, .8), 0 0 30px -14px rgba(59, 108, 244, .35) !important;
}
.reel-card.glow:hover { box-shadow: 0 26px 50px -25px rgba(0, 0, 0, .9), 0 0 34px -14px rgba(59, 108, 244, .4) !important; }
.login-card.glow:hover { box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), 0 0 40px -18px rgba(59, 108, 244, .35), inset 0 1px 0 rgba(255, 255, 255, .06) !important; }
.glow > * { position: relative; z-index: 1; }
.reel-card.glow > .reel-media { z-index: 0; }
.contact-grid { overflow: visible; }
.contact.glow:hover { z-index: 2; }

/* campos: halo azul ao passar e ao escrever */
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(107, 146, 255, .35); box-shadow: 0 0 16px -8px rgba(59, 108, 244, .35); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(59, 108, 244, .14), 0 0 20px -8px rgba(59, 108, 244, .45); }

/* botões e chips */
.btn-primary:hover { box-shadow: 0 10px 30px -10px rgba(59, 108, 244, .6); }
.btn-ghost:hover, .mini-btn:hover, .chip:hover, .copy-btn:hover { box-shadow: 0 0 16px -8px rgba(59, 108, 244, .45); border-color: rgba(107, 146, 255, .35); }
.mini-primary:hover { box-shadow: 0 0 18px -8px rgba(59, 108, 244, .6); }
.tb-client { transition: box-shadow .4s var(--ease); }
.tb-client:hover img { opacity: 1; }
@media (hover: none) { .glow::after, .glow::before { display: none; } }

/* ═════════════════════ RESPONSIVO ═════════════════════ */
@media (max-width: 900px) {
  .login-inner { grid-template-columns: 1fr; gap: 32px; padding-top: 18vh; padding-bottom: 18vh; }
  .login-brand { text-align: center; } .login-brand .brand-logo { margin: 0 auto; width: 70%; }
  .login-tag { margin: 18px auto 0; }
  .admin-grid { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: 1fr; }
  .bill-grid { grid-template-columns: 1fr; }
  .pay-card { position: static; }
  .timeline { grid-template-columns: 1fr; gap: 22px; }
  .timeline::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; background: linear-gradient(180deg, var(--blue), var(--line-2) 60%); }
  .step { flex-direction: row; align-items: center; }
  .client-tile { grid-template-columns: 60px 1fr; }
  .ct-logo { width: 60px; height: 46px; }
  .ct-meta { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .hud-bottom .mono:last-child, .hud-bottom .mono:nth-child(2) { display: none; }
  .login-card { padding: 26px 22px; }
  .tb-brand img { height: 16px; }
  .tb-client img { max-width: 80px; }
  .nav-link { padding: 8px 10px; }
  .nav-out svg { display: none; }
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 28px; }
  .hero-meta > div { padding: 16px 0 0; margin: 0; border-right: 0; }
  .hero-meta dd { font-size: 15px; }
  .hero-lede { font-size: 15px; }
  .hero-kicker { font-size: 9px; letter-spacing: .16em; }
  .reel-grid { grid-template-columns: 1fr; }
  .bill-stats { grid-template-columns: 1fr 1fr; }
  .bill-stats > div { padding: 16px 18px; gap: 4px; }
  .bill-stats > div:first-child { grid-column: 1 / -1; }
  .bill-stats strong { font-size: 22px; }
  .inv-row { grid-template-columns: 44px 1fr auto; grid-template-areas: "ic main pill" "ic amount amount" "ic dates dates" "ic act act"; }
  .inv-amount, .inv-dates { text-align: left; }
  .form-grid { grid-template-columns: 1fr; }
  .contract-actions { width: 100%; } .contract-actions .btn { flex: 1; }
  .preview-bar { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .letterbox { height: 5.5vh; }
}
.field input.flash-fill { border-color: var(--blue-2); box-shadow: 0 0 0 4px rgba(59, 108, 244, .2), 0 0 30px -4px rgba(59, 108, 244, .8); }
/* cor por estado */
.status-dot.st-em-preparacao { background: #8a93a6; box-shadow: 0 0 10px #8a93a6; }
.status-dot.st-em-producao { background: var(--blue-2); box-shadow: 0 0 10px var(--blue-2); }
.status-dot.st-em-filmagem { background: var(--red); box-shadow: 0 0 12px var(--red); animation: blink 1.6s steps(2) infinite; }
.status-dot.st-em-pos-producao { background: #ffb44d; box-shadow: 0 0 10px #ffb44d; }
.status-dot.st-entregue, .status-dot.st-concluido { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
/* sugestões de boas-vindas */
.suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.suggest .mono { width: 100%; font-size: 9px; color: var(--mute); }
.suggest-chip { text-align: left; padding: 9px 13px; border-radius: 10px; border: 1px dashed var(--line-2); background: rgba(255, 255, 255, .02); color: rgba(238, 241, 247, .8); font: 500 12.5px/1.4 var(--sans); cursor: pointer; transition: all .25s; }
.suggest-chip:hover { border-style: solid; border-color: rgba(107, 146, 255, .4); color: #fff; background: rgba(59, 108, 244, .05); }
/* atalhos dos formulários (frequência, datas, «inclui», boas-vindas com nome) */
.qpick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.quick-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: rgba(238, 241, 247, .78); font: 500 12px/1.3 var(--sans); cursor: pointer; transition: all .2s; }
.quick-chip:hover { border-color: rgba(107, 146, 255, .45); color: #fff; }
.quick-chip.on { background: rgba(59, 108, 244, .18); border-color: rgba(107, 146, 255, .6); color: #fff; }
.welcome-g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.welcome-n { width: 150px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: #fff; font: 500 12px/1.3 var(--sans); }
.field textarea.flash-fill { border-color: var(--blue-2); box-shadow: 0 0 0 4px rgba(59, 108, 244, .2), 0 0 30px -4px rgba(59, 108, 244, .8); }
.hero-lede .lede-proj { color: #fff; font-weight: 600; }
/* entregas por mês */
.months { display: grid; gap: 44px; }
.month-group.is-hidden { display: none; }
.month-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.month-head h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.month-head .mono { color: var(--blue-2); }
.reel-num { text-transform: uppercase; }
.tip { margin: -4px 0 16px; padding: 12px 14px; border-radius: 10px; background: rgba(59, 108, 244, .07); border: 1px solid rgba(59, 108, 244, .2); color: rgba(238, 241, 247, .8); font-size: 13px; line-height: 1.5; }
.tip b { color: #fff; }
.batch summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.batch summary::-webkit-details-marker { display: none; }
.batch summary .label { margin: 0; }
.batch summary .label::after { content: ' +'; }
.batch[open] summary .label::after { content: ' −'; }
.batch-hint { color: var(--mute); font-size: 13px; }
.batch form { margin-top: 16px; }
.dl-month { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); font-weight: 700; }
.dl-month:first-of-type { margin-top: 4px; }
.dl-month .mono { font-size: 8px; color: var(--blue-2); }
.dl-row + .dl-month { margin-top: 22px; }
.dl-edit { grid-column: 1 / -1; }
.dl-edit summary { cursor: pointer; color: var(--blue-2); font-size: 9px; list-style: none; width: max-content; }
.dl-edit summary::-webkit-details-marker { display: none; }
.dl-edit[open] summary { margin-bottom: 12px; }
.dl-edit form { padding: 16px; border-radius: 10px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); }
/* pasta principal do projeto */
.drive-hero { position: relative; display: block; min-height: 340px; border-radius: 20px; overflow: hidden; text-decoration: none; border: 1px solid var(--line-2); transition: transform .6s var(--ease), border-color .4s, box-shadow .6s var(--ease); }
.drive-bg { position: absolute; inset: -4%; background-size: cover; background-position: center 40%; transition: transform 1.6s var(--ease); filter: saturate(.85); }
.drive-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 7, 11, .94) 0%, rgba(5, 7, 11, .7) 50%, rgba(5, 7, 11, .35) 100%); }
.drive-inner { position: relative; z-index: 2; padding: 44px clamp(22px, 4vw, 52px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.drive-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.drive-hero h3 { margin: 0; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.025em; font-weight: 800; color: #fff; }
.drive-counts { display: flex; gap: 40px; }
.drive-counts div { display: flex; flex-direction: column; gap: 4px; }
.drive-counts strong { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; color: var(--blue-2); line-height: 1; }
.drive-btn { margin-top: 6px; }
.drive-hero:hover { transform: translateY(-3px); border-color: rgba(107, 146, 255, .35); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 40px -18px rgba(59, 108, 244, .45); }
.drive-hero:hover .drive-bg { transform: scale(1.05); }
.drive-hero:hover .btn-arrow, .drive-hero:hover .drive-btn svg { transform: translate(3px, -3px); }
.block-sub { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 44px 0 24px; }
.block-sub h3 { margin: 0; font-size: 22px; font-weight: 700; }
@media (max-width: 640px) { .drive-hero { min-height: 0; } .drive-counts { gap: 24px; } }
/* pessoas com acesso */
.person { display: grid; grid-template-columns: 40px 1fr; gap: 6px 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.person:first-of-type { border-top: 0; }
.person.is-off { opacity: .55; }
.person-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(59, 108, 244, .14); border: 1px solid rgba(59, 108, 244, .35); color: var(--blue-2); font-weight: 800; }
.person-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.person-info strong { font-size: 15px; }
.person-info em { font-style: normal; font-weight: 500; color: var(--mute); }
.person-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 8px; margin-top: 4px; }
.person-tags span { color: var(--blue-2); }
.person-tags .off { color: #ff8a8a; }
.person-tags .muted-tag { color: var(--mute); }
.person .dl-edit { grid-column: 2; }
.person-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.person-actions form { margin: 0; }
.danger-btn:hover { color: #ff8a8a; border-color: rgba(255, 59, 59, .5); }
.mini-label { display: block; font-size: 12px; font-weight: 600; color: var(--mute); margin: 2px 0 8px; }
.perm-boxes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.perm { position: relative; cursor: pointer; }
.perm input { position: absolute; opacity: 0; pointer-events: none; }
.perm span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--mute); font: 600 12.5px var(--sans); transition: all .2s; }
.perm span::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-2); transition: all .2s; }
.perm input:checked + span { color: #fff; border-color: rgba(107, 146, 255, .6); background: rgba(59, 108, 244, .14); }
.perm input:checked + span::before { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat; border-color: var(--blue); }
.perm input:focus-visible + span { box-shadow: 0 0 0 3px rgba(59, 108, 244, .3); }
.add-person { margin-top: 14px; }
.add-person summary { list-style: none; }
.add-person summary::-webkit-details-marker { display: none; }
.add-person[open] summary { display: none; }
.add-person form { padding-top: 6px; }

/* ── Gestor da equipa, termos e registo de atividade ── */
.perm-manage { display: block; margin: -6px 0 16px; }
.perm-manage span { border-style: dashed; }
.perm-manage em { font-style: normal; font-weight: 500; color: var(--mute); margin-left: 4px; }
.perm-manage input:checked + span { border-style: solid; border-color: rgba(61, 220, 151, .55); background: rgba(61, 220, 151, .1); }
.perm-manage input:checked + span::before { background-color: var(--ok); border-color: var(--ok); }
.person-tags .mgr { color: var(--ok); }
.lock-note { grid-column: 2; font-size: 8px; color: var(--mute); }
.conf-note { display: flex; align-items: center; gap: 10px; margin: 14px 2px 0; font-size: 12.5px; color: var(--mute); }
.conf-note svg { color: var(--blue-2); }
.team-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; margin: 0 0 90px; padding: 24px 28px; border-radius: var(--radius); text-decoration: none;
  background: linear-gradient(120deg, rgba(61, 220, 151, .1), var(--panel) 50%); border: 1px solid var(--line-2); transition: border-color .3s, transform .4s var(--ease); }
.team-strip:hover { border-color: rgba(61, 220, 151, .5); transform: translateY(-2px); }
.team-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(61, 220, 151, .12); color: var(--ok); }
.team-strip .mono { color: var(--ok); font-size: 9px; }
.team-strip strong { display: block; font-size: 18px; margin: 4px 0 2px; }
.team-strip p { margin: 0; color: var(--mute); font-size: 13.5px; }
@media (max-width: 640px) { .team-strip { grid-template-columns: 1fr; } }
.declare { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255, 196, 0, .3); background: rgba(255, 196, 0, .06); font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.declare input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
.declare b { color: #fff; }
.terms-list { list-style: none; margin: 0 0 18px; padding: 0; }
.terms-list li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.terms-list li:first-child { border-top: 0; }
.terms-list strong { display: block; margin-bottom: 2px; }
.terms-list p { margin: 0; color: rgba(238, 241, 247, .75); font-size: 14px; }
.terms-list .mono { color: var(--blue-2); padding-top: 4px; }
.panel.terms { max-width: 720px; }
.perm-help { margin: 0; }
.perm-help div { padding: 10px 0; border-top: 1px solid var(--line); }
.perm-help div:first-child { border-top: 0; padding-top: 0; }
.perm-help dt { font-weight: 700; }
.perm-help dd { margin: 2px 0 0; color: var(--mute); font-size: 13.5px; }
.act-list { display: flex; flex-direction: column; margin-bottom: 14px; }
.act { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.act:first-child { border-top: 0; }
.act-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--mute); }
.act-doc .act-dot { background: var(--blue-2); } .act-team .act-dot, .act-ok .act-dot { background: var(--ok); }
.act-warn .act-dot { background: #ff8a8a; } .act-media .act-dot { background: #c9a2ff; }
.act strong { font-size: 13.5px; } .act em { font-style: normal; color: var(--mute); font-size: 13px; }
.act p { margin: 2px 0 0; font-size: 13.5px; color: rgba(238, 241, 247, .75); }
.act p b { color: #fff; font-weight: 600; }
.act-at { font-size: 8px; text-align: right; line-height: 1.7; white-space: nowrap; }
.act-filter { margin: 0 0 18px; }
.act-filter select { min-width: 260px; }
.stack { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tip.tip-after { margin: 14px 0 0; }
.act-filter { max-width: 360px; }
/* ── cliente de demonstração ── */
.demo-panel { margin-top: 26px; background: linear-gradient(120deg, rgba(59, 108, 244, .12), var(--panel) 55%); border-color: rgba(107, 146, 255, .3); }
.demo-head { display: flex; gap: 24px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.demo-head h3 { margin: 6px 0 4px; font-size: 22px; }
.demo-head p { margin: 0; color: var(--mute); max-width: 640px; }
.demo-logins { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 20px; }
.demo-login { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); display: flex; flex-direction: column; gap: 4px; }
.demo-login em { font-style: normal; color: var(--mute); font-weight: 500; }
.demo-login .mono { font-size: 8px; color: var(--blue-2); }
.demo-login code { font: 600 13px var(--sans); color: #fff; }
.demo-logins .tip { grid-column: 1 / -1; margin: 4px 0 0; }
.demo-tag { color: var(--blue-2) !important; }
/* ── cronograma: linha "elétrica" (verde = concluído, laranja = em curso) ── */
.timeline::before { display: none; }
.step::after { content: ''; position: absolute; left: 56px; right: 10px; top: 21px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.step:last-child::after { display: none; }
.seg-done::after { background: linear-gradient(90deg, #2fd98a, #7dffc0 50%, #2fd98a); background-size: 200% 100%; box-shadow: 0 0 6px rgba(61, 220, 151, .75), 0 0 16px rgba(61, 220, 151, .35); animation: flowG 4s linear infinite; }
.seg-now::after { height: 3px; top: 20.5px; background: linear-gradient(90deg, rgba(255, 140, 40, .35) 0%, #ff9a3c 30%, #fff1c9 45%, #ff9a3c 60%, rgba(255, 140, 40, .35) 100%); background-size: 220% 100%;
  box-shadow: 0 0 8px rgba(255, 140, 40, .9), 0 0 22px rgba(255, 120, 30, .45); animation: flowO 1.6s linear infinite, flick 2.2s steps(1) infinite; }
@keyframes flowG { to { background-position: -200% 0; } }
@keyframes flowO { from { background-position: 120% 0; } to { background-position: -100% 0; } }
@keyframes flick { 0%, 100% { opacity: 1; } 47% { opacity: .75; } 49% { opacity: 1; } 83% { opacity: .85; } }
.step-done .step-dot { background: rgba(61, 220, 151, .14); border-color: #3ddc97; color: #3ddc97; box-shadow: 0 0 14px rgba(61, 220, 151, .45); }
.step-now .step-dot { border-color: #ff9a3c; color: #fff; box-shadow: 0 0 0 6px rgba(255, 154, 60, .14), 0 0 26px rgba(255, 140, 40, .55); }
.step-now strong { color: #ffd2a6; }
@media (max-width: 900px) {
  .step::after { left: 21px; right: auto; top: calc(50% + 28px); bottom: calc(-50% + 6px); width: 2px; height: auto; }
  .seg-now::after { width: 3px; left: 20.5px; height: auto; top: calc(50% + 28px); background: linear-gradient(180deg, rgba(255, 140, 40, .35), #ff9a3c 30%, #fff1c9 45%, #ff9a3c 60%, rgba(255, 140, 40, .35)); background-size: 100% 220%; animation: flowOv 1.6s linear infinite, flick 2.2s steps(1) infinite; }
  .seg-done::after { background: linear-gradient(180deg, #2fd98a, #7dffc0 50%, #2fd98a); background-size: 100% 200%; animation: flowGv 4s linear infinite; }
}
@keyframes flowGv { to { background-position: 0 -200%; } }
@keyframes flowOv { from { background-position: 0 120%; } to { background-position: 0 -100%; } }
@media (prefers-reduced-motion: reduce) { .seg-done::after, .seg-now::after { animation: none; } }
.step-now .step-dot { animation: pulseO 2.4s ease-in-out infinite; }
@keyframes pulseO { 0%, 100% { box-shadow: 0 0 0 6px rgba(255, 154, 60, .14), 0 0 26px rgba(255, 140, 40, .5); } 50% { box-shadow: 0 0 0 10px rgba(255, 154, 60, .06), 0 0 38px rgba(255, 140, 40, .7); } }

/* ── Vídeos: cartões com barra luminosa ── */
[hidden] { display: none !important; }
.vhead { align-items: flex-end; }
.vsub-hot { color: #ffb36b; font-weight: 700; }
.vcount { text-align: right; }
.vcount strong { display: block; font: 800 56px/1 var(--sans); color: #fff; }
.vcount span { color: var(--mute); font-weight: 600; }
.mband { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 4px 0 8px; }
.mband i { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.mband i.d { background: linear-gradient(90deg, #2fd98a, #7dffc0 50%, #2fd98a); background-size: 200% 100%; box-shadow: 0 0 8px rgba(61, 220, 151, .6); animation: flowG 4s linear infinite; }
.mband i.n { background: linear-gradient(90deg, rgba(255, 140, 40, .45), #ff9a3c 30%, #fff1c9 45%, #ff9a3c 60%, rgba(255, 140, 40, .45)); background-size: 220% 100%; box-shadow: 0 0 10px rgba(255, 140, 40, .85); animation: flowO 1.6s linear infinite, flick 2.2s steps(1) infinite; }
.mband-lab { display: flex; justify-content: space-between; color: var(--mute); font-size: 13px; margin-bottom: 26px; text-transform: capitalize; }
.mband-lab b { color: #ffb36b; text-transform: none; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.vcard { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); transition: border-color .3s, transform .4s var(--ease); }
.vcard:hover { transform: translateY(-2px); }
.vcard.is-hot { border-color: rgba(255, 154, 60, .6); box-shadow: 0 0 34px rgba(255, 140, 40, .16); }
.vcard.is-done { border-color: rgba(61, 220, 151, .25); }
.vtop { font-size: 9px; color: var(--mute); }
.vcard.is-hot .vtop { color: #ffb36b; }
.vcard h4 { margin: 0; font-size: 17px; line-height: 1.3; }
.vtags { display: flex; flex-wrap: wrap; gap: 6px; }
.vtags span { font-size: 11.5px; font-weight: 600; color: rgba(238, 241, 247, .75); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); }
.vbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.vb-seg i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.vb-seg span { display: block; margin-top: 6px; font-size: 10.5px; color: var(--mute); }
.vb-seg.d i { background: linear-gradient(90deg, #2fd98a, #7dffc0 50%, #2fd98a); background-size: 200% 100%; box-shadow: 0 0 6px rgba(61, 220, 151, .75), 0 0 14px rgba(61, 220, 151, .3); animation: flowG 4s linear infinite; }
.vb-seg.n i { height: 6px; margin-top: -.5px; background: linear-gradient(90deg, rgba(255, 140, 40, .4), #ff9a3c 30%, #fff1c9 45%, #ff9a3c 60%, rgba(255, 140, 40, .4)); background-size: 220% 100%;
  box-shadow: 0 0 8px rgba(255, 140, 40, .9), 0 0 18px rgba(255, 120, 30, .4); animation: flowO 1.6s linear infinite, flick 2.2s steps(1) infinite; }
.vb-seg.n span { color: #ffb36b; font-weight: 700; }
.vb-seg.d span { color: rgba(125, 255, 192, .8); }
.vst { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
.vst b { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vst.ok { color: #3ddc97; } .vst.ok b { background: #3ddc97; box-shadow: 0 0 8px #3ddc97; }
.vst.or { color: #ffb36b; } .vst.or b { background: #ff9a3c; box-shadow: 0 0 8px #ff9a3c; animation: pulseDot 1.6s ease-in-out infinite; }
.vst.gr { color: var(--mute); } .vst.gr b { background: var(--mute); }
@keyframes pulseDot { 50% { box-shadow: 0 0 14px #ff9a3c; transform: scale(1.2); } }
.vactions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.vactions form { margin: 0; }
.vbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 14px; border-radius: 999px; font: 700 13.5px var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: #fff; transition: transform .2s, box-shadow .3s, background .3s; list-style: none; }
.vbtn::-webkit-details-marker { display: none; }
.vbtn:hover { transform: translateY(-1px); }
.vbtn-blue { background: var(--blue); border-color: var(--blue); box-shadow: 0 8px 24px rgba(59, 108, 244, .3); }
.vbtn-green { background: #3ddc97; border-color: #3ddc97; color: #04130b; box-shadow: 0 8px 24px rgba(61, 220, 151, .25); }
.vbtn-orange { border-color: rgba(255, 154, 60, .6); color: #ffc28a; }
.vbtn-orange-solid { background: #ff9a3c; border-color: #ff9a3c; color: #1a0d00; margin-top: 8px; }
.vbtn-off { color: var(--mute); opacity: .7; cursor: default; }
.vbtn[disabled] { opacity: .5; cursor: not-allowed; }
.vchanges[open] summary { background: rgba(255, 154, 60, .1); }
.vchanges textarea { width: 100%; margin-top: 8px; padding: 12px; border-radius: 10px; border: 1px solid rgba(255, 154, 60, .4); background: rgba(255, 255, 255, .03); color: var(--text); font: 500 14px var(--sans); resize: vertical; }
.vdead { margin: 2px 0 0; font-size: 12px; color: var(--mute); text-align: center; }
.vdead b { color: #ffc28a; }
.vreq { margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(255, 154, 60, .08); border: 1px solid rgba(255, 154, 60, .3); font-size: 13.5px; color: rgba(238, 241, 247, .85); font-style: italic; }
.vreq .mono { display: block; font-style: normal; font-size: 8px; color: #ffb36b; margin-bottom: 6px; }
.vothers { margin-top: 26px; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; }
.vothers summary { cursor: pointer; color: var(--mute); font-size: 13.5px; text-transform: capitalize; }
.vothers summary .mono { margin-right: 10px; color: var(--blue-2); }
.vmonth h3 { margin: 22px 0 12px; text-transform: capitalize; }
/* admin */
.avid { padding: 16px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.avid-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.avid-top .mono { font-size: 8px; white-space: nowrap; }
.avid-act form { margin: 0; }
.vsend { display: flex; gap: 8px; flex-wrap: wrap; }
.vsend input { flex: 1 1 200px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .035); color: var(--text); font: 500 13.5px var(--sans); }
.vwait { font-size: 13px; color: var(--mute); margin-bottom: 8px; }
.vwait b { color: #ffc28a; }
.vrep { margin-bottom: 16px; }
.vrows { display: flex; flex-direction: column; gap: 10px; }
.vrow { display: grid; grid-template-columns: 30px 1fr 1fr; gap: 10px; align-items: end; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.vrow .field:nth-of-type(1) { grid-column: 2 / -1; }
.vrow .field:nth-of-type(n+2) { grid-column: auto; }
.vrow .field:nth-of-type(2), .vrow .field:nth-of-type(4) { grid-column: 2; }
.vrow .field:nth-of-type(3), .vrow .field:nth-of-type(5) { grid-column: 3; }
.vrow-n { grid-row: 1 / span 3; align-self: start; padding-top: 34px; }
.vrow .field { margin: 0; }
.vrow-n { color: var(--blue-2); padding-bottom: 14px; }

.vold { margin: 4px 0 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.vold summary { cursor: pointer; font-size: 8.5px; color: var(--ok); }
@media (max-width: 640px) {
  .vhead { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vcount { display: flex; align-items: baseline; gap: 10px; text-align: left; }
  .vcount strong { font-size: 40px; }
  .mband-lab { font-size: 12px; }
}

/* ═════════════════════ CRM SAFIRE ═════════════════════ */
.page-crm .dash { padding-top: 92px; }
.nav-crm { color: #fff; background: rgba(59, 108, 244, .16); }
.crm-tabs { position: sticky; top: 64px; z-index: 40; display: flex; align-items: center; gap: 4px; margin: 0 0 30px; padding: 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(13, 17, 25, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow-x: auto; scrollbar-width: none; }
.crm-tabs::-webkit-scrollbar { display: none; }
.crm-mark { padding: 0 10px 0 12px; color: var(--blue-2); }
.crm-tab { flex: none; padding: 9px 14px; border-radius: 999px; color: var(--mute); font: 600 13px var(--sans); text-decoration: none; transition: background .25s, color .25s; }
.crm-tab:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.crm-tab.is-on { color: #fff; background: var(--blue); box-shadow: 0 8px 24px -10px var(--blue-glow); }
.sync-badge { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font: 600 11px var(--sans); color: var(--mute); text-decoration: none; border: 1px solid var(--line); }
.sync-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.sync-badge.on i { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.sync-badge.err { color: #ffb0b0; border-color: rgba(255, 59, 59, .35); } .sync-badge.err i { background: var(--red); }
.sync-badge.off i { background: #e3b341; }
.crm-head { margin-bottom: 26px; }
.crm-head h2 { font-size: clamp(26px, 3vw, 40px); }
.head-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.head-actions form { margin: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.panel-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.panel-head a.mono { color: var(--blue-2); text-decoration: none; }
.crm .panel { padding: 22px; }
.crm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.crm-main, .crm-side { display: grid; gap: 18px; min-width: 0; }
.small { font-size: 13px; }
.narrow-wide { max-width: 860px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.label.sub { margin: 22px 0 12px; }
.tip.warn { background: rgba(227, 179, 65, .08); border-color: rgba(227, 179, 65, .3); }
/* painel */
.dash-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { position: relative; padding: 20px 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.kpi::before { content: ''; position: absolute; left: 22px; top: 0; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: var(--blue); }
.kpi.c0::before { background: var(--ok); } .kpi.c2::before { background: #9b6bff; } .kpi.c3::before { background: #e3b341; } .kpi.c4::before { background: var(--ok); }
.kpi strong { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.kpi em { font-style: normal; color: var(--mute); font-size: 12.5px; }
/* pipeline */
.kanban { display: grid; grid-template-columns: repeat(var(--kcols, 4), minmax(0, 1fr)); gap: 12px; }
.kcol { min-width: 0; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.kcol header { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px; font-weight: 700; font-size: 13px; }
.kcount { margin-left: auto; color: var(--mute); font-weight: 600; }
.kdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.kdot.k1 { background: #e3b341; box-shadow: 0 0 10px #e3b341; } .kdot.k2 { background: #ff8a3d; box-shadow: 0 0 10px #ff8a3d; }
.kdot.k3 { background: #9b6bff; box-shadow: 0 0 10px #9b6bff; } .kdot.k4 { background: #ff5d6c; box-shadow: 0 0 10px #ff5d6c; } .kdot.k5 { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.kempty { margin: 0; padding: 14px 6px; color: var(--mute); font-size: 12.5px; text-align: center; }
.pcard { min-width: 0; display: grid; gap: 4px; padding: 12px 13px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); text-decoration: none; transition: border-color .25s, transform .25s var(--ease); }
.pcard:hover { border-color: rgba(107, 146, 255, .45); transform: translateY(-1px); }
.pcard-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-width: 0; }
.pcard-stage { font-size: 11px; color: var(--blue-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard strong { font-size: 14px; line-height: 1.3; }
.pcard-client { font-size: 12.5px; color: var(--mute); }
.pcard-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; font-size: 12.5px; }
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.otag { flex: none; padding: 3px 9px; border-radius: 999px; font: 700 10.5px var(--sans); letter-spacing: .02em; background: rgba(255, 255, 255, .06); color: var(--text); }
.otag.o-kevin { background: rgba(59, 108, 244, .18); color: #a9c0ff; } .otag.o-nadia { background: rgba(61, 220, 151, .14); color: #8fe8c1; }
.otag.o-ia { background: rgba(155, 107, 255, .18); color: #c7adff; } .otag.o-free { background: rgba(255, 138, 61, .16); color: #ffbb8c; }
.paytag { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.paytag.ok { background: rgba(61, 220, 151, .12); color: #8fe8c1; } .paytag.warn { background: rgba(255, 59, 59, .12); color: #ff9c9c; } .paytag.mid { background: rgba(227, 179, 65, .14); color: #f0cf7c; }
/* eventos */
.erow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 11px 12px 11px 14px; margin-bottom: 8px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--blue); text-decoration: none; }
.erow:hover { border-color: rgba(107, 146, 255, .4); }
.erow-when { grid-column: 1 / -1; font-size: 11.5px; color: var(--blue-2); font-weight: 700; }
.erow-main strong { display: block; font-size: 14px; } .erow-main em { font-style: normal; font-size: 12.5px; color: var(--mute); }
.erow .otag { align-self: center; }
.k-meet { border-left-color: var(--blue); } .k-shoot { border-left-color: #e3b341; } .k-edit { border-left-color: #9b6bff; } .k-deliver { border-left-color: var(--ok); } .k-personal { border-left-color: #6b7280; }
/* sugestões */
.quick { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 8px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); text-decoration: none; transition: border-color .25s; }
.sug { display: grid; gap: 6px; padding: 12px 14px; margin-bottom: 8px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); text-decoration: none; transition: border-color .25s; }
.sug:hover, .quick:hover { border-color: rgba(107, 146, 255, .45); }
.sug strong { display: block; font-size: 14px; } .sug em { font-style: normal; font-size: 12px; color: var(--mute); }
.sug-btn { justify-self: start; font-size: 12px; font-weight: 700; color: var(--blue-2); }
.quick { font-size: 13.5px; font-weight: 600; }
/* clientes */
.crm-search { display: flex; gap: 10px; margin-bottom: 14px; }
.crm-search input { flex: 1; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text); font: 500 14px var(--sans); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chips .chip { text-decoration: none; }
.ctable { display: grid; gap: 8px; }
.crow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto 40px; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; transition: border-color .25s; }
.crow:hover { border-color: rgba(107, 146, 255, .45); }
.crow-av { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: rgba(59, 108, 244, .14); color: var(--blue-2); font: 700 13px var(--display); overflow: hidden; }
.crow-av img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.crow-main strong { display: block; } .crow-main em { font-style: normal; font-size: 12.5px; color: var(--mute); }
.crow-meta { white-space: nowrap; }
.crow-sync { font: 700 11px var(--sans); color: var(--mute); text-align: right; }
.stag { padding: 4px 10px; border-radius: 999px; font: 700 11px var(--sans); background: rgba(255, 255, 255, .06); white-space: nowrap; }
.s-novo { background: rgba(227, 179, 65, .14); color: #f0cf7c; } .s-reuni-o-marcada { background: rgba(59, 108, 244, .18); color: #a9c0ff; }
.s-proposta-enviada, .s-enviado { background: rgba(255, 138, 61, .16); color: #ffbb8c; } .s-em-decis-o { background: rgba(155, 107, 255, .18); color: #c7adff; }
.s-cliente-ativo, .s-aceite, .s-assinado { background: rgba(61, 220, 151, .14); color: #8fe8c1; } .s-perdido, .s-recusado { background: rgba(255, 59, 59, .12); color: #ff9c9c; }
.s-conclu-do, .s-rascunho { background: rgba(255, 255, 255, .07); color: var(--mute); }
.client-strip { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: -10px 0 22px; }
.client-strip a.mono { color: var(--text); text-decoration: none; }
.hrow { display: grid; grid-template-columns: 110px 82px 1fr; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.hch { font: 700 11px var(--sans); padding: 2px 8px; border-radius: 999px; text-align: center; }
.hch.wa { background: rgba(37, 211, 102, .14); color: #7fe3a6; } .hch.em { background: rgba(59, 108, 244, .16); color: #a9c0ff; }
/* documentos */
.drow { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; margin-bottom: 8px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); text-decoration: none; }
.drow:hover { border-color: rgba(107, 146, 255, .45); }
.drow-ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font: 700 14px var(--display); background: rgba(227, 179, 65, .14); color: #f0cf7c; }
.drow-ic.c { background: rgba(59, 108, 244, .18); color: #a9c0ff; }
.drow-main strong { display: block; font-size: 14px; } .drow-main em { display: block; font-style: normal; font-size: 12.5px; color: var(--mute); } .drow-main em.vis { color: #8fe8c1; }
.check { display: flex; gap: 10px; align-items: center; margin: 4px 0 14px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--blue); }
/* projeto */
.stage-now { display: grid; grid-template-columns: 1.4fr .6fr 1fr 1.2fr; gap: 18px; margin-bottom: 18px; border-color: rgba(59, 108, 244, .35); background: linear-gradient(120deg, rgba(59, 108, 244, .12), var(--panel) 55%); }
.stage-now > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.stage-now strong { font-size: 18px; } .stage-now em { font-style: normal; color: var(--mute); font-size: 13px; }
.stage-now .quick { width: 100%; margin: 0; }
.radio-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.radio-pills label { cursor: pointer; }
.radio-pills input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pills span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); font: 600 13px var(--sans); transition: all .25s; }
.radio-pills input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 8px 24px -10px var(--blue-glow); }
.radio-pills input:focus-visible + span { outline: 2px solid var(--blue-2); outline-offset: 2px; }
/* agenda */
.legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: -8px 0 16px; font-size: 12.5px; color: var(--mute); }
.legend span { display: inline-flex; align-items: center; gap: 7px; } .legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--blue); }
.legend .k-shoot i { background: #e3b341; } .legend .k-edit i { background: #9b6bff; } .legend .k-deliver i { background: var(--ok); } .legend .k-personal i { background: #6b7280; }
.gcal-note { margin-left: auto; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.wday { min-height: 340px; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.wday.is-today { border-color: rgba(59, 108, 244, .55); box-shadow: 0 0 0 1px rgba(59, 108, 244, .25), 0 20px 50px -30px var(--blue-glow); }
.wday header { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); }
.wday header b { font-size: 22px; font-weight: 800; } .wday.is-today header b { color: var(--blue-2); }
.wday header a { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: var(--mute); border: 1px solid var(--line-2); font-weight: 700; }
.wday header a:hover { color: #fff; border-color: var(--blue); background: var(--blue); }
.wev { display: grid; gap: 2px; padding: 9px 10px; border-radius: 9px; text-decoration: none; background: rgba(59, 108, 244, .12); border-left: 3px solid var(--blue); }
.wev strong { font-size: 13px; line-height: 1.3; } .wev em { font-style: normal; font-size: 11.5px; color: var(--mute); } .wev .mono { font-size: 9px; color: var(--text); opacity: .8; }
.wev.k-shoot { background: rgba(227, 179, 65, .12); border-left-color: #e3b341; } .wev.k-edit { background: rgba(155, 107, 255, .13); border-left-color: #9b6bff; } .wev.k-deliver { background: rgba(61, 220, 151, .1); border-left-color: var(--ok); } .wev.k-personal { background: rgba(107, 114, 128, .15); border-left-color: #6b7280; }
.wev.is-cancel { opacity: .45; text-decoration: line-through; }
.wev .rec-ok { color: #8fe8c1; }
.wempty { margin: 0; color: var(--line-2); text-align: center; padding-top: 10px; }
/* mensagens */
.msg-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.msg-list { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow: auto; }
.msg-who .field { margin-bottom: 10px; }
.mitem { display: block; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; color: var(--mute); text-decoration: none; }
.mitem:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.mitem.is-on { color: #fff; background: rgba(59, 108, 244, .2); }
.msg-list .btn-wide { margin-top: 14px; }
.msg-compose textarea, .msg-compose .msg-subj { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text); font: 500 14.5px/1.6 var(--sans); resize: vertical; }
.msg-compose .msg-subj { margin-bottom: 10px; font-weight: 700; }
.msg-wa { background: rgba(37, 211, 102, .06) !important; border-color: rgba(37, 211, 102, .3) !important; }
.wa-l { color: #7fe3a6; }
.btn-wa { --bg: #25d366; border-color: #25d366; color: #05210f; font-weight: 800; }
.btn-wa:hover { --bg: #2fe274; border-color: #2fe274; }
.copy-done { background: rgba(61, 220, 151, .15) !important; border-color: var(--ok) !important; }
/* jornada */
.jphase { margin-bottom: 14px; }
.jrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 180px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.jnum { font: 700 13px var(--display); color: var(--blue-2); }
.jmain strong { display: block; } .jmain em { display: block; font-style: normal; font-size: 12.5px; color: var(--mute); } .jmain .jadv { color: rgba(238, 241, 247, .65); }
.jrow select, .jrow input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text); font: 500 13px var(--sans); width: 100%; }
.jrow select option { background: var(--panel); }
.sticky-save { position: sticky; bottom: 16px; justify-content: flex-end; }
/* notion */
.nstate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.nstate > div { padding: 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 6px; }
.nstate strong { font-size: 18px; } .nstate .ok { color: var(--ok); } .nstate .err { color: #ff9c9c; } .nstate .off { color: #f0cf7c; }
.ntable { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13.5px; }
.ntable th { text-align: left; font: 600 11px var(--sans); color: var(--mute); padding: 8px 6px; border-bottom: 1px solid var(--line-2); }
.ntable td { padding: 9px 6px; border-bottom: 1px solid var(--line); }
.guide ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; line-height: 1.55; }
.guide b { color: #fff; }
@media (max-width: 1100px) {
  .crm-grid { grid-template-columns: 1fr; }
  .dash-two { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-now { grid-template-columns: 1fr 1fr; }
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .page-crm .dash { padding-top: 84px; }
  .crm-tabs { position: static; border-radius: 14px; margin-left: -4px; margin-right: -4px; }
  .page-admin .topbar { gap: 10px; }
  .page-admin .tb-right { min-width: 0; overflow-x: auto; scrollbar-width: none; } .page-admin .tb-right::-webkit-scrollbar { display: none; }
  .page-admin .nav-link { white-space: nowrap; flex: none; }
  .kpis { grid-template-columns: 1fr 1fr; } .kpis .kpi.c0 { grid-column: 1 / -1; } .kpi strong { font-size: 22px; } .kpi { padding: 16px; }
  .kanban { grid-template-columns: 1fr; }
  .crow { grid-template-columns: 40px minmax(0, 1fr) auto; } .crow .crow-meta, .crow .crow-sync { display: none; }
  .stage-now { grid-template-columns: 1fr; }
  .week { grid-template-columns: 1fr; } .wday { min-height: 0; }
  .msg-grid { grid-template-columns: 1fr; } .msg-list { position: static; max-height: none; } .msg-compose { order: -1; }
  .jrow { grid-template-columns: 32px minmax(0, 1fr); } .jrow select, .jrow input { grid-column: 2; }
  .nstate { grid-template-columns: 1fr; }
  .hrow { grid-template-columns: 1fr auto; } .hrow > span:last-child { grid-column: 1 / -1; }
  .gcal-note { margin-left: 0; }
}

/* financeiro do cliente */
.fin-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.fin-big > div { padding: 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 4px; }
.fin-big strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .fin-big strong.warn { color: #f0cf7c; }
.finrow { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.finrow span { color: var(--mute); } .finrow.muted b { color: var(--mute); font-weight: 600; }
.fin .small { margin: 12px 0 0; }
@media (max-width: 1250px) and (min-width: 761px) { .kpis { grid-template-columns: repeat(3, 1fr); } }

/* ═════ Estado do cliente: ativo · stand-by · não ativo ═════ */
.life-switch { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); margin: 0; }
.life-switch button { border: 0; background: none; color: var(--mute); font: 700 12px var(--sans); padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s; }
.life-switch button:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.life-switch .ls-ativo.is-on { background: rgba(61, 220, 151, .18); color: #8fe8c1; box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .45); }
.life-switch .ls-standby.is-on { background: rgba(255, 159, 67, .18); color: #ffc27a; box-shadow: inset 0 0 0 1px rgba(255, 159, 67, .45); }
.life-switch .ls-inativo.is-on { background: rgba(255, 59, 59, .16); color: #ff9c9c; box-shadow: inset 0 0 0 1px rgba(255, 59, 59, .45); }
.life-switch.is-compact button { padding: 7px 11px; font-size: 11px; }
.client-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.client-row .client-tile { grid-template-columns: 76px minmax(180px, 1fr) auto; }
.client-row .ct-body { min-width: 0; }
.client-row .ct-body h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-row.life-standby .client-tile { border-left: 3px solid #ff9f43; }
.client-row.life-inativo .client-tile { border-left: 3px solid var(--red); opacity: .72; }
.client-row.life-ativo .client-tile, .client-row.life-lead .client-tile { border-left: 3px solid var(--ok); }
.lock-txt { color: #ff9c9c; font-weight: 600; }
.life-chips { margin: -14px 0 18px; }
.life-chips .chip:nth-child(2) { color: #8fe8c1; } .life-chips .chip:nth-child(3) { color: #ffc27a; } .life-chips .chip:nth-child(4) { color: #ff9c9c; }
.life-chips .chip.is-on { color: var(--ink); }
.life-chips .chip.is-on:nth-child(2) { background: #8fe8c1; border-color: #8fe8c1; } .life-chips .chip.is-on:nth-child(3) { background: #ffc27a; border-color: #ffc27a; } .life-chips .chip.is-on:nth-child(4) { background: #ff9c9c; border-color: #ff9c9c; }
.state-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: -14px 0 26px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.state-bar .lock-form { display: flex; align-items: center; gap: 10px; margin: 0 0 0 auto; }
.lock-on { color: #ff9c9c; font-weight: 700; font-size: 13px; }
/* Área de Cliente: conteúdos em pausa */
.lock-banner { display: flex; gap: 16px; align-items: flex-start; margin: 30px 0 10px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid rgba(255, 159, 67, .4); background: linear-gradient(120deg, rgba(255, 159, 67, .12), var(--panel) 60%); }
.lock-banner .lock-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 159, 67, .18); color: #ffc27a; font-size: 18px; }
.lock-banner strong { font-size: 17px; } .lock-banner p { margin: 4px 0 0; color: rgba(238, 241, 247, .8); } .lock-banner a { color: #ffc27a; }
.reel-card.is-locked, .drive-hero.is-locked { cursor: not-allowed; filter: grayscale(.85) brightness(.7); }
.reel-card.is-locked:hover, .drive-hero.is-locked:hover { transform: none; }
@media (max-width: 900px) {
  .client-row { grid-template-columns: 1fr; }
  .client-row .client-tile { grid-template-columns: 60px minmax(0, 1fr); }
  .client-row .life-switch { justify-self: start; margin: -4px 0 6px 12px; }
  .state-bar .lock-form { margin-left: 0; }
}

/* ── Áreas dentro de um cliente (UNE · Retiro · Elite) ── */
.area-tabs { position: absolute; top: 84px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 clamp(16px, 4vw, 48px); pointer-events: none; }
.area-tabs-in { pointer-events: auto; display: flex; align-items: center; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 5px; border-radius: 999px;
  background: rgba(8, 11, 18, .72); border: 1px solid var(--line-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8); }
.area-tabs-in::-webkit-scrollbar { display: none; }
.area-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; text-decoration: none; color: rgba(238, 241, 247, .72); font: 600 13.5px var(--sans); transition: all .3s var(--ease); white-space: nowrap; }
.area-tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.area-tab.is-on { color: #fff; background: var(--blue); box-shadow: 0 0 22px -6px var(--blue-glow); }
.area-tab.area-all { color: var(--mute); font-weight: 500; }
.area-tab.area-all svg { width: 14px; height: 14px; }
.area-sep { flex: none; width: 1px; height: 20px; background: var(--line-2); margin: 0 4px; }

.hero.hero-hub { min-height: 64vh; min-height: 64svh; }
.hero-hub .hero-inner { padding-bottom: 70px; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.tone-safira { --ac: #3b6cf4; --ac2: #6b92ff; --acg: rgba(59, 108, 244, .55); }
.tone-gelo { --ac: #2fb4f0; --ac2: #8fd8ff; --acg: rgba(47, 180, 240, .5); }
.tone-laranja { --ac: #ff8a3d; --ac2: #ffb37a; --acg: rgba(255, 138, 61, .5); }
.tone-verde { --ac: #2fd08a; --ac2: #8ff0c4; --acg: rgba(47, 208, 138, .45); }
.tone-indigo { --ac: #6c63ff; --ac2: #a9a3ff; --acg: rgba(108, 99, 255, .5); }
.tone-prata { --ac: #c9d3e6; --ac2: #ffffff; --acg: rgba(220, 230, 250, .35); }
.area-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 290px; padding: 28px 26px 22px; border-radius: 20px; text-decoration: none; overflow: hidden;
  background: linear-gradient(155deg, color-mix(in srgb, var(--ac) 22%, transparent), rgba(10, 13, 20, .94) 52%), #0a0d14;
  border: 1px solid color-mix(in srgb, var(--ac) 28%, rgba(255, 255, 255, .08));
  transition: transform .5s var(--ease), border-color .35s, box-shadow .5s var(--ease); }
.ac-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ac2), transparent); opacity: .7; transition: opacity .4s; }
.ac-glow { position: absolute; z-index: -1; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, var(--acg), transparent 68%); opacity: .55; transition: opacity .5s, transform .8s var(--ease); }
.area-card::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--ac2) 14%, transparent) 50%, transparent 70%); transform: translateX(-120%); transition: transform 1.1s var(--ease); }
.area-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ac2) 70%, transparent); box-shadow: 0 30px 70px -32px var(--acg), 0 0 0 1px color-mix(in srgb, var(--ac) 25%, transparent) inset; }
.area-card:hover .ac-glow { opacity: 1; transform: scale(1.25) translate(-10px, 10px); }
.area-card:hover::before { transform: translateX(120%); }
.area-card:hover .ac-line { opacity: 1; }
.ac-num { position: absolute; top: 26px; right: 26px; color: var(--ac2); opacity: .75; }
.ac-top { min-height: 18px; }
.ac-pause, .ac-new { font-size: 9px; }
.ac-pause { color: #ffc27a; } .ac-new { color: var(--ac2); }
.area-card h3 { margin: 18px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: .04em; line-height: 1.15; color: #fff; text-shadow: 0 0 28px var(--acg); }
.ac-proj { margin: 8px 0 0; color: rgba(238, 241, 247, .78); font-size: 14px; }
.ac-facts { margin: 12px 0 0; font-size: 9px; }
.ac-nums { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: auto; padding-top: 22px; font-size: 13.5px; color: var(--mute); }
.ac-nums b { color: #fff; font-weight: 700; font-size: 16px; margin-right: 2px; }
.ac-nums .hot b, .ac-nums .hot { color: var(--ac2); }
.ac-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--ac) 22%, rgba(255, 255, 255, .06)); }
.ac-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: #fff; padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ac2) 40%, transparent); transition: background .35s, border-color .35s, box-shadow .35s; }
.ac-go svg { transition: transform .3s; color: var(--ac2); }
.area-card:hover .ac-go { background: var(--ac); border-color: var(--ac); box-shadow: 0 0 22px -4px var(--acg); }
.area-card:hover .ac-go svg { transform: translate(2px, -2px); color: #fff; }
.tone-prata.area-card:hover .ac-go, .tone-prata.area-card:hover .ac-go svg { color: #05070b; }
.area-card.is-paused { filter: saturate(.55); }
.area-card.is-paused .ac-pause { color: #ffc27a; }
/* abas: a aba ativa ganha a cor da área */
.area-tab[class*="tone-"]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ac2); box-shadow: 0 0 8px var(--acg); opacity: .8; }
.area-tab.is-on { background: var(--ac, var(--blue)); box-shadow: 0 0 24px -4px var(--acg, var(--blue-glow)); }
.area-tab.is-on::before { background: #fff; }
.area-tab.tone-prata.is-on { color: #05070b; } .area-tab.tone-prata.is-on::before { background: #05070b; }
.area-row .ar-num { color: var(--ac2, var(--blue-2)); }
.area-row[class*="tone-"] { border-left: 2px solid var(--ac); }

/* admin: painel de áreas */
.areas-panel { margin: 0 0 22px; }
.areas-top .tip { margin: 6px 0 0; max-width: 80ch; }
.areas-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.area-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.area-row form { display: flex; gap: 6px; }
.area-row .icon-btn { width: 30px; height: 30px; font-size: 13px; }
.area-row .icon-btn:disabled { opacity: .3; cursor: default; }
.ar-num { color: var(--blue-2); }
.ar-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.ar-name strong { font-size: 15px; } .ar-name .mono { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.areas-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-form input, .inline-form select { height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); font: 500 14px var(--sans); min-width: 220px; }
.area-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: -12px 0 24px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(107, 146, 255, .3); background: rgba(59, 108, 244, .07); }
.area-bar .mono a { color: var(--blue-2); text-decoration: none; }
.area-bar form { margin-left: auto; }
.area-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.area-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; font: 600 13px var(--sans); color: rgba(238, 241, 247, .8); }
.area-pill sup { font-size: 10px; opacity: .6; }
.area-pill.is-on, .area-pill:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.area-badge { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(59, 108, 244, .18); color: var(--blue-2); font-size: 9px; }
.ct-meta .areas-tag { color: #fff; background: var(--blue); padding: 3px 8px; border-radius: 999px; letter-spacing: .16em; }
.area-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; }
.area-strip .area-add { margin-left: 6px; color: var(--blue-2); text-decoration: none; }
.pcard-area { font-style: normal; color: var(--blue-2); }
@media (max-width: 760px) {
  .area-tabs { top: 72px; justify-content: flex-start; }
  .area-row { flex-wrap: wrap; }
  .inline-form input, .inline-form select { min-width: 0; flex: 1; }
  .area-bar form { margin-left: 0; }
}

/* ── Avença: um cartão por mês, em carrossel ── */
.rail-nav { display: flex; gap: 8px; }
.rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: all .3s var(--ease); }
.rail-btn:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 22px -6px var(--blue-glow); }
.rail-btn:disabled { opacity: .25; cursor: default; }
.month-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px 2px 18px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.month-rail::-webkit-scrollbar { display: none; }
.month-card { flex: 0 0 calc((100% - 54px) / 4); scroll-snap-align: start; min-height: 270px; }
.month-card h3 { margin-top: 14px; }
.month-card.st-next { opacity: .55; }
.month-card.st-next:hover { opacity: 1; }
.month-card.st-now { border-color: color-mix(in srgb, var(--ac2) 70%, transparent); box-shadow: 0 24px 60px -34px var(--acg), 0 0 0 1px color-mix(in srgb, var(--ac) 30%, transparent) inset; }
.month-card.st-now .ac-glow { opacity: .95; }
.mc-bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); margin-top: 16px; overflow: hidden; }
.mc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ac), var(--ac2)); box-shadow: 0 0 10px var(--acg); }
.rail-hint { text-align: center; margin: 4px 0 0; font-size: 9px; opacity: .6; }
.area-tab em { font-style: normal; font-size: 10px; opacity: .6; margin-left: 2px; }
.proj-grid.is-month { grid-template-columns: 1fr; }
.move-box { display: flex; align-items: center; gap: 8px; flex-basis: 100%; font-size: 13px; color: var(--mute); cursor: pointer; }
.move-box input { width: 16px; height: 16px; min-width: 0; accent-color: var(--blue); }
@media (max-width: 1100px) { .month-card { flex-basis: calc((100% - 36px) / 3); } }
@media (max-width: 760px) { .month-card { flex-basis: 78%; } .rail-btn { width: 38px; height: 38px; } }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

/* ── SAFIRE Review: leitor dentro do portal ── */
button.vbtn { color: inherit; }
body.rvw-open { overflow: hidden; }
dialog.rvw { padding: 0; border: 0; background: transparent; color: #eef1f7; width: min(1100px, 94vw); max-width: none; max-height: 94vh; }
dialog.rvw.is-vert { width: min(460px, 94vw); }
dialog.rvw::backdrop { background: rgba(3, 5, 10, .86); backdrop-filter: blur(8px); }
dialog.rvw[open] { animation: rvwIn .45s var(--ease, ease) both; }
@keyframes rvwIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.rvw-in { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; background: var(--panel, #0d111b); border: 1px solid rgba(255, 154, 60, .45); box-shadow: 0 0 60px rgba(255, 140, 40, .14), 0 30px 80px rgba(0, 0, 0, .6); max-height: 94vh; overflow: auto; }
.rvw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rvw-head .mono { font-size: 10.5px; letter-spacing: .18em; color: #ffb36b; }
.rvw-head h3 { margin: 4px 0 0; font-size: 20px; color: #fff; }
.rvw-x { flex: none; color: #eef1f7 !important; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2, #2a3142); background: transparent; color: inherit; font-size: 15px; cursor: pointer; }
.rvw-x:hover { background: rgba(255, 255, 255, .06); }
.rvw-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
dialog.rvw.is-vert .rvw-stage { aspect-ratio: 9 / 16; max-height: 66vh; margin: 0 auto; width: 100%; }
.rvw-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rvw-help { margin: 0; font-size: 12.5px; color: rgba(238, 241, 247, .62); }
.rvw-help a { color: inherit; }
.rvw-act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.rvw-act .vdead { grid-column: 1 / -1; margin: 0; }
.rvw-act > .vbtn { grid-column: 1 / -1; }
@media (max-width: 640px) { dialog.rvw, dialog.rvw.is-vert { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; } .rvw-in { border-radius: 0; height: 100%; max-height: none; padding: 14px; border-width: 0; } .rvw-act { grid-template-columns: 1fr; } }

/* ── Avaliação do vídeo (cliente) ── */
.vrate { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 196, 70, .06); border: 1px solid rgba(255, 196, 70, .22); margin-bottom: 4px; }
.vrate .mono { font-size: 10px; letter-spacing: .18em; color: #ffd27a; }
.star-pick { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-pick input { position: absolute; opacity: 0; pointer-events: none; }
.star-pick label { font-size: 26px; line-height: 1; color: rgba(255, 255, 255, .18); cursor: pointer; transition: color .15s, transform .15s; }
.star-pick label:hover, .star-pick label:hover ~ label, .star-pick input:checked ~ label { color: #ffc446; }
.star-pick label:hover { transform: scale(1.15); }
.vrate-more { display: none; flex-direction: column; gap: 8px; }
.vrate:has(input:checked) .vrate-more { display: flex; }
.vrate textarea { width: 100%; resize: vertical; border-radius: 10px; padding: 9px 11px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line-2, #2a3142); color: var(--text, #eef1f7); font: 13px var(--sans); }
.vbtn-gold { background: #ffc446; border-color: #ffc446; color: #1a1205 !important; }
.vrate .stars { font-size: 20px; color: #ffc446; letter-spacing: 2px; }
.vrate .stars i { font-style: normal; color: rgba(255, 255, 255, .15); }
.vrate p { margin: 0; font-size: 13px; opacity: .75; }
.stars-sm { color: #ffc446; letter-spacing: 1px; }

/* estrelas com brilho dourado */
.star-pick input:checked ~ label, .star-pick label:hover, .star-pick label:hover ~ label { text-shadow: 0 0 10px rgba(255, 196, 70, .75), 0 0 24px rgba(255, 168, 40, .35); }
.vrate .stars { animation: starGlow 3.4s ease-in-out infinite; }
.vrate .stars i { text-shadow: none; }
@keyframes starGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(255, 196, 70, .45), 0 0 14px rgba(255, 168, 40, .15); }
  50% { text-shadow: 0 0 12px rgba(255, 200, 80, .9), 0 0 28px rgba(255, 168, 40, .4); }
}
@media (prefers-reduced-motion: reduce) { .vrate .stars { animation: none; text-shadow: 0 0 8px rgba(255, 196, 70, .6); } }

/* barra dos meses/áreas: o texto do topo da página nunca fica por baixo dela */
body:has(.area-tabs) .hero-inner { padding-top: 170px; }
@media (max-width: 760px) { body:has(.area-tabs) .hero-inner { padding-top: 140px; } }

/* estrelas: só contorno antes de escolher, preenchidas e douradas ao escolher */
.star-pick label { color: transparent; -webkit-text-stroke: 1.6px rgba(255, 200, 90, .7); text-shadow: none; }
.star-pick label:hover, .star-pick label:hover ~ label, .star-pick input:checked ~ label {
  color: #ffc93c; -webkit-text-stroke: 0;
  text-shadow: 0 0 8px rgba(255, 205, 70, .95), 0 0 20px rgba(255, 175, 30, .7), 0 0 38px rgba(255, 150, 0, .4);
}
.vrate .stars { color: #ffc93c; animation: starGlowGold 3.2s ease-in-out infinite; }
.vrate .stars i { color: transparent; -webkit-text-stroke: 1.4px rgba(255, 200, 90, .55); }
@keyframes starGlowGold {
  0%, 100% { text-shadow: 0 0 7px rgba(255, 200, 60, .7), 0 0 18px rgba(255, 165, 20, .35); }
  50% { text-shadow: 0 0 13px rgba(255, 212, 85, 1), 0 0 30px rgba(255, 175, 30, .7), 0 0 48px rgba(255, 150, 0, .35); }
}
@media (prefers-reduced-motion: reduce) { .vrate .stars { animation: none; text-shadow: 0 0 10px rgba(255, 200, 60, .8); } }

/* ── Pedido de alterações com momento do vídeo ── */
.chg-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.chg-rows { display: flex; flex-direction: column; gap: 10px; }
.chg-row { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(255, 154, 60, .05); border: 1px solid rgba(255, 154, 60, .28); animation: chgIn .35s var(--ease, ease) both; }
@keyframes chgIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.chg-time .mono { display: block; font-size: 9px; color: #ffb36b; margin-bottom: 6px; }
.chg-sel { display: flex; align-items: center; gap: 8px; }
.chg-sel b { color: #ffb36b; font-size: 18px; }
.chg-sel select { flex: 1; appearance: none; -webkit-appearance: none; padding: 11px 34px 11px 14px; border-radius: 10px; border: 1px solid rgba(255, 154, 60, .45); color: var(--text, #eef1f7); font: 700 15px var(--sans);
  background: rgba(0, 0, 0, .35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffb36b' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; }
.chg-sel select:disabled { opacity: .35; }
.chg-row textarea { margin-top: 0 !important; }
.chg-row textarea.chg-need { border-color: #ff6b6b !important; box-shadow: 0 0 0 3px rgba(255, 107, 107, .2); }
.chg-del { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); background: transparent; color: #eef1f7; cursor: pointer; font-size: 12px; }
.chg-add { align-self: flex-start; padding: 8px 14px; border-radius: 999px; border: 1px dashed rgba(255, 154, 60, .6); background: transparent; color: #ffb36b; font: 700 13px var(--sans); cursor: pointer; }
.chg-add:hover { background: rgba(255, 154, 60, .08); }
.chg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-style: normal; }
.chg-list li { display: flex; gap: 10px; align-items: baseline; }
.chg-t { flex: none; min-width: 46px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 154, 60, .18); color: #ffb36b; font: 700 12px var(--sans); text-align: center; }

/* Condições de pagamento (Área de Cliente) */
.pay-terms { margin-top: 18px; padding: 22px 24px; border-radius: var(--radius, 14px); border: 1px solid rgba(107, 146, 255, .35); background: linear-gradient(140deg, rgba(59, 108, 244, .12), rgba(59, 108, 244, .03)); }
.pay-terms h3 { margin: 6px 0 10px; font-size: 20px; }
.pay-terms ul { margin: 0; padding-left: 18px; line-height: 1.6; color: var(--text); }
.pay-terms li + li { margin-top: 4px; }

/* Guia em vídeo do SAFIRE Hub (boas-vindas) */
.guide-btn { --d: 260ms; display: inline-flex; align-items: center; gap: 14px; margin: 22px 0 0; padding: 10px 20px 10px 10px; border-radius: 999px; text-decoration: none; color: #eef1f7;
  background: rgba(59, 108, 244, .14); border: 1px solid rgba(107, 146, 255, .45); box-shadow: 0 0 28px rgba(59, 108, 244, .25); transition: transform .2s, box-shadow .2s; }
.guide-btn:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(59, 108, 244, .45); }
.guide-play { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #3b6cf4; font-size: 15px; padding-left: 3px; box-shadow: 0 0 18px rgba(59, 108, 244, .8); animation: guidePulse 2.4s infinite; }
.guide-btn b { display: block; font-size: 14.5px; } .guide-btn em { display: block; font-style: normal; font-size: 12.5px; color: rgba(238, 241, 247, .7); }
@keyframes guidePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 108, 244, .7); } 50% { box-shadow: 0 0 0 10px rgba(59, 108, 244, 0); } }

.guide-dlg { padding: 0; border: 0; background: transparent; max-width: min(1100px, 94vw); width: 100%; }
.guide-dlg::backdrop { background: rgba(5, 6, 10, .82); backdrop-filter: blur(6px); }
.guide-dlg-box { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(107, 146, 255, .35); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); background: #000; }
.guide-dlg video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.guide-dlg-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 10, 12, .75); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }

/* DATABASE · filtros */
.db-filters select { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text); font: 500 13.5px var(--sans); max-width: 260px; }
.db-filters select option { background: #0d1120; color: #eef1f7; }
.db-filters label { color: var(--mute); }

/* Backstage: menu compacto */
.tb-brand, .tb-backstage { flex-shrink: 0; }
.page-admin .tb-right { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.page-admin .tb-right::-webkit-scrollbar { display: none; }
.page-admin .tb-right .nav-link { padding: 9px 10px; white-space: nowrap; }

/* SAFIRE Review: opinião antes do download */
.fbk { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 196, 70, .06); border: 1px solid rgba(255, 196, 70, .25); }
.fbk-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fbk .mono { font-size: 10.5px; letter-spacing: .18em; color: #ffd27a; }
.fbk-lock { font-size: 12px; color: rgba(238, 241, 247, .7); }
.fbk textarea { width: 100%; resize: vertical; border-radius: 10px; padding: 10px 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line-2, #2a3142); color: var(--text, #eef1f7); font: 14px var(--sans); }
.fbk .stars { font-size: 20px; color: #ffc446; letter-spacing: 2px; } .fbk .stars i { color: rgba(255, 255, 255, .15); font-style: normal; }
.fbk p { margin: 0; color: rgba(238, 241, 247, .85); font-style: italic; }
.fbk-dl { display: flex; gap: 10px; flex-wrap: wrap; }
.fbk.is-done { background: rgba(31, 191, 117, .07); border-color: rgba(31, 191, 117, .35); }
.fbk-hint { margin: 2px 0 0; font-size: 12px; color: rgba(238, 241, 247, .6); }

/* Feedbacks do cliente */
button.action { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.fbx { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 16px; background: rgba(255, 196, 70, .05); border: 1px solid rgba(255, 196, 70, .25); }
.fbx-inline { margin-top: 18px; max-width: 760px; }
.fbx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fbx-head .mono { font-size: 10.5px; letter-spacing: .18em; color: #ffd27a; } .fbx-head h3 { margin: 6px 0 0; font-size: 19px; }
.fbx-l { font-size: 13px; color: rgba(238, 241, 247, .75); }
.fbx-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.fbx select, .fbx textarea { border-radius: 10px; padding: 10px 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line-2, #2a3142); color: var(--text, #eef1f7); font: 14px var(--sans); }
.fbx textarea { width: 100%; resize: vertical; } .fbx select { min-width: 240px; }
.fbx .vbtn { align-self: flex-start; }
.fbx-dlg { padding: 0; border: 0; background: transparent; width: min(560px, 94vw); }
.fbx-dlg::backdrop { background: rgba(5, 6, 10, .8); backdrop-filter: blur(6px); }
.fbx-dlg .fbx { background: #0f131c; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }

/* fases: 5 etapas */
.vb-seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vrow .field:nth-of-type(6) { grid-column: 2 / -1; }
.vrow-n { grid-row: 1 / span 4; }
.vrow .field:nth-of-type(7) { grid-column: 2 / -1; }
.vrow-n { grid-row: 1 / span 5; }

/* cronograma com as 5 fases dos vídeos */
.timeline.tl-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) { .timeline.tl-5 { grid-template-columns: 1fr; } }

/* ── barra de entregas por fases ── */
.pbar { display: flex; gap: 3px; height: 6px; margin-top: 16px; border-radius: 4px; overflow: hidden; }
.pbar i { display: block; min-width: 6px; border-radius: 3px; }
.pbar-big { height: 12px; gap: 4px; margin-top: 18px; }
.pbar-thin { height: 4px; margin-top: 0; flex: 1; }
.pbar-empty { background: rgba(255, 255, 255, .06); }
.pb-ok { background: linear-gradient(90deg, #2fd98a, #7dffc0 50%, #2fd98a); background-size: 200% 100%; box-shadow: 0 0 8px rgba(61, 220, 151, .55); animation: flowG 4s linear infinite; }
.pb-rv { background: linear-gradient(90deg, #ff8a2b, #ffc27a 50%, #ff8a2b); background-size: 200% 100%; box-shadow: 0 0 8px rgba(255, 140, 40, .6); animation: flowG 2.4s linear infinite; }
.pb-ed { background: #6b92ff; }
.pb-fi { background: #3b6cf4; }
.pb-pp { background: rgba(160, 175, 210, .45); }
.pb-na { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 6px, rgba(255, 255, 255, .03) 6px 12px); }
.pb-leg { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 13px; color: var(--mute); }
.pb-leg span { display: inline-flex; align-items: center; gap: 7px; }
.pb-leg b { width: 10px; height: 10px; border-radius: 3px; flex: none; animation: none; box-shadow: none; }
.pb-leg strong { color: #fff; font-weight: 700; }
.sit { padding: 28px 30px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(59, 108, 244, .08), rgba(255, 255, 255, .015)); }
.sit-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.sit-head h2 { margin: 6px 0 0; }
.sit-head .sub { margin: 8px 0 0; }
.sit-ct { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.sit-ct .mono { font-size: 10px; color: var(--mute); letter-spacing: .18em; }
.vphase { margin: -6px 0 22px; }
@media (max-width: 640px) { .sit { padding: 22px 18px; } .sit-head { flex-direction: column; align-items: flex-start; } }

/* ── barras: luz elétrica (corrente leve) ── */
.pbar { overflow: visible; }
.pbar i { position: relative; overflow: hidden; }
.pbar i::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); mix-blend-mode: overlay; animation: pbZap 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.pbar i:nth-child(2)::after { animation-delay: .35s; } .pbar i:nth-child(3)::after { animation-delay: .7s; } .pbar i:nth-child(4)::after { animation-delay: 1.05s; } .pbar i:nth-child(5)::after { animation-delay: 1.4s; }
.pbar i.pb-na::after { display: none; }
@keyframes pbZap { 0% { left: -40%; } 70%, 100% { left: 110%; } }
@keyframes pbHum { 0%, 100% { opacity: 1; } 47% { opacity: .82; } 50% { opacity: 1; } 53% { opacity: .9; } }
.pb-ok { box-shadow: 0 0 6px rgba(61, 220, 151, .8), 0 0 16px rgba(61, 220, 151, .35); }
.pb-rv { box-shadow: 0 0 7px rgba(255, 140, 40, .9), 0 0 18px rgba(255, 120, 30, .45); animation: flowG 2.4s linear infinite, pbHum 2.2s steps(1) infinite; }
.pb-ed { background: linear-gradient(90deg, #4f7bff, #b7caff 50%, #4f7bff); background-size: 200% 100%; box-shadow: 0 0 6px rgba(107, 146, 255, .85), 0 0 16px rgba(107, 146, 255, .4); animation: flowG 3s linear infinite; }
.pb-fi { background: linear-gradient(90deg, #2c5ae6, #7fa2ff 50%, #2c5ae6); background-size: 200% 100%; box-shadow: 0 0 6px rgba(59, 108, 244, .85), 0 0 16px rgba(59, 108, 244, .4); animation: flowG 3.4s linear infinite; }
.pb-pp { background: linear-gradient(90deg, #8d9cc4, #d9e2ff 50%, #8d9cc4); background-size: 200% 100%; box-shadow: 0 0 5px rgba(170, 185, 230, .55), 0 0 12px rgba(170, 185, 230, .2); animation: flowG 4.2s linear infinite; }
.pb-na { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.pb-leg b.pb-ok { box-shadow: 0 0 6px rgba(61, 220, 151, .8); } .pb-leg b.pb-rv { box-shadow: 0 0 6px rgba(255, 140, 40, .9); }
.pb-leg b.pb-ed { box-shadow: 0 0 6px rgba(107, 146, 255, .85); } .pb-leg b.pb-fi { box-shadow: 0 0 6px rgba(59, 108, 244, .85); } .pb-leg b.pb-pp { box-shadow: 0 0 5px rgba(170, 185, 230, .6); }
.pb-leg b::after { display: none; }
@media (prefers-reduced-motion: reduce) { .pbar i, .pbar i::after { animation: none !important; } }

/* vbar-fit: a barra de fases encolhe com o cartão; em cartões muito estreitos os nomes das fases escondem-se (a linha de estado já diz a fase) */
.vcard { min-width: 0; container-type: inline-size; }
.vgrid > * { min-width: 0; }
.vbar { display: flex; gap: 5px; }
.vb-seg { flex: 1 1 auto; min-width: 0; }
.vb-seg span { overflow: visible; text-overflow: clip; font-size: 9.5px; }
@container (max-width: 238px) { .vb-seg { flex: 1 1 0; } .vb-seg span { display: none; } .vbar { gap: 4px; } }

/* mobile-fit: tabelas largas deslizam dentro da caixa; textos longos partem */
@media (max-width: 760px) {
  main.dash table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main.dash .panel, main.dash .pf-box, main.dash .side, main.dash form.panel { min-width: 0; max-width: 100%; }
  main.dash code, main.dash .mono-url { word-break: break-all; white-space: normal; }
  main.dash .btn { white-space: normal; max-width: 100%; }
  main.dash .head-actions, main.dash .row-actions, main.dash > nav, main.dash .panel-head, main.dash .panel-head > div { flex-wrap: wrap; }
  main.dash .panel-head > div { min-width: 0; }
}

/* ═════════════════════ MENU LATERAL (administração) ═════════════════════ */
:root { --sn-w: 236px; --sn-top: 59px; }
body:has(.sidenav) { padding-left: var(--sn-w); }
body:has(.sidenav) .admin { padding-top: 92px; }
.sidenav { position: fixed; z-index: 55; top: var(--sn-top); left: 0; bottom: 0; width: var(--sn-w); padding: 22px 14px 40px; overflow-y: auto; scrollbar-width: thin; border-right: 1px solid var(--line); background: rgba(8, 11, 17, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sn-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }
.sn-title { padding: 0 12px 8px; font: 400 9.5px var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.sn-link { position: relative; padding: 8px 12px; border-radius: 10px; color: rgba(238, 241, 247, .78); font: 600 13.5px var(--sans); text-decoration: none; transition: background .2s, color .2s; }
.sn-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.sn-link.is-on { color: #fff; background: rgba(59, 108, 244, .16); box-shadow: inset 0 0 0 1px rgba(59, 108, 244, .35); }
.sn-link.is-on::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue); box-shadow: 0 0 12px var(--blue-glow); }
.sn-toggle { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: none; cursor: pointer; }
.sn-toggle span { display: block; height: 1.5px; background: var(--text); border-radius: 2px; }
.sn-scrim { display: none; }
body:has(.sidenav) .fin-sub, body:has(.sidenav) .fin-frame, body:has(.sidenav) .jor-frame { left: var(--sn-w) !important; width: calc(100% - var(--sn-w)) !important; }
.crm-syncbar { display: flex; justify-content: flex-end; margin: -8px 0 14px; }
@media (max-width: 1000px) {
  body:has(.sidenav) { padding-left: 0; }
  body:has(.sidenav) .fin-sub, body:has(.sidenav) .fin-frame, body:has(.sidenav) .jor-frame { left: 0 !important; width: 100% !important; }
  .sn-toggle { display: inline-flex; }
  .sidenav { transform: translateX(-100%); transition: transform .3s var(--ease); }
  body.sn-open .sidenav { transform: none; }
  body.sn-open .sn-scrim { display: block; position: fixed; inset: 0; z-index: 54; background: rgba(0, 0, 0, .5); }
  .page-admin .tb-backstage { display: none !important; }
}

/* pipeline de vendas */
.sales-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sales-sum-col { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); text-decoration: none; transition: border-color .25s; }
.sales-sum-col:hover { border-color: rgba(107, 146, 255, .45); }
.sales-sum-col span:nth-child(2) { font-weight: 700; font-size: 13px; }
.sales-sum-col strong { grid-column: 1 / -1; font-size: 26px; line-height: 1.1; }
.sales-sum-col em { grid-column: 1 / -1; font-style: normal; color: var(--mute); font-size: 12.5px; }
.scard { padding: 0; }
.scard-link { display: grid; gap: 4px; padding: 12px 13px 8px; text-decoration: none; }
.scard-act { margin: 0; padding: 0 13px 12px; }
.scard-act .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) { .sales-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ficha do projeto: equipa, contas e histórico */
.money-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.money-sum > div { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.money-sum strong { display: block; font-size: 18px; margin-top: 2px; }
.money-sum .pos strong { color: var(--ok); } .money-sum .neg strong { color: var(--red); }
.cost-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 8px; align-items: center; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.cost-row strong { font-size: 13.5px; } .cost-row em { display: block; font-style: normal; font-size: 12px; color: var(--mute); }
.cost-row form { margin: 0; } .cost-row .paytag { border: 0; cursor: pointer; font: inherit; font-size: 11.5px; }
.cost-x { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--mute); cursor: pointer; font-size: 16px; line-height: 1; }
.cost-x:hover { color: var(--red); border-color: var(--red); }
.cost-add { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 4px; }
.cost-add select, .cost-add input { min-width: 0; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text); font: 500 13px var(--sans); }
.cost-add .btn { grid-column: 1 / -1; justify-content: center; }
.cost-add .cost-wide { grid-column: 1 / -1; }
.hist { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--line); display: grid; gap: 10px; max-height: 360px; overflow-y: auto; }
.hist li { position: relative; }
.hist li::before { content: ''; position: absolute; left: -18px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue-glow); }
.hist p { margin: 2px 0 0; font-size: 13px; }

/* menu lateral: título do grupo abre a página da área */
a.sn-title.sn-hub { text-decoration: none; display: flex; align-items: center; justify-content: space-between; padding-right: 12px; border-radius: 8px; transition: color .2s; }
a.sn-title.sn-hub i { font-style: normal; opacity: 0; transition: opacity .2s, transform .2s; }
a.sn-title.sn-hub:hover { color: #fff; } a.sn-title.sn-hub:hover i { opacity: 1; transform: translateX(2px); }
a.sn-title.sn-hub.is-on { color: var(--blue-2); } a.sn-title.sn-hub.is-on i { opacity: 1; }

/* ═════════ PÁGINAS DE ÁREA (organização por cartões) ═════════ */
.hub { max-width: 1400px; }
.hub-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; min-height: 340px; padding: 48px 40px 36px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); isolation: isolate; }
.hub-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 7, 11, .96) 0%, rgba(5, 7, 11, .7) 45%, rgba(5, 7, 11, .35) 100%), url('/img/hero-2.jpg') center 40% / cover; filter: grayscale(1) contrast(1.1); }
.hub-head { min-width: 0; }
.hub-head h1 { margin: 10px 0 8px; font: 400 clamp(38px, 5.2vw, 84px)/.95 var(--display); overflow-wrap: anywhere; letter-spacing: -.01em; text-transform: uppercase; color: #fff; text-shadow: 0 10px 50px rgba(0, 0, 0, .6); }
.hub-head p { margin: 0; color: rgba(238, 241, 247, .7); }
.hub-head p::before { content: ''; display: inline-block; width: 34px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--blue); }
.hub-stats { display: grid; grid-template-columns: repeat(2, 160px); gap: 1px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(107, 146, 255, .35); background: rgba(107, 146, 255, .2); box-shadow: 0 0 60px -20px var(--blue-glow); backdrop-filter: blur(10px); }
.hub-stats > div { padding: 14px 16px; background: rgba(8, 11, 17, .82); }
.hub-stats strong { display: block; margin-top: 4px; font-size: 22px; color: #fff; }
.hub-cards { display: flex; gap: 12px; margin-top: 22px; min-height: 260px; }
.hub-card { position: relative; flex: 0 0 96px; display: flex; min-width: 0; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); text-decoration: none; overflow: hidden; transition: flex .45s var(--ease), border-color .3s, box-shadow .3s; }
.hub-card.is-open, .hub-cards:hover .hub-card:hover { flex: 1 1 auto; border-color: rgba(107, 146, 255, .55); box-shadow: 0 0 0 1px rgba(107, 146, 255, .2), 0 20px 60px -30px var(--blue-glow); }
.hub-cards:hover .hub-card.is-open:not(:hover) { flex: 0 0 96px; border-color: var(--line); box-shadow: none; }
.hub-num { position: absolute; top: 16px; left: 18px; color: var(--blue-2); }
.hub-vert { position: absolute; left: 50%; bottom: 22px; transform-origin: left bottom; transform: translateX(10px) rotate(-90deg); white-space: nowrap; font: 700 14px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(238, 241, 247, .8); transition: opacity .25s; }
.hub-body { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 260px; opacity: 0; transition: opacity .3s .1s; }
.hub-body strong { font: 400 22px/1.15 var(--display); text-transform: uppercase; color: #fff; }
.hub-body em { font-style: normal; color: var(--mute); max-width: 42ch; }
.hub-body b { font-size: 34px; line-height: 1; color: #fff; }
.hub-go { color: var(--blue-2); }
.hub-card.is-open .hub-body, .hub-cards:hover .hub-card:hover .hub-body { opacity: 1; }
.hub-card.is-open .hub-vert, .hub-cards:hover .hub-card:hover .hub-vert { opacity: 0; }
.hub-cards:hover .hub-card.is-open:not(:hover) .hub-body { opacity: 0; transition-delay: 0s; }
.hub-cards:hover .hub-card.is-open:not(:hover) .hub-vert { opacity: 1; }
@media (max-width: 1200px) {
  .hub-hero { grid-template-columns: 1fr; }
  .hub-stats { justify-self: start; }
}
@media (max-width: 900px) {
  .hub-hero { grid-template-columns: 1fr; padding: 32px 22px 24px; min-height: 0; }
  .hub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; }
  .hub-cards { flex-direction: column; min-height: 0; }
  .hub-card, .hub-cards:hover .hub-card.is-open:not(:hover) { flex: none; }
  .hub-vert { display: none; }
  .hub-body, .hub-cards:hover .hub-card.is-open:not(:hover) .hub-body { opacity: 1; min-width: 0; padding-top: 18px; }
}

/* área de cliente: botões por pasta + próximo passo */
.folders { display: grid; grid-template-columns: minmax(260px, 1fr) 2.4fr; gap: 14px; margin: 0 0 40px; }
.next-step { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px; border: 1px solid rgba(107, 146, 255, .45); background: linear-gradient(160deg, rgba(59, 108, 244, .22), rgba(13, 17, 25, .9)); box-shadow: 0 20px 60px -30px var(--blue-glow); }
.next-step strong { font-size: 21px; line-height: 1.2; color: #fff; }
.next-step p { margin: 0 0 8px; color: rgba(238, 241, 247, .75); }
.next-step .btn { align-self: flex-start; margin-top: auto; }
.next-step.is-ok { border-color: rgba(61, 220, 151, .35); background: linear-gradient(160deg, rgba(61, 220, 151, .12), rgba(13, 17, 25, .9)); box-shadow: none; }
.folder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.folder-btn { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 14px; align-items: center; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; transition: border-color .25s, transform .25s var(--ease), background .25s; }
.folder-btn:hover { border-color: rgba(107, 146, 255, .5); transform: translateY(-2px); }
.folder-btn.is-on { border-color: var(--blue); background: rgba(59, 108, 244, .14); }
.folder-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(59, 108, 244, .14); color: var(--blue-2); }
.folder-ic svg { width: 22px; height: 22px; }
.folder-btn strong { font-size: 16px; color: #fff; }
.folder-btn em { font-style: normal; font-size: 13px; color: var(--mute); }
.folder-btn em.ft-warn { color: #f0cf7c; } .folder-btn em.ft-bad { color: #ff9c9c; } .folder-btn em.ft-ok { color: #8fe8c1; }
@media (max-width: 900px) { .folders { grid-template-columns: 1fr; } .folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .folder-btn { grid-template-columns: 1fr; } .folder-ic { grid-row: auto; } }

/* sino de notificações (administração) */
.nbell { position: relative; }
.nbell summary { list-style: none; position: relative; } .nbell summary::-webkit-details-marker { display: none; }
.nbell summary b { position: absolute; top: 3px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font: 800 10px/17px var(--sans); text-align: center; box-shadow: 0 0 10px rgba(255, 59, 59, .6); }
.nbell-pop { position: fixed; right: 16px; top: 62px; z-index: 80; width: min(360px, 90vw); max-height: 70vh; overflow-y: auto; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10, 13, 20, .97); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
.nbell-head { display: flex; justify-content: space-between; padding: 2px 4px 10px; }
.nbell-head a { color: var(--blue-2); text-decoration: none; }
.nbell-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: 9px; text-decoration: none; font-size: 13px; line-height: 1.4; }
.nbell-row:hover { background: rgba(255, 255, 255, .05); }
.nbell-row i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--blue); }
.nbell-row.lv-urgente i { background: var(--red); box-shadow: 0 0 8px var(--red); } .nbell-row.lv-importante i { background: #e3b341; }

/* lead: temperatura e próxima ação */
.ttag { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.ttag.t-bad { background: rgba(255, 90, 60, .16); color: #ffab91; } .ttag.t-mid { background: rgba(227, 179, 65, .14); color: #f0cf7c; } .ttag.t-cold { background: rgba(47, 180, 240, .14); color: #8fd8ff; }
.next-act { font-size: 12.5px; color: var(--blue-2); } .next-act.late { color: #ff9c9c; }

/* quadro de edição */
.ecard { display: grid; gap: 8px; padding: 12px 13px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.ecard.is-late { border-color: rgba(255, 59, 59, .55); box-shadow: inset 3px 0 0 var(--red); }
.ecard-main { text-decoration: none; display: grid; gap: 2px; } .ecard-main strong { font-size: 14px; } .ecard-main em { font-style: normal; font-size: 12.5px; color: var(--mute); }
.ecard-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--blue-2); } .ecard-meta .late { color: #ff9c9c; font-weight: 700; }
.ecard form { margin: 0; } .ecard .btn { width: 100%; justify-content: center; }
.ecard-ed select { width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text); font: 500 12.5px var(--sans); }

.cost-wa { padding: 3px 8px; border-radius: 999px; background: rgba(37, 211, 102, .14); color: #7ff0a8; font-size: 11.5px; font-weight: 700; text-decoration: none; }

/* ── Análise: projetos por ano, objetivo anual, estatísticas ── */
.an .chips { margin-bottom: 18px; }
.an .panel { margin-top: 18px; }
.an-kpis { grid-template-columns: repeat(4, 1fr); }
.an-quarters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.an-quarters .an-q { margin-top: 0; padding: 22px; }
.an-qtot strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.an-qtot em { font-style: normal; color: var(--mute); font-size: 12.5px; }
.an-bar { height: 6px; border-radius: 6px; background: var(--panel-2); margin: 12px 0 14px; overflow: hidden; }
.an-bar i { display: block; height: 100%; background: var(--blue); border-radius: 6px; }
.an-list { display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.an-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 9px; background: var(--panel-2); text-decoration: none; border: 1px solid transparent; }
.an-row:hover { border-color: rgba(107, 146, 255, .45); }
.an-row span { min-width: 0; } .an-row strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-row em { font-style: normal; color: var(--mute); font-size: 11.5px; } .an-row b { font-size: 13px; white-space: nowrap; }
.an-table { display: grid; gap: 4px; }
.an-table > div { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 90px 120px; gap: 10px; padding: 10px 12px; border-radius: 9px; background: var(--panel-2); overflow: hidden; font-size: 14px; }
.an-table > div > i { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--w); background: var(--blue); }
.an-table b { text-align: right; }
.an-orig > div { grid-template-columns: minmax(0, 1fr) 80px 70px 60px; }
.an-table .an-th { background: none; color: var(--mute); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding-bottom: 2px; }
.an-target { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; padding: 20px 22px; }
.an-target .field { margin: 0; flex: 1 1 260px; }
.an-prog { position: relative; height: 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.an-prog i { display: block; height: 100%; max-width: 100%; background: linear-gradient(90deg, var(--blue), var(--ok)); }
.an-prog span { position: absolute; right: 10px; top: -1px; font-size: 11px; font-weight: 700; }
.an-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; }
.an-m { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.an-m span { color: var(--mute); } .an-m b { font-size: 12px; }
.an-mbar { position: relative; width: 100%; height: 160px; border-radius: 8px; background: var(--panel-2); display: flex; align-items: flex-end; overflow: hidden; }
.an-mbar i { display: block; width: 100%; background: var(--blue); border-radius: 8px 8px 0 0; }
.an-m.ok .an-mbar i { background: var(--ok); }
.an-mbar s { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed rgba(255, 255, 255, .55); }
.an-sim-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.an-sim-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 16px; }
.an-sim-out > div { padding: 16px 18px; border-radius: 12px; background: rgba(59, 108, 244, .08); border: 1px solid rgba(59, 108, 244, .25); }
.an-sim-out span { color: var(--mute); font-size: 12px; } .an-sim-out strong { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.an-sim-out em { font-style: normal; font-size: 12.5px; color: var(--blue-2); }
.an-checks { display: grid; gap: 6px; }
.an-check { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: var(--panel-2); text-decoration: none; font-size: 13.5px; }
.an-check i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.an-check.warn i { background: #e3b341; } .an-check.warn { color: #f2d48a; }
.an-funnel { display: grid; gap: 6px; }
.an-funnel > div { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 30px 80px; gap: 10px; align-items: center; font-size: 13px; }
.an-funnel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); }
.an-funnel i { display: block; height: 10px; width: var(--w); min-width: 3px; border-radius: 5px; background: #9b6bff; }
.an-funnel b { text-align: right; } .an-funnel em { font-style: normal; color: var(--mute); font-size: 12px; text-align: right; }
.an-how { margin-top: 18px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); color: var(--mute); font-size: 13px; }
.an-how summary { cursor: pointer; color: var(--blue-2); font-weight: 600; }
.an-how ul { margin: 10px 0 0; padding-left: 18px; line-height: 1.6; }
@media (max-width: 1100px) { .an-quarters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-sim-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .an-kpis, .an-quarters, .an-sim-out { grid-template-columns: 1fr; }
  .an-months { gap: 3px; } .an-mbar { height: 110px; } .an-m b { font-size: 10px; }
  .an-funnel > div { grid-template-columns: minmax(0, 1fr) 60px 24px; } .an-funnel em { display: none; }
  .an-table > div { grid-template-columns: minmax(0, 1fr) 40px 90px; }
}
.an .dash-two .panel { margin-top: 0; }
@media (max-width: 640px) { .an-orig > div { grid-template-columns: minmax(0, 1fr) 54px 44px 44px; } }

/* ── Contrato em 3 passos (área de cliente) ── */
.csteps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cstep { display: flex; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.cstep strong { display: block; font-size: 15px; margin-bottom: 4px; }
.cstep p { margin: 0 0 8px; color: var(--mute); font-size: 13px; line-height: 1.5; }
.cstep-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: rgba(59, 108, 244, .16); color: var(--blue-2); }
.cstep.done .cstep-n { background: rgba(46, 204, 113, .18); color: var(--ok); }
.cstep.wait { border-color: rgba(227, 179, 65, .35); } .cstep.wait .cstep-n { background: rgba(227, 179, 65, .18); color: #e3b341; }
.csign { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.csign input[type=file] { max-width: 100%; font-size: 12.5px; color: var(--mute); }
@media (max-width: 900px) { .csteps { grid-template-columns: 1fr; } }
/* entrega com o link expirado: continua clicável para pedir um novo */
.reel-card.is-expired { cursor: pointer; }
.reel-card.is-expired .reel-foot .mono { color: #e3b341; }
/* lead perdida: botão no cartão do pipeline e aviso na ficha */
.scard-acts { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.scard-acts .scard-act { margin: 0; }
.scard-lost { position: relative; }
.scard-lost summary { list-style: none; cursor: pointer; } .scard-lost summary::-webkit-details-marker { display: none; }
.scard-lost form { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: 240px; display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.scard-lost select, .scard-lost input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; }
.lost-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; border-color: rgba(255, 59, 59, .3); }
.lost-banner span { display: block; color: #ff9c9c; } .lost-banner strong { display: block; font-size: 17px; margin: 2px 0; } .lost-banner em { font-style: normal; color: var(--mute); font-size: 13px; }
.scard:has(.scard-lost[open]) { position: relative; z-index: 40; }
.scard-lost form { background: #12151d; }
/* "Já paguei" com comprovativo opcional */
.paid-form { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.proof-btn { cursor: pointer; } .proof-btn.has { border-color: rgba(46, 204, 113, .5); color: var(--ok); }

/* ── Prospeção de empresas ── */
.pr .chips { margin-bottom: 14px; } .pr .chip b { opacity: .6; font-weight: 600; margin-left: 4px; }
.pr-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pr-filter input, .pr-filter select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; }
.pr-filter input { flex: 1 1 240px; }
.pr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.pr-list { display: grid; gap: 8px; }
.pr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 150px auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.pr-main strong { display: block; } .pr-main em { font-style: normal; color: var(--mute); font-size: 12.5px; }
.pr-main p { margin: 6px 0 0; color: var(--mute); font-size: 13px; }
.pr-sig { display: inline-block; margin-left: 8px; font-size: 12px; color: #f0cf7c; }
.pr-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; max-width: 260px; } .pr-links a { color: var(--blue-2); text-decoration: none; } .pr-links span { color: var(--mute); }
.pr-st select { width: 100%; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: 600 12.5px var(--sans); }
.pr-st select.t-ok { color: var(--ok); } .pr-st select.t-red { color: #ff9c9c; } .pr-st select.t-gold { color: #f0cf7c; } .pr-st select.t-blue { color: var(--blue-2); }
.pr-acts { display: flex; gap: 6px; align-items: center; } .pr-acts form { margin: 0; }
.pr-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--mute); cursor: pointer; font-size: 16px; }
.pr-add { position: sticky; top: 84px; }
@media (max-width: 1100px) { .pr-grid { grid-template-columns: 1fr; } .pr-add { position: static; order: -1; } }
@media (max-width: 700px) { .pr-row { grid-template-columns: 1fr; } .pr-links { max-width: none; } }
.pr-ai { margin-bottom: 16px; padding: 18px 22px; }
.pr-ai summary { cursor: pointer; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .pr-ai summary span { color: var(--mute); font-size: 13px; }
.pr-ai-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-top: 18px; }
.pr-crit { display: grid; gap: 6px; font-size: 13.5px; } .pr-crit label { display: flex; gap: 8px; align-items: center; }
.pr-hint { color: var(--mute); font-size: 12.5px; line-height: 1.5; margin: 10px 0 0; } .pr-hint a { color: var(--blue-2); }
.pr-ai textarea { width: 100%; }
@media (max-width: 900px) { .pr-ai-grid { grid-template-columns: 1fr; } }
.pr-crit label { justify-content: flex-start; text-align: left; color: var(--text); font-weight: 400; }
.field .pr-crit input[type=checkbox] { width: 16px; height: 16px; padding: 0; margin: 0; flex: none; border-radius: 4px; box-shadow: none; accent-color: var(--blue); }
/* títulos das áreas no telemóvel: cabem numa linha sem partir a palavra */
@media (max-width: 640px) { .hub-head h1 { font-size: clamp(24px, 8.4vw, 38px); overflow-wrap: normal; word-break: keep-all; } }

/* ── Registo de horas ── */
.tm-start { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 10px; }
.tm-start select, .tm-grid input, .tm-grid select { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13.5px; min-width: 0; }
.tm-big select[name=project_id] { flex: 1 1 260px; }
.tm-run { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; margin: 8px 0 10px; border-radius: 10px; background: rgba(255, 59, 59, .07); border: 1px solid rgba(255, 59, 59, .3); font-size: 13.5px; flex-wrap: wrap; }
.tm-run a { color: var(--text); }
.tm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; margin-right: 8px; animation: tmPulse 1.4s infinite; }
@keyframes tmPulse { 50% { opacity: .3; } }
.tm-manual { margin: 4px 0 12px; } .tm-manual summary { cursor: pointer; color: var(--blue-2); font-size: 13px; font-weight: 600; }
.tm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.tm-list { display: grid; gap: 6px; }
.tm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--panel-2); font-size: 13px; }
.tm-row strong { display: block; } .tm-row em { font-style: normal; color: var(--mute); font-size: 12px; }
.tm-proj > div { grid-template-columns: minmax(0, 1fr) 90px 110px; } .tm-proj a { color: var(--text); text-decoration: none; }
.an-funnel b { white-space: nowrap; }
@media (max-width: 640px) {
  .tm-proj > div { grid-template-columns: minmax(0, 1fr) auto; } .tm-proj > div b { grid-column: 2; }
  .tm-proj > div span:first-child { grid-column: 1 / -1; }
  .an .panel-head { flex-wrap: wrap; } .an .panel-head > .mono { font-size: 9px; }
}

/* ── Backstage no telemóvel: tabelas passam a cartões, um por linha ── */
@media (max-width: 700px) {
  main.dash .table-wrap, main.dash .pf-box:has(> table.pf-table) { overflow: visible; }
  main.dash table.crm-table, main.dash table.pf-table:not(#svcs) { display: block; min-width: 0 !important; width: 100%; }
  main.dash table.crm-table thead, main.dash table.pf-table:not(#svcs) thead { display: none; }
  main.dash table.crm-table tbody, main.dash table.pf-table:not(#svcs) tbody { display: grid; gap: 8px; }
  main.dash table.crm-table tr, main.dash table.pf-table:not(#svcs) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
  main.dash table.crm-table td, main.dash table.pf-table:not(#svcs) td { display: block; padding: 0 !important; border: 0 !important; background: none !important; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  main.dash table.crm-table td:first-child, main.dash table.pf-table:not(#svcs) td:first-child { flex-basis: 100%; font-size: 15px; }
  main.dash table.crm-table td:empty, main.dash table.pf-table:not(#svcs) td:empty { display: none; }
  .ac-prog { flex-wrap: wrap; } .ac-bar { flex: 1 1 100% !important; }
}

/* Agenda: vistas Hoje / Semana / Mês e follow-ups das vendas */
.ag-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.ag-tabs a { padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--mute); text-decoration: none; }
.ag-tabs a.on { background: rgba(59, 108, 244, .2); color: #fff; }
.legend .k-follow i { background: #ff5d6c; }
.wev.k-follow, .mev.k-follow { background: rgba(255, 93, 108, .1); border-left-color: #ff5d6c; }
.wev.k-follow.is-late .mono { color: #ff8a95; opacity: 1; }
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mhead { font-size: 10px; color: var(--mute); padding: 0 6px; }
.mday { min-height: 108px; padding: 6px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mday.is-out { opacity: .45; }
.mday.is-today { border-color: rgba(59, 108, 244, .55); }
.mday header a { font-weight: 800; font-size: 14px; color: var(--text); text-decoration: none; }
.mday.is-today header a { color: var(--blue-2); }
.mev { display: block; font-size: 11.5px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; text-decoration: none; color: var(--text); background: rgba(59, 108, 244, .12); border-left: 3px solid var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mev.k-shoot { background: rgba(227, 179, 65, .12); border-left-color: #e3b341; } .mev.k-edit { background: rgba(155, 107, 255, .13); border-left-color: #9b6bff; } .mev.k-deliver { border-left-color: var(--ok); } .mev.k-personal { border-left-color: #6b7280; }
.mmore { font-size: 11px; color: var(--mute); text-decoration: none; padding-left: 4px; }
.ag-list { display: grid; gap: 10px; }
.ag-day { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.ag-day.is-today { border-color: rgba(59, 108, 244, .55); }
.ag-day header { display: flex; align-items: baseline; gap: 8px; }
.ag-day header b { font-size: 24px; font-weight: 800; } .ag-day header em { font-style: normal; font-size: 12px; color: var(--blue-2); }
.ag-day header a { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: var(--mute); border: 1px solid var(--line-2); }
.ag-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
@media (max-width: 700px) {
  .mgrid { gap: 3px; } .mday { min-height: 64px; padding: 4px; } .mhead { padding: 0 2px; font-size: 9px; }
  .mev { font-size: 0; padding: 0; height: 6px; border-left-width: 0; border-radius: 3px; background: var(--blue); } .mev.k-follow { background: #ff5d6c; } .mev.k-shoot { background: #e3b341; } .mev.k-edit { background: #9b6bff; } .mev.k-deliver { background: var(--ok); }
  .ag-day { grid-template-columns: 1fr; gap: 8px; }
}
.scard-won form { left: 0; right: auto; }
/* Área de cliente: fases do pagamento (I adjudicação · II final) */
.pay-phases { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 8px; }
.pay-phases li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(8, 12, 24, .45); border: 1px solid var(--line); }
.pay-phases .pp-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; border: 1px solid rgba(107, 146, 255, .5); color: var(--blue-2); }
.pay-phases strong { display: block; font-size: 14.5px; } .pay-phases em { font-style: normal; font-size: 12.5px; color: var(--mute); }
.pay-phases b { font-size: 16px; white-space: nowrap; } .pay-phases b small { font-size: 11px; color: var(--mute); font-weight: 500; }
.pay-phases .pp-st { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; background: rgba(255, 179, 64, .14); color: #ffc46b; white-space: nowrap; }
.pay-phases .is-pago .pp-st { background: rgba(34, 230, 168, .14); color: #6ff0c4; } .pay-phases .is-pago .pp-n { border-color: var(--ok); color: var(--ok); }
.pay-phases .is-parcial .pp-st { background: rgba(59, 108, 244, .18); color: #9bbbff; }
@media (max-width: 640px) { .pay-phases li { grid-template-columns: 30px minmax(0, 1fr) auto; } .pay-phases .pp-st { grid-column: 2 / -1; justify-self: start; } }
/* Ficha do projeto: separadores (saltam para cada parte e marcam onde estás) */
.proj-tabs { position: sticky; top: 76px; z-index: 20; display: flex; flex-wrap: nowrap !important; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 0 16px; padding: 5px; border-radius: 12px; background: rgba(12, 15, 22, .92); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.proj-tabs::-webkit-scrollbar { display: none; }
.proj-tabs a { flex: none; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--mute); text-decoration: none; white-space: nowrap; }
.proj-tabs a:hover { color: #fff; } .proj-tabs a.on { background: rgba(59, 108, 244, .2); color: #fff; }
#resumo, #pagamento, #custos, #horas, #historico, #agenda-proj, #documentos { scroll-margin-top: 140px; }
@media (max-width: 760px) { .proj-tabs { top: 64px; margin-left: -4px; margin-right: -4px; } }

/* Financeiro do cliente: entrou / saiu / fica e detalhe por projeto */
.fin .fin-big { grid-template-columns: repeat(3, 1fr); }
.finrow.note span, .finrow.note b { color: #FFD27F; }
.finrow.neg b { color: #FF8F8F; }
.fin-proj { border-bottom: 1px solid var(--line); }
.fin-proj summary { list-style: none; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 10px 0; cursor: pointer; font-size: 13.5px; }
.fin-proj summary::-webkit-details-marker { display: none; }
.fin-proj summary a { color: var(--text); text-decoration: none; font-weight: 700; }
.fin-proj summary em { display: block; font-style: normal; font-size: 12px; color: var(--mute); }
.fin-proj summary b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-proj summary .pos { color: var(--ok); } .fin-proj summary .neg { color: #FFB48A; }
.fin-proj[open] { padding-bottom: 8px; }
.fin-proj .finrow { padding: 6px 0 6px 12px; font-size: 13px; }
.fin .fin-big strong { font-size: 18px; }
.finrow b { white-space: nowrap; }

/* ── Menu lateral em tópicos que abrem e fecham (23/10) ── */
.sidenav details.sn-group { display: block; margin-bottom: 4px; }
.sidenav details.sn-group > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  font: 400 10px var(--display); letter-spacing: .22em; text-transform: uppercase; color: rgba(238, 241, 247, .62); transition: background .2s, color .2s; }
.sidenav details.sn-group > summary::-webkit-details-marker { display: none; }
.sidenav details.sn-group > summary:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.sidenav details.sn-group > summary span { flex: 1; }
.sidenav details.sn-group > summary em { font: 600 10px var(--sans); font-style: normal; letter-spacing: 0; color: var(--mute); background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 2px 7px; }
.sidenav .sn-chev { width: 11px; height: 11px; flex: none; transition: transform .25s var(--ease); }
.sidenav details.sn-group[open] > summary { color: #fff; }
.sidenav details.sn-group[open] > summary .sn-chev { transform: rotate(90deg); color: var(--blue-2); }
.sidenav details.sn-group:has(.sn-link.is-on) > summary span::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue-glow); vertical-align: 1px; }
.sidenav .sn-items { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 10px 10px; margin-left: 12px; border-left: 1px solid var(--line); }
.sidenav details.sn-group[open] .sn-items { animation: snOpen .25s var(--ease); }
@keyframes snOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sidenav .sn-items .sn-link { padding: 7px 12px; font-size: 13px; }
.sidenav .sn-items .sn-link.is-on::before { left: -11px; }
.sidenav .sn-items .sn-hub { color: var(--mute); font-size: 12px; }
/* separadores das sub-páginas (Leads, Propostas) */
.sn-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 26px; padding: 5px; width: fit-content; max-width: 100%; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .02); }
.sn-subtabs a { padding: 8px 16px; border-radius: 999px; font: 600 12.5px var(--sans); color: rgba(238, 241, 247, .7); text-decoration: none; transition: background .2s, color .2s; }
.sn-subtabs a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.sn-subtabs a.is-on { color: #fff; background: rgba(59, 108, 244, .22); box-shadow: inset 0 0 0 1px rgba(59, 108, 244, .45); }
@media (max-width: 700px) { .sn-subtabs { border-radius: 14px; } .sn-subtabs a { padding: 7px 12px; } }

/* ── Pipeline: um cartão por cliente (23/10) ── */
.sales-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.sales-bar .crm-search { flex: 1; min-width: 260px; margin: 0; }
.sales-filter { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; }
.sales-filter a { padding: 7px 14px; border-radius: 999px; font: 600 12.5px var(--sans); color: rgba(238, 241, 247, .7); text-decoration: none; }
.sales-filter a:hover { color: #fff; } .sales-filter a.is-on { color: #fff; background: rgba(59, 108, 244, .22); box-shadow: inset 0 0 0 1px rgba(59, 108, 244, .45); }
.fu-txt { color: #ff9c9c; }
.sales-kanban { --kcols: 4; }
.ccard { display: flex; flex-direction: column; gap: 10px; position: relative; }
.ccard:has(details[open]) { z-index: 40; }
.ccard-head { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.ccard-head strong { font-size: 17px; line-height: 1.25; }
.ccard-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ccard-tags .mono { font-size: 10px; color: var(--mute); }
.ttag.t-lead { background: rgba(107, 146, 255, .16); color: #b7c8ff; } .ttag.t-client { background: rgba(46, 204, 113, .14); color: #8be3ae; }
.ttag.t-won { background: rgba(46, 204, 113, .18); color: #8be3ae; } .ttag.t-lost { background: rgba(255, 93, 108, .16); color: #ff9fa8; }
.ccard-sum { display: flex; align-items: baseline; gap: 10px; } .ccard-sum b { font-size: 18px; } .ccard-sum span { font-size: 12px; color: var(--mute); }
.fu-tag { align-self: flex-start; font: 700 11px var(--sans); color: #ffb4b4; background: rgba(255, 93, 108, .14); border: 1px solid rgba(255, 93, 108, .35); padding: 4px 9px; border-radius: 999px; }
.ccard.is-follow { box-shadow: inset 0 0 0 1px rgba(255, 93, 108, .35); }
.ccard .next-act { text-decoration: none; }
.ccard-props { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ccard-props li { display: flex; flex-direction: column; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ccard-props li > a { display: flex; justify-content: space-between; gap: 10px; color: rgba(238, 241, 247, .88); text-decoration: none; font-size: 13px; }
.ccard-props li > a:hover span { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ccard-props li > a b { white-space: nowrap; }
.ccard-props li.is-follow > a span::before { content: '●'; color: #ff5d6c; font-size: 9px; margin-right: 6px; vertical-align: 2px; }
.ccard-acts { display: flex; gap: 6px; }
.btn.btn-xs { padding: 4px 10px; font-size: 11.5px; min-height: 0; height: auto; border-radius: 8px; }
.ccard-acts .scard-lost form { left: 0; right: auto; }
.ccard-add { font-size: 12px; color: var(--mute); text-decoration: none; } .ccard-add:hover { color: var(--blue-2); }
.ccard-closed { gap: 6px; opacity: .92; } .ccard-closed strong { font-size: 15px; }
.ccard-closed.is-won { border-color: rgba(46, 204, 113, .3); } .ccard-closed.is-lost { border-color: rgba(255, 93, 108, .25); }
.ccard-why { font-size: 12px; color: var(--mute); }
.sales-sum-col.is-warn { border-color: rgba(255, 93, 108, .45); }

/* números do Painel clicáveis */
a.kpi-link { color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.kpi-link:hover { border-color: var(--blue); transform: translateY(-1px); }

/* lead: negociação e notas de contacto */
.hch.nt { background: rgba(227, 179, 65, .15); color: #f0cf7c; }
.note-form { display: grid; gap: 10px; margin-bottom: 14px; }
.note-form textarea { min-height: 110px; resize: vertical; }
.note-form button { justify-self: end; }
.note-types { display: flex; flex-wrap: wrap; gap: 6px; }
.note-types label { cursor: pointer; }
.note-types input { position: absolute; opacity: 0; pointer-events: none; }
.note-types span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.note-types input:checked + span { border-color: #e3b341; color: #f0cf7c; background: rgba(227, 179, 65, .12); }
.note-types input:focus-visible + span { outline: 2px solid var(--blue); }
.reply-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reply-btn { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: inherit; text-decoration: none; }
.reply-btn:hover { border-color: var(--blue); }
.reply-btn.r-wa { color: #7fe3a6; } .reply-btn.r-em { color: #a9c0ff; } .reply-btn.r-tel { color: #f0cf7c; }
.htext { white-space: pre-wrap; } .hreply { display: block; margin-top: 6px; } .hreply:empty { display: none; }
.nego-total { display: flex; align-items: baseline; gap: 12px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.nego-total strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.nego-total em { font-style: normal; color: var(--mute); font-size: 12.5px; }
.nego-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nego-row a { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 3px; }
.nego-row a em { font-style: normal; color: var(--mute); font-size: 12.5px; }
@media (max-width: 700px) { .nego-row { grid-template-columns: 1fr auto; } .nego-row form { grid-column: 1 / -1; } }

/* estado da lead: o escolhido fica com a cor da etiqueta */
.lead-switch button.is-on { box-shadow: inset 0 0 0 1px currentColor; }
.lead-switch .lsl-novo.is-on { background: rgba(227, 179, 65, .18); color: #f0cf7c; }
.lead-switch .lsl-reuniao-marcada.is-on { background: rgba(59, 108, 244, .2); color: #a9c0ff; }
.lead-switch .lsl-proposta-enviada.is-on { background: rgba(255, 138, 61, .18); color: #ffbb8c; }
.lead-switch .lsl-em-decisao.is-on { background: rgba(155, 107, 255, .2); color: #c7adff; }
.lead-switch .lsl-perdido.is-on { background: rgba(255, 59, 59, .16); color: #ff9c9c; }

/* propostas com várias opções */
.opt-grid { display: flex; flex-direction: column; gap: 8px; }
.opt-h { font-size: 13px; color: var(--mute); }
.opt-row { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.opt-vals { display: grid; grid-template-columns: 1fr 160px; gap: 10px; }
.opt-name.is-pack { display: none; } .opt-vals:has(.opt-name.is-pack) { grid-template-columns: 160px; }
.pack-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pack-chips .mono { font-size: 11px; margin-right: 4px; color: var(--mute); }
.pchip { display: inline-block; border: 1px solid var(--line-2, var(--line)); background: none; color: var(--mute); font: 600 13px var(--sans); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.pchip:hover { color: var(--text); border-color: var(--blue); }
.pchip.is-on, .acc-chips input:checked + .pchip { background: rgba(59, 108, 244, .2); color: #c9d7ff; border-color: var(--blue); }
.acc-chips input { position: absolute; opacity: 0; pointer-events: none; }
.acc-chips input:focus-visible + .pchip { outline: 2px solid var(--blue); }
.opt-acc { display: grid; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--mute); }
.nego-row a em.nego-opts { color: #f0cf7c; }
/* propostas: só a opção 1 à vista, + para mais */
.opt-row[hidden] { display: none; }
.opt-add { justify-self: start; margin: 8px 0 4px; background: none; border: 1px dashed var(--line-2, var(--line)); color: var(--mute); font: 600 12.5px var(--sans); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.opt-add:hover { color: var(--text); border-color: var(--blue); }
.opt-add[hidden] { display: none; }
/* lembretes de contacto */
.remind { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.remind > .mono { font-size: 11px; letter-spacing: .12em; color: var(--mute); }
.remind-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.remind-quick .pchip { padding: 5px 12px; font-size: 12.5px; }
.remind-in { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 8px; }
@media (max-width: 560px) { .remind-in { grid-template-columns: 1fr; } }
.rem-list { display: grid; gap: 6px; margin: 0 0 14px; }
.rem-list > .mono { font-size: 11px; letter-spacing: .12em; color: var(--mute); }
.rem-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 10px; }
.rem-row.is-due { border-left-color: #f5a524; background: rgba(245, 165, 36, .06); }
.rem-row b { font-size: 13px; white-space: nowrap; }
.rem-row form { margin: 0; }
.remind-in input { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .035); color: var(--text); font: 500 15px var(--sans); outline: none; }
.remind-in input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 108, 244, .14); }
/* ── calendário profissional: cores por tipo de bloco ── */
.k-meet { --k: #3b6cf4; } .k-shoot { --k: #e3b341; } .k-edit { --k: #9b6bff; } .k-deep { --k: #22c3a6; } .k-back { --k: #ff6fb5; } .k-pre { --k: #ff9f43; } .k-sales { --k: #38bdf8; } .k-deliver { --k: #3ddc97; } .k-personal { --k: #6b7280; } .k-follow { --k: #ff5d6c; }
.k-deep, .k-back, .k-pre, .k-sales { border-left-color: var(--k); }
.wev.k-deep, .wev.k-back, .wev.k-pre, .wev.k-sales, .mev.k-deep, .mev.k-back, .mev.k-pre, .mev.k-sales { border-left-color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); }
.legend .k-deep i, .legend .k-back i, .legend .k-pre i, .legend .k-sales i { background: var(--k); }
.tg-wrap { overflow-x: auto; margin: 0 -2px; }
.tg { min-width: 760px; display: grid; gap: 0; }
.tg-row { display: grid; grid-template-columns: 54px repeat(7, minmax(0, 1fr)); }
.tg-head { position: sticky; top: 0; z-index: 3; background: var(--bg, #0b0f1a); border-bottom: 1px solid var(--line); }
.tg-day { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 4px; text-decoration: none; color: var(--text); }
.tg-day .mono { font-size: 10px; color: var(--mute); } .tg-day b { font-size: 20px; font-weight: 800; }
.tg-day.is-today b { color: #fff; background: var(--blue); border-radius: 999px; min-width: 32px; text-align: center; padding: 0 6px; }
.tg-all { border-bottom: 1px solid var(--line); }
.tg-all > .mono { font-size: 9px; color: var(--mute); padding: 8px 6px; }
.tg-all > div { display: grid; gap: 3px; padding: 4px 3px; border-left: 1px solid var(--line); align-content: start; min-width: 0; }
.tg-chip { display: block; font-size: 11.5px; font-weight: 600; padding: 3px 7px; border-radius: 6px; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--k, #3b6cf4) 22%, transparent); border-left: 3px solid var(--k, #3b6cf4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-chip.is-late { color: #ffb3ba; }
.tg-body { position: relative; }
.tg-hours { position: relative; }
.tg-hours span { position: absolute; right: 8px; transform: translateY(-50%); font: 600 10.5px var(--mono, monospace); color: var(--mute); }
.tg-hours span:first-child { transform: none; }
.tg-col { position: relative; border-left: 1px solid var(--line); cursor: copy; background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--ph)); }
.tg-col.is-today { background-color: rgba(59, 108, 244, .05); }
.tg-col:hover { background-color: rgba(255, 255, 255, .02); }
.tg-ev { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 4px 7px; border-radius: 7px; text-decoration: none; color: #fff; cursor: pointer;
  background: color-mix(in srgb, var(--k, #3b6cf4) 30%, #101626); border-left: 3px solid var(--k, #3b6cf4); box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .6); }
.tg-ev:hover { z-index: 2; background: color-mix(in srgb, var(--k, #3b6cf4) 45%, #101626); }
.tg-ev strong { font-size: 12px; line-height: 1.25; } .tg-ev span { font-size: 10.5px; opacity: .8; white-space: nowrap; }
.tg-ev.is-cancel { opacity: .4; text-decoration: line-through; }
.tg-now { position: absolute; left: 0; right: 0; height: 2px; background: #ff5d6c; z-index: 2; pointer-events: none; }
.tg-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ff5d6c; }
.tg-compact .tg-ev span { display: none; } .tg-compact .tg-day b { font-size: 17px; }
.dash-cal .head-links { display: flex; gap: 16px; }
/* vista anual */
.yr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .yr { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .yr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .yr { grid-template-columns: 1fr; } }
.ym { padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.ym-h { display: block; margin-bottom: 8px; font-weight: 800; text-transform: capitalize; color: var(--text); text-decoration: none; }
.ym-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.ym-g .mono { font-size: 9px; color: var(--mute); padding-bottom: 2px; }
.yd { position: relative; display: block; padding: 4px 0 8px; border-radius: 6px; font-size: 12px; color: var(--mute); text-decoration: none; }
.yd.has { color: var(--text); font-weight: 700; } .yd:hover { background: rgba(107, 146, 255, .15); }
.yd.is-today { background: var(--blue); color: #fff; }
.yd i { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 2px; }
.yd i b { width: 4px; height: 4px; border-radius: 50%; background: var(--k, #3b6cf4); }
/* formulário do bloco */
.ev-rep, .ev-quick { display: grid; gap: 8px; }
.ev-rep label { cursor: pointer; }
.ev-rep input[type=radio], .ev-rep input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.ev-rep input:checked + .pchip { background: rgba(59, 108, 244, .2); color: #c9d7ff; border-color: var(--blue); }
.ev-rep input:focus-visible + .pchip { outline: 2px solid var(--blue); }
.rep-week, .rep-until { display: grid; gap: 8px; } .rep-week[hidden], .rep-until[hidden] { display: none; }
.rep-week select { max-width: 260px; }
.tg-more { font-size: 11px; color: var(--mute); text-decoration: none; padding: 0 7px; } .tg-more:hover { color: var(--text); }
/* arrastar na grelha */
.tg-ev { user-select: none; -webkit-user-select: none; }
.tg-ev .tg-rs { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.tg-ev:hover .tg-rs::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.tg-ev.is-drag { z-index: 5; opacity: .9; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .8); cursor: grabbing; }
.tg-ghost { position: absolute; left: 2px; right: 2px; z-index: 4; border-radius: 7px; background: rgba(59, 108, 244, .35); border: 1px dashed #8fb0ff; color: #fff; font: 700 11.5px var(--sans); padding: 4px 7px; pointer-events: none; }
.tg-col { cursor: crosshair; }
/* lembrete: hora e duração */
.remind-time { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.remind-time label { display: grid; gap: 4px; }
.remind-time input[type=time] { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .035); color: var(--text); font: 500 15px var(--sans); }
.remind-dur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.remind-dur .pchip { padding: 5px 12px; font-size: 12.5px; }
.remind-dur input { width: 76px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .035); color: var(--text); font: 500 14px var(--sans); }
.tg-chip[data-drag] { cursor: grab; user-select: none; -webkit-user-select: none; }
.tg-chip.is-drag { opacity: .45; }
.tg-float { position: fixed; z-index: 10000; pointer-events: none; max-width: 220px; padding: 5px 9px; border-radius: 7px; background: #1d2742; border: 1px solid #8fb0ff; color: #fff; font: 600 12px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 30px -8px rgba(0,0,0,.8); }
/* tipo do bloco: botões com a cor do calendário */
.kind-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kind-chips label { cursor: pointer; }
.kind-chips input { position: absolute; opacity: 0; pointer-events: none; }
.kind-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2, var(--line)); color: var(--mute); font: 600 13px var(--sans); }
.kind-chips span i { width: 10px; height: 10px; border-radius: 50%; background: var(--k, #3b6cf4); }
.kind-chips label:hover span { color: var(--text); border-color: var(--k, #3b6cf4); }
.kind-chips input:checked + span { color: #fff; border-color: var(--k, #3b6cf4); background: color-mix(in srgb, var(--k, #3b6cf4) 30%, transparent); }
.kind-chips input:focus-visible + span { outline: 2px solid var(--k, #3b6cf4); }
.kind-chips label.k-shoot, .kind-chips label.k-edit, .kind-chips label.k-deliver, .kind-chips label.k-personal, .kind-chips label.k-meet, .kind-chips label.k-follow { border-left: 0; }
/* checklist da gravação */
.prep-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; font-size: 13.5px; }
.prep-row input { margin-top: 2px; width: 17px; height: 17px; accent-color: #e3b341; flex: none; }
.prep-row input:checked + span { color: var(--mute); text-decoration: line-through; }
/* pergunta ao largar um bloco que se repete (Só este dia / Toda a série) */
.tg-ask { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; background: #11131a; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100vw - 32px); width: 340px; }
.tg-ask p { flex: 1 0 100%; margin: 0 0 6px; color: rgba(255,255,255,.75); font-size: 14px; }
.tg-ask p strong { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
.tg-ask .btn { flex: 1 1 auto; }
/* menu ao carregar num bloco do calendário */
.tg-ev.is-done, .tg-chip.is-done { opacity: .5; text-decoration: line-through; }
.tg-menu { position: fixed; z-index: 1000; width: 270px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; padding: 8px; background: #11131a; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.85); display: flex; flex-direction: column; gap: 2px; font: 500 13.5px var(--sans); }
.tg-menu .tm-h { padding: 6px 8px 8px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 4px; }
.tg-menu .tm-h strong { display: block; color: #fff; font-size: 14.5px; }
.tg-menu .tm-h span { color: rgba(255,255,255,.6); font-size: 12px; }
.tg-menu > button, .tg-menu > a, .tg-menu .tm-sub > button, .tg-menu .tm-sub > a { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: rgba(255,255,255,.88); font: inherit; text-decoration: none; cursor: pointer; }
.tg-menu > button:hover, .tg-menu > a:hover, .tg-menu .tm-sub > button:hover, .tg-menu .tm-sub > a:hover { background: rgba(255,255,255,.07); color: #fff; }
.tg-menu .tm-sub { margin: 0 0 4px 14px; padding-left: 8px; border-left: 2px solid rgba(255,255,255,.1); }
.tg-menu .tm-sub[hidden] { display: none; }
.tg-menu .tm-row { display: flex; gap: 6px; padding: 6px 2px; align-items: center; }
.tg-menu .tm-row .dt-wrap, .tg-menu .tm-row input { flex: 1; min-width: 0; }
.tg-menu .tm-row .btn { padding: 7px 12px; font-size: 12.5px; }
.tg-menu .tm-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
.tg-menu .tm-kinds button { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; display: grid; place-items: center; }
.tg-menu .tm-kinds button i { width: 14px; height: 14px; border-radius: 50%; background: var(--k, #3b6cf4); }
.tg-menu .tm-kinds button.on, .tg-menu .tm-kinds button:hover { border-color: var(--k, #3b6cf4); }
.tg-menu .tm-del { color: #ff7b86 !important; }

/* Revisão: aprovar com notas e ajustes usados (26/10/2026) */
.vnotes[open] summary { background: rgba(61, 220, 151, .1); }
.vnotes textarea { border-color: rgba(61, 220, 151, .4); }
.vrounds { margin: 2px 0 0; font-size: 12.5px; color: var(--mute); text-align: center; line-height: 1.45; }
.vrounds b { color: var(--text); }
.vrounds.is-over { color: #ffc28a; }
.rvw-act .vrounds { grid-column: 1 / -1; margin: 0; }
/* telemóveis estreitos: o botão Sair não pode ficar cortado (26/10/2026) */
@media (max-width: 420px) {
  body:not(.page-admin) .tb-x, body:not(.page-admin) .tb-client { display: none; }
  body:not(.page-admin) .nav-link { padding: 8px 9px; }
}
/* rádios escondidos dentro dos chips: não podem alargar a página no telemóvel (26/10/2026) */
.kind-chips input, .pack-chips input, .note-types input { width: 1px !important; height: 1px !important; }
@media (max-width: 640px) {
  .state-bar { flex-wrap: wrap; }
  .life-switch { flex-wrap: wrap; border-radius: 16px; max-width: 100%; }
}

/* ═════════════════════ ECRÃS GRANDES (04/11/2026) ═════════════════════
   Em monitores grandes as páginas ficavam numa coluna estreita ao centro.
   Agora a área de trabalho cresce com o ecrã (sem passar de um limite confortável). */
@media (min-width: 1800px) {
  .page-admin main.dash.admin { max-width: 1640px; }
  main.dash:not(.admin), .hero-inner { max-width: 1520px; }
}
@media (min-width: 2300px) {
  .page-admin main.dash.admin { max-width: 1980px; }
  main.dash:not(.admin), .hero-inner { max-width: 1720px; }
}
.foot .legal-links a { color: inherit; text-decoration: none; } .foot .legal-links a:hover { text-decoration: underline; }