/* Apariencia compartida del portal Prisai. El tema se aplica en <html> antes de pintar. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

.portal-body {
  --portal-muted: #53677f;
  --portal-focus: rgba(45, 96, 179, .24);
}
html[data-theme="dark"] .portal-body {
  --navy-50: #111d2e;
  --navy-100: #24364e;
  --navy-200: #354b67;
  --navy-300: #536a86;
  --navy-400: #9aacc2;
  --navy-500: #b5c5d7;
  --navy-600: #c7d5e4;
  --navy-700: #dce6f1;
  --navy-800: #e6eef7;
  --navy-900: #eff5fb;
  --gray-50: #17263b;
  --gray-100: #1d2d43;
  --gray-200: #30445e;
  --gray-600: #b7c5d6;
  --portal-muted: #a9bad0;
  --portal-focus: rgba(125, 174, 234, .32);
  background: #0c1727;
  color: #e8eff8;
}

/* Cabecera: marca y navegación permanecen claramente legibles en los dos temas. */
.portal-topbar { background: #10203a; color: #fff; }
.portal-topbar-title,
.portal-topbar-title:hover,
.portal-topbar-title:focus { color: #fff; }
html[data-theme="dark"] .portal-topbar { background: #0a1423; border-bottom-color: #263750; }
.portal-topbar-user { position: relative; }
.portal-profile { position: relative; display: flex; align-items: center; }
.portal-avatar {
  width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.42); border-radius: 50%;
  background: #244d7d; color: #fff; font: 700 1rem/1 var(--font-sans); cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.portal-avatar:hover { border-color: #fff; transform: translateY(-1px); }
.portal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.portal-avatar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.portal-profile-menu {
  position: absolute; z-index: 1100; top: calc(100% + 10px); right: 0; width: min(320px, calc(100vw - 24px));
  padding: 8px; border: 1px solid #dce4ee; border-radius: 14px; background: #fff; color: #172c49;
  box-shadow: 0 16px 42px rgba(8, 22, 42, .22);
}
.portal-profile-menu[hidden] { display: none !important; }
.portal-profile-identity { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 12px 13px; border-bottom: 1px solid #e8edf4; }
.portal-profile-identity strong { overflow: hidden; color: #142947; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-profile-identity span { overflow: hidden; color: #596b82; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-profile-menu-item {
  width: 100%; min-height: 42px; display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border: 0; border-radius: 9px; background: transparent; color: #243c5c; font: 500 .84rem/1.35 var(--font-sans);
  text-align: left; text-decoration: none; cursor: pointer;
}
.portal-profile-menu-item:hover { background: #f1f5fa; color: #142947; }
.portal-profile-menu-item svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.portal-profile-menu-item span { display: flex; flex-direction: column; gap: 2px; }
.portal-profile-menu-item small { color: #596b82; font-size: .7rem; }
.portal-profile-menu :where(button, a):focus-visible { outline: 2px solid #3975b9; outline-offset: 1px; }
.portal-profile-message { margin: 5px 9px 7px; color: #a33e36; font-size: .74rem; line-height: 1.4; }
.portal-profile-message:not(.is-error) { color: #3b7254; }
html[data-theme="dark"] .portal-profile-menu {
  border-color: #334760; background: #17263a; color: #e5edf7; box-shadow: 0 18px 42px rgba(0,0,0,.42);
}
html[data-theme="dark"] .portal-profile-identity { border-bottom-color: #30435b; }
html[data-theme="dark"] .portal-profile-identity strong { color: #f0f5fb; }
html[data-theme="dark"] .portal-profile-identity span,
html[data-theme="dark"] .portal-profile-menu-item small { color: #a9bad0; }
html[data-theme="dark"] .portal-profile-menu-item { color: #dce7f4; }
html[data-theme="dark"] .portal-profile-menu-item:hover { background: #263a54; color: #fff; }
html[data-theme="dark"] .portal-profile-menu :where(button, a):focus-visible { outline-color: #9cc6f2; }

/* Selector de apariencia dentro de Soporte. */
.portal-theme-setting {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin: 0; padding: 16px 28px; border-bottom: 1px solid var(--navy-100); background: var(--navy-50);
}
.portal-theme-copy h4 { margin: 0 0 3px; color: var(--navy-800); font-size: .9rem; font-weight: 650; }
.portal-theme-copy p { margin: 0; color: var(--portal-muted); font-size: .78rem; line-height: 1.45; }
.portal-theme-options { display: inline-flex; flex: 0 0 auto; gap: 4px; padding: 4px; border: 1px solid var(--navy-200); border-radius: 10px; background: var(--navy-50); }
.portal-theme-option {
  min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 11px;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--navy-700);
  font: 600 .77rem var(--font-sans); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.portal-theme-option svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.portal-theme-option:hover { background: rgba(120, 150, 185, .12); }
.portal-theme-option.is-selected { border-color: var(--navy-200); background: #fff; color: #1c4778; box-shadow: 0 1px 3px rgba(15, 35, 60, .08); }
html[data-theme="dark"] .portal-theme-setting { background: #142238; }
html[data-theme="dark"] .portal-theme-options { border-color: #344b66; background: #101b2c; }
html[data-theme="dark"] .portal-theme-option.is-selected { border-color: #536b88; background: #2a405d; color: #f2f6fc; box-shadow: none; }
html[data-theme="dark"] .portal-theme-option:hover { background: #263a54; }

/* Selector circular de avatares oficiales. */
.profile-avatar-dialog { width: min(620px, calc(100vw - 28px)); }
.profile-avatar-description { margin: 4px 0 0; color: #53677f; font-size: .84rem; font-weight: 400; line-height: 1.45; }
.profile-avatar-preview-area {
  display: flex; align-items: center; gap: 14px; margin: 2px 0 18px; padding: 12px 14px;
  border: 1px solid #dce4ee; border-radius: 14px; background: #f7f9fc; color: #172c49;
}
.profile-avatar-preview { width: 76px; height: 76px; flex: 0 0 76px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 12px rgba(8,22,42,.16); }
.profile-avatar-preview-caption { display: block; margin-bottom: 3px; color: #596b82; font-size: .74rem; }
.profile-avatar-preview-area strong { color: #172c49; font-size: .96rem; }
.profile-avatar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.profile-avatar-choice {
  position: relative; min-width: 0; display: grid; justify-items: center; gap: 7px; padding: 10px 6px 9px;
  border: 1px solid #dce4ee; border-radius: 14px; background: #f8fafc; color: #243c5c;
  font: 600 .76rem/1.25 var(--font-sans); cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.profile-avatar-choice:hover { transform: translateY(-2px); border-color: #9db6d3; background: #f1f6fc; }
.profile-avatar-choice:focus-visible { outline: 2px solid #3975b9; outline-offset: 2px; }
.profile-avatar-choice.is-selected { border-color: #3975b9; background: #edf4fc; box-shadow: 0 0 0 2px rgba(57,117,185,.16); color: #163b66; }
.profile-avatar-choice:disabled { cursor: wait; opacity: .72; }
.profile-avatar-choice-image { width: clamp(62px, 15vw, 88px); height: clamp(62px, 15vw, 88px); border: 2px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 10px rgba(8,22,42,.14); }
.profile-avatar-choice-check {
  position: absolute; top: 8px; right: 8px; width: 23px; height: 23px; display: none; place-items: center;
  border: 2px solid #fff; border-radius: 50%; background: #245b93; color: #fff; font-size: .78rem; font-weight: 800;
}
.profile-avatar-choice.is-selected .profile-avatar-choice-check { display: grid; }
.profile-avatar-choice-label { max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.profile-avatar-feedback { min-height: 1.2em; margin: 12px 0 0; color: #276143; font-size: .82rem; line-height: 1.45; }
.profile-avatar-feedback[data-kind="error"] { color: #b23e3e; }
.profile-avatar-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.profile-avatar-actions .portal-btn-secondary { background: transparent; color: var(--navy-700); border: 1px solid var(--navy-200); }
html[data-theme="dark"] .profile-avatar-description { color: #a9bad0; }
html[data-theme="dark"] .profile-avatar-preview-area { border-color: #344b66; background: #111d2e; color: #e5edf7; }
html[data-theme="dark"] .profile-avatar-preview { border-color: #405773; }
html[data-theme="dark"] .profile-avatar-preview-caption { color: #a9bad0; }
html[data-theme="dark"] .profile-avatar-preview-area strong { color: #f0f5fb; }
html[data-theme="dark"] .profile-avatar-choice { border-color: #344b66; background: #17263a; color: #dce7f4; }
html[data-theme="dark"] .profile-avatar-choice:hover { border-color: #7895b7; background: #21344d; }
html[data-theme="dark"] .profile-avatar-choice.is-selected { border-color: #84b2e6; background: #243d5b; box-shadow: 0 0 0 2px rgba(132,178,230,.2); color: #f3f7fc; }
html[data-theme="dark"] .profile-avatar-choice-image { border-color: #405773; }
html[data-theme="dark"] .profile-avatar-feedback { color: #9fe0b7; }
html[data-theme="dark"] .profile-avatar-feedback[data-kind="error"] { color: #ffb1a8; }
@media (prefers-reduced-motion: reduce) {
  .profile-avatar-choice { transition: none; }
  .profile-avatar-choice:hover { transform: none; }
}
.portal-chart-wrap { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.portal-chart-wrap canvas { max-width: 100%; }

/* Base oscura: reutiliza los tokens existentes y sustituye las superficies claras fijas. */
html[data-theme="dark"] .portal-login-wrap { background: #0c1727; }
html[data-theme="dark"] .portal-login-card,
html[data-theme="dark"] .portal-card:not(.portal-card-roi),
html[data-theme="dark"] .portal-calendar,
html[data-theme="dark"] .portal-cal-filters select,
html[data-theme="dark"] .portal-cal-summary > div,
html[data-theme="dark"] .portal-stat-tile,
html[data-theme="dark"] .portal-range-btn:not(.active),
html[data-theme="dark"] .portal-week-scroller,
html[data-theme="dark"] .portal-week-time-axis,
html[data-theme="dark"] .portal-week-day-track,
html[data-theme="dark"] .portal-month-day,
html[data-theme="dark"] .portal-cal-upcoming,
html[data-theme="dark"] .portal-list-item,
html[data-theme="dark"] .portal-search,
html[data-theme="dark"] .portal-filter,
html[data-theme="dark"] .portal-history-row,
html[data-theme="dark"] .portal-hours-row:not(.is-closed),
html[data-theme="dark"] .portal-modal-dialog,
html[data-theme="dark"] .support-quick-btn,
html[data-theme="dark"] .support-msg-assistant,
html[data-theme="dark"] .support-input-wrap textarea {
  border-color: #2a3d56;
  background-color: #17263a;
  color: #e5edf7;
}
html[data-theme="dark"] .portal-main { color: #e5edf7; }
html[data-theme="dark"] .portal-main :where(h1,h2,h3,h4,h5,strong,b,label,dt,dd) { color: #e7eef7; }
html[data-theme="dark"] .portal-card-roi :where(h3,strong) { color: inherit; }
html[data-theme="dark"] .portal-card-roi h3,
html[data-theme="dark"] .portal-card-roi .pilot-countdown-labels strong { color: #fff; }
html[data-theme="dark"] .portal-card-roi { border-color: #1b2e49; background: #0e1b2e; color: #f1f5fb; }
html[data-theme="dark"] .portal-card-roi .pilot-countdown { border-color: #31445e; background: #1a2b43; }
html[data-theme="dark"] .portal-card h3,
html[data-theme="dark"] .portal-cal-heading h2,
html[data-theme="dark"] .portal-cal-period-row h3,
html[data-theme="dark"] .portal-modal-header h2 { color: #e9f0f8; }
html[data-theme="dark"] .portal-login-card h1 { color: #eaf1f8; }
html[data-theme="dark"] .portal-login-card p.sub,
html[data-theme="dark"] .portal-login-footer { color: #a9bad0; }
html[data-theme="dark"] .portal-login-footer a,
html[data-theme="dark"] .portal-link-btn,
html[data-theme="dark"] .portal-nav-link { color: #b8cce4; }
html[data-theme="dark"] .portal-field :where(input,select,textarea),
html[data-theme="dark"] .portal-hours-slot input[type="time"] { border-color: #344a65; background: #101c2d; color: #e8eff8; color-scheme: dark; }
html[data-theme="dark"] .portal-field :where(input,select,textarea):disabled { background: #1b2b40; color: #adbed3; }
html[data-theme="dark"] .portal-btn,
html[data-theme="dark"] .portal-range-btn.active,
html[data-theme="dark"] .portal-cal-view-btn.active,
html[data-theme="dark"] .portal-month-day.is-today .portal-month-day-number,
html[data-theme="dark"] .support-send-btn,
html[data-theme="dark"] .portal-msg.asistente { background-color: #315985; color: #fff; }
html[data-theme="dark"] .portal-btn:hover,
html[data-theme="dark"] .support-send-btn:hover { background-color: #3b6898; color: #fff; }
html[data-theme="dark"] .portal-btn-danger { border-color: #71434a; background: #34242d; color: #ffb0a8; }
html[data-theme="dark"] .portal-btn-danger:hover { background: #482a32; }
html[data-theme="dark"] .portal-load-more { border-color: #344a65; background: #17263a; color: #dbe6f2; }
html[data-theme="dark"] .portal-cal-navigation,
html[data-theme="dark"] .portal-cal-views { border-color: #2a3d56; background: #111d2e; }
html[data-theme="dark"] .portal-cal-control,
html[data-theme="dark"] .portal-cal-view-btn,
html[data-theme="dark"] .portal-cal-clear { color: #d6e1ef; }
html[data-theme="dark"] .portal-cal-control:hover,
html[data-theme="dark"] .portal-cal-view-btn:hover { background: #263a54; }
html[data-theme="dark"] .portal-cal-upcoming > summary { color: #e4edf7; }
html[data-theme="dark"] .portal-cal-upcoming-count { background: #233952; color: #dce8f5; }
html[data-theme="dark"] .portal-week-scroller,
html[data-theme="dark"] .portal-month-scroller { scrollbar-color: #536a86 #17263a; }
html[data-theme="dark"] .portal-week-day-heading,
html[data-theme="dark"] .portal-month-dow { border-color: #2a3d56; background: #1c2d44; color: #b7c7da; }
html[data-theme="dark"] .portal-week-day-heading strong,
html[data-theme="dark"] .portal-month-day-number,
html[data-theme="dark"] .portal-cal-summary strong { color: #e4edf7; }
html[data-theme="dark"] .portal-week-day-heading.is-today { background: #263e5b; color: #e5eef9; }
html[data-theme="dark"] .portal-week-time-axis,
html[data-theme="dark"] .portal-week-day-track,
html[data-theme="dark"] .portal-month-day { border-color: #263a53; }
html[data-theme="dark"] .portal-week-day-track.is-today,
html[data-theme="dark"] .portal-month-day.is-outside { background: #142238; }
html[data-theme="dark"] .portal-week-hour-line { border-top-color: #283c55; }
html[data-theme="dark"] .portal-week-event.confirmed,
html[data-theme="dark"] .portal-month-event.confirmed { background: #183b32; color: #b7e8ce; }
html[data-theme="dark"] .portal-week-event.pending,
html[data-theme="dark"] .portal-month-event.pending { background: #463719; color: #f0d68a; }
html[data-theme="dark"] .portal-week-event.cancelled,
html[data-theme="dark"] .portal-month-event.cancelled { background: #303b49; color: #d1d9e3; }
html[data-theme="dark"] .portal-week-event.unknown,
html[data-theme="dark"] .portal-month-event.unknown { background: #24364e; color: #dce6f1; }
html[data-theme="dark"] .portal-cal-upcoming-status.confirmed { background: #183b32; color: #b7e8ce; }
html[data-theme="dark"] .portal-cal-upcoming-status.pending { background: #463719; color: #f0d68a; }
html[data-theme="dark"] .portal-cal-error { border-color: #774544; background: #352629; color: #ffc1b8; }
html[data-theme="dark"] .portal-cal-empty,
html[data-theme="dark"] .portal-summary-box,
html[data-theme="dark"] .portal-transcript { border-color: #2a3d56; background: #111d2e; color: #e3ebf5; }
html[data-theme="dark"] .portal-summary-box p { color: #d7e2ee; }
html[data-theme="dark"] .portal-msg.contacto { border-color: #344a65; background: #1c2d44; color: #e5edf7; }
html[data-theme="dark"] .portal-msg.equipo { background: #55482b; color: #fbf0d4; }
html[data-theme="dark"] .portal-hours-row.is-closed { background: #1c2b40; }
html[data-theme="dark"] .portal-hours { border-color: #2a3d56; }
html[data-theme="dark"] .portal-modal-header { border-bottom-color: #2d4059; background: #17263a; }
html[data-theme="dark"] .portal-modal-close { border-color: #344a65; background: #1e3048; color: #dce6f1; }
html[data-theme="dark"] .portal-modal-close:hover { background: #2a405c; }
html[data-theme="dark"] .portal-cta-banner { border-color: #765f35; background: #30291d; }
html[data-theme="dark"] .cta-banner-text h4 { color: #f0e6d2; }
html[data-theme="dark"] .cta-banner-text p { color: #d2c7b3; }
html[data-theme="dark"] .support-quick-actions { border-color: #273b55; background: #111d2e; }
html[data-theme="dark"] .support-quick-btn:hover { border-color: #9c8353; background: #302a1e; color: #f1e3c7; }
html[data-theme="dark"] .support-quick-escalate { border-color: #74464a; background: #30232a; color: #ffb6ad; }
html[data-theme="dark"] .support-quick-escalate:hover { background: #432a31; color: #ffd0ca; }
html[data-theme="dark"] .support-input-wrap textarea:focus { background: #101c2d; }
html[data-theme="dark"] .portal-badge.is-derivacion { border-color: #75454b; background: #36242b; color: #ffbbb4; }
html[data-theme="dark"] .portal-badge.is-seguimiento,
html[data-theme="dark"] .portal-badge.is-role-admin { background: #3c3323; color: #f0d79e; }
html[data-theme="dark"] .portal-badge.is-cita_agendada,
html[data-theme="dark"] .portal-badge.is-role-staff { background: #203b5c; color: #c3dcf7; }
html[data-theme="dark"] .portal-list-item:hover,
html[data-theme="dark"] .portal-cal-upcoming-event:hover { background: #21334b; }
html[data-theme="dark"] .portal-loading-inline { color: #a9bad0; }
html[data-theme="dark"] .portal-error { border-color: #75464b; background: #35262a; color: #ffc0b6; }
html[data-theme="dark"] .portal-success { border-color: #37664f; background: #1d362b; color: #b9e6ca; }

@media (max-width: 600px) {
  .portal-theme-setting { align-items: flex-start; flex-direction: column; gap: 12px; padding: 14px 16px; }
  .portal-theme-options { width: 100%; }
  .portal-theme-option { flex: 1 1 0; padding-inline: 8px; }
  .portal-avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .portal-profile-menu { right: 0; }
  .profile-avatar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .profile-avatar-choice { padding: 9px 5px 8px; }
  .profile-avatar-choice-check { top: 6px; right: 6px; }
  .profile-avatar-actions { justify-content: stretch; }
  .profile-avatar-actions .portal-btn { flex: 1 1 0; }
}
@media (max-width: 380px) {
  .portal-topbar-user { gap: 8px; }
  .portal-logout-btn { padding-inline: 9px; font-size: .73rem; }
  .profile-avatar-grid { gap: 7px; }
  .profile-avatar-choice { padding-inline: 3px; font-size: .68rem; }
}
/* En móvil el avatar queda antes del botón de salida; fijar el menú al borde evita que se recorte. */
@media (max-width: 600px) {
  .portal-profile-menu { position: fixed; top: 66px; right: 12px; left: auto; }
}
@media (max-width: 380px) {
  .portal-profile-menu { top: 62px; right: 12px; }
}
html[data-theme="dark"] .support-msg-user { background: #24476f; color: #f4f7fb; }

/* REFINAMIENTO SOLICITADO: SUSCRIPCIÓN, AGENDA Y APARIENCIA */

/* Acceso compacto al tema desde el menú de perfil. */
.portal-profile-theme { padding: 10px 9px 11px; border-bottom: 1px solid #e8edf4; }
.portal-profile-theme-label { display: block; margin: 0 0 7px; color: #596b82; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.portal-profile-theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid #dce4ee; border-radius: 10px; background: #f5f8fb; }
.portal-profile-theme-option { min-width: 0; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 5px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #405570; font: 600 .68rem/1.2 var(--font-sans); white-space: nowrap; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.portal-profile-theme-option svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.portal-profile-theme-option:hover { background: #eaf0f6; color: #172c49; }
.portal-profile-theme-option.is-selected { border-color: #b7c9dc; background: #fff; color: #174a7d; box-shadow: 0 1px 3px rgba(15,35,60,.08); }
.portal-profile-theme-option:focus-visible { outline: 2px solid #3975b9; outline-offset: 1px; }
html[data-theme="dark"] .portal-profile-theme { border-bottom-color: #30435b; }
html[data-theme="dark"] .portal-profile-theme-label { color: #a9bad0; }
html[data-theme="dark"] .portal-profile-theme-options { border-color: #344b66; background: #101b2c; }
html[data-theme="dark"] .portal-profile-theme-option { color: #cfdae8; }
html[data-theme="dark"] .portal-profile-theme-option:hover { background: #263a54; color: #fff; }
html[data-theme="dark"] .portal-profile-theme-option.is-selected { border-color: #7895b7; background: #2a405d; color: #fff; box-shadow: none; }
html[data-theme="dark"] .portal-profile-theme-option:focus-visible { outline-color: #9cc6f2; }

/* Tarjeta de suscripción: plan, estado real disponible y seguimiento del piloto. */
.portal-card-plan { display: flex; flex-direction: column; gap: 15px; min-width: 0; padding: 22px; }
.portal-plan-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-plan-heading { min-width: 0; }
.portal-plan-kicker { display: block; margin-bottom: 5px; color: #61748b; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-card-plan .portal-plan-badge { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #142947; font: 650 clamp(1.35rem, 2.3vw, 1.75rem)/1.18 var(--font-sans); letter-spacing: -.025em; text-transform: none; overflow-wrap: anywhere; }
.portal-plan-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; margin-top: 3px; padding: 6px 9px; border: 1px solid #d7e4dc; border-radius: 999px; background: #eff7f1; color: #286044; font-size: .7rem; font-weight: 700; line-height: 1.2; }
.portal-plan-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.portal-plan-status[data-state="complete"] { border-color: #dbe1e8; background: #f1f3f6; color: #536273; }
.portal-plan-status[data-state="pending"], .portal-plan-status[data-state="unknown"] { border-color: #eadfbe; background: #fbf6e9; color: #785f2c; }
.portal-plan-status[data-state="none"] { border-color: #dce4ee; background: #f5f7fa; color: #63748a; }
.portal-plan-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-plan-fact { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 13px; border: 1px solid #e3e9f0; border-radius: 11px; background: #f8fafc; }
.portal-plan-fact span { color: #61748b; font-size: .7rem; font-weight: 600; }
.portal-plan-fact strong { color: #203752; font-size: .9rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.portal-card-plan .portal-plan-meta { margin: auto 0 0; padding-top: 12px; border-top: 1px solid #e8edf3; color: #64768b; font-size: .72rem; line-height: 1.4; }
html[data-theme="dark"] .portal-card-plan { border-color: #30445d; background: #15243a; color: #e8eff8; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
html[data-theme="dark"] .portal-plan-kicker { color: #a9bad0; }
html[data-theme="dark"] .portal-card-plan .portal-plan-badge { color: #f0f5fb; }
html[data-theme="dark"] .portal-plan-status { border-color: #315744; background: #1c352b; color: #a9dfbd; }
html[data-theme="dark"] .portal-plan-status[data-state="complete"] { border-color: #3a4b60; background: #25364a; color: #d1dce9; }
html[data-theme="dark"] .portal-plan-status[data-state="pending"], html[data-theme="dark"] .portal-plan-status[data-state="unknown"] { border-color: #685832; background: #362f20; color: #efd797; }
html[data-theme="dark"] .portal-plan-status[data-state="none"] { border-color: #3a4d65; background: #1e3047; color: #c4d2e2; }
html[data-theme="dark"] .portal-plan-fact { border-color: #30445d; background: #101d30; }
html[data-theme="dark"] .portal-plan-fact span { color: #a9bad0; }
html[data-theme="dark"] .portal-plan-fact strong { color: #edf3fa; }
html[data-theme="dark"] .portal-card-plan .portal-plan-meta { border-top-color: #30445d; color: #a9bad0; }

/* Indicadores de estado con colores explícitos: los tokens navy se invierten en oscuro. */
.portal-step-dot { font-variant-numeric: tabular-nums; transition: color .16s ease, background-color .16s ease, border-color .16s ease; }
.portal-step.done .portal-step-dot { border-color: #28577f; background: #28577f; color: #fff; }
.portal-step.current .portal-step-dot { border-color: #c9a96e; background: #e8d5a6; color: #1b2d46; }
.portal-step:not(.done):not(.current) .portal-step-dot { border-color: #cbd6e3; background: #f1f5f9; color: #4e627a; }
.portal-step:not(:last-child)::before { background: #d9e2ec; }
.portal-step.current h4 { color: #785d29; }
.portal-step-badge { border: 1px solid #e6d8b7; color: #795f2f; background: #f8f2e5; }
html[data-theme="dark"] .portal-step:not(:last-child)::before { background: #354b63; }
html[data-theme="dark"] .portal-step.done .portal-step-dot { border-color: #286449; background: #286449; color: #fff; }
html[data-theme="dark"] .portal-step.current .portal-step-dot { border-color: #d9bd7b; background: #d9bd7b; color: #172840; }
html[data-theme="dark"] .portal-step:not(.done):not(.current) .portal-step-dot { border-color: #516781; background: #263950; color: #dce7f3; }
html[data-theme="dark"] .portal-step.current h4 { color: #f0d79e; }
html[data-theme="dark"] .portal-step-badge { border-color: #685832; color: #efd797; background: #362f20; }

/* El contador del piloto usa una superficie propia y una pista visible en ambos temas. */
.portal-card-roi .pilot-countdown { border-color: #344b66; background: #172b45; }
.portal-card-roi .pilot-countdown-labels { color: #d5e1ef; }
.portal-card-roi .pilot-countdown-labels strong { color: #fff; }
.portal-card-roi .pilot-progress-track { height: 8px; background: #465b74; }
.portal-card-roi .pilot-progress-fill { background: #e5c982; }
html[data-theme="dark"] .portal-card-roi .pilot-countdown { border-color: #344b66; background: #172b45; }
html[data-theme="dark"] .portal-card-roi .pilot-countdown-labels { color: #d5e1ef; }
html[data-theme="dark"] .portal-card-roi .pilot-countdown-labels strong { color: #fff; }
html[data-theme="dark"] .portal-card-roi .pilot-progress-track { background: #465b74; }
html[data-theme="dark"] .portal-card-roi .pilot-progress-fill { background: #e5c982; }

/* La esquina sticky compartía un fondo claro con un token que se aclara en tema oscuro. */
html[data-theme="dark"] .portal-week-corner { border-color: #2a3d56; background: #1c2d44; color: #edf3fa; }

@media (max-width: 600px) {
  .portal-card-plan { gap: 13px; padding: 20px 18px; }
  .portal-plan-facts { gap: 8px; }
  .portal-plan-fact { padding: 11px 10px; }
  .portal-plan-status { padding: 6px 8px; font-size: .66rem; }
  .portal-profile-theme { padding-inline: 7px; }
}
  @media (max-width: 380px) {
  .portal-card-plan { padding: 18px 14px; }
  .portal-plan-facts { gap: 7px; }
  .portal-profile-theme-option { gap: 4px; font-size: .63rem; }
}
  @media (prefers-reduced-motion: reduce) {
  .portal-step-dot { transition: none; }
  .portal-profile-theme-option { transition: none; }
}