/* ══════════════════════════════════════════════════
   Casa · Design Tokens + Global Styles
   ══════════════════════════════════════════════════ */
:root {
  --esp-950:#0E0905;--esp-900:#1A1008;--esp-800:#2C1F14;--esp-700:#3D2B1C;
  --esp-600:#5C3F28;--esp-500:#7A5438;--esp-400:#A07550;--esp-300:#C9A96E;
  --esp-200:#DFC99A;--esp-100:#EFE0C4;--esp-50:#F7F3EE;
  --sand-900:#3B3228;--sand-800:#5A4F40;--sand-700:#7A6D5C;--sand-600:#9C8E7C;
  --sand-500:#BFB3A2;--sand-400:#D4CCC0;--sand-300:#E5E0D8;--sand-200:#F0EDE8;
  --sand-100:#F7F5F2;--sand-50:#FDFCFB;
  --sl-950:#0B0C0F;--sl-900:#0E1117;--sl-850:#121620;--sl-800:#161B26;
  --sl-700:#1E2535;--sl-600:#2A3349;--sl-500:#3A4660;--sl-400:#5A6882;
  --sl-300:#8494AF;--sl-200:#B0BCCE;--sl-100:#D5DCE8;--sl-50:#EDF0F5;
  --bl-900:#0A1628;--bl-700:#142747;--bl-600:#1A3360;--bl-500:#1D4489;
  --bl-400:#2B5EBF;--bl-300:#3D7FFF;--bl-200:#6FA3FF;--bl-100:#AECBFF;--bl-50:#EAF1FF;
  --gr-700:#134D25;--gr-500:#1C7A3C;--gr-400:#22A04F;--gr-300:#34C468;--gr-100:#C6F2D5;--gr-50:#EDFAF3;
  --am-700:#7A3C00;--am-500:#C45E00;--am-400:#F07C00;--am-300:#FFA32B;--am-100:#FFE8C2;--am-50:#FFF6E8;
  --rd-700:#6B1212;--rd-500:#C01C1C;--rd-400:#E53535;--rd-300:#F26A6A;--rd-100:#FFD5D5;--rd-50:#FFF0F0;

  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-mono:'DM Mono','Courier New',monospace;

  --r-sm:.25rem;--r-md:.5rem;--r-lg:.75rem;--r-xl:1rem;--r-2xl:1.5rem;--r-full:9999px;

  --sh-xs:0 1px 2px rgba(44,31,20,.06);
  --sh-sm:0 2px 6px rgba(44,31,20,.08),0 1px 2px rgba(44,31,20,.04);
  --sh-md:0 4px 16px rgba(44,31,20,.10),0 2px 4px rgba(44,31,20,.06);
  --sh-lg:0 8px 32px rgba(44,31,20,.12),0 4px 8px rgba(44,31,20,.06);
  --sh-xl:0 16px 48px rgba(44,31,20,.16),0 8px 16px rgba(44,31,20,.08);

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:var(--font-body);-webkit-font-smoothing:antialiased;}
#app{height:100%;}

/* ── App Shell ─────────────────────────────────── */
.app-shell{display:flex;height:100vh;overflow:hidden;background:var(--sl-900);color:#F0F4FA;}
.app-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative;}
.page-wrapper{display:flex;flex-direction:column;height:100%;overflow:hidden;}
.page-content{flex:1;overflow:auto;}

/* ── Topbar ────────────────────────────────────── */
.dash-topbar {
    padding: 18px 32px;
    border-bottom: 1px solid var(--sl-700);
    background: var(--sl-900);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: space-between;
}
.topbar-heading {
    min-width: 0;
    position: relative;
    left: 25px;
}
.topbar-breadcrumb{display:flex;align-items:center;gap:6px;margin-bottom:15px;
  font:400 12px/1 var(--font-body);color:var(--sl-400);}
.topbar-breadcrumb-sep{color:var(--sl-500);}
.topbar-breadcrumb-cur{color:var(--sl-200);}
.topbar-title{font:600 24px/1.1 var(--font-display);color:#F0F4FA;letter-spacing:-.025em;}
.topbar-subtitle{font:300 13.5px/1.4 var(--font-body);color:var(--sl-300);margin-top:4px;}
.topbar-search{
  width:260px;height:38px;background:var(--sl-800);border:1px solid var(--sl-700);
  border-radius:var(--r-md);display:flex;align-items:center;gap:8px;padding:0 12px;
}
.topbar-search input{
  flex:1;border:none;outline:none;background:transparent;
  font:400 13px/1 var(--font-body);color:#fff;
}
.topbar-search input::placeholder{color:var(--sl-400);}
.topbar-notif-btn{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:var(--sl-700);color:var(--sl-200);border:1px solid var(--sl-600);
  border-radius:var(--r-md);cursor:pointer;position:relative;
}
.topbar-notif-dot{
  position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
  background:var(--rd-400);border:2px solid var(--sl-900);
}
.topbar-actions{display:flex;align-items:center;gap:8px;}

/* ── Sidebar ── */
.sidebar{
  width:232px;flex-shrink:0;background:var(--sl-950);border-right:1px solid var(--sl-700);
  padding:20px 14px;flex-direction:column;gap:4px;height:100%;overflow:hidden;display:flex;
  transition:width 220ms var(--ease-out),padding 220ms var(--ease-out);
}
@media only screen and (min-width: 769px) {
    .sidebar {
        width: 232px !important;
        padding: 20px 14px !important;
        border-right: 1px solid var(--sl-700) !important;
        display: flex;
    }
}
.sidebar.collapsed{width:0;padding:0;border:none;overflow:hidden;}
.sidebar-logo{padding:4px 14px 14px;display:flex;align-items:center;gap:8px;}
.sidebar-logo-icon{
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg,var(--esp-300),var(--esp-500));
  display:flex;align-items:center;justify-content:center;color:var(--esp-900);flex-shrink:0;
}
.sidebar-wordmark{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:20px;color:#fff;}
.sidebar-wordmark em{font-style:italic;color:var(--esp-300);}
.sidebar-search{
  margin:0 8px 14px;background:var(--sl-800);border-radius:var(--r-md);
  padding:8px 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--sl-700);
}
.sidebar-search-label{font:400 12.5px/1 var(--font-body);color:var(--sl-400);}
.sidebar-search-kbd{
  margin-left:auto;font:500 10px/1 var(--font-mono);color:var(--sl-500);
  background:var(--sl-700);padding:3px 5px;border-radius:4px;
}
.sb-section-label{
  font:600 10px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sl-500);padding:8px 14px;margin-top:12px;margin-bottom:2px;
}
.sb-nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-md);
  font:400 14px/1 var(--font-body);color:var(--sl-300);cursor:pointer;
  transition:all 200ms var(--ease-out);width:100%;text-align:left;border:none;background:transparent;
  text-decoration:none;
}
.sb-nav-item:hover{background:var(--sl-700);color:#fff;}
.sb-nav-item.active{background:rgba(61,127,255,.14);color:var(--bl-300);font-weight:500;}
.sb-nav-item svg,.sb-nav-item .nav-icon{width:18px;height:18px;flex-shrink:0;}
.sb-badge{
  font:500 10px/1 var(--font-mono);
  padding:3px 6px;border-radius:4px;
}
.sb-nav-item.active .sb-badge{color:var(--bl-300);background:rgba(61,127,255,.15);}
.sb-nav-item:not(.active) .sb-badge{color:var(--sl-400);background:var(--sl-700);}
.sidebar-plan{
  padding:12px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(201,169,110,.12),rgba(61,127,255,.08));
  border:1px solid var(--sl-700);margin-bottom:12px;
}
.sidebar-plan-label{font:600 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--esp-300);margin-bottom:6px;}
.sidebar-plan-text{font:500 12.5px/1.3 var(--font-body);color:var(--sl-100);margin-bottom:8px;}
.sidebar-user{
  display:flex;align-items:center;gap:10px;padding:8px;
  border-top:1px solid var(--sl-700);padding-top:14px;
}
.sidebar-nav-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;}
.sidebar-toggle-btn{
  position:absolute;top:45px;left:10px;z-index:10;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--sl-800);border:1px solid var(--sl-700);cursor:pointer;
  color:var(--sl-300);border-radius:var(--r-md);transition:all 200ms var(--ease-out);
  flex-shrink:0;
}
.sidebar-toggle-btn:hover{background:var(--sl-700);color:#fff;}
@media only screen and (min-width: 769px) {
    .sidebar-toggle-btn {
        display: none;
    }
}

/* ── Buttons ───────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:500;cursor:pointer;
  border:none;border-radius:var(--r-md);
  transition:all 200ms var(--ease-out);
  text-decoration:none;white-space:nowrap;letter-spacing:-.015em;line-height:1;
}
.btn-sm{font-size:13px;padding:8px 14px;height:32px;}
.btn-md{font-size:14.5px;padding:10px 18px;height:40px;}
.btn-lg{font-size:16px;padding:14px 22px;height:48px;}
.btn-primary{background:var(--esp-800);color:var(--sand-50);}
.btn-primary:hover{background:var(--esp-700);transform:translateY(-1px);box-shadow:var(--sh-md);}
.btn-secondary{background:transparent;color:var(--esp-800);border:1.5px solid var(--esp-800);}
.btn-secondary:hover{background:var(--esp-800);color:var(--sand-50);}
.btn-ghost{background:transparent;color:var(--esp-600);}
.btn-ghost:hover{background:var(--sand-200);color:var(--esp-800);}
.btn-dark{background:var(--bl-300);color:var(--sl-900);font-weight:600;}
.btn-dark:hover{background:var(--bl-200);box-shadow:0 4px 20px rgba(61,127,255,.35);}
.btn-dark-outline{background:transparent;color:var(--bl-300);border:1.5px solid var(--bl-300);}
.btn-dark-outline:hover{background:rgba(61,127,255,.12);}
.btn-dark-ghost{background:transparent;color:var(--sl-200);border:1.5px solid var(--sl-600);}
.btn-dark-ghost:hover{background:rgba(255,255,255,.05);color:#fff;}
.btn-dark-icon{background:var(--sl-700);color:var(--sl-200);border:1px solid var(--sl-600);}
.btn-dark-icon:hover{background:var(--sl-600);color:#fff;}

/* ── Inputs ────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;}
.field-label{font:500 12.5px/1 var(--font-body);color:var(--esp-700);}
.field-label-d{font:500 12.5px/1 var(--font-body);color:var(--sl-200);}
.input,.textarea{
  font:400 14.5px/1.2 var(--font-body);color:var(--esp-800);
  background:#fff;border:1.5px solid var(--sand-400);
  border-radius:var(--r-md);padding:11px 14px;outline:none;
  transition:all 200ms var(--ease-out);width:100%;
}
.input:focus,.textarea:focus{border-color:var(--esp-800);box-shadow:0 0 0 3px rgba(44,31,20,.08);}
.select{
  font:400 14.5px/1.2 var(--font-body);color:var(--esp-800);
  background:#fff;border:1.5px solid var(--sand-400);
  border-radius:var(--r-md);padding:11px 14px;outline:none;
  transition:all 200ms var(--ease-out);width:100%;
  appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C3F28' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.input-d,.textarea-d{
  font:400 14.5px/1.2 var(--font-body);color:#F0F4FA;
  background:var(--sl-700);border:1.5px solid var(--sl-600);
  border-radius:var(--r-md);padding:11px 14px;outline:none;
  transition:all 200ms var(--ease-out);width:100%;
}
.input-d::placeholder,.textarea-d::placeholder{color:var(--sl-400);}
.input-d:focus,.textarea-d:focus{border-color:var(--bl-300);box-shadow:0 0 0 3px rgba(61,127,255,.15);}
.select-d{
  font:400 14.5px/1.2 var(--font-body);color:#F0F4FA;
  background:var(--sl-700);border:1.5px solid var(--sl-600);
  border-radius:var(--r-md);padding:11px 14px;outline:none;
  transition:all 200ms var(--ease-out);width:100%;
  appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238494AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}

/* ── Pills ─────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font:600 10.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-full);
}
.pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--gr-50);color:var(--gr-500);border:1px solid var(--gr-100);}
.pill-warning{background:var(--am-50);color:var(--am-500);border:1px solid var(--am-100);}
.pill-danger{background:var(--rd-50);color:var(--rd-500);border:1px solid var(--rd-100);}
.pill-info{background:var(--bl-50);color:var(--bl-400);border:1px solid var(--bl-100);}
.pill-neutral{background:var(--sand-200);color:var(--esp-500);border:1px solid var(--sand-300);}
.pill-gold{background:var(--esp-100);color:var(--esp-700);border:1px solid var(--esp-200);}
.pill-d-success{background:rgba(34,160,79,.12);color:var(--gr-300);border:1px solid rgba(34,160,79,.3);}
.pill-d-warning{background:rgba(240,124,0,.12);color:var(--am-300);border:1px solid rgba(240,124,0,.3);}
.pill-d-danger{background:rgba(229,53,53,.12);color:var(--rd-300);border:1px solid rgba(229,53,53,.3);}
.pill-d-info{background:rgba(61,127,255,.12);color:var(--bl-300);border:1px solid rgba(61,127,255,.3);}
.pill-d-neutral{background:var(--sl-700);color:var(--sl-200);border:1px solid var(--sl-600);}

/* ── Cards ─────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--sand-300);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-sm);}
.card-dark{background:var(--sl-800);border:1px solid var(--sl-600);border-radius:var(--r-xl);padding:24px;box-shadow:0 2px 8px rgba(0,0,0,.3);}

/* ── Tables ────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font:400 13.5px/1.4 var(--font-body);}
.tbl thead th{text-align:left;padding:12px 16px;font:600 10.5px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;}
.tbl tbody td{padding:14px 16px;border-top:1px solid;}
.tbl-dark thead{background:var(--sl-850);}
.tbl-dark thead th{color:var(--sl-300);border-bottom:1px solid var(--sl-700);}
.tbl-dark tbody td{border-color:var(--sl-700);color:var(--sl-100);}
.tbl-dark tbody tr:hover td{background:rgba(255,255,255,.025);}

/* ── Progress ──────────────────────────────────── */
.prog-track{height:6px;background:var(--sand-300);border-radius:var(--r-full);overflow:hidden;}
.prog-track-d{height:6px;background:var(--sl-700);border-radius:var(--r-full);overflow:hidden;}
.prog-fill{height:100%;border-radius:var(--r-full);transition:width 800ms var(--ease-out);}
.prog-fill.gold{background:linear-gradient(90deg,var(--esp-400),var(--esp-300));}
.prog-fill.blue{background:linear-gradient(90deg,var(--bl-400),var(--bl-300));}
.prog-fill.green{background:linear-gradient(90deg,var(--gr-500),var(--gr-300));}
.prog-fill.red{background:linear-gradient(90deg,var(--rd-500),var(--rd-300));}

/* ── Avatars ───────────────────────────────────── */
.av{border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-family:var(--font-body);flex-shrink:0;}
.av-sm{width:32px;height:32px;font-size:12px;}
.av-md{width:40px;height:40px;font-size:14px;}
.av-lg{width:48px;height:48px;font-size:16px;}
.av-xl{width:80px;height:80px;font-size:24px;}
.av-dark{background:var(--sl-700);color:var(--sl-100);border:1px solid var(--sl-600);}

/* ── Thumbs (property images) ──────────────────── */
.thumb{background:linear-gradient(135deg,#DFC99A 0%,#C9A96E 40%,#A07550 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.thumb-v2{background:linear-gradient(135deg,#7A6D5C 0%,#5A4F40 50%,#3B3228 100%);}
.thumb-v3{background:linear-gradient(135deg,#EFE0C4 0%,#DFC99A 50%,#A07550 100%);}
.thumb-v4{background:linear-gradient(135deg,#9C8E7C 0%,#7A5438 100%);}
.thumb-v5{background:linear-gradient(135deg,#C9A96E 0%,#5C3F28 100%);}
.thumb-v6{background:linear-gradient(135deg,#EFE0C4 0%,#BFB3A2 100%);}
.thumb-overlay-grad{position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.25));}

/* ── Typography helpers ────────────────────────── */
.h-display{font-family:var(--font-display);letter-spacing:-0.03em;line-height:1.1;font-weight:700;}
.h-display em{font-style:italic;color:var(--esp-300);}
.h-serif{font-family:var(--font-display);letter-spacing:-0.025em;font-weight:600;}
.eyebrow{font:600 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;}

/* ── Tabs ──────────────────────────────────────── */
.tabs{display:flex;border-bottom:1px solid var(--sl-700);}
.tab-btn{
  padding:16px 16px 14px;border:none;cursor:pointer;background:transparent;
  border-bottom:2px solid transparent;color:var(--sl-300);font:400 13.5px/1 var(--font-body);
  margin-bottom:-1px;display:inline-flex;gap:8px;align-items:center;
}
.tab-btn.active{border-color:var(--bl-300);color:#F0F4FA;font-weight:500;}

/* ── Scrollbars ────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px;}

/* ── Responsive detail layout helpers ────────── */
/* Mobile-first: all columns stack */
.detail-layout   { display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start; }
.detail-main     { flex:1 1 320px;min-width:0; }
.detail-aside-sm { flex:1 1 100%; }   /* profile / 280px */
.detail-aside-md { flex:1 1 100%; }   /* parcelas / 320px */
.detail-aside-lg { flex:1 1 100%; }   /* detalhe  / 340px */
/* ≥900px: sidebars become fixed-width columns */
@media (min-width:900px) {
  .detail-aside-sm { flex:0 0 280px;max-width:280px; }
  .detail-aside-md { flex:0 0 320px;max-width:320px; }
  .detail-aside-lg { flex:0 0 340px;max-width:340px; }
}
/* Pessoas screens (sidebar right, ordered) */
.pessoas-detail-sidebar { flex:1 1 100%; }
@media (min-width:900px) {
  .pessoas-detail-sidebar { flex:0 0 320px;max-width:320px;order:2; }
  .pessoas-detail-main    { order:1; }
}
/* Proprietário sidebar wider */
@media (min-width:960px) {
  .prop-detail-sidebar { flex:0 0 340px;max-width:340px;order:2; }
}

/* ── Parcelas timeline grid — mobile 6 cols → desktop 12 cols ── */
.parcelas-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:6px; }
@media (min-width:600px) { .parcelas-grid { grid-template-columns:repeat(12,1fr); } }

/* ── Page inner padding — responsive ─────────── */
.page-inner { padding:16px 12px 32px; }
@media (min-width:640px) { .page-inner { padding:24px 20px 40px; } }
@media (min-width:900px) { .page-inner { padding:24px 32px 40px; } }

/* ── Topbar — responsive ──────────────────────── */
.topbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (max-width:640px) {
  .dash-topbar { padding:12px 16px; flex-wrap:wrap; gap:8px; }
  .topbar-heading { left:44px; }
  .topbar-title { font-size:19px; }
}

/* ── Sidebar — mobile overlay ─────────────────── */
.sidebar-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:199; cursor:pointer;
}
@media (max-width:768px) {
  .sidebar {
    position:fixed; top:0; left:0; bottom:0; z-index:200;
    width:232px !important; padding:20px 14px !important;
    border-right:1px solid var(--sl-700) !important;
    transform:translateX(0);
    transition:transform 220ms var(--ease-out);
  }
  .sidebar.collapsed {
    transform:translateX(-100%);
    width:232px !important; padding:20px 14px !important; border:none !important;
  }
  .sidebar-backdrop { display:block; }
  .sidebar-backdrop.hidden { display:none; }
}

/* ── Imovel gallery grid ──────────────────────── */
.imovel-gallery { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:140px; gap:8px; }
.imovel-gallery-main { grid-column:1 / -1; height:220px; }
@media (min-width:720px) {
  .imovel-gallery { grid-template-columns:2fr 1fr 1fr; grid-template-rows:168px 168px; grid-auto-rows:unset; }
  .imovel-gallery-main { grid-row:1 / span 2; grid-column:1; height:auto; }
}

/* ── Blazor Loading ────────────────────────────── */
.loading-progress{position:absolute;display:block;width:8rem;height:8rem;inset:20vh 0 auto 0;margin:auto;}
.loading-progress circle{fill:none;stroke:#e0e0e0;stroke-width:0.6rem;transform-origin:50% 50%;transform:rotate(-90deg);}
.loading-progress circle:last-child{stroke:var(--bl-300);stroke-dasharray:calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8),500%;transition:stroke-dasharray 0.05s ease-in-out;}
.loading-progress-text{position:absolute;text-align:center;font-weight:bold;inset:calc(20vh + 3.25rem) 0 auto 0.2rem;}
.loading-progress-text:after{content:var(--blazor-load-percentage-text,"Loading");}
#blazor-error-ui{background:lightyellow;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);box-sizing:border-box;display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}
.blazor-error-boundary{background:#b32121;padding:1rem 1rem 1rem 3.7rem;color:white;}
.blazor-error-boundary::after{content:"An error has occurred.";}


/* ══════════════════════════════════════════════════════
   Telas legais — Termos de Uso + Política de Privacidade
   Mobile-first · Flexbox
   ══════════════════════════════════════════════════════ */

.legal-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--esp-50);
  font-family: var(--font-body);
  color: var(--esp-800);
}

/* ── Sub-header ── */
.legal-subheader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--sand-300);
  flex-shrink: 0;
  min-height: 52px;
}

.legal-brand { display:flex; align-items:center; gap:8px; flex-shrink:0; text-decoration:none; }

.legal-logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--esp-800); color: var(--esp-100);
  display: flex; align-items: center; justify-content: center;
}

.legal-wordmark {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--esp-800);
}
.legal-wordmark em { font-style: italic; color: var(--esp-300); }

.legal-sep { width:1px; height:22px; background:var(--sand-300); flex-shrink:0; }

/* Stepper — hidden mobile */
.legal-stepper { display:none; align-items:center; gap:8px; flex:1; flex-wrap:nowrap; }

.legal-stepper-ctx {
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--esp-400); white-space:nowrap;
}

.legal-step {
  display:inline-flex; align-items:center; gap:6px;
  font: 400 12px/1 var(--font-body);
  color: var(--sand-600); white-space:nowrap;
}
.lst-active { font-weight:600; color:var(--esp-800); }
.lst-done   { color:var(--esp-500); }

.legal-dot {
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--sand-300); color:var(--esp-500);
  font: 600 10px/1 var(--font-body); flex-shrink:0;
}
.ld-active { background:var(--esp-300); color:var(--esp-900); }
.ld-done   { background:var(--esp-800); color:#fff; }

.legal-step-conn { width:14px; height:1px; background:var(--sand-400); }

.legal-subheader-end { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; }

.legal-print-btn { display:none; }

/* ── Body ── */
.legal-body { flex:1; overflow:hidden; display:flex; flex-direction:column; }

/* Mobile TOC toggle bar */
.legal-toc-toggle-bar {
  background:var(--sand-100); border-bottom:1px solid var(--sand-300);
  padding:8px 16px; flex-shrink:0;
}
.legal-toc-toggle {
  display:flex; align-items:center; gap:8px;
  background:none; border:1px solid var(--sand-300); border-radius:8px;
  padding:6px 12px; font:500 12.5px/1 var(--font-body); color:var(--esp-700); cursor:pointer;
}
.legal-chev-up { transform:rotate(180deg); transition:transform .15s; }

/* Sidebar — hidden mobile by default */
.legal-sidebar {
  display:none;
  flex-direction:column; gap:18px;
  background:var(--sand-100); border-right:1px solid var(--sand-300);
  overflow-y:auto; padding:20px 16px; flex-shrink:0;
}
.legal-sidebar-open { display:flex !important; max-height:50vh; }

/* Sidebar elements */
.legal-sidebar-title-row { display:flex; flex-direction:column; gap:6px; }
.legal-eyebrow {
  font:600 10.5px/1 var(--font-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--esp-400);
}
.legal-sidebar-h {
  font:600 20px/1.15 var(--font-display); color:var(--esp-900); letter-spacing:-.025em;
}

.legal-meta-card {
  background:#fff; border:1px solid var(--sand-300); border-radius:var(--r-lg);
  padding:12px 14px; display:flex; flex-direction:column; gap:8px;
}
.legal-meta-row { display:flex; justify-content:space-between; align-items:center; }
.legal-meta-k { font:400 11.5px/1 var(--font-body); color:var(--esp-500); }
.legal-meta-v { font:500 11.5px/1 var(--font-mono); color:var(--esp-800); }
.legal-meta-div { height:1px; background:var(--sand-200); margin:2px 0; }
.legal-meta-hint { display:flex; align-items:center; gap:8px; font:400 11.5px/1 var(--font-body); color:var(--esp-500); }

.legal-toc-wrap { display:flex; flex-direction:column; }
.legal-toc-list { list-style:none; display:flex; flex-direction:column; gap:1px; }
.legal-toc-btn {
  width:100%; text-align:left; display:flex; align-items:flex-start; gap:10px;
  padding:8px 10px; border-radius:var(--r-md);
  background:transparent; border:1px solid transparent; cursor:pointer; transition:background .15s;
  text-decoration:none;
}
.legal-toc-btn:hover { background:rgba(255,255,255,.6); }
.ltb-active { background:#fff !important; border-color:var(--sand-300) !important; box-shadow:var(--sh-xs); }
.legal-toc-n { font:500 11px/1.4 var(--font-mono); color:var(--esp-400); flex-shrink:0; margin-top:1px; }
.ltb-active .legal-toc-n { color:var(--esp-700); }
.legal-toc-t { font:400 13px/1.4 var(--font-body); color:var(--esp-600); }
.ltb-active .legal-toc-t { font-weight:500; color:var(--esp-900); }

.legal-twin {
  margin-top:auto; padding:12px 14px; border-radius:var(--r-lg);
  background:var(--esp-100); border:1px solid var(--esp-200);
  display:flex; flex-direction:column; gap:8px;
}
.legal-twin-head { display:flex; align-items:center; gap:8px; }
.legal-twin-label { font:500 12px/1 var(--font-body); color:var(--esp-800); }
.legal-twin-link { font:500 13px/1.3 var(--font-body); color:var(--esp-800); text-decoration:underline; }

/* ── Content panel ── */
.legal-content { flex:1; overflow-y:auto; background:var(--sand-50); }

.legal-article {
  max-width:760px; margin:0 auto;
  padding:28px 18px 160px; color:var(--esp-800);
}

/* Doc header */
.legal-doc-header { margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--sand-300); }
.legal-doc-eyebrow { color:var(--esp-500); margin-bottom:14px; }
.legal-doc-title { font:700 34px/1.05 var(--font-display); color:var(--esp-900); letter-spacing:-.03em; }
.legal-doc-intro { font:300 15px/1.55 var(--font-body); color:var(--esp-500); margin-top:14px; max-width:580px; }

/* Sections */
.legal-sec { margin-bottom:36px; scroll-margin-top:24px; }
.legal-sec-hd { display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.legal-sec-n { font:500 12px/1 var(--font-mono); color:var(--esp-300); letter-spacing:.06em; flex-shrink:0; }
.legal-sec-t { font:600 20px/1.2 var(--font-display); color:var(--esp-900); letter-spacing:-.02em; }
.legal-sec-body { display:flex; flex-direction:column; gap:12px; font:400 14.5px/1.65 var(--font-body); color:var(--esp-700); }
.legal-p { text-wrap:pretty; }

/* Lists */
.legal-list { list-style:none; display:flex; flex-direction:column; gap:8px; margin:4px 0; }
.legal-li { display:flex; gap:12px; align-items:flex-start; }
.legal-li::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--esp-300); margin-top:9px; flex-shrink:0;
}

/* Callouts */
.legal-callout {
  border-radius:var(--r-md); padding:12px 14px;
  display:flex; gap:12px; align-items:flex-start; margin:6px 0;
}
.legal-callout-info    { background:var(--bl-50);   border:1px solid var(--bl-100); }
.legal-callout-warn    { background:var(--am-50);   border:1px solid var(--am-100); }
.legal-callout-success { background:var(--gr-50);   border:1px solid var(--gr-100); }
.legal-callout-neutral { background:var(--esp-100); border:1px solid var(--esp-200); }
.legal-callout-title { font:600 12.5px/1.2 var(--font-body); margin-bottom:4px; }
.legal-callout-body  { font:400 13.5px/1.55 var(--font-body); opacity:.9; }

/* Definition lists */
.legal-defs {
  display:grid; grid-template-columns:auto 1fr; gap:10px 18px;
  background:#fff; border:1px solid var(--sand-300); border-radius:var(--r-lg);
  padding:14px 16px; margin:4px 0;
}
.legal-defs dt { font:500 11.5px/1.55 var(--font-mono); color:var(--esp-600); text-transform:uppercase; letter-spacing:.04em; }
.legal-defs dd { font:400 13.5px/1.55 var(--font-body); color:var(--esp-700); }

.legal-mono { font:500 13px/1 var(--font-mono); color:var(--esp-700); }

/* Doc footer */
.legal-doc-foot {
  margin-top:48px; padding-top:24px; border-top:1px solid var(--sand-300);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.legal-doc-addr { font:400 11px/1.4 var(--font-mono); color:var(--esp-400); }

/* ── Footer bar ── */
.legal-footer-bar {
  flex-shrink:0; background:#fff; border-top:1px solid var(--sand-300);
  box-shadow:0 -8px 24px rgba(44,31,20,.06);
  padding:14px 16px; display:flex; flex-direction:column; gap:12px;
}
.legal-footer-lock { display:none; align-items:center; gap:10px; }
.legal-footer-lock-txt { font:400 11.5px/1.3 var(--font-body); color:var(--esp-500); }
.legal-footer-checks { display:flex; flex-direction:column; gap:8px; }
.legal-accept-lbl { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.legal-accept-lbl-opt { margin-top:2px; }
.legal-chk { width:17px; height:17px; accent-color:var(--esp-800); margin-top:1px; flex-shrink:0; }
.legal-accept-txt { font:500 13px/1.45 var(--font-body); color:var(--esp-800); }
.legal-accept-meta { font:400 13px/1.45 var(--font-body); color:var(--esp-500); }
.legal-accept-txt-opt { font:400 12.5px/1.45 var(--font-body); color:var(--esp-600); }
.legal-opt-badge { font-weight:500; color:var(--esp-700); }
.legal-footer-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.legal-accept-cta { display:flex; align-items:center; gap:8px; flex:1; min-width:200px; justify-content:center; }
.legal-cta-off { opacity:.42; cursor:not-allowed !important; pointer-events:none; }

/* ══════════════════════════════════════════════════════
   DESKTOP (min-width: 768px)
   ══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .legal-toc-toggle-bar { display:none; }
  .legal-stepper        { display:flex; }
  .legal-print-btn      { display:flex; }

  .legal-body { flex-direction:row; }

  .legal-sidebar {
    display:flex !important; width:288px; max-height:none;
    padding:28px 24px;
  }

  .legal-article { padding:40px 56px 160px; }
  .legal-doc-title { font-size:44px; }

  .legal-footer-bar {
    display:grid;
    grid-template-columns:288px 1fr auto;
    gap:24px; align-items:center; padding:18px 40px;
  }
  .legal-footer-lock { display:flex; }
  .legal-footer-actions { flex-wrap:nowrap; gap:12px; }
  .legal-accept-cta { min-width:280px; flex:none; }
}

/* ── Loading Overlay ─────────────────────────────── */
@keyframes csa-ov-spin  { to { transform: rotate(360deg); } }
@keyframes csa-ov-card  {
  from { opacity:0; transform: translateY(8px) scale(.96); }
  to   { opacity:1; transform: none; }
}
@keyframes csa-ov-dot   { 0%,80%,100% { opacity:.22; } 40% { opacity:1; } }
.csa-ov-dot {
  display:inline-block; width:3.5px; height:3.5px; border-radius:50%;
  background:currentColor; animation:csa-ov-dot 1.2s infinite ease-in-out both;
}
