@font-face { font-family:"Bricolage Grotesque"; src:url("assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Bricolage Grotesque"; src:url("assets/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family: Buvera; src: url("assets/fonts/Buvera-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family: Buvera; src: url("assets/fonts/Buvera-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family: Buvera; src: url("assets/fonts/Buvera-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Sans"; src:url("assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Sans"; src:url("assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Sans"; src:url("assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
.brand-heading { position:relative; display:flex; align-items:center; min-height:64px; padding-right:252px; }
.top > div:first-child { width:100%; }
.brand-logo { position:absolute; right:0; top:50%; transform:translateY(-50%); width:240px; height:192px; object-fit:contain; pointer-events:none; }
.brand-heading span { font-size:clamp(2rem,5vw,2.9rem); }
.storage { margin-top:4px; margin-bottom:0; }
.app { padding-top:20px; }
.top { row-gap:12px; }
@media(max-width:520px) { .brand-heading { padding-right:132px; } .brand-logo { width:168px; height:144px; right:0; } }
@media(max-width:360px) { .brand-heading span { font-size:1.6rem; } }
.main-nav { display:flex; gap:8px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line); }
.main-nav [aria-current="page"] { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
h2,h3 { font-family:var(--f-display); letter-spacing:-.02em; }
h2 { margin:0 0 12px; } h3 { margin:0 0 16px; }
#dashboardView,#projectsView { display:flex; flex-direction:column; gap:20px; }
.dashboard-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.visualizations { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.viz { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:20px; min-width:0; }
.bar-item { margin:12px 0; } .bar-item > div { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.bar-item span { overflow-wrap:anywhere; } .bar-item strong { white-space:nowrap; font-variant-numeric:tabular-nums; }
meter { display:block; width:100%; height:12px; accent-color:var(--accent); }
meter::-webkit-meter-optimum-value { background:var(--accent); }
.f textarea { border:1px solid var(--line); border-radius:6px; background:var(--bg); padding:10px; width:100%; resize:vertical; }
.project-card { display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:6px; padding:12px; }
#clientsView > * + * { margin-top:20px; } .project-toolbar { margin-bottom:4px; }
#projectPanel { z-index:55; }
@media(max-width:860px) { .dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .visualizations { grid-template-columns:1fr; } .main-nav .btn { flex:1; } .bar-item > div { flex-wrap:wrap; } }

.dashboard-stats > :last-child { grid-column:span 2; }
.hint summary { cursor:pointer; color:var(--accent); }
.hint p { max-width:95ch; margin:8px 0; }

.auth-shell { max-width:460px; margin:10vh auto; padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.auth-shell h1 { font-size:2rem; }
.auth-shell form,.contract-fields { display:flex; flex-direction:column; gap:16px; }
.auth-shell .f input { margin-top:4px; }
#authMessage { overflow-wrap:anywhere; }
@media(max-width:520px){ .auth-shell { margin:24px 16px; padding:22px; } }

/* Superfícies claras e azul para orientar navegação e ações principais. */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  color-scheme: light;
  --f-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --bg: #f2f2f2;
  --surface: #ffffff;
  --surface-2: #eeeeee;
  --line: #cccccc;
  --fg: #000000;
  --muted: #555555;
  --accent: #000000;
  --button-blue: #49505f;
  --accent-fg: #ffffff;
  --accent-soft: #eeeeee;
  --ok: #000000;
  --ok-soft: #cccccc;
  --warn: #000000;
  --warn-soft: #cccccc;
  --danger: #000000;
  --danger-soft: #cccccc;
  --shadow: 0 12px 40px rgba(0, 0, 0, .18);
  --scrim: rgba(0, 0, 0, .45);
}
input, select, textarea, .f input, .f select, .taginput, .f textarea, .modal textarea { background-color:var(--surface); color:var(--fg); }
input::placeholder, textarea::placeholder { color:#000000; opacity:.7; }
h1, h2, h3, strong, b, .stat .v, .namebtn, .ptotal, thead th,
.btn.primary, .main-nav [aria-current="page"] { font-weight:700; }
h1, h2, h3, strong, b, .stat .v, .namebtn, .ptotal, thead th,
.btn.primary, .main-nav [aria-current="page"] { font-family:var(--f-display); }
.btn, .btn.primary, .btn.ghost, .btn.danger {
  background:#ffffff; border-color:#73798e; color:#000000;
}
.btn:hover, .btn.primary:hover, .btn.ghost:hover { background:#eeeeee; border-color:#73798e; }
.main-nav [aria-current="page"], .btn[aria-pressed="true"], .btn:active {
  background:var(--button-blue); border-color:var(--button-blue); color:#ffffff;
}

.finance-dialog { width:min(560px,calc(100% - 48px)); max-height:85vh; overflow:auto; background:var(--surface); color:var(--fg); border:1px solid var(--line); border-radius:12px; padding:24px; }
.finance-dialog::backdrop { background:var(--scrim); }
.finance-dialog form { display:flex; flex-direction:column; gap:14px; }
.finance-table { overflow-x:auto; }
#soonView:has(.finance-table) { text-align:left; display:flex; flex-direction:column; gap:20px; }

.brand-heading { font-weight:800; }