/* Puerta de entrada, chip de usuario y panel de cuenta (Fase 0). Autocontenido. */
/* Las variables --ma-* las define tokens.css (paleta de la dirección A, claro,
   oscuro y prefers-color-scheme). Aquí no se declara ningún color. */
/* Inside the app the surface token is translucent; blur what sits behind the
   chip and the account panel, like the app modal, so page text never bleeds
   through the panel. */
:root[data-theme] .motor-user-chip,
:root[data-theme] .motor-account {
  backdrop-filter: blur(34px) saturate(140%);
  -webkit-backdrop-filter: blur(34px) saturate(140%);
}
:root[data-theme] .motor-account {
  box-shadow: var(--atlas-depth), inset 0 1px 0 var(--atlas-glass-edge);
}

body[data-motor-auth="login"],
body[data-motor-auth="offline"] {
  background: var(--ma-bg);
  color: var(--ma-text);
  font: 450 16px/1.55 var(--ap-font, system-ui), system-ui, sans-serif;
}

.motor-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.motor-auth-card {
  width: min(560px, 100%);
  background: var(--ma-surface);
  border: 1px solid var(--ma-line);
  border-radius: var(--ap-radius-md);
  padding: 1.75rem 1.75rem 1.25rem;
  display: grid;
  gap: 0.9rem;
}
.motor-auth-card h1 { margin: 0; font-size: 1.7rem; }
.motor-auth-lead { margin: 0; color: var(--ma-muted); }
.motor-auth-note { margin: 0; background: var(--ma-note-bg); border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.92rem; }
.motor-auth-error { margin: 0; background: var(--ma-danger-bg); color: var(--ma-danger); border-radius: 10px; padding: 0.6rem 0.9rem; }
.motor-auth-accept { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.motor-auth-accept input { margin-top: 0.3rem; }
.motor-auth-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.motor-auth-foot { margin: 0; color: var(--ma-muted); font-size: 0.85rem; }
.motor-auth a { color: var(--ma-accent); }

/* Botón primario: el mismo rosa Bloop que la landing y la app (antes, frambuesa). */
.motor-auth-btn {
  font: inherit;
  font-weight: 700;
  border: 1px solid var(--ap-brand);
  background: var(--ap-brand);
  color: var(--ap-on-brand);
  border-radius: 10px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.motor-auth a.motor-auth-btn { color: var(--ma-accent-ink); }
.motor-auth-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.motor-auth-btn-secondary { background: transparent; border-color: var(--ma-accent); color: var(--ma-accent); }
.motor-auth-btn-danger { background: var(--ma-danger); border-color: var(--ma-danger); color: var(--ap-bg); }

/* Chip flotante con el usuario y acceso a la cuenta */
.motor-user-chip {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: var(--ap-z-overlay);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 600 0.85rem/1 var(--ap-font, system-ui), system-ui, sans-serif;
  color: var(--ma-text);
  background: var(--ma-surface);
  border: 1px solid var(--ma-line);
  border-radius: var(--ap-radius-pill);
  padding: 0.5rem 0.85rem 0.5rem 0.6rem;
  cursor: pointer;
  box-shadow: var(--ap-shadow-3);
}
.motor-user-chip:hover { border-color: var(--ma-accent); }
.motor-user-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ma-accent); }
.motor-user-label { color: var(--ma-muted); font-weight: 500; }

/* Panel de ajustes de la cuenta: cabecera fija con la identidad y cuerpo
   desplazable con grupos de filas (texto a la izquierda, acción a la derecha). */
.motor-account {
  border: 1px solid var(--ma-line);
  border-radius: 20px;
  padding: 0;
  width: min(640px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
  background: var(--ma-surface);
  color: var(--ma-text);
  font: 450 15px/1.5 var(--ap-font, system-ui), system-ui, sans-serif;
}
.motor-account[open] { display: flex; flex-direction: column; }
.motor-account::backdrop { background: var(--overlay-scrim); }
.motor-account-inner { display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 2rem); }
.motor-account-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1.1rem 1.5rem;
  border-bottom: 1px solid var(--ma-line);
}
.motor-account-identity { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.motor-account-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 1.1rem/1 var(--ap-font-display, inherit);
  letter-spacing: 0.02em;
  color: var(--ma-accent-ink);
  background: var(--ma-accent);
}
.motor-account-who { display: grid; gap: 0.1rem; min-width: 0; }
.motor-account-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.motor-account-eyebrow { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ma-muted); }
.motor-account-head h2 { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.motor-account-who .motor-account-muted { margin: 0; }
.motor-account-badge {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.25rem 0.65rem;
  border-radius: var(--ap-radius-pill);
  border: 1px solid var(--ma-line);
  color: var(--ma-muted);
}
.motor-account-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  background: none;
  border: 0;
  color: var(--ma-muted);
  cursor: pointer;
}
.motor-account-close:hover { background: var(--ma-bg); color: var(--ma-text); }
.motor-account-close:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 2px; }

.motor-account-body { display: grid; gap: 1.5rem; padding: 1.25rem 1.5rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; }
.motor-account-section { display: grid; gap: 0.6rem; }
.motor-account-section h3 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ma-muted);
}
.motor-account-section p { margin: 0; }
.motor-account-section label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.92rem; }
.motor-account-section input[type="text"] { font: inherit; padding: 0.55rem 0.8rem; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-bg); color: var(--ma-text); }
.motor-account-section input:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 1px; }
.motor-account-section select { font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-bg); color: var(--ma-text); width: 100%; box-sizing: border-box; }
.motor-account-section select:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 2px; }

/* Grupo de datos del perfil: tarjeta con filas separadas por filetes. */
.motor-account-data { margin: 0; border: 1px solid var(--ma-line); border-radius: var(--ap-radius-sm); }
.motor-account-data > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 0.7rem 1rem; }
.motor-account-data > div + div { border-top: 1px solid var(--ma-line); }
.motor-account-data dt { color: var(--ma-muted); }
.motor-account-data dd { margin: 0; overflow-wrap: anywhere; }

/* Filas de acción: explicación a la izquierda, botón a la derecha. */
.motor-account-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--ma-line); border-radius: var(--ap-radius-sm); }
.motor-account-row + .motor-account-row { margin-top: -0.6rem; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.motor-account-row:has(+ .motor-account-row) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.motor-account-row > div { display: grid; gap: 0.15rem; min-width: 0; }
.motor-account-row > .motor-auth-btn { flex: none; white-space: nowrap; }

.motor-account-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.motor-account-actions { display: flex; justify-content: flex-end; }
.motor-account-muted { color: var(--ma-muted); font-size: 0.9rem; }
.motor-account-ok { color: var(--ma-accent); font-size: 0.9rem; font-weight: 600; }
.motor-account-note { background: var(--ma-note-bg); border-radius: var(--ap-radius-sm); padding: 0.9rem 1rem; }

/* El plan se pinta en renderQuota: aquí solo se le da forma de tarjeta. */
.motor-account-section[data-quota] { padding: 0.9rem 1rem 1rem; border: 1px solid var(--ma-line); border-radius: var(--ap-radius-sm); }
.motor-account-section[data-quota] .motor-plan-list li { justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.55rem 0.55rem 0.8rem; border: 1px solid var(--ma-line); border-radius: 10px; }
.motor-account-section[data-quota] .motor-plan-list .motor-auth-btn-small { margin-left: auto; }

/* Zona de peligro plegada: borrar la cuenta no debe estar a un clic. */
.motor-account-danger { border: 1px solid var(--ma-line); border-radius: var(--ap-radius-sm); padding: 0 1rem; }
.motor-account-danger[open] { border-color: var(--ma-danger); padding-bottom: 1rem; }
.motor-account-danger > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none; }
.motor-account-danger > summary::-webkit-details-marker { display: none; }
.motor-account-danger > summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--ma-muted); border-bottom: 2px solid var(--ma-muted); transform: rotate(-45deg); transition: transform 0.15s ease; }
.motor-account-danger[open] > summary::after { transform: rotate(45deg); }
.motor-account-danger > summary:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 2px; border-radius: var(--ap-radius-xs); }
.motor-account-danger h3 { color: var(--ma-danger); }

.motor-account-foot { color: var(--ma-muted); font-size: 0.82rem; padding-top: 0.25rem; }
.motor-account a { color: var(--ma-accent); }
.motor-account code { font-size: 0.9em; }

/* Permiso para grabar, antes de la primera generación */
.motor-permission { width: min(520px, calc(100vw - 2rem)); }
.motor-permission p { margin: 0; }
.motor-permission-check { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-weight: 600; cursor: pointer; }
.motor-permission-check input { width: 1.1rem; height: 1.1rem; margin: 0.2rem 0 0; accent-color: var(--ma-accent); }
.motor-permission-actions { display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; }

@media (max-width: 560px) {
  .motor-account { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); border-radius: var(--ap-radius-md); }
  .motor-account-inner { max-height: calc(100dvh - 1rem); }
  .motor-account-head { grid-template-columns: minmax(0, 1fr) auto; padding: 1rem 0.75rem 1rem 1rem; }
  .motor-account-badge { display: none; }
  .motor-account-avatar { width: 44px; height: 44px; font-size: 1rem; }
  .motor-account-body { padding: 1rem 1rem 1.25rem; }
  .motor-account-row { flex-direction: column; align-items: stretch; }
  .motor-account-row > .motor-auth-btn { text-align: center; }
  .motor-account-fields { grid-template-columns: 1fr; }
  .motor-account-data > div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ── Tarjeta de acceso ancha y panel de plan ───────────────────────────── */
.motor-auth-card-wide { max-width: 520px; }
.motor-auth-btn-small { padding: 4px 10px; font-size: 0.85em; margin-left: 8px; }
.motor-quota-bar { height: 8px; border-radius: 6px; background: var(--ap-accent-tint); overflow: hidden; margin: 6px 0 10px; }
.motor-quota-bar > span { display: block; height: 100%; background: var(--ap-brand); border-radius: 6px; }
.motor-plan-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
/* Plan a la izquierda, «Elegir» siempre en su columna a la derecha. */
.motor-plan-list li, .motor-plan-extra { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; }
.motor-plan-list .motor-auth-btn-small, .motor-plan-extra .motor-auth-btn-small { margin-left: 0; }
.motor-plan-list:empty { display: none; }

.motor-waking > span { width: 40%; transform: translateX(0); animation: motor-waking 1.4s ease-in-out infinite alternate; }
@keyframes motor-waking { from { transform: translateX(0); } to { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) { .motor-waking > span { animation: none; width: 100%; } }

/* ── Cuentas propias: formularios de entrada ─────────────────────────── */
.motor-auth-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--ma-line); }
.motor-auth-tab { font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.5rem 0.8rem; color: var(--ma-muted); cursor: pointer; }
.motor-auth-tab.is-active { color: var(--ma-accent); border-bottom-color: var(--ma-accent); }
.motor-auth-form { display: grid; gap: 0.8rem; }
.motor-auth-form label:not(.motor-auth-accept) { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.95rem; }
.motor-auth-form input:not([type="checkbox"]),
.motor-account-section input[type="password"] { font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-bg); color: var(--ma-text); width: 100%; box-sizing: border-box; }
.motor-auth-form input:focus { outline: 2px solid var(--ma-accent); outline-offset: 1px; }
.motor-auth-link { font: inherit; background: none; border: 0; color: var(--ma-accent); cursor: pointer; text-decoration: underline; justify-self: start; padding: 0; }
.motor-auth-btn-danger { display: inline-flex; align-items: center; gap: 0.45rem; }
.motor-auth-btn-danger .icon { width: 1.1em; height: 1.1em; }
/* Casillas del código (react-bits.css): la etiqueta va encima y las casillas no se estiran. */
.code-label .code-slots { justify-self: start; font-weight: 400; }
.motor-hold-cancel { justify-self: start; min-height: 40px; padding: 0 12px; font: inherit; font-weight: 600; }
.motor-hold-wrap { display: inline-grid; justify-items: start; gap: 2px; }
.motor-hold-note { color: var(--ap-muted); font-size: var(--ap-text-meta); }
.motor-auth-btn-danger .bin-lid { transform-box: view-box; transform-origin: 8px 6px; transition: transform 0.45s var(--ap-ease-spring); }
.motor-auth-btn-danger:hover .bin-lid, .motor-auth-btn-danger:focus-visible .bin-lid { transform: rotate(-32deg); }


/* Ver la contraseña: el botón va dentro del campo, a la derecha. El campo tiene
   el mismo aspecto con el texto oculto o visible (en la cuenta, el estilo base
   solo cubría type="password"). */
.motor-pw { position: relative; display: block; }
.motor-pw > input,
.motor-account-section .motor-pw > input { width: 100%; box-sizing: border-box; padding: 0.6rem 2.8rem 0.6rem 0.8rem; font: inherit; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-bg); color: var(--ma-text); }
.motor-pw > input::-ms-reveal { display: none; }
.motor-pw-toggle { position: absolute; top: 50%; right: 0.3rem; transform: translateY(-50%); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: var(--ap-radius-xs); background: transparent; color: var(--ma-muted); cursor: pointer; }
.motor-pw-toggle:hover { color: var(--ma-text); background: var(--ap-glass-2); }
.motor-pw-toggle:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 1px; }
.motor-pw-toggle svg { width: 1.2rem; height: 1.2rem; }
.motor-pw-eye-off, .motor-pw-toggle[aria-pressed="true"] .motor-pw-eye { display: none; }
.motor-pw-toggle[aria-pressed="true"] .motor-pw-eye-off { display: block; }

/* ── Página «Cuenta» (#/account) ─────────────────────────────────────────
   Índice de secciones a la izquierda en escritorio (arriba en móvil); primero
   el plan y las horas. Mismo lenguaje que la landing en «Cambiar de plan». */
.account-page { width: min(1120px, 100%); }
.acct { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--ap-space-5) var(--ap-space-6); align-items: start; }
.acct-head { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--ap-space-4); }
.acct-avatar { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font: 800 20px/1 var(--ap-font-display); color: var(--ap-on-brand); background: radial-gradient(circle at 32% 26%, var(--ap-reflection), transparent 45%), linear-gradient(150deg, var(--ap-brand), var(--ap-accent)); }
.acct-who h1 { margin: 0; font-family: var(--ap-font-display); font-size: var(--ap-text-page); font-weight: var(--ap-weight-title); letter-spacing: var(--ap-tracking-title); line-height: 1.1; }
.acct-who p { margin: 2px 0 0; color: var(--ap-muted); }
.acct-toc { position: sticky; top: calc(var(--topbar-height) + var(--ap-space-4)); display: grid; gap: 2px; }
.acct-toc button { padding: 9px 12px; border: 0; border-radius: var(--ap-radius-sm); background: transparent; color: var(--ap-ink-2); font: 600 var(--ap-text-ui)/1.3 var(--ap-font); text-align: left; cursor: pointer; }
.acct-toc button:hover { background: var(--ap-glass-2); color: var(--ap-ink); }
.acct-toc button[aria-current="true"] { background: var(--ap-glass-3); color: var(--ap-ink); box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1); }
.acct-main { display: grid; gap: var(--ap-space-7); min-width: 0; }
.acct-section { display: grid; gap: var(--ap-space-3); scroll-margin-top: calc(var(--topbar-height) + var(--ap-space-4)); }
.acct-section-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ap-space-1) var(--ap-space-3); }
.acct-section-title h2 { margin: 0; font-family: var(--ap-font-display); font-size: var(--ap-text-section); font-weight: var(--ap-weight-title); letter-spacing: var(--ap-tracking-title); }
.acct-section-title p { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-meta); }
.acct-card { padding: var(--ap-space-5); border: 1px solid var(--ap-glass-edge); border-radius: var(--ap-radius-lg); background: var(--ap-glass-1); box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1); }
.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ap-space-2) var(--ap-space-3); }
.acct-quota { display: grid; gap: var(--ap-space-4); }
.acct-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--ap-radius-pill); background: var(--ap-glass-3); color: var(--ap-ink-2); font: var(--ap-weight-strong) var(--ap-text-meta)/1.4 var(--ap-font); letter-spacing: 0; }
.acct-chip.is-ok { background: color-mix(in srgb, var(--ap-success) 16%, transparent); color: var(--ap-success); }
.acct-chip.is-admin { background: color-mix(in srgb, var(--ap-lav) 30%, transparent); color: var(--ap-ink); }

/* Tu plan */
.acct-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ap-space-4) var(--ap-space-6); align-items: center; }
.acct-plan-copy { display: grid; gap: var(--ap-space-2); min-width: 0; }
.acct-eyebrow { color: var(--ap-muted); font-size: var(--ap-text-label); font-weight: var(--ap-weight-strong); letter-spacing: var(--ap-tracking-label); text-transform: uppercase; }
.acct-plan-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ap-space-2) var(--ap-space-3); }
.acct .acct-plan-name h3 { margin: 0; font-family: var(--ap-font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em; }
.acct-detail { margin: 0; max-width: 58ch; color: var(--ap-ink-2); }
.acct-facts { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-meta); }
.acct-meter { position: relative; width: 148px; max-width: 100%; aspect-ratio: 1; }
.acct-meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.acct-meter circle { fill: none; stroke-width: 12; }
.acct-meter-track { stroke: var(--ap-glass-3); }
.acct-meter-fill { stroke: var(--ap-brand); stroke-linecap: round; transition: stroke-dashoffset 0.6s var(--ap-ease-spring); }
.acct-meter.low .acct-meter-fill { stroke: var(--ap-warning); }
.acct-meter.unmetered .acct-meter-fill { stroke: var(--ap-lav); }
.acct-meter-label { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 16px; text-align: center; }
.acct-meter-label b { font: 800 22px/1.05 var(--ap-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.acct-meter-label small { max-width: 92px; margin: 2px auto 0; color: var(--ap-muted); font-size: var(--ap-text-meta); line-height: 1.3; }
.acct-notice { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--ap-space-3); padding: var(--ap-space-3) var(--ap-space-4); border-radius: var(--ap-radius-md); background: color-mix(in srgb, var(--ap-peach) 28%, transparent); }
.acct-notice img { flex: none; width: 40px; height: auto; }
.acct-notice p { margin: 0; }
.acct-wide { grid-column: 1 / -1; }
.acct-admin { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ap-space-2) var(--ap-space-3); padding-top: var(--ap-space-4); border-top: 1px solid var(--ap-line); }
.acct-admin label { display: inline-flex; align-items: center; gap: var(--ap-space-2); font-weight: var(--ap-weight-strong); }
.acct-admin select, .acct-rows select { font: inherit; padding: 8px 10px; border: 1px solid var(--ap-line); border-radius: var(--ap-radius-sm); background: var(--ap-glass-2); color: var(--ap-ink); }
.acct-admin [data-admin-plan-status] { flex-basis: 100%; margin: 0; }
.acct-admin [data-admin-plan-status]:empty { display: none; }

/* Cambiar de plan */
.acct-change { display: grid; gap: var(--ap-space-3); scroll-margin-top: calc(var(--topbar-height) + var(--ap-space-4)); }
.acct-change-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ap-space-2) var(--ap-space-3); }
.acct .acct-change-head h3 { margin: 0; font-family: var(--ap-font-display); font-size: var(--ap-text-subtitle); }
.acct-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ap-space-3); }
.acct-offer { display: grid; align-content: start; gap: var(--ap-space-3); }
.acct-offer.is-pro { background: linear-gradient(160deg, color-mix(in srgb, var(--ap-lav) 22%, transparent), var(--ap-glass-1) 60%); }
.acct-offer h4 { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-2); margin: 0; font-family: var(--ap-font-display); font-size: 22px; letter-spacing: -0.02em; }
.acct-variant { display: grid; gap: var(--ap-space-2); }
.acct-price { display: flex; align-items: flex-end; gap: var(--ap-space-2); margin: 0; }
.acct-price b { font: 800 40px/0.95 var(--ap-font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.acct-price small { padding-bottom: 3px; color: var(--ap-muted); font-size: var(--ap-text-meta); line-height: 1.3; }
.acct-variant.is-unavailable .acct-price b { font-size: var(--ap-text-section); color: var(--ap-ink-2); }
.acct-hours { margin: 0; font-weight: var(--ap-weight-strong); }
.acct-note { margin: 0; min-height: 2.8em; color: var(--ap-ink-2); font-size: var(--ap-text-meta); }
.acct-current { margin: 0; padding: 8px 0; color: var(--ap-muted); font-weight: var(--ap-weight-strong); text-align: center; }
.acct-variant .motor-auth-btn { width: 100%; }
.acct-offer ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--ap-ink-2); font-size: var(--ap-text-meta); }
.acct-offer li { position: relative; padding-left: 18px; }
.acct-offer li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--ap-brand); }
.acct-extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ap-space-3) var(--ap-space-5); }
.acct-extra p { margin: 0; max-width: 62ch; color: var(--ap-ink-2); }
.acct-extra strong { color: var(--ap-ink); }

/* Perfil, guía, seguridad y datos */
.acct-rows { display: grid; margin: 0; padding-block: var(--ap-space-2); }
.acct-rows > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--ap-space-1) var(--ap-space-4); padding: var(--ap-space-3) 0; border-top: 1px solid var(--ap-line); }
.acct-rows > div:first-child { border-top: 0; }
.acct-rows dt { color: var(--ap-muted); }
.acct-rows dd { margin: 0; font-weight: var(--ap-weight-strong); overflow-wrap: anywhere; }
.acct-list { display: grid; padding-block: var(--ap-space-2); }
.acct-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ap-space-2) var(--ap-space-5); }
.acct-list .acct-row { padding: var(--ap-space-3) 0; border-top: 1px solid var(--ap-line); }
.acct-list .acct-row:first-child { border-top: 0; }
.acct-row > div, .acct-row > p { flex: 1 1 280px; min-width: 0; margin: 0; }
.acct-row p { margin: 2px 0 0; color: var(--ap-muted); font-size: var(--ap-text-meta); }
.acct-switch { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ap-space-2); border: 0; background: none; cursor: pointer; }
.acct-switch:disabled { cursor: default; opacity: .6; }
.acct-switch .switch { width: 38px; height: 22px; }
.acct-switch .switch i { width: 16px; height: 16px; }
.acct-switch .switch.active i { transform: translateX(16px); }
.acct-switch[aria-busy="true"] .switch i { opacity: 0; }
.acct-switch-status:empty { display: none; }
.acct-switch-status { margin-top: 4px; color: var(--ma-danger); }
.acct-row > p { color: var(--ap-ink-2); font-size: var(--ap-text-ui); }
.acct-row > .motor-auth-btn { flex: none; }
.acct-form { display: grid; gap: var(--ap-space-3); }
.acct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ap-space-3); }
.acct-fields label { display: grid; gap: 6px; color: var(--ap-ink-2); font-size: var(--ap-text-meta); font-weight: var(--ap-weight-strong); }
.acct-fields .code-slots__text { width: 100%; box-sizing: border-box; padding: 0.6rem 0.8rem; font: inherit; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-bg); color: var(--ma-text); }
.acct-form p { margin: 0; }
.acct-danger { border-color: color-mix(in srgb, var(--ap-accent) 40%, var(--ap-glass-edge)); }
.acct-danger summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.acct-danger summary::-webkit-details-marker { display: none; }
.acct-danger summary::after { content: "+"; color: var(--ap-accent); font: 400 24px/1 var(--ap-font-display); transition: transform var(--ap-dur-base) var(--ap-ease-spring); }
.acct-danger[open] summary::after { transform: rotate(45deg); }
.acct .acct-danger summary h3 { margin: 0; color: var(--ap-accent); font-size: var(--ap-text-ui); }
.acct-danger[open] { display: grid; gap: var(--ap-space-3); }
.acct-danger p { margin: 0; color: var(--ap-ink-2); }
.acct-danger label { display: grid; gap: 6px; max-width: 360px; }
.acct-danger input { font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-bg); color: var(--ma-text); }
.acct-legal { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-meta); }
.acct-legal a { color: var(--ap-accent); }
.sidebar-account.active .motor-user-chip { background: var(--ap-glass-3); color: var(--ap-ink); }

@media (max-width: 860px) {
  .acct { grid-template-columns: minmax(0, 1fr); }
  .acct-toc { position: static; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .acct-toc button { flex: none; background: var(--ap-glass-2); }
  .acct-plan { grid-template-columns: minmax(0, 1fr); }
  .acct-meter { grid-row: 1; justify-self: start; width: 144px; }
  .acct-meter-label b { font-size: 19px; }
  .acct-offers, .acct-fields { grid-template-columns: minmax(0, 1fr); }
  .acct-rows > div { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .acct-meter-fill { transition: none; } }