/* ======================================================================
   Layout alternativo (em teste): menu no topo, estilo Loft, fonte Plus Jakarta Sans
   e cartões com cantos semiarredondados. Só é carregado quando o servidor
   roda com LAYOUT=topo; o layout padrão não muda.
   ====================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/vendor/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/vendor/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html[data-layout="topo"] {
  --r-card: 14px; --r-ctl: 10px; --r-pill: 999px;
  --canvas: #F4F1FA;
}
html[data-layout="topo"][data-theme="dark"] { --canvas: #0D0818; }
@media (prefers-color-scheme: dark) { html[data-layout="topo"]:not([data-theme="light"]) { --canvas: #0D0818; } }

/* Fonte moderna em tudo */
html[data-layout="topo"] body,
html[data-layout="topo"] button, html[data-layout="topo"] input, html[data-layout="topo"] select, html[data-layout="topo"] textarea {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
}
html[data-layout="topo"] body { font-size: 14.5px; letter-spacing: -.005em; }
html[data-layout="topo"] h1, html[data-layout="topo"] .page-title-xl { font-weight: 800; letter-spacing: -.02em; }

/* Cantos semiarredondados (o layout padrão usa cantos retos) */
html[data-layout="topo"] :is(.card, .stat, .filters, dialog, .market-alert, .kcol, .laudo, .map-box, .sit-counter, .welcome,
  .perception, .laudo-value, .research-note, .property-cover, .push-offer, .story-canvas, .loft-row, .notice, .banner, .chart, .seg) { border-radius: var(--r-card) !important; }
html[data-layout="topo"] :is(button, .btn, input, select, textarea, .kcard, .cover-cell img, .cover-empty, .thumbs img, .thumb-btn, .chip-check, .theme-switch, .tab-body) { border-radius: var(--r-ctl) !important; }
html[data-layout="topo"] :is(.badge, .ktag, .menu-count, .bell-count, .goal-track, .goal-fill, .goal-flag) { border-radius: var(--r-pill) !important; }
html[data-layout="topo"] .card { box-shadow: 0 1px 2px rgb(16 26 46 / .04), 0 12px 32px -20px rgb(16 26 46 / .28); border-color: color-mix(in srgb, var(--line) 70%, transparent); }
/* Cor dos indicadores em cima, como nos quadros do layout padrão */
html[data-layout="topo"] .stat { border-top: 4px solid var(--tile, var(--orange)); border-left: 1px solid var(--line); }
html[data-layout="topo"] .tabs button { border-radius: 0 !important; }
html[data-layout="topo"] .kcol { overflow: hidden; }

/* Botões: sem maiúsculas, peso médio, mais "app" */
html[data-layout="topo"] button, html[data-layout="topo"] .btn { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 650; padding: 9px 16px; }
html[data-layout="topo"] .card > h2, html[data-layout="topo"] .card > .row > h2, html[data-layout="topo"] .stat-label, html[data-layout="topo"] th {
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700;
}
html[data-layout="topo"] .card > h2, html[data-layout="topo"] .card > .row > h2 { font-size: 15px; color: var(--ink); }

/* ---------- Barra do topo: logo do dasimobi (abre o menu), 3 atalhos e Avisos ---------- */
html[data-layout="topo"] .layout { display: block; }
html[data-layout="topo"] .content { background: var(--canvas); min-height: 100vh; }
html[data-layout="topo"] .topbar-topo {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 18px;
  height: 68px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 20px -16px rgb(16 26 46 / .4); backdrop-filter: none;
}
html[data-layout="topo"] .drawer-toggle {
  display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 10px 0 8px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: none; cursor: pointer;
}
html[data-layout="topo"] .drawer-toggle:hover { border-color: var(--orange); background: var(--orange-soft); }
html[data-layout="topo"] .drawer-arrow { font-size: 22px; line-height: 1; color: var(--orange); font-weight: 700; transition: transform .2s ease; }
html[data-layout="topo"] body.menu-open .drawer-arrow { transform: rotate(180deg); }
html[data-layout="topo"] .topnav-logo img { display: block; width: 104px; height: auto; }
html[data-layout="topo"][data-theme="dark"] .topnav-logo img { background: #fff; padding: 3px 8px; border-radius: 8px; }
@media (prefers-color-scheme: dark) { html[data-layout="topo"]:not([data-theme="light"]) .topnav-logo img { background: #fff; padding: 3px 8px; border-radius: 8px; } }
html[data-layout="topo"] .topnav { display: flex; align-items: stretch; height: 100%; gap: 4px; margin-left: 10px; }
html[data-layout="topo"] .topnav-item {
  display: flex; align-items: center; padding: 0 14px; font-size: 14.5px; font-weight: 650; color: var(--ink);
  text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap;
}
/* Telas médias: atalhos mais juntos para a barra do topo não passar da largura. */
@media (max-width: 1360px) { html[data-layout="topo"] .topnav-item { padding: 0 9px; } html[data-layout="topo"] .topbar-topo { gap: 12px; } }
html[data-layout="topo"] .topnav-item:hover { color: var(--orange); }
html[data-layout="topo"] .topnav-item.active { color: var(--navy); border-bottom-color: var(--orange); }
html[data-layout="topo"][data-theme="dark"] .topnav-item.active { color: #fff; }
@media (prefers-color-scheme: dark) { html[data-layout="topo"]:not([data-theme="light"]) .topnav-item.active { color: #fff; } }
html[data-layout="topo"] .topbar-topo .topbar-actions { margin-left: auto; }
html[data-layout="topo"] main { max-width: 1480px; margin: 0 auto; padding: 28px 32px 56px; }
html[data-layout="topo"] .page-head { border-bottom: 0; padding-bottom: 0; }

/* ---------- Menu escondido: desce da barra ao tocar no logo ---------- */
html[data-layout="topo"] .sidebar {
  position: fixed; top: 68px; left: 0; bottom: 0; z-index: 55; width: 290px; height: auto;
  transform: translateX(-105%); transition: transform .25s ease, box-shadow .25s ease; visibility: hidden;
}
html[data-layout="topo"] body.menu-open .sidebar { transform: translateX(0); visibility: visible; box-shadow: 18px 0 50px -10px rgb(0 0 0 / .45); }
html[data-layout="topo"] .sidebar-logo { display: none; }
html[data-layout="topo"] .menu { padding-top: 12px; }
html[data-layout="topo"] .menu-backdrop { display: block; position: fixed; inset: 68px 0 0 0; z-index: 50; background: rgb(0 18 51 / .35); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
html[data-layout="topo"] body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }
/* Os 3 atalhos do topo não se repetem no menu lateral (no celular eles aparecem, porque a barra esconde) */
html[data-layout="topo"] .sidebar .dup-top { display: none; }
html[data-layout="topo"] .sidebar-user > div:first-child strong { font-size: 14.5px; }

/* ---------- Celular: a barra mostra a casinha, o logo e Avisos; os atalhos vão para o menu ---------- */
@media (max-width: 760px) {
  html[data-layout="topo"] .topbar-topo { gap: 10px; padding: 0 12px; }
  html[data-layout="topo"] .topnav { display: none; }
  html[data-layout="topo"] .sidebar .dup-top { display: flex; }
  html[data-layout="topo"] .sidebar { width: min(86vw, 320px); }
  html[data-layout="topo"] main { padding: 18px 16px 48px; }
}

/* Menu do topo: o logo do dasimobi abre o menu, que desce da barra (no lugar da gaveta lateral) */
html[data-layout="topo"] .marca-toggle { height: 52px; padding: 0 12px 0 8px; gap: 8px; border-color: transparent; background: transparent; }
html[data-layout="topo"] .marca-toggle:hover { background: var(--orange-soft); border-color: var(--line); }
html[data-layout="topo"] .marca-toggle .dasimobi-marca img { width: 34px !important; height: 34px !important; }
html[data-layout="topo"] .marca-toggle .dasimobi-nome { font-size: 21px; }
html[data-layout="topo"] .marca-toggle .drawer-arrow { font-size: 16px; margin-left: 2px; }
html[data-layout="topo"] .sidebar {
  top: 68px; left: 16px; bottom: auto; max-height: calc(100vh - 84px); overflow-y: auto; border-radius: 0 0 16px 16px;
  transform: translateY(-110%); transition: transform .25s ease, box-shadow .25s ease;
}
html[data-layout="topo"] body.menu-open .sidebar { transform: translateY(0); box-shadow: 0 24px 50px -12px rgb(0 0 0 / .45); }
@media (max-width: 760px) { html[data-layout="topo"] .sidebar { left: 0; width: 100vw; border-radius: 0 0 16px 16px; } }

/* ---------- Navegação: Voltar, menu fixo e menu que desce suave até o rodapé ---------- */
html[data-layout="topo"] .voltar-btn { height: 40px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 650; }
html[data-layout="topo"] .voltar-btn:hover { border-color: var(--orange); color: var(--orange); }
html[data-layout="topo"] .sidebar {
  top: 68px; bottom: 0; left: 0; height: auto; max-height: none; overflow-y: auto; border-radius: 0;
  transform: translateY(-16px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, visibility 0s linear .38s, box-shadow .38s ease;
}
html[data-layout="topo"] body.menu-open .sidebar {
  transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, visibility 0s, box-shadow .38s ease;
  box-shadow: 18px 0 50px -14px rgb(0 0 0 / .45);
}
html[data-layout="topo"] .menu-backdrop { transition: opacity .35s ease; }
html[data-layout="topo"] .menu-fixar { display: flex; align-items: center; gap: 6px; margin: 12px 10px 0; width: calc(100% - 20px); justify-content: center; background: rgb(255 255 255 / .08); color: #fff; border: 1px solid rgb(255 255 255 / .25); font-size: 13px; }
html[data-layout="topo"] .menu-fixar[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); }
/* Menu fixo: fica aberto ao lado e o conteúdo abre espaço para ele (só em tela larga). */
html[data-layout="topo"] body.menu-fixo .sidebar { box-shadow: none; border-right: 1px solid var(--line); }
html[data-layout="topo"] body.menu-fixo .menu-backdrop { display: none; }
html[data-layout="topo"] body.menu-fixo main { margin-left: 290px; width: calc(100% - 290px); max-width: none; min-width: 0; box-sizing: border-box; transition: margin-left .38s cubic-bezier(.22, 1, .36, 1); }
html[data-layout="topo"] body.menu-fixo .content { overflow-x: hidden; }
@media (max-width: 760px) { html[data-layout="topo"] .sidebar { width: 100vw; } html[data-layout="topo"] .voltar-btn { padding: 0 10px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { html[data-layout="topo"] .sidebar, html[data-layout="topo"] body.menu-open .sidebar { transition: none; } }