/* ================================================================
   iClick Dashboard — Card Redesign
   Drop-in stylesheet that restyles policy cards, claim cards,
   reclamo rows, and the unpaid-policy alert. Loaded after the
   legacy dashboard styles in index.html so it overrides them
   inside the dashboard scope.

   System: light, soft neutrals, royal-blue brand as accent only.
   Typography: inherits the iClick design-system tokens defined on
   `:root` in iclick-style.css — `var(--font-heading | --font-subhead
    | --font-body | --font-button)`. The legacy `--d-font-mono` and
   `--d-font-display` accents are remapped onto those iclick tokens
   so every glyph in the dashboard renders in Futura / GT Walsheim /
   Nexa — no JetBrains Mono, no Instrument Serif.
   ================================================================ */

/* ---------------- Design tokens (scoped to .dashboard-cards-v2) ---------------- */
.dashboard-cards-v2 {
  /* Brand */
  --d-brand: #2540ff;
  --d-brand-600: #1d33d6;
  --d-brand-700: #1729b4;
  --d-brand-50: #eef0ff;
  --d-brand-100: #dde2ff;

  /* Ink */
  --d-ink-900: #0b1330;
  --d-ink-700: #1f2747;
  --d-ink-500: #5a6079;
  --d-ink-400: #858ba6;
  --d-ink-300: #b9bdcd;
  --d-ink-200: #e3e6ef;
  --d-ink-100: #eef0f6;

  /* Surfaces */
  --d-surface: #fbfbfd;
  --d-card: #ffffff;
  --d-line: #e6e8f0;
  --d-line-soft: #eff1f7;

  /* Status */
  --d-ok: #16a34a;
  --d-ok-50: #e8f6ed;
  --d-warn: #c2730a;
  --d-warn-50: #fbf2e0;
  --d-danger: #b42318;
  --d-danger-50: #fdecea;

  /* Radius */
  --d-r-sm: 8px;
  --d-r-md: 12px;
  --d-r-lg: 16px;

  /* Shadow */
  --d-shadow-card: 0 1px 0 rgba(11, 19, 48, 0.04), 0 1px 2px rgba(11, 19, 48, 0.04);

  /* Typography */
  --d-font-ui: var(--font-body);
  --d-font-mono: var(--font-body);
  --d-font-display: var(--font-heading);

  font-family: var(--d-font-ui);
  color: var(--d-ink-900);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- Section head — restyles the existing
   <div class="row CustomerPortal-name"><div class="encabezado-azul"><div class="title-customer-portal-content">…</div></div></div>
   wrapper used at the top of each tab pane (My Account, My Insurance,
   File a Claim, Request Assistance, Payment Methods). The legacy class
   "encabezado-azul" rendered a blue band; the new design uses a clean
   hairline-underlined heading instead. */
.tab-content .row.CustomerPortal-name {
  margin: 0 0 18px;
}
.tab-content .row.CustomerPortal-name > .col-12 {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e6e8f0 !important;
  padding: 0 0 10px !important;
}
.tab-content .row.CustomerPortal-name .title-customer-portal-content {
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #0b1330 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------------- Outer section tiles (#pills-tab : My Account / My Insurance / File a Claim / Request Assistance / Payment Methods) ---------------- *
   Restyle the existing Bootstrap nav-pills bar so each tile looks like
   the design's tile component (white card with rounded circle icon and
   centered label). We override the legacy `.CustomerPortal` rules in
   iclick-Customer-portal.css using a higher-specificity selector. */
ul.nav-pills#pills-tab.CustomerPortal {
  background: transparent;
  border: 0;
  margin: 24px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  width: 100%;
}
/* Short labels are only used by the mobile strip (see the 991.98px
   media query further down). */
ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal span.tab-label-short { display: none; }
ul.nav-pills#pills-tab.CustomerPortal .nav-item.col-2 {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  padding: 0;
}
ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal {
  text-transform: uppercase; /* labels are sentence case in i18n (shared with the mobile menu) */
  background: #ffffff !important;
  border: 1px solid #e6e8f0 !important;
  border-radius: 8px !important;
  padding: 18px 8px 16px !important;
  margin: 0 !important;
  width: 100%;
  height: 100%;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  color: #1f2747 !important;
  text-align: center;
  font-family: var(--font-button);
  transition: border-color 0.15s;
  box-shadow: none;
}
ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal:hover {
  border-color: #b9bdcd !important;
  background: #ffffff !important;
}
/* Active tile — thicker dark border, bolder label */
ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal.active {
  background: #ffffff !important;
  border: 2px solid #0b1330 !important;
  padding: 17px 7px 15px !important;
  color: #0b1330 !important;
  box-shadow: none !important;
}
/* Wrap the legacy <img> icon in a circular brand-tinted bubble */
ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal img {
  width: 30px !important;
  height: 30px !important;
  margin: 0 auto 10px !important;
  padding: 13px;
  box-sizing: content-box;
  background: #eef0ff;
  border-radius: 50%;
  object-fit: contain;
  filter: none;
  display: block;
}
ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal img.img-top-tab-customer-portal,
ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal img.img-top-tab-customer-portal-wrap,
ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal img.img-top-tab-customer-portal-late-wrap {
  width: 40px !important;
  height: 40px !important;
}
ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal br { display: none; }
ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal span {
  display: block;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: inherit;
  font-weight: 500;
  line-height: 1.25;
  min-height: 28px;
  text-transform: uppercase;
}
ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal.active span {
  font-weight: 500;
}

/* On mobile/tablet the tile row becomes an underlined tab bar in place
   of the section heading: five equal boxed tabs with short labels
   (Pólizas · Mi cuenta · Reclamos · Asistencias · Pagos) sitting on one
   full-width dark line (every tab's bottom edge is #0b1330); the active
   tab gets the dark border all round. Each
   pane's own first heading row is hidden at these widths so the title
   isn't shown twice. The same five sections also stay in the navbar's
   collapse menu (#mobileAccountMenu). */
@media (max-width: 991.98px) {
  .row.CustomerPortal-content{
    margin-top: 0 !important;
  }
  ul.nav-pills#pills-tab.CustomerPortal {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 2px;
    margin: 8px 0 18px;
    padding: 0 12px;
    border-bottom: 1px solid #0b1330;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  ul.nav-pills#pills-tab.CustomerPortal::-webkit-scrollbar { display: none; }
  ul.nav-pills#pills-tab.CustomerPortal .nav-item.col-2 {
    flex: 1 1 0;
    min-width: max-content;
    width: auto;
  }
  ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal,
  ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal.active {
    min-width: 0;
    height: auto;
    margin-bottom: 0 !important;
    padding: 7px 3px !important;
    border: 1px solid #e6e8f0 !important;
    border-bottom: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    flex-direction: row;
    justify-content: center;
    white-space: nowrap;
    color: #5b6280 !important;
  }
  ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal.active {
    border-color: #0b1330 !important;
    border-bottom: 0 !important;
    color: #0b1330 !important;
  }
  ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal img,
  ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal span.tab-label-full { display: none !important; }
  ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal span.tab-label-short {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    min-height: 0;
    line-height: 1.2;
  }
  ul.nav-pills#pills-tab.CustomerPortal .nav-link.CustomerPortal.active span.tab-label-short { font-weight: 700; }
  #pills-tabContent > .tab-pane > .row.CustomerPortal-name:first-child { display: none; }
}

/* ---------------- Inner Active/Cancelled/Expired tabs (#myTab) ---------------- *
   Original: full-width Bootstrap nav-tabs bar. Restyle to the design's
   pill segmented control — gray pill background with white-pill active. */
ul.nav-tabs.policies-ivea#myTab {
  display: inline-flex !important;
  flex-wrap: nowrap;
  border: 0 !important;
  background: #eef0f6;
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  margin: 12px 0 22px !important;
  width: auto;
  max-width: 100%;
}
ul.nav-tabs.policies-ivea#myTab .nav-item {
  margin: 0;
  border: 0;
  flex: 0 0 auto;
}
ul.nav-tabs.policies-ivea#myTab .nav-link.policies-ivea {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #5a6079 !important;
  font-family: var(--font-button);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s;
  margin: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}
ul.nav-tabs.policies-ivea#myTab .nav-link.policies-ivea:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #0b1330 !important;
}
ul.nav-tabs.policies-ivea#myTab .nav-link.policies-ivea.active {
  background: #ffffff !important;
  color: #0b1330 !important;
  box-shadow: 0 1px 0 rgba(11, 19, 48, 0.04), 0 1px 2px rgba(11, 19, 48, 0.04) !important;
  font-weight: 500 !important;
}

/* ---------------- Status pill tabs (Active/Cancelled/Expired) ---------------- */
.dashboard-cards-v2 .status-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--d-ink-100);
  padding: 4px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.dashboard-cards-v2 .status-tabs button {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--d-ink-500);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-cards-v2 .status-tabs button .count {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12.5px;
}
.dashboard-cards-v2 .status-tabs button.active {
  background: white;
  color: var(--d-ink-900);
  box-shadow: var(--d-shadow-card);
}
.dashboard-cards-v2 .status-tabs button.active .count {
  background: var(--d-brand-50);
  color: var(--d-brand-700);
}

/* ---------------- Policy card ---------------- */
.dashboard-cards-v2 .policy-card {
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  margin-bottom: 14px;
  /* No overflow:hidden here: the Download dropdown menu must be able to
     extend past the card edge. The accent stripe clips itself instead. */
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dashboard-cards-v2 .policy-card:hover {
  border-color: var(--d-ink-300);
  box-shadow: var(--d-shadow-card);
}
.dashboard-cards-v2 .policy-card .accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--d-r-lg) 0 0 var(--d-r-lg);
}
.dashboard-cards-v2 .policy-card[data-status="active"] .accent { background: var(--d-ok); }
.dashboard-cards-v2 .policy-card[data-status="cancelled"] .accent { background: var(--d-ink-400); }
.dashboard-cards-v2 .policy-card[data-status="expired"] .accent { background: var(--d-warn); }
.dashboard-cards-v2 .policy-card[data-status="overdue"] .accent { background: var(--d-warn); }

.dashboard-cards-v2 .policy-card .body {
  display: grid;
  grid-template-columns: 70px 1fr 156px;
  gap: 22px;
  align-items: stretch;
  padding: 20px 24px 20px 28px;
}

/* product chip */
.dashboard-cards-v2 .product-chip {
  width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}
.dashboard-cards-v2 .product-chip .glyph {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--d-brand-50) 0%, #f6f7ff 100%);
  border: 1px solid var(--d-brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--d-brand);
  margin-bottom: 2px;
}
.dashboard-cards-v2 .product-chip .glyph svg {
  width: 28px;
  height: 28px;
}
.dashboard-cards-v2 .product-chip .plan-name {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--d-ink-900);
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.1;
}
.dashboard-cards-v2 .product-chip .plan-kind {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--d-ink-400);
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
}

/* card content */
.dashboard-cards-v2 .policy-card .content { min-width: 0; }
.dashboard-cards-v2 .policy-card .top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dashboard-cards-v2 .policy-card .holder-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--d-ink-900);
  letter-spacing: -0.01em;
}
.dashboard-cards-v2 .policy-card .policy-no {
  font-family: var(--d-font-mono);
  font-size: 13.5px;
  color: var(--d-ink-500);
  background: var(--d-ink-100);
  padding: 3px 8px;
  border-radius: 6px;
}
.dashboard-cards-v2 .policy-card .top-row .plan-name-inline {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--d-ink-400);
}

.dashboard-cards-v2 .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: none;       /* override Bootstrap badge transform */
  vertical-align: baseline;
  border: 0;
}
.dashboard-cards-v2 .badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.dashboard-cards-v2 .badge.ok    { background: var(--d-ok-50);     color: #0d6b35; }
.dashboard-cards-v2 .badge.ok    .dot { background: var(--d-ok); }
.dashboard-cards-v2 .badge.warn  { background: var(--d-warn-50);   color: #8a4f02; }
.dashboard-cards-v2 .badge.warn  .dot { background: var(--d-warn); }
.dashboard-cards-v2 .badge.muted { background: var(--d-ink-100);   color: var(--d-ink-500); }
.dashboard-cards-v2 .badge.muted .dot { background: var(--d-ink-400); }
.dashboard-cards-v2 .badge.danger{ background: var(--d-danger-50); color: var(--d-danger); }
.dashboard-cards-v2 .badge.danger .dot { background: var(--d-danger); }

/* meta grid */
.dashboard-cards-v2 .meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
  margin-top: 4px;
}
/* .dashboard-cards-v2 .meta-grid.cancelled { grid-template-columns: repeat(3, 1fr); } */
.dashboard-cards-v2 .meta-cell .label {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-400);
  font-weight: 600;
  margin-bottom: 4px;
}
.dashboard-cards-v2 .meta-cell .value {
  font-size: 1.25rem;
  color: var(--d-ink-900);
  font-weight: 500;
  word-break: break-word;
}
.dashboard-cards-v2 .meta-cell .value.mono {
  font-family: var(--d-font-mono);
  font-size: 1.25rem;
}
.dashboard-cards-v2 .meta-cell .value.address {
  font-weight: 400;
  color: var(--d-ink-700);
}
.dashboard-cards-v2 .meta-cell .value .currency {
  font-size: 1.25rem;
  color: var(--d-ink-500);
  margin-right: 1px;
}
.dashboard-cards-v2 .meta-cell .value .big-num {
  font-family: var(--d-font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.dashboard-cards-v2 .meta-cell.span-2 { grid-column: span 2; }

/* actions column — uniform 36px buttons */
.dashboard-cards-v2 .policy-card .actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 170px;
  width: 170px;
  border-left: 1px solid var(--d-line-soft);
  padding-left: 22px;
}
.dashboard-cards-v2 .action-btn {
  background: var(--d-brand);
  color: white;
  border: 1px solid var(--d-brand);
  font-family: inherit;
  height: 36px;
  padding: 0 18px;
  width: 100%;
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 1rem;
  border-radius: .25rem;
}
.dashboard-cards-v2 .action-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.dashboard-cards-v2 .action-btn.btn-primary {
  background: transparent;
  color: var(--d-ink-700);
  border: 1px solid var(--d-line);
}
.dashboard-cards-v2 .action-btn.btn-primary:hover {
  background: var(--d-brand-100);
  border-color: var(--d-brand-100);
}
.dashboard-cards-v2 .action-btn.btn-ghost {
  background: transparent;
  color: var(--d-ink-700);
  border: 1px solid var(--d-line);
}
.dashboard-cards-v2 .action-btn.btn-ghost:hover {
  border-color: var(--d-ink-300);
  background: var(--d-ink-100);
}
.dashboard-cards-v2 .action-btn.btn-danger-ghost {
  background: transparent;
  color: var(--d-danger);
  border: 1px solid transparent;
}
.dashboard-cards-v2 .action-btn.btn-danger-ghost:hover {
  background: var(--d-danger-50);
}
/* Cancel on the policy card: same outlined shape as the other ghost
   buttons (Payments / Download), only the text is red. */
.dashboard-cards-v2 .action-btn.btn-ghost.btn-danger-outline {
  color: var(--d-danger);
}
.dashboard-cards-v2 .action-btn.btn-ghost.btn-danger-outline:hover {
  background: transparent;
  border-color: var(--d-danger);
  color: var(--d-danger) !important;
}
.dashboard-cards-v2 .action-btn[disabled],
.dashboard-cards-v2 .action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dashboard-cards-v2 .icon-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--d-line);
}
.dashboard-cards-v2 .icon-row .ib {
  flex: 1;
  background: transparent;
  border: 1px solid var(--d-line);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  color: var(--d-ink-500);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 1rem;
  font-family: inherit;
  text-decoration: none;
}
.dashboard-cards-v2 .icon-row .ib:hover {
  background: var(--d-ink-100);
  color: var(--d-ink-900);
}
.dashboard-cards-v2 .icon-row .ib svg {
  width: 18px;
  height: 18px;
}

/* ---- Tooltip on download icons (data-tooltip attribute) ----
   Replaces the native browser `title` tooltip with a styled bubble
   that matches the dashboard design tokens. Activates on :hover and
   :focus-visible after a 250ms delay so it doesn't flicker on quick
   pass-overs. The bubble points down at the icon button. */
/* .dashboard-cards-v2 .icon-row .ib[data-tooltip] {
  position: relative;
}
.dashboard-cards-v2 .icon-row .ib[data-tooltip]::before,
.dashboard-cards-v2 .icon-row .ib[data-tooltip]::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  transition-delay: 0s;
  pointer-events: none;
  z-index: 20;
}
.dashboard-cards-v2 .icon-row .ib[data-tooltip]::before {
  content: attr(data-tooltip);
  background: var(--d-ink-900);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(11, 19, 48, 0.18), 0 1px 2px rgba(11, 19, 48, 0.08);
}
.dashboard-cards-v2 .icon-row .ib[data-tooltip]::after {
  content: '';
  bottom: calc(100% + 2px);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--d-ink-900);
}
.dashboard-cards-v2 .icon-row .ib[data-tooltip]:hover::before,
.dashboard-cards-v2 .icon-row .ib[data-tooltip]:hover::after,
.dashboard-cards-v2 .icon-row .ib[data-tooltip]:focus-visible::before,
.dashboard-cards-v2 .icon-row .ib[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0.25s;
} */

/* Icon-row tooltips sit at the right edge of the card, which has
   overflow: hidden. Centering the bubble under the icon pushes half of it
   past the card edge and it gets clipped. Anchor the bubble to the icon's
   right edge instead and let the text wrap. */
.dashboard-cards-v2 .icon-row .ib[data-tooltip]::after {
  left: auto;
  right: 0;
  width: max-content;
  max-width: min(21em, 70vw);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  -webkit-transform: translate(0, -4px);
  transform: translate(0, -4px);
}

/* ---------------- File-a-Claim card ---------------- */
.dashboard-cards-v2 .claim-card {
  background: white;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  margin-bottom: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dashboard-cards-v2 .claim-card:hover {
  border-color: var(--d-brand-100);
  box-shadow: var(--d-shadow-card);
}
.dashboard-cards-v2 .claim-card .body-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
}
.dashboard-cards-v2 .claim-card .glyph-sm {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--d-brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--d-brand);
}
.dashboard-cards-v2 .claim-card .glyph-sm svg {
  width: 22px;
  height: 22px;
}
.dashboard-cards-v2 .claim-card .info-block {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1fr;
  gap: 24px;
}
.dashboard-cards-v2 .claim-card .info-block .stack { min-width: 0; }
.dashboard-cards-v2 .claim-card .stack .label {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-400);
  font-weight: 600;
  margin-bottom: 4px;
}
.dashboard-cards-v2 .claim-card .stack .value {
  font-size: 1.25rem;
  color: var(--d-ink-900);
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-cards-v2 .claim-card .stack .value.mono {
  font-family: var(--d-font-mono);
  font-size: 1.25rem;
}
.dashboard-cards-v2 .claim-card .body-row .file-claim-btn {
  background: var(--d-brand);
  color: white;
  border: 1px solid var(--d-brand);
  font-family: var(--font-button);
  height: 36px;
  padding: 0 18px;
  width: 100%;
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 1rem;
  border-radius: .25rem;
}
.dashboard-cards-v2 .claim-card .body-row .file-claim-btn:hover {
  background: var(--d-brand-600);
  color: white !important;
}

/* ---------------- Mis Reclamos rows ---------------- */
.dashboard-cards-v2 .reclamo-row {
  background: white;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  margin-bottom: 8px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 36px 1.2fr 1.6fr 1.4fr 0.8fr 0.8fr;
  align-items: center;
  gap: 18px;
}
.dashboard-cards-v2 .reclamo-row .glyph-mini {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--d-warn-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--d-warn);
}
.dashboard-cards-v2 .reclamo-row .glyph-mini svg {
  width: 18px;
  height: 18px;
}
.dashboard-cards-v2 .reclamo-row .cell .label {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-400);
  font-weight: 600;
  margin-bottom: 4px;
}
.dashboard-cards-v2 .reclamo-row .cell .value {
  font-size: 1.25rem;
  color: var(--d-ink-900);
  font-weight: 500;
}
.dashboard-cards-v2 .reclamo-row .cell .value.mono {
  font-family: var(--d-font-mono);
  font-size: 1.25rem;
  line-height: 1.4;
}
.dashboard-cards-v2 .reclamo-row .cell .value.amount {
  font-family: var(--d-font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.dashboard-cards-v2 .reclamo-row .state-pill {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--d-brand-50);
  color: var(--d-brand-700);
}

/* ---------------- Unpaid alert (gentle reminder) ---------------- */
.dashboard-cards-v2 .unpaid-banner {
  background: var(--d-warn-50);
  border: 1px solid #f0d9a8;
  border-left: 4px solid var(--d-warn);
  border-radius: var(--d-r-md);
  padding: 14px 18px;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
}
.dashboard-cards-v2 .unpaid-banner .icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  color: var(--d-warn);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f0d9a8;
}
.dashboard-cards-v2 .unpaid-banner .icon svg { width: 18px; height: 18px; }
.dashboard-cards-v2 .unpaid-banner .copy { line-height: 1.4; }
.dashboard-cards-v2 .unpaid-banner .copy strong {
  color: #6b4002;
  font-weight: 700;
  font-size: 14.5px;
}
.dashboard-cards-v2 .unpaid-banner .copy .sub {
  font-size: 1rem;
  color: var(--d-ink-700);
  margin-top: 2px;
}
.dashboard-cards-v2 .unpaid-banner .copy .sub b {
  color: var(--d-ink-900);
  font-family: var(--d-font-mono);
  font-size: 13.5px;
}
.dashboard-cards-v2 .unpaid-banner .actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dashboard-cards-v2 .unpaid-banner .btn-pay-now {
  background: var(--d-warn);
  color: white;
  border: 1px solid var(--d-warn);
  border-radius: .25rem;
  height: 36px;
  padding: 0 18px;
  line-height: 1.5;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.dashboard-cards-v2 .unpaid-banner .btn-pay-now:hover {
  background: #a06000;
}
.dashboard-cards-v2 .unpaid-banner .btn-dismiss {
  background: transparent;
  border: none;
  color: var(--d-ink-500);
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.dashboard-cards-v2 .unpaid-banner .btn-dismiss svg { width: 16px; height: 16px; }
.dashboard-cards-v2 .unpaid-banner .countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: white;
  color: var(--d-warn);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  margin-left: 8px;
  border: 1px solid #f0d9a8;
  vertical-align: baseline;
}
.dashboard-cards-v2 .unpaid-banner .countdown-pill svg { width: 12px; height: 12px; }

/* ---------------- Empty state ---------------- */
.dashboard-cards-v2 .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--d-ink-500);
  font-size: 14.5px;
  border: 1px dashed var(--d-line);
  border-radius: var(--d-r-md);
  background: white;
}

/* ================================================================
   Other tabs — Account, Assistance, Payment Methods
   Drop-in classes adapted from other-tabs.css (the design package),
   scoped under .dashboard-cards-v2.
   ================================================================ */
.dashboard-cards-v2 .ot-card {
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 22px 24px;
  margin-bottom: 14px;
  box-shadow: var(--d-shadow-card);
}
.dashboard-cards-v2 .ot-card-head { margin-bottom: 18px; }
.dashboard-cards-v2 .ot-card-eyebrow {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-400);
  font-weight: 600;
  margin-bottom: 4px;
}
.dashboard-cards-v2 .ot-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--d-ink-900);
  letter-spacing: -0.01em;
}
.dashboard-cards-v2 .ot-toggle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--d-line-soft);
}
.dashboard-cards-v2 .ot-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 36px;
}
.dashboard-cards-v2 .ot-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dashboard-cards-v2 .field-row { padding: 4px 0; }
.dashboard-cards-v2 .field-row .k {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-400);
  font-weight: 600;
  margin-bottom: 4px;
}
.dashboard-cards-v2 .field-row .v {
  font-size: 1.25rem;
  color: var(--d-ink-900);
  font-weight: 500;
}
.dashboard-cards-v2 .field-row .v.mono {
  font-family: var(--d-font-mono);
  font-size: 1.25rem;
}

/* iOS-style toggle — skinned over the legacy .switch + checkbox + .slider pattern */
.dashboard-cards-v2 .switch.ot-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  margin: 0;
}
.dashboard-cards-v2 .switch.ot-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.dashboard-cards-v2 .switch.ot-switch .slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  border-radius: 999px;
  background: var(--d-ink-200);
  transition: background 0.15s;
}
.dashboard-cards-v2 .switch.ot-switch .slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}
.dashboard-cards-v2 .switch.ot-switch input:checked + .slider {
  background: var(--d-brand);
}
.dashboard-cards-v2 .switch.ot-switch input:checked + .slider::before {
  transform: translateX(18px);
}
.dashboard-cards-v2 .switch.ot-switch input:focus-visible + .slider {
  box-shadow: 0 0 0 3px var(--d-brand-100);
}

/* Form */
.dashboard-cards-v2 .ot-form {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dashboard-cards-v2 .ot-label {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-400);
  font-weight: 600;
  margin-bottom: 4px;
  margin-top: 8px;
}
.dashboard-cards-v2 .ot-label:first-child { margin-top: 0; }
.dashboard-cards-v2 .ot-input {
  border: 1px solid var(--d-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14.5px;
  font-family: inherit;
  background: var(--d-ink-100);
  transition: border-color 0.15s, background 0.15s;
  outline: none;
  width: 100%;
}
.dashboard-cards-v2 .ot-input:focus {
  border-color: var(--d-brand);
  background: white;
}

.dashboard-cards-v2 .ot-info {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--d-brand-50);
  border: 1px solid var(--d-brand-100);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
  color: var(--d-ink-700);
  line-height: 1.4;
  margin: 4px 0 8px;
}
.dashboard-cards-v2 .ot-info svg {
  width: 16px;
  height: 16px;
  color: var(--d-brand);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ================================================================
   Request Assistance — services list + sticky 24/7 contact card
   ================================================================ */
.dashboard-cards-v2 .services-disclaimer {
  font-size: 1rem;
  color: var(--d-ink-700);
  text-align: center;
  background: var(--d-brand-50);
  border: 1px solid var(--d-brand-100);
  border-radius: var(--d-r-md);
  padding: 14px 18px;
  margin: 0 0 18px;
}
.dashboard-cards-v2 .ot-grid-services {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  align-items: start;
}
.dashboard-cards-v2 .ot-services-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dashboard-cards-v2 .service-card {
  background: white;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 18px;
  align-items: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dashboard-cards-v2 .service-card:hover {
  border-color: var(--d-brand-100);
  box-shadow: var(--d-shadow-card);
}
.dashboard-cards-v2 .service-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--d-brand-50) 0%, #f6f7ff 100%);
  border: 1px solid var(--d-brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--d-brand);
}
.dashboard-cards-v2 .service-icon svg {
  width: 24px;
  height: 24px;
}
.dashboard-cards-v2 .service-body { min-width: 0; }
.dashboard-cards-v2 .service-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--d-ink-900);
  margin-bottom: 3px;
}
.dashboard-cards-v2 .service-desc {
  font-size: 1.25rem;
  color: var(--d-ink-500);
  line-height: 1.5;
}
.dashboard-cards-v2 .service-topics {
  list-style: disc;
  padding-left: 18px;
  margin: 8px 0 0;
  font-size: 1rem;
  color: var(--d-ink-700);
  line-height: 1.6;
}
.dashboard-cards-v2 .service-cta {
  background: white;
  color: var(--d-brand);
  border: 1px solid var(--d-brand);
  border-radius: 8px;
  height: 36px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.dashboard-cards-v2 .contact-card {
  background: linear-gradient(180deg, var(--d-brand-700) 0%, var(--d-brand) 100%);
  color: white;
  border-radius: var(--d-r-lg);
  padding: 22px 20px;
  text-align: center;
  position: sticky;
  top: 20px;
  height: stretch;
}
.dashboard-cards-v2 .contact-card .cc-eyebrow {
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}
.dashboard-cards-v2 .contact-card .cc-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.dashboard-cards-v2 .contact-card .cc-247 {
  font-family: var(--d-font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.dashboard-cards-v2 .contact-card .cc-channels {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dashboard-cards-v2 .contact-card .cc-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0;
}
.dashboard-cards-v2 .contact-card .cc-channel {
  padding: 6px 0;
}
.dashboard-cards-v2 .contact-card .cc-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}
.dashboard-cards-v2 .contact-card .cc-icon svg {
  width: 18px;
  height: 18px;
  color: white;
}
.dashboard-cards-v2 .contact-card .cc-channel-label {
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 2px;
}
.dashboard-cards-v2 .contact-card .cc-channel-value {
  font-size: 1.25rem;
  font-weight: 600;
}
.dashboard-cards-v2 .contact-card .cc-channel-value.mono {
  font-family: var(--d-font-mono);
}

/* ================================================================
   Payment Methods — credit card visual + info column
   ================================================================ */
.dashboard-cards-v2 .empty-cards {
  background: white;
  border: 1px dashed var(--d-line);
  border-radius: var(--d-r-md);
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.dashboard-cards-v2 .empty-cards-text {
  color: var(--d-ink-500);
  font-size: 15px;
}

.dashboard-cards-v2 .cc-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  background: white;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 18px;
  box-shadow: var(--d-shadow-card);
  margin-bottom: 14px;
}
.dashboard-cards-v2 .cc-card-visual {
  background: linear-gradient(135deg, #1729b4 0%, #2540ff 60%, #4d63ff 100%);
  border-radius: 14px;
  padding: 20px;
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dashboard-cards-v2 .cc-card-visual::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
}
.dashboard-cards-v2 .cc-card-chip {
  width: 36px;
  height: 26px;
  border-radius: 5px;
  background: linear-gradient(135deg, #f5d061 0%, #c9a13a 100%);
  position: relative;
}
.dashboard-cards-v2 .cc-card-chip::before,
.dashboard-cards-v2 .cc-card-chip::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
}
.dashboard-cards-v2 .cc-card-chip::before { top: 8px; }
.dashboard-cards-v2 .cc-card-chip::after  { top: 16px; }
.dashboard-cards-v2 .cc-card-brand {
  font-family: var(--d-font-display);
  font-size: 24px;
  letter-spacing: 0.05em;
  align-self: flex-end;
  position: absolute;
  right: 20px;
  top: 20px;
  font-style: italic;
}
.dashboard-cards-v2 .cc-card-number {
  font-family: var(--d-font-mono);
  font-size: 19px;
  letter-spacing: 0.05em;
  margin-top: auto;
}
.dashboard-cards-v2 .cc-card-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.dashboard-cards-v2 .cc-card-k {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 2px;
}
.dashboard-cards-v2 .cc-card-v {
  font-size: 14.5px;
  font-weight: 500;
}
.dashboard-cards-v2 .cc-card-v.mono {
  font-family: var(--d-font-mono);
}

.dashboard-cards-v2 .cc-card-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.dashboard-cards-v2 .cc-card-info-head {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dashboard-cards-v2 .cc-card-info-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--d-line-soft);
}
.dashboard-cards-v2 .cc-card-info-row .k {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-400);
  font-weight: 600;
}
.dashboard-cards-v2 .cc-card-info-row .v {
  font-size: 1.25rem;
  color: var(--d-ink-900);
  font-weight: 500;
}
.dashboard-cards-v2 .cc-card-info-row .v.mono {
  font-family: var(--d-font-mono);
}
.dashboard-cards-v2 .cc-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 820px) {
  .dashboard-cards-v2 .ot-grid-2,
  .dashboard-cards-v2 .ot-grid-2col,
  .dashboard-cards-v2 .ot-grid-services {
    grid-template-columns: 1fr;
  }
  .dashboard-cards-v2 .service-card {
    grid-template-columns: 44px 1fr;
  }
  .dashboard-cards-v2 .service-cta {
    grid-column: 1 / -1;
    width: 100%;
  }
  .dashboard-cards-v2 .cc-card { grid-template-columns: 1fr; }
  .dashboard-cards-v2 .policy-card .body {
    grid-template-columns: 56px 1fr;
  }
  .dashboard-cards-v2 .policy-card .body {
    grid-template-columns: 56px 1fr;
  }
  .dashboard-cards-v2 .policy-card .actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    border-left: 0;
    padding-left: 0;
    padding-top: 14px;
    border-top: 1px solid var(--d-line-soft);
    width: 100%;
    min-width: 0;
    align-items: stretch;
  }
  .dashboard-cards-v2 .policy-card .actions .action-btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
  /* Keep the download icons on the right even when they wrap to their
     own line, so the right-anchored tooltip always has room to the left. */
  .dashboard-cards-v2 .policy-card .actions .icon-row { margin-left: auto; }
  .dashboard-cards-v2 .cc-card-actions { flex-wrap: wrap; }
  .dashboard-cards-v2 .meta-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-cards-v2 .meta-grid.cancelled { grid-template-columns: repeat(2, 1fr); }
  /* File-a-claim card at narrow widths: icon + text on top, the CTA
     button on its own full-width row underneath, centered. The 3-column
     desktop grid squeezed the text column next to the button. */
  .dashboard-cards-v2 .claim-card .body-row {
    grid-template-columns: 44px 1fr;
    gap: 12px 14px;
    padding: 16px;
    align-items: start;
  }
  .dashboard-cards-v2 .claim-card .info-block { grid-template-columns: 1fr; gap: 10px; }
  .dashboard-cards-v2 .claim-card .stack .value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .dashboard-cards-v2 .claim-card .body-row .file-claim-btn {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto;
    min-width: 60%;
    margin-top: 4px;
  }
  /* Reclamo-row at narrow widths: 2-column grid. Left column carries
     the small glyph icon and spans the full row height; right column
     stacks each cell (label + value) on its own row. The previous
     `36px 1fr 1fr` 3-column layout combined with the row's
     `align-items: center` caused cells with differently-sized values
     (e.g. 24px display amount next to 1rem mono date) to overlap
     horizontally. Stacking removes the overlap and lets each cell
     have whatever vertical room its label + value need. */
  .dashboard-cards-v2 .reclamo-row {
    grid-template-columns: 36px 1fr;
    gap: 10px 14px;
    align-items: start;
    padding: 14px 16px;
  }
  .dashboard-cards-v2 .reclamo-row .glyph-mini {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .dashboard-cards-v2 .reclamo-row .cell {
    grid-column: 2;
  }
}

/* ================================================================
   Typography map — explicit font-family for every text-bearing
   class. Without these, text inherits from `.dashboard-cards-v2`
   and lands on `--font-body` even when the role asks for the
   Heavy heading font or the Nexa button font. Mono / display
   accents (.mono, .big-num) are *not* listed so they keep their
   own font-family declarations.
   ================================================================ */

/* Heading-style: large titles, eyebrow caps, section headers,
   value names — anything with strong/600+ weight that's acting
   as a heading or accent label. */
.dashboard-cards-v2 .holder-name,
.dashboard-cards-v2 .product-chip .plan-name,
.dashboard-cards-v2 .product-chip .plan-kind,
.dashboard-cards-v2 .meta-cell .label,
.dashboard-cards-v2 .claim-card .stack .label,
.dashboard-cards-v2 .reclamo-row .cell .label,
.dashboard-cards-v2 .ot-card-eyebrow,
.dashboard-cards-v2 .ot-card-title,
.dashboard-cards-v2 .ot-label,
.dashboard-cards-v2 .field-row .k,
.dashboard-cards-v2 .service-title,
.dashboard-cards-v2 .contact-card .cc-eyebrow,
.dashboard-cards-v2 .contact-card .cc-title,
.dashboard-cards-v2 .cc-card-k,
.dashboard-cards-v2 .cc-card-info-row .k,
.dashboard-cards-v2 .unpaid-banner .copy strong {
  font-family: var(--font-heading);
}

/* Body-style: values, addresses, descriptions, paragraphs, inputs,
   the small caption-style copy under the cards. */
.dashboard-cards-v2 .top-row .plan-name-inline,
.dashboard-cards-v2 .meta-cell .value,
.dashboard-cards-v2 .meta-cell .value .currency,
.dashboard-cards-v2 .reclamo-row .cell .value,
.dashboard-cards-v2 .claim-card .stack .value,
.dashboard-cards-v2 .field-row .v,
.dashboard-cards-v2 .ot-input,
.dashboard-cards-v2 .ot-info,
.dashboard-cards-v2 .service-desc,
.dashboard-cards-v2 .service-topics,
.dashboard-cards-v2 .services-disclaimer,
.dashboard-cards-v2 .contact-card .cc-channel-label,
.dashboard-cards-v2 .contact-card .cc-channel-value,
.dashboard-cards-v2 .cc-card-v,
.dashboard-cards-v2 .cc-card-info-row .v,
.dashboard-cards-v2 .empty-cards-text,
.dashboard-cards-v2 .empty-state,
.dashboard-cards-v2 .unpaid-banner .copy .sub {
  font-family: var(--font-body);
}

/* Button-style: action CTAs, uppercase pills + badges, segmented
   tab controls. */
.dashboard-cards-v2 .badge,
.dashboard-cards-v2 .state-pill,
.dashboard-cards-v2 .action-btn,
.dashboard-cards-v2 .file-claim-btn,
.dashboard-cards-v2 .btn-pay-now,
.dashboard-cards-v2 .icon-row .ib,
.dashboard-cards-v2 .status-tabs button,
.dashboard-cards-v2 .unpaid-banner .countdown-pill,
.dashboard-cards-v2 .ot-switch {
  font-family: var(--font-button);
}

.claim-currency-group .input-group-text {
  font-weight: 600;
  color: #5b6280;
}

/* ---------------- Download dropdown on policy cards ---------------- */
.dashboard-cards-v2 .policy-card .download-menu { position: relative; }
.dashboard-cards-v2 .policy-card .download-menu .dropdown-toggle::after { margin-left: 4px; }
.dashboard-cards-v2 .policy-card .download-menu-list {
  min-width: 100%;
  padding: 6px;
  border: 1px solid var(--d-line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11, 19, 48, 0.12);
  font-family: inherit;
}
.dashboard-cards-v2 .policy-card .download-menu-list .dropdown-item {
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--d-ink-700);
  white-space: nowrap;
}
.dashboard-cards-v2 .policy-card .download-menu-list .dropdown-item:hover,
.dashboard-cards-v2 .policy-card .download-menu-list .dropdown-item:focus {
  background: var(--d-ink-100);
  color: var(--d-ink-900);
}
@media (max-width: 820px) {
  .dashboard-cards-v2 .policy-card .actions .download-menu { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .dashboard-cards-v2 .policy-card .actions .download-menu { display: flex; }
  .dashboard-cards-v2 .policy-card .actions .download-menu .action-btn { width: 100%; }
}