/* Estilo propuesto por Santiago (2026-10-12): claro por defecto, oscuro opcional.
   Capa visual cargada después de minimal.css. Solo cambia apariencia: no altera
   textos, datos, permisos ni comportamiento. Paleta y componentes del lienzo
   «CarteraRD · Interfaz más amigable», página «Nueva dirección». */
@font-face {font-family:"Open Sans";src:url("/_static/90909c931186826584812d3de71df4541f8e694509d7ef8c25299f5272f74618/public/assets/fonts/OpenSans-latin.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face {font-family:"Poppins";src:url("/_static/90909c931186826584812d3de71df4541f8e694509d7ef8c25299f5272f74618/public/assets/fonts/Poppins-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face {font-family:"Poppins";src:url("/_static/90909c931186826584812d3de71df4541f8e694509d7ef8c25299f5272f74618/public/assets/fonts/Poppins-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Claro: la paleta por defecto («Azul») pasa a la del estilo propuesto. */
:root,:root[data-cartera-theme="blue"] {
  --ui-primary:#0078bd;--ui-primary-ink:#ffffff;--ui-background:#f0f2f5;--ui-secondary:#e4f1fa;
  --ui-ink:#0b1f3a;--ui-muted:#5b6f84;--ui-line:#d3dbe6;--ui-surface:#ffffff;
  --sx-card:rgba(255,255,255,.94);--sx-nav:rgba(255,255,255,.92);--sx-inset:#f1f5f9;--sx-avatar:#e9f0f6;
  --sx-shadow:0 1px 2px rgba(11,31,58,.05),0 10px 30px rgba(11,31,58,.08);
  --sx-shadow-strong:0 2px 4px rgba(11,31,58,.06),0 18px 44px rgba(11,31,58,.12);
--sx-link:#00659f;--sx-good:#17733a;--sx-good-bg:#e3f4e8;--sx-warn:#8a5208;--sx-warn-bg:#fcf0da;--sx-bad:#b3263a;--sx-bad-bg:#fdebed
}
/* Oscuro: azul marino con superficies de vidrio. */
:root[data-cartera-theme="oscuro"] {
  color-scheme:dark;
  --ui-primary:#0078bd;--ui-primary-ink:#ffffff;--ui-background:#071426;--ui-secondary:rgba(124,196,242,.14);
  --ui-ink:#f1f5f9;--ui-muted:#9fb3c8;--ui-line:rgba(255,255,255,.14);--ui-surface:#13233a;
  --sx-card:rgba(255,255,255,.07);--sx-nav:rgba(13,30,52,.86);--sx-inset:rgba(7,20,38,.55);--sx-avatar:rgba(255,255,255,.1);
  --sx-shadow:0 18px 44px rgba(0,0,0,.32);--sx-shadow-strong:0 24px 56px rgba(0,0,0,.42);
--sx-link:#7cc4f2;--sx-good:#3ddc84;--sx-good-bg:rgba(61,220,132,.14);--sx-warn:#f5b84b;--sx-warn-bg:rgba(245,184,75,.14);--sx-bad:#ff8a8a;--sx-bad-bg:rgba(255,122,122,.14);
  --brand-surface:#13233a;--brand-info-soft:rgba(124,196,242,.14)
}
:root[data-cartera-theme] {--brand-font:"Open Sans",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}

@media screen {
  html,body {font-family:"Open Sans",Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ui-ink)}
  /* Fondo liso: un degradado detrás de los carruseles desplazables se pinta con recuadros en Chrome. */
  html,body {background:var(--ui-background)}
  .simple-shell,.simple-shell .main,.demo-wizard {background:transparent}

  :is(.simple-shell,.demo-wizard,#modal) :is(h1,h2,h3,.home-amount,.client-capital strong,.client-receipt-amount,.wallet-summary-fact>strong,.home-card>strong) {font-family:Poppins,"Open Sans",sans-serif;letter-spacing:-.01em}
  .simple-shell :is(h1,h2) {font-weight:700}
  .simple-shell :is(.home-amount,.wallet-summary-fact>strong,.client-capital strong) {font-variant-numeric:tabular-nums}
  .simple-shell :is(a:not(.btn):not(.client-button),.client-text-button,.link-button) {color:var(--sx-link)}

  /* Encabezado translúcido y fijo. */
  .simple-shell .beta-topbar,.demo-wizard-top {background:var(--sx-nav);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--ui-line)}
  .simple-shell .beta-topbar.app-header {max-width:none}
  .app-header-row .beta-brand img,.demo-wizard-top img {mix-blend-mode:normal;background:#ffffff;border-radius:12px;padding:2px}
  .app-header-context .simple-demo-label,.demo-label {background:var(--sx-warn-bg);color:var(--sx-warn);font-weight:600;border-radius:999px}
  .header-menu-toggle,.theme-trigger,.header-actions-panel .user-help-button {background:var(--sx-card);border-color:var(--ui-line);border-radius:14px;color:var(--ui-ink)}
  .theme-menu,.profile-role-options {background:var(--ui-surface);border-color:var(--ui-line);border-radius:18px;box-shadow:var(--sx-shadow-strong)}

  /* Tarjetas: una sola superficie, con relieve suave. */
  :is(.simple-shell,.demo-wizard) :is(.client-card,.card,.beta-loan-summary,.loan-notebook,.simple-more,.demo-wizard-card,.wallet-summary,.record-workspace) {background:var(--sx-card);border:1px solid var(--ui-line);border-radius:20px;box-shadow:var(--sx-shadow);color:var(--ui-ink)}
  .simple-shell :is(.beta-capital-hero,.beta-client-hero,.hero-card) {background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:24px;box-shadow:var(--sx-shadow-strong);color:var(--ui-ink)}
  .simple-shell .home-card {border-radius:20px;border:1px solid var(--ui-line);background:var(--sx-card);box-shadow:var(--sx-shadow);transition:transform .15s ease,box-shadow .15s ease}
  .simple-shell .home-card:hover {transform:translateY(-2px);box-shadow:var(--sx-shadow-strong);border-color:var(--ui-primary)}
  .simple-shell .home-card .home-amount {font-size:26px}
  .simple-shell .home-section-heading h2 {font-size:19px}
  :is(.simple-shell,#modal) :is(.client-card h2,.client-card strong) {color:var(--ui-ink)}
  :is(.simple-shell,#modal) :is(.client-card p,.wallet-summary-note,.wallet-summary-fact>span,.muted,.client-muted,.client-note) {color:var(--ui-muted)}
  .simple-shell .wallet-summary-row {border-top-color:var(--ui-line)}

  /* Botones: una acción principal azul, el resto superficie con borde. */
  :is(.simple-shell,.demo-wizard,#modal) :is(.btn,.client-button) {border-radius:14px;min-height:46px;font-family:Poppins,"Open Sans",sans-serif;font-weight:600;background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);transition:transform .15s ease,box-shadow .15s ease}
  :is(.simple-shell,.demo-wizard,#modal) :is(.btn,.client-button):active {transform:scale(.98)}
  :is(.simple-shell,.demo-wizard,#modal) :is(.btn.primary,.btn.good,.client-button.primary) {background:var(--ui-primary);color:var(--ui-primary-ink);border-color:var(--ui-primary);box-shadow:0 10px 24px rgba(0,120,189,.32)}
  :is(.simple-shell,.demo-wizard,#modal) .btn.danger {color:var(--sx-bad);border-color:var(--sx-bad)}
  .simple-shell .client-button.text {background:transparent;border-color:transparent;box-shadow:none}

  /* Campos de formulario. */
  :is(.simple-shell,.demo-wizard,#modal) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {border-radius:12px;border:1px solid var(--ui-line);background:var(--sx-inset);color:var(--ui-ink)}

  /* Estados: pastillas con color solo para el significado. */
  :is(.simple-shell,#modal) :is(.badge,.client-status,.beta-status) {border-radius:999px;font-weight:600;width:fit-content;max-width:100%;padding-inline:10px}
  @media(max-width:760px) {.header-actions-panel {background:var(--ui-surface);border-color:var(--ui-line);border-radius:18px;box-shadow:var(--sx-shadow-strong)}}
  :is(.simple-shell,#modal) :is(.badge,.client-status,.beta-status).good {background:var(--sx-good-bg);color:var(--sx-good)}

  /* Menú inferior flotante. */
  .simple-shell .beta-bottom-nav {left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));margin:0 auto;padding:6px;gap:4px;border:1px solid var(--ui-line);border-radius:24px;background:var(--sx-nav);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--sx-shadow-strong)}
  .simple-shell .beta-bottom-nav button {border-radius:18px;color:var(--ui-muted);font-weight:600}
  .simple-shell .beta-bottom-nav button.active,.simple-shell .beta-bottom-nav button.active .beta-avatar {background:var(--ui-primary);color:var(--ui-primary-ink)}
  html:has(.demo-shell) .toast-zone {bottom:110px}

  /* Diálogo. */
  #modal {border:1px solid var(--ui-line);border-radius:24px;box-shadow:var(--sx-shadow-strong);background:var(--ui-surface)}
  #modal::backdrop {background:rgba(7,20,38,.45);backdrop-filter:blur(4px)}

  /* Elegir perfil de la demo. */
  .demo-wizard-card {padding:24px}
  .demo-wizard h1 {font-family:Poppins,"Open Sans",sans-serif;font-weight:700}
  .demo-wizard .role-card {border:1px solid var(--ui-line);border-radius:20px;background:var(--sx-card);box-shadow:var(--sx-shadow);transition:transform .18s ease,box-shadow .18s ease}
  .demo-wizard .role-card:hover,.demo-wizard .role-card:focus-visible {transform:translateY(-2px);background:var(--sx-card);border-color:var(--ui-primary);box-shadow:var(--sx-shadow-strong)}
  .demo-wizard .role-card::before {display:none}
  .demo-wizard .role-card strong {font-family:Poppins,"Open Sans",sans-serif}
  .demo-wizard .role-icon {background:var(--ui-secondary);color:var(--sx-link)}

  /* Selector de colores: seis opciones. */
  .theme-choices {grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-theme-choice="blue"] {--swatch-primary:#0078bd;--swatch-background:#f3f6fa}
  [data-theme-choice="oscuro"] {--swatch-primary:#0078bd;--swatch-background:#071426}

  /* Oscuro: textos con color propio en hojas anteriores. */
  :root[data-cartera-theme="oscuro"] :is(.simple-shell,.demo-wizard,#modal) :is(p,li,dt,dd,small,label,summary,td,th) {color:inherit}
  :root[data-cartera-theme="oscuro"] :is(.simple-shell,.demo-wizard,#modal) {color:var(--ui-ink)}
  :root[data-cartera-theme="oscuro"] .app-header-row .beta-brand img {background:#ffffff}
  :root[data-cartera-theme="oscuro"] .simple-shell :is(.client-heading p,.home-empty) {color:var(--ui-muted)}
  :root[data-cartera-theme="oscuro"] .simple-shell .wallet-summary-fact>strong {color:var(--ui-ink)}
  :root[data-cartera-theme="oscuro"] :is(.simple-shell,.profile-role-options) .profile-info {color:var(--sx-link)}
  /* Oscuro: selectores de hojas anteriores con texto oscuro fijo (inventario de client-home, experience, beta, app...). */
  :root[data-cartera-theme="oscuro"] :is(
    .beta-detail-amount,
    .beta-greeting h2,
    .beta-link-row,
    .beta-section-head h3,
    .client-card h2,
    .client-due-total strong,
    .client-guide #modal-content,
    .client-guide .modal-head [data-close],
    .client-guide .modal-head h2,
    .client-guide-back,
    .client-heading h1,
    .client-home,
    .client-profile-links button,
    .client-receipt-amount,
    .client-result-icon,
    .client-shell,
    .client-task-icon,
    .client-tasks>button,
    .experience-facts dd,
    .experience-home .beta-section-head h3,
    .experience-menu-heading,
    .experience-shell .sidebar .nav button,
    .experience-shell .sidebar .sidebar-close,
    .record-statement .statement-heading,
    .simple-start [role=alert],
    .statement-signatures span,
    .view-depth-selector h2,
    .view-depth-selector h3,
    .view-depth-selector select) {color:var(--ui-ink)}
  :root[data-cartera-theme="oscuro"] :is(
    .beta-account-person p,
    .beta-avatar,
    .beta-back,
    .beta-client-hero>.beta-balance-link>span:first-child,
    .beta-client-hero>p,
    .beta-counter,
    .beta-demo-note,
    .beta-empty p,
    .beta-facts dt,
    .beta-greeting p,
    .beta-guide-button,
    .beta-guide-count,
    .beta-help,
    .beta-link-row .beta-secondary-amount,
    .beta-link-row small,
    .beta-loan-summary>p,
    .beta-login .role-card small,
    .beta-movement>small,
    .beta-proposal-card p,
    .beta-quiet,
    .beta-receipt-heading>span,
    .beta-responsible,
    .beta-secondary-amount,
    .beta-section-head p,
    .beta-start-loan,
    .beta-start-loan span,
    .cash-step,
    .client-breakdown dt,
    .client-capital span,
    .client-card p,
    .client-contract-summary summary,
    .client-due-total,
    .client-due-total summary,
    .client-guide-intro,
    .client-heading p,
    .client-note,
    .client-obligation-label,
    .client-payment-row>div>span,
    .client-profile-links svg,
    .client-remaining,
    .client-shell .beta-guide-button,
    .client-tasks small,
    .experience-empty,
    .experience-facts dt,
    .experience-home .beta-link-row small,
    .experience-home .beta-quiet,
    .experience-home summary,
    .experience-shell .side-foot a,
    .experience-shell .side-foot button,
    .loan-notebook time,
    .login-note,
    .private-test-note,
    .proposal-progress,
    .record-statement footer,
    .statement-reference) {color:var(--ui-muted)}
  :root[data-cartera-theme="oscuro"] :is(.badge,.beta-status,.client-status,.record-status) {background:var(--sx-avatar);color:var(--ui-muted);border-color:transparent}
  :root[data-cartera-theme="oscuro"] :is(.badge.good,.beta-status.good,.client-status.good) {background:var(--sx-good-bg);color:var(--sx-good)}
  :root[data-cartera-theme="oscuro"] :is(.beta-status.pending,.client-status.warning,.notice.warn) {background:var(--sx-warn-bg);color:var(--sx-warn)}
  :root[data-cartera-theme="oscuro"] :is(.beta-status.danger,.client-status.danger,.notice.bad,.error-banner) {background:var(--sx-bad-bg);color:var(--sx-bad)}
  :root[data-cartera-theme="oscuro"] :is(.notice,.cash-save-status) {background:var(--sx-inset);color:var(--ui-ink);border-color:var(--ui-line)}
  /* Oscuro: superficies que hojas anteriores fijan en blanco. */
  :root[data-cartera-theme="oscuro"] :is(#modal,#modal.client-guide,.client-shell .beta-topbar,.beta-shell .sidebar,.client-card,.beta-section,.beta-client-hero,.beta-loan-summary,.beta-proposal-card,.beta-empty,.beta-capital-grid>div,.loan-notebook) {background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line)}
  :root[data-cartera-theme="oscuro"] .client-shell {background:var(--ui-background)}
  :root[data-cartera-theme="oscuro"] :is(.client-button.secondary,.view-depth-selector select) {background:var(--sx-inset);color:var(--ui-ink);border-color:var(--ui-line)}
  :root[data-cartera-theme="oscuro"] :is(.client-payment-result>.client-status,[data-client-receipt-card]>.client-status) {background:var(--sx-avatar);color:var(--ui-muted)}
  :root[data-cartera-theme="oscuro"] [data-client-receipt-card]>.client-status.good {background:var(--sx-good-bg);color:var(--sx-good)}
  :root[data-cartera-theme="oscuro"] [data-client-receipt-card]>.client-status.danger {background:var(--sx-bad-bg);color:var(--sx-bad)}
  :root[data-cartera-theme="oscuro"] .private-test-note {background:var(--sx-warn-bg);color:var(--sx-warn)}
  :root[data-cartera-theme="oscuro"] .beta-avatar {background:var(--sx-avatar);color:var(--ui-ink)}
  :root[data-cartera-theme="oscuro"] :is(.client-result-icon,.client-task-icon) {background:var(--ui-secondary);color:var(--sx-link)}
  /* Vidrio solo en oscuro: en claro las tarjetas ya son casi opacas. */
  :root[data-cartera-theme="oscuro"] :is(.simple-shell,.demo-wizard) :is(.client-card,.card,.home-card,.demo-wizard-card,.role-card) {backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

  @media (prefers-reduced-motion: reduce) {.simple-shell .home-card,:is(.simple-shell,.demo-wizard,#modal) :is(.btn,.client-button),.demo-wizard .role-card {transition:none}}
}

/* Avisos (toasts): uno por acción, con tipo, cerrables y visibles también sobre diálogos. */
@media screen {
  .toast-zone {position:fixed;z-index:90;left:50%;right:auto;transform:translateX(-50%);bottom:calc(110px + env(safe-area-inset-bottom));width:min(440px,calc(100vw - 24px));display:grid;gap:8px;pointer-events:none}
  dialog .toast-zone {bottom:calc(16px + env(safe-area-inset-bottom))}
  html:has(.demo-shell) .toast-zone,.beta-shell .toast-zone {bottom:calc(110px + env(safe-area-inset-bottom))}
  .toast {pointer-events:auto;display:flex;align-items:flex-start;gap:10px;max-width:none;padding:12px 10px 12px 14px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-surface);color:var(--ui-ink);box-shadow:var(--sx-shadow-strong);font-size:14px;line-height:1.45;animation:toast-in .2s ease-out}
  .toast::before {flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-weight:700;font-size:14px;line-height:1;content:"i";background:var(--ui-secondary);color:var(--sx-link)}
  .toast-success::before {content:"✓";background:var(--sx-good-bg);color:var(--sx-good)}
  .toast-error::before {content:"!";background:var(--sx-bad-bg);color:var(--sx-bad)}
  .toast-warning::before {content:"!";background:var(--sx-warn-bg);color:var(--sx-warn)}
  .toast-error {border-color:var(--sx-bad)}
  .toast-text {flex:1;min-width:0;padding-top:2px;overflow-wrap:anywhere}
  .toast-close {flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-4px 0;border:0;border-radius:10px;background:transparent;color:var(--ui-muted);font-size:20px;cursor:pointer}
  .toast-close:hover {background:var(--sx-inset)}
  @keyframes toast-in {from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:none}}
  /* Botón con la operación en curso: el propio botón lo muestra. */
  .is-busy {position:relative;color:transparent!important;pointer-events:none}
  .is-busy::after {content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-color:var(--ui-muted) transparent var(--ui-muted) var(--ui-muted);animation:busy-spin .8s linear infinite}
  :is(.btn.primary,.client-button.primary).is-busy::after {border-color:#ffffff transparent #ffffff #ffffff}
  @keyframes busy-spin {to {transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce) {.toast {animation:none}.is-busy::after {animation-duration:2s}}
}

.toast .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Touch targets: disclosure rows were ~24px tall. */
.main details > summary{min-height:44px;padding-block:10px;box-sizing:border-box;cursor:pointer}

/* One way back: when the header "Atrás" is shown, in-page "‹ …" links are redundant. */
.simple-shell:has(.app-back:not([hidden])) #page :is([data-inline-back],.beta-back){display:none}

/* Ajustes → Apariencia: colours chosen right here. */
.settings-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.settings-theme{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border:1px solid var(--ui-line);border-radius:14px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.settings-theme[aria-pressed="true"]{border-color:var(--ui-primary,#0078bd);box-shadow:0 0 0 2px var(--ui-primary,#0078bd) inset;font-weight:600}
.settings-swatch{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid #0002}
.settings-swatch-blue{background:#0078bd}.settings-swatch-green{background:#187447}.settings-swatch-pink{background:#b33870}
.settings-swatch-purple{background:#7650b1}.settings-swatch-yellow{background:#e8b831}.settings-swatch-oscuro{background:#071426}
.profile-option-text{display:grid;gap:2px;min-width:0}
.profile-option-text small{font-size:.8rem;font-weight:400;color:var(--ui-muted);line-height:1.35}
.wallet-more{margin-top:16px;border:1px solid var(--ui-line);border-radius:16px;padding:0 14px}
.wallet-more>summary{font-weight:600}
.wallet-more[open]{padding-bottom:14px}

/* Ajustes → Seguridad */
.security-card{display:grid;gap:12px}
.security-list{list-style:none;margin:0;padding:0;display:grid}
.security-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--ui-line)}
.security-list li:first-child{border-top:0}
.security-list span{display:grid;gap:2px;min-width:0}
.security-list small{color:var(--ui-muted);font-size:.8rem}
.security-qr{display:grid;place-items:center;min-height:176px;margin:8px 0}
.security-secret code,.security-codes code{font-size:.95rem;letter-spacing:.06em;word-break:break-all}
.security-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding-left:18px}

/* A single carousel dot says nothing. */
.home-dots:not(:has(> :nth-child(2))){display:none}

/* Escritorio: menú lateral y contenido a dos columnas. */
@media screen and (min-width:1024px){
  :root .experience-shell .beta-bottom-nav{position:fixed;inset:var(--sx-header-h,113px) auto 0 0;width:232px;max-width:none;margin:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;padding:20px 14px;border:0;border-right:1px solid var(--ui-line);border-radius:0;background:var(--sx-card,#fff);box-shadow:none;transform:none}
  :root .experience-shell .beta-bottom-nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;width:100%;min-height:48px;padding:0 14px;border-radius:12px;font-size:15px;line-height:1.2}
  :root .experience-shell .beta-bottom-nav button svg{width:22px;height:22px;flex:none}
  :root .experience-shell .main{padding-left:232px;box-sizing:border-box}
  :root .experience-shell .app-header{margin-left:-232px;width:calc(100% + 232px);max-width:none;box-sizing:border-box}
  :root .experience-shell #page{max-width:980px;padding-bottom:48px}
  :root .experience-shell #page:has([data-home-section]){max-width:1180px}
  .wallet-dashboard:has([data-home-section]),.client-home:has(>[data-home-section]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 36px;align-items:start}
  .wallet-dashboard:has([data-home-section])>:not([data-home-section]),.client-home:has(>[data-home-section])>:not([data-home-section]){grid-column:1/-1}
  .wallet-home-actions{max-width:560px}
}

/* Movimiento de la app: breve, con sentido, y nada si el sistema pide reducirlo. */
@media (prefers-reduced-motion:no-preference){
  @keyframes sx-page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes sx-modal-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes sx-fade{from{opacity:0}to{opacity:1}}
  @keyframes sx-tap{0%{transform:scale(1)}40%{transform:scale(.9)}100%{transform:scale(1)}}

  /* Each screen slides in; its blocks follow in a short cascade. */
  #page>*{animation:sx-page-in .28s cubic-bezier(.2,.7,.2,1) both}
  #page>*>:is(section,header,.wallet-quick,.client-card,.wallet-list,.wallet-stats){animation:sx-page-in .34s cubic-bezier(.2,.7,.2,1) both}
  #page>*>:nth-child(2){animation-delay:.04s}#page>*>:nth-child(3){animation-delay:.08s}#page>*>:nth-child(4){animation-delay:.12s}
  #page>*>:nth-child(5){animation-delay:.16s}#page>*>:nth-child(6){animation-delay:.2s}#page>*>:nth-child(n+7){animation-delay:.24s}

  /* Dialogs rise in over a fading backdrop. */
  dialog[open]{animation:sx-modal-in .24s cubic-bezier(.2,.7,.2,1)}
  dialog[open]::backdrop{animation:sx-fade .24s ease}

  /* Touch and pointer feedback. */
  :is(.btn,.client-button,.simple-register,.home-card,.beta-bottom-nav button,.settings-theme,.profile-option-row>button){transition:transform .16s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
  :is(.btn,.client-button,.simple-register,.settings-theme):active{transform:scale(.97)}
  .home-card:active,.profile-option-row>button:active{transform:scale(.985)}
  .beta-bottom-nav button.active svg{animation:sx-tap .32s ease}
  @media (hover:hover){
    :is(.simple-shell,#modal) :is(.btn.primary,.client-button.primary):hover{transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--ui-primary) 20%,transparent)}
    .simple-shell :is(.home-card,.wallet-loan,.security-card):hover{transform:translateY(-2px);box-shadow:0 2px 4px #0b1f3a0d,0 16px 36px #0b1f3a1c}
    .simple-shell :is(.wallet-loan,.security-card){transition:transform .2s ease,box-shadow .2s ease}
  }
  /* Disclosures open smoothly. */
  details[open]>:not(summary){animation:sx-page-in .22s ease both}
}

/* Modales: centrados en escritorio, hoja inferior en el teléfono. */
html.modal-open{overflow:hidden}
:root #modal::backdrop{background:rgba(7,20,38,.42);backdrop-filter:blur(2px)}
:root #modal{width:min(560px,calc(100vw - 32px));max-height:min(88dvh,780px);border:1px solid var(--ui-line);border-radius:24px;padding:0;overflow:hidden}
:root #modal-content{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:inherit}
:root #modal .modal-head{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 10px;border:0}
:root #modal .modal-title-block{flex:1;min-width:0;display:grid;gap:10px}
:root #modal .modal-head h2{margin:0;font-size:1.25rem;line-height:1.25;color:var(--ui-ink);outline:none}
:root #modal .modal-close{flex:none;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;border:0;background:var(--sx-inset,#f1f5f9);color:var(--ui-ink);box-shadow:none}
:root #modal .modal-close svg{width:20px;height:20px}
:root #modal .modal-close:hover{background:var(--ui-secondary)}
.modal-step{display:grid;gap:6px;font-size:.8rem;font-weight:600;color:var(--ui-muted)}
.modal-step-bar{display:block;height:4px;border-radius:99px;background:var(--ui-line);overflow:hidden}
.modal-step-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--ui-primary);transition:width .3s ease}
.modal-step-bar[data-steps="2"][data-step="1"] i{width:50%}
.modal-step-bar[data-steps="3"][data-step="1"] i{width:33.3%}.modal-step-bar[data-steps="3"][data-step="2"] i{width:66.6%}
.modal-step-bar[data-steps="4"][data-step="1"] i{width:25%}.modal-step-bar[data-steps="4"][data-step="2"] i{width:50%}.modal-step-bar[data-steps="4"][data-step="3"] i{width:75%}
:root #modal .modal-body{padding:8px 24px 20px;overflow-y:auto;overscroll-behavior:contain}
:root #modal .modal-body>:first-child{margin-top:0}
:root #modal .modal-body :is(label){font-weight:600;font-size:.92rem;color:var(--ui-ink)}
:root #modal .modal-body .field{display:grid;gap:6px;margin:0 0 16px}
:root #modal .modal-body :is(input:not([type=checkbox]):not([type=radio]),select,textarea){width:100%;min-height:48px;padding:10px 14px;box-sizing:border-box;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface);color:var(--ui-ink);font:inherit;font-size:1rem;transition:border-color .15s ease,box-shadow .15s ease}
:root #modal .modal-body :is(input,select,textarea):focus-visible{outline:none;border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 22%,transparent)}
:root #modal .modal-body input[inputmode="decimal"]{font-family:Poppins,"Open Sans",sans-serif;font-size:1.2rem;font-weight:600;font-variant-numeric:tabular-nums}
:root #modal .modal-body input::placeholder{color:var(--ui-muted);opacity:.6}
:root #modal .modal-body>p:not(.notice):not(.pin){color:var(--ui-muted);font-size:.92rem;line-height:1.55}
:root #modal .modal-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;border-top:1px solid var(--ui-line);background:var(--ui-surface)}
:root #modal .modal-foot :is(.btn,.client-button){flex:0 0 auto;width:auto;min-width:132px;margin:0}
:root #modal .modal-foot :is(.btn,.client-button):not(.primary):not(.good):not(.danger){background:var(--ui-surface);color:var(--ui-ink);border:1.5px solid color-mix(in srgb,var(--ui-ink) 28%,transparent);box-shadow:0 1px 2px rgba(11,31,58,.08);font-weight:650;min-height:44px;padding-inline:18px;transition:background .15s ease,border-color .15s ease}
:root #modal .modal-foot :is(.btn,.client-button):not(.primary):not(.good):not(.danger):hover{background:color-mix(in srgb,var(--ui-ink) 6%,var(--ui-surface));border-color:color-mix(in srgb,var(--ui-ink) 45%,transparent)}
:root #modal .modal-foot :is(.btn,.client-button):not(.primary):not(.good):not(.danger):focus-visible{outline:3px solid color-mix(in srgb,var(--ui-primary) 45%,transparent);outline-offset:2px}

@media (max-width:640px){
  :root #modal:not(.client-guide){width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:0}
  :root #modal:not(.client-guide) #modal-content::before{content:"";justify-self:center;width:40px;height:4px;margin-top:10px;border-radius:99px;background:var(--ui-line)}
  :root #modal:not(.client-guide) #modal-content{grid-template-rows:auto auto minmax(0,1fr) auto}
  :root #modal .modal-head{padding:12px 20px 8px}
  :root #modal .modal-body{padding:8px 20px 16px}
  /* Primary action on top, closest to the thumb's reach after reading. */
  :root #modal .modal-foot{flex-direction:column-reverse;align-items:stretch;padding:12px 20px max(14px,env(safe-area-inset-bottom))}
  :root #modal .modal-foot :is(.btn,.client-button){width:100%;min-height:50px}
}
@media (prefers-reduced-motion:no-preference) and (max-width:640px){
  @keyframes sx-sheet-up{from{transform:translateY(100%)}to{transform:none}}
  :root #modal:not(.client-guide)[open]{animation:sx-sheet-up .32s cubic-bezier(.2,.8,.2,1)}
}
:root #modal .modal-foot{flex-wrap:wrap}
@media (min-width:641px){:root #modal .modal-foot>:only-child{margin-left:auto}}
:root #modal .modal-body>label:not(.check-field){display:grid;gap:6px;margin:16px 0}

/* Formularios dentro de modales: un panel que agrupa, campos con forma propia. */
:root #modal .form-panel{display:grid;gap:16px;margin:4px 0 18px;padding:18px;border-radius:18px;background:var(--sx-inset,#f4f7fb);border:1px solid var(--ui-line)}
:root #modal .form-panel>:is(.field,label){margin:0;display:grid;gap:8px}
:root #modal .form-panel label{font-size:.88rem;font-weight:600;color:var(--ui-ink);letter-spacing:.01em}
:root #modal .form-panel :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background:var(--ui-surface);border:1.5px solid color-mix(in srgb,var(--ui-line) 70%,var(--ui-muted));box-shadow:0 1px 2px #0b1f3a0a}
:root #modal .form-panel :is(input,select,textarea):hover{border-color:color-mix(in srgb,var(--ui-primary) 45%,var(--ui-line))}
:root #modal .form-panel :is(input,select,textarea):focus-visible{border-color:var(--ui-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-primary) 18%,transparent)}
:root #modal .form-panel textarea{min-height:96px;resize:vertical}
.money-input,.select-input{position:relative;display:block}
.money-prefix{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-family:Poppins,"Open Sans",sans-serif;font-weight:600;font-size:1rem;color:var(--ui-muted);pointer-events:none}
:root #modal .modal-body .money-input input:not([type=checkbox]):not([type=radio]){padding-left:58px;min-height:56px;font-size:1.35rem}
.select-input::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--ui-muted);border-bottom:2px solid var(--ui-muted);transform:rotate(45deg);pointer-events:none}
:root #modal .select-input select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
/* Explanations around the form read as quiet notes, not as loose text. */
:root #modal .form-panel+p:not(.notice){display:flex;gap:10px;margin:0 0 4px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--ui-primary) 7%,var(--ui-surface));color:var(--ui-ink);font-size:.88rem}
:root #modal .form-panel+p:not(.notice)::before{content:"i";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ui-primary);color:var(--ui-primary-ink,#fff);font:700 .75rem/1 Poppins,sans-serif}
.theme-icon{width:20px;height:20px;flex:none}

/* Demo: perfiles como botones claros, con color propio y acción visible. */
.demo-wizard .role-card{--role:var(--ui-primary);position:relative;display:grid;align-content:start;gap:4px;text-align:left;padding:20px 18px 16px;border:1.5px solid var(--ui-line);border-radius:18px;background:var(--ui-surface);color:var(--ui-ink);box-shadow:0 1px 2px #0b1f3a0d,0 8px 22px #0b1f3a12;cursor:pointer;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.demo-wizard .role-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--role)}
.demo-wizard .role-card[data-demo-profile="ana"]{--role:#1d3f74}.demo-wizard .role-card[data-demo-profile="luis"]{--role:#0e7fb8}.demo-wizard .role-card[data-demo-profile="jose"]{--role:#2d9b4b}.demo-wizard .role-card[data-demo-profile="bruno"]{--role:#0b8fa3}
.demo-wizard .role-card .role-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:8px;border-radius:50%;background:var(--role);color:#fff;font:700 1.15rem Poppins,sans-serif}
.demo-wizard .role-card strong{font-size:1.25rem}
.demo-wizard .role-card>span:not(.role-icon):not(.role-go){justify-self:start;padding:2px 10px;border-radius:99px;background:color-mix(in srgb,var(--role) 12%,transparent);color:var(--role);font:600 .78rem Poppins,sans-serif}
.demo-wizard .role-card small{margin-top:4px;color:var(--ui-muted);font-size:.88rem;line-height:1.45}
.role-go{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--ui-line);color:var(--role);font:600 .9rem Poppins,sans-serif}
.role-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--role) 12%,transparent);transition:transform .2s ease,background .2s ease,color .2s ease}
.demo-wizard .role-card:hover,.demo-wizard .role-card:focus-visible{border-color:var(--role);transform:translateY(-3px);box-shadow:0 2px 4px #0b1f3a0d,0 18px 36px color-mix(in srgb,var(--role) 22%,transparent)}
.demo-wizard .role-card:focus-visible{outline:3px solid color-mix(in srgb,var(--role) 40%,transparent);outline-offset:2px}
.demo-wizard .role-card:hover .role-arrow,.demo-wizard .role-card:focus-visible .role-arrow{transform:translateX(3px);background:var(--role);color:#fff}
.demo-wizard .role-card:active{transform:scale(.98)}
.demo-wizard-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink);font:600 .9rem Poppins,"Open Sans",sans-serif;text-decoration:none}
.demo-wizard-links a:hover{border-color:var(--ui-primary);color:var(--ui-primary)}
@media (prefers-reduced-motion:reduce){.demo-wizard .role-card,.role-arrow{transition:none}}
.demo-wizard .role-card .role-go{color:var(--role);white-space:nowrap;gap:8px}
@media (max-width:420px){.demo-wizard .role-card{padding:16px 14px 12px}.demo-wizard .role-card .role-go{font-size:.8rem}.role-arrow{width:26px;height:26px}}

/* Demo chooser: no card inside a card; profiles sit directly on the tinted page. */
.demo-wizard .demo-wizard-card{background:transparent;border:0;box-shadow:none;padding:12px 4px 8px;backdrop-filter:none}
.demo-wizard .role-card{box-shadow:0 1px 2px #0b1f3a12,0 10px 26px #0b1f3a1a}

/* Demo · paso 2: a profile card with a single, colored way in. */
.demo-wizard .demo-wizard-top{border:1px solid var(--ui-line);border-radius:18px;box-shadow:0 1px 2px #0b1f3a0d,0 8px 22px #0b1f3a12;overflow:hidden}
.demo-step2{--role:var(--ui-primary);display:grid;gap:18px;padding:22px 24px 24px;border-radius:22px;background:var(--ui-surface);border:1px solid var(--ui-line);box-shadow:0 1px 2px #0b1f3a0d,0 14px 34px #0b1f3a1a;position:relative;overflow:hidden}
.demo-step2::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--role)}
.demo-step2[data-profile="ana"]{--role:#1d3f74}.demo-step2[data-profile="luis"]{--role:#0e7fb8}.demo-step2[data-profile="jose"]{--role:#2d9b4b}.demo-step2[data-profile="bruno"]{--role:#0b8fa3}
.demo-back{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border-radius:99px;border:1px solid var(--ui-line);background:transparent;color:var(--ui-ink);font:600 .85rem Poppins,"Open Sans",sans-serif;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.demo-back:hover{border-color:var(--role);color:var(--role)}
.demo-hero{display:flex;align-items:center;gap:18px}
.demo-hero .role-icon{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--role);color:#fff;font:700 1.9rem Poppins,sans-serif;box-shadow:0 0 0 8px color-mix(in srgb,var(--role) 14%,transparent)}
.demo-hero .eyebrow{display:block;margin-bottom:2px}
.demo-hero h1{margin:0 0 6px;font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.1}
.role-chip{display:inline-block;padding:3px 12px;border-radius:99px;background:color-mix(in srgb,var(--role) 12%,transparent);color:var(--role);font:600 .85rem Poppins,sans-serif}
.demo-lead{margin:2px 0 -6px;color:var(--ui-muted);font-weight:600}
.demo-step2 .demo-guide{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.demo-step2 .demo-guide li{counter-increment:step;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--role) 5%,var(--ui-surface));border:1px solid color-mix(in srgb,var(--role) 14%,var(--ui-line));font-size:1rem}
.demo-step2 .demo-guide li::before{content:counter(step);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--role);color:#fff;font:700 .9rem Poppins,sans-serif}
.demo-step2 .login-note{display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;border-radius:12px;background:var(--ui-secondary);color:var(--ui-ink);font-size:.88rem;border:0}
.demo-info{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ui-primary);color:#fff;font:700 .72rem Poppins,sans-serif}
#app .demo-wizard .demo-step2 .btn.demo-enter{width:100%;min-height:54px;font-size:1.05rem;background:var(--role);border-color:var(--role);box-shadow:0 12px 26px color-mix(in srgb,var(--role) 35%,transparent);display:flex;align-items:center;justify-content:center;gap:10px}
.demo-wizard .demo-step2 .demo-enter span{transition:transform .2s ease}
.demo-wizard .demo-step2 .demo-enter:hover span{transform:translateX(4px)}
@media (prefers-reduced-motion:no-preference){
  @keyframes demo-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .demo-step2>*{animation:demo-in .4s cubic-bezier(.2,.7,.2,1) both}
  .demo-step2>:nth-child(2){animation-delay:.05s}.demo-step2>:nth-child(3){animation-delay:.1s}.demo-step2>:nth-child(4){animation-delay:.15s}.demo-step2>:nth-child(5){animation-delay:.2s}.demo-step2>:nth-child(6){animation-delay:.25s}
  .demo-step2 .demo-guide li{animation:demo-in .4s ease both}.demo-step2 .demo-guide li:nth-child(2){animation-delay:.2s}.demo-step2 .demo-guide li:nth-child(3){animation-delay:.28s}.demo-step2 .demo-guide li:nth-child(4){animation-delay:.36s}
}
@media (max-width:480px){.demo-step2{padding:18px 16px 18px}.demo-hero .role-icon{width:58px;height:58px;font-size:1.5rem}}
.demo-step2 .demo-guide li{margin:0}
#app .demo-wizard .demo-step2 .btn.demo-enter:hover{filter:brightness(1.05)}

/* ===== Inicio con más calidez: bienvenida, paneles, indicadores y vacíos amables ===== */
.simple-shell .wallet-dashboard[data-wallet-view="overview"]>.wallet-heading,.simple-shell .client-home:has(>[data-home-section])>.client-heading:first-child{position:relative;overflow:hidden;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg,var(--sx-hero-a) 0%,var(--sx-hero-b) 70%,var(--sx-hero-c) 100%);color:#fff;box-shadow:0 18px 40px var(--sx-hero-glow)}
.simple-shell .wallet-dashboard[data-wallet-view="overview"]>.wallet-heading::after,.simple-shell .client-home:has(>[data-home-section])>.client-heading:first-child::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,#ffffff2e,transparent);pointer-events:none}
.simple-shell .wallet-dashboard[data-wallet-view="overview"]>.wallet-heading h1,.simple-shell .client-home:has(>[data-home-section])>.client-heading:first-child h1{color:#fff}
.simple-shell .wallet-dashboard[data-wallet-view="overview"]>.wallet-heading p,.simple-shell .client-home:has(>[data-home-section])>.client-heading:first-child p{color:#ffffffd9}
.simple-shell .wallet-dashboard[data-wallet-view="overview"]>.wallet-heading .profile-info{background:#ffffff26;color:#fff;border-color:#ffffff40}
.wallet-home-actions{display:flex;flex-wrap:wrap;gap:10px;max-width:none!important}
.wallet-home-actions .client-button{flex:0 1 auto;min-width:200px}

/* Sections as dashboard panels. */
.simple-shell .home-section{padding:18px 20px 16px;border-radius:22px;background:var(--ui-surface);border:1px solid var(--ui-line);box-shadow:0 1px 2px #0b1f3a0d,0 10px 28px #0b1f3a12}
.simple-shell .home-section-heading{margin-bottom:6px}
.simple-shell .home-section-heading h2{display:flex;align-items:center;gap:10px}
.simple-shell .home-section-heading h2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ui-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-primary) 16%,transparent)}
.simple-shell [data-home-section="today"] .home-section-heading h2::before{background:#e8a317;box-shadow:0 0 0 4px #e8a31729}
.simple-shell [data-home-section="collections"] .home-section-heading h2::before{background:#2d9b4b;box-shadow:0 0 0 4px #2d9b4b29}
.simple-shell [data-home-section="investments"] .home-section-heading h2::before{background:#1d3f74;box-shadow:0 0 0 4px #1d3f7429}
/* Totals read as indicators. */
.simple-shell .home-section>.wallet-summary-fact{display:inline-grid;gap:2px;margin:4px 18px 10px 0;padding:0}
.simple-shell .home-section>.wallet-summary-fact>span{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted)}
.simple-shell .home-section>.wallet-summary-fact>strong{font-size:1.6rem;line-height:1.1}
/* Cards inside a white panel get a light tint to stand apart. */
.simple-shell .home-section .home-card{background:color-mix(in srgb,var(--ui-primary) 4%,var(--ui-surface));border:1px solid var(--ui-line);box-shadow:none}
.simple-shell .home-section .home-card:hover{border-color:color-mix(in srgb,var(--ui-primary) 40%,var(--ui-line))}
/* Friendly empty state. */
.simple-shell .home-empty{display:flex;align-items:center;gap:12px;margin:8px 0 4px;padding:14px 16px;border-radius:14px;border:1px dashed var(--ui-line);background:color-mix(in srgb,var(--ui-primary) 3%,var(--ui-surface));color:var(--ui-muted)}
.simple-shell .home-empty::before{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:#2d9b4b1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d9b4b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/16px no-repeat}
/* Carousels: swipe and dots, no scrollbar. */
.simple-shell .home-track{scrollbar-width:none}
.simple-shell .home-track::-webkit-scrollbar{display:none}
:root[data-cartera-theme="oscuro"] .simple-shell .home-section{background:var(--sx-card)}
.simple-shell .wallet-home-actions .client-button{flex:0 1 auto;width:auto;min-width:200px;padding-inline:28px}
@media (max-width:600px){.simple-shell .wallet-home-actions .client-button{flex:1 1 0;min-width:0;padding-inline:12px}}
@media screen and (min-width:1024px){.wallet-dashboard:has([data-home-section]),.client-home:has(>[data-home-section]){row-gap:20px}}
.simple-shell .wallet-dashboard,.simple-shell .client-home{row-gap:18px}

/* ===== App shell (impeccable polish) ===== */
:root{--sx-rail:#061c3b;--sx-rail-ink:#c9d7e8;--sx-rail-active:#ffffff1f}
:root[data-cartera-theme="oscuro"]{--sx-rail:#0e2238;--sx-rail-ink:#b4c5d9}
/* Browser surfaces carry the palette too. */
::selection{background:color-mix(in srgb,var(--ui-primary) 28%,transparent);color:inherit}
html{caret-color:var(--ui-primary);scrollbar-color:color-mix(in srgb,var(--ui-ink) 25%,transparent) transparent}
.simple-shell :is(.home-amount,.wallet-summary-fact>strong,.client-capital strong,.beta-amount,.ss-big){font-variant-numeric:tabular-nums}
.nav-brand{display:none}
.hdr-icon,.info-icon,.arrow-icon{width:18px;height:18px;flex:none}
.profile-info{display:inline-grid;place-items:center}
.profile-info .info-icon{width:20px;height:20px}
.role-arrow .arrow-icon{width:16px;height:16px}
.demo-back .arrow-icon{width:16px;height:16px}
.theme-check svg{width:12px;height:12px}
[data-theme-close] svg{width:16px;height:16px}

/* Header actions: one button vocabulary (inline from 761px; the phone keeps its menu list). */
@media (min-width:761px){
  .header-actions-panel{gap:8px}
  .header-actions-panel :is(.hdr-btn,.theme-trigger){display:inline-flex;align-items:center;gap:8px;min-height:40px;height:40px;padding:0 14px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface);color:var(--ui-ink);font:600 .84rem/1 Poppins,"Open Sans",sans-serif;text-decoration:none;cursor:pointer;transition:border-color .15s ease,color .15s ease,background-color .15s ease}
  .header-actions-panel :is(.hdr-btn,.theme-trigger):hover{border-color:color-mix(in srgb,var(--ui-primary) 55%,var(--ui-line));color:var(--ui-primary)}
  .header-actions-panel .hdr-btn.hdr-primary{background:var(--ui-primary);border-color:var(--ui-primary);color:var(--ui-primary-ink)}
  .header-actions-panel .hdr-btn.hdr-primary:hover{filter:brightness(1.06);color:var(--ui-primary-ink)}
  .header-actions-panel .theme-trigger-label{font-size:inherit}
}
@media (min-width:761px) and (max-width:1180px){.header-actions-panel .hdr-btn:not(.hdr-primary)>span,.header-actions-panel .theme-trigger-label{display:none}.header-actions-panel :is(.hdr-btn:not(.hdr-primary),.theme-trigger){padding:0;width:40px;justify-content:center}}

/* Desktop: a full-height navy rail owns the brand; the header sits over the content only. */
@media screen and (min-width:1024px){
  :root .experience-shell .beta-bottom-nav{inset:0 auto 0 0;width:232px;padding:18px 14px;gap:2px;background:var(--sx-rail);border-right:0;box-shadow:inset -1px 0 0 #ffffff14}
  :root .experience-shell .beta-bottom-nav .nav-brand{display:block;margin:0 4px 22px;padding:10px 12px;border-radius:14px;background:#fff;width:fit-content}
  :root .experience-shell .beta-bottom-nav .nav-brand img{display:block;width:96px;height:auto}
  :root .experience-shell .beta-bottom-nav button{color:var(--sx-rail-ink);background:transparent;font-weight:600}
  :root .experience-shell .beta-bottom-nav button:hover{background:#ffffff12;color:#fff}
  :root .experience-shell .beta-bottom-nav button.active,:root .experience-shell .beta-bottom-nav button[aria-current="page"]{background:var(--sx-rail-active);color:#fff;box-shadow:none}
  :root .experience-shell .beta-bottom-nav button.active svg{color:var(--sx-rail-icon,#7cc4f2)}
  :root .experience-shell .beta-bottom-nav button:focus-visible{outline:2px solid #7cc4f2;outline-offset:2px}
  :root .experience-shell .app-header{margin-left:0;width:auto;background:var(--ui-surface);border-bottom:1px solid var(--ui-line);box-shadow:0 1px 0 #0b1f3a08}
  :root .experience-shell .app-header .app-header-row .beta-brand{display:none}
  :root .experience-shell .app-header .app-header-row{min-height:56px}
}

/* Home: rows inside panels, not cards inside cards. */
.simple-shell .home-section .home-card{background:transparent;border:0;border-top:1px solid var(--ui-line);border-radius:0;box-shadow:none;padding-inline:2px}
.simple-shell .home-section .home-card:hover{background:color-mix(in srgb,var(--ui-primary) 4%,transparent);border-color:var(--ui-line)}
.simple-shell .home-section .home-track{margin-top:4px}

.simple-shell .header-actions-panel .hdr-btn.link-button,.header-actions-panel .hdr-btn.link-button{color:var(--ui-ink)}
@media (max-width:760px){
  .header-actions-panel :is(.hdr-btn,.theme-trigger){display:flex;align-items:center;gap:12px;font:500 .95rem/1.2 "Open Sans",sans-serif;color:var(--ui-ink)}
  .header-actions-panel .theme-trigger-label{font-size:inherit}
  .header-actions-panel .hdr-btn.hdr-primary{color:var(--ui-primary);font-weight:600}
}
/* Color lives in the avatar, chip and action; no decorative stripes on cards. */
.demo-wizard .role-card::before,.demo-step2::before{content:none}

/* Crisp surfaces: a visible edge and a short shadow instead of a foggy halo. */
:root:not([data-cartera-theme="oscuro"]){--sx-shadow:0 1px 2px rgba(11,31,58,.07),0 3px 10px rgba(11,31,58,.05)}
.simple-shell .home-section,:is(.simple-shell,.demo-wizard) :is(.client-card,.card,.wallet-summary,.demo-step2,.role-card){border-color:var(--ui-line);box-shadow:var(--sx-shadow)}
.simple-shell .home-empty{border:0;background:transparent;padding:10px 0}

/* Carousel arrows: shown on pointer devices only; touch keeps the swipe. */
.home-dots{align-items:center}
.home-step{display:none}
@media (hover:hover) and (pointer:fine){
  .home-dots button.home-step,.home-step{display:inline-grid;place-items:center;width:34px;height:34px;margin:0 6px;padding:0;border-radius:50%;border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink);cursor:pointer;transition:border-color .15s ease,color .15s ease,opacity .15s ease}
  .home-step svg{width:18px;height:18px}
  .home-dots button.home-step:hover:not(:disabled){border-color:var(--ui-primary);color:var(--ui-primary)}
  .home-dots button.home-step:disabled{opacity:.35;cursor:default}
  .home-step:focus-visible{outline:3px solid color-mix(in srgb,var(--ui-primary) 40%,transparent);outline-offset:2px}
}

/* Client picker (combobox) */
.combo{position:relative}
.combo-list{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 6px);max-height:280px;overflow:auto;margin:0;padding:6px;list-style:none;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-surface);box-shadow:0 2px 4px rgba(11,31,58,.06),0 14px 32px rgba(11,31,58,.14)}
.combo-list [role="option"]{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 12px;border-radius:10px;cursor:pointer}
.combo-list [role="option"]:hover,.combo-list [role="option"][aria-selected="true"]{background:color-mix(in srgb,var(--ui-primary) 9%,transparent)}
.combo-name{font-weight:600;color:var(--ui-ink)}
.combo-meta{font-size:.8rem;color:var(--ui-muted);text-align:right}
.combo-create{justify-content:flex-start!important;color:var(--ui-primary);font-weight:600;border-top:1px solid var(--ui-line);border-radius:0 0 10px 10px!important;margin-top:4px}
.combo-plus{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ui-primary);color:var(--ui-primary-ink);font-weight:700;line-height:1}
.combo-empty{padding:8px 12px;font-size:.85rem;color:var(--ui-muted)}
.combo-hint{margin:6px 0 0;font-size:.8rem;color:var(--ui-muted)}
/* Similar records found while typing */
.client-duplicates{margin:0 0 16px;padding:12px 14px;border-radius:14px;background:#fff7e6;border:1px solid #f3d38b;color:#5b4106}
.client-duplicates ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.client-duplicates li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:var(--ui-surface)}
.client-duplicates li span{display:grid}
.client-duplicates small{color:var(--ui-muted)}
.client-duplicates p{margin:8px 0 0;font-size:.85rem}
:root #modal .client-duplicates .btn{min-height:36px;padding:0 12px;font-size:.85rem}
:root[data-cartera-theme="oscuro"] .client-duplicates{background:#3a2c0b;border-color:#7a5a12;color:#f6dfa6}

/* Desktop: the sidebar stays put behind a dialog (hiding it is only for the phone's bottom bar). */
@media screen and (min-width:1024px){:root body:has(#modal[open]) .experience-shell .beta-bottom-nav{visibility:visible}}
/* A form panel whose fields are all hidden must not leave an empty box behind. */
:root #modal .form-panel:not(:has(> :not([hidden]))){display:none}
/* Inside a dialog, toasts sit at the top so they never cover its actions. */
:root dialog[open] .toast-zone{top:16px;bottom:auto!important}

/* Step-by-step forms in dialogs */
.wizard-progress{display:flex;gap:6px;margin:0 0 18px;padding:0;list-style:none;counter-reset:none}
.wizard-progress li{flex:1;display:grid;justify-items:start;gap:6px;min-width:0;font-size:.78rem;color:var(--ui-muted)}
.wizard-progress li::before{content:"";display:block;width:100%;height:4px;border-radius:99px;background:var(--ui-line)}
.wizard-progress li.is-done::before,.wizard-progress li[aria-current="step"]::before{background:var(--ui-primary)}
.wizard-progress li[aria-current="step"]{color:var(--ui-ink);font-weight:600}
.wizard-dot{display:none}
.wizard-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:520px){.wizard-progress li:not([aria-current="step"]) .wizard-name{display:none}}
.wizard-summary-title{margin:18px 0 8px;font-size:1rem}
.percent-input{position:relative;display:block}
.percent-suffix{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:Poppins,"Open Sans",sans-serif;font-weight:600;color:var(--ui-muted);pointer-events:none}
:root #modal .modal-body .percent-input input:not([type=checkbox]):not([type=radio]){padding-right:44px;font-size:1.2rem;font-weight:600;font-family:Poppins,"Open Sans",sans-serif}
@media (prefers-reduced-motion:no-preference){.wizard-step:not([hidden]){animation:sx-page-in .25s cubic-bezier(.2,.7,.2,1) both}}

/* Combobox: a list that clearly floats, visible hover and keyboard states, and the chosen client's details in the field. */
:root #modal .combo-list{border:1px solid color-mix(in srgb,var(--ui-primary) 28%,var(--ui-line));border-radius:14px;box-shadow:0 4px 8px rgba(11,31,58,.08),0 18px 40px rgba(11,31,58,.22)}
:root #modal .combo-list [role="option"]{border:1px solid transparent;transition:background-color .12s ease,border-color .12s ease}
:root #modal .combo-list [role="option"]:hover{background:color-mix(in srgb,var(--ui-primary) 10%,var(--ui-surface))}
:root #modal .combo-list [role="option"][aria-selected="true"]{background:color-mix(in srgb,var(--ui-primary) 16%,var(--ui-surface));border-color:color-mix(in srgb,var(--ui-primary) 45%,transparent)}
:root #modal .combo-list [role="option"][aria-selected="true"] .combo-name{color:var(--ui-primary)}
:root #modal .combo-list .combo-create:hover,:root #modal .combo-list .combo-create[aria-selected="true"]{background:color-mix(in srgb,var(--ui-primary) 12%,var(--ui-surface))}
.combo-selected-meta{position:absolute;right:14px;top:24px;transform:translateY(-50%);max-width:55%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;color:var(--ui-muted);pointer-events:none}
.combo:not(.has-selection) .combo-selected-meta{display:none}
:root #modal .combo.has-selection #product-client-input{padding-right:min(55%,240px);font-weight:600}
@media (max-width:480px){.combo-selected-meta{position:static;transform:none;display:block;max-width:none;margin-top:6px}:root #modal .combo.has-selection #product-client-input{padding-right:14px}}
/* Hover/active must be visible: opaque tints, not a mix against a translucent surface. */
:root #modal .combo-list{background:#fff}
:root #modal .combo-list [role="option"]:hover{background:color-mix(in srgb,var(--ui-primary) 13%,#fff)}
:root #modal .combo-list [role="option"]:hover .combo-name{color:var(--ui-primary)}
:root #modal .combo-list [role="option"][aria-selected="true"]{background:color-mix(in srgb,var(--ui-primary) 20%,#fff)}
:root[data-cartera-theme="oscuro"] #modal .combo-list{background:#13243a}
:root[data-cartera-theme="oscuro"] #modal .combo-list [role="option"]:hover{background:color-mix(in srgb,var(--ui-primary) 28%,#13243a)}
:root[data-cartera-theme="oscuro"] #modal .combo-list [role="option"][aria-selected="true"]{background:color-mix(in srgb,var(--ui-primary) 40%,#13243a)}

/* Wizard progress v2: numbered steps joined by a line; current filled, done checked. */
:root #modal .wizard-progress{display:flex;gap:0;margin:2px 0 22px;padding:0;list-style:none}
:root #modal .wizard-progress li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:.78rem;color:var(--ui-muted)}
:root #modal .wizard-progress li::before{content:"";position:absolute;top:15px;right:50%;width:100%;height:2px;border-radius:2px;background:var(--ui-line)}
:root #modal .wizard-progress li:first-child::before{display:none}
:root #modal .wizard-progress li.is-done::before,:root #modal .wizard-progress li[aria-current="step"]::before{background:var(--ui-primary)}
:root #modal .wizard-progress .wizard-dot{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-muted);font:600 .85rem/1 Poppins,"Open Sans",sans-serif;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
:root #modal .wizard-progress li[aria-current="step"] .wizard-dot{border-color:var(--ui-primary);background:var(--ui-primary);color:var(--ui-primary-ink);box-shadow:0 0 0 5px color-mix(in srgb,var(--ui-primary) 18%,transparent)}
:root #modal .wizard-progress li.is-done .wizard-dot{border-color:var(--ui-primary);background:color-mix(in srgb,var(--ui-primary) 12%,var(--ui-surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230078bd' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat;color:transparent}
:root #modal .wizard-progress li[aria-current="step"] .wizard-name{color:var(--ui-ink);font-weight:600}
:root #modal .wizard-progress li.is-done .wizard-name{color:var(--ui-ink)}
:root #modal .wizard-progress .wizard-name{max-width:100%;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){:root #modal .wizard-progress li:not([aria-current="step"]) .wizard-name{visibility:hidden}:root #modal .wizard-progress li[aria-current="step"] .wizard-name{overflow:visible}}
:root #modal .wizard-progress{padding-top:6px}

/* Mora en el asistente: estado vacío y botón de alta. */
:root #modal #product-mora-fields{display:grid;gap:12px}
:root #modal #product-mora-fields[hidden]{display:none}
:root #modal .mora-empty{border:1.5px dashed color-mix(in srgb,var(--ui-ink) 22%,transparent);border-radius:14px;padding:14px 16px;background:color-mix(in srgb,var(--ui-primary) 5%,var(--ui-surface))}
:root #modal .mora-empty p{margin:0;color:var(--ui-ink);line-height:1.5}
:root #modal #product-mora-create{justify-self:start;background:var(--ui-surface);color:var(--sx-link);border:1.5px solid color-mix(in srgb,var(--ui-primary) 55%,transparent);font-weight:650;min-height:44px}
:root #modal #product-mora-create:hover{background:color-mix(in srgb,var(--ui-primary) 8%,var(--ui-surface))}

/* Paso 5: plan de pagos. */
.payment-plan{display:grid;gap:14px}
.payment-plan .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.plan-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.plan-facts>div{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-surface)}
.plan-facts span{font-size:.82rem;color:var(--ui-muted)}
.plan-facts strong{font-size:1.08rem;color:var(--ui-ink);font-variant-numeric:tabular-nums}
.plan-table{width:100%;table-layout:fixed;border-style:hidden;box-shadow:0 0 0 1px var(--ui-line);border-collapse:collapse;font-size:.92rem;border:1px solid var(--ui-line);border-radius:14px;overflow:hidden}
.plan-table thead{position:sticky;top:0;background:color-mix(in srgb,var(--ui-ink) 5%,var(--ui-surface))}
.plan-table th{font-weight:650;text-align:left;color:var(--ui-muted);font-size:.8rem;padding:9px 12px}
.plan-table td{padding:9px 12px;border-top:1px solid var(--ui-line);color:var(--ui-ink)}
.plan-table th:first-child,.plan-table td:first-child{width:3em}
.plan-table .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.plan-mora{border-radius:14px;padding:12px 14px;background:color-mix(in srgb,#d97706 9%,var(--ui-surface));border:1px solid color-mix(in srgb,#d97706 35%,transparent)}
.plan-mora.plan-mora-off{background:color-mix(in srgb,#2d9b4b 8%,var(--ui-surface));border-color:color-mix(in srgb,#2d9b4b 35%,transparent)}
.plan-mora strong{display:block;margin-bottom:4px;color:var(--ui-ink)}
.plan-mora p{margin:0;line-height:1.5;color:var(--ui-ink)}
.plan-note{margin:0;font-size:.85rem;color:var(--ui-muted);line-height:1.5}
.plan-detail{margin-top:4px}
@media (max-width:520px){.plan-facts{grid-template-columns:1fr 1fr}.plan-facts>div:last-child:nth-child(odd){grid-column:1/-1}.plan-table th,.plan-table td{padding:9px 8px}.plan-table th:first-child,.plan-table td:first-child{width:2em}}

/* Asistente: resumen que acompaña cada paso, fijo sobre los botones. */
:root #modal .wizard-total{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 20px;margin:0;padding:12px 24px;background:color-mix(in srgb,var(--ui-primary) 6%,var(--ui-surface));border-top:1px solid color-mix(in srgb,var(--ui-primary) 22%,transparent)}
:root #modal .wizard-total>div{display:grid;gap:2px;min-width:0}
:root #modal .wizard-total span{font-size:.76rem;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root #modal .wizard-total strong{font-size:.98rem;color:var(--ui-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
:root #modal .wizard-total .is-key{text-align:right}
:root #modal .wizard-total .is-key strong{color:var(--sx-link);font-size:1.08rem}
:root #modal .product-reviewing .wizard-total{display:none}
:root #modal .wizard-intro{margin:0 0 12px;line-height:1.5;color:var(--ui-ink)}
:root #modal .wizard-intro strong{display:block;margin-bottom:2px}
@media (max-width:520px){:root #modal .wizard-total{padding:10px 16px;gap:12px}:root #modal .wizard-total>div:not(:first-child):not(.is-key){display:none}}

/* Aviso al tocar fuera de un formulario: el modal no se cierra, solo se marca. */
@keyframes modal-nudge{0%,100%{transform:none}30%{transform:scale(1.012)}60%{transform:scale(.996)}}
#modal-content.modal-nudge{animation:modal-nudge .28s ease-out}
@media (prefers-reduced-motion:reduce){#modal-content.modal-nudge{animation:none;outline:2px solid color-mix(in srgb,var(--ui-primary) 50%,transparent)}}

/* Cuota mínima para recuperar y aviso de pérdida. */
:root #modal .installment-hint:empty{display:none}
:root #modal .installment-hint{display:grid;gap:10px;justify-items:start;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ui-primary) 6%,var(--ui-surface));border:1px solid color-mix(in srgb,var(--ui-primary) 22%,transparent)}
:root #modal .installment-hint p{margin:0;line-height:1.5;font-size:.92rem;color:var(--ui-ink)}
:root #modal .installment-hint.is-loss{background:color-mix(in srgb,#dc2626 7%,var(--ui-surface));border-color:color-mix(in srgb,#dc2626 40%,transparent)}
:root #modal .installment-hint.is-loss strong{color:#b91c1c}
:root #modal .installment-hint .btn{min-height:40px;background:var(--ui-surface);color:var(--sx-link);border:1.5px solid color-mix(in srgb,var(--ui-primary) 55%,transparent);font-weight:650}
:root #modal .wizard-total .is-loss strong,.plan-facts .is-loss strong{color:#b91c1c}
.plan-facts .is-loss{border-color:color-mix(in srgb,#dc2626 40%,transparent);background:color-mix(in srgb,#dc2626 6%,var(--ui-surface))}
@media (max-width:520px){:root #modal .wizard-total>div.is-loss.is-loss:not(:first-child){display:grid}}

:root #modal .field-help{margin:6px 0 0;font-size:.86rem;line-height:1.5;color:var(--ui-muted)}
.plan-table td.num small{display:block;font-weight:400;font-size:.76rem;color:var(--ui-muted);white-space:normal}

:root #modal .wizard-total>div{flex:0 1 auto}
:root #modal .wizard-total .is-key{margin-left:auto}
:root #modal .wizard-total strong{overflow:hidden;text-overflow:ellipsis}
:root #modal .wizard-total strong small{display:block;font-size:.74rem;font-weight:500;color:var(--ui-muted)}
@media (max-width:640px) and (min-width:521px){:root #modal .wizard-total{flex-wrap:wrap}}
:root #modal .wizard-total{flex-wrap:wrap}
:root #modal .wizard-total>div.is-mora{flex:1 0 100%;order:10;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:8px;border-top:1px dashed color-mix(in srgb,#b45309 35%,transparent)}
:root #modal .wizard-total .is-mora span{white-space:normal;overflow:visible}
:root #modal .wizard-total .is-mora strong{color:#b45309}
@media (max-width:520px){:root #modal .wizard-total>div.is-mora.is-mora:not(:first-child){display:flex}}

/* Documento de propuesta / condiciones del préstamo (pantalla e impresión). */
.loan-doc{display:grid;gap:18px;color:var(--ui-ink);font-size:.95rem;line-height:1.55}
.loan-doc .doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:14px;border-bottom:2px solid #061c3b}
.loan-doc .doc-logo{width:120px;height:auto}
.loan-doc .doc-id{display:grid;justify-items:end;gap:2px;font-size:.82rem;color:var(--ui-muted);text-align:right}
.loan-doc .doc-status{font-weight:700;font-size:.78rem;padding:3px 10px;border-radius:999px;margin-bottom:4px}
.loan-doc .doc-status.is-proposed{background:#fff4e0;color:#8a4b00;border:1px solid #f3c27a}
.loan-doc .doc-status.is-active{background:#e7f6ec;color:#1d6b34;border:1px solid #9fd5b0}
.loan-doc .doc-title{margin:0;font-family:Poppins,"Open Sans",sans-serif;font-size:1.45rem;color:#061c3b}
.loan-doc .doc-note{margin:0;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,#0078bd 7%,var(--ui-surface));border:1px solid color-mix(in srgb,#0078bd 22%,transparent);font-size:.86rem}
.loan-doc dl{margin:0}
.loan-doc dt{font-size:.76rem;font-weight:600;color:var(--ui-muted);text-transform:none}
.loan-doc dd{margin:2px 0 0;font-weight:600}
.loan-doc .doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.loan-doc .doc-figures{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ui-line);border:1px solid var(--ui-line);border-radius:12px;overflow:hidden}
.loan-doc .doc-figures>div{background:var(--ui-surface);padding:10px 14px}
.loan-doc .doc-figures dd{font-size:1.08rem;color:#061c3b}
.loan-doc section{display:grid;gap:8px}
.loan-doc h3{margin:0;font-size:1rem;color:#061c3b;font-family:Poppins,"Open Sans",sans-serif}
.loan-doc p{margin:0}
.loan-doc .doc-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.loan-doc .doc-small{font-size:.82rem;color:var(--ui-muted)}
.loan-doc .doc-table{width:100%;border-collapse:collapse;font-size:.9rem}
.loan-doc .doc-table th{text-align:left;font-size:.76rem;color:var(--ui-muted);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--ui-line)}
.loan-doc .doc-table td{padding:7px 10px;border-bottom:1px solid var(--ui-line)}
.loan-doc .doc-table .num{text-align:right}
.loan-doc .doc-table tfoot td{font-weight:700;border-bottom:0;border-top:2px solid #061c3b}
.loan-doc .doc-foot{padding-top:10px;border-top:1px solid var(--ui-line);font-size:.72rem;color:var(--ui-muted);overflow-wrap:anywhere}
.loan-doc .doc-foot code{font-size:.68rem}
@media (max-width:520px){.loan-doc .doc-head{flex-direction:column}.loan-doc .doc-id{justify-items:start;text-align:left}.loan-doc .doc-list{grid-template-columns:1fr}}
@media print{
  @page{size:A4;margin:16mm 16mm 18mm}
  body:has(.loan-doc) #modal .modal-head{display:none!important}
  body:has(.loan-doc) #modal .modal-body{padding:0!important}
  body:has(.loan-doc) .loan-doc{--ui-ink:#0b1f3a;--ui-muted:#55667a;--ui-line:#cfd8e3;--ui-surface:#fff;font-size:10.5pt;gap:14px;color:#0b1f3a;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body:has(.loan-doc) .loan-doc *{font-variant-numeric:normal!important;font-feature-settings:normal!important}
  .loan-doc .doc-figures{grid-template-columns:repeat(4,1fr)}
  .loan-doc .doc-table tr,.loan-doc section,.loan-doc .doc-figures{break-inside:avoid}
}
.loan-doc .doc-title{display:none}
@media print{.loan-doc .doc-title{display:block}}
@media print{
  html:has(.loan-doc),html:has(.loan-doc) body{background:#fff!important}
  html:has(.loan-doc) #modal,html:has(.loan-doc) #modal #modal-content{position:static!important;inset:auto!important;transform:none!important;width:100%!important;max-width:none!important;max-height:none!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;overflow:visible!important;display:block!important}
  html:has(.loan-doc) #modal .modal-body{max-height:none!important;overflow:visible!important;background:#fff!important}
  html:has(.loan-doc) #modal .wizard-total{display:none!important}
  html:has(.loan-doc) .loan-doc .doc-figures{grid-template-columns:repeat(2,1fr)}
}

/* Temas de color: el color va en los acentos (botones, barra lateral, bienvenida, enlaces);
   el fondo queda casi neutro para que tarjetas, textos y estados no se tiñan. */
:root{--sx-hero-a:#0b3d6e;--sx-hero-b:#0078bd;--sx-hero-c:#2a9fd8;--sx-hero-glow:#0078bd33}
:root[data-cartera-theme="green"]{--ui-primary:#187447;--sx-deep:#0d3b25;--sx-link:#14653d;--sx-hero-a:#0d3b25;--sx-hero-b:#187447;--sx-hero-c:#2f9a62}
:root[data-cartera-theme="pink"]{--ui-primary:#b33870;--sx-deep:#5c1838;--sx-link:#9c2c5f;--sx-hero-a:#5c1838;--sx-hero-b:#b33870;--sx-hero-c:#d0598e}
:root[data-cartera-theme="purple"]{--ui-primary:#7650b1;--sx-deep:#33205a;--sx-link:#63409d;--sx-hero-a:#33205a;--sx-hero-b:#7650b1;--sx-hero-c:#946ed0}
:root[data-cartera-theme="yellow"]{--ui-primary:#e8b831;--ui-primary-ink:#3a2a02;--sx-deep:#3d2d05;--sx-link:#7a5806;--sx-hero-a:#4a3606;--sx-hero-b:#8a6508;--sx-hero-c:#b8890f}
:root:is([data-cartera-theme="green"],[data-cartera-theme="pink"],[data-cartera-theme="purple"],[data-cartera-theme="yellow"]){
  --ui-background:#f0f2f5;
  --ui-secondary:color-mix(in srgb,var(--ui-primary) 11%,#ffffff);
  --ui-ink:#14202e;--ui-muted:#5a6676;
  --ui-line:color-mix(in srgb,var(--ui-primary) 14%,#d3d9e1);
  --ui-surface:#ffffff;--sx-card:rgba(255,255,255,.96);--sx-inset:color-mix(in srgb,var(--ui-primary) 4%,#f4f6f8);--sx-avatar:color-mix(in srgb,var(--ui-primary) 10%,#eef1f4);
  --sx-rail:var(--sx-deep);--sx-hero-glow:color-mix(in srgb,var(--ui-primary) 22%,transparent)
}
:root:is([data-cartera-theme="green"],[data-cartera-theme="pink"],[data-cartera-theme="purple"],[data-cartera-theme="yellow"]){--sx-rail-icon:color-mix(in srgb,var(--ui-primary) 45%,#ffffff)}

/* Detalle del préstamo: tarjeta principal con estado y datos, avisos con icono, libreta en línea de tiempo. */
.simple-shell .beta-detail{display:grid;gap:16px}
.simple-shell .beta-detail>.beta-status{display:none}
.simple-shell .beta-detail .loan-hero{position:relative;overflow:hidden;display:grid;gap:6px;padding:22px 24px;border-radius:22px;background:var(--ui-surface);border:1px solid var(--ui-line);box-shadow:var(--sx-shadow-strong)}
.simple-shell .beta-detail .loan-hero::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--sx-hero-a),var(--sx-hero-b),var(--sx-hero-c))}
.simple-shell .beta-detail .loan-hero-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.simple-shell .beta-detail .loan-hero-top>span:first-child{font-size:.88rem;font-weight:600;color:var(--ui-muted)}
.simple-shell .beta-detail .loan-hero .beta-amount{font-family:Poppins,"Open Sans",sans-serif;font-size:clamp(2.1rem,7vw,2.8rem);line-height:1.1;color:var(--ui-ink);letter-spacing:-.01em}
.simple-shell .beta-detail .loan-hero>p{margin:0;color:var(--ui-muted);font-size:.92rem}
.simple-shell .beta-detail .loan-hero .beta-value-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--sx-inset)}
.simple-shell .beta-detail .loan-hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 0;padding-top:14px;border-top:1px solid var(--ui-line)}
.simple-shell .beta-detail .loan-hero-facts dt{font-size:.76rem;font-weight:600;color:var(--ui-muted)}
.simple-shell .beta-detail .loan-hero-facts dd{margin:2px 0 0;font-weight:650;color:var(--ui-ink);overflow-wrap:anywhere}
@media (max-width:520px){.simple-shell .beta-detail .loan-hero-facts{grid-template-columns:1fr 1fr}.simple-shell .beta-detail .loan-hero-facts>div:last-child{grid-column:1/-1}}
.simple-shell .beta-detail>.notice{position:relative;margin:0;padding:14px 16px 14px 48px;border-radius:14px;line-height:1.5;background:color-mix(in srgb,#d97706 8%,var(--ui-surface));border:1px solid color-mix(in srgb,#d97706 30%,transparent);color:var(--ui-ink)}
.simple-shell .beta-detail>.notice::before{content:"";position:absolute;left:16px;top:15px;width:20px;height:20px;background:#b45309;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center/contain no-repeat}
.simple-shell .beta-detail>.beta-link-row{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:56px;padding:14px 18px;border-radius:16px;background:var(--ui-surface);border:1px solid var(--ui-line);box-shadow:var(--sx-shadow);color:var(--ui-ink);font-weight:650;text-align:left;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.simple-shell .beta-detail>.beta-link-row:hover{border-color:color-mix(in srgb,var(--ui-primary) 45%,var(--ui-line))}
.simple-shell .beta-detail>.beta-link-row>span:last-child{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ui-secondary);color:var(--sx-link);font-size:1.2rem;line-height:1}
.simple-shell .beta-detail .loan-notebook{padding:22px 24px}
.simple-shell .beta-detail .loan-notebook h2{margin:0 0 4px;font-size:1.25rem}
.simple-shell .beta-detail .loan-notebook ol{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:0}
.simple-shell .beta-detail .loan-notebook li{position:relative;display:grid;gap:2px;padding:0 0 18px 28px;border:0;margin:0}
.simple-shell .beta-detail .loan-notebook li::before{content:"";position:absolute;left:4px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--ui-surface);border:3px solid var(--ui-primary)}
.simple-shell .beta-detail .loan-notebook li::after{content:"";position:absolute;left:9px;top:21px;bottom:2px;width:2px;background:var(--ui-line)}
.simple-shell .beta-detail .loan-notebook li:last-child{padding-bottom:0}
.simple-shell .beta-detail .loan-notebook li:last-child::after{display:none}
.simple-shell .beta-detail .loan-notebook time{font-size:.8rem;color:var(--ui-muted)}
.simple-shell .beta-detail .loan-notebook li strong{color:var(--ui-ink)}
.simple-shell .beta-detail>.beta-fold{border-radius:16px;background:var(--ui-surface);border:1px solid var(--ui-line);box-shadow:var(--sx-shadow);overflow:hidden}
.simple-shell .beta-detail>.beta-fold>summary{padding:16px 18px;font-weight:650;cursor:pointer}
.simple-shell .beta-detail>.beta-help{margin:0;text-align:center;font-size:.85rem;color:var(--ui-muted)}
.simple-shell .beta-detail>:is(section,details,.beta-link-row,.notice,.btn,header){margin-block:0}
.simple-shell .beta-detail>header{margin-bottom:4px}
.simple-shell .beta-detail .loan-notebook li>:is(.btn,.beta-status){justify-self:start;margin-top:6px}
.simple-shell .beta-detail .loan-notebook li>.btn{width:auto;min-height:38px;padding-inline:16px}

/* Barra inferior: ancho estable entre pantallas (la barra de desplazamiento ya no lo cambia) y más presencia. */
html{scrollbar-gutter:stable}
@media screen and (max-width:1023px){
  :root .simple-shell .beta-bottom-nav{background:var(--ui-surface);border:1px solid color-mix(in srgb,var(--ui-ink) 14%,transparent);box-shadow:0 -1px 0 rgba(255,255,255,.6) inset,0 10px 30px rgba(11,31,58,.2),0 2px 6px rgba(11,31,58,.1);backdrop-filter:none;-webkit-backdrop-filter:none}
  :root .simple-shell .beta-bottom-nav button:not(.active){color:color-mix(in srgb,var(--ui-ink) 72%,transparent)}
  :root .simple-shell .beta-bottom-nav button:not(.active):hover{background:var(--ui-secondary);color:var(--ui-ink)}
  :root .simple-shell .beta-bottom-nav button.active{box-shadow:0 4px 12px color-mix(in srgb,var(--ui-primary) 35%,transparent)}
  :root[data-cartera-theme="oscuro"] .simple-shell .beta-bottom-nav{background:#13233a;border-color:rgba(255,255,255,.16);box-shadow:0 10px 30px rgba(0,0,0,.5)}
}

/* Menú del encabezado en celular: filas compactas alineadas, borde y sombra marcados y el fondo atenuado detrás. */
@media screen and (max-width:760px){
  :root .header-menu-toggle[aria-expanded="true"]+.header-actions-panel{gap:2px;padding:6px;border:1px solid color-mix(in srgb,var(--ui-ink) 16%,transparent);border-radius:16px;background:var(--ui-surface);box-shadow:0 18px 40px rgba(11,31,58,.28),0 3px 8px rgba(11,31,58,.12),0 0 0 100vmax rgba(11,31,58,.22)}
  :root .header-actions-panel :is(.hdr-btn,.theme-trigger){width:100%;min-height:46px;height:auto;padding:0 12px;gap:12px;border:0;border-radius:10px;background:transparent;box-shadow:none;justify-content:flex-start;font:500 .95rem/1.2 "Open Sans",sans-serif}
  :root .header-actions-panel :is(.hdr-btn,.theme-trigger) :is(svg){width:20px;height:20px;flex:none;margin:0}
  :root .header-actions-panel :is(.hdr-btn,.theme-trigger):hover{background:var(--ui-secondary);color:var(--ui-ink)}
  :root .header-actions-panel .theme-picker{display:block;width:100%;border-top:1px solid var(--ui-line);margin-top:4px;padding-top:4px}
  :root .header-actions-panel .hdr-btn.hdr-primary{color:var(--sx-link);font-weight:650}
  :root[data-cartera-theme="oscuro"] .header-menu-toggle[aria-expanded="true"]+.header-actions-panel{background:#13233a;border-color:rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 100vmax rgba(0,0,0,.4)}
}
/* La barra inferior del celular usa el mismo tono que la barra lateral de escritorio: se separa claramente del contenido. */
@media screen and (max-width:1023px){
  :root .simple-shell .beta-bottom-nav{background:var(--sx-rail);border-color:color-mix(in srgb,var(--sx-rail) 70%,#000);box-shadow:0 12px 32px rgba(11,31,58,.35),0 2px 6px rgba(11,31,58,.18)}
  :root .simple-shell .beta-bottom-nav button:not(.active){color:var(--sx-rail-ink)}
  :root .simple-shell .beta-bottom-nav button:not(.active):hover{background:rgba(255,255,255,.08);color:#fff}
  :root .simple-shell .beta-bottom-nav button.active{box-shadow:0 4px 14px rgba(0,0,0,.3)}
}

/* Fondo gris azulado más profundo: las tarjetas blancas se separan del fondo sin depender de la sombra. */
:root:not([data-cartera-theme="oscuro"]) body{background:var(--ui-background)}
:root:not([data-cartera-theme="oscuro"]) .simple-shell :is(.client-card,.card,.home-section,.loan-notebook,.wallet-summary){background:#ffffff}
/* Encabezado sólido con borde y sombra: no se funde con el fondo gris azulado. */
:root:not([data-cartera-theme="oscuro"]) .simple-shell :is(.beta-topbar,.app-header){background:#ffffff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid color-mix(in srgb,var(--ui-ink) 16%,transparent);box-shadow:0 4px 16px rgba(11,31,58,.1)}

/* Fondo gris estándar (#f0f2f5) en todos los temas claros; la separación la dan el borde y la sombra corta de las tarjetas. */
:root:not([data-cartera-theme="oscuro"]){--ui-background:#d8dce3}
:root:not([data-cartera-theme="oscuro"]) .simple-shell :is(.client-card:not(.home-card),.card,.home-section,.loan-notebook,.wallet-summary,.beta-detail .loan-hero,.beta-detail>.beta-link-row,.beta-detail>.beta-fold){border-color:#cfd3d9;box-shadow:0 1px 3px rgba(0,0,0,.1)}
/* Separación clara: tarjetas con sombra real sobre el gris, y las filas internas (préstamos, cobros) en un panel tenue con borde. */
:root:not([data-cartera-theme="oscuro"]) .simple-shell :is(.client-card:not(.home-card),.card,.home-section,.loan-notebook,.wallet-summary,.beta-detail .loan-hero,.beta-detail>.beta-link-row,.beta-detail>.beta-fold){border-color:#c8cdd5;box-shadow:0 1px 2px rgba(0,0,0,.1),0 6px 18px rgba(0,0,0,.09)}
:root:not([data-cartera-theme="oscuro"]) .simple-shell .home-section .home-card{background:#f4f6f9;border:1px solid #dde2e9;border-radius:14px;padding:12px 14px}
:root:not([data-cartera-theme="oscuro"]) .simple-shell .home-section .home-card:hover{background:color-mix(in srgb,var(--ui-primary) 6%,#f4f6f9);border-color:color-mix(in srgb,var(--ui-primary) 40%,#dde2e9)}

/* Pedir un préstamo / vínculos: pasos, tarjetas por prestamista y solicitudes. */
.relations-view{display:grid;gap:16px}
.relations-view .relation-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;counter-reset:rs}
.relations-view .relation-steps li{counter-increment:rs;display:grid;gap:4px;padding:14px;border-radius:16px;background:#fff;border:1px solid #c8cdd5}
.relations-view .relation-steps li::before{content:counter(rs);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ui-primary);color:var(--ui-primary-ink);font:700 .8rem Poppins,sans-serif}
.relations-view .relation-steps strong{font-size:.92rem;color:var(--ui-ink)}
.relations-view .relation-steps span{font-size:.82rem;color:var(--ui-muted);line-height:1.4}
@media (max-width:620px){.relations-view .relation-steps{grid-template-columns:1fr}.relations-view .relation-steps li{grid-template-columns:26px 1fr;column-gap:12px;align-items:center}.relations-view .relation-steps li::before{grid-row:span 2}}
.relations-view .relation-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.relations-view .relation-card{display:grid;gap:10px;align-content:start}
.relations-view .relation-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.relations-view .relation-head h3{margin:0}
.relations-view .relation-note{margin:0;font-size:.88rem;color:var(--ui-muted);line-height:1.5}
.relations-view .relation-card .client-button{justify-self:start}
.relations-view .relation-requests{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.relations-view .relation-request{display:grid;gap:6px;padding:12px 14px;border-radius:14px;background:#f4f6f9;border:1px solid #dde2e9}
.relations-view .relation-request>div{display:flex;justify-content:space-between;align-items:center;gap:10px}
.relations-view .relation-request p{margin:0;color:var(--ui-ink);font-size:.9rem}
.relations-view .relation-request .client-button{justify-self:start}
.relations-view .relation-head .beta-status{white-space:nowrap;flex:none}.relations-view .relation-head h3{min-width:0;overflow-wrap:anywhere}


/* Pasada «menos volumen» (2026-10-14): superficies más calmas sobre el fondo gris.
   Barra inferior clara, saludo en color liso, sombras cortas y botones sin halo. */
@media screen and (max-width:1023px){
  :root .simple-shell .beta-bottom-nav{background:#ffffff;border:1px solid #c8cdd5;box-shadow:0 4px 16px rgba(11,31,58,.12)}
  :root .simple-shell .beta-bottom-nav button:not(.active){color:#4a5868}
  :root .simple-shell .beta-bottom-nav button:not(.active):hover{background:var(--ui-secondary);color:var(--ui-ink)}
  :root .simple-shell .beta-bottom-nav button.active{box-shadow:none}
  :root[data-cartera-theme="oscuro"] .simple-shell .beta-bottom-nav{background:#13233a;border-color:rgba(255,255,255,.16)}
  :root[data-cartera-theme="oscuro"] .simple-shell .beta-bottom-nav button:not(.active){color:#b4c5d9}
}
.simple-shell .wallet-dashboard[data-wallet-view="overview"]>.wallet-heading,.simple-shell .client-home:has(>[data-home-section])>.client-heading:first-child{background:var(--sx-hero-b);box-shadow:none}
.simple-shell .beta-detail .loan-hero::before{background:var(--ui-primary)}
.simple-shell .beta-detail .loan-hero{box-shadow:0 1px 2px rgba(0,0,0,.08)}
:root:not([data-cartera-theme="oscuro"]) .simple-shell :is(.client-card:not(.home-card),.card,.home-section,.loan-notebook,.wallet-summary,.beta-detail>.beta-link-row,.beta-detail>.beta-fold){box-shadow:0 1px 2px rgba(0,0,0,.08)}
:is(.simple-shell,.demo-wizard,#modal) :is(.btn.primary,.btn.good,.client-button.primary){box-shadow:none}
@media (hover:hover){:is(.simple-shell,#modal) :is(.btn.primary,.client-button.primary):hover{transform:none;box-shadow:none;filter:brightness(1.06)}}
.simple-shell .wallet-dashboard[data-wallet-view="overview"]>.wallet-heading::after,.simple-shell .client-home:has(>[data-home-section])>.client-heading:first-child::after{content:none}
.simple-shell .home-section>.wallet-summary-fact>span{font-size:.82rem;letter-spacing:0;text-transform:none}

/* Invitación de vínculo con QR. */
:root #modal .link-qr{display:grid;place-items:center;margin:14px auto;padding:14px;width:max-content;border-radius:16px;background:#fff;border:1px solid #c8cdd5}
:root #modal .link-qr img,:root #modal .link-qr canvas{display:block;width:208px;height:208px}
:root #modal .link-qr-note{margin:0;text-align:center;font-size:.88rem;color:var(--ui-muted);line-height:1.5}

/* Escáner de QR. */
:root #modal .qr-scan{display:grid;gap:12px;justify-items:center}
:root #modal .qr-frame{position:relative;width:min(100%,320px);aspect-ratio:1;border-radius:18px;overflow:hidden;background:#0b1f3a}
:root #modal .qr-frame video{width:100%;height:100%;object-fit:cover;display:block}
:root #modal .qr-target{position:absolute;inset:18%;border:3px solid #fff;border-radius:16px;box-shadow:0 0 0 999px rgba(11,31,58,.35)}
:root #modal .qr-status{margin:0;text-align:center;color:var(--ui-ink);font-size:.92rem;line-height:1.5}
:root #modal .qr-status.is-error{color:#b91c1c}
:root #modal .qr-photo{cursor:pointer}

/* Versión de la app al pie de Mi perfil (soporte). */
.simple-shell .app-version{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin:24px 0 8px;font-size:.8rem;color:var(--ui-muted)}
.simple-shell .app-version .link-button{min-height:36px;padding:0 6px;background:none;border:0;color:var(--sx-link);font-weight:600;text-decoration:underline;cursor:pointer}