/* UNISOL 360° — dashboard premium 10/10
   Escopo estrito: apenas a home 360° e a barra inferior quando a home está ativa.
   Não altera dados, regras Livewire, rotas ou cálculos. */

.u-main-360 .u-topbar-right{display:none!important}
.u-main-360 .u-topbar{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.u-px-prem .u-prem-head-top{display:none!important}

/* acabamento premium comum */
.u-px-prem{
  --dash-bg:#f7f6f3;
  --dash-card:#fff;
  --dash-ink:#191b1f;
  --dash-muted:#747980;
  --dash-line:rgba(24,27,31,.09);
  --dash-orange:#f5821f;
  --dash-shadow:0 8px 28px rgba(26,28,32,.055),0 1px 2px rgba(26,28,32,.035);
}
.u-main-360,
.u-main-360>.u-content,
.u-main:has(.u-px-prem)>.u-content{background:var(--dash-bg,#f7f6f3)!important}

.u-px-prem .u-prem-hero{
  position:relative;
  isolation:isolate;
  background:linear-gradient(135deg,#3b4047 0%,#292e34 42%,#171b20 100%)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 14px 34px rgba(18,21,25,.14)!important;
}
.u-px-prem .u-prem-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.055),transparent 38%,rgba(255,255,255,.018) 70%);
}
.u-px-prem .u-prem-hero::after{
  content:"";
  position:absolute;
  right:22px;
  top:34px;
  width:62px;
  height:54px;
  opacity:.14;
  pointer-events:none;
  background:
    linear-gradient(to top,rgba(255,255,255,.9) 0 100%) 0 100%/12px 22px no-repeat,
    linear-gradient(to top,rgba(255,255,255,.9) 0 100%) 25px 100%/12px 36px no-repeat,
    linear-gradient(to top,rgba(255,255,255,.9) 0 100%) 50px 100%/12px 52px no-repeat;
  border-radius:5px;
}

/* VGV: reutiliza exatamente as 3 barras existentes como indicador da meta.
   As dimensões/posição permanecem intactas; apenas o preenchimento sobe de baixo para cima. */
.u-px-prem .u-prem-hero.u-prem-hero-vgv::after{
  opacity:1;
  background:
    linear-gradient(to top,var(--dash-orange) 0 100%) 0 100%/12px var(--u-vgv-fill-1,0px) no-repeat,
    linear-gradient(to top,var(--dash-orange) 0 100%) 25px 100%/12px var(--u-vgv-fill-2,0px) no-repeat,
    linear-gradient(to top,var(--dash-orange) 0 100%) 50px 100%/12px var(--u-vgv-fill-3,0px) no-repeat,
    linear-gradient(to top,rgba(255,255,255,.13) 0 100%) 0 100%/12px 22px no-repeat,
    linear-gradient(to top,rgba(255,255,255,.13) 0 100%) 25px 100%/12px 36px no-repeat,
    linear-gradient(to top,rgba(255,255,255,.13) 0 100%) 50px 100%/12px 52px no-repeat;
  transition:background-size .62s cubic-bezier(.22,1,.36,1);
  will-change:background-size;
}
@media (prefers-reduced-motion: reduce){
  .u-px-prem .u-prem-hero.u-prem-hero-vgv::after{transition:none}
}
.u-px-prem .u-prem-card,
.u-px-prem .u-prem-perf{
  background:var(--dash-card)!important;
  border-color:var(--dash-line)!important;
  box-shadow:var(--dash-shadow)!important;
}
.u-px-prem .u-prem-card{
  position:relative;
  overflow:hidden;
}
.u-px-prem .u-prem-card::after{
  content:"•••";
  position:absolute;
  right:14px;
  top:11px;
  color:#8d929a;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.4px;
  opacity:.85;
  pointer-events:none;
}
.u-px-prem .u-prem-card-hd{padding-right:26px}

/* barra inferior: aparência nativa e ação central menos pesada */
body:has(.u-px-prem) .u-bottom{
  background:rgba(255,255,255,.965)!important;
  -webkit-backdrop-filter:blur(18px) saturate(120%)!important;
  backdrop-filter:blur(18px) saturate(120%)!important;
  border-top:1px solid rgba(20,24,30,.07)!important;
  box-shadow:0 -8px 26px rgba(20,24,30,.07)!important;
}
body:has(.u-px-prem) .u-bottom-item{
  position:relative;
  color:#6f7680!important;
}
body:has(.u-px-prem) .u-bottom-item.u-bottom-ativo{
  color:#171b20!important;
}
body:has(.u-px-prem) .u-bottom-item.u-bottom-ativo::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:27px;
  height:3px;
  border-radius:99px;
  background:#f5821f;
  transform:translateX(-50%);
}
body:has(.u-px-prem) .u-bottom-novo{
  background:#f5821f!important;
  color:#171b20!important;
  box-shadow:0 8px 20px rgba(245,130,31,.27)!important;
}

@media(max-width:720px){
  /* topo: hamburger integrado + marca/data compactos */
  .u-main-360 .u-topbar{
    position:relative!important;
    min-height:0!important;
    height:0!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    z-index:120!important;
  }
  .u-main-360 .u-topbar-left{
    position:absolute!important;
    left:18px!important;
    top:12px!important;
    z-index:121!important;
  }
  .u-main-360 .u-topbar-titles{display:none!important}
  .u-main-360 #u-nav-open{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    padding:0!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.94)!important;
    border:1px solid rgba(20,24,30,.08)!important;
    color:#262a30!important;
    box-shadow:0 6px 18px rgba(20,24,30,.07)!important;
  }
  .u-main-360 #u-nav-open svg{width:20px!important;height:20px!important;stroke-width:1.8!important}

  .u-main-360>.u-content,
  .u-main:has(.u-px-prem)>.u-content{
    padding:9px 17px 94px!important;
  }
  .u-px-prem{
    gap:11px!important;
    padding-bottom:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .u-prem-head{
    gap:0!important;
    padding:3px 0 1px!important;
  }
  .u-prem-head-row{
    min-height:54px!important;
    padding-left:58px!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
  }
  .u-prem-brand{
    font-size:22.5px!important;
    letter-spacing:-.035em!important;
    white-space:nowrap!important;
  }
  .u-prem-date{
    position:relative!important;
    margin-left:auto!important;
    padding-left:12px!important;
    gap:7px!important;
    min-width:0!important;
  }
  .u-prem-date::before{
    content:"";
    position:absolute;
    left:0;
    top:5px;
    bottom:5px;
    width:1px;
    background:rgba(20,24,30,.08);
  }
  .u-prem-cal{width:18px!important;height:18px!important;stroke-width:2!important}
  .u-prem-date-txt{gap:1px!important}
  .u-prem-date-txt strong{
    max-width:210px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.018em!important;
    white-space:nowrap!important;
  }
  .u-prem-date-txt span{font-size:9.5px!important;font-weight:500!important}

  /* período: um conjunto visual mais coeso */
  .u-prem-period{gap:6px!important}
  .u-prem-years{
    min-height:35px!important;
    padding:3px!important;
    border-radius:11px!important;
    border-color:rgba(20,24,30,.08)!important;
    box-shadow:0 2px 7px rgba(20,24,30,.035)!important;
  }
  .u-prem-period-label{
    flex-basis:30px!important;
    font-size:8px!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
  }
  .u-prem-year{
    min-height:29px!important;
    padding:5px 12px!important;
    border-radius:8px!important;
    font-size:10px!important;
  }
  .u-prem-year.is-active{
    background:#191d23!important;
    box-shadow:0 4px 10px rgba(20,24,30,.16)!important;
  }
  .u-prem-months{min-height:42px!important}
  .u-prem-months-track{
    min-height:42px!important;
    padding:3px!important;
    border-radius:12px!important;
    border-color:rgba(20,24,30,.08)!important;
    box-shadow:0 2px 7px rgba(20,24,30,.03)!important;
  }
  .u-prem-month{
    min-width:49px!important;
    min-height:34px!important;
    padding:6px 7px!important;
    border-radius:9px!important;
    font-size:9.5px!important;
  }
  .u-prem-month.is-active{
    box-shadow:0 4px 10px rgba(245,130,31,.2)!important;
  }
  .u-prem-month span{font-size:6.5px!important}

  /* Vendas / Locação: mais fino e elegante, apesar do markup legado inline */
  .u-prem-period>div[style*="grid-template-columns:1fr 1fr"]{
    margin-top:5px!important;
    min-height:43px!important;
    border-radius:14px!important;
    border:1px solid rgba(20,24,30,.09)!important;
    background:rgba(255,255,255,.82)!important;
    box-shadow:0 2px 8px rgba(20,24,30,.025)!important;
  }
  .u-prem-period>div[style*="grid-template-columns:1fr 1fr"] a{
    min-height:43px!important;
    padding:9px 8px!important;
    font-size:10.5px!important;
    font-weight:800!important;
    letter-spacing:.035em!important;
  }
  .u-prem-period>div[style*="grid-template-columns:1fr 1fr"] a[style*="rgba(245,130,31,.08)"]{
    background:linear-gradient(90deg,rgba(245,130,31,.11),rgba(245,130,31,.045))!important;
    box-shadow:inset 0 -2px #f5821f!important;
  }
  .u-prem-period>div[style*="grid-template-columns:1fr 1fr"] svg{
    width:17px!important;
    height:17px!important;
  }
  .u-prem-months-note{
    padding-left:3px!important;
    font-size:8.5px!important;
    line-height:1.3!important;
    color:#777d85!important;
  }

  /* VGV = protagonista, porém sem excesso de altura */
  .u-prem-hero{
    min-height:0!important;
    border-radius:19px!important;
  }
  .u-prem-hero-top{
    min-height:87px!important;
    align-items:center!important;
    padding:14px 15px 12px!important;
    gap:11px!important;
  }
  .u-prem-hero-ico{
    width:38px!important;
    height:38px!important;
    background:rgba(255,255,255,.07)!important;
  }
  .u-prem-hero-ico svg{width:20px!important;height:20px!important}
  .u-prem-hero-copy{gap:4px!important}
  .u-prem-hero-lab{
    font-size:10px!important;
    font-weight:600!important;
    letter-spacing:.075em!important;
  }
  .u-prem-hero-val{
    font-size:31px!important;
    font-weight:800!important;
    letter-spacing:-.035em!important;
  }
  .u-prem-hero-foot{
    min-height:40px!important;
    padding:9px 15px 10px!important;
    flex-wrap:nowrap!important;
    gap:0!important;
  }
  .u-prem-hero-metric{
    flex:1 1 0!important;
    min-width:0!important;
    font-size:10.5px!important;
    font-weight:600!important;
    white-space:nowrap!important;
  }
  .u-prem-hero-metric:last-child{justify-content:flex-start!important}
  .u-prem-hero-sep{
    display:block!important;
    margin:0 12px!important;
    background:rgba(255,255,255,.13)!important;
  }

  /* grade 2x2: alturas e respiros uniformes */
  .u-prem-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .u-prem-card{
    min-height:151px!important;
    padding:13px 12px 11px!important;
    gap:7px!important;
    border-radius:17px!important;
  }
  .u-prem-card::after{
    right:11px!important;
    top:9px!important;
    font-size:7px!important;
  }
  .u-prem-card-hd{gap:7px!important;padding-right:20px!important}
  .u-prem-card-title{
    font-size:9.1px!important;
    font-weight:800!important;
    letter-spacing:.035em!important;
    line-height:1.25!important;
  }
  .u-prem-ico svg{width:16px!important;height:16px!important;stroke-width:2!important}
  .u-prem-meta-pct{margin-top:2px!important}
  .u-prem-meta-pct strong{font-size:24px!important}
  .u-prem-bar{height:6px!important;margin-top:0!important}
  .u-prem-meta-ratio{font-size:8.8px!important;line-height:1.3!important}
  .u-prem-deficit,.u-prem-surplus{
    padding:7px 8px!important;
    margin-top:auto!important;
    border-radius:10px!important;
    font-size:8.8px!important;
    line-height:1.22!important;
  }
  .u-prem-big{gap:1px!important}
  .u-prem-big strong{font-size:25px!important}
  .u-prem-big span{font-size:9.5px!important}
  .u-prem-divider{margin:0!important}
  .u-prem-stack{gap:2px!important}
  .u-prem-stack-lab{font-size:8.8px!important}
  .u-prem-stack-val{font-size:12.8px!important;line-height:1.2!important}
  .u-prem-mini-row{font-size:8.6px!important;line-height:1.22!important}
  .u-prem-sublab{font-size:8.5px!important;margin-top:0!important}
  .u-prem-money{font-size:22px!important;margin-top:2px!important}
  .u-prem-empty-msg{font-size:8.8px!important;line-height:1.28!important;margin-top:2px!important}
  .u-prem-com-row{gap:2px!important}
  .u-prem-com-row span{font-size:8.4px!important}
  .u-prem-com-row strong{font-size:13px!important}
  .u-prem-com-row--accent{margin-top:auto!important}
  .u-prem-com-row--accent span{color:#e76f0d!important}
  .u-prem-com-row--accent strong{font-size:19px!important;color:#f5821f!important}

  /* ranking: linha única, fácil de ler */
  .u-prem-perf{
    margin-top:1px!important;
    padding:14px 12px 5px!important;
    border-radius:18px!important;
  }
  .u-prem-perf-hd{
    align-items:flex-start!important;
    margin-bottom:5px!important;
  }
  .u-prem-perf-title{
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.055em!important;
  }
  .u-prem-perf-link{
    flex-basis:100%!important;
    margin-top:1px!important;
    font-size:10.5px!important;
  }
  .u-prem-perf-row{
    gap:8px!important;
    min-height:67px!important;
    padding:10px 2px!important;
  }
  .u-prem-rank{
    width:31px!important;
    height:31px!important;
    border-radius:9px!important;
    font-size:10px!important;
  }
  .u-prem-perf-ident{gap:8px!important}
  .u-prem-perf-ident .u-prof-avatar{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
  .u-prem-perf-meta strong{
    max-width:100%!important;
    font-size:10.7px!important;
    line-height:1.2!important;
  }
  .u-prem-perf-meta span{
    font-size:8.8px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
  }
  .u-prem-perf-right{min-width:58px!important;gap:4px!important}
  .u-prem-perf-pct{font-size:11.5px!important}
  .u-prem-perf-bar{width:58px!important;height:5px!important}
  .u-prem-chev{font-size:17px!important}

  /* rodapé técnico não disputa com o dashboard */
  .u-px-foot{font-size:8px!important;line-height:1.35!important;opacity:.65!important}

  /* bottom nav premium e proporcional */
  body:has(.u-px-prem) .u-bottom{
    min-height:68px!important;
    padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;
  }
  body:has(.u-px-prem) .u-bottom-item{
    min-width:0!important;
    padding:5px 4px!important;
    gap:4px!important;
  }
  body:has(.u-px-prem) .u-bottom-item .u-nav-ico,
  body:has(.u-px-prem) .u-bottom-item svg{
    width:20px!important;
    height:20px!important;
    stroke-width:1.8!important;
  }
  body:has(.u-px-prem) .u-bottom-lab{
    font-size:8px!important;
    font-weight:800!important;
    letter-spacing:.04em!important;
  }
  body:has(.u-px-prem) .u-bottom-novo{
    width:50px!important;
    height:50px!important;
    border-radius:16px!important;
    margin-top:-12px!important;
  }
  body:has(.u-px-prem) .u-bottom-novo svg{width:21px!important;height:21px!important}
}

@media(max-width:390px){
  .u-main-360>.u-content,
  .u-main:has(.u-px-prem)>.u-content{padding-left:14px!important;padding-right:14px!important}
  .u-main-360 .u-topbar-left{left:15px!important}
  .u-prem-head-row{padding-left:56px!important}
  .u-prem-brand{font-size:20px!important}
  .u-prem-date{padding-left:9px!important}
  .u-prem-date-txt strong{font-size:8.9px!important}
  .u-prem-date-txt span{font-size:8.5px!important}
  .u-prem-month{min-width:45px!important;font-size:9px!important}
  .u-prem-card{padding:11px 10px 10px!important;min-height:147px!important}
  .u-prem-card-title{font-size:8.3px!important}
  .u-prem-stack-val{font-size:11.5px!important}
  .u-prem-mini-row{font-size:8px!important}
  .u-prem-perf-meta strong{font-size:10px!important}
  .u-prem-perf-meta span{font-size:8.2px!important}
}

@media(max-width:350px){
  /* só em telas muito estreitas a grade vira uma coluna para não cortar conteúdo */
  .u-prem-grid{grid-template-columns:1fr!important}
  .u-prem-card{min-height:0!important}
  .u-prem-date-txt strong{max-width:130px!important}
}

[data-theme="dark"] .u-px-prem{
  --dash-bg:#090B0E;
  --dash-card:rgba(26,28,33,.88);
  --dash-ink:#F5F7FA;
  --dash-muted:rgba(245,247,250,.68);
  --dash-line:rgba(255,255,255,.07);
  --dash-shadow:0 16px 36px rgba(0,0,0,.30);
}
[data-theme="dark"] .u-px-prem .u-prem-card,
[data-theme="dark"] .u-px-prem .u-prem-perf{background:var(--dash-card)!important}
[data-theme="dark"] .u-prem-date::before{background:rgba(255,255,255,.1)!important}
[data-theme="dark"] body:has(.u-px-prem) .u-bottom{
  background:rgba(11,13,16,.94)!important;
  border-top-color:rgba(255,255,255,.07)!important;
}
[data-theme="dark"] body:has(.u-px-prem) .u-bottom-item.u-bottom-ativo{color:#fff!important}