/* Portal del Asociado: conversión directa de docs/diseno/styles.css. */
:root {
  --portal-green-900: #0e4429;
  --portal-green-800: #135c37;
  --portal-green-700: #197544;
  --portal-green-600: #1e8449;
  --portal-green-500: #2ea45f;
  --portal-green-400: #4cbd7c;
  --portal-green-300: #82d3a2;
  --portal-green-100: #d9efe2;
  --portal-green-50: #eaf6ef;
  --portal-orange-600: #d9760f;
  --portal-orange-500: #f39c12;
  --portal-ink: #17241d;
  --portal-text: #33453c;
  --portal-muted: #6d7f76;
  --portal-soft: #94a49c;
  --portal-bg: #f1f5f2;
  --portal-card: #fff;
  --portal-line: #e3eae6;
  --portal-line-2: #eef2f0;
  --portal-radius: 14px;
  --portal-radius-sm: 10px;
  --portal-shadow: 0 1px 2px rgba(14, 68, 41, .05), 0 1px 10px rgba(14, 68, 41, .04);
  --portal-shadow-md: 0 6px 22px rgba(14, 68, 41, .1);
  --portal-sidebar-w: 225px;
}

.portal-surface {
  margin: 0;
  min-height: 100%;
  color: var(--portal-text);
  background: var(--portal-bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.portal-surface *, .portal-surface *::before, .portal-surface *::after { box-sizing: border-box; }
.portal-surface h1, .portal-surface h2, .portal-surface h3, .portal-surface p, .portal-surface blockquote, .portal-surface figure { margin: 0; }
.portal-surface a { color: inherit; text-decoration: none; }
.portal-surface img { display: block; max-width: 100%; }
.portal-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.portal-icon--sm { width: 16px; height: 16px; }

/* Topbar */
.portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 28px;
  background: var(--portal-card);
  border-bottom: 1px solid var(--portal-line);
}
.portal-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.portal-brand__logo { position: relative; width: 78px; height: 46px; flex: none; overflow: hidden; }
.portal-brand__logo img { position: absolute; top: -18px; left: -1px; width: 80px; max-width: none; height: 80px; object-fit: contain; }
/* El bloque de texto de la marca (nombre + tagline) es el hijo flex que
   de verdad necesita encogerse cuando el topbar se queda sin espacio; sin
   `min-width: 0` un flex item nunca se encoge por debajo de su contenido. */
.portal-brand__logo + span { min-width: 0; overflow: hidden; }
.portal-brand__name, .portal-brand__tagline, .portal-user__name, .portal-user__role { display: block; }
.portal-brand__name, .portal-brand__tagline { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.portal-brand__name { color: var(--portal-green-800); font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.portal-brand__tagline { color: var(--portal-muted); font-size: 12.5px; }
.portal-topbar__right { display: flex; align-items: center; gap: 18px; }
.portal-topbar__divider { width: 1px; height: 30px; background: var(--portal-line); }
.portal-user { display: flex; align-items: center; gap: 11px; }
.portal-user__icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--portal-green-100); border-radius: 50%; color: var(--portal-green-700); background: var(--portal-green-50); }
.portal-user__name { color: var(--portal-ink); font-size: 14.5px; font-weight: 700; }
.portal-user__role { color: var(--portal-muted); font-size: 12px; }
.portal-logout { margin: 0; }
.portal-logout__button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 0; border-radius: 9px; color: var(--portal-green-800); background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.portal-logout__button:hover { background: var(--portal-green-50); }

/* Shell y sidebar */
.portal-shell { display: flex; align-items: flex-start; }
.portal-sidebar {
  position: sticky;
  top: 0;
  width: var(--portal-sidebar-w);
  min-height: calc(100vh - 71px);
  flex: none;
  padding: 18px 16px 30px;
  background: var(--portal-card);
}
.portal-nav { display: flex; flex-direction: column; gap: 3px; }
.portal-nav__item { position: relative; display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 11px 13px; border-radius: var(--portal-radius-sm); color: var(--portal-text); font-size: 14.5px; font-weight: 500; transition: background .15s, color .15s; }
.portal-nav__item:hover { color: var(--portal-green-800); background: var(--portal-green-50); }
.portal-nav__item--active { color: var(--portal-green-800); background: var(--portal-green-50); font-weight: 700; }
.portal-nav__item--active::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 0; width: 3.5px; border-radius: 0 4px 4px 0; background: var(--portal-green-600); }
.portal-nav__icon { width: 20px; height: 20px; flex: none; object-fit: contain; }
.portal-promo { margin-top: 26px; overflow: hidden; border: 1px solid var(--portal-green-100); border-radius: var(--portal-radius); background: #f8fbf9; box-shadow: var(--portal-shadow); }
.portal-promo__visual { position: relative; height: 178px; overflow: hidden; background: var(--portal-green-800); }
.portal-promo__visual::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,48,30,.72) 0%, rgba(8,48,30,.2) 58%, rgba(8,48,30,.5) 100%); }
.portal-promo__visual > img { width: 100%; height: 100%; object-fit: cover; object-position: 57% center; }
.portal-promo__copy { position: absolute; top: 0; right: 0; left: 0; z-index: 2; padding: 16px; color: #fff; text-shadow: 0 1px 7px rgba(5,35,21,.72); }
.portal-promo__copy strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; }
.portal-promo__copy span { display: block; width: 34px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--portal-orange-500); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.portal-promo__script { position: relative; z-index: 3; min-height: 82px; margin: 0; padding: 13px 14px 14px; overflow: visible; color: var(--portal-orange-600); font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 22px; font-weight: 700; line-height: 1.12; text-align: center; transform: rotate(-2deg); }

.portal-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; padding: 18px 28px 34px; }
.portal-panel { display: flex; flex-direction: column; gap: 16px; }
.portal-panel[hidden] { display: none !important; }
.portal-section-heading { display: flex; align-items: center; gap: 13px; padding: 4px 2px; }
.portal-section-heading > img { width: 30px; height: 30px; flex: none; object-fit: contain; }
.portal-section-heading h1 { color: var(--portal-green-800); font-size: 25px; font-weight: 800; letter-spacing: -.35px; }
.portal-section-heading p { color: var(--portal-muted); font-size: 13px; }
.portal-panel > .panel { margin: 0; }
.portal-profile-email > .panel { height: 100%; margin: 0; border: 1px solid var(--portal-line); border-radius: var(--portal-radius); background: var(--portal-card); box-shadow: var(--portal-shadow); }
.portal-messages { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-messages li { padding: 11px 14px; border: 1px solid var(--portal-green-100); border-radius: var(--portal-radius-sm); background: var(--portal-green-50); }
.portal-account-context { display: flex; align-items: center; gap: 8px; color: var(--portal-muted); font-size: 13px; }
.portal-account-context a { color: var(--portal-orange-600); font-weight: 600; }

/* Hero */
.portal-hero { position: relative; min-height: 214px; display: flex; align-items: center; overflow: hidden; padding: 26px 30px; border: 1px solid var(--portal-line); border-radius: var(--portal-radius); background: var(--portal-card); box-shadow: var(--portal-shadow); }
.portal-hero__art { position: absolute; inset: 0 0 0 auto; width: 66%; height: 100%; object-fit: cover; object-position: center; clip-path: ellipse(100% 140% at 82% 50%); }
.portal-hero__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.97) 34%, rgba(255,255,255,0) 64%); pointer-events: none; }
.portal-hero__copy { position: relative; z-index: 3; max-width: 490px; }
.portal-hero__title { margin-bottom: 10px !important; color: var(--portal-green-800); font-size: 32px; font-weight: 800; letter-spacing: -.6px; }
.portal-hero__text { max-width: 470px; color: var(--portal-text); font-size: 14px; }
.portal-hero__message { position: absolute; top: 50%; left: 51%; z-index: 3; transform: translateY(-50%); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 2.6px; line-height: 1.7; text-shadow: 0 1px 8px rgba(9,48,29,.5); }
.portal-quote { position: absolute; top: 20px; right: 22px; z-index: 4; width: 214px; padding: 14px 16px 16px; border: 1px solid var(--portal-line); border-radius: 12px; background: rgba(255,255,255,.95); box-shadow: var(--portal-shadow-md); backdrop-filter: blur(3px); }
.portal-quote__mark { margin-bottom: 4px; color: var(--portal-green-500); }
.portal-quote blockquote { color: var(--portal-text); font-size: 13px; line-height: 1.45; }
.portal-quote__rule { display: block; width: 30px; height: 3px; margin-top: 11px; border-radius: 2px; background: var(--portal-orange-500); }

/* Cards, indicadores y acciones */
.portal-card { border: 1px solid var(--portal-line); border-radius: var(--portal-radius); background: var(--portal-card); box-shadow: var(--portal-shadow); }
.portal-cutoff { align-self: flex-end; color: var(--portal-muted); font-size: 12.5px; }
.portal-cutoff strong { color: var(--portal-ink); }
.portal-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.portal-stat { min-width: 0; display: flex; gap: 12px; padding: 16px 16px 14px; border: 1px solid var(--portal-line); border-radius: var(--portal-radius); background: var(--portal-card); box-shadow: var(--portal-shadow); transition: transform .15s, box-shadow .15s; }
.portal-stat:hover { transform: translateY(-2px); box-shadow: var(--portal-shadow-md); }
.portal-stat__icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--portal-green-50); }
.portal-stat__icon img { width: 24px; height: 24px; object-fit: contain; }
.portal-stat__body { min-width: 0; }
.portal-stat__label { display: block; color: var(--portal-muted); font-size: 12.5px; }
.portal-stat__value { display: block; margin: 2px 0 6px; overflow-wrap: anywhere; color: var(--portal-ink); font-size: clamp(16px, 1.35vw, 21px); font-weight: 800; letter-spacing: -.5px; line-height: 1.25; }
.portal-stat__credit-list { display: grid; gap: 2px; margin-top: 4px; color: var(--portal-text); font-size: 11px; line-height: 1.25; }
.portal-stat__credit-list > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-link-more { display: inline-flex; align-items: center; gap: 6px; color: var(--portal-orange-600); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.portal-link-more:hover { color: var(--portal-orange-500); text-decoration: underline; }
/* 4 acciones (Estado de cuenta, Mi perfil, Histórico, Descargar estado de
   cuenta): una sola fila en desktop para que ninguna quede sola en una
   segunda fila con un hueco vacío al lado. */
.portal-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* `min-height` y no `height`: si una etiqueta larga ("Descargar estado de
   cuenta") envuelve a dos líneas en una columna angosta, el botón crece en
   vez de recortar o desbordar el texto; con una sola línea se ve idéntico
   a `height` fijo, así que los cuatro conservan la misma altura en el caso
   común. */
.portal-btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--portal-radius-sm); font-size: 14.5px; font-weight: 600; text-align: center; transition: transform .12s, box-shadow .15s, background .15s, border-color .15s; }
.portal-btn:active { transform: translateY(1px); }
.portal-btn img { width: 20px; height: 20px; object-fit: contain; }
.portal-btn--primary { color: #fff; background: linear-gradient(90deg, var(--portal-green-700), var(--portal-green-500)); box-shadow: 0 4px 14px rgba(31,139,81,.28); }
.portal-btn--primary img { filter: brightness(0) invert(1); }
.portal-btn--primary:hover { box-shadow: 0 6px 18px rgba(31,139,81,.38); }
.portal-btn--ghost { color: var(--portal-green-800); border-color: var(--portal-green-300); background: var(--portal-card); }
.portal-btn--ghost:hover { border-color: var(--portal-green-400); background: var(--portal-green-50); }
/* `.portal-surface a { color: inherit }` pesa más que `.portal-btn--primary`
   / `.portal-btn--ghost` cuando el botón es un enlace: sin esto el texto e
   íconos salen oscuros sobre fondo verde en vez de blancos/verdes. */
.portal-surface a.portal-btn--primary { color: #fff; }
.portal-surface a.portal-btn--ghost { color: var(--portal-green-800); }

/* Grid inferior */
.portal-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.12fr); gap: 16px; align-items: start; }
.portal-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.portal-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 0; }
.portal-card__title { display: flex; align-items: flex-start; gap: 11px; }
.portal-card__title > img { width: 21px; height: 21px; margin-top: 2px; object-fit: contain; }
.portal-card__title h2 { color: var(--portal-ink); font-size: 16.5px; font-weight: 700; }
.portal-card__title p { margin-top: 2px; color: var(--portal-muted); font-size: 12.5px; }
.portal-chart { position: relative; height: 184px; margin: 22px 20px 0; padding-left: 42px; }
.portal-chart__axis { position: absolute; top: 0; bottom: 26px; left: 0; width: 38px; display: flex; flex-direction: column; justify-content: space-between; color: var(--portal-soft); font-size: 11px; text-align: right; }
.portal-chart__grid { position: absolute; inset: 0 0 26px 42px; display: flex; flex-direction: column; justify-content: space-between; }
.portal-chart__grid span { height: 1px; background: var(--portal-line-2); }
.portal-chart--empty p { position: absolute; inset: 0 0 26px 42px; z-index: 2; display: grid; place-items: center; padding: 20px; color: var(--portal-muted); font-size: 12.5px; text-align: center; }
.portal-chart__bars { position: absolute; inset: 0 0 0 42px; z-index: 2; display: flex; align-items: stretch; justify-content: safe center; gap: 16px; overflow-x: auto; padding: 0 8px; }
.portal-chart__bar-item { width: 58px; min-width: 58px; display: grid; grid-template-rows: 20px minmax(0, 1fr) 25px; gap: 3px; text-align: center; }
.portal-chart__value { overflow: hidden; color: var(--portal-ink); font-size: 10.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.portal-chart__track { display: flex; align-items: flex-end; justify-content: center; min-height: 0; border-bottom: 1px solid var(--portal-line); }
.portal-chart__bar { width: 34px; height: var(--portal-bar-height, 6%); min-height: 5px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, var(--portal-green-400), var(--portal-green-700)); transition: filter .15s; }
.portal-chart__bar-item:hover .portal-chart__bar { filter: brightness(1.08); }
.portal-chart__label { color: var(--portal-muted); font-size: 10.5px; white-space: nowrap; }
.portal-note { display: flex; align-items: center; gap: 13px; margin: 18px 20px 20px; padding: 14px 16px; border: 1px solid var(--portal-green-100); border-radius: 11px; background: var(--portal-green-50); }
.portal-note__icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #fff; }
.portal-note__icon img { width: 20px; height: 20px; object-fit: contain; }
.portal-note strong, .portal-note span { display: block; }
.portal-note strong { color: var(--portal-green-800); font-size: 14px; }
.portal-note span { color: var(--portal-muted); font-size: 12.5px; }
.portal-security { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.portal-security__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--portal-green-50); }
.portal-security__icon img { width: 22px; height: 22px; object-fit: contain; }
.portal-security > div { min-width: 0; flex: 1 1 auto; }
.portal-security h2 { color: var(--portal-ink); font-size: 14.5px; font-weight: 700; }
.portal-security p { color: var(--portal-muted); font-size: 12.5px; }

/* Créditos y situación */
/* `auto` en vez de `visible`: no cambia nada mientras la tabla quepa
   (que es siempre el caso de la del Inicio, de ancho fijo), pero deja
   scrollear en horizontal —contenida en esta caja, nunca en la página—
   en cuanto una tabla más ancha (histórico, comparación) no quepa. */
.portal-table-wrap { overflow-x: auto; padding: 14px 20px 20px; }
.portal-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 11.5px; }
.portal-table th { padding: 8px 5px; border-bottom: 1px solid var(--portal-line); color: var(--portal-muted); font-size: 10.5px; font-weight: 600; line-height: 1.2; text-align: left; white-space: normal; }
.portal-table td { padding: 11px 5px; border-bottom: 1px solid var(--portal-line-2); color: var(--portal-text); line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.portal-table th:nth-child(1) { width: 11%; }
.portal-table th:nth-child(2) { width: 17%; }
.portal-table th:nth-child(3) { width: 14%; }
.portal-table th:nth-child(4) { width: 17%; }
.portal-table th:nth-child(5) { width: 9%; }
.portal-table th:nth-child(6) { width: 18%; }
.portal-table th:nth-child(7) { width: 14%; }
.portal-table td:nth-child(6) { overflow-wrap: normal; }
.portal-table tr:last-child td { border-bottom: 0; }
.portal-table td:first-child { color: var(--portal-ink); font-weight: 600; }
.portal-table .portal-badge { max-width: 100%; box-sizing: border-box; padding-inline: 6px; font-size: 10.5px; line-height: 1.15; text-align: center; white-space: normal; }
.portal-badge { display: inline-block; padding: 4px 11px; border-radius: 999px; color: var(--portal-green-800); background: var(--portal-green-100); font-size: 11.5px; font-weight: 600; }
.portal-badge--danger { color: #b42318; background: #fdeaea; }
.portal-badge--warning { color: #8a5a00; background: #fff1cf; }
.portal-empty-copy { padding: 22px 20px; color: var(--portal-muted); }
.portal-situation__body { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding: 17px 20px 20px; color: var(--portal-muted); font-size: 12.5px; }
.portal-situation__body strong { color: var(--portal-ink); }
.portal-cuts { padding: 10px 20px 16px; }
.portal-cut-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--portal-line-2); }
.portal-cut-row:last-child { border-bottom: 0; }
.portal-cut-row time { color: var(--portal-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.portal-cut-row dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-cut-row dl div { min-width: 0; }
.portal-cut-row dt { color: var(--portal-muted); font-size: 10.5px; }
.portal-cut-row dd { margin: 1px 0 0; overflow: hidden; color: var(--portal-text); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

/* Información real complementaria */
.portal-detail-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.12fr); gap: 16px; align-items: start; }
.portal-data-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 14px 20px 20px; }
.portal-data-list div { min-width: 0; padding: 11px 12px; border-bottom: 1px solid var(--portal-line-2); }
.portal-data-list dt { color: var(--portal-muted); font-size: 11.5px; }
.portal-data-list dd { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--portal-ink); font-weight: 600; }
.portal-funds__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 10px; }
.portal-funds__body div { padding: 14px; border: 1px solid var(--portal-green-100); border-radius: 11px; background: var(--portal-green-50); }
.portal-funds__body span, .portal-funds__body strong { display: block; }
.portal-funds__body span { color: var(--portal-muted); font-size: 12px; }
.portal-funds__body strong { margin-top: 3px; color: var(--portal-ink); font-size: 18px; }
.portal-card__footnote { padding: 0 20px 18px; color: var(--portal-muted); font-size: 12px; }
.portal-empty-state { padding: 24px; }
.portal-empty-state h2 { margin-bottom: 6px; color: var(--portal-ink); font-size: 18px; }
.portal-empty-state p { max-width: 760px; margin-bottom: 12px; color: var(--portal-muted); }

/* Estado de cuenta: tarjetas de resumen */
.portal-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; padding: 16px 20px 4px; }
.portal-summary-tile { padding: 14px 16px; border: 1px solid var(--portal-line); border-radius: var(--portal-radius-sm); background: #fff; }
.portal-summary-tile__label { display: block; color: var(--portal-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.portal-summary-tile__value { display: block; margin: 4px 0; color: var(--portal-ink); font-size: 19px; font-weight: 800; }
.portal-summary-tile__value--danger { color: #b42318; }
.portal-summary-tile__note { display: block; color: var(--portal-muted); font-size: 12px; }
.portal-funds__note { display: block; margin-top: 3px; color: var(--portal-muted); font-size: 11.5px; }

/* Estado de cuenta: servicios por convenio */
.portal-service-list { display: flex; flex-direction: column; gap: 18px; padding: 16px 20px 6px; }
.portal-service-group h3 { color: var(--portal-green-800); font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }
.portal-service-period + .portal-service-period { margin-top: 10px; }
.portal-service-period .portal-data-list { margin: 0; border: 1px solid var(--portal-line); border-radius: var(--portal-radius-sm); overflow: hidden; }

/* Aportes: aportes, contribución y solidaridad */
.portal-fund-groups { display: flex; flex-direction: column; gap: 18px; padding: 16px 20px 6px; }
.portal-fund-group h3 { color: var(--portal-green-800); font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }
.portal-fund-group .portal-data-list { margin: 0 0 10px; }

/* Créditos: ficha completa por obligación */
.portal-credit-list { display: flex; flex-direction: column; gap: 20px; }

.portal-credit__header { align-items: center; padding: 20px 20px 18px; border-bottom: 1px solid var(--portal-line); }
.portal-credit__header .portal-card__title h2 { font-size: 18px; }
.portal-credit__header .portal-card__title p { margin-top: 3px; font-size: 12.5px; }

.portal-credit__body { display: flex; flex-direction: column; gap: 22px; padding: 20px 20px 22px; }

/* B. Resumen principal: mini-bloques, no tabla */
.portal-credit__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0; }
.portal-credit__metric { padding: 12px 14px; border: 1px solid var(--portal-green-100); border-radius: var(--portal-radius-sm); background: var(--portal-green-50); }
.portal-credit__metric dt { color: var(--portal-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.portal-credit__metric dd { margin: 4px 0 0; color: var(--portal-ink); font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.portal-credit__metric .portal-credit__metric--danger { color: #b42318; }

/* C y D. Datos del crédito / Fechas: secciones separadas, rejilla compacta */
.portal-credit__section { padding-top: 18px; border-top: 1px solid var(--portal-line); }
.portal-credit__section h3 { margin-bottom: 12px; color: var(--portal-green-800); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.portal-credit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; margin: 0; }
.portal-credit__grid > div { min-width: 0; }
.portal-credit__grid dt { color: var(--portal-muted); font-size: 11.5px; }
.portal-credit__grid dd { margin: 2px 0 0; color: var(--portal-ink); font-weight: 600; overflow-wrap: anywhere; }

/* Caja informativa final: discreta, no compite con los datos */
.portal-credit__notes { display: flex; flex-direction: column; gap: 9px; padding: 15px 18px; border: 1px solid var(--portal-line); border-radius: var(--portal-radius-sm); background: var(--portal-bg); }
.portal-credit__notes p { color: var(--portal-muted); font-size: 11.5px; line-height: 1.5; }

/* Mi perfil: estado del correo */
.portal-email-status { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 20px; }

/* Histórico y comparación: tablas propias, más columnas que la del Inicio.
   No usan `.portal-table`: sus anchos por `nth-child` están calculados
   para las siete columnas de la tabla de créditos del Inicio y dejarían
   sin ancho las columnas de más aquí. */
.portal-history-table {
  width: 100%; min-width: 920px; border-collapse: collapse; font-size: 12px;
}
.portal-history-table th { padding: 9px 8px; border-bottom: 1px solid var(--portal-line); color: var(--portal-muted); font-size: 11px; font-weight: 600; text-align: left; white-space: nowrap; }
.portal-history-table td { padding: 11px 8px; border-bottom: 1px solid var(--portal-line-2); color: var(--portal-text); white-space: nowrap; }
.portal-history-table tr:last-child td { border-bottom: 0; }
.portal-history-table th.num, .portal-history-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.portal-history-table td:first-child { color: var(--portal-ink); font-weight: 600; white-space: nowrap; }
/* La tabla de comparación (4 columnas) no necesita el mismo min-width que
   la del histórico (10 columnas): con el mismo valor haría scroll antes
   de lo necesario. Un modificador propio evita forzar un ancho ajeno. */
.portal-history-table--compare { min-width: 520px; }

/* Histórico: cards de corte para móvil (Responsive Fase 3).
   Ocultas por defecto: en escritorio/tablet manda la tabla de arriba.
   Conviven siempre en el HTML —mismos datos, misma fuente— y es este
   `display` el único que decide cuál se ve. */
.portal-history-mobile { display: none; }
.portal-history-mobile__card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.portal-history-mobile__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.portal-history-mobile__head strong { color: var(--portal-ink); }
.portal-history-mobile__data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 0; }
.portal-history-mobile__data dt { color: var(--portal-muted); font-size: 11px; }
.portal-history-mobile__data dd { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--portal-ink); font-weight: 600; }
.portal-history-mobile__actions { padding-top: 2px; }

/* Histórico: rango comparado y selector de cortes */
.portal-compare-range { padding: 0 20px; color: var(--portal-text); font-size: 13px; }
.portal-compare-selector { padding: 0 20px 18px; }
.portal-compare-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.portal-compare-form label { display: block; margin-bottom: 5px; color: var(--portal-muted); font-size: 12px; font-weight: 600; }
.portal-compare-form select { padding: 9px 10px; border: 1px solid var(--portal-line); border-radius: var(--portal-radius-sm); background: #fff; font: inherit; color: var(--portal-ink); }

/* Seguridad: panel contenido, no a todo el ancho de la superficie */
.portal-password-panel { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }

/* Seguridad: formulario de cambio de contraseña */
.portal-form { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 20px; }
.portal-form__field label { display: block; margin-bottom: 6px; color: var(--portal-ink); font-size: 13px; font-weight: 600; }
.portal-form__field input { width: 100%; padding: 10px 12px; border: 1px solid var(--portal-line); border-radius: var(--portal-radius-sm); background: #fff; font: inherit; color: var(--portal-ink); }
.portal-form__field input:focus { outline: none; border-color: var(--portal-green-400); box-shadow: 0 0 0 3px var(--portal-green-50); }
.portal-form__help { margin-top: 5px; color: var(--portal-muted); font-size: 11.5px; }
.portal-form__errors { margin-top: 5px; color: #b42318; font-size: 11.5px; }
.portal-form .portal-btn { width: 100%; }
.portal-form__notice { display: flex; flex-direction: column; gap: 4px; padding: 15px 18px; border: 1px solid var(--portal-orange-500); border-radius: var(--portal-radius-sm); background: #fff8ee; }
.portal-form__notice strong { color: var(--portal-ink); font-size: 14px; }
.portal-form__notice p { color: var(--portal-text); font-size: 12.5px; }

/* Histórico: acciones de fila como chips, no enlaces sueltos */
.portal-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-row-action { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--portal-green-300); border-radius: 999px; color: var(--portal-green-800); background: var(--portal-green-50); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.portal-row-action:hover { border-color: var(--portal-green-400); background: var(--portal-green-100); }
.portal-row-action--ghost { border-color: var(--portal-line); color: var(--portal-orange-600); background: #fff; }
.portal-row-action--ghost:hover { border-color: var(--portal-orange-500); background: #fff8ee; }

/* Mis cuentas: una fila por cuenta consultable */
.portal-account-list { display: flex; flex-direction: column; gap: 12px; }
.portal-account-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; }
.portal-account-row__label { display: block; color: var(--portal-muted); font-size: 12px; }
.portal-account-row__value { display: block; margin-top: 2px; color: var(--portal-ink); font-size: 16px; font-weight: 800; }

/* Selector de cuenta dentro de la ficha (multicuenta) */
.portal-account-pick { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
.portal-account-pick__head h2 { color: var(--portal-ink); font-size: 16.5px; font-weight: 700; }
.portal-account-pick__head p { margin-top: 2px; color: var(--portal-muted); font-size: 12.5px; }
.portal-account-pick__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.portal-account-pick__item { min-height: 64px; height: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; border: 1px solid var(--portal-line); border-radius: var(--portal-radius-sm); background: var(--portal-card); transition: border-color .15s, background .15s, box-shadow .15s; }
a.portal-account-pick__item:hover { border-color: var(--portal-green-400); background: var(--portal-green-50); box-shadow: var(--portal-shadow-md); }
.portal-account-pick__item--active { border-color: var(--portal-green-600); background: var(--portal-green-50); box-shadow: inset 3.5px 0 0 var(--portal-green-600); }
.portal-account-pick__data { min-width: 0; }
.portal-account-pick__label { display: block; color: var(--portal-muted); font-size: 12px; }
.portal-account-pick__code { display: block; margin-top: 2px; overflow-wrap: anywhere; color: var(--portal-ink); font-size: 16px; font-weight: 800; }
.portal-account-pick__cta { color: var(--portal-orange-600); font-size: 13px; font-weight: 600; white-space: nowrap; }
.portal-account-pick__note { color: var(--portal-muted); font-size: 12px; }

/* Pantallas públicas: recuperación de contraseña y verificación de correo.
   Solo lo que la base pública no hereda del resto del portal: el centrado,
   la cabecera con ícono de estado y la línea del mensaje. */
.portal-public__main { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 16px 56px; }
.portal-public__main > .portal-messages { width: 100%; max-width: 460px; }
.portal-public__card { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 18px; padding: 28px 28px 24px; }
.portal-public__card .portal-form { padding: 0; }
.portal-public__head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.portal-public__head h1 { color: var(--portal-green-800); font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.portal-public__head p { color: var(--portal-muted); font-size: 13.5px; }
.portal-public__icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 4px; border: 1px solid var(--portal-green-100); border-radius: 50%; color: var(--portal-green-700); background: var(--portal-green-50); }
.portal-public__icon .portal-icon { width: 26px; height: 26px; stroke-width: 2; }
.portal-public__icon--notice { border-color: #fbd9a6; color: var(--portal-orange-600); background: #fff8ee; }
.portal-public__icon--danger { border-color: #f7c9c5; color: #b42318; background: #fdeaea; }
.portal-public__status { padding: 12px 14px; border: 1px solid var(--portal-green-100); border-radius: var(--portal-radius-sm); color: var(--portal-green-800); background: var(--portal-green-50); font-weight: 600; text-align: center; }
.portal-public__status--notice { border-color: #fbd9a6; color: #8a5a00; background: #fff8ee; }
.portal-public__status--danger { border-color: #f7c9c5; color: #b42318; background: #fdeaea; }
.portal-public__note { color: var(--portal-muted); font-size: 12.5px; }
.portal-public__actions { display: flex; flex-direction: column; gap: 10px; }
.portal-public__actions .portal-btn { width: 100%; }
.portal-public__links { text-align: center; font-size: 13px; }
.portal-public__links a { display: inline-block; padding: 8px 4px; color: var(--portal-orange-600); font-weight: 600; }
.portal-public__links a:hover { text-decoration: underline; }
.portal-form ul.portal-form__errors { margin: 5px 0 0; padding: 0; list-style: none; }

/* Foco visible con teclado en las superficies de esta fase */
.portal-account-pick__item:focus-visible,
.portal-public a:focus-visible,
.portal-public button:focus-visible { outline: 3px solid var(--portal-green-300); outline-offset: 2px; }

/* Responsive del prototipo */
@media (max-width: 1400px) {
  .portal-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
  .portal-grid, .portal-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .portal-hero__art, .portal-hero__shade, .portal-hero__message { display: none; }
  .portal-quote { position: static; width: auto; margin-top: 18px; }
  .portal-hero { flex-direction: column; align-items: stretch; }
  .portal-hero__copy { max-width: none; }
}
@media (max-width: 900px) {
  .portal-shell { flex-direction: column; }
  .portal-sidebar { position: static; width: 100%; min-height: 0; padding: 12px 16px; border-bottom: 1px solid var(--portal-line); }
  .portal-nav { flex-direction: row; gap: 6px; overflow-x: auto; }
  .portal-nav__item { white-space: nowrap; }
  .portal-nav__item--active::before, .portal-promo { display: none; }
  .portal-main { width: 100%; padding: 16px; }
  /* Tablet: 4 columnas ya no caben con comodidad (etiquetas como
     "Descargar estado de cuenta"), así que pasan a una rejilla 2x2 en vez
     de a una sola columna larga. */
  .portal-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-extended-details { grid-template-columns: minmax(0, 1fr); }
  .portal-extended-details > .panel:nth-child(n) { grid-column: auto; }
  /* Créditos: de 3 a 2 columnas en cuanto la sidebar deja de ser vertical
     y el ancho disponible ya no acomoda 3 con comodidad. */
  .portal-credit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Objetivos táctiles (~44px) en la franja de navegación táctil: el
     botón de salir y los chips de acción de fila quedaban por debajo. */
  .portal-logout__button { min-height: 44px; }
  .portal-row-action { min-height: 44px; padding: 6px 14px; }
}
@media (max-width: 620px) {
  .portal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Móvil: vuelve a 1 columna (el comportamiento de siempre) en vez de la
     rejilla 2x2 de tablet; a este ancho, "Descargar estado de cuenta"
     junto a un ícono ya no cabe en media columna sin envolver de forma
     apretada. */
  .portal-actions { grid-template-columns: minmax(0, 1fr); }
  .portal-topbar { flex-wrap: wrap; padding: 12px 16px; }
  .portal-brand__name { font-size: 16px; }
  .portal-user__name, .portal-user__role, .portal-topbar__divider { display: none; }
  .portal-hero__title { font-size: 26px; }
  /* Hero apilado (ya sin foto ni cita flotante desde 1150px): en pantallas
     angostas el padding y la altura mínima de escritorio se sienten
     pesados sobre solo texto + cita. Se reduce el aire, no el contenido:
     saludo, texto y cita siguen los tres presentes. */
  .portal-hero { min-height: 0; padding: 20px 20px 22px; }
  .portal-quote { margin-top: 14px; padding: 12px 14px 14px; }
  .portal-data-list, .portal-funds__body { grid-template-columns: minmax(0, 1fr); }
  .portal-security { align-items: flex-start; flex-wrap: wrap; }
  .portal-security .portal-link-more { margin-left: 52px; }
  .portal-cut-row { grid-template-columns: minmax(0, 1fr) auto; }
  .portal-cut-row dl { grid-column: 1 / -1; grid-row: 2; }
  /* 620px no bastaba para siete columnas reales (números de contrato,
     "Libre Inversión", fechas): encabezados y valores se apretaban
     dentro de ese ancho aun con scroll. Más ancho mínimo + nowrap
     selectivo en las columnas cortas, sin ocultar ni quitar ninguna. */
  .portal-table { min-width: 760px; }
  .portal-table td:nth-child(3), .portal-table td:nth-child(4),
  .portal-table td:nth-child(5), .portal-table td:nth-child(6) {
    white-space: nowrap;
  }
  /* Créditos: a 1 columna, igual que ya hace `.portal-data-list` para el
     resto de fichas de datos del portal. */
  .portal-credit__grid { grid-template-columns: minmax(0, 1fr); }
  /* Mis cuentas: código de cuenta y botón pueden envolver en vez de
     desbordar cuando el espacio ya no alcanza para los dos en la misma
     fila. */
  .portal-account-row { flex-wrap: wrap; }
  /* Histórico: la tabla de 10 columnas deja de ser legible aun con scroll
     dentro de una pantalla de teléfono; a partir de aquí se ve la card
     por corte en su lugar. Se oculta SOLO esta tabla —`.portal-history-
     table-wrap` es propia de esta página— y no `.portal-table-wrap` en
     general, que también envuelve la tabla de créditos del Inicio y la
     de comparación de cortes; ninguna de las dos debe desaparecer aquí.
     El bloque "Comparar cortes" tampoco se toca. */
  .portal-history-table-wrap { display: none; }
  .portal-history-mobile { display: flex; flex-direction: column; gap: 14px; padding: 0 20px 20px; }
  /* Pantallas públicas: menos aire vertical y lateral en teléfono. */
  .portal-public__main { padding: 24px 16px 40px; }
  .portal-public__card { padding: 22px 18px 20px; }
  .portal-account-pick { padding: 16px; }
}
@media (max-width: 400px) {
  /* Con menos de ~400px la rejilla de 2 columnas de la card empieza a
     apretar rótulos largos ("Contribución acumulada", "Cuotas
     anticipadas"); una sola columna sigue siendo legible sin perder
     ningún dato. */
  .portal-history-mobile__data { grid-template-columns: minmax(0, 1fr); }
}