/* ==========================================================================
   CALENDARQ · VISUAL DO APP (Design System 3.1, protótipo v2.1 aprovado)
   --------------------------------------------------------------------------
   Tokens, tipografia, componentes e movimento vêm do Design System 3.1 sem
   adaptação (mesmos nomes de classe: .btn, .badge, .glow-card, .now-banner,
   .stepper, .event-row, .lic-row, .seg, .field…). A parte 8 compõe as telas
   com essas peças; a parte 8B traz o que o app tem e o protótipo não
   mostrava (campos editáveis, arrastar, janelas, anexos, link do cliente).

   1 Tokens · 2 Base · 3 Movimento · 4 Tipografia · 5 Componentes
   6 Fundos vivos · 7 Véu, cursor, grade · 8 Composições do app
   8B Peças do app · 9 Telas menores · 10 Menos movimento
   ========================================================================== */


/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
  /* Escala de cinzas — branco + grafite, nunca #000 */
  --g-0: #FFFFFF;
  --g-25: #FCFCFC;
  --g-50: #F7F7F7;
  --g-100: #F0F0F0;
  --g-150: #E8E8E8;
  --g-200: #E0E0E0;
  --g-300: #CCCCCC;
  --g-400: #A3A3A3;
  --g-500: #808080;
  --g-600: #666666;
  --g-700: #4D4D4D;
  --g-800: #333333;
  --g-900: #1F1F1F;
  --g-950: #141414;

  --hair-ink: rgba(31, 31, 31, .08);
  --dash: rgba(31, 31, 31, .10);

  /* Feedback — dessaturado, só onde há significado */
  --success: #3F7A5C;
  --success-soft: #EEF4F0;
  --warning: #94681F;
  --warning-soft: #F7F1E6;
  --danger: #B04A3F;
  --danger-soft: #F8ECEA;
  --info: #4A6582;
  --info-soft: #EDF1F5;

  /* Pigmentos de projeto — só pontos de 6–8px */
  --p-salvia: #5F8A72;
  --p-ardosia: #6F8299;
  --p-ocre: #C08A45;
  --p-lavanda: #8E82B0;
  --p-argila: #94735F;
  --p-petroleo: #4E7F80;

  /* Vidro */
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-bg-strong: rgba(255, 255, 255, .82);
  --glass-border: rgba(255, 255, 255, .75);
  --glass-blur: 20px;
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 60px -24px rgba(31, 31, 31, .22), 0 2px 8px -2px rgba(31, 31, 31, .06);

  /* Raios */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Sombras */
  --sh-1: 0 1px 2px rgba(31, 31, 31, .05);
  --sh-2: 0 4px 14px -4px rgba(31, 31, 31, .10);
  --sh-3: 0 18px 40px -16px rgba(31, 31, 31, .18);
  --sh-4: 0 40px 90px -30px rgba(31, 31, 31, .28);

  /* Movimento */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out-circ: cubic-bezier(.85, 0, .15, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-xs: .15s;
  --dur-sm: .3s;
  --dur-md: .6s;
  --dur-lg: 1.2s;

  /* Famílias */
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: 'Instrument Serif', ui-serif, Georgia, serif;

  /* Moldura do app */
  --rail-w: 64px;
  --rail-gap: 16px;
  --topbar-h: 64px;
  --max: 1440px;
  --gutter: 48px;
}


/* =========================================================================
   2. BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -.006em;
  color: var(--g-900);
  background: var(--g-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--g-900); color: var(--g-0); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(31, 31, 31, .12); border-radius: 10px; }

/* Grão animado sobre a página inteira */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 7s steps(10) infinite;
}

/* Ícones (Solar Linear, embutidos na página) */
.ic { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.14em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }


/* =========================================================================
   3. MOVIMENTO
   ========================================================================= */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3%, -2%); }
  20% { transform: translate(2%, 3%); }
  30% { transform: translate(-2%, 1%); }
  40% { transform: translate(3%, -3%); }
  50% { transform: translate(-1%, 2%); }
  60% { transform: translate(2%, -1%); }
  70% { transform: translate(-3%, 3%); }
  80% { transform: translate(1%, -2%); }
  90% { transform: translate(-2%, -3%); }
}
@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(40px) scale(.98); filter: blur(10px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes animationIn {
  0% { opacity: 0; transform: translateY(20px); filter: blur(10px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(4%, -6%, 0) scale(1.08); }
  66% { transform: translate3d(-5%, 4%, 0) scale(.95); }
}
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(31, 31, 31, .35); } 100% { box-shadow: 0 0 0 10px rgba(31, 31, 31, 0); } }
@keyframes pulseRingLight { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
@keyframes pulseRingWarn { 0% { box-shadow: 0 0 0 0 rgba(148, 104, 31, .35); } 100% { box-shadow: 0 0 0 10px rgba(148, 104, 31, 0); } }
@keyframes hatch { to { background-position: 28px 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shine { 0% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes cue { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.85) translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes borderFlow { to { --angle: 360deg; } }
@keyframes veilIn { to { transform: translateY(0); } }
@keyframes veilBar { to { transform: scaleX(1); } }
@keyframes drawHalf { to { stroke-dashoffset: var(--to, 500); } }
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* Entradas (o JS acende .active quando o bloco aparece) */
.motion-enter { opacity: 0; }
.motion-enter.active { animation: slideUpFade 1.2s var(--ease) forwards; }
.animate-on-scroll { opacity: 0; }
.animate-on-scroll.active { animation: animationIn .8s var(--ease) forwards; }
.clip-enter { clip-path: inset(100% 0 0 0); transform: translateY(20px); transition: clip-path 1.2s var(--ease), transform 1.2s var(--ease); }
.clip-enter.active { clip-path: inset(0 0 0 0); transform: none; }
.delay-100 { animation-delay: .1s; transition-delay: .1s; }
.delay-200 { animation-delay: .2s; transition-delay: .2s; }
.delay-300 { animation-delay: .3s; transition-delay: .3s; }
.delay-500 { animation-delay: .5s; transition-delay: .5s; }
.delay-700 { animation-delay: .7s; transition-delay: .7s; }
.delay-900 { animation-delay: .9s; transition-delay: .9s; }

/* Título que sobe por trás de uma máscara */
.text-reveal-wrapper { overflow: hidden; display: inline-flex; vertical-align: bottom; padding-bottom: .06em; }
.text-reveal-content { display: block; transform: translateY(110%); opacity: 0; transition: transform 1.2s var(--ease), opacity 1.2s ease; }
.reveal-active .text-reveal-content { transform: none; opacity: 1; }
.reveal-active .text-reveal-wrapper ~ .text-reveal-wrapper .text-reveal-content,
.reveal-active .text-reveal-content + .text-reveal-content { transition-delay: .14s; }

.hover-lift { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 30px -10px rgba(31, 31, 31, .12); }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-breathe { animation: breathe 5s ease-in-out infinite; }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.tilt { transform-style: preserve-3d; transition: transform .5s var(--ease); }

/* Letras que trocam de peso sob o cursor (o JS divide em .ch) */
[data-chars] .ch { display: inline-block; font-weight: var(--w); }


/* =========================================================================
   4. TIPOGRAFIA
   ========================================================================= */
.display { font-size: clamp(48px, 6.6vw, 112px); font-weight: 800; line-height: .9; letter-spacing: -.05em; }
.display .row { display: block; white-space: nowrap; }
.display .row.thin { font-weight: 200; color: var(--g-400); }
.h1 { font-size: clamp(36px, 4.4vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.sec-title { font-size: clamp(30px, 3.2vw, 46px); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; color: var(--g-900); }
.h3 { font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
.h4 { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.018em; }
.h5 { font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; }
.h6 { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.006em; }
.accent { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.lead { font-size: clamp(17px, 1.4vw, 20px); font-weight: 300; line-height: 1.65; letter-spacing: -.011em; color: var(--g-600); }
.lead strong { font-weight: 500; color: var(--g-900); }
.body-lg { font-size: 17px; line-height: 1.65; color: var(--g-800); }
.body-sm { font-size: 13px; line-height: 1.55; color: var(--g-600); }
.caption { font-size: 12px; line-height: 1.45; letter-spacing: .005em; color: var(--g-500); }
.eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; color: var(--g-500); }
.mono-label { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .18em; line-height: 1.3; text-transform: uppercase; color: var(--g-400); }
.sec-index { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--g-400); }
.spec { font-family: var(--mono); font-size: 11px; line-height: 1.9; color: var(--g-500); }
.spec b { color: var(--g-900); font-weight: 500; }
.numeral { font-size: clamp(36px, 3.6vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }


/* =========================================================================
   5. COMPONENTES
   ========================================================================= */

/* ---------- Botões ---------- */
.btn {
  --h: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h);
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.006em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), background-color .25s, border-color .25s, color .25s, box-shadow .35s var(--ease);
}
.btn .ic { font-size: 18px; transition: transform .35s var(--ease); }
.btn:hover .ic.arrow { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { box-shadow: 0 0 0 4px rgba(31, 31, 31, .12); }
.btn-sm { --h: 34px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn-sm .ic { font-size: 16px; }
.btn-lg { --h: 52px; padding: 0 26px; font-size: 15px; border-radius: 14px; }
.btn-pill { border-radius: 999px; }
.btn-block { width: 100%; }
.btn-primary {
  background: linear-gradient(180deg, #2B2B2B, var(--g-900));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(31, 31, 31, .2), 0 8px 20px -8px rgba(31, 31, 31, .45);
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translateX(-120%) skewX(-20deg);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(31, 31, 31, .2), 0 14px 28px -10px rgba(31, 31, 31, .5); }
.btn-primary:hover::before { animation: shine .9s var(--ease) forwards; }
.btn-secondary { background: var(--g-100); color: var(--g-900); }
.btn-secondary:hover { background: var(--g-150); }
.btn-outline { background: #fff; color: var(--g-900); border-color: var(--g-200); box-shadow: var(--sh-1); }
.btn-outline:hover { border-color: var(--g-900); }
.btn-ghost { background: transparent; color: var(--g-600); }
.btn-ghost:hover { background: var(--g-50); color: var(--g-900); }
.btn-glass {
  background: var(--glass-bg);
  color: var(--g-900);
  border-color: var(--glass-border);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--glass-shadow);
}
.btn-glass:hover { background: var(--glass-bg-strong); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: #F2DEDB; }
.btn-ghost.btn-danger { background: transparent; }
.btn-ghost.btn-danger:hover { background: var(--danger-soft); }
.btn-icon { width: var(--h); padding: 0; }
.btn[data-tip] { overflow: visible; }
.btn[disabled] { background: var(--g-100); color: var(--g-400); border-color: transparent; box-shadow: none; cursor: not-allowed; transform: none; }
.btn[disabled]::before { display: none; }

/* Borda viva (conic) */
.btn-aurora { background: #fff; color: var(--g-900); border: 0; padding: 0 22px; }
.btn-aurora::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), var(--g-200), var(--g-900), var(--g-200) 40%, var(--g-200) 60%, var(--g-500), var(--g-200));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderFlow 4s linear infinite;
}
.btn-aurora:hover { box-shadow: 0 10px 30px -12px rgba(31, 31, 31, .35); transform: translateY(-1px); }

/* Botão com feixe que gira na borda */
.beam-btn { position: relative; display: inline-flex; overflow: hidden; isolation: isolate; border-radius: 999px; padding: 1px; background: rgba(31, 31, 31, .06); cursor: pointer; transition: transform .35s var(--ease); }
.beam-btn:hover { transform: translateY(-1px); }
.beam-btn:active { transform: scale(.97); }
.beam-btn-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--g-900);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .3s;
}
.beam-btn-content .ic { font-size: 16px; transition: transform .35s var(--ease); }
.beam-btn:hover .beam-btn-content .ic { transform: translateX(3px); }
.beam-btn:hover .beam-btn-content { background: var(--g-50); }
.beam-spinner { position: absolute; inset: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 0 320deg, var(--g-900) 360deg); animation: spin 3s linear infinite; }
.beam-btn.beam-dark { background: rgba(255, 255, 255, .12); }
.beam-btn.beam-dark .beam-btn-content { background: var(--g-900); color: #fff; }
.beam-btn.beam-dark .beam-spinner { background: conic-gradient(from 0deg, transparent 0 300deg, #fff 360deg); }
.beam-btn.beam-dark:hover .beam-btn-content { background: var(--g-800); }
.beam-btn.beam-light { background: rgba(255, 255, 255, .14); }
.beam-btn.beam-light .beam-btn-content { background: #fff; color: var(--g-900); }
.beam-btn.beam-light .beam-spinner { background: conic-gradient(from 0deg, transparent 0 300deg, rgba(255, 255, 255, .95) 360deg); }

/* Link com sublinhado que corre */
.link-underline { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.link-underline::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }
.link-underline .ic { transition: transform .35s var(--ease); }
.link-underline:hover .ic { transform: translateX(3px); }

/* ---------- Vidro ---------- */
.glass { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.5); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.glass-strong { background: var(--glass-bg-strong); }
.glass-panel { background: rgba(255, 255, 255, .7); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); border-bottom: 1px solid rgba(31, 31, 31, .05); }

/* ---------- Cartão lanterna ---------- */
.glow-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(31, 31, 31, .06);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s;
}
.glow-card::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  top: var(--y, -250px);
  left: var(--x, -250px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(31, 31, 31, .05) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--x, -100px) var(--y, -100px), rgba(31, 31, 31, .28), transparent 60%);
  -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 .3s;
}
.glow-card:hover::after, .glow-card:hover::before { opacity: 1; }
.glow-card:hover { box-shadow: var(--sh-3); }

/* Cartão branco simples (listas, calendário) */
.card { position: relative; border-radius: 24px; background: #fff; border: 1px solid var(--g-150); overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--g-100); }
.card-head.is-dark { background: var(--g-900); color: #fff; border-bottom: 0; }
.card-head.is-dark .eyebrow { color: rgba(255, 255, 255, .92); }
.card-head.is-dark .link-underline { font-size: 12px; color: rgba(255, 255, 255, .7); }
.card-head.is-dark .link-underline:hover { color: #fff; }
.card-pad { padding: 24px; }

/* Painel de palco (com grade ao fundo) */
.stage-panel { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--g-150); background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(252, 252, 252, .7)); }
.stage-panel > .bg-grid { position: absolute; inset: 0; opacity: .7; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%); }
.stage-panel > .inner { position: relative; z-index: 1; }

/* ---------- Campos (rótulo flutuante) ---------- */
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%;
  height: 52px;
  padding: 20px 16px 6px;
  border-radius: 12px;
  border: 1px solid var(--g-200);
  background: #fff;
  font: 400 14px/1.4 var(--sans);
  color: var(--g-900);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .25s, box-shadow .35s var(--ease), background .25s;
}
.field textarea { height: 104px; padding-top: 26px; resize: none; line-height: 1.55; }
.field select { padding-right: 40px; cursor: pointer; }
.field label { position: absolute; left: 16px; top: 16px; font-size: 14px; color: var(--g-500); pointer-events: none; transform-origin: left top; transition: transform .35s var(--ease), color .25s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--g-900); box-shadow: 0 0 0 4px rgba(31, 31, 31, .06); }
.field input:hover:not(:focus), .field textarea:hover:not(:focus), .field select:hover:not(:focus) { border-color: var(--g-300); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select + label { transform: translateY(-9px) scale(.78); color: var(--g-600); }
.field .suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; font-size: 18px; color: var(--g-400); pointer-events: none; transition: color .25s; }
.field textarea ~ .suffix { top: 26px; }
.field:focus-within .suffix { color: var(--g-900); }
.field.has-error input { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(176, 74, 63, .08); }
.field.has-error label { color: var(--danger); }
.field input:disabled { background: var(--g-50); color: var(--g-400); border-color: var(--g-150); cursor: not-allowed; }
.helper { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-left: 4px; font-size: 12px; line-height: 1.45; color: var(--g-500); }
.helper .ic { font-size: 14px; }
.helper.err { color: var(--danger); }
.fields { display: grid; gap: 14px; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.search-input { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; border-radius: 12px; background: var(--g-50); border: 1px solid transparent; color: var(--g-500); font-size: 14px; transition: all .3s var(--ease); }
.search-input:focus-within { background: #fff; border-color: var(--g-200); box-shadow: 0 0 0 4px rgba(31, 31, 31, .04); }
.search-input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--g-900); font: inherit; }
.search-input .ic { font-size: 18px; }
.kbd { font-family: var(--mono); font-size: 10.5px; padding: 3px 6px; border-radius: 6px; background: #fff; border: 1px solid var(--g-200); color: var(--g-500); box-shadow: 0 1px 0 var(--g-200); }

/* Marcar redondo (o traço se desenha) */
.check-round { width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--g-300); background: #fff; cursor: pointer; transition: all .35s var(--ease); }
.check-round svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .4s var(--ease) .05s; }
.check-round:hover { border-color: var(--g-900); }
.check-round.on { background: var(--g-900); border-color: var(--g-900); transform: scale(1.06); }
.check-round.on svg { stroke-dashoffset: 0; }
.is-done .task-title { color: var(--g-400); text-decoration: line-through; text-decoration-color: var(--g-300); }

.toggle { position: relative; width: 42px; height: 24px; flex: none; border-radius: 999px; background: var(--g-200); cursor: pointer; transition: background .35s var(--ease); }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(31, 31, 31, .25); transition: transform .45s var(--ease-spring); }
.toggle.on { background: var(--g-900); }
.toggle.on::after { transform: translateX(18px); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 14px; background: var(--g-50); }
.toggle-row strong { display: block; font-size: 14px; font-weight: 500; }
.toggle-row span { font-size: 12px; color: var(--g-500); }

/* ---------- Segmentado (indicador desliza) ---------- */
.seg { position: relative; display: inline-flex; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--g-150); box-shadow: var(--sh-1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.seg button, .seg a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--g-600); white-space: nowrap; transition: color .35s var(--ease); }
.seg button .ic, .seg a .ic { font-size: 17px; }
.seg button:hover, .seg a:hover { color: var(--g-900); }
.seg .on { color: #fff; }
.seg .seg-indicator { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 10px; background: linear-gradient(180deg, #2B2B2B, var(--g-900)); box-shadow: 0 6px 16px -6px rgba(31, 31, 31, .5); transition: transform .55s var(--ease), width .55s var(--ease); }
.seg.seg-light { background: var(--g-100); border-color: transparent; box-shadow: none; }
.seg.seg-light .on { color: var(--g-900); }
.seg.seg-light .seg-indicator { background: #fff; box-shadow: 0 1px 2px rgba(31, 31, 31, .08), 0 4px 12px -4px rgba(31, 31, 31, .12); }
.seg.seg-sm button { height: 30px; padding: 0 12px; font-size: 12.5px; }
/* Status: o indicador ganha a cor do estado */
.seg[data-tone="revisao"] .seg-indicator { background: var(--warning-soft); box-shadow: inset 0 0 0 1px rgba(148, 104, 31, .2); }
.seg[data-tone="revisao"] .on { color: var(--warning); }
.seg[data-tone="concluido"] .seg-indicator, .seg[data-tone="fechado"] .seg-indicator { background: var(--success-soft); box-shadow: inset 0 0 0 1px rgba(63, 122, 92, .2); }
.seg[data-tone="concluido"] .on, .seg[data-tone="fechado"] .on { color: var(--success); }
.seg[data-tone="andamento"] .seg-indicator { background: linear-gradient(180deg, #2B2B2B, var(--g-900)); }
.seg[data-tone="andamento"] .on { color: #fff; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge .ic { font-size: 13px; }
.badge-solid { background: var(--g-900); color: #fff; }
.badge-solid .dot { background: #fff; animation: pulseRingLight 1.6s ease-out infinite; }
.badge-soft { background: var(--g-100); color: var(--g-700); }
.badge-outline { background: #fff; border: 1px solid var(--g-200); color: var(--g-600); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-warning .dot { animation: pulseRingWarn 1.8s ease-out infinite; }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-glass { background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .8); color: var(--g-800); box-shadow: var(--sh-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.badge-live .dot { animation: pulseRing 1.6s ease-out infinite; }
.badge-sm { height: 20px; padding: 0 8px; font-size: 9.5px; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--g-900); color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.count.is-light { background: var(--g-100); color: var(--g-700); }
.count.is-warn { background: var(--warning); }
.pdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.c-salvia { background: var(--p-salvia); } .c-ardosia { background: var(--p-ardosia); } .c-ocre { background: var(--p-ocre); }
.c-lavanda { background: var(--p-lavanda); } .c-argila { background: var(--p-argila); } .c-petroleo { background: var(--p-petroleo); }
.c-g700 { background: var(--g-700); } .c-g900 { background: var(--g-900); } .c-warning { background: var(--warning); }
.c-success { background: var(--success); } .c-info { background: var(--info); } .c-g300 { background: var(--g-300); }

/* ---------- Dicas ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 40;
  transform: translate(-50%, 6px) scale(.96);
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(31, 31, 31, .92);
  color: #fff;
  font: 500 12px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 10px 24px -8px rgba(31, 31, 31, .4);
  transition: opacity .2s ease, transform .35s var(--ease);
}
[data-tip]::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  z-index: 40;
  width: 8px;
  height: 8px;
  background: rgba(31, 31, 31, .92);
  transform: translate(-50%, 6px) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .35s var(--ease);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: .12s; }
[data-tip]:hover::before, [data-tip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); transition-delay: .12s; }
[data-tip-pos=right]::after { left: calc(100% + 12px); bottom: auto; top: 50%; transform: translate(-6px, -50%) scale(.96); }
[data-tip-pos=right]::before { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(-6px, -50%) rotate(45deg); }
[data-tip-pos=right]:hover::after, [data-tip-pos=right]:focus-visible::after { transform: translate(0, -50%) scale(1); }
[data-tip-pos=right]:hover::before, [data-tip-pos=right]:focus-visible::before { transform: translate(0, -50%) rotate(45deg); }
[data-tip-pos=bottom]::after { bottom: auto; top: calc(100% + 10px); transform: translate(-50%, -6px) scale(.96); }
[data-tip-pos=bottom]::before { bottom: auto; top: calc(100% + 5px); transform: translate(-50%, -6px) rotate(45deg); }
[data-tip-pos=bottom]:hover::after { transform: translate(-50%, 0) scale(1); }
[data-tip-pos=bottom]:hover::before { transform: translate(-50%, 0) rotate(45deg); }
/* No toque não existe "passar o mouse": a dica ficaria presa na tela. */
@media (hover: none) { [data-tip]::after, [data-tip]::before { display: none; } }

/* Dica rica: explica em linguagem leiga */
.rich-tip { position: relative; }
.rt-panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 45;
  display: block;
  width: 270px;
  padding: 16px;
  border-radius: 16px;
  text-align: left;
  transform: translate(-50%, 8px) scale(.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .45s var(--ease);
}
.rich-tip:hover .rt-panel, .rich-tip:focus-within .rt-panel, .rich-tip.open .rt-panel { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: .12s; }
.rt-panel .rt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rt-panel .rt-title { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--g-900); }
.rt-panel .rt-text { display: block; font-size: 12.5px; line-height: 1.55; color: var(--g-500); }

/* ---------- Barra de etapas ---------- */
.stage-bar { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 4px; }
.stage-bar span { position: relative; height: 4px; border-radius: 4px; background: var(--g-200); overflow: hidden; }
.stage-bar span.done { background: var(--g-900); }
.stage-bar span.now { background: repeating-linear-gradient(-45deg, var(--g-900) 0 3px, transparent 3px 7px); background-size: 28px 100%; animation: hatch 1.2s linear infinite; opacity: .85; }
.stage-bar span.review { background: repeating-linear-gradient(-45deg, var(--warning) 0 3px, transparent 3px 7px), var(--warning-soft); background-size: 28px 100%, auto; animation: hatch 1.6s linear infinite; }
.stage-bar.lg span { height: 8px; border-radius: 6px; }
.stage-bar.grow span.done { transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); }
.stage-bar.grow.active span.done { transform: scaleX(1); }
.stage-bar.grow.active span.done:nth-child(2) { transition-delay: .12s; }
.stage-bar.grow.active span.done:nth-child(3) { transition-delay: .24s; }
.stage-bar.grow.active span.done:nth-child(4) { transition-delay: .36s; }
.stage-bar.grow.active span.done:nth-child(5) { transition-delay: .48s; }

/* Régua didática: onde o projeto está agora */
.stepper { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.stepper::before { content: ''; position: absolute; top: 15px; left: calc(50% / var(--n, 5)); right: calc(50% / var(--n, 5)); height: 1px; background: var(--g-200); }
.stepper .fill { position: absolute; top: 15px; left: calc(50% / var(--n, 5)); height: 1px; width: 0; background: var(--g-900); transition: width 1.4s var(--ease); }
.stepper.active .fill { width: var(--fill, 50%); }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 0 4px; }
.step .node { position: relative; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--g-200); color: var(--g-400); font-size: 14px; transition: all .5s var(--ease); }
.step:hover .node { transform: scale(1.12); }
.step.done .node { background: var(--g-900); border-color: var(--g-900); color: #fff; }
.step.now .node { border-color: var(--g-900); color: var(--g-900); box-shadow: 0 0 0 6px rgba(31, 31, 31, .06); animation: pulseRing 2s ease-out infinite; }
.step.review .node { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); animation: pulseRingWarn 2s ease-out infinite; }
.step .lbl { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--g-500); }
.step.done .lbl, .step.now .lbl, .step.review .lbl { color: var(--g-900); }
.step .here { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--g-500); }
.step.now .here, .step.review .here { color: var(--g-900); }

/* ---------- Linha de evento ---------- */
.event-row { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--g-100); cursor: pointer; transition: background .25s, padding .4s var(--ease); }
.event-row:last-child { border-bottom: 0; }
.event-row:hover { background: var(--g-25); padding-left: 20px; }
.event-row .date { width: 34px; flex: none; text-align: center; }
.event-row .date b { display: block; font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.event-row .date small { display: block; margin-top: 3px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--g-500); }
.event-row .info { flex: 1; min-width: 0; }
.event-row .title { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--g-900); }
.event-row .sub { margin-top: 2px; font-size: 12px; color: var(--g-500); }
.event-row .chev { margin-left: auto; font-size: 16px; color: var(--g-300); transition: transform .4s var(--ease), color .25s; }
.event-row:hover .chev { transform: translateX(4px); color: var(--g-900); }
.event-row .private { font-size: 15px; color: var(--g-400); }
.event-row.is-done .title { color: var(--g-400); text-decoration: line-through; text-decoration-color: var(--g-300); }

/* ---------- Faixa "agora" (grafite, luz girando) ---------- */
.now-banner { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #3A3A3A 0%, var(--g-900) 45%, var(--g-950) 100%); }
.now-banner::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); pointer-events: none; }

/* ---------- Linha que varre ---------- */
.lic-row { position: relative; display: grid; align-items: center; border-top: 1px solid var(--hair-ink); transition: padding .45s var(--ease), background .3s; }
.lic-row::before { content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 0; background: var(--g-900); transition: width .6s var(--ease); }
.lic-row:hover::before { width: 100%; }

/* ---------- Calendário ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--g-150); border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .7); }
.cal .dow { padding: 10px 12px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--g-500); background: #fff; border-bottom: 1px solid var(--g-150); }
.cal .day { position: relative; min-width: 0; min-height: 118px; padding: 8px; font-size: 12px; color: var(--g-700); border-right: 1px solid var(--g-100); border-bottom: 1px solid var(--g-100); cursor: pointer; transition: background .25s; }
.cal .day:nth-child(7n) { border-right: 0; }
.cal .day:nth-last-child(-n + 7) { border-bottom: 0; }
.cal .day:hover { background: var(--g-25); }
.cal .day.mute { color: var(--g-300); background: var(--g-25); }
.cal .day.weekend { background: rgba(252, 252, 252, .8); }
.cal .day.sel { box-shadow: inset 0 0 0 1.5px var(--g-900); background: #fff; }
.cal .day .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 500; font-variant-numeric: tabular-nums; }
.cal .day.today .n { background: var(--g-900); color: #fff; font-weight: 600; animation: pulseRing 2.4s ease-out infinite; }
.cal .dots { display: none; }
.ev { position: relative; display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; padding: 4px 7px; border-radius: 7px; background: var(--g-100); font-size: 10.5px; line-height: 1.25; color: var(--g-800); transition: background .25s, transform .3s var(--ease); }
.ev:hover { background: var(--g-150); transform: translateX(2px); }
.ev .pdot { width: 5px; height: 5px; margin-top: 4px; }
.ev .t { font-family: var(--mono); font-size: 9.5px; color: var(--g-500); flex: none; }
.mute .ev { opacity: .55; }

.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.mini-cal .w { padding-bottom: 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; color: var(--g-400); }
.mini-day { position: relative; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 12.5px; color: var(--g-600); font-variant-numeric: tabular-nums; transition: background .25s, color .25s; }
a.mini-day:hover { background: var(--g-100); color: var(--g-900); }
.mini-day.out { visibility: hidden; }
.mini-day.today { background: var(--g-900); color: #fff; font-weight: 600; animation: pulseRing 2.4s ease-out infinite; }
.mini-day.ev-d::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--g-900); }
.mini-day.today.ev-d::after { background: #fff; }

/* ---------- Janelas ----------
   O app usa o <dialog> do navegador (prende o foco, fecha com Esc); o painel
   de vidro e o fundo desfocado são os do Design System. */
@keyframes modalIn { 0% { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes backdropIn { from { opacity: 0; } }
.dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; overflow-y: auto; color: var(--g-900); }
.dialog[open] { display: grid; place-items: center; }
.dialog::backdrop { background: rgba(247, 247, 247, .55); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); animation: backdropIn .45s var(--ease); }
.dialog.is-closing::backdrop { opacity: 0; transition: opacity .26s; }
.modal-panel { position: relative; width: min(520px, 100%); padding: 28px; border-radius: 24px; animation: modalIn .6s var(--ease); }
.dialog.is-closing .modal-panel { opacity: 0; transform: translateY(16px) scale(.97); filter: blur(4px); transition: opacity .26s, transform .26s, filter .26s; }
.dialog-wide .modal-panel { width: min(680px, 100%); }
.dialog-confirm .modal-panel { width: min(440px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.modal-head .eyebrow { margin-bottom: 4px; }
.modal-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--g-500); }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 26px; }
.modal-foot .left, .modal-foot .dialog-left { margin-right: auto; }

/* ---------- Avisos ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; z-index: 95; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 12px; border-radius: 14px; background: rgba(31, 31, 31, .9); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.4; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sh-3); opacity: 0; transform: translate(-50%, 10px) scale(.96); pointer-events: none; transition: opacity .3s var(--ease), transform .5s var(--ease-spring); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .ic { font-size: 18px; flex: none; color: #9fd0b6; }
.toast-action { margin-left: 4px; padding: 5px 10px; border-radius: 9px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 12.5px; font-weight: 600; pointer-events: auto; transition: background .25s; }
.toast-action:hover { background: rgba(255, 255, 255, .28); }

/* ---------- Ícones de etapa (set próprio, se desenham) ---------- */
.stage-icon svg { width: 100%; height: 100%; }
.stage-icon svg * { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 220; }
.stage-icon.active svg * { animation: draw 2.2s var(--ease) forwards; }
.stage-icon:hover svg * { animation: none; stroke-dashoffset: 0; }

/* ---------- Marca ---------- */
.logo-mark { position: relative; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; overflow: hidden; background: linear-gradient(160deg, #3A3A3A, var(--g-900)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 4px 10px -4px rgba(31, 31, 31, .5); }
.logo-mark i { display: grid; grid-template-columns: repeat(2, 6px); gap: 3px; }
.logo-mark i b { width: 6px; height: 6px; border-radius: 2px; background: #fff; }
.logo-mark i b:nth-child(3) { background: repeating-linear-gradient(-45deg, #fff 0 1.5px, transparent 1.5px 3px); }
.logo-mark i b:nth-child(4) { background: rgba(255, 255, 255, .25); }
.wordmark { font-size: 17px; font-weight: 600; letter-spacing: -.03em; }
/* Marca em dois tons (DS 3.1): CALEND + ARQ */
.wm-calend { color: var(--g-900); }
.wm-arq { color: var(--g-400); }
.veil .wm-calend { color: #F0F0F0; }
.veil .wm-arq { color: rgba(255, 255, 255, .38); }
.foot-mark .fch.arq { color: #6B6B6B; }


/* =========================================================================
   6. FUNDOS VIVOS
   ========================================================================= */
.bg-grid { background-size: 40px 40px; background-image: linear-gradient(to right, rgba(31, 31, 31, .035) 1px, transparent 1px), linear-gradient(to bottom, rgba(31, 31, 31, .035) 1px, transparent 1px); }
.dot-bg { background-image: radial-gradient(rgba(31, 31, 31, .12) 1px, transparent 1px); background-size: 18px 18px; }
.section-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.section-bg .bg-grid { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(ellipse 70% 60% at var(--gx, 70%) var(--gy, 30%), #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at var(--gx, 70%) var(--gy, 30%), #000 10%, transparent 75%); }
.section-bg .orb { position: absolute; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle at 30% 30%, var(--g-150), transparent 70%); }
.section-bg .orb.o1 { width: 520px; height: 520px; top: -10%; right: -8%; animation: drift 22s ease-in-out infinite; }
.section-bg .orb.o2 { width: 420px; height: 420px; bottom: -12%; left: -6%; background: radial-gradient(circle at 60% 40%, var(--g-100), transparent 70%); animation: drift 26s ease-in-out infinite reverse; }
.section-bg .sweep-light { position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: conic-gradient(from 0deg, transparent 0 82%, rgba(31, 31, 31, .025) 90%, transparent 98%); animation: sweep 40s linear infinite; }
.section-bg .contour { position: absolute; right: -6%; top: 8%; width: 46vw; max-width: 720px; opacity: .5; }
.section-bg .contour path { fill: none; stroke: rgba(31, 31, 31, .06); stroke-width: 1; stroke-dasharray: 2400; stroke-dashoffset: 2400; }
.section-bg.active .contour path { animation: draw 5s var(--ease) forwards; }
.hero-spot { position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), rgba(31, 31, 31, .045), transparent 60%); pointer-events: none; }
.reg-cross { position: absolute; width: 26px; height: 26px; opacity: 0; transition: opacity 1.4s ease .4s; }
.reg-cross::before, .reg-cross::after { content: ''; position: absolute; background: var(--g-900); }
.reg-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.reg-cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.is-ready .reg-cross { opacity: .3; }
.ghost-num { position: absolute; font-weight: 800; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(31, 31, 31, .06); pointer-events: none; user-select: none; will-change: transform; }


/* =========================================================================
   7. VÉU, CURSOR, GRADE FIXA
   ========================================================================= */
.veil { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: #fff; background: radial-gradient(120% 90% at 50% 0%, #2A2A2A, var(--g-900) 60%, var(--g-950)); transition: transform 1s var(--ease-in-out-circ); }
.veil.lift { transform: translateY(-100%); }
.veil .kick { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.veil .mark { overflow: hidden; font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -.04em; text-align: center; }
.veil .mark span { display: inline-block; transform: translateY(110%); animation: veilIn .9s var(--ease) .1s forwards; }
.veil .mark .thin { font-weight: 200; color: rgba(255, 255, 255, .45); }
.veil .bar { position: relative; width: 160px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, .15); }
.veil .bar::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; animation: veilBar 1s var(--ease) .2s forwards; }

.cursor { position: fixed; top: 0; left: 0; z-index: 99; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--g-900); border: 1px solid transparent; pointer-events: none; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, border-color .3s, opacity .3s; }
.cursor.is-link { width: 42px; height: 42px; margin: -21px 0 0 -21px; background: rgba(31, 31, 31, .04); border-color: rgba(31, 31, 31, .5); backdrop-filter: blur(2px); }
.cursor.on-dark { background: #fff; }
.cursor.on-dark.is-link { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }
.cursor.is-hidden { opacity: 0; }
@media (pointer: coarse) { .cursor { display: none; } }

/* Colunas tracejadas fixas */
.overlay-grid { position: fixed; inset: 0; z-index: 1; display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; }
.overlay-grid > div { position: relative; width: 100%; max-width: var(--max); height: 100%; display: grid; grid-template-columns: 3fr 6fr 3fr; border-left: 1px dashed rgba(31, 31, 31, .05); border-right: 1px dashed rgba(31, 31, 31, .05); }
.overlay-grid i { border-right: 1px dashed rgba(31, 31, 31, .05); }
.overlay-grid i:last-child { border-right: 0; }
.app .overlay-grid { padding-left: calc(var(--rail-w) + var(--rail-gap) * 2 + var(--gutter)); }

/* Faixas que correm (nomes das etapas) */
.ribbons { position: relative; z-index: 2; overflow: hidden; padding: 14px 0; border-top: 1px solid var(--hair-ink); border-bottom: 1px solid var(--hair-ink); background: rgba(255, 255, 255, .6); }
.ribbon { display: flex; width: max-content; white-space: nowrap; font-size: clamp(28px, 4.2vw, 58px); line-height: 1.15; letter-spacing: -.03em; will-change: transform; }
.ribbon span { padding-right: .4em; }
.ribbon.r1 { font-weight: 700; color: var(--g-900); }
.ribbon.r2 { font-weight: 200; color: transparent; -webkit-text-stroke: 1px rgba(31, 31, 31, .35); }
.ribbon i { padding: 0 .35em; font-style: normal; font-weight: 300; color: var(--g-300); -webkit-text-stroke: 0; }


/* =========================================================================
   8. COMPOSIÇÕES DO APP
   ========================================================================= */

/* ---------- Moldura ---------- */
.wrap { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.app .shell { position: relative; z-index: 2; padding-left: calc(var(--rail-w) + var(--rail-gap) * 2); }
.client .shell { position: relative; z-index: 2; }

/* Trilho lateral de vidro, flutuando */
.app-rail {
  position: fixed;
  z-index: 50;
  top: var(--rail-gap);
  bottom: var(--rail-gap);
  left: var(--rail-gap);
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  border-radius: 22px;
}
.app-rail .logo-mark { margin-bottom: 14px; }
.app-rail nav { position: relative; display: flex; flex-direction: column; gap: 8px; }
.app-rail .sep { width: 24px; height: 1px; margin: 6px 0; background: var(--g-200); }
.app-rail .push { flex: 1; }
.rail-link { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 19px; color: var(--g-500); transition: all .35s var(--ease); }
.rail-link:hover { background: var(--g-100); color: var(--g-900); }
.rail-link.on { background: var(--g-900); color: #fff; box-shadow: 0 8px 16px -8px rgba(31, 31, 31, .6); }

/* Topo: vidro, fixo */
.topbar { position: sticky; top: 0; z-index: 40; transition: box-shadow .4s var(--ease); }
.topbar.is-scrolled { box-shadow: 0 10px 30px -20px rgba(31, 31, 31, .25); }
.topbar-inner { display: flex; align-items: center; gap: 14px; height: var(--topbar-h); }
.office { display: flex; align-items: center; gap: 10px; min-width: 0; }
.office-mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--g-900); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.office-name { font-size: 13.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.office-role { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--g-500); white-space: nowrap; }
.office-role .live { width: 5px; height: 5px; border-radius: 50%; background: var(--success); animation: pulseRing 2.4s ease-out infinite; }
.topbar .search-input { flex: 1; max-width: 380px; margin-left: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Caminho de volta */
.crumb { display: flex; align-items: center; gap: 12px; padding: 18px 0 0; font-size: 14px; }
.crumb a.back { display: inline-flex; align-items: center; gap: 6px; color: var(--g-500); transition: color .25s; }
.crumb a.back:hover { color: var(--g-900); }
.crumb a.back .ic { transition: transform .35s var(--ease); }
.crumb a.back:hover .ic { transform: translateX(-3px); }
.crumb .sep { color: var(--g-300); }
.crumb .proj { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -.01em; }
.crumb .proj .ic { color: var(--g-400); }
.crumb .push { flex: 1; }

/* ---------- Abertura de página ---------- */
.page-hero { position: relative; overflow: hidden; padding: 48px 0 56px; }
.page-hero > .wrap { z-index: 2; }
.kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.kicker .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--g-900); animation: pulseRing 1.8s ease-out infinite; }
.kicker .line { width: 48px; height: 1px; background: var(--g-200); }
.kicker .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--g-400); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: end; margin-top: 36px; }
.hero-grid .lead { grid-column: span 5; }
.hero-grid .actions { grid-column: span 4; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-grid .spec { grid-column: span 3; text-align: right; }
/* Régua de etapas (DS 3.1) — substitui a linha em curva */
@keyframes radar { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.ruler-block { position: relative; margin-top: 52px; }
.ruler-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ruler-block .glass { border-radius: 24px; }
.ruler { position: relative; }
.ruler-scroll { overflow-x: auto; overflow-y: visible; padding-top: 120px; margin-top: -120px; scrollbar-width: none; }
.ruler-scroll::-webkit-scrollbar { display: none; }
/* 8 etapas pedem mais largura que as 6 do demonstrativo (760px) */
.ruler-inner { position: relative; min-width: 940px; height: 118px; padding: 22px 34px 18px; }
.ruler-track { position: relative; height: 2px; border-radius: 2px; background: var(--g-150); }
.ruler-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--g-900); transition: width 2.2s var(--ease-out-expo) .6s; }
.is-ready .ruler-fill, .ruler.active .ruler-fill { width: var(--p, 50%); }
.ruler-ticks { height: 9px; margin-top: 6px; background-image: linear-gradient(90deg, var(--g-300) 0 1px, transparent 1px), linear-gradient(90deg, var(--g-200) 0 1px, transparent 1px); background-size: 60px 9px, 12px 5px; background-repeat: repeat-x; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.r-node { position: absolute; top: 22px; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); cursor: pointer; }
.r-node .dot { position: relative; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1.5px solid var(--g-300); transition: transform .4s var(--ease-spring), background .4s, border-color .4s; }
.r-node.done .dot { background: var(--g-900); border-color: var(--g-900); }
.r-node.current .dot { background: #fff; border: 4px solid var(--g-900); }
.r-node.current .dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--g-900); animation: radar 2.2s var(--ease-out-expo) infinite; }
.r-node:hover .dot { transform: scale(1.25); }
.r-node .r-lbl { position: absolute; top: 22px; text-align: center; white-space: nowrap; }
.r-node .r-lbl b { display: block; font-size: 12.5px; font-weight: 500; letter-spacing: -.01em; color: var(--g-900); }
.r-node:not(.done):not(.current) .r-lbl b { color: var(--g-500); }
.r-node .r-lbl small { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--g-400); }
.r-node.current .r-lbl small { color: var(--g-900); }
.r-node .r-tip { position: absolute; bottom: 24px; z-index: 10; width: 220px; padding: 12px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; color: var(--g-700); text-align: left; transform: translateY(8px) scale(.96); opacity: 0; pointer-events: none; transition: all .35s var(--ease-spring); }
.r-node .r-tip .mono-label { display: block; margin-bottom: 4px; font-size: 9px; }
.r-node .r-tip strong { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 600; color: var(--g-900); }
.r-node:hover .r-tip, .r-node:focus-visible .r-tip { opacity: 1; transform: none; }

.hero-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--dash); }

/* Linha de etapas (desenha no load) */

/* ---------- Seções (rótulo fixo à esquerda + conteúdo) ---------- */
.sec { position: relative; overflow: hidden; padding: 104px 0; border-top: 1px dashed var(--dash); }
.sec.alt { background: var(--g-25); }
.sec.tight { padding: 72px 0; }
.sec > .wrap { z-index: 2; }
.sec-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
.sec-aside { grid-column: span 3; }
.sec-aside .sticky { position: sticky; top: calc(var(--topbar-h) + 40px); }
.sec-aside .sec-index { display: block; margin-bottom: 16px; }
.sec-aside .sec-title { margin-bottom: 16px; }
.sec-aside p { max-width: 250px; font-size: 14px; line-height: 1.6; color: var(--g-500); }
.sec-aside .aside-extra { margin-top: 28px; }
.sec-body { grid-column: span 9; min-width: 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }

/* Faixa de seções (Cronograma · Calendário · Orçamentos) */
.section-nav { position: relative; z-index: 3; display: flex; justify-content: center; padding-top: 0; padding-bottom: 56px; }

/* ---------- Painel ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kpi { padding: 24px; border-radius: 24px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.kpi-top .ic { font-size: 19px; color: var(--g-400); }
.kpi-sub { margin-top: 10px; font-size: 12.5px; color: var(--g-500); }
.kpi-sub b { color: var(--g-900); font-weight: 500; }
.kpi.is-warn .numeral { color: var(--warning); }
.kpi.is-warn .kpi-top .ic { color: var(--warning); }

/* Lista de projetos */
.proj-list { border-bottom: 1px solid var(--hair-ink); }
.proj-row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(130px, 1fr) 110px 24px; gap: 24px; padding: 22px 4px; }
.proj-row:hover { padding-left: 16px; background: linear-gradient(90deg, var(--g-25), transparent); }
.proj-name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.avatar { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--g-100); color: var(--g-700); font-size: 12px; font-weight: 600; letter-spacing: .02em; transition: background .35s var(--ease), color .35s; }
.avatar .pdot { position: absolute; right: -2px; bottom: -2px; box-shadow: 0 0 0 2.5px #fff; }
.proj-row:hover .avatar { background: var(--g-900); color: #fff; }
.proj-name strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.proj-name span { font-size: 12.5px; color: var(--g-500); }
.proj-stage { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--g-700); }
.proj-progress .caption { display: flex; justify-content: space-between; margin-bottom: 7px; }
.proj-progress .caption b { color: var(--g-900); font-weight: 600; }
.proj-next { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--g-600); }
.proj-next small { display: block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--g-400); }
.proj-row .chev { font-size: 18px; color: var(--g-300); transition: transform .4s var(--ease), color .25s; }
.proj-row:hover .chev { transform: translateX(4px); color: var(--g-900); }
.list-head { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(130px, 1fr) 110px 24px; gap: 24px; padding: 0 4px 14px; }

/* Agenda do painel */
.agenda-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.month-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.month-head .h4 span { font-weight: 300; color: var(--g-400); }

/* Quadro de etapas */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.board-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.board-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; border-bottom: 1px solid var(--hair-ink); }
.board-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; cursor: pointer; }
.board-card .proj { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--g-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-card .proj .pdot { width: 6px; height: 6px; }
.board-card strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.board-card .mono-label { font-size: 9.5px; letter-spacing: .12em; }
.board-more { padding: 6px 4px; font-size: 12px; color: var(--g-400); }

/* ---------- Topo do projeto ---------- */
.now-wrap { padding-bottom: 20px; }
.now-banner .inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 28px 32px; }
.now-banner .eyebrow { margin-bottom: 10px; color: rgba(255, 255, 255, .5); }
.now-banner .now-text { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }
.now-banner .now-more { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .55); }
.now-banner .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 14px 32px 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
.now-banner .foot span { color: rgba(255, 255, 255, .5); }
.now-banner .foot a { font-weight: 500; color: rgba(255, 255, 255, .92); }

/* Abertura do projeto em duas colunas (11/10): à esquerda, nome, texto e
   botões; à direita, o "agora" em grafite e o resumo logo abaixo. No
   celular: nome → agora → texto → resumo. */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); grid-template-areas: "title now" "lead spec"; column-gap: 64px; row-gap: 28px; align-items: end; }
.hs-title { grid-area: title; min-width: 0; }
.hs-now { grid-area: now; }
.hs-lead { grid-area: lead; display: grid; gap: 26px; align-content: end; }
.hs-lead .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hs-lead .actions .mono-label { color: var(--g-500); }
.hs-spec { grid-area: spec; align-self: start; }
.hs-lead .lead { max-width: 560px; }

/* O cartão do "agora": título de verdade, sinal que pulsa, frase grande. */
.now-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 26px 24px; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(31, 31, 31, .55); }
.now-head { align-self: stretch; display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.now-signal { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.now-signal i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: nowPulse 2s ease-out infinite; }
@keyframes nowPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.now-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: #fff; }
.now-head .count { margin-left: auto; background: #fff; color: var(--g-900); }
.now-hero .now-text { margin: 2px 0 0; font-size: clamp(22px, 2.1vw, 28px); font-weight: 600; line-height: 1.18; letter-spacing: -.03em; }
.now-hero .now-more { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .55); }
.now-hero > .beam-btn { margin-top: 6px; }
.now-hero .foot { align-self: stretch; margin: 6px -26px -24px; padding: 12px 26px 14px; gap: 6px 16px; font-size: 12.5px; }
.now-hero.is-calm { box-shadow: var(--sh-1); }
.now-hero.is-calm .now-head { border-bottom-color: var(--g-100); }
.now-hero.is-calm .now-signal { background: var(--g-100); }
.now-hero.is-calm .now-signal i { background: var(--g-400); animation: none; }
.now-hero.is-calm .now-title { color: var(--g-900); }
.now-hero.is-calm .now-text { font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; letter-spacing: -.015em; }

/* Sem o quadro de resumo: o cartão do "agora" ocupa a coluna inteira. */
.hero-split.no-spec { grid-template-areas: "title now" "lead now"; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); }
.hero-split.no-spec .hs-now { align-self: end; }

/* O que fazer na obra, dentro do cartão do topo: uma ação embaixo da outra. */
.todo-hero .todo-list { align-self: stretch; display: grid; padding: 0; }
.todo-hero .todo-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 16px 0; border-radius: 0; }
.todo-hero .todo-item:first-child { padding-top: 4px; }
.todo-hero .todo-item + .todo-item { border-top: 1px solid rgba(255, 255, 255, .1); }
.todo-hero .todo-item:hover { background: none; }
.todo-hero .todo-item strong { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.todo-hero .todo-btns { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 4px; }
.todo-hero .todo-rest { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); align-self: stretch; }

@media (max-width: 1100px) { .hero-split, .hero-split.no-spec { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); column-gap: 40px; } }
@media (max-width: 860px) {
  .hero-split, .hero-split.no-spec { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "now" "lead" "spec"; row-gap: 22px; }
  .now-hero { padding: 20px 20px 22px; }
  .now-hero .foot { margin: 4px -20px -22px; padding: 12px 20px 14px; }
}

/* A barra das seções, logo abaixo da abertura do projeto. */
.project-top .page-hero { padding-bottom: 36px; }
.project-top .section-nav { padding-top: 0; padding-bottom: 0; }
.project-top .ruler-block { margin-top: 40px; }
.project-top > .wrap > #hero-ruler:empty { display: none; }
.project-top .status-grid { margin-top: 28px; }

.status-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: stretch; }
.current-card { display: flex; flex-direction: column; padding: 28px; border-radius: 24px; }
.current-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.current-card .h3 { margin: 6px 0 4px; }
.current-card .phrase { font-size: 15px; color: var(--g-500); }
.current-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 24px; font-size: 13px; color: var(--g-500); }
.current-card .progress-head { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 12px; color: var(--g-500); }
.current-card .progress-head b { color: var(--g-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.icon-tile { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--g-100); color: var(--g-900); }
.icon-tile.is-dark { background: var(--g-900); color: #fff; box-shadow: 0 10px 20px -10px rgba(31, 31, 31, .6); }
.icon-tile.is-warn { background: var(--warning-soft); color: var(--warning); }
.icon-tile .stage-icon { width: 34px; height: 34px; }
.notice { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 14px 16px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; transition: transform .35s var(--ease); }
.notice:hover { transform: translateX(3px); }
.notice .ic { font-size: 18px; flex: none; }
.notice .txt { flex: 1; min-width: 0; }
.notice.warn { background: var(--warning-soft); color: var(--warning); }
.notice.warn strong { font-weight: 600; }
.notice.info { background: var(--info-soft); color: var(--info); }

/* ---------- Cronograma ---------- */
.legend { display: grid; gap: 10px; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--g-600); }
.guide-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; text-align: left; cursor: pointer; width: 100%; }
.guide-card .icon-tile { width: 44px; height: 44px; border-radius: 14px; font-size: 20px; }
.guide-card strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.guide-card span { font-size: 12.5px; color: var(--g-500); }
.guide-card .chev { margin-left: auto; font-size: 18px; color: var(--g-400); transition: transform .4s var(--ease); }
.guide-card:hover .chev { transform: translateX(4px); color: var(--g-900); }

.timeline { position: relative; display: flex; flex-direction: column; gap: 12px; }
.tl-item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
/* Fio vertical entre as etapas */
.tl-item::before { content: ''; position: absolute; left: 19.5px; top: 46px; bottom: -40px; width: 1px; background: var(--g-200); }
.tl-item:last-child::before { display: none; }
.tl-item.is-done::before { background: var(--g-900); }
.tl-node { position: relative; z-index: 1; width: 40px; display: flex; justify-content: center; padding-top: 30px; }
.tl-node i { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 1px solid var(--g-300); transition: transform .5s var(--ease-spring); }
.tl-item:hover .tl-node i { transform: scale(1.3); }
.tl-item.is-done .tl-node i { background: var(--g-900); border-color: var(--g-900); }
.tl-item.is-now .tl-node i { width: 17px; height: 17px; margin-top: -2px; border: 1.5px solid var(--g-900); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--g-900); animation: pulseRing 2s ease-out infinite; }
.tl-item.is-review .tl-node i { width: 17px; height: 17px; margin-top: -2px; border: 1.5px solid var(--warning); background: var(--warning-soft); animation: pulseRingWarn 2s ease-out infinite; }

.tl-card { border-radius: 24px; }
.tl-item.is-current .tl-card { border-color: rgba(31, 31, 31, .16); box-shadow: var(--sh-3); background: rgba(255, 255, 255, .86); }
.tl-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; padding: 18px 22px; text-align: left; }
.tl-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--g-100); color: var(--g-700); transition: background .35s var(--ease), color .35s; }
.tl-icon .stage-icon { width: 34px; height: 34px; }
.tl-item.is-now .tl-icon, .tl-item.is-current .tl-icon { background: var(--g-900); color: #fff; box-shadow: 0 10px 20px -10px rgba(31, 31, 31, .6); }
.tl-item.is-review .tl-icon { background: var(--warning-soft); color: var(--warning); }
.tl-titles { min-width: 0; }
.tl-titles .mono-label { display: block; margin-bottom: 4px; }
.tl-titles .h5 { display: block; }
.tl-item.is-wait .tl-titles .h5 { color: var(--g-600); }
.tl-titles .phrase { display: block; margin-top: 2px; font-size: 13.5px; color: var(--g-500); }
.tl-meta { display: flex; align-items: center; gap: 14px; }
.tl-meta .dates { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--g-500); white-space: nowrap; }
.tl-meta .files { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; color: var(--g-400); }
.tl-chev { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--g-150); color: var(--g-500); transition: transform .5s var(--ease), background .3s, color .3s, border-color .3s; }
.tl-head:hover .tl-chev { border-color: var(--g-900); color: var(--g-900); }
.tl-item.is-open .tl-chev { transform: rotate(180deg); background: var(--g-900); border-color: var(--g-900); color: #fff; }
.tl-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.tl-item.is-open .tl-collapse { grid-template-rows: 1fr; }
.tl-collapse > div { min-height: 0; overflow: hidden; }
.tl-body { display: flex; flex-direction: column; gap: 32px; margin: 0 22px; padding: 26px 0 26px; border-top: 1px dashed var(--dash); opacity: 0; transform: translateY(-8px); filter: blur(4px); transition: opacity .4s, transform .6s var(--ease), filter .5s; }
.tl-item.is-open .tl-body { opacity: 1; transform: none; filter: none; transition-delay: .1s; }
.tl-body > *, .editor > * { min-width: 0; }
.tl-desc { max-width: 64ch; font-size: 16px; line-height: 1.65; color: var(--g-700); }

/* Blocos dentro da etapa */
.block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.block-head .eyebrow { color: var(--g-900); }
.block-head .mono-label { margin-left: auto; }
.block-head .icon { font-size: 16px; color: var(--g-400); }
.list-card { border-radius: 18px; background: #fff; border: 1px solid var(--g-150); overflow: hidden; }
.item-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--g-100); transition: background .25s, padding .4s var(--ease); }
.item-row:last-child { border-bottom: 0; }
.item-row:hover { background: var(--g-25); padding-left: 20px; }
.item-row .task-title { font-size: 14.5px; font-weight: 500; letter-spacing: -.006em; }
.item-row .sub { display: block; font-size: 12px; font-weight: 400; color: var(--g-500); }
.item-row .grip { font-size: 16px; color: var(--g-300); cursor: grab; opacity: 0; transition: opacity .25s; }
.list-card:hover .grip { opacity: 1; }
.add-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-top: 1px dashed var(--g-200); background: var(--g-25); }
.add-row input { flex: 1; min-width: 0; height: 38px; padding: 0 4px; border: 0; background: transparent; outline: none; font-size: 14px; }
.add-row input::placeholder { color: var(--g-400); }

/* Revisão pedida */
.review-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 20px 22px; border-radius: 18px; background: var(--warning-soft); color: var(--warning); }
.review-box .icon-tile { width: 42px; height: 42px; border-radius: 13px; background: #fff; color: var(--warning); font-size: 19px; }
.review-box .eyebrow { color: var(--warning); margin-bottom: 6px; }
.review-box p { font-size: 15.5px; line-height: 1.55; color: var(--g-900); }
.review-box .caption { margin-top: 8px; color: var(--warning); }

/* Aprovação */
.approval { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: var(--g-50); border: 1px solid var(--g-150); }
.approval.is-ok { background: var(--success-soft); border-color: transparent; }
.approval .icon-tile { width: 44px; height: 44px; border-radius: 50%; font-size: 20px; }
.approval.is-ok .icon-tile { background: var(--success); color: #fff; }
.approval strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.approval span { font-size: 13px; color: var(--g-600); }
.approval .btn { margin-left: auto; }

/* Campos da etapa (visão da arquiteta) */
.editor { display: grid; gap: 14px; }
.editor .status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 4px; }

/* Blocos para acrescentar */
.picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--g-300); }
.picker .mono-label { margin-right: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border-radius: 10px; background: #fff; border: 1px solid var(--g-150); font-size: 12.5px; font-weight: 500; color: var(--g-600); transition: all .3s var(--ease); }
.chip .ic { font-size: 15px; }
.chip:hover { border-color: var(--g-900); color: var(--g-900); transform: translateY(-1px); }

/* Arquivos */
.file-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--g-100); transition: background .25s, padding .4s var(--ease); }
.file-row:last-child { border-bottom: 0; }
.file-row:hover { background: var(--g-25); padding-left: 20px; }
.file-type { width: 42px; height: 48px; flex: none; position: relative; display: grid; place-items: end center; padding-bottom: 7px; border-radius: 8px 14px 8px 8px; background: var(--g-50); border: 1px solid var(--g-150); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; color: var(--g-600); }
.file-type::before { content: ''; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; border-bottom-left-radius: 4px; background: var(--g-150); }
.file-type.pdf { color: var(--danger); }
.file-type.dwg { color: var(--info); }
.file-info { flex: 1; min-width: 0; }
.file-info strong { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-info span { font-size: 12.5px; color: var(--g-500); }
.file-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--g-400); white-space: nowrap; }
.file-actions { display: flex; gap: 2px; opacity: .5; transition: opacity .25s; }
.file-row:hover .file-actions { opacity: 1; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 10px; background: #fff; border: 1px solid var(--g-150); font-size: 13px; color: var(--g-800); max-width: 100%; transition: all .3s var(--ease); }
.file-chip:hover { border-color: var(--g-900); transform: translateY(-1px); }
.file-chip .tag { padding: 3px 6px; border-radius: 6px; background: var(--danger-soft); color: var(--danger); font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .06em; }
.file-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-add { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px dashed var(--g-300); font-size: 13px; color: var(--g-500); transition: all .3s var(--ease); }
.file-add:hover { border-color: var(--g-900); color: var(--g-900); }
.file-add .ic { font-size: 15px; transition: transform .35s var(--ease); }
.file-add:hover .ic { transform: translateY(-2px); }

/* Conversa da etapa */
.chat { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 20px; background: var(--g-25); border: 1px solid var(--g-150); }
.msg { display: flex; align-items: flex-end; gap: 10px; max-width: 86%; animation: popIn .5s var(--ease-spring) both; }
.msg .who { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--g-200); color: var(--g-700); font-size: 10px; font-weight: 600; }
.msg .bubble { padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: #fff; border: 1px solid var(--g-150); }
.msg .bubble p { font-size: 14.5px; line-height: 1.55; color: var(--g-800); }
.msg .meta { display: flex; gap: 8px; margin-bottom: 4px; font-size: 11.5px; color: var(--g-400); }
.msg .meta strong { font-weight: 600; color: var(--g-700); }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.me .who { background: var(--g-900); color: #fff; }
.msg.me .bubble { border-radius: 18px 18px 6px 18px; background: var(--g-900); border-color: var(--g-900); }
.msg.me .bubble p { color: #fff; }
.msg.me .meta { justify-content: flex-end; color: rgba(255, 255, 255, .5); }
.msg.me .meta strong { color: rgba(255, 255, 255, .85); }
.composer { display: flex; align-items: flex-end; gap: 10px; margin-top: 4px; padding: 8px 8px 8px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--g-200); transition: border-color .25s, box-shadow .35s var(--ease); }
.composer:focus-within { border-color: var(--g-900); box-shadow: 0 0 0 4px rgba(31, 31, 31, .06); }
.composer textarea { flex: 1; min-height: 40px; max-height: 140px; padding: 9px 0; border: 0; outline: none; resize: none; background: transparent; font-size: 14.5px; line-height: 1.5; }
.chat-empty { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--g-500); }

/* Agenda dentro da etapa */
.agenda-card .event-row { padding-left: 14px; }

/* Disciplinas complementares */
.comp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--g-100); transition: background .25s, padding .4s var(--ease); }
.comp-row:last-child { border-bottom: 0; }
.comp-row:hover { background: var(--g-25); padding-left: 20px; }
.comp-row strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.comp-row .who { font-size: 13px; color: var(--g-600); }
.comp-row .who small { display: block; font-size: 11.5px; color: var(--g-400); }

/* Rodapé da etapa */
.stage-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px dashed var(--dash); }
.stage-foot .group { display: flex; flex-wrap: wrap; gap: 4px; }
.history { font-size: 13px; color: var(--g-500); }
.history summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.history summary::-webkit-details-marker { display: none; }
.history summary .ic { transition: transform .35s var(--ease); }
.history[open] summary .ic { transform: rotate(90deg); }
.history ul { display: grid; gap: 10px; margin-top: 12px; }
.history li { padding-left: 14px; border-left: 2px solid var(--g-150); font-size: 14px; color: var(--g-700); }
.history small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10.5px; color: var(--g-400); }
/* Editar / excluir revisão (14/10). */
.rev-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.rev-actions .link-underline, .rev-side .link-underline { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.rev-side { display: grid; justify-items: end; gap: 8px; }
.link-underline.is-danger { color: var(--danger); }

/* Nova etapa */
.add-stage { display: flex; align-items: center; justify-content: center; gap: 10px; width: calc(100% - 56px); height: 72px; margin: 4px 0 0 56px; border-radius: 24px; border: 1px dashed var(--g-300); font-size: 14.5px; font-weight: 500; color: var(--g-500); transition: all .35s var(--ease); }
.add-stage .ic { font-size: 20px; transition: transform .5s var(--ease-spring); }
.add-stage:hover { border-color: var(--g-900); color: var(--g-900); background: rgba(255, 255, 255, .7); }
.add-stage:hover .ic { transform: rotate(90deg); }

/* "Comece por aqui" aberto */
.guide { padding: 36px; border-radius: 28px; }
.guide-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; padding-bottom: 28px; border-bottom: 1px dashed var(--dash); }
.guide-top .h3 { margin: 8px 0 14px; }
.guide-welcome p { max-width: 64ch; margin-bottom: 10px; font-size: 16px; line-height: 1.7; color: var(--g-700); }
.guide-stages { margin-top: 8px; }
.guide-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; padding: 26px 0; align-items: start; }
.guide-row:hover { padding-left: 12px; }
.guide-row .num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--g-400); padding-top: 4px; }
.guide-row .h5 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.guide-row .what { font-size: 14.5px; line-height: 1.65; color: var(--g-600); }
.guide-row .you { padding: 16px 18px; border-radius: 16px; background: var(--g-50); font-size: 14px; line-height: 1.6; color: var(--g-700); }
.guide-row .you .eyebrow { display: block; margin-bottom: 6px; color: var(--g-900); }
.guide-row.is-now .you { background: var(--g-900); color: rgba(255, 255, 255, .8); }
.guide-row.is-now .you .eyebrow { color: #fff; }
.guide-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--dash); }
.guide-legend div { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--g-600); }

/* ---------- Calendário (tela) ---------- */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.cal-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--g-600); }
.cal-panels { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; margin-top: 28px; align-items: start; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 24px; text-align: center; }
.empty-state .icon-tile { width: 56px; height: 56px; border-radius: 18px; font-size: 24px; color: var(--g-500); background: var(--g-50); border: 1px dashed var(--g-300); }
.empty-state p { max-width: 260px; font-size: 13.5px; color: var(--g-500); }

/* ---------- Orçamentos ---------- */
.budget-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.budget-kpis .numeral small { font-size: .45em; font-weight: 500; letter-spacing: 0; color: var(--g-400); margin-right: 4px; }
.cat { margin-top: 24px; }
.cat-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 18px; padding: 16px 20px 16px 24px; background: var(--g-900); color: #fff; }
.cat-head .h5 { color: #fff; }
.cat-head .h5 small { margin-left: 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.deadline { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.deadline .mono-label { color: rgba(255, 255, 255, .5); letter-spacing: .14em; }
.deadline input { width: 128px; border: 0; outline: none; background: transparent; color: #fff; font: 500 13px var(--sans); font-variant-numeric: tabular-nums; color-scheme: dark; }
.deadline b { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cat-head .btn-ghost { color: rgba(255, 255, 255, .55); }
.cat-head .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.quote-head, .quote-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 190px 120px 40px; gap: 20px; align-items: center; }
.is-readonly .quote-head, .is-readonly .quote-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 140px 120px; }
.quote-head { padding: 14px 24px 12px; border-bottom: 1px solid var(--g-100); }
.quote-row { padding: 20px 24px; }
.quote-row:hover { padding-left: 32px; background: linear-gradient(90deg, var(--g-25), transparent); }
.quote-row:first-of-type { border-top: 0; }
.quote-row .supplier > strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.quote-row .supplier > span { display: block; margin-top: 2px; font-size: 13px; color: var(--g-500); }
.quote-row .supplier .files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.value { font-size: 24px; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.value small { margin-right: 4px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--g-400); }
.received { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--g-600); }
.received small { display: block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--g-400); }
.quote-row.is-closed .value { color: var(--success); }
.cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 14px 18px; border-top: 1px solid var(--g-100); }
.add-cat { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 10px 10px 10px 20px; border-radius: 20px; border: 1px dashed var(--g-300); }
.add-cat input { flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font-size: 15px; }

/* ---------- Tela do cliente ---------- */
.client-top { display: flex; align-items: center; gap: 14px; height: 72px; }
.client-top .push { flex: 1; }
.readonly { display: inline-flex; align-items: center; gap: 6px; }
.site { position: relative; overflow: hidden; color: #F0F0F0; background: radial-gradient(120% 120% at 50% 0%, #2A2A2A, var(--g-900) 55%, var(--g-950)); }
.site .foot-zero { position: absolute; right: -4vw; bottom: -14vh; font-size: 70vh; font-weight: 800; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .06); pointer-events: none; }
.site .inner { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 40px; }
.site .mono-label { color: rgba(255, 255, 255, .5); }
.foot-mark { font-size: clamp(56px, 11vw, 180px); line-height: .9; letter-spacing: -.055em; white-space: nowrap; }
.foot-mark .fch { display: inline-block; font-weight: var(--w, 800); }
.site .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-family: var(--mono); font-size: 10px; line-height: 1.8; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.site .cols a:hover { color: #fff; }
.site .marquee-wrap { overflow: hidden; padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-family: var(--mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .25); }
.site .marquee-wrap span { margin: 0 32px; }

.app-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 32px 0 40px; border-top: 1px dashed var(--dash); font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--g-400); }
.app-foot a:hover { color: var(--g-900); }

/* ---------- Entrada (login) ---------- */
.gate { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.gate > .wrap { width: 100%; }
.gate-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 80px; }
.gate-main { position: relative; z-index: 3; flex: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; padding-top: 24px; padding-bottom: 64px; }
.gate .display { font-size: clamp(56px, 8.6vw, 148px); }
.gate .lead { max-width: 520px; margin-top: 32px; }
.login-card { padding: 34px; border-radius: 28px; }
.login-card .h4 { margin: 18px 0 6px; }
.login-card .body-sm { margin-bottom: 26px; }
.or { display: flex; align-items: center; gap: 14px; margin: 20px 0; font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--g-400); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--g-200) 0 4px, transparent 4px 8px); }
.legal { margin-top: 22px; font-size: 12px; line-height: 1.55; color: var(--g-500); }
.legal a { color: var(--g-900); }

/* ---------- Peças das janelas ---------- */
.link-box { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--g-200); }
.link-box .url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--g-700); }
.module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.module-opt { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 40px 14px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--g-150); cursor: pointer; transition: border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.module-opt:hover { border-color: var(--g-900); transform: translateY(-1px); box-shadow: var(--sh-2); }
.module-opt:has(.check-round.on) { border-color: var(--g-900); background: var(--g-25); }
.module-opt strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.module-opt span span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--g-500); }
.module-opt .mi { position: absolute; top: 14px; right: 14px; font-size: 18px; color: var(--g-400); }
.item-row.ro { grid-template-columns: minmax(0, 1fr) auto; }
.item-row .file-chip, .item-row .file-add { display: flex; width: max-content; max-width: 100%; }

/* ---------- Página de sumário ---------- */
.toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.toc-row { grid-template-columns: 48px minmax(0, 1fr) auto 24px; gap: 16px; padding: 18px 4px; }
.toc-row:hover { padding-left: 16px; }
.toc-row .num { font-family: var(--mono); font-size: 11px; color: var(--g-400); }
.toc-row strong { font-size: 16px; font-weight: 600; letter-spacing: -.012em; }
.toc-row .chev { font-size: 18px; color: var(--g-300); transition: transform .4s var(--ease), color .25s; }
.toc-row:hover .chev { transform: translateX(4px); color: var(--g-900); }


/* =========================================================================
   8B. PEÇAS DO APP
   O que o app tem e o protótipo não mostrava, desenhado com os mesmos
   tokens e o mesmo vocabulário.
   ========================================================================= */

/* ---------- Atualização sem animação ----------
   Ao redesenhar uma parte (salvar, mover, abrir), os blocos aparecem prontos:
   a entrada animada é só para quando a tela chega. */
.no-anim.motion-enter, .no-anim.animate-on-scroll { opacity: 1 !important; animation: none !important; }
.no-anim.clip-enter { clip-path: none; transform: none; transition: none; }
.no-anim.stage-bar.grow span.done { transition: none; }
.stage-icon.no-anim svg *, .tl-item .stage-icon.active svg * { stroke-dashoffset: 0; }
.stage-icon.no-anim svg * { animation: none; }
.no-anim.ruler .ruler-fill { transition: none; }
.no-anim.sec-title .text-reveal-content, .no-anim.display .text-reveal-content { transition: none; }
.enter { animation: popIn .5s var(--ease-spring) both; }
.badge.pop { animation: popIn .5s var(--ease-spring); }

/* Botões são botões: sem moldura do navegador em peças que viraram <button>. */
.r-node, .step, .guide-card, .tl-head, .comp-toggle, .module-opt, .notice, .logo-mark, .crumb .back, .chip, .add-stage, .link-underline { font: inherit; color: inherit; text-align: inherit; }
.r-node { background: none; border: 0; padding: 0; }

/* ---------- Título grande ----------
   O nome do projeto quebra entre palavras, nunca no meio de uma. */
.display .row { white-space: normal; }
.display .text-reveal-wrapper { max-width: 100%; }
.display .word { display: inline-block; white-space: nowrap; }

/* ---------- Moldura ---------- */
.app-rail .logo-mark { border: 0; padding: 0; cursor: pointer; }

/* Perfil do escritório no alto do trilho: logo (ou iniciais) num quadrado
   com anel fino, que abre o perfil. */
.rail-profile { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 2px; border-radius: 14px; cursor: pointer; transition: transform .35s var(--ease); }
.rail-profile:hover { transform: translateY(-1px); }
.rail-office { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: linear-gradient(160deg, #3A3A3A, var(--g-900)); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 4px 10px -4px rgba(31, 31, 31, .5); }
.rail-office.has-logo, .office-mark.has-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--g-150); }
.rail-office img, .office-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
/* Logo quadrada preenche tudo, sem moldura (ver App.fitLogo). */
.has-logo.is-fill { box-shadow: none; }
.has-logo.is-fill img { object-fit: cover; padding: 0; }
.rail-profile::after { content: ''; position: absolute; inset: -3px; border-radius: 16px; border: 1px solid var(--g-200); opacity: 0; transition: opacity .3s; }
.rail-profile:hover::after { opacity: 1; }
.office-mark { overflow: hidden; }
.rail-link { border: 0; background: none; cursor: pointer; }
.office { flex: 1 1 auto; }
.office-text { min-width: 0; overflow: hidden; }
.office-name { overflow: hidden; text-overflow: ellipsis; }
.office-role { overflow: hidden; }
.office-role .save-state { overflow: hidden; text-overflow: ellipsis; }
.office-role .save-state:not(:empty)::before { content: '·'; margin-right: 6px; }
.office-role .save-state.is-warning { color: var(--warning); font-weight: 500; }
.office-role:has(.is-warning) .live { background: var(--warning); animation: none; }
.client-top .push { flex: 1; }
.readonly .ic { font-size: 13px; }

.crumb .back { display: inline-flex; align-items: center; gap: 6px; color: var(--g-500); transition: color .25s; }
.crumb .back:hover { color: var(--g-900); }
.crumb .back .ic { transition: transform .35s var(--ease); }
.crumb .back:hover .ic { transform: translateX(-3px); }
.crumb .proj { position: relative; cursor: pointer; }
.crumb-select { max-width: 46vw; padding: 4px 22px 4px 0; border: 0; background: transparent; font: 600 14px var(--sans); letter-spacing: -.01em; color: var(--g-900); appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; text-overflow: ellipsis; }
.crumb .proj .ic { position: absolute; right: 0; pointer-events: none; }

/* Faixa de pré-visualização ("Ver como cliente") e aviso de armazenamento. */
.preview-bar, .storage-warning { position: sticky; top: 0; z-index: 45; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #3A3A3A 0%, var(--g-900) 45%, var(--g-950) 100%); }
.storage-warning { position: relative; background: var(--warning-soft); color: var(--warning); }
.preview-inner, .storage-warning-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 52px; padding-top: 8px; padding-bottom: 8px; font-size: 13.5px; }
.preview-text { display: inline-flex; align-items: center; gap: 10px; }
.preview-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulseRingLight 1.6s ease-out infinite; }
.preview-bar .btn-glass { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.preview-bar .btn-glass:hover { background: rgba(255, 255, 255, .18); }
.preview-bar .preview-text .ic { font-size: 17px; }
.preview-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Planos e arquivados (migração 006) ---------- */
.plan-meter { display: grid; gap: 12px; margin-top: 22px; padding: 16px 18px; border-radius: 18px; background: var(--glass-bg-strong); border: 1px solid var(--g-150); }
.plan-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-meter-head strong { font-size: 15px; font-weight: 600; }
.pm-row { display: grid; gap: 6px; font-size: 12.5px; color: var(--g-500); }
.pm-top { display: flex; justify-content: space-between; gap: 10px; }
.pm-top b { color: var(--g-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-row.is-full .meter i { background: var(--warning); }
.pm-row.is-full .pm-top b { color: var(--warning); }
.plan-meter .link-underline { justify-self: start; font-size: 13px; font-weight: 500; color: var(--g-900); }
/* Planos: as linhas dos três cartões alinhadas (subgrid), cada uma com a sua
   bolinha, para comparar lendo de lado. */
.plans-dialog .modal-panel { width: min(760px, 100%); }
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(4, auto); column-gap: 10px; }
.plan-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; padding: 18px 18px 8px; border-radius: 18px; border: 1px solid var(--g-150); background: #fff; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.plan-card:hover { border-color: var(--g-300); }
.plan-card.is-current { border-color: var(--g-900); background: var(--g-25); box-shadow: 0 0 0 1px var(--g-900) inset, 0 18px 36px -24px rgba(31, 31, 31, .35); }
.plan-top { display: grid; align-content: start; gap: 4px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px dashed var(--g-150); }
.plan-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.plan-mine { gap: 6px; background: var(--g-900); color: #fff; }
.plan-mine .dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.plan-name { margin-top: 2px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.plan-price { display: flex; align-items: baseline; gap: 3px; margin-top: 6px; }
.plan-price b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 13px; color: var(--g-500); }
.plan-alt { font-size: 12px; line-height: 1.4; color: var(--g-500); }
.plan-li { position: relative; display: block; padding: 9px 0 9px 16px; border-bottom: 1px solid var(--g-100); font-size: 13px; line-height: 1.4; color: var(--g-600); }
.plan-li:last-child { border-bottom: 0; }
.plan-li::before { content: ''; position: absolute; left: 1px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--g-900); }
.plan-li b { font-weight: 600; color: var(--g-900); font-variant-numeric: tabular-nums; }
.plan-li.is-plus { color: var(--g-900); }
.plans-note { font-size: 12.5px; color: var(--g-500); max-width: 340px; }

/* ---------- Cobrança (tarefa 15) ---------- */
/* Com o botão de assinar, cada cartão ganha uma linha a mais no subgrid. */
.plans-grid.has-cta { grid-template-rows: auto repeat(5, auto); }
.plans-grid.has-cta .plan-card { grid-row: span 6; }
.plans-grid.has-cta .plan-li:nth-last-child(2) { border-bottom: 0; }
.plan-cta { display: grid; padding: 12px 0 10px; }
.plan-cta .btn { justify-content: center; }
.plan-cta-note { align-self: center; padding: 12px 0 10px; font-size: 12.5px; color: var(--g-500); }
.plans-cycle { display: flex; justify-content: center; margin: -4px 0 16px; }
/* Pagamento pendente: faixa presa no pé da tela, fora do #app (sobrevive aos
   redesenhos e não cobre o topo). */
.billing-strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px max(16px, calc((100vw - 1180px) / 2)); background: #FBF3E2; border-top: 1px solid rgba(148, 104, 31, .25); box-shadow: 0 -12px 28px -20px rgba(31, 31, 31, .35); color: #6B4A12; font-size: 13px; line-height: 1.45; }
body:has(.billing-strip) { padding-bottom: 72px; }
.billing-strip > .ic { flex: none; font-size: 18px; }
.billing-strip > span { flex: 1 1 320px; min-width: 0; }
.billing-strip strong { font-weight: 600; }
.subscribe-form { display: grid; gap: 14px; }
.subscribe-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 120px); gap: 10px; }
.subscribe-why { margin-top: -6px; }
.pay-options { display: grid; gap: 8px; }
.pay-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--g-150); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.pay-option:hover { border-color: var(--g-300); }
.pay-option:has(input:checked) { border-color: var(--g-900); box-shadow: 0 0 0 1px var(--g-900) inset; }
.pay-option input { margin-top: 3px; accent-color: var(--g-900); }
.pay-option-body { display: grid; gap: 3px; }
.pay-option-body strong { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.pay-option-body > span { font-size: 12.5px; line-height: 1.45; color: var(--g-500); }
.form-error { margin: 0; font-size: 13px; color: var(--danger); }
.form-error:empty { display: none; }
.my-plan .modal-panel { width: min(680px, 100%); }
.my-plan-body { display: grid; gap: 18px; }
.my-plan-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 13.5px; color: var(--g-600); }
.my-plan-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px 18px; border-radius: 16px; background: var(--g-25); border: 1px solid var(--g-100); }
.my-plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.my-plan-payments { display: grid; gap: 8px; }
.pay-row { display: grid; grid-template-columns: 110px 100px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--g-100); font-size: 13px; }
.pay-row:last-child { border-bottom: 0; }
.pay-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-date { color: var(--g-600); }
.pay-status { color: var(--g-500); }
.pay-status.is-late { color: var(--danger); font-weight: 500; }
.pay-links { display: inline-flex; gap: 12px; }
.pay-links a { color: var(--g-900); text-decoration: underline; text-underline-offset: 3px; }
.my-plan-cancel { color: var(--g-500); }
.my-plan-cancel:hover { color: var(--danger); }
/* Versão ligada ao banco de teste: impossível confundir com a de verdade. */
.test-db-flag { position: fixed; left: 12px; bottom: 12px; z-index: 90; padding: 6px 12px; border-radius: 999px; background: #B04A3F; color: #fff; font: 600 11px/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }

.limit-list { display: grid; }
.limit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--g-100); }
.limit-row:last-child { border-bottom: 0; }
.limit-row strong { display: block; font-size: 14px; font-weight: 600; }
.limit-row span { font-size: 12.5px; color: var(--g-500); }
.archived-list { margin-top: 18px; }
.archived-list > summary { display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; font-size: 13.5px; font-weight: 500; color: var(--g-600); cursor: pointer; list-style: none; }
.archived-list > summary::-webkit-details-marker { display: none; }
.archived-list > summary .chev { transition: transform .3s var(--ease); }
.archived-list[open] > summary .chev { transform: rotate(180deg); }
.archived-list > .list-card { margin-top: 8px; }
.archived-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--g-100); }
.archived-row:last-child { border-bottom: 0; }
.archived-row .info { min-width: 0; }
.archived-row strong { display: block; font-size: 14px; font-weight: 600; color: var(--g-700); }
.archived-row .info span { font-size: 12.5px; color: var(--g-500); }
.archived-row .act { display: flex; gap: 6px; flex: none; }
.chat-closed { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--g-50); font-size: 13px; color: var(--g-500); }
@media (max-width: 720px) {
  .plans-grid, .plans-grid.has-cta { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 10px; }
  .plan-card, .plans-grid.has-cta .plan-card { grid-row: auto; grid-template-rows: none; }
  .archived-row { flex-wrap: wrap; }
  .my-plan-meters { grid-template-columns: minmax(0, 1fr); }
  .pay-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pay-row .pay-status { grid-column: 1; }
  .pay-row .pay-links { grid-column: 2; justify-self: end; }
}
body.is-preview .topbar { top: 52px; }

/* Link do cliente no topo: "Copiar" e "Opções" grudados. */
.link-action { display: flex; align-items: center; }
.link-action .link-copy:not(:only-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.link-action .link-more { width: 34px; padding: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 1px; }

/* ---------- Quadro de resumo das aberturas ----------
   Vidro claro com a "borda viva" do Design System: uma luz grafite que dá a
   volta no quadro devagar (conic + --angle, como o .btn-aurora). */
.hero-grid .spec-card { grid-column: span 3; align-self: end; }
.spec-card { position: relative; isolation: isolate; padding: 18px 20px 16px; border-radius: 22px; background: var(--glass-bg-strong); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--sh-2); }
.spec-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), var(--g-150) 0deg, var(--g-150) 200deg, var(--g-400) 260deg, var(--g-900) 300deg, var(--g-400) 330deg, var(--g-150) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderFlow 7s linear infinite;
  pointer-events: none;
}
/* Um brilho prateado bem leve por dentro (a "prata viva" do Design System). */
.spec-card::after { content: ''; position: absolute; inset: 1px; z-index: -2; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(237, 237, 237, .55) 30%, rgba(250, 250, 250, .8) 55%, rgba(220, 220, 220, .45) 80%, rgba(245, 245, 245, .8) 100%); background-size: 200% 200%; animation: gradMove 10s ease-in-out infinite; pointer-events: none; }
@keyframes gradMove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.spec-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.spec-card-head .live { width: 6px; height: 6px; border-radius: 50%; background: var(--g-900); animation: pulseRing 2.4s ease-out infinite; }
.spec-card-head .mono-label { color: var(--g-500); }
.spec-rows { display: grid; }
.spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px dashed var(--dash); }
.spec-row dt { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--g-400); }
.spec-row dd { min-width: 0; text-align: right; }
.spec-row dd b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--g-900); }
.spec-row dd small { margin-left: 5px; font-size: 12px; color: var(--g-500); }
.spec-row.is-text dd b { font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; line-height: 1.35; }
@media (max-width: 1100px) { .hero-grid .spec-card { grid-column: span 5; } }
@media (max-width: 720px) { .hero-grid .spec-card { grid-column: span 12; } }

/* ---------- Abertura do projeto ---------- */
.kicker-edit { margin-left: 4px; }
.kicker .line { flex: 0 0 48px; }
.hero-grid .actions .mono-label { color: var(--g-500); }
.hero-docs .files-chips { display: contents; }
.ruler-block .ruler-head .mono-label:first-child { max-width: 70%; }
.ruler-inner { min-width: calc(var(--n, 8) * 118px); }
.r-node .dot .ic { width: 9px; height: 9px; color: #fff; }
.r-node .dot .ic * { stroke-width: 3.4; }
.r-node .r-lbl b { max-width: 118px; overflow: hidden; text-overflow: ellipsis; }
.r-node .r-tip.is-first { left: -8px; }
.r-node .r-tip.is-last { right: -8px; }
.r-node:focus-visible { box-shadow: none; }
.r-node:focus-visible .dot { box-shadow: 0 0 0 4px rgba(31, 31, 31, .14); }
.project-top .status-grid { margin-bottom: 72px; }

/* "O que você precisa fazer agora" sem pendência: claro, sem alarme. */
.now-banner.is-calm { color: var(--g-900); background: var(--glass-bg-strong); border: 1px solid var(--g-150); box-shadow: var(--sh-1); }
.now-banner.is-calm::after { display: none; }
.now-banner.is-calm .eyebrow, .now-banner.is-calm .now-more, .now-banner.is-calm .foot span { color: var(--g-500); }
.now-banner.is-calm .now-text { font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; }
.now-banner.is-calm .foot { border-top-color: var(--g-100); }
.now-banner .foot .link-underline { font-weight: 500; color: rgba(255, 255, 255, .92); }
.now-banner.is-calm .foot .link-underline { color: var(--g-900); }

.current-card .notices { display: grid; gap: 8px; margin-top: auto; }
.current-card .notice { width: 100%; text-align: left; }
.agenda-card .card-head .link-underline { cursor: pointer; }
.empty-state.is-small { padding: 28px 20px; }
.empty-state.is-small .icon-tile { width: 46px; height: 46px; border-radius: 15px; font-size: 20px; }
.empty-state.card { padding: 48px 24px; }

/* ---------- Cronograma ---------- */
.aside-card { margin-top: 24px; }
.guide-slot { margin-top: 20px; }
.sec-body > .guide { margin-bottom: 28px; }
.steps-card + .guide-slot + .guide { margin-top: 20px; }
.guide-card { border: 0; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-top .notice.info { margin-top: 14px; }
.guide-row .h5 .badge { margin-left: 2px; }
.guide-legend > div { align-items: flex-start; }

.steps-card { overflow: visible; padding: 32px 28px 30px; }
.steps-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
.steps-head .eyebrow { margin-bottom: 4px; }
.step { background: none; border: 0; cursor: pointer; }
.step .node .ic { font-size: 15px; }
.rich-tip:focus-visible .rt-panel { opacity: 1; transform: translate(-50%, 0) scale(1); }

.tl-card { position: relative; }
.tl-head { cursor: pointer; }
.tl-card.is-editable .tl-head { padding-left: 44px; }
.tl-grip { position: absolute; top: 34px; left: 12px; z-index: 2; width: 26px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--g-300); cursor: grab; touch-action: none; opacity: .55; transition: opacity .25s, color .25s, background .25s; }
.tl-card:hover .tl-grip { opacity: 1; }
.tl-grip:hover { color: var(--g-900); background: var(--g-100); }
.tl-grip .ic { font-size: 16px; }
.tl-meta .rev-flag { display: inline-flex; color: var(--warning); font-size: 16px; }
.tl-chev.is-sm { width: 26px; height: 26px; }
.tl-item.is-open .comp.is-open .tl-chev.is-sm, .comp.is-open .tl-chev.is-sm { transform: rotate(180deg); background: var(--g-900); border-color: var(--g-900); color: #fff; }
.timeline.is-sorting .tl-item:not(.is-dragging) { transition: transform .22s var(--ease); }
.tl-item.is-dragging { z-index: 6; }
.tl-item.is-dragging .tl-card { box-shadow: var(--sh-4); }
.tl-item.is-settling { transition: transform .22s var(--ease); }
body.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.tl-body > * { min-width: 0; }
.stage-summary { display: grid; gap: 14px; }
.stage-summary .notice { margin-top: 0; }
.stage-summary .notice:hover { transform: none; }
.add-stage { background: none; cursor: pointer; }

/* Revisão pedida: o texto é editável pelo escritório. */
.revs { display: grid; gap: 10px; }
.review-box .review-text { display: block; width: 100%; min-height: 0; padding: 0; border: 0; background: transparent; resize: none; outline: none; font: 400 15.5px/1.55 var(--sans); color: var(--g-900); }
.review-box .caption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* Data dentro de uma frase (revisões, aprovação, observações). */
.date-inline { padding: 2px 6px; border: 1px dashed var(--g-300); border-radius: 7px; background: rgba(255, 255, 255, .6); font: 500 11px var(--mono); letter-spacing: .02em; color: var(--g-700); outline: none; transition: border-color .25s; }
.date-inline:hover, .date-inline:focus { border-color: var(--g-900); border-style: solid; }

/* ---------- Blocos da etapa ---------- */
.block { min-width: 0; }
.block-head .block-title-input { flex: 0 1 auto; min-width: 60px; max-width: 60%; padding: 2px 0; border: 0; border-bottom: 1px dashed transparent; background: transparent; outline: none; font: 600 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--g-900); field-sizing: content; transition: border-color .25s; }
.block-head .block-title-input:hover, .block-head .block-title-input:focus { border-bottom-color: var(--g-300); }
.block-remove { margin-left: 4px; color: var(--g-400); }
.block-head .mono-label:empty { display: none; }
.block-head .mono-label:empty + .block-remove, .block-head .block-title-input + .mono-label:empty + .block-remove { margin-left: auto; }

/* Linhas de lista: flexíveis, para caber puxador, marca, nome, selo e remover. */
.item-row { display: flex; align-items: center; }
.item-row > .task-title, .item-row > .row-input, .item-row > .item-main { flex: 1; min-width: 0; }
.item-row.ro { grid-template-columns: none; }
.item-main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.row-input { display: block; width: 100%; min-height: 0; padding: 3px 0; border: 0; background: transparent; resize: none; outline: none; overflow: hidden; font: 500 14.5px/1.45 var(--sans); letter-spacing: -.006em; color: var(--g-900); border-bottom: 1px dashed transparent; transition: border-color .25s; }
.row-input:hover, .row-input:focus { border-bottom-color: var(--g-300); }
.is-done .row-input { color: var(--g-400); text-decoration: line-through; text-decoration-color: var(--g-300); }
.row-grip { flex: none; display: grid; place-items: center; width: 22px; height: 28px; margin-left: -6px; border-radius: 7px; color: var(--g-300); cursor: grab; touch-action: none; opacity: 0; transition: opacity .25s, color .25s, background .25s; }
.list-card:hover .row-grip { opacity: 1; }
.row-grip:hover { color: var(--g-900); background: var(--g-100); }
.row-grip .ic { font-size: 15px; }
.is-sorting > .is-sortable:not(.is-dragging) { transition: transform .2s var(--ease); }
.is-sortable.is-dragging { position: relative; z-index: 3; background: #fff; box-shadow: var(--sh-3); }
.list-empty { padding: 14px 16px; font-size: 13px; color: var(--g-500); }

/* Status de um item: um selo que abre como lista. */
.badge-select { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 24px; padding: 0 8px 0 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.badge-select select { height: 100%; margin: 0; padding: 0 16px 0 0; border: 0; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; }
.badge-select:focus-within { box-shadow: 0 0 0 4px rgba(31, 31, 31, .08); }
.badge-select .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-select .caret { position: absolute; right: 8px; font-size: 12px; pointer-events: none; }
.badge-select.s-aguardando { background: #fff; border: 1px solid var(--g-200); color: var(--g-600); }
.badge-select.s-andamento { background: var(--g-100); color: var(--g-700); }
.badge-select.s-andamento .dot { animation: pulseRing 1.6s ease-out infinite; }
.badge-select.s-concluido { background: var(--success-soft); color: var(--success); }
.badge-select.s-revisao { background: var(--warning-soft); color: var(--warning); }

/* Linha para acrescentar item (dentro de uma lista ou solta). */
.add-row { flex-wrap: wrap; }
.add-row > .ic { flex: none; font-size: 18px; color: var(--g-400); }
.add-row:focus-within > .ic { color: var(--g-900); }
.list-card > .add-row:first-child { border-top: 0; }
.add-row.is-standalone { border: 1px dashed var(--g-300); border-radius: 16px; }

/* Aprovação */
.approval-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.approval-text .approval-title { max-width: 100%; font-size: 15px; letter-spacing: -.01em; text-transform: none; }
.approval .btn { flex: none; }
.approval .block-remove { margin-left: 0; }
.approval .btn + .block-remove { margin-left: 4px; }

/* Observações */
.notes { display: grid; gap: 8px; margin-bottom: 12px; }
.note { padding: 12px 14px 14px; border-radius: 14px; background: var(--g-50); border: 1px solid var(--g-100); }
.note-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.note-text { font-size: 14.5px; line-height: 1.6; color: var(--g-800); white-space: pre-wrap; }
.note-text-input { display: block; width: 100%; min-height: 0; padding: 0; border: 0; background: transparent; resize: none; outline: none; font: 400 14.5px/1.6 var(--sans); color: var(--g-800); }
.block > .toggle-row { margin-bottom: 12px; }

/* Conversa */
.msg .meta { align-items: center; }
.msg-remove { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 2px; border-radius: 6px; color: inherit; opacity: 0; transition: opacity .2s, background .2s; }
.msg:hover .msg-remove, .msg-remove:focus-visible { opacity: .8; }
.msg-remove:hover { background: rgba(31, 31, 31, .08); opacity: 1; }
.msg.me .msg-remove:hover { background: rgba(255, 255, 255, .14); }
.msg .bubble p { white-space: pre-wrap; overflow-wrap: anywhere; }
.composer .btn { flex: none; }
.composer textarea::placeholder { color: var(--g-400); }

/* Complementares */
.comp { border-bottom: 1px solid var(--g-100); }
.comp:last-of-type { border-bottom: 0; }
.comp .comp-row { display: flex; align-items: center; gap: 14px; border-bottom: 0; }
.comp-toggle { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) auto auto; align-items: center; gap: 16px; cursor: pointer; }
.comp-toggle strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.comp-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.comp.is-open .comp-collapse { grid-template-rows: 1fr; }
.comp-collapse > div { min-height: 0; overflow: hidden; }
.comp-body { display: grid; gap: 14px; padding: 4px 16px 18px 52px; }
.comp-actions { display: flex; justify-content: flex-end; }
.sent-line { display: grid; gap: 10px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 20px; }
.fact dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--g-400); }
.fact dd { margin-top: 2px; font-size: 13.5px; color: var(--g-800); }

/* Resumo de orçamentos, seletor de blocos */
.teaser { display: flex; align-items: center; gap: 8px; }
.teaser .notice { flex: 1; margin-top: 0; text-align: left; cursor: pointer; }
.picker { margin: 0; }
.chip { cursor: pointer; }
.module-opt { width: 100%; text-align: left; }
.module-opt.is-selected { border-color: var(--g-900); background: var(--g-25); }
.module-opt .check-round { pointer-events: none; }

/* ---------- Campos ---------- */
.field textarea { height: auto; min-height: 104px; }
.field input::placeholder, .field textarea::placeholder { color: transparent; transition: color .25s; }
.field input:focus::placeholder, .field textarea:focus::placeholder { color: var(--g-400); }
.field input[type=date], .field input[type=time] { padding-right: 12px; }
.form-field { display: grid; gap: 8px; min-width: 0; }
.form-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--g-500); }
.form-field textarea, .form-field input:not([type=checkbox]), .input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--g-200); background: #fff; font: 400 14px/1.55 var(--sans); color: var(--g-900); outline: none; resize: none; transition: border-color .25s, box-shadow .35s var(--ease); }
.form-field textarea:focus, .form-field input:focus, .input:focus { border-color: var(--g-900); box-shadow: 0 0 0 4px rgba(31, 31, 31, .06); }
.form-field textarea::placeholder, .input::placeholder { color: var(--g-400); }
.fields-title { margin-top: 8px; }
.dialog-form { display: grid; gap: 14px; }
.dialog-hint { font-size: 12.5px; line-height: 1.5; color: var(--g-500); }
.dialog-text { font-size: 14.5px; line-height: 1.6; color: var(--g-600); }
.dialog-text a { color: var(--g-900); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--g-300); }
.dialog-text a:hover { text-decoration-color: var(--g-900); }
.dialog-text + .dialog-hint { margin-top: 10px; }
.toggle { flex: none; }
.toggle-line { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--g-700); cursor: pointer; }
.toggle-row.is-danger { background: var(--danger-soft); }
.toggle-row.is-danger strong { color: var(--danger); }
.toggle-row .btn { flex: none; }
.btn-danger-solid { background: var(--danger); color: #fff; box-shadow: 0 8px 20px -10px rgba(176, 74, 63, .6); }
.btn-danger-solid:hover { background: #9A3F35; transform: translateY(-1px); }
.btn .arrow { transition: transform .35s var(--ease); }

/* ---------- Anexos ---------- */
/* Nome comprido de arquivo encolhe com reticências e nunca passa da coluna
   (antes cobria o valor do orçamento — 13/10). */
.files-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.files-chips > .file-chip { min-width: 0; }
.file-chip-link .name { min-width: 0; }
.files-chips.is-compact { gap: 6px; }
.files-empty { display: none; }
.file-chip { padding: 0 4px 0 6px; gap: 2px; }
.file-chip-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 100%; }
.file-chip .tag { flex: none; }
.file-chip .tag.img, .file-chip .tag.doc { background: var(--info-soft); color: var(--info); }
.file-chip .tag.xls { background: var(--success-soft); color: var(--success); }
.file-chip .tag.ppt { background: var(--warning-soft); color: var(--warning); }
.file-chip .tag.link, .file-chip .tag.other { background: var(--g-100); color: var(--g-600); }
.file-remove { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--g-400); transition: background .25s, color .25s; }
.file-remove:hover { background: var(--danger-soft); color: var(--danger); }
.file-add { background: transparent; cursor: pointer; }
.file-add.is-compact { height: 28px; padding: 0 10px; font-size: 12.5px; }
.file-add.is-quiet { border-color: transparent; }
.file-type.img, .file-type.doc { color: var(--info); }
.file-type.xls { color: var(--success); }
.file-type.ppt { color: var(--warning); }
.file-info .file-title { display: block; }
.file-note-input { display: block; width: 100%; padding: 0; border: 0; background: transparent; outline: none; font: 400 12.5px var(--sans); color: var(--g-500); }
.file-note-input::placeholder { color: var(--g-300); }
.file-note-input:focus { color: var(--g-900); }

/* ---------- Link do cliente (janela) ---------- */
.link-dialog { display: flex; flex-direction: column; gap: 14px; transition: opacity .2s; }
.link-dialog.is-busy { opacity: .55; pointer-events: none; }
.link-status { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--g-900); }
.link-status .ic { font-size: 16px; color: var(--g-400); }
.link-status.is-error .ic { color: var(--danger); }
.link-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(63, 122, 92, .16); }
.link-dot.is-off { background: var(--g-300); box-shadow: none; }
.link-url { display: block; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--g-200); font: 400 12px/1.5 var(--mono); color: var(--g-700); overflow-wrap: anywhere; user-select: all; }
.link-more-options { padding-top: 12px; border-top: 1px dashed var(--dash); }
.link-more-options summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--g-500); cursor: pointer; list-style: none; }
.link-more-options summary::-webkit-details-marker { display: none; }
.link-more-options summary:hover { color: var(--g-900); }
.link-more-options summary .ic { font-size: 14px; transform: rotate(-90deg); transition: transform .3s var(--ease); }
.link-more-options[open] summary .ic { transform: none; }
.link-options { display: grid; gap: 6px; margin-top: 10px; }
.link-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--g-50); }
.link-option-text { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; color: var(--g-500); }
.link-option-text strong { font-size: 14px; font-weight: 500; color: var(--g-900); }
.link-option .btn { flex: none; color: var(--danger); }
.link-option .btn:hover { background: var(--danger-soft); }

/* ---------- Painel do escritório ---------- */
.dash .kpis { margin-top: 56px; }
.proj-row { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.proj-name > span:last-child { min-width: 0; }
.proj-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-day { border: 0; background: none; font: inherit; cursor: pointer; }
.month-head .link-underline { font-size: 12.5px; font-weight: 500; color: var(--g-600); cursor: pointer; }
.board-card { width: 100%; text-align: left; font: inherit; color: inherit; }

/* Agenda do painel: um quadro só, mês à esquerda, dias à direita. */
.agenda-board { border-radius: 28px; box-shadow: var(--sh-2); }
.agenda-board-head { padding: 18px 24px; }
.agenda-board-head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.agenda-board-head .eyebrow { color: var(--g-900); }
.agenda-split { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.agenda-side { display: grid; align-content: start; gap: 22px; padding: 22px 24px 26px; background: var(--g-25); border-right: 1px solid var(--g-100); }
.agenda-side .month-head { align-items: center; margin-bottom: 12px; }
.agenda-side .month-head .h5 span { font-weight: 300; color: var(--g-400); }
.month-nav { display: flex; gap: 2px; }
.mini-day { flex-direction: column; gap: 2px; }
.mini-day.past:not(.today) { color: var(--g-400); }
.mini-dots { position: absolute; bottom: 3px; left: 50%; display: flex; gap: 2px; transform: translateX(-50%); }
.mini-dots i { width: 4px; height: 4px; border-radius: 50%; }
.mini-day.today .mini-dots i { box-shadow: 0 0 0 1px #fff; }
.agenda-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 16px; border-top: 1px dashed var(--dash); }
.agenda-legend .mono-label { width: 100%; margin-bottom: 4px; }
.agenda-list { min-width: 0; max-height: 520px; overflow-y: auto; }
.agenda-day { border-bottom: 1px solid var(--g-100); }
.agenda-day:last-child { border-bottom: 0; }
.agenda-day-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 14px 20px 8px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.agenda-day-head b { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.agenda-day-head strong { display: block; font-size: 14px; font-weight: 600; }
.agenda-day-head small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--g-400); }
.agenda-day.is-today .agenda-day-head b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--g-900); color: #fff; font-size: 18px; }
.agenda-day-items .event-row { padding-left: 74px; }
.agenda-day-items .event-row:hover { padding-left: 78px; }
.agenda-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 28px; text-align: center; }
.agenda-empty .icon-tile { width: 52px; height: 52px; border-radius: 16px; font-size: 22px; color: var(--g-500); background: var(--g-50); border: 1px dashed var(--g-300); }
.agenda-empty strong { font-size: 15px; font-weight: 600; }
.agenda-empty p { max-width: 300px; font-size: 13px; color: var(--g-500); }
.agenda-next { width: min(460px, 100%); margin-top: 8px; text-align: left; }
.agenda-next .mono-label { display: block; margin-bottom: 6px; text-align: center; }
.agenda-next .event-row { border: 1px solid var(--g-150); border-radius: 16px; background: #fff; }
.agenda-board-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 24px 14px; border-top: 1px solid var(--g-100); }
.agenda-board-foot .link-underline { font-size: 13px; font-weight: 500; cursor: pointer; }
@media (max-width: 900px) {
  .agenda-split { grid-template-columns: 1fr; }
  .agenda-side { border-right: 0; border-bottom: 1px solid var(--g-100); }
  .agenda-list { max-height: none; }
}
@media (max-width: 720px) {
  .agenda-day-items .event-row { padding-left: 16px; }
  .agenda-day-items .event-row:hover { padding-left: 20px; }
  .agenda-board-foot .mono-label { display: none; }
}
.card-head .link-underline { cursor: pointer; }

/* ---------- Calendário ---------- */
.calendar-sec { border-top: 0; padding-top: 0; }
.cal-toolbar .cal-legend { margin-top: 0; }
.cal .day { outline: none; }
.cal .day:focus-visible { box-shadow: inset 0 0 0 2px var(--g-900); }
.ev-wrap { display: block; }
.ev { width: 100%; text-align: left; font: inherit; font-size: 10.5px; color: var(--g-800); cursor: pointer; }
.ev-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev.is-done .ev-title { text-decoration: line-through; color: var(--g-400); }
.ev-wrap .rt-panel { left: 50%; }
.cal .day:nth-child(7n) .ev-wrap .rt-panel, .cal .day:nth-child(7n + 6) .ev-wrap .rt-panel { left: auto; right: -8px; transform: translate(0, 8px) scale(.97); }
.cal .day:nth-child(7n) .ev-wrap:hover .rt-panel, .cal .day:nth-child(7n + 6) .ev-wrap:hover .rt-panel { transform: none; }
.cal .day:nth-child(7n + 1) .ev-wrap .rt-panel { left: -8px; transform: translate(0, 8px) scale(.97); }
.cal .day:nth-child(7n + 1) .ev-wrap:hover .rt-panel { transform: none; }
.ev-more { display: block; margin-top: 4px; padding-left: 7px; font-size: 10.5px; color: var(--g-500); }
@media (max-width: 1100px) { .ev .t { display: none; } }
.cal.slide-next .day:not(.dow) { animation: calNext .45s var(--ease); }
.cal.slide-prev .day:not(.dow) { animation: calPrev .45s var(--ease); }
@keyframes calNext { from { opacity: 0; transform: translateX(14px); } }
@keyframes calPrev { from { opacity: 0; transform: translateX(-14px); } }
.legend-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 12.5px; color: var(--g-600); border: 1px solid transparent; cursor: pointer; transition: border-color .25s, color .25s; }
.legend-chip:hover { color: var(--g-900); border-color: var(--g-200); }
.legend-chip.is-current { color: var(--g-900); border-color: var(--g-900); }
.cal-panels .card-head .mono-label { color: rgba(255, 255, 255, .45); }
.event-view { display: grid; gap: 12px; }
.event-note { font-size: 15px; line-height: 1.6; color: var(--g-800); white-space: pre-wrap; }

/* ---------- Orçamentos ---------- */
.budget-now { padding-bottom: 28px; }
.budget-kpis .numeral small.of { margin: 0 0 0 2px; font-size: .42em; font-weight: 400; letter-spacing: 0; color: var(--g-400); }
.kpi-link { margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--g-900); cursor: pointer; }
.categories { display: flex; flex-direction: column; }
.cat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cat-head .cat-name { flex: 1; min-width: 180px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cat-name-input { flex: 0 1 auto; min-width: 80px; max-width: 100%; padding: 0; border: 0; border-bottom: 1px dashed transparent; background: transparent; outline: none; font: 600 18px/1.35 var(--sans); letter-spacing: -.012em; color: #fff; field-sizing: content; transition: border-color .25s; }
.cat-name-input:hover, .cat-name-input:focus { border-bottom-color: rgba(255, 255, 255, .35); }
.cat-head .h5 small { margin-left: 0; }
.cat-head .row-grip { margin-left: -12px; color: rgba(255, 255, 255, .4); opacity: 1; }
.cat-head .row-grip:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.cat-actions { display: inline-flex; align-items: center; gap: 2px; }
.move-btns { display: none; }
.btn.is-disabled { opacity: .3; pointer-events: none; }
.cat.is-dragging { box-shadow: var(--sh-4); }

.quotes .list-empty { padding: 18px 24px; }
.quote-row .supplier { position: relative; min-width: 0; }
.quote-row .row-grip { position: absolute; left: -26px; top: 2px; }
.cat:hover .quote-row .row-grip { opacity: 1; }
.budgets:not(.is-readonly) .quote-row:hover { padding-left: 24px; background: transparent; }
.supplier-input { display: block; width: 100%; padding: 0; border: 0; border-bottom: 1px dashed transparent; background: transparent; outline: none; font: 600 16px/1.4 var(--sans); letter-spacing: -.015em; color: var(--g-900); transition: border-color .25s; }
.supplier-input::placeholder { color: var(--g-300); }
.note-input { display: block; width: 100%; min-height: 0; margin-top: 2px; padding: 0; border: 0; border-bottom: 1px dashed transparent; background: transparent; resize: none; outline: none; overflow: hidden; font: 400 13px/1.5 var(--sans); color: var(--g-500); transition: border-color .25s; }
.note-input::placeholder { color: var(--g-300); }
.supplier-input:hover, .supplier-input:focus, .note-input:hover, .note-input:focus { border-bottom-color: var(--g-300); }
.value { display: flex; align-items: baseline; }
.value-input { width: 100%; min-width: 0; padding: 0; border: 0; border-bottom: 1px dashed transparent; background: transparent; outline: none; font: 600 24px/1.2 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--g-900); transition: border-color .25s; }
.value-input:hover, .value-input:focus { border-bottom-color: var(--g-300); }
.quote-row.is-closed .value-input { color: var(--success); }
.received-input { margin-top: 2px; padding: 2px 6px; border: 1px dashed var(--g-300); border-radius: 7px; background: rgba(255, 255, 255, .6); font: 500 11px var(--mono); color: var(--g-700); outline: none; }
.received-input:focus { border-color: var(--g-900); border-style: solid; }
.quote-row .act { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.quote-row.is-highlight { animation: rowFlash 2.2s var(--ease); }

/* Fechado em destaque: faixa verde à esquerda, fundo sálvia leve e selo
   "Contratado". Os outros orçamentos da mesma categoria ficam apagados. */
.quote-row.is-closed { background: linear-gradient(90deg, var(--success-soft) 0%, rgba(238, 244, 240, .45) 55%, rgba(238, 244, 240, 0) 100%); box-shadow: inset 3px 0 0 var(--success); }
.budgets .quote-row.is-closed:hover, .budgets:not(.is-readonly) .quote-row.is-closed:hover { background: linear-gradient(90deg, var(--success-soft) 0%, rgba(238, 244, 240, .6) 60%, rgba(238, 244, 240, .1) 100%); }
.quote-row.is-closed .value { color: var(--success); }
.quote-row.is-other { opacity: .55; transition: opacity .3s; }
.quote-row.is-other:hover, .quote-row.is-other:focus-within { opacity: 1; }
.quote-row .supplier > .choice-tag { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--g-100); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--g-500); }
.quote-row .supplier > .choice-tag.is-closed { background: var(--success); color: #fff; box-shadow: 0 6px 14px -8px rgba(63, 122, 92, .7); }
.quote-row .supplier > .choice-tag .ic { font-size: 12px; }
@keyframes rowFlash { 0%, 40% { background: var(--warning-soft); } 100% { background: transparent; } }

/* Detalhes do orçamento: fechamento, prazo, contato */
.quote-details, .quote-extra { grid-column: 1 / -1; }
.details-toggle { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 0; font-size: 12.5px; color: var(--g-500); text-align: left; cursor: pointer; transition: color .25s; }
.details-toggle:hover { color: var(--g-900); }
.details-toggle .chev { flex: none; font-size: 14px; transform: rotate(-90deg); transition: transform .35s var(--ease); }
.quote-details.is-open .details-toggle .chev { transform: none; }
.qd-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.quote-details.is-open .qd-collapse { grid-template-rows: 1fr; }
.qd-collapse > div { min-height: 0; overflow: hidden; }
.qd-body { display: grid; gap: 18px; padding: 12px 0 6px; max-width: 760px; }
.qd-body > .field { max-width: 240px; }
.qd-group { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--g-25); border: 1px solid var(--g-100); }
.qd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.qd-exec-inputs .field { max-width: 360px; }
.quote-extra { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 28px; padding-top: 4px; }
.qfact small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--g-400); }
.qfact span { font-size: 13.5px; color: var(--g-800); }
.contact-card { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--g-50); border: 1px solid var(--g-100); }
.contact-card small { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--g-400); }
.contact-card strong { font-size: 14px; font-weight: 600; }
.contact-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.contact-links .ic { font-size: 15px; }
.contact-note { font-size: 12.5px; color: var(--g-500); }
.add-cat-wrap { margin-top: 24px; }

/* Resumo dos fechados */
.closed-summary { display: grid; }
.closed-row { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 16px 2px; align-items: start; }
.closed-row:hover { padding-left: 10px; }
.closed-main { display: grid; gap: 2px; min-width: 0; }
.closed-main strong { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.closed-note { font-size: 13px; color: var(--g-500); }
.closed-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; }
.closed-side { display: grid; justify-items: end; gap: 8px; }
.closed-side .value { color: var(--success); font-size: 20px; }
.closed-side .link-underline { font-size: 12.5px; font-weight: 500; cursor: pointer; }
.closed-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 6px; padding-top: 16px; border-top: 1.5px solid var(--g-900); }

/* ---------- Entrada ---------- */
.gate-top .office { gap: 12px; }
.login-card { display: grid; }
.login-card .logo-mark { margin-bottom: 0; }
.login-card .btn-outline .google-mark { display: inline-flex; }
.gate-form { display: grid; gap: 8px; }
.gate-form .btn { margin-top: 10px; }
.gate-feedback { font-size: 13px; line-height: 1.5; color: var(--g-600); }
.gate-feedback:empty { display: none; }
.gate-feedback:not(:empty) { margin-top: 14px; }
.gate-feedback.is-ok { color: var(--success); }
.gate-feedback.is-error { color: var(--danger); }
.gate.is-message { min-height: 100vh; }
.gate-center { position: relative; z-index: 3; flex: 1; display: grid; place-items: center; padding: 24px var(--gutter) 96px; }
.gate-center .login-card { width: min(440px, 100%); gap: 4px; }
.gate-center .login-card .h4 { margin: 18px 0 2px; }
.gate-center .login-card .body-sm { margin-bottom: 0; font-size: 14px; }
.gate-center .login-card .btn { margin-top: 22px; }
.ribbon.r1 { animation: marquee 80s linear infinite; }
.ribbon.r2 { animation: marquee 110s linear infinite reverse; }

/* ---------- Arquivos ---------- */
.files-sec { border-top: 0; padding-top: 0; }
.files-toolbar { display: grid; gap: 14px; margin-bottom: 24px; }
.files-search { max-width: 460px; height: 46px; background: #fff; border-color: var(--g-150); box-shadow: var(--sh-1); }
.files-search input::-webkit-search-cancel-button { cursor: pointer; }
.folder-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.folder-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid var(--g-150); font: 500 13px var(--sans); color: var(--g-600); cursor: pointer; transition: all .3s var(--ease); }
.folder-chip:hover { border-color: var(--g-900); color: var(--g-900); }
.folder-chip.on { background: var(--g-900); border-color: var(--g-900); color: #fff; }
.folder-chip.on .count { background: rgba(255, 255, 255, .18); color: #fff; }
.folders { display: grid; gap: 18px; }
.folder-card { border-radius: 22px; }
.folder-head { gap: 14px; padding: 14px 18px 14px 20px; }
.folder-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.folder-title .h6 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-title .mono-label { flex: none; white-space: nowrap; }
.folder-num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--g-900); color: #fff; font: 500 11px var(--mono); letter-spacing: .04em; }
.folder-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--g-100); color: var(--g-700); font-size: 17px; }
.folder-name-input { min-width: 80px; padding: 2px 0; border: 0; border-bottom: 1px dashed transparent; background: transparent; outline: none; font: 600 15px var(--sans); letter-spacing: -.006em; color: var(--g-900); field-sizing: content; }
.folder-name-input:hover, .folder-name-input:focus { border-bottom-color: var(--g-300); }
.folder-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.folder-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; font-size: 13px; color: var(--g-500); }
.folder-note { display: flex; align-items: center; gap: 8px; padding: 10px 20px 14px; border-top: 1px solid var(--g-100); font-size: 12.5px; color: var(--g-500); }
.folder-card .file-meta { display: grid; justify-items: end; gap: 1px; }
.folder-card .file-info strong { white-space: normal; overflow-wrap: anywhere; }
.folder-card .file-meta small { font-size: 10px; letter-spacing: .02em; color: var(--g-300); }
.file-row.is-hidden { background: repeating-linear-gradient(-45deg, rgba(247, 247, 247, .9) 0 8px, rgba(255, 255, 255, .9) 8px 16px); }
.file-row.is-hidden .file-type { opacity: .55; }
.hidden-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--g-500); }
.hidden-badge .ic { font-size: 13px; }
.file-info .hidden-badge { display: flex; }
.vis-toggle.is-off { color: var(--warning); }
.file-row .file-actions { align-items: center; }
.move-select { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--g-600); cursor: pointer; transition: background .25s; }
.move-select:hover { background: var(--g-50); color: var(--g-900); }
.move-select select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 14px; }
.move-select .ic { font-size: 17px; }
.empty-folders { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--dash); }
.empty-folders .mono-label { margin-right: 6px; }
.file-chip.is-hidden { border-style: dashed; }
.file-chip .hidden-mark { font-size: 13px; color: var(--g-400); }
@media (max-width: 720px) {
  .files-search { max-width: none; }
  .folder-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .folder-chips::-webkit-scrollbar { display: none; }
  .folder-chip { flex: none; }
  .folder-head .lbl { display: none; }
  .folder-title .h6 { white-space: normal; }
  .folder-card .file-meta { display: none; }
  .folder-card .file-row { flex-wrap: wrap; }
  .folder-card .file-actions { opacity: 1; margin-left: 56px; }
  /* Menu do pé com 7 itens: um pouco menores para caber. */
  .app-rail nav { gap: 2px; }
  .rail-link, .rail-profile { width: 40px; height: 40px; }
  .rail-office { width: 34px; height: 34px; }
  .section-nav .seg a, .section-nav .seg button { flex: 1; justify-content: center; min-width: 0; padding: 0 4px; font-size: 12px; }
}

/* ---------- Primeiro acesso: boas-vindas e tutorial ---------- */
.welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.welcome-opt { position: relative; display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--g-150); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.welcome-opt:hover { border-color: var(--g-900); transform: translateY(-2px); box-shadow: var(--sh-3); }
.welcome-opt .badge { position: absolute; top: 18px; right: 18px; }
.welcome-opt .icon-tile { width: 46px; height: 46px; border-radius: 15px; font-size: 21px; margin-bottom: 6px; }
.welcome-opt strong { font-size: 16px; font-weight: 600; letter-spacing: -.012em; }
.welcome-opt > span:last-child { font-size: 13px; line-height: 1.55; color: var(--g-500); }
.welcome-opt.is-recommended { border-color: var(--g-300); background: linear-gradient(180deg, #fff, var(--g-25)); }
@media (max-width: 720px) { .welcome-grid { grid-template-columns: 1fr; } }

/* A luz do tutorial: o resto da tela escurece; o botão fica aceso. */
.tour { position: fixed; inset: 0; z-index: 120; animation: backdropIn .35s var(--ease); }
.tour.is-leaving { opacity: 0; transition: opacity .3s; }
.tour-shade { position: absolute; inset: 0; }
.tour-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(20, 20, 20, .45), 0 0 0 2px #fff, 0 0 0 6px rgba(255, 255, 255, .25); pointer-events: none; transition: top .45s var(--ease), left .45s var(--ease), width .45s var(--ease), height .45s var(--ease); }
.tour-card { position: fixed; display: grid; gap: 10px; padding: 20px 20px 16px; border-radius: 22px; box-shadow: var(--sh-4); transition: top .45s var(--ease), left .45s var(--ease); animation: popIn .45s var(--ease-spring); }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-skip { font-size: 12.5px; color: var(--g-500); cursor: pointer; }
.tour-skip:hover { color: var(--g-900); text-decoration: underline; }
.tour-card p { font-size: 14px; line-height: 1.55; color: var(--g-600); }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-200); transition: background .3s, width .3s; }
.tour-dots i.done { background: var(--g-500); }
.tour-dots i.on { width: 18px; border-radius: 3px; background: var(--g-900); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
body.is-touring .cursor { display: none; }

/* Projetos de exemplo */
.examples-note { margin: 0 0 20px; }
.examples-note:hover { transform: none; }
.examples-note .btn { flex: none; margin-left: auto; }
.example-tag { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--info-soft); color: var(--info); font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Perfil do escritório (janela) ---------- */
.logo-field { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 18px; background: var(--g-25); border: 1px dashed var(--g-200); }
.logo-preview { width: 84px; height: 84px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 20px; background: linear-gradient(160deg, #3A3A3A, var(--g-900)); color: #fff; font-size: 22px; font-weight: 600; box-shadow: var(--sh-2); }
.logo-preview.has-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--g-150), var(--sh-1); }
.logo-preview img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.logo-text { display: grid; gap: 4px; min-width: 0; }
.logo-text strong { font-size: 15px; font-weight: 600; }
.logo-text > span { font-size: 12.5px; color: var(--g-500); }
.logo-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---------- Pé da tela do cliente ---------- */
.foot-contacts { display: grid; gap: 12px; margin-top: 40px; }
.foot-contact-list { display: flex; flex-wrap: wrap; gap: 10px; }
.foot-contact { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); font-size: 13px; color: rgba(255, 255, 255, .85); transition: background .3s, border-color .3s; }
a.foot-contact:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.foot-contact .ic { font-size: 16px; }
.foot-kick { margin-bottom: 22px; }
.foot-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 36px; }
.foot-cta > span { font-size: 14px; color: rgba(255, 255, 255, .55); }
/* Selo "feito com Calendarq" (plano Grátis): pílula de vidro no canto,
   discreta, longe do aviso (que fica no centro). */
.made-with { position: fixed; z-index: 40; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 10px 28px -12px rgba(31, 31, 31, .28), 0 0 0 1px rgba(31, 31, 31, .06); font-size: 12px; color: var(--g-500); white-space: nowrap; animation: popIn .6s 1.2s var(--ease-spring) both; }
.mw-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--g-900); }
.made-with .mw-mark { font-size: 13.5px; }
@media (max-width: 720px) { .made-with { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: 30px; padding: 0 12px 0 10px; font-size: 11px; } .made-with .mw-mark { font-size: 12.5px; } }
@media print { .made-with { display: none; } }
.site .wm-light { color: #F0F0F0; }
.site .wm-dim { color: #6B6B6B; }
.app-foot .link-underline { color: inherit; }

/* =========================================================================
   9. TELAS MENORES
   ========================================================================= */
@media (max-width: 1280px) {
  .proj-row, .list-head { grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(120px, 1fr) 24px; }
  .proj-next, .list-head .h-next { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .sec-grid { gap: 32px; }
  .sec-aside { grid-column: span 12; }
  .sec-aside .sticky { position: static; }
  .sec-aside p { max-width: 520px; }
  .sec-body { grid-column: span 12; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid .lead { grid-column: span 12; }
  .hero-grid .actions { grid-column: span 7; }
  .hero-grid .spec { grid-column: span 5; }
  .gate-main { grid-template-columns: 1fr; }
  .guide-row { grid-template-columns: 48px minmax(0, 1fr); }
  .guide-row .you { grid-column: 2; }
}

@media (max-width: 900px) {
  .status-grid, .agenda-grid, .cal-panels { grid-template-columns: 1fr; }
  .quote-head { display: none; }
  .quote-row, .is-readonly .quote-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; }
  .quote-row .supplier { grid-column: 1 / -1; }
  .quote-row .act { position: absolute; top: 16px; right: 12px; }
  .quote-row { position: relative; }
  .cat-head { grid-template-columns: minmax(0, 1fr) auto; }
  .cat-head .deadline { grid-column: 1 / -1; justify-self: start; order: 3; }
  .budget-kpis { grid-template-columns: 1fr; gap: 12px; }
  .site .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comp-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .comp-row .who { grid-column: 2; grid-row: 2; }
}

/* Celular */
@media (max-width: 720px) {
  :root { --gutter: 16px; --topbar-h: 58px; }
  body { font-size: 14.5px; }
  .overlay-grid, .cursor { display: none; }

  /* Trilho vira barra inferior de vidro */
  .app .shell { padding-left: 0; padding-bottom: 92px; }
  .app-rail { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; height: 64px; flex-direction: row; justify-content: center; padding: 0 12px; border-radius: 22px; }
  .app-rail .logo-mark, .app-rail .push, .app-rail .sep { display: none; }
  .app-rail nav { flex-direction: row; gap: 6px; }
  .rail-link { width: 46px; height: 46px; }
  .rail-link[data-tip]::after, .rail-link[data-tip]::before { display: none; }

  .topbar .search-input, .topbar .btn .lbl, .office-role { display: none; }
  .topbar .btn { width: 40px; padding: 0; }
  .office-name { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .crumb { font-size: 13px; }
  .crumb .btn .lbl { display: none; }
  .crumb .btn { width: 34px; padding: 0; }

  .page-hero { padding: 28px 0 40px; }
  .kicker { margin-bottom: 18px; }
  .kicker .mono { font-size: 9.5px; letter-spacing: .2em; }
  .display { font-size: clamp(40px, 12.4vw, 64px); }
  .display .row { white-space: normal; }
  .hero-grid { gap: 20px; margin-top: 24px; }
  .hero-grid .actions, .hero-grid .spec { grid-column: span 12; text-align: left; }
  .ruler-block { margin-top: 36px; }
  .ruler-head .mono-label:last-child { display: none; }


  .sec { padding: 64px 0; }
  .sec.tight { padding: 48px 0; }
  .sec-head { flex-wrap: wrap; }
  .section-nav { padding-bottom: 36px; }
  .section-nav .seg { width: 100%; }
  .section-nav .seg a { flex: 1; justify-content: center; padding: 0 8px; font-size: 13px; }
  .section-nav .seg .ic { display: none; }

  .kpis { gap: 10px; }
  .kpi { padding: 16px; border-radius: 20px; }
  .kpi-top { margin-bottom: 14px; }
  .kpi .eyebrow { font-size: 9.5px; letter-spacing: .1em; }
  .numeral { font-size: 34px; }
  .list-head { display: none; }
  .proj-row { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 14px; padding: 18px 0; }
  .proj-row:hover { padding-left: 8px; }
  .proj-name { grid-column: 1; }
  .proj-row .chev { grid-column: 2; grid-row: 1; }
  .proj-stage, .proj-progress { grid-column: 1 / -1; }
  .board { grid-template-columns: 1fr; }

  .now-banner .inner { grid-template-columns: 1fr; padding: 24px 22px; }
  .now-banner .foot { padding: 14px 22px 18px; }
  .current-card { padding: 22px; }

  .tl-item { grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
  .tl-item::before { left: 9.5px; }
  .tl-node { width: 20px; }
  .tl-head { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px; }
  .tl-icon { display: none; }
  .tl-meta { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
  .tl-meta .files { display: none; }
  .tl-head .tl-chev { grid-column: 2; grid-row: 1; }
  .tl-body { margin: 0 16px; gap: 26px; }
  .add-stage { width: calc(100% - 30px); margin-left: 30px; }
  .fields-2 { grid-template-columns: 1fr; }
  .item-row .grip { display: none; }
  .item-row:has(.grip) { grid-template-columns: minmax(0, 1fr) auto auto; }
  .file-meta { display: none; }
  .msg { max-width: 100%; }
  .review-box { grid-template-columns: auto minmax(0, 1fr); }
  .review-box .btn { grid-column: 1 / -1; justify-self: start; }

  .stepper-wrap { overflow-x: auto; scrollbar-width: none; }
  .stepper-wrap::-webkit-scrollbar { display: none; }
  .stepper { width: 720px; }

  .guide { padding: 22px 18px; }
  .guide-top { grid-template-columns: 1fr; }
  .guide-row { grid-template-columns: 1fr; gap: 12px; }
  .guide-row .num { display: none; }
  .guide-row .you { grid-column: 1; }
  .guide-legend { grid-template-columns: 1fr; }

  .cal .dow { padding: 8px 0; text-align: center; font-size: 9px; letter-spacing: .04em; }
  .cal .day { min-height: 58px; padding: 6px 2px; text-align: center; }
  .cal .day .ev { display: none; }
  .cal .dots { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
  .cal .dots .pdot { width: 5px; height: 5px; }

  .cat-head { padding: 14px 16px; }
  .quote-row { padding: 18px 16px; }
  .quote-row:hover { padding-left: 20px; }
  .value { font-size: 22px; }

  .site .inner { padding-top: 64px; }
  .foot-mark { font-size: 15vw; white-space: normal; line-height: .95; }
  .client-top .mono-label { display: none; }
  .client-top { gap: 10px; }
  .client-top .btn .ic { display: none; }
  .client-top .btn { padding: 0 12px; font-size: 12.5px; }
  .comp-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
  .comp-row strong { grid-column: 2; grid-row: 1; }
  .comp-row .badge { grid-column: 3; grid-row: 1; }
  .comp-row .who { grid-column: 2 / -1; grid-row: 2; }
  .comp-row .btn { display: none; }
  .status-line .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cal .day .rich-tip { display: none !important; }
  .module-grid { grid-template-columns: 1fr; }
  .link-box .url { font-size: 11px; }
  .site .cols { grid-template-columns: 1fr; margin-top: 40px; }
  .toc { grid-template-columns: 1fr; }
  .gate .display { font-size: clamp(46px, 13vw, 72px); }
  .login-card { padding: 26px 22px; }
  .modal-panel { padding: 22px; border-radius: 22px; }
  .dialog { padding: 10px; }
  body.app .toast { bottom: 92px; }

  /* Peças do app no celular */
  .topbar .lbl, .kicker-edit .lbl { display: none; }
  .topbar .link-action .btn { width: 40px; padding: 0; }
  .topbar .link-action .link-more { width: 30px; }
  .kicker { flex-wrap: wrap; row-gap: 8px; }
  .kicker .line { display: none; }
  .crumb-select { max-width: 52vw; }
  body.is-preview .topbar { top: 0; }
  .preview-bar { position: relative; }
  .tl-card.is-editable .tl-head { padding-left: 40px; }
  .tl-grip { top: 18px; left: 8px; opacity: 1; }
  .item-row .row-grip { display: none; }
  .comp-toggle { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 4px; }
  .comp-toggle .who { grid-column: 1 / -1; grid-row: 2; }
  .comp-body { padding: 4px 16px 18px; }
  .stage-foot { align-items: flex-start; }
  .stage-foot .group { width: 100%; }
  .link-option { flex-wrap: wrap; }
  .steps-card { padding: 22px 18px; }
  .now-banner .inner .beam-btn { justify-self: start; }
  .foot-cta { gap: 16px; }
  .approval { flex-wrap: wrap; }
  .approval .btn { margin-left: 60px; }

  /* Orçamentos no celular: setas no lugar de arrastar. */
  .move-btns { display: inline-flex; gap: 2px; }
  .budgets .row-grip { display: none; }
  .budgets:not(.is-readonly) .quote-row .supplier { padding-right: 112px; }
  .budgets:not(.is-readonly) .quote-row:hover { padding-left: 16px; }
  .cat-head .cat-name { min-width: 0; flex-basis: 100%; }
  .cat-actions { margin-left: auto; }
  .closed-row { grid-template-columns: 1fr; }
  .closed-side { justify-items: start; grid-auto-flow: column; align-items: baseline; justify-content: space-between; }
}


/* =========================================================================
   10. MENOS MOVIMENTO
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .motion-enter, .animate-on-scroll { opacity: 1 !important; }
  .clip-enter { clip-path: none !important; transform: none !important; }
  .text-reveal-content { transform: none !important; opacity: 1 !important; }
  .veil, .cursor { display: none; }
  body::after { display: none; }
}


/* =========================================================================
   11. IMPRESSÃO (botão "Gerar PDF")
   O PDF é a visão do cliente, em papel: sem menus, botões, conversa nem
   movimento; todas as etapas abertas; fundo branco; quebras de página que
   não cortam um cartão no meio.
   ========================================================================= */
.print-head { display: none; }

@page { size: A4; margin: 14mm 12mm 16mm; }

@media print {
  html, body { background: #fff !important; }
  body { font-size: 11pt; color: var(--g-900); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::after, .overlay-grid, .cursor, .veil, .toast, .tour, dialog,
  .app-rail, .topbar, .preview-bar, .storage-warning, .crumb, .section-nav,
  .section-bg, .reg-cross, .hero-spot, .hero-grid .actions, .kicker-edit,
  .ruler-block, .now-banner .foot, .now-banner .beam-btn, .guide-card, .guide-slot, .guide,
  .block-chat, .composer, .picker, .stage-foot, .tl-grip, .tl-chev, .row-grip, .add-row, .add-stage,
  .file-actions, .file-add, .file-remove, .details-toggle, .site .foot-cta, .site .marquee-wrap,
  .foot-zero, .app-foot, .files-toolbar, .empty-folders, .move-btns, .cat-actions, .act,
  .rt-panel, .r-tip, .folder-actions, .folder-note, .kpi-link, .steps-head .badge,
  .card-head .link-underline, .event-row .chev, .notice > .ic:last-child, .check-round { display: none !important; }

  /* Tudo aparece pronto: sem entrada animada, sem vidro (impressoras não desfocam). */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-enter, .animate-on-scroll { opacity: 1 !important; }
  .text-reveal-content { transform: none !important; opacity: 1 !important; }
  .glass, .glass-strong, .glow-card, .spec-card, .card, .now-banner, .kpi, .tl-card, .current-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
  .glow-card::before, .glow-card::after, .spec-card::before, .spec-card::after, .btn-primary::before { display: none !important; }
  .glass, .glow-card, .spec-card, .tl-card, .current-card, .kpi { background: #fff !important; border: 1px solid var(--g-200) !important; }
  .app .shell, .client .shell { padding: 0 !important; }
  .wrap { max-width: none; padding: 0 !important; }
  .sec, .sec.tight { padding: 18pt 0 0 !important; border-top: 0 !important; background: none !important; }
  .page-hero { padding: 8pt 0 10pt !important; }

  /* Cabeçalho do papel */
  .print-head { display: flex !important; align-items: center; justify-content: space-between; gap: 20pt; padding-bottom: 10pt; margin-bottom: 6pt; border-bottom: 1.5pt solid var(--g-900); }
  .print-office { display: flex; align-items: center; gap: 10pt; }
  .print-office strong { display: block; font-size: 12pt; }
  .print-office span { font-size: 9pt; color: var(--g-500); }
  .print-meta { display: grid; justify-items: end; gap: 1pt; text-align: right; font-size: 8.5pt; color: var(--g-500); }
  .print-meta strong { font-size: 11pt; color: var(--g-900); }
  .print-meta > span:first-child { font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; }

  /* Abertura menor no papel */
  .display { font-size: 30pt !important; line-height: 1 !important; }
  .kicker { margin-bottom: 8pt; }
  .hero-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14pt !important; margin-top: 10pt !important; }
  .hero-grid .lead, .hero-grid .spec-card { grid-column: auto !important; }
  .lead { font-size: 10.5pt; }
  .hero-docs { margin-top: 10pt; }

  /* "O que você precisa fazer agora" vira um quadro com borda grossa. */
  .now-banner { background: #fff !important; color: var(--g-900) !important; border: 1.5pt solid var(--g-900) !important; }
  .now-banner .eyebrow, .now-banner .now-more { color: var(--g-500) !important; }
  .now-banner .inner { padding: 12pt 14pt !important; }
  .now-banner .now-text { font-size: 15pt !important; }
  .project-top .status-grid { margin-bottom: 0 !important; }

  /* Linha do tempo: todas as etapas abertas, sem o fio que corre ao lado. */
  .tl-collapse { grid-template-rows: 1fr !important; }
  .tl-collapse > div { overflow: visible !important; }
  .tl-body { opacity: 1 !important; transform: none !important; filter: none !important; padding: 10pt 0 !important; }
  .tl-item { break-inside: avoid-page; }
  .tl-item::before { display: none; }
  .tl-head { padding: 10pt 12pt !important; }
  .tl-card.is-editable .tl-head { padding-left: 12pt !important; }
  .stepper-wrap { overflow: visible !important; }
  .stepper { width: auto !important; }
  .steps-card { break-inside: avoid; }

  /* Listas e cartões não se partem no meio da página. */
  .event-row, .file-row, .quote-row, .item-row, .review-box, .approval, .kpi, .contact-card { break-inside: avoid; }
  .cat, .folder-card, .agenda-card, .current-card { break-inside: auto; }
  .cat-head, .folder-head, .card-head { break-after: avoid; }
  .card-head.is-dark, .cat-head { background: var(--g-900) !important; color: #fff !important; }
  .quote-row.is-other { opacity: .6 !important; }

  /* Calendário: grade inteira numa página, sem as explicações que abrem no mouse. */
  .cal { break-inside: avoid; border-color: var(--g-300) !important; }
  .cal .day { min-height: 70pt !important; }
  .cal-panels { break-before: auto; }

  /* Pé: só a marca do escritório e os contatos, em fundo claro. */
  .site { background: #fff !important; color: var(--g-900) !important; border-top: 1pt solid var(--g-200); }
  .site .inner { padding: 14pt 0 0 !important; }
  .foot-mark { font-size: 20pt !important; }
  .foot-mark .fch { font-weight: 700 !important; }
  .site .mono-label, .site .cols { color: var(--g-500) !important; }
  .foot-contact { border-color: var(--g-200) !important; color: var(--g-800) !important; background: #fff !important; }
  a { text-decoration: none; }
}

/* =========================================================================
   12. OBRA (protótipo — versão de teste "teste-obras")
   Peças do Design System aplicadas ao cronograma da obra: grafite = pronto,
   hachurado = acontecendo, cinza claro = a fazer (as mesmas regras da
   régua de etapas); faixa grafite para o que o cliente precisa fazer.
   ========================================================================= */

/* Avisos no topo da seção */
.proto-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 8px; padding: 12px 16px; border-radius: 14px; background: var(--info-soft); color: var(--info); font-size: 13px; line-height: 1.45; }
.proto-note > .ic { font-size: 18px; flex: none; }
.proto-note .txt { flex: 1; min-width: 220px; }
.proto-note .link-underline { font-weight: 500; }
.proto-note.is-preview { background: var(--g-50); color: var(--g-600); border: 1px dashed var(--g-300); }
.publish-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--warning-soft); color: var(--warning); font-size: 13.5px; }
.publish-bar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); animation: pulseRingWarn 1.8s ease-out infinite; }
.publish-bar .txt { flex: 1; min-width: 200px; }
.publish-bar .muted { opacity: .75; }

/* Obra ainda não montada: dois caminhos */
.obra-start { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
.obra-start.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.obra-start.is-three .obra-start-card { padding: 30px; }
.obra-start.is-three .obra-start-card strong { font-size: 22px; }
@media (max-width: 1100px) { .obra-start.is-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .obra-start.is-three .is-main { grid-column: 1 / -1; } }
@media (max-width: 720px) { .obra-start.is-three { grid-template-columns: minmax(0, 1fr); } }
.template-preview { display: grid; gap: 10px; }
.template-preview .review-list { max-height: 300px; overflow-y: auto; }
.obra-start-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 34px; border-radius: 24px; background: #fff; border: 1px solid var(--g-150); text-align: left; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.obra-start-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(31, 31, 31, .35); }
.obra-start-card strong { font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.obra-start-card > span:not(.mono-label):not(.go):not(.icon-tile) { max-width: 440px; font-size: 14px; line-height: 1.6; color: var(--g-500); }
.obra-start-card .go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 500; }
.obra-start-card .go .ic { transition: transform .35s var(--ease); }
.obra-start-card:hover .go .ic { transform: translateX(4px); }
.obra-start-card .icon-tile { font-size: 24px; }
.obra-start-card.is-main { border-color: transparent; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #3A3A3A 0%, var(--g-900) 45%, var(--g-950) 100%); }
.obra-start-card.is-main .icon-tile { background: rgba(255, 255, 255, .1); color: #fff; }
.obra-start-card.is-main .mono-label { color: rgba(255, 255, 255, .5); }
.obra-start-card.is-main > span:not(.mono-label):not(.go):not(.icon-tile) { color: rgba(255, 255, 255, .62); }

/* Atenções de hoje */
.alert-list { border-radius: 22px; }
.alert-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border-bottom: 1px solid var(--g-100); text-align: left; transition: background .25s, padding .4s var(--ease); }
.alert-row:last-of-type { border-bottom: 0; }
.alert-row:hover { background: var(--g-25); padding-left: 22px; }
.alert-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 18px; background: var(--g-100); color: var(--g-700); }
.alert-row.is-danger .alert-ic { background: var(--danger-soft); color: var(--danger); }
.alert-row.is-warn .alert-ic { background: var(--warning-soft); color: var(--warning); }
.alert-row.is-info .alert-ic { background: var(--info-soft); color: var(--info); }
.alert-row.is-ok .alert-ic { background: var(--success-soft); color: var(--success); }
.alert-row .info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.alert-row .title { font-size: 14px; font-weight: 500; line-height: 1.35; }
.alert-row .sub { font-size: 12px; line-height: 1.45; color: var(--g-500); }
.alert-row .chev { flex: none; font-size: 16px; color: var(--g-300); transition: transform .4s var(--ease), color .25s; }
.alert-row:hover .chev { transform: translateX(4px); color: var(--g-900); }
/* Cada aviso pode trazer o porquê e as saídas (13/10). */
.alert-item { border-bottom: 1px solid var(--g-100); }
.alert-item:last-of-type { border-bottom: 0; }
.alert-item .alert-row { border-bottom: 0; }
.alert-why { display: grid; gap: 10px; padding: 0 18px 14px 68px; }
.alert-why p { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--g-600); }
.alert-why p .ic { flex: none; margin-top: 2px; font-size: 14px; color: var(--g-400); }
.alert-fixes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) { .alert-why { padding-left: 18px; } }
.alert-more { padding: 12px 18px; border-top: 1px solid var(--g-100); font-size: 12px; color: var(--g-500); }
.alert-calm { display: flex; align-items: center; gap: 16px; padding: 24px; border-radius: 22px; }
.alert-calm > .ic { flex: none; font-size: 26px; color: var(--success); }
.alert-calm strong { display: block; font-size: 15px; font-weight: 600; }
.alert-calm span { font-size: 13px; color: var(--g-500); }
.alert-legend { display: grid; gap: 8px; font-size: 12.5px; color: var(--g-600); }
.alert-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
.alert-legend .is-danger { background: var(--danger); }
.alert-legend .is-warn { background: var(--warning); }
.alert-legend .is-done { background: var(--g-900); }
.alert-legend .is-now { background: repeating-linear-gradient(-45deg, var(--g-900) 0 2px, var(--g-200) 2px 4px); }
.alert-legend .is-wait { background: var(--g-150); box-shadow: inset 0 0 0 1px var(--g-300); }

/* Cabeçalho e ferramentas do cronograma */
.gantt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.gantt-head .sec-index { display: block; margin-bottom: 14px; }
.gantt-head .sec-title { margin: 0; }
.gantt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gantt-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.obra-select { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--g-150); background: rgba(255, 255, 255, .7); font-size: 13px; color: var(--g-500); }
.obra-select select { appearance: none; -webkit-appearance: none; padding: 0; border: 0; outline: none; background: transparent; font: 500 13px var(--sans); color: var(--g-900); cursor: pointer; }
.gantt-hint { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--g-500); }
.gantt-hint .ic { flex: none; font-size: 15px; }

/* O Gantt */
/* "clip" em vez de "hidden": recorta as bordas sem virar área de rolagem,
   para a faixa de datas conseguir ficar presa no alto da tela. */
.gantt-sec { overflow: clip; }
.og-card { --og-name: 310px; overflow: clip; border-radius: 22px; }
.og-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
.og-grid { position: relative; }
.og-headbar { position: sticky; top: var(--topbar-h); z-index: 6; display: flex; background: #fff; border-bottom: 1px solid var(--g-150); box-shadow: 0 8px 16px -14px rgba(31, 31, 31, .35); }
.og-corner { flex: none; width: var(--og-name); display: flex; align-items: flex-end; padding: 0 16px 12px 20px; background: #fff; border-right: 1px solid var(--g-150); }
.og-headview { flex: 1; min-width: 0; overflow: hidden; }
.og-scale { position: relative; height: 78px; will-change: transform; }
.og-months span { position: absolute; top: 0; height: 26px; padding: 8px 8px 0; border-left: 1px solid var(--g-150); font-size: 11.5px; font-weight: 500; text-transform: capitalize; color: var(--g-700); white-space: nowrap; overflow: hidden; }
.og-num { position: absolute; top: 28px; height: 22px; display: grid; place-items: center; font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--g-700); }
.og-num.is-off { color: var(--g-300); }
.og-num.is-today { color: var(--g-950); font-weight: 700; }
.og-week { position: absolute; top: 28px; height: 22px; padding: 4px 6px 0; border-left: 1px solid var(--g-150); font: 400 10px var(--mono); letter-spacing: .04em; color: var(--g-500); }
.og-letter { position: absolute; top: 52px; height: 22px; display: grid; place-items: center; font: 500 10px var(--mono); color: var(--g-600); }
.og-letter.is-weekend { color: var(--g-300); background: rgba(31, 31, 31, .035); }
.og-letter.is-holiday { color: var(--warning); background: rgba(148, 104, 31, .08); }
.og-letter.is-today { border-radius: 6px; background: var(--g-900); color: #fff; }
.og-body { position: relative; }
.og-bg-wrap { position: absolute; top: 0; bottom: 0; left: var(--og-name); z-index: 0; pointer-events: none; }
.og-bg { position: relative; height: 100%; }
.og-off { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, rgba(31, 31, 31, .04) 0 4px, transparent 4px 8px); }
.og-off.is-holiday { background: repeating-linear-gradient(-45deg, rgba(148, 104, 31, .1) 0 4px, transparent 4px 8px); }
.og-today, .og-deadline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--g-900); }
.og-deadline { border-left: 1.5px dashed var(--danger); }
.og-today i, .og-deadline i { position: absolute; bottom: 6px; left: 5px; padding: 1px 5px; border-radius: 5px; background: var(--g-900); color: #fff; font: 500 8.5px var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.og-deadline i { background: var(--danger); }
.og-row { position: relative; z-index: 1; display: flex; min-height: 46px; border-bottom: 1px solid var(--g-100); }
.og-row:hover > .og-track { background: rgba(31, 31, 31, .018); }
.og-name { position: sticky; left: 0; z-index: 2; flex: none; width: var(--og-name); display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; background: #fff; border-right: 1px solid var(--g-150); }
.og-grip { flex: none; width: 22px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--g-300); cursor: grab; touch-action: none; transition: color .25s, background .25s; }
.og-grip:hover, .og-grip:focus-visible { color: var(--g-900); background: var(--g-100); }
.og-grip:active { cursor: grabbing; }
.og-grip .ic { font-size: 16px; }
.og-grip.is-off { visibility: hidden; }
.og-row.is-dragging { opacity: .4; }
.og-drop { position: absolute; left: 0; right: 0; z-index: 8; height: 0; border-top: 2px solid var(--g-900); pointer-events: none; }
.og-drop::before { content: ''; position: absolute; top: -6px; left: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--g-900); }
.og-mark.is-budget { color: var(--g-600); }
.og-row.is-phase { min-height: 56px; border-top: 1px solid var(--g-150); }
.og-row.is-phase, .og-row.is-phase .og-name { background: var(--g-25); }
.og-row.is-task .og-name { padding-left: 42px; }
.og-title { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; cursor: pointer; }
.og-title strong { overflow: hidden; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.og-task-name { overflow: hidden; font-size: 13px; color: var(--g-800); white-space: nowrap; text-overflow: ellipsis; }
.og-title small { display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: 11px; color: var(--g-500); white-space: nowrap; }
.og-title:hover strong, .og-title:hover .og-task-name { text-decoration: underline; text-decoration-color: var(--g-300); text-underline-offset: 3px; }
.og-mark { display: inline-grid; color: var(--g-400); }
.og-mark .ic { font-size: 13px; }
.og-mark.is-client, .og-mark.is-warn { color: var(--warning); }
/* Ações da linha aparecem sobre o nome só ao passar o mouse: o nome usa a
   largura toda o resto do tempo. */
.og-actions { position: absolute; top: 50%; right: 6px; display: flex; align-items: center; padding-left: 26px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 22px); opacity: 0; transform: translateY(-50%); pointer-events: none; transition: opacity .25s; }
.og-row.is-phase .og-actions { background: linear-gradient(90deg, rgba(250, 250, 250, 0), var(--g-25) 22px); }
.og-row:hover .og-actions, .og-actions:focus-within { opacity: 1; pointer-events: auto; }
.og-actions .vis-toggle.is-off { color: var(--warning); }
.og-actions .is-disabled { opacity: .25; pointer-events: none; }
.og-row.is-hidden .og-title { opacity: .55; }
.og-track { position: relative; flex: none; }
.og-bar { position: absolute; top: 50%; height: 18px; margin-top: -9px; border-radius: 6px; background: var(--g-150); box-shadow: inset 0 0 0 1px var(--g-200); cursor: grab; touch-action: pan-y; transition: box-shadow .25s; }
.og-bar .fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px 0 0 6px; background: var(--g-900); }
.og-bar.is-done { background: var(--g-900); box-shadow: none; }
.og-bar.is-done .fill { border-radius: inherit; }
.og-bar.is-now { background: repeating-linear-gradient(-45deg, rgba(31, 31, 31, .42) 0 3px, transparent 3px 7px), var(--g-150); background-size: 28px 100%, auto; animation: hatch 1.2s linear infinite; box-shadow: none; }
.og-bar.is-late { background: var(--danger-soft); box-shadow: inset 0 0 0 1.5px var(--danger); }
.og-bar.is-late .fill { background: var(--danger); }
.og-bar.is-waiting { box-shadow: inset 0 0 0 1.5px var(--warning); }
.og-bar:hover, .og-bar:focus-visible { box-shadow: 0 6px 14px -6px rgba(31, 31, 31, .45); outline: none; }
.og-bar.is-grabbing { z-index: 5; cursor: grabbing; box-shadow: 0 12px 24px -8px rgba(31, 31, 31, .55); }
.og-bar.is-grabbing::before, .og-bar.is-grabbing::after { display: none; }
.og-bar[data-drag] .fill { opacity: .6; }
.og-bar .pin { position: absolute; top: 50%; left: -17px; margin-top: -7px; font-size: 13px; color: var(--g-500); }
.og-phase-bar { position: absolute; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--g-200); }
.og-phase-bar .fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--g-900); }
.og-phase-bar.is-late { box-shadow: 0 0 0 1.5px var(--danger); }
.og-flag { position: absolute; top: 5px; z-index: 2; width: 10px; height: 10px; margin-left: -5px; border: 2px solid #fff; border-radius: 2px; background: var(--warning); box-shadow: 0 1px 3px rgba(31, 31, 31, .25); transform: rotate(45deg); }
.og-flag.is-late { background: var(--danger); }
.og-row.is-add { min-height: 34px; }
.og-row.is-add .og-name { padding-left: 74px; }
.og-add { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--g-400); transition: color .25s; }
.og-add:hover { color: var(--g-900); }
.og-add .ic { font-size: 15px; }
.og-empty { position: sticky; left: 0; width: min(100%, 100vw); padding: 36px 20px; text-align: center; font-size: 13.5px; color: var(--g-500); }
.is-weeks .og-bar { height: 14px; margin-top: -7px; border-radius: 4px; }
.is-weeks .og-bar .fill { border-radius: 4px 0 0 4px; }
.og-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 20px; border-top: 1px solid var(--g-100); font-size: 11.5px; color: var(--g-500); }
.og-legend i { display: inline-block; width: 18px; height: 8px; margin-right: 6px; border-radius: 3px; }
.lg-done { background: var(--g-900); }
.lg-now { background: repeating-linear-gradient(-45deg, rgba(31, 31, 31, .5) 0 2px, var(--g-150) 2px 5px); }
.lg-wait { background: var(--g-150); box-shadow: inset 0 0 0 1px var(--g-200); }
.lg-late { background: var(--danger-soft); box-shadow: inset 0 0 0 1.5px var(--danger); }
.og-legend .lg-client { width: 8px; border-radius: 2px; background: var(--warning); transform: rotate(45deg); }
.lg-off { background: repeating-linear-gradient(-45deg, rgba(31, 31, 31, .18) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--g-150); }

/* Janelas: mover tarefa, editar tarefa, datas da obra, publicar */
.choice-list { display: grid; gap: 10px; }
.choice { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--g-150); background: #fff; text-align: left; transition: border-color .25s, transform .35s var(--ease); }
.choice:hover { border-color: var(--g-900); transform: translateX(3px); }
.choice strong { font-size: 14px; font-weight: 600; }
.choice span { font-size: 13px; line-height: 1.5; color: var(--g-500); }
.task-preview { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--g-50); }
/* Tarefa sem data no Gantt: etiqueta tracejada no lugar da barra. */
.og-nodate { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--g-300); background: var(--g-25); font-size: 11px; font-weight: 500; color: var(--g-500); white-space: nowrap; transition: border-color .2s, color .2s; }
.og-nodate:hover { border-color: var(--g-600); color: var(--g-900); }
.og-nodate .ic { font-size: 12px; }
.tp-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tp-dates[hidden], .tp-info[hidden] { display: none; }
/* "Quando começa" tem quatro opções: no celular, desliza para o lado. */
.task-editor .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.task-editor .seg::-webkit-scrollbar { display: none; }
@media (max-width: 720px) { .task-editor .seg.seg-sm button { padding: 0 10px; font-size: 12px; } }
.tp-dates > label { display: grid; gap: 4px; }
/* Datas editáveis no editor da tarefa: parecem texto até receberem o clique. */
.tp-date { height: 34px; padding: 0 8px; border: 1px solid var(--g-200); border-radius: 9px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--g-900); transition: border-color .2s; }
.tp-date:hover { border-color: var(--g-400); }
.tp-date:focus { outline: none; border-color: var(--g-900); }
.tp-notes { display: grid; gap: 8px; }
.tp-notes:empty { display: none; }
.tp-info { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff; color: var(--g-700); font-size: 12.5px; line-height: 1.45; }
.tp-info .ic { flex: none; margin-top: 1px; font-size: 16px; color: var(--g-500); }
.tp-dates > span:not(.tp-days) { display: grid; gap: 2px; }
.tp-dates small { font: 400 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g-500); }
.tp-dates b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.tp-dates > .ic { color: var(--g-400); }
.tp-days { margin-left: auto; font-size: 12px; color: var(--g-500); }
.tp-warn { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--warning-soft); color: var(--warning); font-size: 12.5px; line-height: 1.45; }
.tp-warn .ic { flex: none; margin-top: 1px; font-size: 16px; }
.deps { display: grid; gap: 8px; margin-top: 10px; }
.deps[hidden] { display: none; }
.dep-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(170px, 1fr) auto auto; align-items: center; gap: 8px; }
.dep-row .input, .action-when .input, .blocked-row .input, .plan-row .input, .ca-row .input { padding: 9px 12px; font-size: 13px; }
.deps > .link-underline { justify-self: start; font-size: 12.5px; color: var(--g-600); }
.lag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--g-500); }
.form-field .lag input, .lag input, .plan-days input { width: 54px; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--g-200); background: #fff; font: 500 13px var(--sans); color: var(--g-900); text-align: center; outline: none; }
.lag input:focus, .plan-days input:focus { border-color: var(--g-900); }
.range-line { display: flex; align-items: center; gap: 12px; height: 46px; }
.range-line b { width: 40px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
input[type=range].range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; }
input[type=range].range::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--g-900) var(--p, 50%), var(--g-200) var(--p, 50%)); }
input[type=range].range::-moz-range-track { height: 2px; background: var(--g-200); }
input[type=range].range::-moz-range-progress { height: 2px; background: var(--g-900); }
input[type=range].range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 50%; background: #fff; border: 1.5px solid var(--g-900); box-shadow: 0 2px 6px rgba(31, 31, 31, .2); transition: transform .3s var(--ease-spring); }
input[type=range].range:active::-webkit-slider-thumb { transform: scale(1.25); }
.editor-block { display: grid; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--g-150); }
.editor-block > .eyebrow { display: flex; align-items: center; gap: 6px; }
.editor-block.is-private { border-style: dashed; background: var(--g-25); }
.actions-box { display: grid; justify-items: start; gap: 10px; }
.action-edit { width: 100%; display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--warning-soft); }
.action-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--g-600); }
.action-when input.input { width: 64px; }
.action-card { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--g-700); cursor: pointer; }
.action-when select.input { width: auto; }
.act-due { font-weight: 600; color: var(--warning); }
.helper.ok { color: var(--success); }
.helper .link-underline { margin-left: 4px; font-weight: 500; color: var(--g-900); }
.blocked-list { display: grid; justify-items: start; gap: 8px; }
.blocked-row { width: 100%; display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.publish-list { display: grid; gap: 4px; margin: 10px 0 6px; padding-left: 18px; font-size: 14px; list-style: disc; }
.publish-list .muted { color: var(--g-500); }

/* Questionário */
.wizard-dialog .modal-panel { width: min(840px, 100%); }
.wiz-steps { margin: 4px 0 28px; }
.wiz-steps .fill { transition: width .6s var(--ease); }
.wiz-steps .step .node .ic { font-size: 14px; }
.wiz-lead { font-size: 14px; line-height: 1.6; color: var(--g-600); }
.wizard .modal-foot { margin-top: 24px; }
.scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.scope-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--g-150); background: #fff; text-align: left; transition: border-color .25s, background .25s; }
.scope-item:hover { border-color: var(--g-400); }
.scope-item.on { border-color: var(--g-900); background: var(--g-25); }
.scope-item .check-round { margin-top: 1px; }
.scope-item .check-round svg { color: #fff; }
.scope-item.on .check-round { background: var(--g-900); border-color: var(--g-900); }
.scope-item.on .check-round svg { stroke-dashoffset: 0; }
.scope-item strong { display: block; font-size: 13.5px; font-weight: 600; }
.scope-item small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--g-500); }
.custom-add { display: flex; align-items: flex-end; gap: 8px; }
.custom-add > .field, .custom-add > .form-field { flex: 1; }
.custom-add .btn { height: 46px; }
.phase-plan, .client-actions { display: grid; gap: 8px; }
.plan-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, .8fr) minmax(0, 1.45fr); align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--g-150); background: #fff; }
.plan-name { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; min-width: 0; }
.plan-name .folder-num { grid-row: span 2; width: 30px; height: 30px; border-radius: 10px; font-size: 10px; }
.plan-name strong { font-size: 13.5px; font-weight: 600; }
.plan-name small { overflow: hidden; font-size: 11px; color: var(--g-500); white-space: nowrap; text-overflow: ellipsis; }
.plan-days { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--g-500); white-space: nowrap; }
.ca-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 180px); align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--g-150); background: #fff; }
.review-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.review-kpis > div { padding: 14px 16px; border-radius: 14px; background: var(--g-900); color: #fff; }
.review-kpis small { font: 400 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.review-kpis b { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.review-list, .review-actions { display: grid; overflow: hidden; border-radius: 14px; border: 1px solid var(--g-150); background: #fff; }
.review-actions { padding-top: 12px; }
.review-actions > .eyebrow { padding: 0 14px 8px; }
.review-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--g-100); font-size: 13px; }
.review-list .review-row:first-child { border-top: 0; }
.review-row .folder-num { width: 26px; height: 26px; border-radius: 8px; font-size: 9.5px; }
.review-row strong { font-weight: 500; }
.review-row > span:last-child { font: 400 11px var(--mono); color: var(--g-500); white-space: nowrap; }
.review-row.is-action > .ic { font-size: 16px; color: var(--warning); }

/* Visão do cliente */
.todo-banner { margin-top: 8px; }
.todo-head { display: flex; align-items: center; gap: 10px; padding: 26px 30px 6px; }
.todo-head .eyebrow { margin: 0; color: rgba(255, 255, 255, .55); }
.todo-head .count { background: #fff; color: var(--g-900); }
.todo-list { display: grid; padding: 6px 14px 14px; }
.todo-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px; border-radius: 16px; transition: background .3s; }
.todo-item + .todo-item { border-top: 1px solid rgba(255, 255, 255, .08); }
.todo-item:hover { background: rgba(255, 255, 255, .04); }
.todo-main { display: grid; gap: 7px; min-width: 0; }
.todo-main strong { font-size: clamp(18px, 2vw, 24px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.todo-due { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.todo-due .ic { font-size: 13px; }
.todo-item.is-today .todo-due, .todo-item.is-soon .todo-due { background: rgba(232, 201, 143, .2); color: #F2DAA8; }
.todo-item.is-late .todo-due { background: var(--danger); color: #fff; }
.todo-why { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.todo-btns { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.todo-btns .link-underline { font-size: 13px; color: rgba(255, 255, 255, .72); }
.todo-banner > .foot { padding: 14px 30px 18px; }
.now-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.now-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 22px; border-radius: 22px; }
.now-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.now-card-top .mono-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.now-card-top .badge { flex: none; }
.now-card .h5 { margin: 0; }
.now-card .who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--g-600); }
.now-card .who .ic { font-size: 16px; color: var(--g-400); }
.now-progress { display: grid; gap: 8px; font-size: 12px; color: var(--g-500); }
.now-progress b { color: var(--g-900); }
.meter { height: 6px; overflow: hidden; border-radius: 6px; background: var(--g-150); }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--g-900); }
.now-card.is-late .meter i { background: var(--danger); }
.now-card .note, .whole-task .note { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--g-50); font-size: 13px; line-height: 1.5; color: var(--g-700); }
.now-card .note .ic { flex: none; margin-top: 2px; color: var(--g-400); }
.obra-hours { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--g-600); }
.obra-hours .ic { flex: none; margin-top: 2px; font-size: 16px; }
.next-row { cursor: default; }
.next-row .badge { flex: none; }
.whole { border-radius: 22px; }
.whole-head, .whole-scale { display: grid; grid-template-columns: 34px minmax(140px, 220px) minmax(0, 1fr) 120px 18px; align-items: center; column-gap: 16px; padding: 0 20px; }
.whole-scale { height: 36px; padding-bottom: 8px; align-items: end; border-bottom: 1px solid var(--g-100); }
.whole-scale-pad { grid-column: 1 / 3; }
.whole-scale-end { grid-column: 4 / 6; }
.whole-months { position: relative; height: 14px; }
.whole-months span { position: absolute; padding-left: 5px; border-left: 1px solid var(--g-200); font: 400 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--g-400); white-space: nowrap; }
.whole-row { border-bottom: 1px solid var(--g-100); }
.whole-row:last-child { border-bottom: 0; }
.whole-head { width: 100%; padding-top: 14px; padding-bottom: 14px; text-align: left; transition: background .25s; }
.whole-head:hover { background: var(--g-25); }
.whole-name { display: grid; gap: 2px; min-width: 0; }
.whole-name strong { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.whole-name small { font: 400 10.5px var(--mono); color: var(--g-500); }
.whole-track { position: relative; height: 22px; }
.whole-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--g-100); }
.whole-bar { position: absolute; top: 50%; height: 10px; margin-top: -5px; overflow: hidden; border-radius: 5px; background: var(--g-200); }
.whole-bar i { display: block; height: 100%; background: var(--g-900); }
.whole-row.is-now .whole-bar { background: repeating-linear-gradient(-45deg, rgba(31, 31, 31, .42) 0 3px, transparent 3px 7px), var(--g-150); background-size: 28px 100%, auto; animation: hatch 1.2s linear infinite; }
.whole-row.is-late .whole-bar { box-shadow: 0 0 0 1.5px var(--danger); }
.whole-row.is-late .whole-bar i { background: var(--danger); }
.whole-today { position: absolute; top: -16px; bottom: -16px; width: 0; border-left: 1.5px solid var(--g-900); }
.whole-status { justify-self: end; }
.whole-head > .chev { font-size: 16px; color: var(--g-300); transition: transform .4s var(--ease), color .25s; }
.whole-row.is-open .whole-head > .chev { transform: rotate(180deg); color: var(--g-900); }
.whole-body { display: grid; gap: 4px; padding: 0 20px 18px 70px; }
.whole-desc { padding-bottom: 6px; font-size: 13.5px; line-height: 1.55; color: var(--g-600); }
.whole-task { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--g-150); }
.whole-task strong { display: block; font-size: 13.5px; font-weight: 500; }
.whole-task small { font-size: 12px; color: var(--g-500); }
.whole-task.is-done strong { color: var(--g-400); }
.whole-task .ok { font-size: 18px; color: var(--success); }
.whole-task .note { margin-top: 6px; }
.whole-task .bullet { width: 10px; height: 10px; margin: 4px; border-radius: 50%; border: 1.5px solid var(--g-300); }
.whole-task .bullet.is-now { border-color: var(--g-900); background: var(--g-900); box-shadow: 0 0 0 4px rgba(31, 31, 31, .08); }

@media (max-width: 720px) {
  /* Com a aba Obra são cinco seções: no celular a barra desliza para o lado
     em vez de espremer os nomes; o menu do pé fica um pouco menor. */
  .section-nav .seg { overflow-x: auto; scrollbar-width: none; }
  .section-nav .seg::-webkit-scrollbar { display: none; }
  .section-nav .seg a, .section-nav .seg button { flex: 1 0 auto; padding: 0 12px; }
  .app-rail { justify-content: space-between; padding: 0 8px; }
  .app-rail nav { gap: 0; }
  .rail-link, .rail-profile { width: 36px; height: 36px; }
  .rail-office { width: 32px; height: 32px; }
  .og-card { --og-name: 156px; }
  .og-name { padding-left: 2px; gap: 6px; }
  .og-row.is-task .og-name { padding-left: 12px; }
  .og-row.is-add .og-name { padding-left: 40px; }
  .og-name .folder-num, .og-actions, .og-corner .mono-label:last-child { display: none; }
  .og-corner { padding-left: 12px; }
  .og-task-name { display: -webkit-box; white-space: normal; font-size: 12.5px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .og-title small { font-size: 10.5px; }
  .obra-start { grid-template-columns: 1fr; }
  .obra-start-card { padding: 24px; }
  .gantt-tools .btn { flex: 1 1 auto; }
  .scope-grid { grid-template-columns: 1fr; }
  .plan-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .plan-row > .input, .plan-row > select { grid-column: 1 / -1; }
  .ca-row { grid-template-columns: auto minmax(0, 1fr); }
  .ca-row > .plan-days, .ca-row > select { grid-column: 2; }
  .review-kpis { grid-template-columns: 1fr; }
  .dep-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .dep-row > select:first-child { grid-column: 1 / -1; }
  .blocked-row { grid-template-columns: minmax(0, 1fr) auto; }
  .blocked-row > input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .todo-head { padding: 20px 20px 4px; }
  .todo-list { padding: 4px 6px 8px; }
  .todo-item { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .todo-btns { flex-direction: row; align-items: center; justify-content: space-between; }
  .todo-banner > .foot { padding: 14px 20px 18px; }
  .whole-scale { display: none; }
  .whole-head { grid-template-columns: 30px minmax(0, 1fr) auto 16px; row-gap: 10px; padding: 14px 16px; }
  .whole-track { grid-column: 2 / 4; grid-row: 2; }
  .whole-head > .chev { grid-column: 4; grid-row: 1; }
  .whole-today { top: -4px; bottom: -4px; }
  .whole-body { padding: 0 16px 16px; }
}

@media print {
  .proto-note, .publish-bar, .gantt-tools, .gantt-filters, .gantt-hint, .todo-btns, .og-actions, .whole-head > .chev { display: none !important; }
  .todo-head .eyebrow, .todo-why { color: var(--g-500) !important; }
  .todo-head .count { background: var(--g-900) !important; color: #fff !important; }
  .todo-due { background: var(--g-100) !important; color: var(--g-900) !important; }
  .todo-item.is-late .todo-due { background: var(--danger-soft) !important; color: var(--danger) !important; }
  .todo-item + .todo-item { border-top-color: var(--g-150) !important; }
  .todo-item, .now-card, .whole-row, .next-row { break-inside: avoid; }
  .whole-scale { display: grid !important; }
  .now-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}