/* ============================================================
   CLIENTE UI
   Archivo: /bonos/assets/css/client.css
   Scope: body.ui-client

   Limpieza CSS (v2.6):
   - ✅ TOPBAR se gestiona en /bonos/assets/css/topbar.css (común)
   - ✅ FOOTER se gestiona en /bonos/assets/css/footer.css (común)
   - Este archivo conserva TODO lo específico del cliente (cdb/cpl/modal/gráficos)
   ============================================================ */

body.ui-client{
  background: radial-gradient(900px 500px at 15% 10%, rgba(59,130,246,.18), transparent 55%),
              radial-gradient(900px 500px at 85% 10%, rgba(34,197,94,.18), transparent 55%),
              #0b0f14;
  color: #e5e7eb;
  min-height: 100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body.ui-client a{ color: #93c5fd; }
body.ui-client a:hover{ color: #bfdbfe; }

/* wrapper */
body.ui-client .mainwrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 12px 48px;
}

body.ui-client .cdb{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Evita selección/callout accidental en dashboard cliente móvil (UI tipo app). */
@media (hover: none) and (pointer: coarse){
  body.ui-client .cdb{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  body.ui-client .cdb :is(input, textarea, select, option, [contenteditable], [contenteditable="true"]){
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }
}

/* cards */
body.ui-client .cdb__card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  overflow: hidden;
}

body.ui-client .cdb__cardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 14px 10px;
}

body.ui-client .cdb__cardHead--sticky{
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(11,15,20,.92), rgba(11,15,20,.60));
  backdrop-filter: blur(10px);
}

body.ui-client .cdb__h2{
  font-size: 16px;
  font-weight: 900;
  margin: 0;
  letter-spacing: .2px;
}

body.ui-client .cdb__muted{
  font-size: 12px;
  color: rgba(159,176,195,.95);
  margin-top: 4px;
}

body.ui-client .cdb__pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  font-size: 12px;
  color: rgba(231,237,247,.92);
}

body.ui-client .cdb__empty{
  padding: 14px;
  color: rgba(159,176,195,.95);
  font-size: 13px;
}

/* buttons */
body.ui-client .cdb__linkBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(231,237,247,.94);
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  transition: transform .12s ease, background .12s ease;
}
body.ui-client .cdb__linkBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
}

body.ui-client .cdb__cardFoot{
  display:flex;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

body.ui-client .cdb__install{
  overflow: visible;
}

body.ui-client .cdb__installRow{
  align-items: center;
}

body.ui-client .cdb__installHelp{
  margin: 0 14px 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(231,237,247,.92);
  font-size: 12px;
  line-height: 1.4;
}

/* timeline / list */
body.ui-client .cdb__timeline{
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
}

body.ui-client .cdb__timeline--scroll{
  max-height: 520px;
  overflow:auto;
  padding-top: 8px;
}

body.ui-client .cdb__mrow{
  display:flex;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

body.ui-client .cdb__micon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

body.ui-client .cdb__miconImg{
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

body.ui-client .cdb__miconTxt{
  font-size: 18px;
}

body.ui-client .cdb__mbody{ flex: 1; min-width: 0; }

body.ui-client .cdb__mhead{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}

body.ui-client .cdb__mtitle{
  font-weight: 900;
  font-size: 14px;
  color: rgba(231,237,247,.96);
}

body.ui-client .cdb__mtag{
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 900;
  color: rgba(231,237,247,.90);
  flex: 0 0 auto;
}

body.ui-client .cdb__mmeta{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

body.ui-client .cdb__chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-size: 12px;
  color: rgba(231,237,247,.90);
}

body.ui-client .cdb__chip--pos{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
}
body.ui-client .cdb__chip--neg{
  border-color: rgba(239,68,68,.30);
  background: rgba(239,68,68,.10);
}

body.ui-client .cdb__chip--plate{
  background: #ffffff;
  border-color: #ffffff;
  color: #0f172a;
  font-weight: 900;
  letter-spacing: .06em;
}

/* ✅ Nota en movimientos (para evitar inline styles) */
body.ui-client .cdb__note{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(159,176,195,.95);
}

body.ui-client .cdb__plateBadge{
  display:inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  max-width: 100%;
}

body.ui-client .cdb__plateTxt{
  font-weight: 950;
  letter-spacing: .16em;
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(231,237,247,.96);
}

body.ui-client .cdb__plateAlias{
  font-size: 12px;
  color: rgba(159,176,195,.95);
}

/* HERO base */
.cdb__hero{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1200px 420px at 20% 20%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(900px 380px at 85% 15%, rgba(59,130,246,.18), transparent 58%),
    rgba(255,255,255,.03);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

body.ui-client .cdb__heroTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

body.ui-client .cdb__kicker{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(159,176,195,.95);
}

body.ui-client .cdb__title{
  margin: 4px 0 0 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: .2px;
}

body.ui-client .cdb__badge{
  min-width: 56px;
  height: 34px;
  padding: 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(232,238,246,.95);
}

body.ui-client .cdb__sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(159,176,195,.95);
}

body.ui-client .cdb__hint{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(159,176,195,.95);
}

/* “glass” hero */
body.ui-client .cdb__hero--glass{
  background:
    radial-gradient(1200px 520px at 30% 20%, rgba(34,197,94,.16), transparent 65%),
    radial-gradient(1200px 520px at 80% 20%, rgba(59,130,246,.16), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  backdrop-filter: blur(10px);
}

/* Washes card */
body.ui-client .cdb__washCard{
  position: relative;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(112, 206, 255, .18);
  background:
    radial-gradient(135% 110% at 0% 0%, rgba(29, 78, 216, .22), rgba(29, 78, 216, 0) 45%),
    radial-gradient(120% 100% at 100% 0%, rgba(16, 185, 129, .18), rgba(16, 185, 129, 0) 44%),
    linear-gradient(155deg, rgba(7, 12, 24, .98), rgba(10, 20, 35, .97) 56%, rgba(5, 21, 22, .98));
  box-shadow:
    0 28px 70px rgba(2, 8, 23, .46),
    inset 0 1px 0 rgba(255,255,255,.06);
}

body.ui-client .cdb__washCard::before,
body.ui-client .cdb__washCard::after{
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

body.ui-client .cdb__washCard::before{
  top: -52px;
  right: -32px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .20), rgba(34, 211, 238, 0) 68%);
  filter: blur(6px);
}

body.ui-client .cdb__washCard::after{
  left: 18px;
  right: 18px;
  bottom: 102px;
  height: 1px;
  background: linear-gradient(90deg, rgba(56, 189, 248, .24), rgba(148, 163, 184, .08), rgba(52, 211, 153, .24));
}

body.ui-client .cdb__washCardHead,
body.ui-client .cdb__washCardHero,
body.ui-client .cdb__washCardHeroCopy,
body.ui-client .cdb__washCardCopy,
body.ui-client .cdb__washCardBar,
body.ui-client .cdb__washCardCta{
  position: relative;
  z-index: 1;
}

body.ui-client .cdb__washCardHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body.ui-client .cdb__washCardTitleWrap{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.ui-client .cdb__washCardIcon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(103, 232, 249, .24);
  background:
    linear-gradient(180deg, rgba(14, 165, 233, .28), rgba(37, 99, 235, .10)),
    rgba(255,255,255,.05);
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

body.ui-client .cdb__washCardIcon svg{
  width: 24px;
  height: 24px;
  display: block;
}

body.ui-client .cdb__washCardEyebrow{
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #f8fbff;
}

body.ui-client .cdb__washCardStatus{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(110, 231, 183, .28);
  background: rgba(34, 197, 94, .14);
  color: #8df7a8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

body.ui-client .cdb__washCardStatusDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #7bf1a8;
  box-shadow: 0 0 0 4px rgba(123, 241, 168, .16);
}

body.ui-client .cdb__washCardHero{
  display: grid;
  grid-template-columns: minmax(144px, 196px) minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  margin-top: 16px;
  padding: 18px 12px 8px 16px;
  border-radius: 24px;
  border: 1px solid rgba(70, 167, 255, .20);
  background:
    linear-gradient(135deg, rgba(11, 19, 33, .92), rgba(11, 19, 33, .64)),
    radial-gradient(120% 140% at 80% 20%, rgba(34, 211, 238, .12), rgba(34, 211, 238, 0) 45%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

body.ui-client .cdb__washCardHeroMain{
  display: block;
  min-width: 0;
  position: relative;
  z-index: 1;
}

body.ui-client .cdb__washCardHeroCopy{
  width: min(100%, 196px);
}

body.ui-client .cdb__washCardCount{
  font-size: clamp(82px, 23vw, 122px);
  line-height: .78;
  font-weight: 950;
  letter-spacing: -.06em;
  color: #2ec8ff;
  text-shadow:
    0 0 22px rgba(46, 200, 255, .18),
    0 16px 30px rgba(2, 8, 23, .42);
}

body.ui-client .cdb__washCardHeroText{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 188px;
}

body.ui-client .cdb__washCardHeroText span{
  font-size: clamp(22px, 6.4vw, 31px);
  line-height: 1;
  font-weight: 500;
  color: rgba(245, 248, 255, .96);
}

body.ui-client .cdb__washCardHeroText strong{
  font-size: clamp(25px, 7.2vw, 37px);
  line-height: .98;
  letter-spacing: -.04em;
  color: #f8fbff;
}

body.ui-client .cdb__washCardArt{
  position: relative;
  align-self: end;
  justify-self: end;
  width: min(100%, 248px);
  min-width: 124px;
  pointer-events: none;
  filter: drop-shadow(0 18px 28px rgba(2, 8, 23, .42));
}

body.ui-client .cdb__washCardArt::before{
  content: "";
  position: absolute;
  inset: 22% 8% 6% 14%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(56, 189, 248, .28), rgba(56, 189, 248, 0) 68%);
  filter: blur(20px);
  z-index: 0;
}

body.ui-client .cdb__washCardArtImg{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: translate(18px, 18px) scale(1.08);
  transform-origin: bottom right;
}

body.ui-client .cdb__washCardCopy{
  margin-top: 16px;
}

body.ui-client .cdb__washCardLead,
body.ui-client .cdb__washCardSub{
  margin: 0;
}

body.ui-client .cdb__washCardLead{
  font-size: 17px;
  font-weight: 800;
  line-height: 1.22;
  color: #f3f7ff;
}

body.ui-client .cdb__washCardSub{
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(203, 217, 234, .92);
}

body.ui-client .cdb__washCardBar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(8, 15, 27, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

body.ui-client .cdb__washCardBarItem{
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  color: rgba(241, 245, 249, .94);
}

body.ui-client .cdb__washCardBarItem--count{
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

body.ui-client .cdb__washCardBarItem--uses{
  margin-left: auto;
}

body.ui-client .cdb__washCardCube{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(125, 211, 252, .70);
  background:
    linear-gradient(135deg, rgba(56, 189, 248, .28), rgba(56, 189, 248, .10)),
    rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

body.ui-client .cdb__washCardBarItem--name{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(253, 186, 116, .10);
  border: 1px solid rgba(253, 186, 116, .16);
  color: #ffd28d;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ui-client .cdb__washCardBarItem--uses{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .18);
  border: 1px solid rgba(96, 165, 250, .12);
  color: #dbeafe;
  white-space: nowrap;
}

body.ui-client .cdb__washCardCta{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(56, 189, 248, .28);
  background:
    linear-gradient(135deg, rgba(14, 116, 144, .30), rgba(37, 99, 235, .28) 52%, rgba(20, 184, 166, .24)),
    rgba(255,255,255,.04);
  color: #f8fbff;
  text-decoration: none;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 34px rgba(13, 28, 45, .28);
  transition: transform .14s ease, filter .14s ease;
}

body.ui-client .cdb__washCardCta:hover{
  transform: translateY(-1px);
  filter: saturate(1.08);
}

body.ui-client .cdb__washCardCta .cdb__washCardLegacyIcon{
  display: none;
}

body.ui-client .cdb__washCardCta::before{
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(#ffffff, #ffffff) 50% 32% / 11px 2px no-repeat,
    linear-gradient(#ffffff, #ffffff) 50% 50% / 11px 2px no-repeat,
    linear-gradient(#ffffff, #ffffff) 42% 68% / 7px 2px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

body.ui-client .cdb__washCardCtaLabel{
  font-size: 16px;
  line-height: 1.1;
}

body.ui-client .cdb__washCardCtaArrow{
  font-size: 34px;
  line-height: .8;
  color: rgba(248, 251, 255, .96);
}

@media (max-width: 520px){
  body.ui-client .cdb__washCard{
    padding: 16px;
    border-radius: 24px;
  }

  body.ui-client .cdb__washCardStatus{
    padding: 7px 12px;
    font-size: 11px;
  }

  body.ui-client .cdb__washCardHero{
    grid-template-columns: minmax(120px, 146px) minmax(0, 1fr);
    gap: 6px;
    padding: 16px 8px 8px 14px;
  }

  body.ui-client .cdb__washCardHeroCopy{
    width: min(100%, 142px);
  }

  body.ui-client .cdb__washCardCount{
    font-size: clamp(74px, 26vw, 98px);
  }

  body.ui-client .cdb__washCardHeroText{
    max-width: 140px;
  }

  body.ui-client .cdb__washCardHeroText span{
    font-size: 21px;
  }

  body.ui-client .cdb__washCardHeroText strong{
    font-size: 24px;
  }

  body.ui-client .cdb__washCardArt{
    width: min(100%, 194px);
    min-width: 118px;
  }

  body.ui-client .cdb__washCardArtImg{
    transform: translate(10px, 16px) scale(1.08);
  }

  body.ui-client .cdb__washCardLead{
    font-size: 15px;
  }

  body.ui-client .cdb__washCardSub{
    font-size: 14px;
  }

  body.ui-client .cdb__washCardBar{
    gap: 8px;
    padding: 10px;
  }

  body.ui-client .cdb__washCardBarItem{
    font-size: 12px;
  }

  body.ui-client .cdb__washCardBarItem--name,
  body.ui-client .cdb__washCardBarItem--uses{
    padding: 9px 12px;
  }
}

/* CTA glass */
body.ui-client .cdb__ctaGlass{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(231,237,247,.95);
  text-decoration: none;
  font-weight: 950;
  transition: transform .12s ease, background .12s ease;
}
body.ui-client .cdb__ctaGlass:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
}
body.ui-client .cdb__ctaIco{ font-size: 16px; }

/* ============================================================
   KPI AHORRO (HOME) – Compactación desktop + ajuste altura móvil
   ============================================================ */

body.ui-client .cdb__hero--save{
  padding: 14px 14px 12px 14px;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(245, 158, 11, .18), transparent 58%),
    radial-gradient(900px 420px at 85% 10%, rgba(34,197,94,.12), transparent 62%),
    rgba(255,255,255,.03);
  min-height: 0;
}

body.ui-client .cdb__badge--soft{
  border-color: rgba(245,158,11,.28);
  background: rgba(245,158,11,.10);
  color: rgba(255,236,190,.95);
}

/* Grid ahorro */
body.ui-client .cdb__saveGrid{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
}

body.ui-client .cdb__saveRight{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 2px 0;
}

body.ui-client .cdb__saveImg{
  display:block;
  width: 150px;
  max-width: 30vw;
  height: auto;
  max-height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.42));
  transform: translateY(2px);
}

body.ui-client .cdb__saveLeft{
  flex: 1 1 auto;
  min-width: 0;
}

body.ui-client .cdb__saveAmount{
  display:flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}

body.ui-client .cdb__saveValue{
  font-size: 44px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: #f5d06a;
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 12px 26px rgba(0,0,0,.42);
}

body.ui-client .cdb__saveCurrency{
  font-size: 22px;
  font-weight: 900;
  color: #f5d06a;
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 12px 26px rgba(0,0,0,.42);
}

body.ui-client .cdb__saveCopy{
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.25;
  color: rgba(230,236,246,.90);
}

body.ui-client .cdb__hero--save .cdb__hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(159,176,195,.95);
}

/* Desktop/Windows: compacto */
@media (min-width: 900px){
  body.ui-client .cdb__hero--save{
    padding: 12px 14px 10px;
  }
  body.ui-client .cdb__hero--save .cdb__title{
    font-size: 20px;
  }
  body.ui-client .cdb__hero--save .cdb__sub{
    font-size: 12px;
  }
  body.ui-client .cdb__saveAmount{
    margin-top: 4px;
  }
  body.ui-client .cdb__saveValue{
    font-size: 40px;
  }
  body.ui-client .cdb__saveCurrency{
    font-size: 20px;
  }
  body.ui-client .cdb__saveImg{
    width: 140px;
    max-height: 86px;
  }
}

/* MÓVIL: evitar tarjeta altísima (lado a lado) */
@media (max-width: 520px){
  body.ui-client .cdb__hero--save{
    padding: 14px 14px 12px;
  }

  body.ui-client .cdb__saveGrid{
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 10px;
  }

  body.ui-client .cdb__saveRight{
    width: auto;
    justify-content:flex-end;
    padding: 0;
  }

  body.ui-client .cdb__saveImg{
    width: 118px;
    max-width: 34vw;
    max-height: 92px;
    transform: translateY(4px);
  }

  body.ui-client .cdb__saveLeft{
    flex: 1 1 auto;
    min-width: 0;
  }

  body.ui-client .cdb__saveValue{
    font-size: 52px;
    color: #ffd56b;
    text-shadow:
      0 1px 0 rgba(0,0,0,.40),
      0 0 18px rgba(245, 158, 11, .22),
      0 14px 28px rgba(0,0,0,.48);
  }

  body.ui-client .cdb__saveCurrency{
    font-size: 22px;
    color: #ffd56b;
    text-shadow:
      0 1px 0 rgba(0,0,0,.40),
      0 0 18px rgba(245, 158, 11, .22),
      0 14px 28px rgba(0,0,0,.48);
  }

  body.ui-client .cdb__hero--save .cdb__sub{ font-size: 12px; }
  body.ui-client .cdb__saveCopy{ font-size: 13px; }
  body.ui-client .cdb__hero--save .cdb__hint{ font-size: 11px; }
}

body.ui-client .cdb__hint--strong{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(231,237,247,.92);
}

/* ============================================================
   FIX: Gráficos “Consumo por vehículo”
   ============================================================ */

body.ui-client .cdb__plateChart{
  position: relative;
  padding: 0 14px 16px;
}

body.ui-client .cdb__plateChartGrid{
  position: absolute;
  inset: 0;
  pointer-events:none;
  opacity: .35;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.06), transparent 18%),
    linear-gradient(to right, rgba(255,255,255,.06), transparent 22%);
  background-size: 100% 52px, 84px 100%;
  mix-blend-mode: overlay;
}

body.ui-client .cdb__plateChartScroll{
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

body.ui-client .cdb__plateBars{
  display:flex;
  align-items:flex-end;
  gap: 14px;
  min-height: 220px;
  padding: 12px 6px 0;
}

body.ui-client .cdb__plateCol{
  width: 82px;
  flex: 0 0 auto;
  text-align: center;
  position: relative;
}

body.ui-client .cdb__plateTop{
  height: 32px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-bottom: 8px;
}

body.ui-client .cdb__plateNum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight: 950;
  font-size: 12px;
  color: rgba(231,237,247,.95);
}

body.ui-client .cdb__plateBarWrap{
  position: relative;
  height: 150px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

body.ui-client .cdb__plateBar{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 12px;
}

body.ui-client .cdb__plateMainBadge{
  position:absolute;
  left: 8px;
  top: 8px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 900;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(231,237,247,.92);
}

body.ui-client .cdb__plateLabel{
  margin-top: 10px;
  font-weight: 950;
  letter-spacing: .14em;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(231,237,247,.92);
}

body.ui-client .cdb__plateSub{
  font-size: 11px;
  color: rgba(159,176,195,.95);
  margin-top: 2px;
}

body.ui-client .cdb__plateChart svg,
body.ui-client .cdb__plateChart canvas{
  display:block;
  max-width: 100%;
}

/* ============================================================
   RESPONSIVE GLOBAL
   ============================================================ */
@media (min-width: 900px){
  body.ui-client .mainwrap{
    padding: 22px 14px 60px;
  }
  body.ui-client .cdb{
    gap: 16px;
  }
  body.ui-client .cdb__cardHead{
    padding: 16px 16px 12px;
  }
  body.ui-client .cdb__timeline{
    padding: 0 16px 16px;
  }
  body.ui-client .cdb__cardFoot{
    padding: 12px 16px 16px;
  }
  body.ui-client .cdb__plateChart{
    padding: 0 16px 16px;
  }
}

/* scrollbars (webkit) */
body.ui-client ::-webkit-scrollbar{ height: 10px; width: 10px; }
body.ui-client ::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 999px; }
body.ui-client ::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; }
body.ui-client ::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.20); }

/* ============================================================
   CLIENT / PLATES (Mis matrículas)
   ============================================================ */

body.ui-client .cpl{
  display: grid;
  gap: 14px;
}

/* Hero */
body.ui-client .cpl__hero{
  padding: 0;
  overflow: hidden;
}
body.ui-client .cpl__hero.card{
  padding: 16px;
}
body.ui-client .cpl__heroTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
body.ui-client .cpl__kicker{
  font-size: 12px;
  font-weight: 850;
  color: rgba(159,176,195,.95);
}
body.ui-client .cpl__title{
  margin: 4px 0 0 0;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: .2px;
}
body.ui-client .cpl__sub{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(159,176,195,.95);
}

/* Forms */
body.ui-client .cpl__form{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
body.ui-client .cpl__form label{
  font-size: 12px;
  font-weight: 850;
  color: rgba(231,237,247,.92);
}
body.ui-client .cpl__plateInput{
  text-transform: uppercase;
}

/* Alerts (cliente) */
body.ui-client .cpl .alert{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  font-size: 13px;
  font-weight: 800;
}

body.ui-client .cpl .alert--danger{
  color: #b91c1c;
  background: #fde047;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245,158,11,.22);
}

body.ui-client .cpl .alert--success{
  color: #ecfdf5;
  background: rgba(16,185,129,.22);
  border-color: rgba(16,185,129,.58);
}

/* List */
body.ui-client .cpl__list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
body.ui-client .cpl__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
body.ui-client .cpl__left{ min-width: 0; }
body.ui-client .cpl__plate{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.ui-client .cpl__badgeMain{
  display:inline-flex;
  align-items:center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(231,237,247,.92);
}
body.ui-client .cpl__alias{
  margin-top: 6px;
}

body.ui-client .cpl__actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
  flex: 0 0 auto;
}
body.ui-client .cpl__inline{ margin: 0; }
body.ui-client .cpl__btnSm{
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
}
body.ui-client .cpl__btnDanger{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color: rgba(255,230,230,.95);
}
body.ui-client .cpl__back{
  margin-top: 12px;
}

/* ============================================================
   FIX MÓVIL · Mis matrículas (solape botones/texto)
   ============================================================ */

@media (max-width: 520px){

  /* La fila pasa a layout vertical: evita que el texto “empuje” botones */
  body.ui-client .cpl__row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Matrícula + badge se adaptan, sin invadir el área de acciones */
  body.ui-client .cpl__plate{
    flex-wrap: wrap;
    gap: 8px;
    letter-spacing: .10em; /* menos agresivo en móvil */
    font-size: 13px;
  }

  body.ui-client .cpl__left{
    width: 100%;
  }

  /* Acciones: ocupan toda la fila y hacen wrap real */
  body.ui-client .cpl__actions{
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  /* Botones compactos y sin desbordes */
  body.ui-client .cpl__btnSm{
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  /* Si hay 3 botones, que no se monten: permitimos 2 por fila cómodas */
  body.ui-client .cpl__actions > *{
    flex: 0 0 auto;
  }

  /* “Hacer principal” suele ser el más largo: que pueda ir a nueva línea sin romper */
  body.ui-client .cpl__actions form{
    margin: 0;
  }
}

/* ============================================================
   PACK MODAL (Home) – popup descripción pack
   ============================================================ */

body.ui-client .cdb__mrow--pack{
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

body.ui-client .cdb__mrow--pack:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

body.ui-client .cdb__mrow--pack:focus{
  outline: 2px solid rgba(147,197,253,.55);
  outline-offset: 2px;
}

/* ✅ Evita scroll del body cuando el modal está abierto */
body.ui-client.modal-open{
  overflow: hidden;
}

/* Modal */
body.ui-client .cmodal{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
}

body.ui-client .cmodal.is-open{
  display: block;
}

body.ui-client .cmodal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

body.ui-client .cmodal__panel{
  position: relative;
  width: min(560px, calc(100vw - 24px));
  margin: 10vh auto 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(900px 420px at 85% 15%, rgba(59,130,246,.12), transparent 60%),
    rgba(12,16,22,.96);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  overflow: hidden;
}

body.ui-client .cmodal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.ui-client .cmodal__title{
  font-size: 16px;
  font-weight: 950;
  color: rgba(231,237,247,.96);
  letter-spacing: .2px;
}

body.ui-client .cmodal__close{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(231,237,247,.92);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 950;
  cursor: pointer;
}

body.ui-client .cmodal__close:hover{
  background: rgba(255,255,255,.09);
}

body.ui-client .cmodal__body{
  padding: 12px 14px 14px;
}

body.ui-client .cmodal__desc{
  font-size: 13px;
  line-height: 1.45;
  color: rgba(231,237,247,.92);
  white-space: pre-wrap;
}

body.ui-client .cmodal__desc p{ margin: 0 0 10px 0; }
body.ui-client .cmodal__desc p:last-child{ margin-bottom: 0; }

body.ui-client .cmodal__foot{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:flex-end;
}

body.ui-client .cmodal__btn{
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 950;
}

@media (max-width: 520px){
  body.ui-client .cmodal__panel{
    margin: 9vh auto 0;
  }
}

/* ============================================================
   CLIENT / MOVEMENTS
   ============================================================ */
body.ui-client .cmv{
  display: grid;
  gap: 14px;
}

body.ui-client .cmv__hero{
  padding: 16px;
}

body.ui-client .cmv__heroTop{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body.ui-client .cmv__title{
  margin: 0;
  font-size: 44px;
  line-height: 1;
}

body.ui-client .cmv__sub{
  margin: 8px 0 0;
  color: rgba(159,176,195,.95);
  font-size: 13px;
}

body.ui-client .cmv__filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

body.ui-client .cmv__filter{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #d6e1ef;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

body.ui-client .cmv__filter:hover{
  border-color: rgba(147,197,253,.45);
  color: #eaf2ff;
}

body.ui-client .cmv__filter.is-active{
  border-color: rgba(56,189,248,.55);
  background: linear-gradient(135deg, rgba(30,58,138,.72), rgba(20,184,166,.26));
  color: #f8fbff;
}

body.ui-client .cmv__homeBtn{
  white-space: nowrap;
}

body.ui-client .cmv__card{
  padding: 0;
  overflow: hidden;
}

body.ui-client .cmv__tableWrap{
  margin: 0;
}

body.ui-client .cmv__mobileList{
  display: none;
}

body.ui-client .cmv__empty{
  padding: 16px;
  color: rgba(159,176,195,.95);
}

body.ui-client .cmv__item{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px;
}

body.ui-client .cmv__itemHead{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

body.ui-client .cmv__itemHead strong{
  text-transform: uppercase;
}

body.ui-client .cmv__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

body.ui-client .cmv__chip{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-size: 12px;
}

body.ui-client .cmv__note{
  margin-top: 8px;
  color: rgba(231,237,247,.92);
  font-size: 12px;
}

@media (max-width: 900px){
  body.ui-client .cmv__title{
    font-size: 32px;
  }

  body.ui-client .cmv__tableWrap{
    display: none;
  }

  body.ui-client .cmv__mobileList{
    display: grid;
    gap: 10px;
    padding: 12px;
  }
}

/* ============================================================
   CLIENT / ACCOUNT NOTIFICATIONS
   ============================================================ */
body.ui-client .cacc{
  display: grid;
  gap: 14px;
}

body.ui-client .cacc__card{
  padding: 16px;
}

body.ui-client .cacc__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

body.ui-client .cacc__title{
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
}

body.ui-client .cacc__sub{
  margin: 6px 0 0;
  color: rgba(159,176,195,.95);
  font-size: 13px;
}

body.ui-client .cacc__form{
  display: grid;
  gap: 10px;
  max-width: 560px;
}

body.ui-client .cacc__form label{
  font-weight: 800;
  font-size: 13px;
}

body.ui-client .cacc__toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.ui-client .cacc__toggle input{
  width: 18px;
  height: 18px;
}

body.ui-client .cacc__form input[type="email"]{
  width: 100%;
}

body.ui-client .cacc__hint{
  margin: 2px 0 0;
  color: rgba(159,176,195,.95);
  font-size: 12px;
}

body.ui-client .cacc__btn{
  justify-self: start;
  min-width: 140px;
}

/* Client legal consent modal */
body.ui-client.client-legal-consent-open{
  overflow: hidden;
}

body.ui-client .client-legal-consent-modal{
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

body.ui-client .client-legal-consent-modal.is-open{
  display: flex;
}

body.ui-client .client-legal-consent-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 14, .82);
  backdrop-filter: blur(2px);
}

body.ui-client .client-legal-consent-modal__panel{
  position: relative;
  width: min(700px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(900px 520px at 80% 15%, rgba(34,197,94,.12), transparent 62%),
    rgba(11,15,20,.98);
  box-shadow: 0 30px 70px rgba(0,0,0,.56);
  padding: 20px 18px;
}

body.ui-client .client-legal-consent-modal__title{
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: .2px;
  color: rgba(245, 249, 255, .98);
}

body.ui-client .client-legal-consent-modal__text{
  margin: 10px 0 0;
  font-size: 15px;
  color: rgba(190, 206, 224, .98);
}

body.ui-client .client-legal-consent-modal__form{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

body.ui-client .client-legal-consent-modal__check{
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(231,237,247,.96);
}

body.ui-client .client-legal-consent-modal__check input{
  width: auto;
  margin: 2px 0 0;
}

body.ui-client .client-legal-consent-modal__check a{
  color: #93c5fd;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 5px;
}

body.ui-client .client-legal-consent-modal__submit{
  min-height: 44px;
  width: fit-content;
}

@media (max-width: 680px){
  body.ui-client .client-legal-consent-modal{
    padding: 10px;
  }

  body.ui-client .client-legal-consent-modal__panel{
    padding: 16px 14px;
    border-radius: 14px;
  }

  body.ui-client .client-legal-consent-modal__title{
    font-size: 26px;
  }

  body.ui-client .client-legal-consent-modal__text{
    font-size: 14px;
  }

  body.ui-client .client-legal-consent-modal__submit{
    width: 100%;
    justify-content: center;
  }
}