/* ══════════════════════════════════════════════════════════════════
   GUUG — Camada de marca

   Carregar SEMPRE depois de app.css. Aqui ficam os elementos gráficos
   próprios da identidade: o padrão de curvas de nível dos materiais
   institucionais, o tratamento do logotipo e os acabamentos que dão
   à interface a mesma temperatura das peças da marca.
   ══════════════════════════════════════════════════════════════════ */

/* ── Padrão topográfico ──────────────────────────────────────── */
/* Curvas de nível em SVG inline: acompanha o tema sem requisição extra
   e sem violar a CSP (data: é permitido em img-src). */
.guug-topo {
  position: relative;
  isolation: isolate;
}
.guug-topo::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-repeat: repeat;
  background-size: 620px 620px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M-40 120c90-70 200-40 290 10s180 90 290 40 160-120 120-190'/%3E%3Cpath d='M-40 160c95-72 205-42 300 10s185 92 300 40 165-122 120-195'/%3E%3Cpath d='M-40 205c100-74 210-44 310 12s190 94 310 40 170-124 120-200'/%3E%3Cpath d='M-40 255c105-76 215-46 320 14s195 96 320 40 175-126 120-205'/%3E%3Cpath d='M-40 310c110-78 220-48 330 16s200 98 330 40 180-128 120-210'/%3E%3Cpath d='M-40 370c115-80 225-50 340 18s205 100 340 40 185-130 120-215'/%3E%3Cpath d='M-40 435c120-82 230-52 350 20s210 102 350 40 190-132 120-220'/%3E%3Cpath d='M-40 505c125-84 235-54 360 22s215 104 360 40 195-134 120-225'/%3E%3Cpath d='M-40 580c130-86 240-56 370 24s220 106 370 40 200-136 120-230'/%3E%3Ccircle cx='150' cy='300' r='34'/%3E%3Ccircle cx='150' cy='300' r='58'/%3E%3Ccircle cx='470' cy='150' r='28'/%3E%3Ccircle cx='470' cy='150' r='50'/%3E%3C/g%3E%3C/svg%3E");
}

/* Sobre superfícies claras o traço precisa ser escuro para aparecer. */
.guug-topo.on-light::before {
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke='%2347B1D8' stroke-opacity='.20' stroke-width='1'%3E%3Cpath d='M-40 120c90-70 200-40 290 10s180 90 290 40 160-120 120-190'/%3E%3Cpath d='M-40 205c100-74 210-44 310 12s190 94 310 40 170-124 120-200'/%3E%3Cpath d='M-40 310c110-78 220-48 330 16s200 98 330 40 180-128 120-210'/%3E%3Cpath d='M-40 435c120-82 230-52 350 20s210 102 350 40 190-132 120-220'/%3E%3Cpath d='M-40 580c130-86 240-56 370 24s220 106 370 40 200-136 120-230'/%3E%3Ccircle cx='150' cy='300' r='34'/%3E%3Ccircle cx='470' cy='150' r='28'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Sidebar com a textura da marca ──────────────────────────── */
.sidebar { position: fixed; }
.sidebar::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .55;
  background-repeat: repeat; background-size: 560px 560px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1'%3E%3Cpath d='M-40 100c80-60 180-35 260 8s160 80 260 36 145-108 108-172'/%3E%3Cpath d='M-40 190c88-64 190-38 275 10s170 84 275 36 152-112 108-180'/%3E%3Cpath d='M-40 290c96-68 200-42 290 12s180 88 290 36 160-116 108-190'/%3E%3Cpath d='M-40 400c104-72 210-46 305 14s190 92 305 36 168-120 108-200'/%3E%3Cpath d='M-40 520c112-76 220-50 320 16s200 96 320 36 176-124 108-210'/%3E%3Ccircle cx='120' cy='250' r='30'/%3E%3Ccircle cx='120' cy='250' r='52'/%3E%3C/g%3E%3C/svg%3E");
}
.sidebar > * { position: relative; z-index: 1; }

/* O logotipo é branco-e-azul: sobre o grafite ele aparece como é. */
.sidebar-brand img { filter: none; }

/* ── Login ───────────────────────────────────────────────────── */
.auth-visual::before {
  background-image: url('../images/bg-auth.jpg');
}
.auth-visual {
  isolation: isolate;
}
/* Curvas por cima da fotografia, como nas peças institucionais. */
.auth-visual .topo-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .6;
  background-repeat: repeat; background-size: 700px 700px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M-40 90c100-76 220-44 320 12s200 100 320 44 178-134 132-212'/%3E%3Cpath d='M-40 175c106-80 232-48 336 14s208 104 336 44 186-140 132-222'/%3E%3Cpath d='M-40 270c112-84 244-52 352 16s216 108 352 44 194-146 132-232'/%3E%3Cpath d='M-40 375c118-88 256-56 368 18s224 112 368 44 202-152 132-242'/%3E%3Cpath d='M-40 490c124-92 268-60 384 20s232 116 384 44 210-158 132-252'/%3E%3Cpath d='M-40 620c130-96 280-64 400 22s240 120 400 44 218-164 132-262'/%3E%3Ccircle cx='190' cy='340' r='40'/%3E%3Ccircle cx='190' cy='340' r='70'/%3E%3Ccircle cx='190' cy='340' r='104'/%3E%3Ccircle cx='540' cy='170' r='32'/%3E%3Ccircle cx='540' cy='170' r='58'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Cabeçalho de página com fio da marca ────────────────────── */
.page-header h1 {
  position: relative;
  padding-left: 14px;
}
.page-header h1::before {
  content: '';
  position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, var(--guug-blue-400), var(--guug-blue-600));
}

/* ── Cartão de destaque ──────────────────────────────────────── */
.card-brand {
  background: linear-gradient(135deg, var(--guug-ink-900), var(--guug-ink-700));
  border: 0; color: #fff;
}
.card-brand .card-head { border-bottom-color: rgba(255,255,255,.09); }
.card-brand .stat-label,
.card-brand .card-head p { color: rgba(255,255,255,.5); }
.card-brand .stat-value { color: #fff; }
.card-brand a { color: var(--guug-blue-400); }

/* ── Faixa de assinatura ─────────────────────────────────────── */
.guug-signature {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--txt-dim); text-align: center;
}

/* ── Realces de status do domínio condominial ────────────────── */
.stage-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 10.5px; font-weight: 700;
  background: var(--surface-3); color: var(--txt-muted);
}
.stage-pill .stage-color { width: 7px; height: 7px; border-radius: 50%; }

.risk-scale { display: inline-flex; gap: 2px; align-items: center; }
.risk-scale span { width: 5px; height: 12px; border-radius: 2px; background: var(--surface-4); }
.risk-scale.r1 span:nth-child(-n+1),
.risk-scale.r2 span:nth-child(-n+2),
.risk-scale.r3 span:nth-child(-n+3),
.risk-scale.r4 span:nth-child(-n+4),
.risk-scale.r5 span:nth-child(-n+5) { background: currentColor; }
.risk-scale.r1 { color: var(--green); }
.risk-scale.r2 { color: var(--teal); }
.risk-scale.r3 { color: var(--yellow); }
.risk-scale.r4 { color: #EA580C; }
.risk-scale.r5 { color: var(--red); }

/* ── Impressão de proposta ───────────────────────────────────── */
.proposal-sheet {
  background: #fff; color: #12181E;
  padding: 42px 46px; max-width: 860px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.proposal-sheet header {
  display: flex; align-items: flex-start; gap: 20px;
  padding-bottom: 20px; margin-bottom: 26px;
  border-bottom: 3px solid var(--guug-blue-400);
}
.proposal-sheet header img { height: 40px; }
.proposal-sheet h1 { font-size: 1.4rem; letter-spacing: -.02em; }
.proposal-sheet h2 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--guug-blue-700); margin: 26px 0 10px;
  padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.proposal-sheet table { font-size: 12px; }
.proposal-sheet thead th { background: var(--guug-blue-100); color: var(--guug-blue-800); }
.proposal-sheet .totals {
  background: var(--guug-blue-100); border-radius: var(--radius);
  padding: 16px 20px; margin-top: 22px;
}
.proposal-sheet footer {
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--txt-dim); text-align: center;
}

/* ── Logotipo por tema ──────────────────────────────────────────────
   O arquivo do logotipo é branco-e-azul, feito para fundo escuro: é o
   mesmo do menu lateral. No tema claro, onde ele cairia sobre branco,
   é recolorido para o azul da marca. */
.brand-escuro { display: none; }
html[data-theme="escuro"] .brand-claro { display: none; }
html[data-theme="escuro"] .brand-escuro { display: block; }

.auth-mobile-logo img { height: 44px; width: auto; max-width: 190px; object-fit: contain; }
.auth-mobile-logo .brand-claro {
  filter: brightness(0) saturate(100%) invert(58%) sepia(38%)
          saturate(700%) hue-rotate(155deg);
}
html[data-theme="escuro"] .auth-mobile-logo img { filter: none; }

.proposal-logo {
  filter: brightness(0) saturate(100%) invert(58%) sepia(38%)
          saturate(700%) hue-rotate(155deg);
}
html[data-theme="escuro"] .proposal-logo { filter: none; }
@media print { .proposal-logo { filter: brightness(0) saturate(100%) invert(58%) sepia(38%) saturate(700%) hue-rotate(155deg); } }