/* BitaSolve Home · approved reference composition
   This layer intentionally rebuilds the first mobile viewport rather than
   incrementally deforming the previous horizontal hero. */
:root{
  --ref-jade:#1E6B5E;
  --ref-jade-light:#5FB8A6;
  --ref-graphite:#22262B;
  --ref-pearl:#F4EFE7;
  --ref-silver:#D9D4C7;
  --ref-coral:#D77A6C;
}

/* Header in the approved screen is open on the pearl canvas, not a card. */
.topbar{
  position:relative!important;
  overflow:visible!important;
  z-index:8!important;
  margin-bottom:30px!important;
  padding:6px 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.topbar .brand{position:relative;z-index:4}
.topbar .avatar{position:relative;z-index:6}

/* The target art has a long mineral neck descending from the top right
   and physically meeting the hero. */
.topbar::after{
  content:"";
  position:absolute;
  z-index:2;
  top:-54px;
  right:18%;
  width:88px;
  height:300px;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 53% 84%,rgba(255,255,255,.90) 0 7%,rgba(217,212,199,.76) 12%,transparent 27%),
    linear-gradient(96deg,#173c37 0%,#39756c 26%,#6a8e88 44%,#d7d3c9 58%,#5a6664 72%,#193d39 100%);
  clip-path:polygon(43% 0,57% 0,58% 20%,61% 38%,70% 57%,82% 70%,87% 79%,83% 88%,69% 96%,57% 100%,43% 99%,30% 94%,19% 84%,20% 73%,31% 57%,40% 38%);
  filter:drop-shadow(0 9px 11px rgba(34,38,43,.18));
  opacity:.98;
}
.topbar::before{
  content:"";
  position:absolute;
  z-index:3;
  right:34%;
  top:86px;
  width:42px;
  height:42px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 31% 25%,#fff 0 10%,#F4EFE7 24%,#D9D4C7 63%,#9ba09e 100%);
  box-shadow:inset 4px 4px 7px rgba(255,255,255,.8),inset -5px -6px 9px rgba(74,79,88,.18),0 8px 15px rgba(34,38,43,.15);
}

/* The Gastos/Hogar switch is not present in the canonical Home screen.
   Household remains accessible from its own Home module further down. */
@media(max-width:760px){#modeSwitch{display:none!important}}

.home-intro{
  position:relative!important;
  z-index:5!important;
  margin:0 0 28px!important;
  padding:0 8px!important;
}
.home-intro h1{
  margin:0!important;
  font-size:32px!important;
  line-height:38px!important;
  letter-spacing:-.042em!important;
  font-weight:700!important;
  color:var(--ref-graphite)!important;
}
.home-intro p{
  margin:2px 0 0!important;
  font-size:19px!important;
  line-height:25px!important;
  color:#4A4F58!important;
}

/* ------------------------------------------------------------------
   HERO: large vertical mineral body from the approved reference.
   The silhouette is close to a droplet/stone, not a horizontal banner.
   ------------------------------------------------------------------ */
#balanceHero{
  position:relative!important;
  isolation:isolate!important;
  width:94%!important;
  max-width:610px!important;
  height:clamp(332px,78vw,430px)!important;
  min-height:332px!important;
  margin:0 auto!important;
  padding:clamp(56px,10vw,76px) 42px 36px 54px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 22px 28px rgba(30,107,94,.18)) drop-shadow(0 8px 14px rgba(34,38,43,.14));
  background:
    radial-gradient(ellipse 54% 31% at 23% 14%,rgba(255,255,255,.18) 0 18%,rgba(95,184,166,.22) 30%,transparent 57%),
    radial-gradient(ellipse 48% 58% at 23% 48%,rgba(53,122,109,.62),transparent 69%),
    radial-gradient(ellipse 55% 64% at 76% 70%,rgba(20,27,30,.97),transparent 66%),
    linear-gradient(145deg,#4f8179 0%,#285d55 28%,#244c48 42%,#263c3b 55%,#22262B 82%,#343a3e 100%)!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 820' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M151 126C219 60 343 37 461 54C539 65 601 93 670 106C742 120 792 96 849 123C920 156 961 240 947 321C936 386 899 428 902 493C906 570 954 641 910 710C868 777 778 789 700 776C617 762 552 735 469 753C385 771 305 803 224 777C146 752 95 686 102 611C108 548 151 507 142 451C134 401 84 370 71 317C52 242 86 188 151 126Z'/%3E%3Cellipse fill='black' cx='184' cy='696' rx='111' ry='88'/%3E%3Cellipse fill='black' cx='808' cy='144' rx='130' ry='98'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 820' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M151 126C219 60 343 37 461 54C539 65 601 93 670 106C742 120 792 96 849 123C920 156 961 240 947 321C936 386 899 428 902 493C906 570 954 641 910 710C868 777 778 789 700 776C617 762 552 735 469 753C385 771 305 803 224 777C146 752 95 686 102 611C108 548 151 507 142 451C134 401 84 370 71 317C52 242 86 188 151 126Z'/%3E%3Cellipse fill='black' cx='184' cy='696' rx='111' ry='88'/%3E%3Cellipse fill='black' cx='808' cy='144' rx='130' ry='98'/%3E%3C/svg%3E")!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
}
/* silver lower-left lobe */
#balanceHero::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:-3%!important;
  bottom:-3%!important;
  right:auto!important;
  top:auto!important;
  width:39%!important;
  height:24%!important;
  transform:rotate(-12deg)!important;
  border-radius:57% 43% 61% 39% / 43% 62% 38% 57%!important;
  background:linear-gradient(145deg,#fff 0%,#F4EFE7 18%,#D9D4C7 43%,#8f9797 63%,#363d40 79%,transparent 80%)!important;
  box-shadow:inset 8px 7px 12px rgba(255,255,255,.68),inset -8px -8px 13px rgba(34,38,43,.18)!important;
  opacity:.96!important;
}
/* silver cap where the drip enters */
#balanceHero::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  right:4%!important;
  top:-5%!important;
  left:auto!important;
  bottom:auto!important;
  width:31%!important;
  height:23%!important;
  transform:rotate(15deg)!important;
  border-radius:63% 37% 59% 41% / 47% 61% 39% 53%!important;
  background:linear-gradient(156deg,#ffffff 0%,#F4EFE7 19%,#D9D4C7 43%,#929a99 61%,#34413f 78%,transparent 79%)!important;
  box-shadow:inset 8px 7px 13px rgba(255,255,255,.72),inset -8px -9px 14px rgba(34,38,43,.22)!important;
  opacity:.98!important;
}

/* Content basin: all copy sits comfortably inside the dark central mass. */
#balanceHero>small,
#balanceHero>.amount,
#balanceHero>.sub,
#balanceHero>.hero-context,
#balanceHero>.hero-actions{
  position:relative!important;
  z-index:4!important;
  width:auto!important;
  max-width:88%!important;
  color:var(--ref-pearl)!important;
}
#balanceHero>small{
  margin:0!important;
  font-size:16px!important;
  line-height:21px!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:nowrap!important;
  opacity:.92!important;
}
#balanceHero>.amount{
  margin:8px 0 0!important;
  font-size:clamp(45px,10vw,58px)!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
  font-weight:600!important;
  white-space:nowrap!important;
  text-shadow:0 2px 8px rgba(0,0,0,.22)!important;
}
#balanceHero>.sub{
  margin:14px 0 0!important;
  font-size:18px!important;
  line-height:23px!important;
  font-weight:500!important;
  white-space:nowrap!important;
}
#balanceHero>.hero-context{
  margin:7px 0 0!important;
  font-size:13px!important;
  line-height:18px!important;
  font-weight:400!important;
  color:rgba(244,239,231,.88)!important;
  white-space:nowrap!important;
}
#balanceHero>.hero-actions{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  width:auto!important;
  max-width:94%!important;
  margin:24px 0 0!important;
}
#balanceHero>.hero-actions .btn{
  min-height:46px!important;
  height:46px!important;
  padding:0 20px!important;
  border-radius:999px!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:650!important;
  white-space:nowrap!important;
}
#balanceHero #homeBalanceDetail{
  color:var(--ref-pearl)!important;
  background:rgba(29,49,48,.20)!important;
  border:1.3px solid rgba(244,239,231,.72)!important;
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.12)!important;
}
#balanceHero #homeBalanceDetail::before{
  content:"⌕";
  display:inline-block;
  margin-right:7px;
  font-size:19px;
  line-height:0;
  vertical-align:-2px;
}
#balanceHero #homeRegisterExpense{
  color:var(--ref-graphite)!important;
  background:linear-gradient(150deg,#fff,#F4EFE7 58%,#E4DED2)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 6px 14px rgba(20,29,29,.18),inset 1px 1px 2px #fff!important;
}

/* Four quick actions: tall soft pebbles, not circles and not square tiles. */
.home-quick-actions{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  margin:26px 4px 0!important;
}
.home-quick-actions button{
  min-width:0!important;
  height:94px!important;
  min-height:94px!important;
  padding:14px 6px 11px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  color:var(--ref-graphite)!important;
  font-size:12px!important;
  line-height:15px!important;
  font-weight:650!important;
  text-align:center!important;
  border:1px solid rgba(173,168,158,.46)!important;
  border-radius:33px 29px 37px 31px / 29px 36px 31px 38px!important;
  background:linear-gradient(151deg,rgba(255,255,255,.84),rgba(244,239,231,.74))!important;
  box-shadow:0 5px 13px rgba(34,38,43,.055),inset 1px 1px 2px rgba(255,255,255,.96)!important;
}
.home-quick-actions button:nth-child(2){border-radius:29px 37px 31px 35px / 37px 28px 39px 31px!important}
.home-quick-actions button:nth-child(3){border-radius:35px 30px 38px 28px / 31px 38px 29px 36px!important}
.home-quick-actions button:nth-child(4){border-radius:31px 39px 28px 36px / 38px 31px 36px 28px!important}
.home-quick-actions .qicon{
  display:grid!important;
  place-items:center!important;
  min-height:28px!important;
  font-size:27px!important;
  line-height:28px!important;
  color:var(--ref-jade)!important;
  font-weight:500!important;
}

/* Metrics: wide pebble cards with the coral status dot from the reference. */
.home-metrics{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:18px!important;
  margin:30px 3px 6px!important;
}
.home-metrics>.card{
  min-height:150px!important;
  padding:25px 22px 21px!important;
  overflow:hidden!important;
  border:1px solid rgba(174,168,158,.38)!important;
  background:
    radial-gradient(ellipse at 82% 12%,rgba(255,255,255,.84),transparent 22%),
    linear-gradient(150deg,rgba(255,255,255,.78),rgba(244,239,231,.74) 58%,rgba(228,222,210,.62))!important;
  box-shadow:0 8px 20px rgba(34,38,43,.065),inset 1px 1px 2px rgba(255,255,255,.94)!important;
}
.home-metrics>.card:nth-child(1){border-radius:45px 29px 51px 34px / 34px 51px 31px 46px!important}
.home-metrics>.card:nth-child(2){border-radius:31px 50px 35px 47px / 50px 33px 48px 34px!important;transform:none!important}
.home-metrics .metric-title{
  font-size:17px!important;
  line-height:22px!important;
  font-weight:700!important;
  color:var(--ref-graphite)!important;
}
.home-metrics .kpi{
  position:relative!important;
  display:inline-block!important;
  margin-top:4px!important;
  font-size:44px!important;
  line-height:48px!important;
  font-weight:650!important;
  letter-spacing:-.035em!important;
  color:var(--ref-graphite)!important;
}
.home-metrics .kpi::after{
  content:"";
  position:absolute;
  right:-13px;
  top:54%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ref-coral);
}
.home-metrics .kpi-label{
  margin-top:5px!important;
  font-size:13px!important;
  line-height:18px!important;
  font-weight:500!important;
  color:#3f444a!important;
}

/* The target first viewport proceeds directly to Tus grupos. Keep the
   household and recent modules available but below the primary group preview. */
#homeView{position:relative}
#homeView>.section-head:nth-of-type(2){margin-top:34px!important}

/* Group balance/readability safeguards remain enforced. */
#groupsList>.row[data-balance-state="positive"],#homeGroups>.row[data-balance-state="positive"]{
  background:linear-gradient(140deg,#3a6a62,#1E6B5E 48%,#253b39 100%)!important;
  color:var(--ref-pearl)!important;
}
#groupsList>.row[data-balance-state="negative"],#homeGroups>.row[data-balance-state="negative"]{
  background:linear-gradient(140deg,#485052,#22262B 72%,#363a3e 100%)!important;
  color:var(--ref-pearl)!important;
}
#groupsList>.row[data-balance-state] .row-title,#groupsList>.row[data-balance-state] .row-sub,#groupsList>.row[data-balance-state] .money,
#homeGroups>.row[data-balance-state] .row-title,#homeGroups>.row[data-balance-state] .row-sub,#homeGroups>.row[data-balance-state] .money{color:var(--ref-pearl)!important}
#groupsList>.row .money,#homeGroups>.row .money{font-weight:800!important;text-shadow:0 1px 4px rgba(0,0,0,.20)!important}

/* Payment action must always remain legible. */
#groupDetail [data-action="payment-current"]{
  color:var(--ref-graphite)!important;
  background:linear-gradient(150deg,#fff,#F4EFE7 58%,#E4DED2)!important;
  border:1px solid rgba(74,79,88,.18)!important;
  opacity:1!important;
  text-shadow:none!important;
}

@media(max-width:620px){
  .shell{padding-left:16px!important;padding-right:16px!important}
  #balanceHero{width:96%!important;height:clamp(332px,82vw,410px)!important;padding:56px 34px 30px 44px!important}
  #balanceHero>.amount{font-size:clamp(42px,9.8vw,54px)!important}
  #balanceHero>.hero-actions{margin-top:21px!important;gap:10px!important}
  #balanceHero>.hero-actions .btn{height:44px!important;min-height:44px!important;padding:0 15px!important;font-size:13px!important}
  .home-quick-actions{gap:8px!important}
  .home-quick-actions button{height:88px!important;min-height:88px!important;font-size:11.5px!important;padding-left:4px!important;padding-right:4px!important}
  .home-metrics{gap:14px!important}
  .home-metrics>.card{min-height:142px!important;padding:22px 19px 18px!important}
}

@media(max-width:430px){
  .topbar::after{right:13%;height:244px;width:72px;top:-48px}
  .topbar::before{right:31%;top:78px;width:34px;height:34px}
  .home-intro{margin-bottom:22px!important}
  .home-intro h1{font-size:28px!important;line-height:34px!important}
  .home-intro p{font-size:17px!important;line-height:22px!important}
  #balanceHero{width:98%!important;height:336px!important;min-height:336px!important;padding:52px 25px 25px 36px!important}
  #balanceHero>small{font-size:14px!important;line-height:18px!important}
  #balanceHero>.amount{font-size:40px!important}
  #balanceHero>.sub{font-size:16px!important;line-height:20px!important;margin-top:11px!important}
  #balanceHero>.hero-context{font-size:11px!important;line-height:15px!important}
  #balanceHero>.hero-actions{margin-top:18px!important;max-width:100%!important}
  #balanceHero>.hero-actions .btn{font-size:12px!important;padding:0 12px!important}
  .home-quick-actions{margin-left:0!important;margin-right:0!important;gap:6px!important}
  .home-quick-actions button{height:84px!important;min-height:84px!important;font-size:10.5px!important;line-height:13px!important}
  .home-quick-actions .qicon{font-size:24px!important}
  .home-metrics{gap:10px!important;margin-top:24px!important}
  .home-metrics>.card{min-height:130px!important;padding:19px 16px 16px!important}
  .home-metrics .metric-title{font-size:15px!important;line-height:19px!important}
  .home-metrics .kpi{font-size:39px!important;line-height:43px!important}
  .home-metrics .kpi-label{font-size:12px!important;line-height:16px!important}
}

@media(prefers-reduced-motion:reduce){#balanceHero{animation:none!important}.topbar::after{animation:none!important}}