/* Portada móvil de Ajustes inspirada en la jerarquía visual de iOS.
   Solo afecta el menú inicial; los paneles internos y el escritorio conservan
   sus composiciones propias. */
@media (max-width: 768px) {
  body[data-v2-view='settings'] #settings-view.is-mobile-detail {
    touch-action: pan-y;
    overscroll-behavior-x: none;
  }

  body[data-v2-view='settings'] #settings-view.is-mobile-home .mv7-settings-mobile-home {
    padding-bottom: max(72px, env(safe-area-inset-bottom));
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-home > header { margin-bottom: 20px; }
  body[data-v2-view='settings'] .mv7-settings-mobile-home h2 {
    font-size: clamp(40px, 11vw, 48px); font-weight: 730; letter-spacing: -0.058em;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-search {
    height: 50px; margin-bottom: 27px; padding-inline: 15px; border: 0;
    border-radius: 17px; box-shadow: none;
  }
  :root[data-resolved-theme='light'] body[data-v2-view='settings'] .mv7-settings-mobile-search,
  :root[data-resolved-theme='light'] body[data-v2-view='settings'] #settings-view .mv7-settings-mobile-search input[role='searchbox'] {
    --settings-search-background: rgba(231, 232, 238, 0.78);
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-search svg {
    width: 22px; height: 22px; stroke-width: 1.65;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-search input {
    font-size: 16px; font-weight: 430;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups { gap: 27px; }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups > section > h3 { display: none; }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups > section > div {
    overflow: hidden; border: 1px solid color-mix(in srgb, var(--settings-material-border) 72%, transparent);
    border-radius: 19px; background: color-mix(in srgb, var(--settings-surface) 92%, transparent);
    box-shadow: 0 16px 42px rgba(31, 42, 52, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(26px) saturate(132%); -webkit-backdrop-filter: blur(26px) saturate(132%);
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups button {
    --settings-icon-from: #409cff; --settings-icon-to: #1467ef; --settings-icon-shadow: 29, 105, 225;
    min-height: 60px; grid-template-columns: 40px minmax(0, 1fr) auto 13px;
    gap: 12px; padding-inline: 14px;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups > section > div > button:not(:last-child)::after {
    right: 0; left: 66px; background: color-mix(in srgb, var(--settings-line) 82%, transparent);
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups button > svg:first-child {
    width: 40px; height: 40px; padding: 9px; border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 11px; color: #fff;
    background: linear-gradient(145deg, var(--settings-icon-from), var(--settings-icon-to));
    box-shadow: 0 7px 15px rgba(var(--settings-icon-shadow), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    stroke-width: 1.9;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups [data-settings-mobile-target='language'] {
    --settings-icon-from: #24b9ff; --settings-icon-to: #075bea;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups [data-settings-mobile-target='currency'],
  body[data-v2-view='settings'] .mv7-settings-mobile-groups [data-settings-mobile-target='whatsapp'] {
    --settings-icon-from: #54d76e; --settings-icon-to: #16a544; --settings-icon-shadow: 27, 169, 73;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups [data-settings-mobile-target='categories'] {
    --settings-icon-from: #ffad38; --settings-icon-to: #f56b08; --settings-icon-shadow: 242, 109, 12;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups [data-settings-mobile-target='backup'] {
    --settings-icon-from: #f6fbff; --settings-icon-to: #dbe7ff; --settings-icon-shadow: 34, 111, 217;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups [data-settings-mobile-target='backup'] > svg:first-child { color: #1789ef; }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups [data-settings-mobile-target='sync'] {
    --settings-icon-from: #9165ff; --settings-icon-to: #5d37dc; --settings-icon-shadow: 100, 58, 221;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups [data-settings-mobile-target='reports'] {
    --settings-icon-from: #ff536c; --settings-icon-to: #e8173e; --settings-icon-shadow: 224, 28, 66;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups :is([data-settings-mobile-target='privacy'], [data-settings-mobile-target='security']) {
    --settings-icon-from: #bbc0c9; --settings-icon-to: #858b96; --settings-icon-shadow: 73, 79, 91;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups [data-settings-mobile-target='notifications'] {
    --settings-icon-from: #ffbf4c; --settings-icon-to: #f18413; --settings-icon-shadow: 224, 126, 19;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups [data-settings-mobile-target='faq'] {
    --settings-icon-from: #4aaaff; --settings-icon-to: #2d75e7;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups button > svg:last-child {
    width: 13px; height: 13px; stroke-width: 2; opacity: 0.62;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups button strong {
    font-size: 16px; font-weight: 520; letter-spacing: -0.022em;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups button em {
    max-width: 132px; font-size: 14px; font-weight: 420;
  }
  body[data-v2-view='settings'] .mv7-settings-mobile-groups .mv7-settings-mobile-danger-link {
    --settings-icon-from: #ff6464; --settings-icon-to: #dc3037; --settings-icon-shadow: 220, 48, 55;
    min-height: 60px; border-radius: 19px;
  }
  :root[data-resolved-theme='dark'] body[data-v2-view='settings'] .mv7-settings-mobile-groups > section > div {
    border-color: rgba(255, 255, 255, 0.09); background: rgba(20, 23, 27, 0.86);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  }
}

@media (max-width: 768px) {
  body[data-v2-view='settings'] .mv7-settings-mobile-home > header {
    row-gap: 20px;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-exit {
    border: 0;
    background: transparent;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-search input[type='search']::-webkit-search-cancel-button {
    display: block !important;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    appearance: auto !important;
    -webkit-appearance: searchfield-cancel-button !important;
    opacity: 0.52;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups button {
    padding-block: 9px;
    transition: background-color 120ms ease, transform 120ms ease;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups button:active {
    background: color-mix(in srgb, var(--settings-text) 5%, transparent);
    transform: scale(0.985);
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups button > span {
    min-width: 0;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups button strong {
    font-size: 1.0625rem;
    line-height: 1.2;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups button em {
    max-width: min(34vw, 132px);
    font-size: 0.9375rem;
    line-height: 1.2;
  }

}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body[data-v2-view='settings'] .mv7-settings-mobile-groups button {
    transition: none;
  }
}

/* Refinamiento Apple: superficies neutras, tipografía regular y elevación
   mínima. Se mantiene color únicamente como señal de navegación. */
@media (max-width: 768px) {
  :root[data-resolved-theme='light'] body[data-v2-view='settings'] {
    --settings-bg: #f2f2f7;
    --settings-surface: #ffffff;
    --settings-line: rgba(60, 60, 67, 0.12);
    --settings-text: #000000;
    --settings-muted: #8e8e93;
  }

  :root[data-resolved-theme='light'] body[data-v2-view='settings'] .mv7-workspace {
    background: #f2f2f7;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-exit {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border-color: color-mix(in srgb, var(--settings-line) 72%, transparent);
    background: color-mix(in srgb, var(--settings-surface) 70%, transparent);
    box-shadow: none;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-exit svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.65;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-search {
    height: 48px;
    border-radius: 14px;
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='settings']
    .mv7-settings-mobile-search,
  :root[data-resolved-theme='light']
    body[data-v2-view='settings']
    #settings-view
    .mv7-settings-mobile-search
    input[role='searchbox'] {
    --settings-search-background: #e5e5ea;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups {
    gap: 22px;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups > section > div {
    border: 0;
    border-radius: 18px;
    background: var(--settings-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.025);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups button {
    min-height: 58px;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups button > svg:first-child {
    border-color: rgba(255, 255, 255, 0.26);
    background: linear-gradient(155deg, var(--settings-icon-from), var(--settings-icon-to));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups button strong {
    font-size: 17px;
    font-weight: 450;
    letter-spacing: -0.025em;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups button em {
    color: var(--settings-muted);
    font-size: 15px;
    font-weight: 400;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups button > svg:last-child {
    width: 14px;
    height: 14px;
    color: #c7c7cc;
    opacity: 1;
    stroke-width: 1.65;
  }

  body[data-v2-view='settings']
    .mv7-settings-mobile-groups
    > section
    > div
    > button:not(:last-child)::after {
    height: 0.5px;
    background: var(--settings-line);
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups .mv7-settings-mobile-danger-link {
    min-height: 58px;
    border-radius: 18px;
    box-shadow: none;
  }

  :root[data-resolved-theme='dark']
    body[data-v2-view='settings']
    .mv7-settings-mobile-groups
    > section
    > div {
    border: 0;
    background: #1c1c1e;
    box-shadow: none;
  }

  :root[data-resolved-theme='dark']
    body[data-v2-view='settings']
    .mv7-settings-mobile-groups
    button
    > svg:last-child {
    color: #636366;
  }
}

@media (max-width: 768px) {
  body[data-v2-view='settings'] .mv7-settings-mobile-exit {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-v2-view='settings'] .mv7-settings-mobile-groups [hidden] {
    display: none !important;
  }

  :root[data-resolved-theme='dark'] body[data-v2-view='settings'] {
    --settings-bg: #000000;
    --settings-surface: #1c1c1e;
    --settings-line: #38383a;
    --settings-muted: #98989d;
    --settings-search-background: #1c1c1e;
    background: #000000;
  }

  :root[data-resolved-theme='dark'] body[data-v2-view='settings'] .mv7-workspace {
    background: #000000;
  }

  :root[data-resolved-theme='dark']
    body[data-v2-view='settings']
    :is(.mv7-settings-mobile-search, .mv7-settings-mobile-groups > section > div) {
    border-color: transparent;
    background: #1c1c1e;
    box-shadow: none;
  }

  :root[data-resolved-theme='dark']
    body[data-v2-view='settings']
    #settings-view
    .mv7-settings-mobile-search
    input[role='searchbox'] {
    background: #1c1c1e !important;
    background-color: #1c1c1e !important;
  }

  :root[data-resolved-theme='dark']
    body[data-v2-view='settings']
    .mv7-settings-mobile-groups
    button
    em {
    color: #98989d;
  }

  :root[data-resolved-theme='dark']
    body[data-v2-view='settings']
    .mv7-settings-mobile-groups
    .mv7-settings-mobile-danger-link {
    border-color: transparent;
    background: #1c1c1e;
    box-shadow: none;
  }
}