/* /account/ — la cuenta de Northlane (perfil, planes, pagos, privacidad, seguridad).
   Zenith: solo tokens --zn-* (tamaños, radios, sombras, curvas y duraciones de
   la escala, nada suelto), tarjetas de tono sin bordes, filas separadas por
   espacio y no por lineas, indicadores en blanco (--zn-live), el sol queda para
   el sol. Los bordes solo en lo que se escribe: campos. */

.acct-page { min-height: 100vh; }
.acct-wrap { width: min(880px, 100% - 32px); margin-inline: auto; position: relative; z-index: 1; }

.acct-top { padding: 18px 0; position: relative; z-index: 5; }
.acct-top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.acct-top .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: var(--zn-track-title); }

.acct-head { padding: 48px 0 28px; }
.acct-head h1 { margin: 12px 0 8px; font-size: var(--zn-fs-2xl); letter-spacing: var(--zn-track-title); line-height: 1.1; }
.acct-lede { margin: 0; max-width: 560px; color: var(--zn-t2); font-size: var(--zn-fs-lg); line-height: 1.55; }

.acct-page .acct-gate { padding: 40px 0 80px; }
.acct-gate h2 { margin: 0 0 8px; font-size: var(--zn-fs-xl); letter-spacing: var(--zn-track-title); }
.acct-gate p { margin: 0 0 20px; color: var(--zn-t2); }

/* pestañas: control segmentado de tono */
.acct-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; margin-bottom: 24px; border-radius: 999px; background: var(--zn-ink-2); width: fit-content; max-width: 100%; }
.acct-tabs button { padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--zn-t2); font: inherit; font-size: var(--zn-fs-md); font-weight: 500; cursor: pointer; transition: background var(--zn-dur-2) var(--zn-ease), color var(--zn-dur-2) var(--zn-ease); }
.acct-tabs button:hover { color: var(--zn-t1); }
.acct-tabs button.on { background: var(--zn-ink-3); color: var(--zn-t1); }

.acct-page .acct-panel { display: flex; flex-direction: column; gap: 16px; padding: 0 0 80px; }
.acct-page .acct-panel[hidden] { display: none; }

/* tarjetas: tono y espacio, sin bordes */
.acct-card { padding: 28px; border: 0; border-radius: var(--zn-radius-xl); background: var(--zn-ink-2); }
.acct-card h2 { margin: 0 0 4px; font-size: var(--zn-fs-lg); font-weight: 600; letter-spacing: 0; }
.acct-card > p.sub { margin: 0 0 20px; color: var(--zn-t3); font-size: var(--zn-fs-md); line-height: 1.5; }
.acct-empty { color: var(--zn-t3); font-size: var(--zn-fs-lg); margin: 0; }

/* perfil */
.acct-id { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.acct-avatar { width: 84px; height: 84px; flex: none; border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: var(--zn-t1); color: var(--zn-ink-0); font-size: var(--zn-fs-2xl); font-weight: 600; }
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-id-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.acct-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.acct-field > span { font-size: var(--zn-fs-base); font-weight: 600; color: var(--zn-t2); }
.acct-field small { font-size: var(--zn-fs-base); color: var(--zn-t3); }
/* campos: lo unico con borde */
.acct-field input, .acct-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--zn-t1) 14%, transparent); border-radius: var(--zn-radius);
  background: var(--zn-ink-0); color: var(--zn-t1); font: inherit; font-size: var(--zn-fs-md);
}
.acct-field input:focus, .acct-field textarea:focus { outline: none; border-color: var(--zn-t2); }
.acct-field input[readonly] { color: var(--zn-t3); cursor: not-allowed; }
.acct-handle { display: flex; align-items: center; gap: 6px; }
.acct-handle > span { color: var(--zn-t3); font-weight: 600; }
.acct-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.acct-err { margin: 0 0 12px; color: var(--zn-t1); font-size: var(--zn-fs-md); }

/* filas (planes, pagos, privacidad, dispositivos): espacio, no lineas */
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.acct-row:first-of-type { padding-top: 0; }
.acct-row:last-child { padding-bottom: 0; }
.acct-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-row-main strong { font-size: var(--zn-fs-md); font-weight: 500; }
.acct-row-main span { font-size: var(--zn-fs-base); color: var(--zn-t3); line-height: 1.45; overflow-wrap: anywhere; }
.acct-row .btn { flex: none; }

/* etiquetas de estado: tono + indicador blanco */
.acct-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: var(--zn-fs-sm); font-weight: 600; color: var(--zn-live); background: var(--zn-ink-3); vertical-align: middle; }
.acct-tag.off { color: var(--zn-t3); }

.acct-card-line { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: var(--zn-radius-lg); background: var(--zn-ink-3); margin-bottom: 16px; }
.acct-card-line strong { font-size: var(--zn-fs-md); font-weight: 500; }
.acct-card-line span { color: var(--zn-t3); font-size: var(--zn-fs-base); }

.acct-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; padding: 10px 18px; border-radius: 999px; background: var(--zn-t1); color: var(--zn-ink-0); font-size: var(--zn-fs-md); font-weight: 500; box-shadow: var(--zn-shadow-2); }

/* controles de privacidad */
.acct-select {
  padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--zn-t1) 14%, transparent); border-radius: var(--zn-radius);
  background: var(--zn-ink-0); color: var(--zn-t1); font: inherit; font-size: var(--zn-fs-md); max-width: 260px;
}
.acct-switch {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 40px; height: 24px; margin: 0; border-radius: 999px; position: relative; cursor: pointer;
  background: var(--zn-ink-3);
  transition: background var(--zn-dur-2) var(--zn-ease);
}
.acct-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px;
  background: var(--zn-t2);
  transition: transform var(--zn-dur-2) var(--zn-ease), background var(--zn-dur-2) var(--zn-ease);
}
.acct-switch:checked { background: var(--zn-live); }
.acct-switch:checked::after { transform: translateX(16px); background: var(--zn-ink-0); }
.acct-switch:focus-visible, .acct-select:focus-visible, .acct-tabs button:focus-visible { outline: 2px solid var(--zn-t2); outline-offset: 2px; }

@media (max-width: 560px) {
  .acct-row { flex-direction: column; align-items: flex-start; }
  .acct-card { padding: 20px; }
  .acct-id { flex-direction: column; align-items: flex-start; }
}