/* Ajustes: jerarquía y escala de la referencia móvil. */
@media (max-width: 720px), (min-width: 721px) and (max-width: 1023px) and (orientation: portrait) {
  .page-ajustes .settings-screen { display: block !important; }
  .page-ajustes .account-card { margin: 0 0 32px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  .page-ajustes .account-identity { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) auto !important; align-items: center !important; gap: 20px !important; }
  .page-ajustes .account-identity .avatar { grid-row: 1 / span 2 !important; width: 72px !important; height: 72px !important; font-size: 31px !important; }
  .page-ajustes .account-identity-copy { display: flex !important; min-width: 0 !important; padding: 0 !important; flex-direction: column !important; align-items: flex-start !important; }
  .page-ajustes .account-identity-copy strong { font-size: 22px !important; }
  .page-ajustes .account-identity-copy small { max-width: 100% !important; margin-top: 8px !important; overflow: hidden !important; font-size: 14px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .page-ajustes .account-name-edit { min-height: 40px !important; margin-top: 16px !important; padding: 0 16px !important; border-radius: 13px !important; font-size: 13px !important; }
  .page-ajustes .settings-sign-out { display: flex !important; grid-column: 3 !important; grid-row: 1 / span 2 !important; align-self: center !important; gap: 7px !important; min-height: 40px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #ff5265 !important; font-size: 14px !important; white-space: nowrap !important; }
  .page-ajustes .settings-sign-out span { font-size: 21px !important; transform: rotate(180deg) !important; }

  .page-ajustes .settings-config-panel { padding: 0 14px !important; border: 1px solid var(--line-soft) !important; border-radius: 18px !important; background: linear-gradient(145deg, #081a2d, #041120) !important; overflow: hidden !important; }
  .page-ajustes .settings-menu { display: block !important; border: 0 !important; }
  .page-ajustes .settings-menu-row { min-height: 92px !important; padding: 12px 0 !important; gap: 14px !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; }
  .page-ajustes .settings-menu-row:last-child { border-bottom: 0 !important; }
  .page-ajustes .settings-row-icon { width: 54px !important; height: 54px !important; border-radius: 15px !important; }
  .page-ajustes .settings-row-icon .asset-icon { width: 42px !important; height: 42px !important; }
  .page-ajustes .settings-menu-row:nth-child(1) .settings-row-icon { color: #12d2e7 !important; }
  .page-ajustes .settings-menu-row:nth-child(2) .settings-row-icon { color: #42e3bd !important; }
  .page-ajustes .settings-menu-row:nth-child(3) .settings-row-icon { color: #a778f6 !important; }
  .page-ajustes .settings-menu-row:nth-child(4) .settings-row-icon { color: #4d9bff !important; }
  .page-ajustes .settings-menu-row:nth-child(5) .settings-row-icon { color: #17ccea !important; }
  .page-ajustes .settings-row-copy strong { font-size: 17px !important; }
  .page-ajustes .settings-row-copy small { margin-top: 5px !important; font-size: 13px !important; }
  .page-ajustes .settings-chevron { font-size: 0 !important; }
  .page-ajustes .settings-chevron::after { content: ""; display: block; width: 10px; height: 10px; border-top: 2px solid #a0aec2; border-right: 2px solid #a0aec2; transform: rotate(45deg); }
  .page-ajustes .install-settings, .page-ajustes .settings-version { display: none !important; }
}

/* Paneles secundarios de Ajustes: una sola variante móvil, independiente del
   navegador que abra la PWA. */
@media (max-width: 720px), (min-width: 721px) and (max-width: 1023px) and (orientation: portrait) {
  .settings-detail-sheet { max-height: calc(100dvh - 112px) !important; padding: 18px 22px calc(18px + env(safe-area-inset-bottom)) !important; border-radius: 31px 31px 0 0 !important; background: radial-gradient(circle at 50% 15%, rgb(18 91 151 / .23), transparent 26rem), #06182d !important; }
  .settings-detail-sheet .modal-head { align-items: flex-start !important; padding: 20px 1px 0 !important; }
  .settings-detail-sheet .modal-head h2 { font-size: 27px !important; line-height: 1.1 !important; }
  .settings-detail-sheet .modal-head p { max-width: 560px !important; margin-top: 12px !important; color: #a9b5c8 !important; font-size: 16px !important; line-height: 1.35 !important; }
  .settings-detail-sheet .modal-body { padding: 22px 1px 4px !important; }
  .settings-detail-sheet .modal-actions { position: sticky !important; bottom: 0 !important; display: block !important; padding: 16px 1px 0 !important; background: linear-gradient(180deg, transparent, #06182d 22%) !important; }
  .settings-detail-sheet .modal-actions .primary { min-height: 48px !important; border-radius: 14px !important; background: linear-gradient(100deg, #11d3e8, #05c0dc) !important; color: #03111d !important; font-size: 16px !important; box-shadow: none !important; }
  .settings-detail-sheet .settings-toggle-list { display: grid !important; gap: 10px !important; }
  .settings-detail-sheet .settings-toggle { min-height: 67px !important; padding: 8px 10px !important; border: 1px solid var(--line) !important; border-radius: 15px !important; background: rgb(4 20 38 / .44) !important; }
  .goals-sheet { max-height: calc(100dvh - 160px) !important; }
}