/* ==========================================================================
   Lexy-Bot — Dashboard de usuario
   Gramática de la referencia CoinSphere: tarjetas KPI con sparkline y delta,
   medidor semicircular, panel de gráfico con pestañas pastilla, listas de fila.
   Prefijo dz- conservado: el JS y el scroll-spy dependen de él.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GATE — sin wallet conectada
   -------------------------------------------------------------------------- */
.dz-gate{
  display:grid;
  gap:var(--s-9);
  align-items:center;
  min-height:min(72vh,680px);
  padding:var(--s-8) 0;
}
@media (min-width:1000px){
  .dz-gate{grid-template-columns:1.15fr .85fr;gap:var(--s-11)}
}
.dz-gate-copy h1{
  font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:var(--s-5) 0 var(--s-5);
}
.dz-gate-copy > p{max-width:52ch;color:var(--tx-2);font-size:var(--t-md);line-height:1.65}

.dz-steps{display:flex;flex-direction:column;gap:var(--s-2);margin:var(--s-7) 0 var(--s-6)}
.dz-steps li{
  display:flex;align-items:center;gap:var(--s-5);
  padding:var(--s-4) var(--s-5);
  border-left:2px solid var(--line);
  color:var(--tx-2);font-size:var(--t-base);
  transition:border-color var(--d2) var(--e);
}
.dz-steps li:hover{border-left-color:var(--blue)}
.dz-steps b{color:var(--tx-1);font-weight:600}
.dz-step-n{
  font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--blue);flex:0 0 auto;
}
.dz-gate-note{font-size:var(--t-xs);color:var(--tx-3);max-width:46ch}

.dz-gate-card{
  padding:var(--s-7);
  background:var(--glass-bg);
  background-image:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--r-4);
  box-shadow:var(--glass-lift),var(--sh-3);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
:root[data-theme="light"] .dz-gate-card{background:#fff;box-shadow:var(--sh-2)}
.dz-gate-card-head{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6)}
.dz-gate-card-head h2{font-size:var(--t-xl)}
.dz-gate-card-head p{font-size:var(--t-xs);color:var(--tx-3);font-family:var(--f-mono)}

.dz-wallets{display:flex;flex-direction:column;gap:var(--s-3)}
.dz-wallet{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  width:100%;min-height:54px;padding:0 var(--s-5);
  background:var(--sur-3);
  border:1px solid var(--line);
  border-radius:var(--r-3);
  text-align:left;
  transition:border-color var(--d2) var(--e),background var(--d2) var(--e),transform var(--d1) var(--e);
}
.dz-wallet:hover{border-color:var(--blue);background:var(--sur-2)}
.dz-wallet:active{transform:scale(.985)}
.dz-wallet[disabled]{opacity:.5;pointer-events:none}
.dz-wallet-k{font-size:var(--t-base);font-weight:500;color:var(--tx-1)}
.dz-wallet-v{
  font-family:var(--f-mono);font-size:var(--t-2xs);font-weight:500;
  letter-spacing:.10em;text-transform:uppercase;
  color:var(--blue);
}
.dz-gate-hint{
  margin-top:var(--s-4);padding:var(--s-4);
  border-radius:var(--r-2);
  background:var(--loss-wash);
  font-size:var(--t-xs);color:var(--loss);
}
.dz-split-or{
  display:flex;align-items:center;gap:var(--s-4);
  margin:var(--s-6) 0;
  font-size:var(--t-2xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-4);
}
.dz-split-or::before,.dz-split-or::after{content:'';flex:1;height:1px;background:var(--line)}
.dz-gate-form{display:flex;flex-direction:column;gap:var(--s-3)}
.dz-gate-form label{
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--tx-3);
}
.dz-gate-err{font-size:var(--t-xs);color:var(--loss)}

/* --------------------------------------------------------------------------
   2. BARRA DE IDENTIDAD
   -------------------------------------------------------------------------- */
.dz-id{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-6);flex-wrap:wrap;
  padding-bottom:var(--s-6);
  margin-bottom:var(--s-6);
  border-bottom:1px solid var(--line);
}
.dz-id-who{display:flex;align-items:center;gap:var(--s-5);min-width:0}
.dz-avatar{
  width:52px;height:52px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:var(--r-full);
  background:var(--blue);
  color:#fff;
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:600;
}
.dz-avatar.sm{width:34px;height:34px;font-size:var(--t-sm)}
.dz-id-text{min-width:0}
.dz-id-text h1{font-size:var(--t-2xl);letter-spacing:-.03em}
.dz-id-meta{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-2)}
.dz-id-actions{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.dz-next{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--s-3) var(--s-5);
  border-radius:var(--r-2);
  background:var(--sur-2);
  border:1px solid var(--line);
}
.dz-next-k{
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--tx-3);
}
.dz-next-v{font-family:var(--f-mono);font-size:var(--t-base);color:var(--tx-1)}

/* --------------------------------------------------------------------------
   3. AVISO
   -------------------------------------------------------------------------- */
.dz-alert{
  display:flex;align-items:center;gap:var(--s-5);
  padding:var(--s-5);
  margin-bottom:var(--s-6);
  border-radius:var(--r-3);
  background:var(--yellow-wash);
  border:1px solid rgba(255,214,10,.28);
  transition:border-color var(--d2) var(--e);
}
.dz-alert:hover{border-color:rgba(255,214,10,.5)}
.dz-alert.ok{background:var(--green-wash);border-color:rgba(0,226,138,.28)}
.dz-alert-tag{
  flex:0 0 auto;padding:4px 10px;
  border-radius:var(--r-full);
  background:var(--yellow);color:var(--on-yellow);
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.dz-alert.ok .dz-alert-tag{background:var(--green);color:var(--on-green)}
.dz-alert-text{flex:1;min-width:0}
.dz-alert-text b{display:block;font-size:var(--t-base);color:var(--tx-1)}
.dz-alert-text small{display:block;font-size:var(--t-xs);color:var(--tx-3)}
.dz-alert-go{flex:0 0 auto;font-size:var(--t-sm);font-weight:600;color:var(--yellow-hi);white-space:nowrap}

.dz-blocked{
  display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;
  padding:var(--s-5);border-radius:var(--r-3);
  background:var(--loss-wash);border:1px solid rgba(239,68,68,.32);
  margin-bottom:var(--s-5);
}
.dz-blocked-ic{
  width:40px;height:40px;border-radius:var(--r-2);display:grid;place-items:center;flex:0 0 auto;
  background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.35);color:var(--loss);
}
.dz-blocked-text{flex:1;min-width:0}
.dz-blocked-text strong{display:block;color:var(--loss);font-weight:600;font-size:var(--t-base)}
.dz-blocked-text small{display:block;color:var(--tx-3);font-size:var(--t-xs);word-break:break-word;margin-top:2px}

/* --------------------------------------------------------------------------
   4. RAIL DE SECCIONES
   -------------------------------------------------------------------------- */
.dz-rail{
  display:flex;gap:var(--s-2);
  padding:4px;margin-bottom:var(--s-7);
  background:var(--sur-2);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.dz-rail::-webkit-scrollbar{display:none}
.dz-rail-a{
  display:inline-flex;align-items:center;gap:var(--s-3);
  min-height:40px;padding:0 var(--s-5);
  border-radius:var(--r-full);
  font-size:var(--t-sm);font-weight:500;
  color:var(--tx-3);white-space:nowrap;
  scroll-snap-align:start;
  transition:background var(--d2) var(--e),color var(--d2) var(--e);
}
.dz-rail-a svg{width:16px;height:16px;stroke-width:1.8;flex:0 0 auto}
.dz-rail-a:hover{color:var(--tx-1)}
.dz-rail-a.active{background:var(--blue);color:var(--on-blue);font-weight:600}
:root[data-theme="light"] .dz-rail-a.active{color:#fff}

/* --------------------------------------------------------------------------
   5. BENTO DE KPI — la fila superior de la referencia
   -------------------------------------------------------------------------- */
.dz-bento{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-5);
  margin-bottom:var(--s-9);
}
@media (min-width:700px){.dz-bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){
  .dz-bento{grid-template-columns:repeat(4,1fr)}
  .dz-tile-hero{grid-column:span 2;grid-row:span 2}
  .dz-tile-gauge{grid-column:span 2;grid-row:span 2}
}

.dz-tile{
  position:relative;
  display:flex;flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-6);
  min-height:150px;
  border-radius:var(--r-4);
  background:var(--glass-bg);
  background-image:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-lift),var(--sh-2);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  overflow:hidden;
  transition:border-color var(--d2) var(--e),transform var(--d3) var(--e-out);
}
:root[data-theme="light"] .dz-tile{background:#fff;box-shadow:var(--sh-1)}
@media (hover:hover) and (pointer:fine){
  .dz-tile:hover{border-color:var(--line-2);transform:translateY(-2px)}
}
/* Arte de fondo: vive en el tercio derecho y se apaga antes de llegar a la
   cifra. Las fotos son brillantes, así que la máscara arranca más tarde y la
   opacidad es baja: el dato manda, la foto ambienta. */
.dz-tile::after{
  content:'';position:absolute;inset:0;
  background-image:var(--dz-kpi);
  background-size:cover;background-position:100% 50%;
  opacity:.16;
  -webkit-mask-image:linear-gradient(96deg,transparent 42%,rgba(0,0,0,.55) 72%,#000 100%);
  mask-image:linear-gradient(96deg,transparent 42%,rgba(0,0,0,.55) 72%,#000 100%);
  pointer-events:none;
}
/* La tarjeta grande tiene más ancho: el arte puede empezar aún más a la derecha. */
.dz-tile-hero::after{
  -webkit-mask-image:linear-gradient(96deg,transparent 55%,rgba(0,0,0,.5) 80%,#000 100%);
  mask-image:linear-gradient(96deg,transparent 55%,rgba(0,0,0,.5) 80%,#000 100%);
  opacity:.20;
}
:root[data-theme="light"] .dz-tile::after{opacity:.07}
.dz-tile > *{position:relative;z-index:1}

.dz-tile-k{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;
  color:var(--tx-3);
}
.dz-tile-badge{
  width:30px;height:30px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:var(--r-full);
  background:var(--blue-wash);
  color:var(--blue);
}
.dz-tile-badge svg{width:15px;height:15px;stroke-width:1.8}
.dz-tile-badge.g{background:var(--green-wash);color:var(--green)}
.dz-tile-badge.y{background:var(--yellow-wash);color:var(--yellow)}

.dz-tile-num{
  font-family:var(--f-display);
  font-size:var(--t-2xl);font-weight:600;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--tx-1);
  line-height:1.05;
}
.dz-tile-f{font-size:var(--t-xs);color:var(--tx-3);margin-top:auto}
.dz-tile-f .mono{color:var(--tx-2)}

/* Tarjeta hero: cifra grande + delta + sparkline */
.dz-hero-num{
  display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  font-family:var(--f-display);
  font-size:clamp(2.2rem,5vw,3.2rem);
  font-weight:600;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--tx-1);line-height:1;
}
.dz-cur{font-size:var(--t-sm);font-weight:500;letter-spacing:0;color:var(--tx-3)}
.dz-hero-sub{font-size:var(--t-sm);color:var(--tx-2)}
.dz-hero-foot{
  margin-top:auto;padding-top:var(--s-5);
  border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--tx-3);
}

/* Sparkline.
   En la tarjeta hero no es un adorno flotando en medio: se ancla al fondo,
   sangra hasta los cantos y el relleno muere contra el borde inferior. Así
   lee como parte de la tarjeta y no como un gráfico pegado encima. */
.spark{display:block;width:100%;height:44px;margin-top:var(--s-4)}
.spark svg{width:100%;height:100%;overflow:visible;display:block}
.spark .ln{fill:none;stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.spark .ar{fill:var(--blue-wash);stroke:none}
.spark.g .ln{stroke:var(--green)}
.spark.g .ar{fill:var(--green-wash)}

.dz-tile-hero{position:relative;overflow:hidden}
.dz-tile-hero .spark{
  position:absolute;
  left:0;right:0;bottom:0;
  height:56%;
  margin:0;
  z-index:0;
  /* El relleno se desvanece hacia arriba: sin esto choca con la cifra. */
  -webkit-mask-image:linear-gradient(to top,#000 55%,transparent 100%);
  mask-image:linear-gradient(to top,#000 55%,transparent 100%);
}
.dz-tile-hero .spark svg{height:100%}
.dz-tile-hero .spark .ar{fill:var(--green-wash)}
.dz-tile-hero .spark .ln{stroke-width:2.2;opacity:.95}
/* El texto va por encima del gráfico. */
.dz-tile-hero .dz-tile-k,
.dz-tile-hero .dz-hero-num,
.dz-tile-hero .dz-hero-sub,
.dz-tile-hero .dz-hero-foot{position:relative;z-index:1}
/* El pie cae sobre el relleno del gráfico: necesita su propio suelo opaco o
   el texto se pierde entre la curva. */
.dz-tile-hero .dz-hero-foot{
  margin-top:auto;
  margin-inline:calc(var(--s-6) * -1);
  margin-bottom:calc(var(--s-6) * -1);
  padding:var(--s-5) var(--s-6);
  border-top:1px solid var(--line);
  background:rgba(6,8,13,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
:root[data-theme="light"] .dz-tile-hero .dz-hero-foot{background:rgba(255,255,255,.82)}
/* Y el gráfico no debe pasar por debajo del pie. */
.dz-tile-hero .spark{bottom:56px}

/* Medidor semicircular — el gauge de la referencia */
.dz-gauge-wrap{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;gap:var(--s-4);
  padding:var(--s-4) 0;
}
.dz-gauge{position:relative;width:min(260px,100%);aspect-ratio:2/1.12}
.dz-gauge svg{width:100%;height:100%;overflow:visible}
.dz-gauge .g-bg{fill:none;stroke:var(--sur-3);stroke-width:14;stroke-linecap:round}
.dz-gauge .g-fg{
  fill:none;stroke:var(--blue);stroke-width:14;stroke-linecap:round;
  transition:stroke-dashoffset 900ms var(--e-out);
}
.dz-gauge-mid{
  position:absolute;left:0;right:0;bottom:6%;
  text-align:center;
}
.dz-gauge-mid b{
  display:block;
  font-family:var(--f-display);
  font-size:var(--t-xl);font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--tx-1);
}
.dz-gauge-mid small{display:block;font-size:var(--t-xs);color:var(--tx-3);margin-top:2px}
.dz-gauge-legend{display:flex;gap:var(--s-5);flex-wrap:wrap;justify-content:center;font-size:var(--t-xs);color:var(--tx-3)}
.dz-gauge-legend i{
  display:inline-block;width:8px;height:8px;border-radius:2px;
  margin-right:6px;vertical-align:baseline;
}

/* --------------------------------------------------------------------------
   6. SECCIONES
   -------------------------------------------------------------------------- */
.dz-sec{
  position:relative;
  padding:var(--s-9) 0;
  border-top:1px solid var(--line);
  scroll-margin-top:100px;
}
@media (max-width:899px){.dz-sec{scroll-margin-top:76px}}

/* Banner de sección: banda de arte detrás de la cabecera, desvanecida hacia
   la izquierda para que ni el titular ni la cifra de la derecha pierdan
   contraste. Antes era un rectángulo flotante que chocaba con el dato. */
.dz-sec-art::before{
  content:'';position:absolute;
  top:0;right:calc(var(--pad-x) * -1);
  width:min(62%,760px);height:260px;
  background-image:var(--dz-art);
  background-size:cover;background-position:70% 40%;
  opacity:.16;
  -webkit-mask-image:linear-gradient(95deg,transparent 0%,#000 48%,#000 78%,transparent 100%),
                     linear-gradient(#000,transparent);
  mask-image:linear-gradient(95deg,transparent 0%,#000 48%,#000 78%,transparent 100%),
             linear-gradient(#000,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  pointer-events:none;
}
:root[data-theme="light"] .dz-sec-art::before{opacity:.07}
@media (max-width:900px){.dz-sec-art::before{display:none}}
.dz-sec > *{position:relative;z-index:1}

.dz-sec-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-6);flex-wrap:wrap;
  margin-bottom:var(--s-7);
}
.dz-sec-head h2{font-size:var(--t-2xl);letter-spacing:-.03em;margin:var(--s-4) 0 var(--s-3)}
.dz-sec-head > div > p{font-size:var(--t-sm);color:var(--tx-2);max-width:58ch}
.dz-sec-head b{color:var(--tx-1)}
.dz-sec-stat{text-align:right}
.dz-sec-stat-k{
  display:block;font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--tx-3);
}
.dz-sec-stat-v{
  display:block;
  font-family:var(--f-display);font-size:var(--t-xl);font-weight:600;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--tx-1);
}
.dz-sec-stat-v.pos{color:var(--gain)}

.dz-figs{display:flex;gap:var(--s-6);flex-wrap:wrap}
.dz-figs > div{display:flex;flex-direction:column;gap:2px}
.dz-figs .k{font-size:var(--t-2xs);font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--tx-3)}
.dz-figs .v{
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:600;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--tx-1);
}
.dz-figs .v.pos{color:var(--gain)}
.dz-figs .v.accent{color:var(--blue-hi)}
.dz-figs.wide{gap:var(--s-7)}

/* --------------------------------------------------------------------------
   7. PANELES
   -------------------------------------------------------------------------- */
.dz-panel{
  padding:var(--s-6);
  border-radius:var(--r-4);
  background:var(--glass-bg);
  background-image:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-lift),var(--sh-2);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
:root[data-theme="light"] .dz-panel{background:#fff;box-shadow:var(--sh-1)}
.dz-panel + .dz-panel{margin-top:var(--s-5)}
.dz-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-5);flex-wrap:wrap;
  margin-bottom:var(--s-5);
}
.dz-panel-head h3{font-size:var(--t-md);letter-spacing:-.015em}
.dz-panel-head span{display:block;font-size:var(--t-xs);color:var(--tx-3);margin-top:2px}
.dz-panel-num{
  font-family:var(--f-display);font-size:var(--t-xl);font-weight:600;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--tx-1);
}
.dz-note{font-size:var(--t-xs);line-height:1.65;color:var(--tx-3);margin-top:var(--s-4)}
.dz-note b{color:var(--tx-2)}
.dz-note.warn{
  padding:var(--s-4);border-radius:var(--r-2);
  background:var(--yellow-wash);color:var(--yellow-hi);
}
.dz-note.warn b{color:var(--yellow-hi)}
.dz-chart{position:relative;width:100%}

.dz-duo{display:grid;gap:var(--s-5);margin-top:var(--s-5)}
@media (min-width:1000px){
  .dz-duo{grid-template-columns:1fr 1fr}
  .dz-duo.net{grid-template-columns:1.1fr .9fr}
}

/* --------------------------------------------------------------------------
   8. SEMANA DEL MOTOR
   -------------------------------------------------------------------------- */
.dz-engine{display:grid;gap:var(--s-5)}
.dz-week{
  display:grid;
  grid-template-columns:repeat(7,minmax(96px,1fr));
  gap:var(--s-2);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  padding-bottom:var(--s-2);
}
.dz-week::-webkit-scrollbar{display:none}
.dz-day{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-4);
  border-radius:var(--r-3);
  background:var(--sur-2);
  border:1px solid var(--line);
  scroll-snap-align:start;
  transition:border-color var(--d2) var(--e);
}
:root[data-theme="light"] .dz-day{background:var(--sur-3)}
.dz-day.passed{border-color:rgba(0,226,138,.24)}
.dz-day.today{border-color:var(--blue);background:var(--blue-wash)}
.dz-day-dot{
  width:20px;height:20px;
  display:grid;place-items:center;
  border-radius:var(--r-full);
  background:var(--sur-3);
  border:1px solid var(--line);
  color:var(--green);
}
.dz-day.passed .dz-day-dot{background:var(--green-wash);border-color:rgba(0,226,138,.4)}
.dz-day.today .dz-day-dot{background:var(--blue);border-color:var(--blue)}
.dz-day-dot svg{width:11px;height:11px}
.dz-day-n{font-family:var(--f-mono);font-size:var(--t-2xs);letter-spacing:.10em;color:var(--tx-3)}
.dz-day-l{font-size:var(--t-xs);color:var(--tx-2);line-height:1.4}
.dz-day-p{font-size:var(--t-xs);color:var(--gain);margin-top:auto}

.dz-meter{
  height:8px;border-radius:var(--r-full);
  background:var(--sur-3);
  overflow:hidden;
}
.dz-meter span{
  display:block;height:100%;
  border-radius:inherit;
  background:var(--blue);
  transition:width 900ms var(--e-out);
}

/* --------------------------------------------------------------------------
   9. AGENTE + ÓRDENES
   -------------------------------------------------------------------------- */
.dz-agent{display:flex;gap:var(--s-4);margin-bottom:var(--s-5)}
.dz-agent-mark{
  width:40px;height:40px;flex:0 0 auto;
  border-radius:var(--r-full);
  overflow:hidden;
  background:var(--sur-3);
  border:1px solid var(--line);
}
.dz-agent-mark img{width:100%;height:100%;object-fit:cover}
.dz-agent-who{
  display:block;font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--blue);
  margin-bottom:var(--s-2);
}
.dz-agent-body p{font-size:var(--t-sm);line-height:1.6;color:var(--tx-2)}
.dz-agent-body b{color:var(--tx-1)}
.dz-agent-body b.buy{color:var(--green)}
.dz-agent-body b.sell{color:var(--blue-hi)}
.dz-agent-body b.idle{color:var(--tx-3)}

.dz-oo-list{display:flex;flex-direction:column;gap:2px}
.dz-oo-row{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-2);
  background:var(--sur-2);
  font-size:var(--t-sm);
}
:root[data-theme="light"] .dz-oo-row{background:var(--sur-3)}
.dz-oo-lvl{font-size:var(--t-xs);color:var(--tx-3);flex:0 0 auto;width:26px}
.dz-oo-txt{flex:1;min-width:0;color:var(--tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-oo-txt.muted{color:var(--tx-4)}
.dz-oo-tag{
  flex:0 0 auto;padding:2px 9px;
  border-radius:var(--r-full);
  font-size:var(--t-2xs);font-weight:600;
  background:var(--sur-3);color:var(--tx-3);
}
.dz-oo-tag.buy{background:var(--green-wash);color:var(--green)}
.dz-oo-tag.sell{background:var(--blue-wash);color:var(--blue-hi)}

.dz-pill{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:var(--t-2xs);font-weight:600;
  background:var(--sur-3);color:var(--tx-3);
  text-transform:capitalize;
}
.dz-pill.ok{background:var(--green-wash);color:var(--green)}

/* --------------------------------------------------------------------------
   10. RED DE REFERIDOS
   -------------------------------------------------------------------------- */
.dz-ladder{display:flex;flex-direction:column;gap:var(--s-2)}
.dz-ladder li{
  display:grid;
  grid-template-columns:28px 1fr 56px 44px 66px;
  align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-2);
  border-bottom:1px solid var(--line);
  font-size:var(--t-sm);
}
.dz-ladder li:last-child{border-bottom:0}
.dz-lad-n{font-size:var(--t-xs);color:var(--blue)}
.dz-lad-name{color:var(--tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-lad-bar{
  grid-column:1 / -1;grid-row:2;
  height:4px;border-radius:var(--r-full);
  background:var(--sur-3);overflow:hidden;
}
.dz-lad-bar i{
  display:block;height:100%;border-radius:inherit;
  background:var(--blue);
}
.dz-lad-pct{text-align:right;color:var(--tx-1);font-size:var(--t-xs)}
.dz-lad-ppl{text-align:right;color:var(--tx-3);font-size:var(--t-xs)}
.dz-lad-usd{text-align:right;color:var(--gain);font-size:var(--t-xs)}
@media (max-width:520px){
  .dz-ladder li{grid-template-columns:26px 1fr 50px 60px}
  .dz-lad-ppl{display:none}
}

.dz-invite-row{display:flex;gap:var(--s-3);margin-bottom:var(--s-5)}
.dz-invite-row .input{flex:1;min-width:0;font-size:var(--t-xs)}

/* Rejilla 2×2: cuatro pastillas en fila se rompen y dejan una huérfana. */
.dz-share{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-3);
  margin-bottom:var(--s-5);
}
.dz-share-a{
  display:inline-flex;align-items:center;gap:var(--s-3);
  min-height:46px;padding:0 var(--s-5);
  border-radius:var(--r-2);
  background:var(--sur-3);
  border:1px solid var(--line);
  font-size:var(--t-sm);font-weight:500;color:var(--tx-2);
  transition:border-color var(--d2) var(--e),color var(--d2) var(--e),transform var(--d1) var(--e);
}
.dz-share-a svg{width:16px;height:16px;flex:0 0 auto}
.dz-share-a:hover{border-color:var(--blue);color:var(--tx-1)}
.dz-share-a:active{transform:scale(.96)}

.dz-qr-row{display:flex;gap:var(--s-5);align-items:center;flex-wrap:wrap}
.dz-qr{
  width:120px;height:120px;flex:0 0 auto;
  display:grid;place-items:center;
  padding:var(--s-3);
  border-radius:var(--r-3);
  background:#fff;
}
.dz-qr img,.dz-qr canvas{display:block;width:100%;height:100%}
.dz-sponsor{flex:1;min-width:160px}
.dz-sponsor b{display:block;font-size:var(--t-md);color:var(--tx-1);margin:var(--s-2) 0}
.dz-sponsor a,.dz-sponsor > span.mono{font-size:var(--t-xs);color:var(--blue-hi)}
.dz-sponsor small{display:block;font-size:var(--t-xs);color:var(--tx-3);margin-top:var(--s-2)}

.dz-people{display:flex;flex-direction:column;gap:var(--s-2)}
.dz-person{
  display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  padding:var(--s-4);
  border-radius:var(--r-3);
  background:var(--sur-2);
  border:1px solid var(--line);
}
:root[data-theme="light"] .dz-person{background:var(--sur-3)}
.dz-person-id{flex:1;min-width:120px}
.dz-person-id b{display:block;font-size:var(--t-base);color:var(--tx-1)}
.dz-person-id a{font-size:var(--t-xs);color:var(--blue-hi)}
.dz-person-n{display:flex;flex-direction:column;gap:1px;text-align:right}
.dz-person-n .k{font-size:var(--t-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.dz-person-n .v{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--tx-1)}
.dz-person-n .v.pos{color:var(--gain)}

/* --------------------------------------------------------------------------
   11. LEDGER
   -------------------------------------------------------------------------- */
.dz-filters{
  display:flex;gap:var(--s-2);
  margin-bottom:var(--s-5);
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:var(--s-2);
  -webkit-overflow-scrolling:touch;
}
.dz-filters::-webkit-scrollbar{display:none}
.dz-fpill{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:38px;padding:0 var(--s-5);
  border-radius:var(--r-full);
  background:var(--sur-2);
  border:1px solid var(--line);
  font-size:var(--t-sm);color:var(--tx-3);
  white-space:nowrap;
  transition:background var(--d2) var(--e),color var(--d2) var(--e),border-color var(--d2) var(--e);
}
.dz-fpill b{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--tx-4)}
.dz-fpill:hover{border-color:var(--line-2);color:var(--tx-1)}
.dz-fpill.active{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.dz-fpill.active b{color:var(--on-blue);opacity:.7}
:root[data-theme="light"] .dz-fpill.active,
:root[data-theme="light"] .dz-fpill.active b{color:#fff}

.dz-ledger{
  border-radius:var(--r-4);
  background:var(--glass-bg);
  background-image:var(--glass);
  border:1px solid var(--glass-line);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  overflow:hidden;
}
:root[data-theme="light"] .dz-ledger{background:#fff}
.dz-lrow{
  display:grid;
  grid-template-columns:92px 1fr 130px 90px 130px;
  align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line);
  font-size:var(--t-sm);
  transition:background var(--d2) var(--e);
}
.dz-lrow:last-child{border-bottom:0}
@media (hover:hover) and (pointer:fine){.dz-lrow:hover{background:var(--sur-2)}}
.dz-ltype{
  padding:3px 9px;border-radius:var(--r-full);
  font-size:var(--t-2xs);font-weight:600;text-transform:capitalize;
  background:var(--sur-3);color:var(--tx-3);
  text-align:center;
}
.dz-ltype.payout{background:var(--green-wash);color:var(--green)}
.dz-ltype.deposit{background:var(--blue-wash);color:var(--blue-hi)}
.dz-ltype.referral{background:var(--yellow-wash);color:var(--yellow-hi)}
.dz-ltype.bonus,.dz-ltype.residual{background:var(--yellow-wash);color:var(--yellow-hi)}
.dz-ltype.withdraw{background:var(--loss-wash);color:var(--loss)}
.dz-lmain b{display:block;font-family:var(--f-mono);font-size:var(--t-base);color:var(--tx-1)}
.dz-lmain small{display:block;font-size:var(--t-xs);color:var(--tx-3)}
.dz-ldate{font-size:var(--t-xs);color:var(--tx-3)}
.dz-lstat{
  padding:3px 9px;border-radius:var(--r-full);
  font-size:var(--t-2xs);text-transform:capitalize;
  background:var(--sur-3);color:var(--tx-3);text-align:center;
}
.dz-lstat.paid,.dz-lstat.credited,.dz-lstat.confirmed{background:var(--green-wash);color:var(--green)}
.dz-lstat.pending{background:var(--yellow-wash);color:var(--yellow-hi)}
.dz-ltx{font-size:var(--t-xs);color:var(--tx-4)}
.dz-ltx a{color:var(--blue-hi)}
.dz-lrow.empty{grid-template-columns:1fr;padding:var(--s-8) var(--s-5);text-align:center}
.dz-lrow.empty a{color:var(--blue-hi)}

/* En móvil la fila se apila: no se encoge la tabla, se rearma la tarjeta */
@media (max-width:860px){
  .dz-lrow{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "type main"
      "date stat"
      "tx   tx";
    gap:var(--s-2) var(--s-4);
    padding:var(--s-5);
  }
  .dz-ltype{grid-area:type;align-self:start}
  .dz-lmain{grid-area:main}
  .dz-ldate{grid-area:date}
  .dz-lstat{grid-area:stat;justify-self:start}
  .dz-ltx{grid-area:tx;padding-top:var(--s-2);border-top:1px solid var(--line)}
}

/* --------------------------------------------------------------------------
   12. VAULT
   -------------------------------------------------------------------------- */
.dz-vault{display:grid;gap:var(--s-5)}
@media (min-width:1000px){.dz-vault{grid-template-columns:.85fr 1.15fr}}
.dz-vault-in{display:flex;flex-direction:column;gap:var(--s-4)}
.dz-vault-in .btn{margin-top:auto}

.dz-tiers{display:flex;flex-direction:column;gap:2px;margin:var(--s-5) 0}
.dz-tiers li{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);
  padding:var(--s-4) var(--s-5);
  border-radius:var(--r-2);
  background:var(--sur-2);
  border:1px solid transparent;
  font-size:var(--t-sm);
}
:root[data-theme="light"] .dz-tiers li{background:var(--sur-3)}
.dz-tiers li.now{
  border-color:var(--blue);
  background:var(--blue-wash);
}
.dz-tier-d{color:var(--tx-2)}
.dz-tiers li.now .dz-tier-d{color:var(--tx-1);font-weight:600}
.dz-tier-v{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  color:var(--tx-1);font-weight:500;
}
.dz-tiers li.now .dz-tier-v{color:var(--blue-hi)}

/* --------------------------------------------------------------------------
   13. PRIMER USO — sin posición
   Sin esto la primera pantalla del usuario es un muro de $0.00.
   -------------------------------------------------------------------------- */
.dz-onboard{
  display:grid;
  gap:var(--s-8);
  align-items:center;
  padding:var(--s-8);
  margin-bottom:var(--s-9);
  border-radius:var(--r-5);
  background:var(--glass-bg);
  background-image:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-lift),var(--sh-2);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  overflow:hidden;
}
:root[data-theme="light"] .dz-onboard{background:#fff;box-shadow:var(--sh-1)}
@media (min-width:1000px){
  .dz-onboard{grid-template-columns:1.15fr .85fr;padding:var(--s-9)}
}
.dz-onboard-copy h2{
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  letter-spacing:-.035em;
  margin:var(--s-5) 0 var(--s-4);
}
.dz-onboard-copy > p{max-width:56ch;font-size:var(--t-md);line-height:1.65;color:var(--tx-2)}
.dz-onboard-copy b{color:var(--tx-1)}

.dz-onboard-list{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-7)}
.dz-onboard-list li{
  display:flex;align-items:center;gap:var(--s-5);
  padding:var(--s-4) var(--s-5);
  border-radius:var(--r-2);
  background:var(--sur-2);
  border:1px solid var(--line);
  font-size:var(--t-sm);color:var(--tx-2);
  transition:border-color var(--d2) var(--e);
}
:root[data-theme="light"] .dz-onboard-list li{background:var(--sur-3)}
.dz-onboard-list li:hover{border-color:var(--blue)}
.dz-onboard-list b{color:var(--tx-1);font-weight:600}
.dz-onboard-n{
  flex:0 0 auto;
  font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--blue);
}
.dz-onboard-art{
  position:relative;
  border-radius:var(--r-4);
  overflow:hidden;
  aspect-ratio:3/2;
}
.dz-onboard-art img{width:100%;height:100%;object-fit:cover}
.dz-onboard-art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,transparent 40%,var(--sur-1) 100%);
}
@media (max-width:999px){.dz-onboard-art{display:none}}

/* --------------------------------------------------------------------------
   14. AJUSTES DE COMPOSICIÓN
   -------------------------------------------------------------------------- */
/* Los paneles emparejados deben terminar a la misma altura: el contenido
   secundario se empuja al pie en vez de dejar un hueco muerto abajo. */
.dz-duo > .dz-panel{display:flex;flex-direction:column}
.dz-duo > .dz-panel > .rule{margin-top:auto}
.dz-duo > .dz-panel > .dz-figs:last-child{margin-top:0}

/* El medidor lleno merece decirlo, no sólo llenarse. */
.dz-gauge.is-full .dz-gauge-mid b{color:var(--green)}
.dz-ready{
  display:inline-flex;align-items:center;gap:var(--s-2);
  margin-top:var(--s-3);padding:3px 10px;
  border-radius:var(--r-full);
  background:var(--green-wash);
  color:var(--green);
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.dz-ready svg{width:11px;height:11px}

/* --------------------------------------------------------------------------
   15. PANELES — sólo uno visible
   Con las cinco secciones apiladas el dashboard medía cinco pantallas.
   -------------------------------------------------------------------------- */
.dz-view{display:none}
.dz-view.is-on{display:block;animation:view-in var(--d3) var(--e-out) both}
@keyframes view-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .dz-view.is-on{animation:none}
}
/* Dentro del panel ya no hace falta el filete superior de sección */
.dz-view{padding:0;border-top:0}
.dz-block{padding-top:var(--s-8);margin-top:var(--s-8);border-top:1px solid var(--line)}
.dz-block:first-child{padding-top:0;margin-top:0;border-top:0}

/* --------------------------------------------------------------------------
   16. MINI GRÁFICOS DE TARJETA
   -------------------------------------------------------------------------- */
.dz-bars{
  display:flex;align-items:flex-end;gap:3px;
  height:38px;margin-top:auto;
  padding-top:var(--s-3);
}
.dz-bars i{
  flex:1;min-width:2px;
  border-radius:2px 2px 0 0;
  background:var(--blue);
  opacity:.85;
  transform-origin:bottom;
  animation:bar-rise var(--d4) var(--e-out) both;
}
.dz-bars.g i{background:var(--green)}
.dz-bars.y i{background:var(--yellow)}
@keyframes bar-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.dz-bars i{animation:none}}

/* Anillo de progreso del bloqueo */
.dz-ring{
  position:absolute;right:var(--s-6);bottom:var(--s-6);
  width:56px;height:56px;
  border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--blue) calc(var(--dz-ring-pct,0) * 1%),var(--sur-3) 0);
  transition:background 900ms var(--e-out);
}
.dz-ring::before{
  content:'';position:absolute;inset:5px;
  border-radius:50%;
  background:var(--bg-0);
}
.dz-ring::after{
  content:attr(data-pct) '%';
  position:relative;
  font-family:var(--f-display);
  font-size:var(--t-xs);font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--tx-1);
}
:root[data-theme="light"] .dz-ring::before{background:#fff}

/* Indicador de frescura del dato */
.dz-fresh{
  display:inline-flex;align-items:center;gap:var(--s-3);
  margin-left:auto;
  font-size:var(--t-xs);color:var(--tx-3);
  white-space:nowrap;
}
@media (max-width:720px){.dz-fresh{display:none}}

/* El anillo se comía la última línea del pie de la tarjeta. */
.dz-tile:has(.dz-ring) .dz-tile-f{padding-right:70px}
.dz-tile:has(.dz-ring) .dz-tile-num{padding-right:70px}

/* --------------------------------------------------------------------------
   17. AMARILLO = LO QUE SE GANA
   Antes sólo aparecía en avisos. Ahora marca las cifras de ingreso: pagos
   recibidos, comisiones de red y el umbral de despacho. El azul se queda con
   la navegación y el verde con lo ya liquidado on-chain.
   -------------------------------------------------------------------------- */

/* Tarjetas de ingreso */
.dz-tile-earn{border-color:rgba(255,214,10,.26)}
.dz-tile-earn .dz-tile-num{color:var(--yellow-hi)}
.dz-tile-earn .dz-tile-badge{background:var(--yellow-wash);color:#FFD60A}
:root[data-theme="light"] .dz-tile-earn .dz-tile-num{color:var(--yellow)}
:root[data-theme="light"] .dz-tile-earn .dz-tile-badge{color:var(--yellow)}
.dz-bars.y i{background:#FFD60A}

/* Medidor de despacho: la parte acumulada es dinero pendiente de cobrar */
.dz-gauge .g-fg{stroke:#FFD60A}
.dz-gauge.is-full .g-fg{stroke:var(--green)}
.dz-gauge-mid b{color:var(--yellow-hi)}
.dz-gauge.is-full .dz-gauge-mid b{color:var(--green)}
:root[data-theme="light"] .dz-gauge-mid b{color:var(--yellow)}
.dz-gauge-legend i.acc{background:#FFD60A}

/* Escalera de referidos: la comisión es ingreso */
.dz-lad-usd{color:var(--yellow-hi)}
:root[data-theme="light"] .dz-lad-usd{color:var(--yellow)}
.dz-lad-bar i{background:#FFD60A}
.dz-lad-n{color:var(--yellow-hi)}
:root[data-theme="light"] .dz-lad-n{color:var(--yellow)}

/* Referidos directos: el corte que te llevas */
.dz-person-n .v.pos{color:var(--yellow-hi)}
:root[data-theme="light"] .dz-person-n .v.pos{color:var(--yellow)}

/* Ledger: los movimientos de referido y bono son ingreso */
.dz-ltype.referral{background:var(--yellow-wash-2);color:var(--yellow-hi)}
.dz-ltype.bonus,.dz-ltype.residual{background:var(--yellow-wash);color:var(--yellow-hi)}
:root[data-theme="light"] .dz-ltype.referral,
:root[data-theme="light"] .dz-ltype.bonus,
:root[data-theme="light"] .dz-ltype.residual{color:var(--yellow)}

/* Cifras del encabezado de sección marcadas como acento */
.dz-figs .v.accent{color:var(--yellow-hi)}
:root[data-theme="light"] .dz-figs .v.accent{color:var(--yellow)}

/* Numeración de los pasos de primer uso */
.dz-onboard-n,.dz-step-n{color:#FFD60A}
:root[data-theme="light"] .dz-onboard-n,
:root[data-theme="light"] .dz-step-n{color:var(--yellow)}

/* ==========================================================================
   14. INSTRUMENTOS Y TABLAS DENSAS
   Lectura de plataforma de contratos: cada grafico va en su propia celda
   con cabecera, rango y leyenda, y los datos crudos se leen en tabla.
   ========================================================================== */

/* -- Chip de rango, el "Last 30 Days" de la referencia -- */
.dz-chip-range{
  flex:0 0 auto;
  padding:5px 11px;border-radius:var(--r-full);
  border:1px solid var(--line-2);background:var(--sur-2);
  font-size:var(--t-2xs);letter-spacing:.06em;color:var(--tx-3);
  white-space:nowrap;
}
.dz-chip-link{
  flex:0 0 auto;font-size:var(--t-xs);color:var(--blue-hi);
  text-decoration:none;white-space:nowrap;
}
.dz-chip-link:hover{text-decoration:underline}

/* -- Panel de instrumentos -- */
.dz-perf-grid{display:grid;gap:var(--s-5)}
@media (min-width:1000px){ .dz-perf-grid{grid-template-columns:1fr 1fr} }

.dz-perf-cell{
  padding:var(--s-5);
  border-radius:var(--r-3);
  border:1px solid var(--line);
  background:var(--sur-1);
}
:root[data-theme="light"] .dz-perf-cell{background:var(--sur-2)}

.dz-perf-h{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);margin-bottom:var(--s-3);
}
.dz-perf-h h4{
  font-size:var(--t-sm);font-weight:600;letter-spacing:-.01em;color:var(--tx-1);
}

/* -- Leyenda: sin ella dos series son adivinanza -- */
.dz-legend{
  display:flex;gap:var(--s-5);flex-wrap:wrap;
  margin-bottom:var(--s-4);
}
.dz-legend span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--t-2xs);color:var(--tx-3);letter-spacing:.04em;
}
.dz-legend i{display:block;flex:0 0 auto;border-radius:var(--r-full)}
.dz-legend i.b{width:16px;height:3px;background:var(--blue-hi)}
.dz-legend i.g{width:16px;height:3px;background:var(--green)}
.dz-legend i.l{width:16px;height:3px;background:var(--tx-4)}
.dz-legend i.bar{width:9px;height:11px;border-radius:2px;background:var(--blue)}

/* -- Proporcion de la referencia: tabla ancha, lateral estrecho -- */
@media (min-width:1000px){
  .dz-duo.dz-duo-wide{grid-template-columns:1.45fr .55fr}
}

/* -- Tabla densa -- */
.dz-panel-flush{display:flex;flex-direction:column}
.dz-tw{overflow-x:auto;margin:0 calc(var(--s-6) * -1) calc(var(--s-6) * -1)}
.dz-tbl{width:100%;border-collapse:collapse;font-size:var(--t-xs)}
.dz-tbl th{
  padding:var(--s-3) var(--s-4);
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-4);
  text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.dz-tbl th:first-child{padding-left:var(--s-6)}
.dz-tbl th:last-child{padding-right:var(--s-6)}
.dz-tbl td{
  padding:var(--s-4);
  border-bottom:1px solid var(--line);
  color:var(--tx-2);white-space:nowrap;vertical-align:middle;
}
.dz-tbl td:first-child{padding-left:var(--s-6)}
.dz-tbl td:last-child{padding-right:var(--s-6)}
.dz-tbl tbody tr:last-child td{border-bottom:0}
.dz-tbl tbody tr:hover td{background:var(--sur-2)}
.dz-tbl .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--tx-1)}
.dz-tbl .dim{color:var(--tx-4)}
.dz-tbl a{color:var(--blue-hi);text-decoration:none}
.dz-tbl a:hover{text-decoration:underline}
.dz-tbl .dz-ltype,.dz-tbl .dz-lstat{display:inline-block}
.dz-tbl-empty{
  padding:var(--s-8) var(--s-6) !important;
  text-align:center;color:var(--tx-3);white-space:normal !important;
}
.dz-tbl-empty a{color:var(--blue-hi)}
.dz-legend i.lg{width:9px;height:11px;border-radius:2px;background:var(--green)}
/* El lateral no debe estirarse a la altura de la tabla: dejaba un hueco muerto */
@media (min-width:1000px){ .dz-duo.dz-duo-wide > .dz-panel:last-child{align-self:start} }

/* -- Estado del contrato: severidad por color, como el panel de alertas -- */
.dz-cstats-h{
  font-size:var(--t-2xs);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-4);margin-bottom:var(--s-4);
}
.dz-cstats{display:flex;flex-direction:column;gap:var(--s-3);list-style:none;margin:0;padding:0}
.dz-cstat{
  position:relative;
  padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-radius:var(--r-2);
  border:1px solid var(--line);
  background:var(--sur-2);
  overflow:hidden;
}
/* Barra de severidad a la izquierda */
.dz-cstat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tx-4)}
.dz-cstat b{display:block;font-size:var(--t-xs);font-weight:600;color:var(--tx-1);margin-bottom:3px}
.dz-cstat span{display:block;font-size:var(--t-2xs);line-height:1.5;color:var(--tx-3)}
.dz-cstat.ok::before{background:var(--green)}
.dz-cstat.ok b{color:var(--green)}
.dz-cstat.warn{background:var(--loss-wash);border-color:var(--loss)}
.dz-cstat.warn::before{background:var(--loss)}
.dz-cstat.warn b{color:var(--loss)}
.dz-cstat.info::before{background:var(--yellow)}
.dz-cstat.info b{color:var(--yellow-hi)}
.dz-cstat.idle::before{background:var(--blue)}

/* -- Pildora de estado en la cabecera de cada KPI (gramatica de la referencia:
      etiqueta a la izquierda, estado a la derecha, cifra grande debajo) -- */
.dz-tile-k{justify-content:flex-start}
.dz-pill{
  margin-left:auto;flex:0 0 auto;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:var(--t-2xs);font-weight:600;letter-spacing:.04em;
  text-transform:none;font-variant-numeric:tabular-nums;
  border:1px solid transparent;
  background:var(--sur-3);color:var(--tx-3);
}
.dz-pill.ok{background:var(--green-wash);color:var(--green);border-color:rgba(0,226,138,.30)}
.dz-pill.warn{background:var(--yellow-wash);color:var(--yellow-hi);border-color:rgba(255,214,10,.30)}
.dz-pill.gold{background:var(--yellow-wash);color:var(--yellow-hi);border-color:rgba(255,214,10,.30)}
.dz-pill.bad{background:var(--loss-wash);color:var(--loss);border-color:rgba(255,90,110,.32)}
.dz-pill.idle{border-color:var(--line-2)}

/* La foto de fondo competia con la cifra. Se queda como ambiente, muy por
   debajo del dato, que es lo que la referencia hace: tarjetas limpias. */
.dz-tile::after{opacity:.07}
.dz-tile-hero::after{opacity:.09}
:root[data-theme="light"] .dz-tile::after{opacity:.04}

/* Grafico del hero: ocupa el hueco que tenia la onda decorativa */
.dz-hero-chart{position:relative;width:100%;height:190px;margin-top:var(--s-3)}
/* Las barritas de los KPI necesitan suelo para leerse como grafico */
.dz-bars{position:relative;padding-bottom:5px}
.dz-bars::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-2)}
.dz-legend i.y{width:16px;height:3px;background:var(--yellow-hi)}

/* -- Columna Trend: sparkline + flecha, como el Risk Score de la referencia -- */
.dz-trend{width:96px}
.dz-trend-w{display:inline-flex;align-items:center;gap:var(--s-3)}
.dz-trend svg{width:62px;height:20px;display:block}
.dz-arrow{
  width:0;height:0;flex:0 0 auto;
  border-left:5px solid transparent;border-right:5px solid transparent;
}
.dz-arrow.up{border-bottom:7px solid var(--green)}
.dz-arrow.down{border-top:7px solid var(--loss)}
.dz-trend.is-flat{color:var(--tx-4)}

/* -- Fila KPI compacta, como la referencia: los charts viven arriba, aqui
      solo van cifras. Sin el span de 2 filas el hero dejaba un hueco muerto. -- */
@media (min-width:1100px){
  .dz-tile-hero{grid-column:span 2;grid-row:auto}
  .dz-tile-gauge{grid-column:span 2;grid-row:auto}
}
.dz-tile-hero,.dz-tile-gauge{min-height:0}
/* El arco era enorme para el dato que da */
.dz-gauge{width:min(190px,100%)}
.dz-gauge-wrap{padding:var(--s-2) 0;gap:var(--s-3)}

/* Barra del cap dentro del KPI: rellena el hueco con dato, no con adorno */
.dz-cap{margin-top:auto;padding-top:var(--s-4)}
.dz-cap-k{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--t-2xs);letter-spacing:.10em;text-transform:uppercase;
  color:var(--tx-4);margin-bottom:var(--s-3);
}
.dz-cap-k .mono{color:var(--tx-2);text-transform:none;letter-spacing:0}
.dz-meter.sm{height:5px}

/* ==========================================================================
   15. ENLACE DE INVITACION EN CABECERA
   Es la accion que el usuario repite a diario, asi que abre el dashboard.
   Misma caja de vidrio del sistema; los colores de marca de cada red se
   quedan en el icono, no en todo el boton, para no romper la paleta.
   ========================================================================== */
.dz-invite{
  display:grid;gap:var(--s-6);
  grid-template-columns:1fr;
  padding:var(--s-6);
  margin-bottom:var(--s-5);
  border-radius:var(--r-4);
  background:var(--glass-bg);
  background-image:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-lift),var(--sh-2);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
:root[data-theme="light"] .dz-invite{background:#fff;box-shadow:var(--sh-1)}
@media (min-width:820px){ .dz-invite{grid-template-columns:1fr auto;align-items:center} }

.dz-invite-main{min-width:0}
.dz-invite-head{display:flex;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-5)}
.dz-invite-ico{
  width:42px;height:42px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:var(--r-3);
  background:var(--blue-wash);color:var(--blue-hi);
  border:1px solid rgba(10,108,255,.28);
}
.dz-invite-ico svg{width:21px;height:21px}
.dz-invite-head h3{font-size:var(--t-md);letter-spacing:-.015em;margin-bottom:3px}
.dz-invite-head p{font-size:var(--t-xs);color:var(--tx-3);line-height:1.55}
.dz-invite-head p b{color:var(--yellow-hi);font-weight:600}

/* Campo del enlace: el input y el boton comparten una sola pieza */
.dz-invite-field{
  display:flex;align-items:center;gap:var(--s-3);
  padding:5px 5px 5px var(--s-4);
  border-radius:var(--r-3);
  background:var(--sur-1);
  border:1px solid var(--line-2);
  margin-bottom:var(--s-4);
  transition:border-color var(--d2) var(--e);
}
.dz-invite-field:focus-within{border-color:var(--blue)}
:root[data-theme="light"] .dz-invite-field{background:var(--sur-2)}
.dz-invite-link-ico{flex:0 0 auto;display:grid;place-items:center;color:var(--tx-4)}
.dz-invite-link-ico svg{width:17px;height:17px}
.dz-invite-field input{
  flex:1;min-width:0;
  background:none;border:0;outline:none;padding:var(--s-3) 0;
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--tx-1);
  text-overflow:ellipsis;
}
.dz-invite-copy{
  flex:0 0 auto;position:relative;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px var(--s-5);border:0;cursor:pointer;
  border-radius:calc(var(--r-3) - 3px);
  background:var(--blue);color:#fff;
  font-family:var(--f-body);font-size:var(--t-xs);font-weight:600;
  transition:background var(--d2) var(--e),transform var(--d1) var(--e);
}
.dz-invite-copy:hover{background:var(--blue-hi)}
.dz-invite-copy:active{transform:scale(.97)}
.dz-invite-copy svg{width:15px;height:15px}
.dz-invite-copy .i-done,.dz-invite-copy .t-done{display:none}
.dz-invite-copy.is-done{background:var(--green);color:var(--on-green,#04231A)}
.dz-invite-copy.is-done .i-copy,.dz-invite-copy.is-done .t-copy{display:none}
.dz-invite-copy.is-done .i-done,.dz-invite-copy.is-done .t-done{display:inline}

/* Botones de compartir compactos, color de marca solo en el icono */
.dz-share-sm{margin:0}
.dz-share-sm .dz-share-a{padding:8px var(--s-4);font-size:var(--t-2xs)}
.dz-share-a.wa svg{color:#25D366}
.dz-share-a.tg svg{color:#2AABEE}
.dz-share-a.fb svg{color:#4C7BF4}
.dz-share-a.xx svg{color:var(--tx-1)}
.dz-share-a.wa:hover{border-color:#25D366}
.dz-share-a.tg:hover{border-color:#2AABEE}
.dz-share-a.fb:hover{border-color:#4C7BF4}

/* QR */
.dz-invite-qr{display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}
.dz-invite-qr .dz-qr{width:120px;height:120px}
.dz-invite-qr span{
  font-size:var(--t-2xs);font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;color:var(--tx-4);
}
/* En movil el QR ocupa demasiado: el enlace y los botones bastan */
@media (max-width:819px){ .dz-invite-qr{display:none} }


/* La rejilla 2x2 heredada estiraba los botones a todo lo ancho. En cabecera
   van compactos y en una sola fila, como en la referencia del cliente. */
.dz-share.dz-share-sm{
  display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:0;
}
.dz-share.dz-share-sm .dz-share-a{min-height:38px;padding:0 var(--s-5);flex:0 0 auto}
/* En movil que ocupen los cuatro el ancho a partes iguales */
@media (max-width:520px){
  .dz-share.dz-share-sm .dz-share-a{flex:1 1 calc(50% - var(--s-3));justify-content:center}
}

/* ── Performance history tables (week / month only) ─────────────────────── */
.dz-phist{padding-bottom:var(--s-4)}
.dz-phist-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 calc(var(--s-4) * -1);
  padding:0 var(--s-4);
  scrollbar-width:thin;
  scrollbar-color:#2A3348 transparent;
}
.dz-phist-scroll::-webkit-scrollbar{height:7px}
.dz-phist-scroll::-webkit-scrollbar-button{display:none;width:0;height:0}
.dz-phist-scroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
  border-radius:999px;
}
.dz-phist-scroll::-webkit-scrollbar-thumb{
  background:#2A3348;
  border-radius:999px;
}
.dz-phist-scroll::-webkit-scrollbar-thumb:hover{background:#3A455C}
:root[data-theme="light"] .dz-phist-scroll{
  scrollbar-color:var(--line-2) transparent;
}
:root[data-theme="light"] .dz-phist-scroll::-webkit-scrollbar-track{background:var(--sur-3)}
:root[data-theme="light"] .dz-phist-scroll::-webkit-scrollbar-thumb{background:var(--line-2)}
:root[data-theme="light"] .dz-phist-scroll::-webkit-scrollbar-thumb:hover{background:var(--tx-4)}

.dz-phist-table{
  width:100%;
  min-width:30rem;
  table-layout:fixed;   /* el ancho lo dicta el <colgroup>, no el contenido */
  border-collapse:separate;
  border-spacing:0;
  margin-top:var(--s-2);
  font-size:.875rem;
}
/* Reparto fijo: semanas y meses comparten exactamente las mismas columnas */
.dz-phist-col-period{width:34%}
.dz-phist-col-num{width:22%}
.dz-phist-table thead th{
  position:sticky;top:0;z-index:1;
  padding:.62rem .8rem .58rem;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tx-3);
  text-align:left;
  background:var(--sur-3);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
:root[data-theme="light"] .dz-phist-table thead th{
  color:var(--tx-2);
  background:var(--sur-3);
}
/* Fondo también en la fila: tapa la costura de subpíxel entre celdas */
.dz-phist-table thead tr{background:var(--sur-3)}
.dz-phist-table thead th.dz-phist-num{text-align:right}
.dz-phist-table .dz-phist-mid,
.dz-phist-table thead th.dz-phist-mid{text-align:center}
.dz-phist-table tbody tr{
  transition:background .15s ease;
}
.dz-phist-table tbody tr:nth-child(even):not(.is-current){
  background:color-mix(in srgb, var(--tx-1) 2.5%, transparent);
}
.dz-phist-table tbody tr:hover{
  background:color-mix(in srgb, var(--blue, #3b82f6) 6%, transparent);
}
.dz-phist-table tbody tr.is-current{
  background:color-mix(in srgb, var(--blue, #3b82f6) 9%, transparent);
}
/* Barra lateral como fondo (no box-shadow inset: con coordenadas fraccionarias
   dejaba un hilo de 1px sobre la celda) */
.dz-phist-table tbody tr.is-current td:first-child{
  background:linear-gradient(var(--blue, #3b82f6), var(--blue, #3b82f6)) left / 3px 100% no-repeat;
}
.dz-phist-table td{
  padding:.68rem .8rem;
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  vertical-align:middle;
}
.dz-phist-table tbody tr:last-child td{border-bottom:0}
.dz-phist-period{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-phist-label{
  font-weight:600;
  color:var(--tx-1);
  letter-spacing:-.01em;
}
.dz-phist-now{
  display:inline-block;
  margin-left:.45rem;
  padding:.12rem .42rem;
  border-radius:999px;
  font-size:.68em;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--blue, #3b82f6);
  background:color-mix(in srgb, var(--blue, #3b82f6) 14%, transparent);
  vertical-align:middle;
}
.dz-phist-num{text-align:right}
/* Ancho uniforme (7 dígitos tabulares: "+00.00%") y texto a la derecha:
   todas las pastillas miden igual y los decimales caen en la misma vertical */
.dz-phist-chip{
  display:inline-block;
  min-width:calc(7ch + 1rem);
  padding:.22rem .5rem;
  text-align:right;
  border-radius:.4rem;
  font-family:var(--f-mono);
  font-size:.86em;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  line-height:1.2;
}
.dz-phist-chip.eng{
  color:var(--yellow);
  background:var(--yellow-wash);
}
.dz-phist-chip.you{
  color:var(--green, #22c55e);
  background:color-mix(in srgb, var(--green, #22c55e) 12%, transparent);
}
.dz-phist-cash{
  font-family:var(--f-mono);
  font-size:.86em;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  color:var(--tx-1);
}
@media (max-width:520px){
  .dz-phist-scroll{margin:0 calc(var(--s-3) * -1);padding:0 var(--s-3)}
  .dz-phist-table{min-width:26rem;font-size:.8125rem}
  .dz-phist-col-period{width:37%}
  .dz-phist-col-num{width:21%}
  .dz-phist-table thead th,
  .dz-phist-table td{padding:.55rem .5rem}
  .dz-phist-chip{min-width:calc(7ch + .72rem);padding:.18rem .36rem}
  /* En móvil la tabla ya es más chica: sin bajar de ~12px para que se lea */
  .dz-phist-chip,.dz-phist-cash{font-size:.92em}
}

/* --------------------------------------------------------------------------
   Network ladder — volume columns (additive; do not rewrite base .dz-ladder)
   Nota: el media @520 del ladder base oculta .dz-lad-ppl y fuerza 4 cols;
   aquí se redeclara con más especificidad para no solapar Volume/Earned.
   -------------------------------------------------------------------------- */
.dz-ladder.dz-ladder-vol li{
  grid-template-columns:28px minmax(0,1fr) 48px 44px minmax(72px,1fr) minmax(66px,1fr);
}
.dz-ladder.dz-ladder-vol .dz-lad-vol,
.dz-ladder.dz-ladder-vol .dz-lad-usd,
.dz-ladder.dz-ladder-vol .dz-lad-pct,
.dz-ladder.dz-ladder-vol .dz-lad-ppl{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dz-lad-head{
  border-bottom:1px solid var(--line) !important;
  padding-top:0 !important;padding-bottom:var(--s-2) !important;
  font-size:var(--t-2xs) !important;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx-4);
}
.dz-lad-head span{text-align:right}
.dz-lad-head .dz-lad-name,.dz-lad-head .dz-lad-n{text-align:left}
.dz-lad-vol{text-align:right;color:var(--tx-2);font-size:var(--t-xs)}

/* Tablet / móvil ancho: L# · % · People · Volume · Earned (sin label) */
@media (max-width:720px){
  .dz-ladder.dz-ladder-vol li{
    grid-template-columns:28px 44px 36px minmax(0,1.1fr) minmax(0,1fr);
    gap:var(--s-2);
    font-size:var(--t-xs);
    padding-left:0;
    padding-right:0;
  }
  .dz-ladder.dz-ladder-vol .dz-lad-name,
  .dz-ladder.dz-ladder-vol .dz-lad-head .dz-lad-name{display:none !important}
  .dz-ladder.dz-ladder-vol .dz-lad-ppl{display:block !important}
  .dz-ladder.dz-ladder-vol .dz-lad-pct{display:block !important}
}

/* Móvil estrecho: L# · Volume · Earned (sin %, people, label) */
@media (max-width:480px){
  .dz-ladder.dz-ladder-vol li{
    grid-template-columns:32px minmax(0,1fr) minmax(0,1fr);
    gap:var(--s-3);
  }
  .dz-ladder.dz-ladder-vol .dz-lad-name,
  .dz-ladder.dz-ladder-vol .dz-lad-pct,
  .dz-ladder.dz-ladder-vol .dz-lad-ppl,
  .dz-ladder.dz-ladder-vol .dz-lad-head .dz-lad-name,
  .dz-ladder.dz-ladder-vol .dz-lad-head .dz-lad-pct,
  .dz-ladder.dz-ladder-vol .dz-lad-head .dz-lad-ppl{display:none !important}
}