/* =======================================================
   COMPONENTS — Tema 2 "Soft Relief" (Neomorphism 2.0)
   Misma API de clases que tema 1 para preservar la lógica JS.
   Los relieves se construyen con doble sombra (luz + oscura).
   ======================================================= */

/* ===== Tipografía ===== */
.title-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
}
.title-xl {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-strong);
}
.title-lg {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  color: var(--color-text-strong);
}
.subtitle {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.caption {
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.text-accent { color: var(--color-accent); }
.link-accent {
  color: var(--color-accent);
  font-weight: var(--fw-semi);
  transition: color var(--dur-fast) var(--ease-out);
}
.link-accent:hover { color: var(--color-accent-ink); }

/* ===== Brand ===== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  font-size: var(--fs-md);
}
.brand-mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(44, 64, 100, 0.18));
}

/* ===== Glass (compat — reinterpretado como panel neomorfo plano) ===== */
.glass, .glass-strong {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised);
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ===== Botones ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 56px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  user-select: none;
  position: relative;
  white-space: nowrap;
  color: var(--color-text-strong);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
  background: var(--grad-accent);
  color: #FFF;
  box-shadow:
    6px 6px 14px var(--shadow-dark),
    -6px -6px 14px var(--shadow-light),
    inset 1px 1px 2px rgba(255, 255, 255, 0.25),
    inset -1px -1px 2px rgba(0, 0, 0, 0.20);
}
.btn-primary:hover:not(:disabled) {
  box-shadow:
    8px 8px 18px var(--shadow-dark),
    -8px -8px 18px var(--shadow-light),
    inset 1px 1px 2px rgba(255, 255, 255, 0.30),
    0 0 0 6px var(--color-accent-glow);
}
.btn-primary:active:not(:disabled) {
  background: var(--grad-accent);
  box-shadow:
    inset 4px 4px 8px rgba(154, 36, 28, 0.6),
    inset -3px -3px 6px rgba(255, 136, 120, 0.25);
}

.btn-ghost {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--nm-raised-sm);
}
.btn-ghost:active {
  box-shadow: var(--nm-pressed);
}

.btn-outline {
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: var(--nm-raised-sm);
}

.btn-block { width: 100%; }

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  box-shadow: var(--nm-raised-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-icon:hover { color: var(--color-accent); }
.btn-icon:active { box-shadow: var(--nm-pressed); }

/* ===== Inputs ===== */
.input-group {
  position: relative;
  width: 100%;
  margin-bottom: var(--space-4);
}

.input-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  padding-left: var(--space-2);
}

.input-field {
  width: 100%;
  height: 54px;
  padding: 0 var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  color: var(--color-text-strong);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  box-shadow: var(--nm-sunk-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.input-field::placeholder {
  color: var(--color-text-dim);
  font-weight: var(--fw-regular);
}

.input-field:focus {
  box-shadow: var(--nm-sunk), 0 0 0 3px var(--color-accent-glow);
}

.input-with-icon { padding-left: 52px; }

.input-icon {
  position: absolute;
  left: 20px;
  top: calc(18px + 27px + 8px);
  transform: translateY(-50%);
  color: var(--color-text-dim);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-fast) var(--ease-out);
}
.input-group:focus-within .input-icon { color: var(--color-accent); }

/* Cuando no hay label, el ícono se centra sobre el input (54px / 2 = 27px) */
.input-group:not(:has(.input-label)) .input-icon,
.input-group.no-label .input-icon {
  top: 50%;
}

.input-suffix {
  position: absolute;
  right: 16px;
  top: calc(18px + 27px + 8px);
  transform: translateY(-50%);
  color: var(--color-text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  cursor: pointer;
  background: transparent;
}
.input-group:not(:has(.input-label)) .input-suffix,
.input-group.no-label .input-suffix {
  top: 50%;
}

.field-error {
  color: var(--color-danger);
  font-size: var(--fs-xs);
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  letter-spacing: 0.02em;
}

/* Fila de 2 inputs lado a lado (p. ej. Número + CP) */
.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Inputs tipo fecha/select — alinean altura y usan el acento como chevron */
.input-field[type="date"],
select.input-field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A11830' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.input-field[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }

/* ===== Topbar (usada en register/retiro/etc.) ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.topbar-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  flex: 1;
  text-align: center;
}
.topbar-logo {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(44, 64, 100, 0.18));
}
/* Espaciador del ancho del btn-icon para que el logo/título quede centrado */
.topbar-spacer { width: 44px; flex: 0 0 auto; }
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

/* ===== Wizard progress (pasos de registro) ===== */
.wizard-progress {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.wizard-step {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  overflow: hidden;
  position: relative;
}
.wizard-step.active::after,
.wizard-step.done::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  box-shadow: 0 0 8px var(--color-accent-glow);
}

/* ===== Access selector (acordeón login) ===== */
.access-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.access-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.access-card.open {
  box-shadow: var(--nm-raised-lg);
}

.access-card-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border-radius: var(--radius-lg);
  text-align: left;
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out);
}

.access-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex: 0 0 auto;
}

.access-card-info { flex: 1; min-width: 0; }
.access-card-label {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
}
.access-card-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.access-card-chevron {
  color: var(--color-text-dim);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.access-card.open .access-card-chevron {
  transform: rotate(180deg);
  color: var(--color-accent);
}
.access-card.open .access-card-icon {
  box-shadow: var(--nm-sunk-sm);
}

.access-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-in-out);
}
.access-card.open .access-card-body {
  max-height: 1600px;
}
.access-card-body-inner {
  padding: 0 var(--space-5) var(--space-5);
}

/* ===== Face Access (login) ===== */
.face-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: var(--space-2);
}

.face-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--nm-sunk-sm);
  align-self: center;
  margin-bottom: var(--space-3);
}
.face-brand-dot {
  display: none; /* punto del card de FaceAccess desactivado a petición */
}
.face-brand-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.face-title {
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}
.face-subtitle {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
}

.face-scanner {
  display: flex;
  justify-content: center;
  margin: var(--space-4) 0 var(--space-5);
}
.face-scanner-circle {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.face-scanner-line {
  position: absolute;
  top: 50%;
  left: 14%;
  right: 14%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  box-shadow: 0 0 10px var(--color-accent-glow);
  animation: scanner-sweep 2.4s ease-in-out infinite;
}
@keyframes scanner-sweep {
  0%, 100% { transform: translateY(-56px); opacity: 0; }
  10%, 90% { opacity: 1; }
  50%      { transform: translateY(56px); }
}
.face-scanner-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--color-accent);
  border-style: solid;
  border-width: 0;
}
.face-scanner-corner.tl { top: 20px;    left: 20px;    border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.face-scanner-corner.tr { top: 20px;    right: 20px;   border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.face-scanner-corner.bl { bottom: 20px; left: 20px;    border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.face-scanner-corner.br { bottom: 20px; right: 20px;   border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }
.face-scanner-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad-raised);
  box-shadow: var(--nm-raised-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.face-scanner-icon svg { width: 32px; height: 32px; }

.face-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: center;
  padding: 8px 14px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--nm-sunk-sm);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.face-status-pill-dot {
  display: none; /* punto del card de FaceAccess desactivado a petición */
}
@keyframes nm-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.face-user-input .input-field { height: 54px; }

.face-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
  margin-top: var(--space-4);
}

/* ===== Face Cam (overlay fullscreen) ===== */
.face-cam {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
}
.face-cam.open { display: flex; }
.face-cam video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.face-cam-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.face-cam-mask svg { width: 100%; height: 100%; display: block; }

.face-cam-frame {
  position: absolute;
  left: 15%;
  top: 16%;
  width: 70%;
  height: 56%;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 24px var(--color-accent-glow);
  pointer-events: none;
}

.face-cam-scan {
  position: absolute;
  left: 17%;
  top: 44%;
  right: 17%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  box-shadow: 0 0 14px var(--color-accent-glow);
  animation: scanner-sweep 2s ease-in-out infinite;
  pointer-events: none;
}

.face-cam-corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--color-accent); border-style: solid; border-width: 0;
  pointer-events: none;
}
.face-cam-corner.tl { top: 16%; left: 15%; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 8px; }
.face-cam-corner.tr { top: 16%; right: 15%; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 8px; }
.face-cam-corner.bl { bottom: 28%; left: 15%; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 8px; }
.face-cam-corner.br { bottom: 28%; right: 15%; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 8px; }

.face-cam-title {
  position: absolute;
  top: 7%;
  left: 0; right: 0;
  text-align: center;
  color: #fff;
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  padding: 0 var(--space-6);
}

.face-cam-close {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: 18px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}

.face-cam-status-wrap {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center;
}
.face-cam-status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px 18px;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.face-cam-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent-glow);
  animation: nm-blink 1.4s ease-in-out infinite;
}

.face-cam-capture-wrap {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.face-cam-capture {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.15), 0 0 30px var(--color-accent-glow);
  transition: transform var(--dur-fast) var(--ease-out);
}
.face-cam-capture:disabled { opacity: 0.55; }
.face-cam-capture:not(:disabled):active { transform: scale(0.92); }
.face-cam-capture svg { width: 30px; height: 30px; }
.face-cam-capture-hint {
  color: #fff;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ===== Footer copy (pegado al fondo) ===== */
.app-shell { /* complemento ya en base.css: flex column */ }
.page { flex: 1; }
.bm-copy {
  text-align: center;
  padding: var(--space-5) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  font-size: 10.5px;
  color: var(--color-text-dim);
  letter-spacing: 0.02em;
}
.bm-copy-version {
  margin-top: 2px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 10px;
}

/* ===== Theme toggle (light/dark) =====
   Tiene dos modos de uso:
   - .theme-toggle: flotante fijo (fallback para intro u otras pantallas sin header).
   - .theme-toggle-inline: inyectado dentro de .home-header-actions o junto a #helpBtn.
*/
.theme-toggle {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.theme-toggle:active { box-shadow: var(--nm-pressed); }

/* Ícono visible cambia según el modo actual — reglas aplican a ambas variantes */
#themeToggle svg { width: 20px; height: 20px; }
#themeToggle .sun { display: none; }
#themeToggle .moon { display: block; }
:root[data-theme="dark"] #themeToggle .sun { display: block; color: var(--color-accent); }
:root[data-theme="dark"] #themeToggle .moon { display: none; }

/* ===== Espacio inferior para páginas con bottom-nav fijo =====
   Aplica a cualquier .page cuya .app-shell contenga un .bottom-nav.
   Deja suficiente aire para que el footer copy nunca quede tapado
   por los iconos flotantes. */
.app-shell:has(.bottom-nav) .page {
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}
.app-shell:has(.bottom-nav) .bm-copy {
  padding-bottom: var(--space-3);
}

/* ===== HOME — Header ===== */

.home-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
}
.home-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #FFF;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--nm-raised-sm), inset 1px 1px 2px rgba(255,255,255,0.25);
  flex: 0 0 auto;
}
.home-greeting { flex: 1; min-width: 0; line-height: 1.2; }
.home-greeting-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  display: block;
}
.home-greeting-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  display: block;
}
.home-header-actions { display: flex; gap: var(--space-2); }
.home-header-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--nm-raised-sm);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.home-header-btn:hover { color: var(--color-accent); }
.home-header-btn:active { box-shadow: var(--nm-pressed); }

.badge-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 9px; height: 9px;
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-accent-glow);
}

/* ===== Face banner (home) ===== */
.face-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-5);
}
.face-banner-dismiss {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-dim);
  box-shadow: var(--nm-raised-sm);
  display: flex; align-items: center; justify-content: center;
}
.face-banner-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.face-banner-text { flex: 1; min-width: 0; padding-right: 22px; }
.face-banner-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
}
.face-banner-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.face-banner-cta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  background: var(--grad-accent);
  color: #FFF;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  box-shadow: 2px 2px 6px var(--shadow-dark);
  flex: 0 0 auto;
}

/* ===== Cards section (carrusel de tarjetas/saldos) ===== */
.cards-section {
  /* Rompe el padding lateral de .page para aprovechar todo el ancho y
     permitir que tarjetas adyacentes asomen a los lados del viewport. */
  margin: 0 calc(var(--space-5) * -1);
  padding: 0 0 var(--space-4);
}
.cards-track {
  display: flex;
  /* Gap generoso para que se vea claramente la separación */
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Padding lateral calculado = (ancho viewport − ancho tarjeta) / 2.
     Así la tarjeta snapped al centro queda perfectamente centrada
     y las vecinas asoman por ambos lados. El padding vertical deja
     espacio para que la sombra de la tarjeta no se corte. */
  padding: 26px calc(50% - 130px);
  scroll-padding-inline: calc(50% - 130px);
}
.cards-track::-webkit-scrollbar { display: none; }

/* =====================================================
   BALANCE-CARD — Pixel-perfect de SCREEN_SHOTS/light.png
   Ya no contiene saldos, solo la cara visual: marca, chip, número,
   vigencia, holograma iridiscente y contactless.
   ===================================================== */
.balance-card {
  /* Ancho fijo: 260px — el carrusel calcula el padding lateral a partir
     de este valor para centrar la tarjeta activa en el viewport. */
  flex: 0 0 260px;
  scroll-snap-align: center;
  aspect-ratio: 1 / 1.58;
  padding: 22px 22px 20px;
  border-radius: 26px;
  background: var(--grad-raised);
  /* Sombra simple tipo "tarjeta física levantada" — sin luz blanca
     contraria (esa era la que creaba el halo claro raro). */
  box-shadow: 0 18px 40px -14px rgba(90, 110, 140, 0.32);
  color: var(--color-text-strong);
  position: relative;
  overflow: hidden;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}
:root[data-theme="dark"] .balance-card {
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.65);
}

/* Marca — tipo de cuenta como logo monoespacio (DÉBITO → "HRTBT" like) */
.balance-card .bc-brand {
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-strong);
  line-height: 1;
}

/* Logo del banco — debajo del tipo de cuenta, con 60% de opacidad */
.balance-card .bc-logo {
  position: absolute;
  top: 48px;
  left: 24px;
  width: 38px;
  height: 38px;
  object-fit: contain;
  opacity: 0.60;
  pointer-events: none;
}

/* Chip metálico CLARO (blanco-plata) — esquina superior derecha */
.balance-card .bc-chip {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 34px;
  height: 26px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, #FBFCFE 0%, #CCD3DE 50%, #E8ECF2 100%);
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.9),
    inset -1px -1px 2px rgba(130, 140, 160, 0.45),
    2px 3px 6px rgba(100, 115, 140, 0.25);
  overflow: hidden;
}
.balance-card .bc-chip::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  background:
    linear-gradient(to bottom,
      rgba(120, 130, 150, 0.25) 0 1px, transparent 1px 5px) repeat-y,
    linear-gradient(to right,
      rgba(120, 130, 150, 0.25) 0 1px, transparent 1px 5px) repeat-x;
  background-size: 5px 5px, 5px 5px;
}

/* Contactless — icono wave debajo del chip (vertical layout) */
.balance-card .bc-contactless {
  position: absolute;
  top: 62px;
  right: 28px;
  width: 20px;
  height: 20px;
  color: var(--color-text-dim);
  opacity: 0.55;
  transform: rotate(90deg);
}
.balance-card .bc-contactless svg { width: 100%; height: 100%; }

/* Números — dos líneas apiladas verticalmente, centro alto */
.balance-card .bc-numbers {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 42%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.balance-card .bc-num-line {
  font-family: 'Courier New', 'Consolas', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-text-strong);
  opacity: 0.88;
}

/* Halo pastel naranja → azul que cubre ~3/4 de la tarjeta.
   Se coloca como ::after con z-index 0 para pintarse sobre el background
   del card pero DEBAJO de los elementos hijos (marca, chip, números, etc).
   Emula el tinte pastel validado en los modales pero más visible. */
.balance-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 78% at 22% 82%,
    rgba(255, 165, 115, 0.55) 0%,
    rgba(255, 195, 160, 0.38) 22%,
    rgba(220, 195, 210, 0.28) 45%,
    rgba(180, 200, 240, 0.26) 65%,
    rgba(130, 175, 230, 0.18) 82%,
    transparent 95%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
/* Asegurar que los elementos de la tarjeta queden sobre el halo */
.balance-card > * { z-index: 1; }

/* En dark, usamos los mismos colores pastel pero con alphas mayores
   porque tienen que competir con un fondo oscuro */
:root[data-theme="dark"] .balance-card::after {
  background: radial-gradient(ellipse 78% 78% at 22% 82%,
    rgba(255, 140, 90, 0.40) 0%,
    rgba(225, 160, 130, 0.28) 22%,
    rgba(180, 170, 200, 0.22) 45%,
    rgba(120, 160, 220, 0.22) 65%,
    rgba(90, 145, 220, 0.18) 82%,
    transparent 95%);
}

/* Vigencia — esquina inferior derecha */
.balance-card .bc-exp {
  position: absolute;
  right: 24px;
  bottom: 22px;
  font-family: 'Courier New', 'Consolas', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--color-text-muted);
  opacity: 0.85;
}

/* Dark mode: ajustar acabado del chip (no tan brillante) y números */
:root[data-theme="dark"] .balance-card .bc-chip {
  background: linear-gradient(135deg, #7B8290 0%, #4A4F59 50%, #8A919F 100%);
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.25),
    inset -1px -1px 2px rgba(0, 0, 0, 0.55),
    2px 3px 6px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] .balance-card .bc-chip::before {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.15) 0 1px, transparent 1px 5px) repeat-y,
    linear-gradient(to right, rgba(255,255,255,0.15) 0 1px, transparent 1px 5px) repeat-x;
  background-size: 5px 5px, 5px 5px;
}
:root[data-theme="dark"] .balance-card .bc-num-line {
  opacity: 0.92;
}
.bc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* Dejamos aire a la derecha para que no chocque con el chip (::after) */
  padding-right: 46px;
  gap: var(--space-3);
}
.bc-saldo-label {
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bc-saldo {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.bc-saldo-sm { font-size: 15px; }
.bc-split { display: flex; gap: var(--space-4); margin-top: var(--space-3); }
.bc-split-col { flex: 1; min-width: 0; }
.bc-saldo-aplicar-val {
  font-size: 16px;
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  margin-top: 2px;
}

.bc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  /* Espacio inferior-izquierdo para que no tape al holograma (::before) */
  padding-left: 64px;
  gap: var(--space-3);
  min-height: 34px;
}
.bc-card-number {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
  font-weight: var(--fw-semi);
}
.bc-brand-logo {
  height: 26px;
  width: auto;
  opacity: 0.92;
}
.bc-percent {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--nm-sunk-sm);
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  color: var(--color-accent);
}

/* Resumen de cuenta activa (sincronizado con el carrusel)
   Emula el bloque "Balance $14,020.44 / Credit limit ..." de la referencia */
.account-summary {
  padding: 0 var(--space-1);
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}
.account-summary .as-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-2);
}
.account-summary .as-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
}
.account-summary .as-amount {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.account-summary .as-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) 0;
  border-top: 1px dashed var(--shadow-dark);
  margin-top: var(--space-3);
}
.account-summary .as-sub-label {
  /* Mismo tamaño que as-label para que ambos saldos se vean al mismo nivel */
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
}
.account-summary .as-sub-value {
  /* Mismo tamaño que as-amount */
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.account-summary .as-accent { color: var(--color-accent); }

.cards-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.cards-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.cards-dots span.active {
  background: var(--grad-accent);
  box-shadow: 0 0 8px var(--color-accent-glow);
}

/* ===== Sections (header + títulos) ===== */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-1);
}
.section-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
}

/* ===== Quick actions (grid 4 icons) ===== */
.quick-actions { margin-top: var(--space-5); }
.actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-text);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.action-btn:active { box-shadow: var(--nm-pressed); }
.action-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad-sunk);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
}

/* ===== Transactions ===== */
.transactions-section { margin-top: var(--space-6); }
.transactions-list {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.transaction {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out);
}
.transaction:hover { background: var(--color-bg-sink); }
.transaction-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.transaction-icon.in  { color: var(--color-success); }
.transaction-icon.out { color: var(--color-accent); }
.transaction-info { flex: 1; min-width: 0; }
.transaction-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.transaction-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.transaction-amount {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.transaction-amount.in  { color: var(--color-success); }
.transaction-amount.out { color: var(--color-text-strong); }

.transactions-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ===== Pagos pendientes ===== */
.pending-section { margin-top: var(--space-6); }
.pending-list { display: flex; flex-direction: column; gap: var(--space-3); }

.pending-card {
  display: block;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-text);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.pending-card:active { box-shadow: var(--nm-pressed); }
.pending-card.vencido { box-shadow: var(--nm-raised-sm), 0 0 0 1.5px var(--color-accent-glow); }

.pending-head { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.pending-status { flex: 1; min-width: 0; }
.pending-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  color: var(--color-warning);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pending-badge.vencido { color: var(--color-accent); }
.pending-fecha {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}
.pending-logo {
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  background: var(--grad-raised);
  box-shadow: var(--nm-raised-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  flex: 0 0 auto;
}
.pending-body { margin-bottom: var(--space-3); }
.pending-negocio {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
}
.pending-concepto {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.pending-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--shadow-dark);
}
.pending-total {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.pending-total strong {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  margin-top: 2px;
}
.pending-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  padding: 8px 12px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--nm-raised-sm);
}

/* ===== Notif (FCM row + lista) ===== */
.notif-fcm-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
  margin-bottom: var(--space-3);
}
.notif-fcm-row.on { color: var(--color-success); }
.notif-fcm-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent);
  flex: 0 0 auto;
}
.notif-fcm-row.on .notif-fcm-icon { color: var(--color-success); }
.notif-fcm-text { flex: 1; min-width: 0; }
.notif-fcm-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
}
.notif-fcm-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.notif-fcm-btn {
  padding: 8px 14px;
  background: var(--grad-accent);
  color: #FFF;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  box-shadow: 2px 2px 6px var(--shadow-dark);
  flex: 0 0 auto;
}

.notif-list { display: flex; flex-direction: column; gap: var(--space-2); }
.notif-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-raised-sm);
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--color-text-strong); }
.notif-item-text { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; line-height: 1.45; }
.notif-item-date { font-size: 10.5px; color: var(--color-text-dim); margin-top: 6px; letter-spacing: 0.02em; }
.notif-item-del {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-text-dim);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.notif-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}
.notif-empty p { margin-top: var(--space-3); font-size: var(--fs-sm); }
.notif-empty svg { margin: 0 auto; color: var(--color-text-dim); }

/* ===== Bottom nav — estilo light.png: círculos neomorfos individuales =====
   El contenedor no lleva fondo ni sombra, es solo un distribuidor horizontal.
   Cada .nav-item pinta un círculo propio (levantado normal, hundido cuando
   está activo) que contiene el icono; la etiqueta va debajo del círculo. */
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: calc(var(--app-max-width) - 32px);
  max-width: calc(100% - 32px);
  display: flex;
  justify-content: space-around;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
@media (min-width: 481px) {
  .bottom-nav {
    width: calc(var(--app-max-width) - 64px);
  }
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-item > svg {
  width: 46px;
  height: 46px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-item-label {
  /* Ocultos por decisión de diseño: las etiquetas se perdían con el fondo
     y los iconos ya son reconocibles por sí solos. */
  display: none;
}
.nav-item.active {
  color: var(--color-accent);
}
.nav-item.active > svg {
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
}
.nav-item:active > svg {
  box-shadow: var(--nm-pressed);
}

/* ===== Modal — NEOMORFISMO con relleno translúcido (efecto cristal) =====
   Conserva los relieves neomorfos (doble sombra externa, mismo radio,
   misma geometría). Solo el fondo pasa de sólido a translúcido con
   backdrop-filter para simular cristal esmerilado. Sin bordes ni brillos
   añadidos — la silueta la dan las sombras, como en el resto del tema.
*/
body.modal-open { overflow: hidden; }

.modal-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--color-bg) 40%, transparent);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .modal-overlay { background: rgba(228, 235, 245, 0.45); }
  :root[data-theme="dark"] .modal-overlay { background: rgba(30, 33, 40, 0.55); }
}

.modal-card {
  width: 100%;
  max-width: 400px;
  /* Altura máxima respetando padding del overlay (~40px arriba+abajo).
     El modal nunca desborda del viewport; el contenido scrollea dentro. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  position: relative;
  /* Flex column: header/footer fijos, body scrolleable */
  display: flex;
  flex-direction: column;
  /* Orden de capas: pastel encima, velo blanco abajo */
  background:
    var(--glass-tint-pastel),
    var(--glass-bg-tint);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border-radius: var(--radius-xl);
  box-shadow: var(--nm-raised-lg);
  padding: calc(var(--space-4) + 34px + var(--space-4)) var(--space-5) var(--space-5);
  transform: translateY(18px) scale(0.96);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.modal-overlay.open .modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Botón cerrar (X) — círculo neomorfo hundido con fondo translúcido */
.modal-close {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--glass-bg-tint-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-text-muted);
  box-shadow: var(--nm-sunk-sm);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.modal-close:hover  { color: var(--color-accent); }
.modal-close:active { box-shadow: var(--nm-pressed); }

/* Ícono del tipo de alerta — círculo neomorfo levantado translúcido */
.modal-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--glass-bg-tint-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--nm-raised-sm);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-4);
  color: var(--color-accent);
}
.modal-icon svg { width: 26px; height: 26px; }
.modal-icon-success { color: var(--color-success); }
.modal-icon-warning { color: var(--color-warning); }
.modal-icon-error   { color: var(--color-danger); }
.modal-icon-info    { color: var(--color-accent); }

.modal-title {
  position: relative;
  z-index: 1;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  text-align: center;
  margin-top: 0;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.modal-message {
  position: relative;
  z-index: 1;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
  margin-bottom: var(--space-5);
  padding: 0 var(--space-2);
}

.modal-body {
  position: relative;
  z-index: 1;
  font-size: var(--fs-sm);
  color: var(--color-text);
  margin-bottom: var(--space-5);
  line-height: 1.55;
  /* Si el modal alcanza su max-height, este body se vuelve la única zona
     scrolleable; el resto de elementos (título, ícono, acciones) se
     mantienen visibles fuera del scroll. */
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  /* Espacio lateral extra para que el scrollbar no toque el texto */
  padding-right: 4px;
  margin-right: -4px;
}
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb {
  background: var(--color-accent-glow);
  border-radius: 4px;
}
.modal-body ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.modal-body li {
  position: relative;
  padding-left: 18px;
  color: var(--color-text);
}
.modal-body li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad-accent);
  box-shadow: 0 0 6px var(--color-accent-glow);
}

.modal-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.modal-actions.column { flex-direction: column; }
/* Altura fija de 56px — usamos flex:1 solo en layout fila (para repartir
   ancho entre 2 botones). En columna NO aplica flex:1 porque empujaría
   cada botón a ocupar 1/3 del alto disponible y se veían gruesos/delgados
   según la cantidad de acciones. */
.modal-actions .btn { height: 56px; }
.modal-actions:not(.column) .btn { flex: 1; }
.modal-actions.column .btn { width: 100%; }

/* ===== Modal loading (spinner con ring + logo) — tema 2 carmesí ===== */
.modal-card.modal-loading {
  /* text-align: center;  <-- rompía el centrado del spinner */
  padding: var(--space-6) var(--space-5) var(--space-5);
}
.modal-card.modal-loading .modal-title {
  font-size: var(--fs-lg);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  text-align: center;
}
.modal-card.modal-loading .modal-message {
  font-size: var(--fs-xs);
  margin: 0;
  text-align: center;
}
.modal-spinner {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* From Uiverse.io by terenceodonoghue (renombrado .container→.modal-loader
   y keyframe rotate_3922→modal-loader-spin para no colisionar). */
.modal-loader {
  position: relative;                 /* flex-centered por .modal-spinner */
  border-radius: 50%;
  height: 150px;
  width: 150px;
  animation: modal-loader-spin 1.2s linear infinite;
  background-color: #9b59b6;
  background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}

.modal-loader span {
  position: absolute;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  background-color: #9b59b6;
  background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}

.modal-loader span:nth-of-type(1) {
  filter: blur(5px);
}

.modal-loader span:nth-of-type(2) {
  filter: blur(10px);
}

.modal-loader span:nth-of-type(3) {
  filter: blur(25px);
}

.modal-loader span:nth-of-type(4) {
  filter: blur(50px);
}

.modal-loader::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: #ffffffba;
  /* border: solid 5px #ffffff; */
  border-radius: 50%;
}

@keyframes modal-loader-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.modal-loader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  object-fit: contain;
  z-index: 3;
  display: block;
}

/* Botón ghost dentro del modal: fondo sólido blanco con sombra tipo
   "tarjeta elevada" — sin translúcidos porque se fundían con el cristal
   pastel del modal. Deben verse con peso claro. */
.modal-card .btn-ghost {
  background: #FFFFFF;
  color: var(--color-text-strong);
  box-shadow:
    0 8px 22px -6px rgba(40, 60, 100, 0.28),
    0 3px 8px rgba(40, 60, 100, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.modal-card .btn-ghost:active {
  background: #F3F4F8;
  box-shadow:
    inset 0 4px 10px rgba(40, 60, 100, 0.25),
    inset 0 1px 2px rgba(40, 60, 100, 0.15);
}
:root[data-theme="dark"] .modal-card .btn-ghost {
  background: #2F343F;
  color: var(--color-text-strong);
  box-shadow:
    0 8px 22px -6px rgba(0, 0, 0, 0.70),
    0 3px 8px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .modal-card .btn-ghost:active {
  background: #25292F;
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.70);
}

/* ===== Misc compat: bm-copy ancla abajo en .page (flex column) ===== */
.page { min-height: 100%; }
.bm-copy {
  margin-top: auto;
}

/* ===== FAQ accordion (usado en "Centro de ayuda de cuentas") =====
   Cada <details> es una tarjeta neomorfa sutil con chevron +/− animado.
   Diseñado para vivir dentro del modal-card glass (fondo translúcido).
*/
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  margin: 0;
  /* Scroll lo maneja el .modal-body padre — aquí no definimos max-height */
}

.faq-item {
  padding: var(--space-3) var(--space-4);
  background: var(--glass-bg-tint-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-raised-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.faq-item[open] {
  box-shadow: var(--nm-sunk-sm);
}

.faq-item summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker,
.faq-item summary::marker { display: none; content: ''; }

.faq-item summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1;
  width: 22px;
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out);
  flex: 0 0 auto;
}
.faq-item[open] summary::after {
  content: '−';
}

.faq-item p {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0 0;
  line-height: 1.6;
}
.faq-item p strong {
  color: var(--color-text);
  font-weight: var(--fw-semi);
}

/* ===== Utilities — view switching (transferencias, retiro, tarjetas) ===== */
.view { display: none; animation: view-in 0.28s var(--ease-out); }
.view.active { display: block; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mb-3 { margin-bottom: var(--space-3); }
.justify-between { display: flex; justify-content: space-between; align-items: center; }

/* =======================================================
   REGISTRO — paso 2 (OTP + contraseña) y paso 3 (firma + términos + resumen)
   ======================================================= */

/* OTP */
.otp-section {
  padding: var(--space-4) 0;
}
.otp-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-accent);
}
.otp-section-title  { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-text-strong); }
.otp-section-sub    { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; line-height: 1.5; }
.otp-wrap {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-4) 0;
}
.otp-input {
  width: 44px;
  height: 54px;
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.otp-input:focus { box-shadow: var(--nm-sunk), 0 0 0 3px var(--color-accent-glow); }
.otp-input.filled { color: var(--color-accent); box-shadow: var(--nm-raised-sm); }
.otp-section-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  letter-spacing: 0.02em;
}
.otp-section-footer svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  flex: 0 0 auto;
}

/* Password strength + rules */
.pwd-strength { margin: var(--space-3) 0; display: none; }
.pwd-strength.visible { display: block; }
.pwd-strength-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.pwd-strength-label { font-weight: var(--fw-semi); color: var(--color-text-strong); }
.pwd-strength-label[data-lvl="1"] { color: var(--color-danger); }
.pwd-strength-label[data-lvl="2"] { color: var(--color-warning); }
.pwd-strength-label[data-lvl="3"] { color: var(--color-success); }
.pwd-strength-label[data-lvl="4"] { color: var(--color-success); }
.pwd-strength-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  overflow: hidden;
  position: relative;
}
.pwd-strength-bar::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  width: 0;
  transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.pwd-strength-bar.lvl-1::after { width: 25%;  background: var(--color-danger); }
.pwd-strength-bar.lvl-2::after { width: 50%;  background: var(--color-warning); }
.pwd-strength-bar.lvl-3::after { width: 75%;  background: var(--color-success); }
.pwd-strength-bar.lvl-4::after { width: 100%; background: var(--color-success); }

.pwd-rules {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
  margin-bottom: var(--space-3);
}
.pwd-rule {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.pwd-rule::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  flex: 0 0 auto;
}
.pwd-rule.ok { color: var(--color-success); }
.pwd-rule.ok::before {
  background: var(--color-success);
  box-shadow: 0 0 6px rgba(29, 176, 135, 0.5);
}

.pwd-match {
  font-size: var(--fs-xs);
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  display: none;
}
.pwd-match.ok, .pwd-match.fail { display: inline-flex; }
.pwd-match.ok   { color: var(--color-success); }
.pwd-match.fail { color: var(--color-danger); }

.generate-pwd-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  margin-top: var(--space-2);
}
.generate-pwd-btn:active { box-shadow: var(--nm-pressed); }

/* Firma (register-3) */
.signature-section { margin-bottom: var(--space-5); }
.signature-section-header { margin-bottom: var(--space-3); }
.signature-section-title  { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-text-strong); }
.signature-section-sub    { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; margin-bottom: var(--space-4); }

.signature-box {
  position: relative;
  width: 100%;
  height: 180px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-sunk);
  overflow: hidden;
  touch-action: none;
}
.signature-box canvas { width: 100%; height: 100%; display: block; }

.signature-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--color-accent);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.signature-corner.tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.signature-corner.tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.signature-corner.bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.signature-corner.br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }

.signature-guide {
  position: absolute;
  left: 10%; right: 10%;
  bottom: 40%;
  height: 1px;
  background: var(--color-text-dim);
  opacity: 0.4;
  pointer-events: none;
}

.signature-placeholder {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-dim);
  pointer-events: none;
  letter-spacing: 0.05em;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.signature-box.has-signature .signature-placeholder,
.signature-box.has-signature .signature-guide { opacity: 0; }

.signature-state {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
}
.signature-state.ok   { color: var(--color-success); }
.signature-state.fail { color: var(--color-danger); }

.signature-section-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.signature-section-footer .btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
}
.signature-section-footer .btn-link:active { opacity: 0.7; }

/* Términos y condiciones (register-3) */
.terms-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-4);
}
.terms-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.terms-text { flex: 1; min-width: 0; }
.terms-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--color-text-strong); margin-bottom: 2px; }
.terms-body  { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.5; }
.terms-body a { color: var(--color-accent); font-weight: var(--fw-semi); }

/* Checkbox nativo con apariencia custom — aplica a input[type=checkbox].checkbox */
input[type="checkbox"].checkbox,
input[type="checkbox"].terms-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  flex: 0 0 auto;
  cursor: pointer;
  position: relative;
  margin: 0;
  transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
input[type="checkbox"].checkbox:checked,
input[type="checkbox"].terms-checkbox:checked {
  background: var(--grad-accent);
  box-shadow: var(--nm-raised-sm), 0 0 8px var(--color-accent-glow);
}
input[type="checkbox"].checkbox:checked::after,
input[type="checkbox"].terms-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 8px; top: 4px;
  width: 6px; height: 11px;
  border-right: 2.2px solid #fff;
  border-bottom: 2.2px solid #fff;
  transform: rotate(45deg);
}

/* Terms card marcado: sutil highlight del contorno */
.terms-card.checked {
  box-shadow: var(--nm-raised-sm), 0 0 0 2px var(--color-accent-glow);
}

/* Resumen plegable (register-3) */
.summary-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.summary-trigger {
  width: 100%;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}
.summary-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.summary-info { flex: 1; min-width: 0; }
.summary-label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--color-text-strong); }
.summary-hint  { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.summary-chevron {
  color: var(--color-text-dim);
  transition: transform var(--dur-base) var(--ease-out);
}
.summary-card.open .summary-chevron { transform: rotate(180deg); color: var(--color-accent); }

.summary-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-in-out);
}
.summary-card.open .summary-body { max-height: 1200px; }
.summary-body-inner { padding: 0 var(--space-4) var(--space-4); }

.summary-list {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  border-radius: var(--radius-md);
}
.summary-row {
  display: flex; justify-content: space-between; gap: var(--space-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.summary-row-label { color: var(--color-text-muted); flex: 0 0 auto; }
.summary-row-value { color: var(--color-text-strong); font-weight: var(--fw-semi); text-align: right; overflow-wrap: anywhere; }

/* =======================================================
   TRANSFERENCIAS / RETIRO
   ======================================================= */
/* Bloque informativo de saldo — una sola línea compacta:
   [ícono] Saldo disponible · · · · · · $27,450.50
   Debe ser informativo pero sutil, sin competir con el título ni con
   los inputs principales. */
.saldo-info {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: 8px;
}
.saldo-info > svg {
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.saldo-info .caption,
.saldo-info > span {
  flex: 1 1 auto;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.saldo-info strong {
  flex: 0 0 auto;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
}

/* Opciones grandes tipo card (transferir a, retirar en) */
.transfer-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Aire respecto al subtitle / descripción que suele ir justo arriba */
  margin-top: var(--space-5);
}
.transfer-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.transfer-option:active { box-shadow: var(--nm-pressed); }
.transfer-option-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.transfer-option-info { flex: 1; min-width: 0; }
.transfer-option-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
}
.transfer-option-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.transfer-option-arrow { color: var(--color-text-dim); flex: 0 0 auto; }

/* Destinatarios */
.destinatarios-list {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-5);
  margin-bottom: var(--space-4);
}
.destinatario-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-text);
  text-align: left;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.destinatario-item:active { box-shadow: var(--nm-pressed); }
.destinatario-item.selected {
  box-shadow: var(--nm-sunk-sm), 0 0 0 2px var(--color-accent-glow);
}
.destinatario-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--nm-raised-sm), inset 1px 1px 2px rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}
.destinatario-info { flex: 1; min-width: 0; }
.destinatario-alias {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.destinatario-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.destinatario-check {
  color: var(--color-accent);
  opacity: 0;
  flex: 0 0 auto;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.destinatario-item.selected .destinatario-check { opacity: 1; }
.add-destinatario-btn {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.add-destinatario-btn:active { box-shadow: var(--nm-pressed); }

/* Retiro — chips de monto + ticket */
.amount-shortcuts {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.amount-chip {
  flex: 1 1 calc(33% - var(--space-2));
  min-width: 86px;
  padding: 10px 14px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-align: center;
}
.amount-chip:active { box-shadow: var(--nm-pressed); }
.amount-chip.active {
  color: var(--color-accent);
  box-shadow: var(--nm-sunk-sm);
}

.withdraw-ticket {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--nm-raised-lg);
  text-align: center;
  margin: var(--space-4) 0;
  position: relative;
}
.withdraw-ticket-label { font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.withdraw-ticket-amount { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--color-text-strong); margin: var(--space-2) 0; letter-spacing: -0.02em; }
.withdraw-ticket-sub { font-size: var(--fs-xs); color: var(--color-text-muted); }
.withdraw-code {
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-sunk-sm);
  font-family: 'Courier New', 'Consolas', ui-monospace, monospace;
  color: var(--color-accent);
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Línea 1: los 12 primeros dígitos en 3 grupos de 4 */
.withdraw-code-main {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
}
/* Línea 2: etiqueta PIN centrada en su propia fila */
.withdraw-code-pin-label {
  font-family: var(--font-family);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}
/* Línea 3: el último grupo de 4 dígitos centrado */
.withdraw-code-pin {
  display: flex;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
}
.withdraw-code-block { white-space: nowrap; }
.withdraw-history {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.withdraw-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
}

/* Fila de historial de retiro */
.withdraw-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-raised-sm);
  text-align: left;
  color: var(--color-text);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.withdraw-item:active { box-shadow: var(--nm-pressed); }

.withdraw-item-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  color: var(--color-text-muted);
}
.withdraw-item-icon.pendiente { color: var(--color-warning); }
.withdraw-item-icon.aplicado  { color: var(--color-success); }
.withdraw-item-icon.expirado  { color: var(--color-danger); }

.withdraw-item-info { flex: 1; min-width: 0; }
.withdraw-item-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
}
.withdraw-item-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.withdraw-item-badge {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  font-size: 10px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.withdraw-item-badge.pendiente { color: var(--color-warning); }
.withdraw-item-badge.aplicado  { color: var(--color-success); }
.withdraw-item-badge.expirado  { color: var(--color-danger); }

/* =======================================================
   PAYMENT — Pago pendiente (payment.html)
   ======================================================= */
.payment-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--nm-raised-sm);
  margin-top: var(--space-4);
}

.payment-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px dashed var(--shadow-dark);
}
.payment-header-text { flex: 1; min-width: 0; }
.payment-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.payment-negocio {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  margin-top: 2px;
  line-height: 1.2;
}
.payment-logo {
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  background: var(--grad-raised);
  box-shadow: var(--nm-raised-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.payment-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.payment-row-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.payment-row-value {
  color: var(--color-text-strong);
  font-weight: var(--fw-semi);
  text-align: right;
  overflow-wrap: anywhere;
}

.payment-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-4) var(--space-3) var(--space-2);
  margin-top: var(--space-3);
  border-top: 1px dashed var(--shadow-dark);
}
.payment-total-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text);
}
.payment-total-value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: -0.01em;
}

/* Pill de estatus del pago (Pendiente / Vencido / Pagado) */
.payment-status-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--space-2);
}
.payment-status-pill.pagado    { color: var(--color-success); }
.payment-status-pill.vencido   { color: var(--color-danger); }
.payment-status-pill.pendiente { color: var(--color-warning); }

/* Aviso informativo/de error debajo del card */
.payment-notice {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.5;
  margin-top: var(--space-4);
}
.payment-notice strong { color: var(--color-text-strong); font-weight: var(--fw-semi); }
.payment-notice.danger {
  color: var(--color-danger);
  box-shadow: var(--nm-sunk-sm), 0 0 0 1.5px rgba(161, 24, 48, 0.30);
}

/* Bloque de código de barras / QR (pago en Oxxo etc.) */
.payment-code {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  text-align: center;
}
.payment-code-img {
  display: flex;
  justify-content: center;
  padding: var(--space-3);
  background: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
  margin-bottom: var(--space-3);
}
.payment-code-img img { max-width: 100%; height: auto; }
.payment-code-ref {
  font-family: 'Courier New', monospace;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  letter-spacing: 0.08em;
}
.payment-code-hint {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* =======================================================
   MOVIMIENTOS
   ======================================================= */
.mv-summary {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mv-summary-label {
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--fw-semi);
}
.mv-summary-year {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  text-transform: capitalize;
  letter-spacing: -0.01em;
}
.mv-summary-meta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.mv-summary-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
}
.mv-summary-pill-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--fw-semi);
}
.mv-summary-pill.mv-in  { color: var(--color-success); }
.mv-summary-pill.mv-out { color: var(--color-accent); }
.mv-summary-pill strong {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: inherit;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.mv-filters {
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mv-filter-row {
  display: flex;
  gap: var(--space-2);
}
.mv-filter-row .input-field {
  height: 44px;
  font-size: var(--fs-sm);
}
.mv-filter-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.mv-filter-chips::-webkit-scrollbar { display: none; }
.mv-chip {
  padding: 8px 14px;
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mv-chip:active { box-shadow: var(--nm-pressed); }
.mv-chip.active {
  color: var(--color-accent);
  box-shadow: var(--nm-sunk-sm);
}

/* Lista — contenedor */
.mv-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-4);
}
.mv-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mv-group-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--fw-semi);
  padding: 0 var(--space-2);
}
.mv-group-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Item */
.mv-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  width: 100%;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.mv-item:active { box-shadow: var(--nm-pressed); }
.mv-item-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
}
.mv-item-icon.in  { color: var(--color-success); }
.mv-item-icon.out { color: var(--color-accent); }
.mv-item-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.mv-item-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.mv-item-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.mv-item-amount {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.mv-item-amount.in  { color: var(--color-success); }
.mv-item-amount.out { color: var(--color-accent); }

/* Empty state */
.mv-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--nm-sunk-sm);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
}
.mv-empty svg { color: var(--color-text-dim); opacity: 0.6; }
.mv-empty h3 {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-strong);
  font-weight: var(--fw-semi);
}
.mv-empty p { margin: 0; font-size: var(--fs-xs); }

/* Detalle — modal */
.mv-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}
.mv-detail-amount {
  text-align: center;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-sunk-sm);
  font-variant-numeric: tabular-nums;
}
.mv-detail-amount.in  { color: var(--color-success); }
.mv-detail-amount.out { color: var(--color-accent); }
.mv-detail-estatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: var(--fw-semi);
  color: var(--color-success);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: center;
}
.mv-estatus-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 6px var(--color-success);
}
.mv-detail-fecha {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: -4px;
}
.mv-detail-rows {
  display: flex;
  flex-direction: column;
  padding: 4px var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
}
.mv-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 10px 0;
  border-bottom: 1px dashed var(--shadow-dark);
}
.mv-detail-row:last-child { border-bottom: none; }
.mv-detail-row span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.mv-detail-row strong {
  font-size: var(--fs-xs);
  color: var(--color-text-strong);
  font-weight: var(--fw-semi);
  text-align: right;
  overflow-wrap: anywhere;
}

/* Estado (mini tarjeta) */
.mv-estado-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-4);
  color: var(--color-text);
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.mv-estado-card:active { box-shadow: var(--nm-pressed); }
.mv-estado-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.mv-estado-info { flex: 1; min-width: 0; }
.mv-estado-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--color-text-strong); }
.mv-estado-sub   { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.mv-estado-cta   { font-size: var(--fs-xs); color: var(--color-accent); font-weight: var(--fw-semi); }
.mv-estado-arrow { color: var(--color-text-dim); flex: 0 0 auto; }

/* =======================================================
   TARJETAS — flip, stack, CVV dinámico, acciones
   ======================================================= */
.cards-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0;
}
/* Dentro de la lista, cada .balance-card se muestra centrada con ancho
   consistente con el carrusel del home */
.cards-stack .balance-card {
  flex: 0 0 auto;
  width: 260px;
  max-width: 100%;
}
/* Pill de estado en SU PROPIA fila, bajada por debajo del row superior (marca a la izquierda +
   chip a la derecha) para que, centrada, NO se solape con el tipo de cuenta ("CRÉDITO") cuando el
   texto es largo. Mismo patrón que ya usan los temas 4 y 5. */
.bc-status-wrap {
  position: absolute;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  letter-spacing: normal;
  opacity: 1;
  white-space: nowrap;
}
/* =====================================================
   DETALLE DE TARJETA — Flip 3D con cara frontal y reverso
   ===================================================== */
.card-flip {
  perspective: 1400px;
  margin: 0 auto var(--space-4);
  width: 260px;
  max-width: 100%;
}
.card-flip-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.58;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-in-out);
  cursor: pointer;
}
.card-flip.flipped .card-flip-inner { transform: rotateY(180deg); }

/* Cada cara ocupa todo el card-flip-inner; la trasera está pre-rotada */
.card-face {
  position: absolute;
  inset: 0;
  padding: 22px;
  border-radius: 26px;
  background: var(--grad-raised);
  box-shadow: 0 18px 40px -14px rgba(90, 110, 140, 0.32);
  color: var(--color-text-strong);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
:root[data-theme="dark"] .card-face {
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.65);
}
.card-face.back { transform: rotateY(180deg); }

/* Tinte pastel naranja→azul (mismo lenguaje que las tarjetas del home) */
.card-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 78% at 22% 82%,
    rgba(255, 165, 115, 0.55) 0%,
    rgba(255, 195, 160, 0.38) 22%,
    rgba(220, 195, 210, 0.28) 45%,
    rgba(180, 200, 240, 0.26) 65%,
    rgba(130, 175, 230, 0.18) 82%,
    transparent 95%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.card-face > * { position: relative; z-index: 1; }

/* Chip metálico plata */
.card-face .card-chip {
  width: 40px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(135deg, #FBFCFE 0%, #CCD3DE 50%, #E8ECF2 100%);
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.9),
    inset -1px -1px 2px rgba(130, 140, 160, 0.45),
    2px 3px 6px rgba(100, 115, 140, 0.25);
  flex: 0 0 auto;
  position: relative;
}
.card-face .card-chip::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  background:
    linear-gradient(to bottom, rgba(120, 130, 150, 0.25) 0 1px, transparent 1px 5px) repeat-y,
    linear-gradient(to right,  rgba(120, 130, 150, 0.25) 0 1px, transparent 1px 5px) repeat-x;
  background-size: 5px 5px, 5px 5px;
}

/* Logo de red (Visa / Mastercard) */
.card-face .card-brand-logo {
  height: 28px;
  width: auto;
  max-width: 60px;
  opacity: 0.92;
  object-fit: contain;
}

/* Número de tarjeta (una línea o envuelto) */
.card-face .card-number {
  font-family: 'Courier New', 'Consolas', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-text-strong);
  opacity: 0.88;
  margin-top: auto;
  margin-bottom: var(--space-3);
}

/* Fila inferior con Titular y Vence */
.card-face .card-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3);
}
.card-face .card-titular,
.card-face .card-caducidad {
  font-size: 9px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.card-face .card-titular-value,
.card-face .card-caducidad-value {
  font-size: 12px;
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  letter-spacing: 0.04em;
}
.card-face .card-caducidad-value {
  font-family: 'Courier New', monospace;
}

/* Reverso: banda magnética + CVV */
.card-face.back { padding: 0; }
.card-face.back .card-back-stripe {
  width: 100%;
  height: 46px;
  background: #1E2A42;
  margin-top: 28px;
}
:root[data-theme="dark"] .card-face.back .card-back-stripe { background: #0C0F16; }
.card-face.back .card-back-cvv {
  margin: 26px 22px 4px;
  padding: 10px 14px;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  border-radius: var(--radius-md);
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: 0.16em;
  text-align: right;
}
.card-face.back .card-back-cvv-label {
  margin: 0 28px;
  font-size: 9px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: right;
}
.card-face.back .card-back-flip-hint {
  margin: auto 22px 22px;
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-align: center;
}

/* Sello "BLOQUEADA" superpuesto */
.card-face .card-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  padding: 8px 24px;
  border: 3px solid var(--color-danger);
  color: var(--color-danger);
  border-radius: 4px;
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  z-index: 3;
}

/* Efecto "congelada" — desaturación */
.card-flip.congelada .card-face { filter: saturate(0.55) brightness(1.05); }

.card-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--nm-sunk-sm);
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  color: var(--color-success);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card-status-pill.activa     { color: var(--color-success); }
.card-status-pill.bloqueada  { color: var(--color-danger); }
.card-status-pill.congelada  { color: #5BA8D9; }
.card-status-pill.blocked    { color: var(--color-warning); }
.card-status-pill.inactive   { color: var(--color-text-dim); }

/* Encabezado del detalle: caption (tipo de cuenta) + pill de estado en su propia fila, con gap.
   Evita que la pill se solape con el label uppercase (que hereda letter-spacing). */
.det-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.det-head .caption { letter-spacing: 0.08em; }
.det-head .card-status-pill { letter-spacing: 0.04em; opacity: 1; }

.card-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Cada acción (copia visual de .action-btn del home) */
.card-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-text);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.card-action:active { box-shadow: var(--nm-pressed); }
.card-action:disabled { cursor: not-allowed; }
.card-action-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad-sunk);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.card-action-label {
  font-size: 10.5px;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-align: center;
  line-height: 1.25;
}

/* Saldos del detalle */
.det-saldos {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-sunk-sm);
}
.det-saldo-solo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.det-saldos .bc-split {
  display: flex;
  gap: var(--space-4);
}
.det-saldos .bc-split-col { flex: 1; min-width: 0; }
.det-saldos .bc-saldo-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.det-saldos .bc-saldo {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.det-saldos .bc-saldo-sm { font-size: var(--fs-lg); }
.det-saldos .bc-saldo-aplicar-val {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  margin-top: 2px;
}

/* Filas de datos (número, CLABE, vigencia) con botón copiar */
.card-info-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-2);
}
.card-info-row-text { flex: 1; min-width: 0; }
.card-info-row-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card-info-row-value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  margin-top: 2px;
  font-family: 'Courier New', 'Consolas', ui-monospace, monospace;
  letter-spacing: 0.06em;
  word-break: break-all;
}
.card-copy-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.card-copy-btn:active { box-shadow: var(--nm-pressed); }
.card-copy-btn.copied {
  color: var(--color-success);
  box-shadow: var(--nm-sunk-sm);
}

/* Código de barras para depósito en ventanilla / Oxxo */
.card-barcode {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  text-align: center;
}
.card-barcode-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.card-barcode-img {
  display: flex;
  justify-content: center;
  padding: var(--space-3);
  background: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
  margin-bottom: var(--space-3);
}
.card-barcode-img img,
.card-barcode-img svg.card-barcode-svg {
  max-width: 100%;
  height: auto;
}
.card-barcode-svg { width: 100%; }
.card-barcode-ref {
  font-family: 'Courier New', monospace;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}
.card-barcode-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.cvv-dyn {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-4);
}
.cvv-dyn-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-3);
}
.cvv-dyn-title { font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.cvv-dyn-timer { font-size: var(--fs-xs); color: var(--color-accent); font-weight: var(--fw-semi); }
.cvv-dyn-value {
  font-family: 'Courier New', monospace;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: 0.15em;
  text-align: center;
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
  margin-bottom: var(--space-3);
}
.cvv-dyn-bar {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  overflow: hidden;
}
.cvv-dyn-bar-fill {
  height: 100%;
  background: var(--grad-accent);
  transition: width 1s linear;
}

.det-saldos {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-sunk-sm);
  margin-bottom: var(--space-4);
}
.det-saldos > div {
  display: flex; justify-content: space-between; gap: var(--space-2);
  font-size: var(--fs-sm);
}
.det-saldos > div > span:first-child { color: var(--color-text-muted); }
.det-saldos > div > span:last-child  { color: var(--color-text-strong); font-weight: var(--fw-semi); }

/* =======================================================
   PERFIL
   ======================================================= */
.profile-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-5);
  text-align: center;
}
.profile-avatar-lg {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--nm-raised), inset 1px 1px 2px rgba(255,255,255,0.25);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.profile-avatar-lg img.selfie {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.profile-name { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-text-strong); letter-spacing: -0.01em; }
.profile-sub  { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.profile-member-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  margin-top: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--nm-sunk-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  letter-spacing: 0.04em;
}

.profile-section { margin-bottom: var(--space-5); }
.profile-section-title {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  padding-left: var(--space-3);
}

/* Filas de información personal (perfil) */
.profile-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-2);
}
.profile-row-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.profile-row-icon svg { width: 18px; height: 18px; }
.profile-row-text { flex: 1; min-width: 0; }
.profile-row-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-row-value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  margin-top: 2px;
  word-break: break-word;
}

/* Settings item (perfil/ajustes) — ancho completo para que todas las
   filas midan igual horizontalmente (antes se ajustaban al contenido). */
.settings-item, .ajustes-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.settings-item:active, .ajustes-row:active { box-shadow: var(--nm-pressed); }

.settings-item-icon, .ajustes-row-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.settings-item-text, .ajustes-row-text { flex: 1; min-width: 0; }
.settings-item-title, .ajustes-row-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--color-text-strong); }
.settings-item-sub,   .ajustes-row-sub   { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.settings-item-chevron, .ajustes-row-arrow { color: var(--color-text-dim); flex: 0 0 auto; }
.settings-item-badge {
  padding: 3px 9px;
  background: var(--grad-accent);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

/* Documentos (INE) */
.doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.doc-card {
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
}
.doc-card-label { font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.doc-card-preview {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-dim);
  overflow: hidden;
}
.doc-card-preview img { width: 100%; height: 100%; object-fit: cover; }
.doc-card-status {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--space-2);
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  color: var(--color-success);
}

/* Ejecutivo */
.exec-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-4);
}
.exec-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--grad-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  box-shadow: var(--nm-raised-sm);
  flex: 0 0 auto;
}
.exec-info { flex: 1; min-width: 0; }
.exec-name { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--color-text-strong); }
.exec-producto { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }

.logout-btn {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  margin-top: var(--space-4);
}
.logout-btn:active { box-shadow: var(--nm-pressed); }

.app-version {
  text-align: center;
  font-size: 10.5px;
  color: var(--color-text-dim);
  margin-top: var(--space-4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* =======================================================
   AJUSTES
   ======================================================= */
.ajustes-section { margin-bottom: var(--space-5); }
.ajustes-section-title {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  padding-left: var(--space-3);
}
.ajustes-section-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
  line-height: 1.5;
  padding: var(--space-2) var(--space-3) 0;
  margin-bottom: var(--space-4);
}

.token-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--nm-raised-sm);
  margin-bottom: var(--space-4);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Pill de estado: dot + label (Activo / Desactivado) */
.token-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: center;
  padding: 6px 14px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--nm-sunk-sm);
}
.token-state-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-text-dim);
}
.token-state.ok .token-state-dot {
  background: var(--color-success);
  box-shadow: 0 0 8px rgba(29, 176, 135, 0.55);
  animation: nm-blink 1.8s ease-in-out infinite;
}
.token-state.off .token-state-dot { background: var(--color-text-dim); }
.token-state-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.token-state.ok .token-state-label { color: var(--color-success); }

/* Preview del código actual: hundido, código grande carmesí, timer */
.token-preview {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-sunk);
  text-align: center;
}
.token-preview.off { opacity: 0.55; }
.token-preview-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.token-preview-code {
  font-family: 'Courier New', 'Consolas', ui-monospace, monospace;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: 0.14em;
  margin: var(--space-2) 0;
  line-height: 1.1;
}
.token-preview-timer {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.token-preview-timer strong {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

/* Meta — lista de pares label/valor (grid 2 columnas por fila) */
.token-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
  margin: 0;
}
.token-meta > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-xs);
}
.token-meta dt {
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.token-meta dd {
  color: var(--color-text-strong);
  font-weight: var(--fw-semi);
  margin: 0;
  text-align: right;
  word-break: break-word;
  font-family: 'Courier New', 'Consolas', ui-monospace, monospace;
  letter-spacing: 0.04em;
}

/* Nota del admin al pie */
.token-admin-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}
.token-admin-note svg {
  color: var(--color-accent);
  flex: 0 0 auto;
  margin-top: 2px;
}

.devices-list {
  display: flex; flex-direction: column; gap: var(--space-2);
}

/* Item de dispositivo con sesión activa */
.device-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-raised-sm);
}
.device-item.actual {
  box-shadow: var(--nm-raised-sm), 0 0 0 2px var(--color-accent-glow);
}
.device-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  margin-top: 2px;
}
.device-info { flex: 1; min-width: 0; }
.device-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
  line-height: 1.3;
}
.device-current-badge {
  padding: 2px 8px;
  background: var(--grad-accent);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 2px 2px 6px var(--shadow-dark);
}
.device-meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.3;
}
.device-last {
  font-size: 10.5px;
  color: var(--color-text-dim);
  margin-top: var(--space-1);
  letter-spacing: 0.02em;
}
.device-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.device-close:active { box-shadow: var(--nm-pressed); }

/* TRADING y TRADING-DETALLE — estilos propios en /css/trading.css */
.pill-label { font-size: 10.5px; color: var(--color-text-muted); margin-right: 4px; letter-spacing: 0.04em; }
.up   { color: var(--color-success); }
.down { color: var(--color-accent); }

/* =======================================================
   TOKEN DE SEGURIDAD (autorizar transferencia/pago/retiro)
   Se monta dentro de un Modal. Estructura:
   .modal-amount (monto a autorizar) + .otp-section.token-th (token + estados)
   ======================================================= */

.modal-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
  margin-bottom: var(--space-4);
}
.modal-amount-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.modal-amount-value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  letter-spacing: -0.02em;
}

.token-th {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--nm-sunk-sm);
}
.token-th .btn-primary { margin-top: var(--space-3); }

/* Dígitos del token generado — 6 casillas neomorfas */
.token-th-digits {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-3);
}
.token-th-digits span {
  width: 36px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-raised-sm);
  font-family: 'Courier New', 'Consolas', ui-monospace, monospace;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: 0.06em;
}

/* Barra de progreso "verificando autorización" */
.token-th-progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.token-th-progress-bar {
  height: 100%;
  width: 0;
  background: var(--grad-accent);
  box-shadow: 0 0 8px var(--color-accent-glow);
  transition: width var(--dur-base) linear;
}
.token-th-eta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
  letter-spacing: 0.02em;
}

/* =======================================================
   TRANSFER SUMMARY — comprobante de transferencia/pago exitoso
   ======================================================= */
.transfer-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--nm-sunk-sm);
}
.transfer-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.transfer-summary-label {
  color: var(--color-text-muted);
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}
.transfer-summary-value {
  color: var(--color-text-strong);
  font-weight: var(--fw-semi);
  text-align: right;
  overflow-wrap: anywhere;
}
.transfer-summary-row.total {
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px dashed var(--shadow-dark);
}
.transfer-summary-row.total .transfer-summary-label {
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-weight: var(--fw-semi);
  letter-spacing: normal;
  text-transform: none;
}
.transfer-summary-row.total .transfer-summary-value {
  color: var(--color-accent);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
/* Valores en monospace (cuenta destino, clave de rastreo) — el JS los
   marca con un style inline que deja la letra muy pequeña; sobrescribimos
   a un tamaño legible y añadimos aire entre caracteres. */
.transfer-summary-value[style*="Courier"],
.transfer-summary-value[style*="monospace"] {
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  font-weight: var(--fw-semi);
  color: var(--color-text-strong);
}

/* =======================================================
   CHAT-IA — Botón flotante + panel drawer fullscreen
   ======================================================= */

/* Botón flotante neomorfo (esquina inferior-derecha, sobre el bottom-nav) */
.chat-ia-btn {
  position: fixed;
  right: 18px;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    6px 8px 16px var(--shadow-dark),
    -4px -4px 10px var(--shadow-light),
    inset 1px 1px 2px rgba(255, 255, 255, 0.25),
    0 0 0 0 var(--color-accent-glow);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.chat-ia-btn:active { transform: scale(0.94); }
.chat-ia-btn-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  pointer-events: none;
  animation: chat-pulse 2.4s ease-out infinite;
}
@keyframes chat-pulse {
  0%   { transform: scale(1);    opacity: 0.45; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* Panel drawer fullscreen — oculto por defecto, visible con .open */
.chat-ia-panel {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: var(--safe-top) 0 var(--safe-bottom);
}
.chat-ia-panel.open { transform: translateY(0); }

/* Header */
.chat-ia-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  position: relative;
  z-index: 2;
}
.chat-ia-back {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--nm-raised-sm);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.chat-ia-back:active { box-shadow: var(--nm-pressed); }

.chat-ia-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--nm-raised-sm);
  flex: 0 0 auto;
}
.chat-ia-titles { flex: 1; min-width: 0; line-height: 1.25; }
.chat-ia-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}
.chat-ia-subtitle {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.chat-ia-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 6px rgba(29, 176, 135, 0.5);
  animation: nm-blink 1.8s ease-in-out infinite;
}

/* Mensajes */
.chat-ia-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.chat-ia-msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.chat-ia-msg.bot  { align-self: flex-start; }
.chat-ia-msg.user { align-self: flex-end; align-items: flex-end; }

.chat-ia-bubble {
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  line-height: 1.45;
  word-wrap: break-word;
}
.chat-ia-msg.bot .chat-ia-bubble {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--nm-raised-sm);
  border-bottom-left-radius: 6px;
}
.chat-ia-msg.user .chat-ia-bubble {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 3px 4px 10px var(--shadow-dark);
  border-bottom-right-radius: 6px;
}
.chat-ia-time {
  font-size: 10px;
  color: var(--color-text-dim);
  margin-top: 4px;
  padding: 0 6px;
}

/* Chips de sugerencias */
.chat-ia-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.chat-ia-chip {
  padding: 8px 14px;
  background: var(--color-surface);
  color: var(--color-accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--nm-raised-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.chat-ia-chip:active { box-shadow: var(--nm-pressed); }

/* Typing indicator — 3 puntos que rebotan */
.chat-ia-typing {
  display: flex;
  gap: 4px;
  padding: 12px 18px;
  margin: 0 var(--space-4) var(--space-2);
  align-self: flex-start;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: 6px;
  width: fit-content;
}
.chat-ia-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-text-dim);
  animation: chat-typing 1.2s ease-in-out infinite;
}
.chat-ia-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-ia-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-typing {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

/* Input bar */
.chat-ia-input-bar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  position: relative;
  z-index: 2;
}
.chat-ia-input-bar input {
  flex: 1;
  height: 44px;
  padding: 0 18px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
}
.chat-ia-input-bar input::placeholder { color: var(--color-text-dim); }
.chat-ia-input-bar input:focus { box-shadow: var(--nm-sunk), 0 0 0 3px var(--color-accent-glow); }
.chat-ia-input-bar button[type="submit"] {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 4px 4px 10px var(--shadow-dark), inset 1px 1px 2px rgba(255,255,255,0.25);
  flex: 0 0 auto;
}
.chat-ia-input-bar button[type="submit"]:disabled { opacity: 0.5; }

/* =======================================================
   RESTABLECER CONTRASEÑA — Soft Relief + carmesí
   ======================================================= */
.rest-error {
  text-align: center;
  padding: var(--space-4) 0 var(--space-2);
}
.rest-error-badge {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-danger);
  display: flex; align-items: center; justify-content: center;
  margin: var(--space-4) auto var(--space-5);
}

.rest-hero .caption {
  display: block;
  margin-bottom: var(--space-2);
}
.rest-usuario {
  color: var(--color-text-strong);
  word-break: break-word;
}

.rest-expira {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
}

.rest-generate-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-2);
}
.rest-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--color-accent);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  cursor: pointer;
  padding: 4px 0;
}
.rest-generate-btn:hover { text-decoration: underline; }

.rest-match {
  display: flex;
  align-items: center;
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
}
.rest-match.ok  { color: var(--color-success); }
.rest-match.bad { color: var(--color-danger); }

/* Generar contraseña — contenido del modal */
.rest-genpass-box {
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-md);
  letter-spacing: 0.1em;
  color: var(--color-text-strong);
  word-break: break-all;
  text-align: center;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rest-genpass-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
}
.rest-genpass-actions .btn {
  flex: 1;
  height: 42px;
  font-size: var(--fs-xs);
}
.rest-genpass-copied {
  margin-top: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-success);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-align: center;
}

/* VALIDA_ESTADO — estilos propios en /css/valida-estado.css */

/* ===== OTP verificación por llamada — registro paso 2 ===== */
.otp-reenviar {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  background: transparent;
  border: 1px solid var(--glass-border, var(--color-border, rgba(128, 128, 128, 0.25)));
  color: var(--color-text-muted);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.otp-reenviar:disabled { opacity: 0.55; cursor: not-allowed; }
.otp-reenviar:not(:disabled):hover { border-color: var(--color-accent); color: var(--color-accent); }
.otp-verified {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--color-success);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.otp-input:disabled { opacity: 0.55; cursor: not-allowed; }

/* ===== Sesiones activas (modal de perfil) ===== */
.sesiones-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sesion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md, 14px);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
}
.sesion-row-text { min-width: 0; flex: 1; }
.sesion-row-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  word-break: break-word;
}
.sesion-row-sub {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.sesion-actual {
  color: var(--color-accent);
  font-weight: var(--fw-semi);
}
.sesion-cerrar { flex-shrink: 0; }

/* ===== Marca - badge de INICIALES (evita arrastrar el logo de desarrollo) =====
   Sustituye al <img src="logo-light.svg"> que traian las plantillas. common.js hidrata el
   badge: si la marca tiene logo -> <img> dentro; si no -> iniciales de 2 letras del nombre
   real. Antes de hidratar: vacio (sin logo demo) o iniciales desde cache. ===== */
.brand-mark[data-brand-mark],
.topbar-logo[data-brand-mark]{
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box; overflow:hidden;
  background:var(--color-accent, #4FC3F7); color:#fff;
  font-weight:800; line-height:1; letter-spacing:.02em; text-transform:uppercase;
  border-radius:28%; filter:none;
}
.brand-mark[data-brand-mark]{ font-size:14px; }
.topbar-logo[data-brand-mark]{ font-size:11px; }
.inst-appicon [data-brand-mark]{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; box-sizing:border-box; overflow:hidden;
  background:var(--color-accent, #4FC3F7); color:#fff;
  font-weight:800; font-size:20px; line-height:1; text-transform:uppercase; border-radius:14px;
}
.brand-mark[data-brand-mark] img,
.topbar-logo[data-brand-mark] img,
.inst-appicon [data-brand-mark] img{ width:100%; height:100%; object-fit:contain; display:block; }