/* ============================================================
   APEX — ACCOUNT & CONTROL CENTER ("Configuración")
   Diálogo grande e integrado en escritorio (sidebar de categorías +
   contenido, visible a la vez — nunca un dashboard de tarjetas
   sueltas); hoja ("sheet") que se despliega desde abajo sin cubrir
   toda la pantalla en móvil, con navegación de dos niveles
   (categorías → contenido) y "volver" en vez de un panel que hay que
   cerrar a mano.

   Reutiliza los tokens de base.css (color, tipografía, espaciado,
   sombra): no define paleta propia, así que se ve bien en claro y en
   oscuro sin ningún bloque @media(prefers-color-scheme) aquí — igual
   que el resto de la app fuera de max.css.
   ============================================================ */

/* z-index 2610/2611, no 920/921: por encima de .bottom-nav (1500,
   progress.css) y del drawer móvil abierto (2000, progress.css) —
   igual que .tt-modal/.tt-modal-backdrop (tracker.css, 2600/2601) y
   por la misma razón: con 920/921 el nav inferior se pintaba ENCIMA
   de este modal en móvil incluso siendo "fullscreen" (@media
   max-width:760px más abajo), sin oscurecerse y con sus botones
   todavía recibiendo el toque. Por debajo de .coach-overlay (9999,
   app.css), que debe ganar siempre. */
.stg-backdrop{
  position:fixed; inset:0; z-index:2610;
  background:rgba(20,12,6,.46);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; user-select:none;
  transition:opacity .26s ease;
  touch-action:none; /* prevenir scroll en móvil incluso con overflow:hidden */
}
.stg-backdrop.is-open{
  opacity:1; pointer-events:auto; cursor:not-allowed;
}

.stg-modal{
  position:fixed; z-index:2611;
  top:7vh; left:50%; transform:translate(-50%, 10px) scale(.98);
  width:min(880px, 92vw); height:min(720px, 84vh);
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s cubic-bezier(.4,0,1,1), transform .22s cubic-bezier(.4,0,1,1), visibility 0s linear .2s;
}
.stg-modal.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0) scale(1);
  transition:opacity .24s var(--ease-out), transform .34s var(--ease-out);
}
.stg-grabber{ display:none; }

.stg-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:var(--muted);
  cursor:pointer; transition:background .14s ease, color .14s ease, transform .1s ease;
}
.stg-close:hover{ background:var(--surface3); color:var(--text); }
.stg-close:active{ transform:scale(.92); }
.stg-close:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }

/* ============================================================
   TRACK — en escritorio es solo el contenedor de las dos columnas
   (nav | contenido), visibles a la vez. En móvil, las dos panes se
   ponen una al lado de la otra al 100% de ancho cada una y este
   contenedor se desliza entre ellas (drill-down real, sin re-render).
   ============================================================ */
.stg-track{
  display:flex; flex:1; min-height:0; width:100%;
}

.stg-nav{
  width:264px; flex-shrink:0;
  background:var(--surface2); border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; overflow-y:auto;
}
.stg-nav-head{ padding:24px 22px 12px; }
.stg-nav-head h2{ margin:0; font-size:var(--text-h3-size); font-weight:var(--text-h3-weight); letter-spacing:var(--text-h3-ls); }

.stg-nav-list{ list-style:none; margin:0; padding:4px 12px 16px; display:flex; flex-direction:column; gap:1px; }
.stg-nav-item{
  display:flex; align-items:center; gap:11px;
  width:100%; text-align:left; border:none; background:transparent; color:var(--text);
  padding:10px 12px; border-radius:var(--r-sm); font-size:var(--text-body-sm-size);
  cursor:pointer; transition:background .13s ease, color .13s ease;
  position:relative;
}
.stg-nav-item svg:not(.stg-chev){ flex-shrink:0; color:var(--muted); transition:color .13s ease; }
.stg-nav-item span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stg-chev{ flex-shrink:0; color:var(--muted); opacity:0; transform:translateX(-2px); transition:opacity .13s ease, transform .13s ease; }
.stg-nav-item:hover{ background:var(--surface3); }
.stg-nav-item.active{ background:var(--surface); color:var(--text); font-weight:600; }
.stg-nav-item.active svg:not(.stg-chev){ color:var(--blue); }
.stg-nav-item:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }

/* Barra de acento a la izquierda del ítem activo, como un indicador de
   selección en vez de una tarjeta elevada: más discreto, más premium. */
.stg-nav-item.active::before{
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--blue);
}

.stg-content{
  flex:1; min-width:0; display:flex; flex-direction:column; min-height:0;
}
.stg-content-head{
  display:none; /* solo aparece como barra de navegación en móvil */
}
.stg-back{
  display:none;
}

.stg-body{ flex:1; overflow-y:auto; padding:8px clamp(24px,4vw,48px) 40px; }

/* Título de sección: en escritorio vive dentro del cuerpo (misma
   columna de contenido, sin barra propia); en móvil se sustituye por
   stg-content-title dentro de la cabecera fija. */
.stg-section-title{
  margin:22px 0 22px; font-size:var(--text-h2-size); font-weight:var(--text-h2-weight);
  letter-spacing:var(--text-h2-ls);
}

/* ============================================================
   GRUPOS Y FILAS — el patrón principal de contenido: título de grupo
   discreto + filas separadas por un divisor fino, en vez de tarjetas
   apiladas. Etiqueta y descripción a la izquierda, control a la
   derecha; toda la fila es un objetivo táctil cómodo.
   ============================================================ */
.stg-group{ margin-bottom:30px; }
.stg-group:last-child{ margin-bottom:8px; }
.stg-group-title{
  display:block; font-size:var(--text-label-size); font-weight:var(--text-label-weight);
  letter-spacing:var(--text-label-ls); text-transform:uppercase; color:var(--muted);
  margin:0 0 6px;
}
.stg-group-body{
  border-top:1px solid var(--border-soft);
}
.stg-group-body.is-flush{ border-top:none; }

.stg-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:15px 2px; border-bottom:1px solid var(--border-soft);
  min-height:52px;
}
.stg-row:last-child{ border-bottom:none; }
.stg-row.is-danger .stg-row-label{ color:var(--red); }
.stg-row.is-button{ cursor:pointer; transition:background .12s ease; border-radius:var(--r-sm); }
.stg-row.is-button:hover{ background:var(--surface2); }
.stg-row.is-stack{ flex-direction:column; align-items:stretch; gap:12px; }

.stg-row-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.stg-row-label{ font-weight:600; font-size:var(--text-body-sm-size); }
.stg-row-desc{ font-size:12.5px; color:var(--muted); line-height:1.45; max-width:56ch; }
.stg-row-desc code{ background:var(--surface3); padding:1px 5px; border-radius:5px; font-size:.94em; }
.stg-row-control{ flex-shrink:0; display:flex; align-items:center; gap:8px; }

.stg-empty{ color:var(--muted); font-size:var(--text-body-sm-size); padding:24px 2px; }
.stg-loading{ color:var(--muted); font-size:var(--text-body-sm-size); padding:18px 2px; }

.stg-pending{
  display:flex; gap:9px; align-items:flex-start;
  background:var(--amber-soft); border:1px solid var(--amber-soft-border);
  color:var(--text); border-radius:var(--r-md); padding:12px 14px; margin:2px 0 22px;
  font-size:12.5px; line-height:1.5;
}
.stg-pending svg{ flex-shrink:0; margin-top:1px; color:var(--amber); }

.stg-inline-link{
  background:none; border:none; padding:0; margin:0; color:var(--blue);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer; font:inherit;
}
.stg-inline-link:hover{ opacity:.82; }

/* ============================================================
   SWITCH — control binario propio (tema, preferencias). Reemplaza los
   pares de botones "activo/inactivo" por un solo gesto reconocible.
   ============================================================ */
.stg-switch{
  --w:42px; --h:24px; --pad:3px;
  position:relative; width:var(--w); height:var(--h); border-radius:999px;
  background:var(--surface3); border:1px solid var(--border);
  cursor:pointer; flex-shrink:0; padding:0;
  transition:background .18s ease, border-color .18s ease;
}
.stg-switch::after{
  content:''; position:absolute; top:var(--pad); left:var(--pad);
  width:calc(var(--h) - var(--pad)*2); height:calc(var(--h) - var(--pad)*2);
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .2s cubic-bezier(.34,1.4,.64,1);
}
.stg-switch[aria-checked="true"]{ background:var(--blue); border-color:var(--blue); }
.stg-switch[aria-checked="true"]::after{ transform:translateX(calc(var(--w) - var(--h))); }
.stg-switch:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.stg-switch:active::after{ width:calc(var(--h) - var(--pad)*2 + 3px); }

/* ============================================================
   FORMULARIOS / BOTONES dentro de Settings — mismos .btn de base.css,
   sólo ajustes de layout.
   ============================================================ */
.stg-form{ display:flex; flex-direction:column; gap:6px; max-width:360px; width:100%; }
.stg-form-msg{ font-size:var(--text-body-sm-size); min-height:18px; }
.stg-form-msg.is-error{ color:var(--red); }
.stg-form-msg.is-success{ color:var(--green); }
.stg-link-row{ display:flex; gap:8px; flex-wrap:wrap; }

.btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.btn.is-loading::after{
  content:''; position:absolute; inset:0; margin:auto; width:15px; height:15px;
  border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:stgSpin .6s linear infinite;
}
.btn.secondary.is-loading::after{ border:2px solid var(--border); border-top-color:var(--text); }
@keyframes stgSpin{ to{ transform:rotate(360deg); } }

/* Perfil / overview */
.stg-overview-head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.stg-avatar{
  width:50px; height:50px; border-radius:50%; object-fit:cover;
  border:1px solid var(--border);
}
.stg-avatar-initial{
  display:flex; align-items:center; justify-content:center;
  background:var(--surface3); font-weight:700; font-size:19px; color:var(--text);
}
.stg-overview-id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.stg-overview-name{ font-weight:650; font-size:var(--text-h4-size); overflow:hidden; text-overflow:ellipsis; }
.stg-overview-email{ color:var(--muted); font-size:var(--text-body-sm-size); overflow:hidden; text-overflow:ellipsis; }
.stg-plan-chip{
  margin-left:auto; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:650;
  background:var(--surface3); border:1px solid var(--border); flex-shrink:0;
}
.stg-plan-chip.is-pro{ background:var(--blue-soft); border-color:var(--blue-soft-border); }
.stg-plan-chip.is-max{ background:rgba(214,178,94,.16); border-color:rgba(214,178,94,.4); color:#9c7a1e; }
:root:not([data-theme="light"]) .stg-plan-chip.is-max{ color:#e2c876; }
:root[data-theme="dark"] .stg-plan-chip.is-max{ color:#e2c876; }

.stg-usage-inline{ margin-bottom:22px; }

.stg-shortcut-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px;
}
.stg-shortcut{
  text-align:left; background:transparent; border:1px solid var(--border-soft);
  border-radius:var(--r-md); padding:14px 16px; cursor:pointer; display:flex; flex-direction:column; gap:4px;
  transition:background .13s ease, border-color .13s ease;
}
.stg-shortcut:hover{ background:var(--surface2); border-color:var(--border); }
.stg-shortcut:active{ transform:scale(.99); }
.stg-shortcut:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.stg-shortcut-title{ font-weight:600; font-size:var(--text-body-sm-size); }
.stg-shortcut-desc{ font-size:12.5px; color:var(--muted); }

.stg-profile-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }

/* ============================================================
   TRANSICIÓN ENTRE SECCIONES — sutil, respeta reduced-motion.
   ============================================================ */
.stg-section{ animation:stgSectionIn .18s cubic-bezier(.2,.7,.3,1) both; }
@keyframes stgSectionIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .stg-section{ animation:none; }
}

/* ============================================================
   MÓVIL — hoja ("sheet") que sube desde abajo y NO cubre toda la
   pantalla; navegación de dos niveles con desplazamiento horizontal
   entre "categorías" y "contenido" en vez de pestañas o un panel que
   haya que cerrar a mano.
   ============================================================ */
@media (max-width:760px){
  .stg-modal{
    top:auto; bottom:0; left:0; right:0;
    transform:translateY(100%);
    width:100%; max-width:100%; height:min(88dvh, 780px);
    border-radius:20px 20px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
    /* Cierre: rápido y directo, sin rebote — un rebote AL CERRAR se lee
       como la hoja "regateando" antes de irse, que es justo lo que hacía
       sentir esta animación torpe/boba. */
    transition:opacity .16s cubic-bezier(.4,0,1,1), transform .22s cubic-bezier(.4,0,1,1), visibility 0s linear .18s;
  }
  /* Apertura: la curva "back-out" da el asentamiento físico que sí tiene
     una hoja real al soltarse (un pelín de rebote al final, nunca de
     salida) — la misma sensación de apple-design para sheets/tarjetas,
     en vez de la deceleración plana de antes que no comunicaba peso. */
  .stg-modal.is-open{
    transform:translateY(0);
    transition:opacity .22s var(--ease-out), transform .42s cubic-bezier(.34,1.56,.64,1);
  }
  .stg-grabber{
    display:block; width:36px; height:4px; border-radius:999px;
    background:var(--border); margin:10px auto 2px; flex-shrink:0;
  }
  .stg-close{ top:12px; right:12px; }

  .stg-track{
    width:200%; transition:transform .26s var(--ease-out);
    will-change:transform;
  }
  .stg-modal[data-mobile-view="detail"] .stg-track{ transform:translateX(-50%); }

  .stg-nav, .stg-content{ width:50%; flex-shrink:0; min-width:0; }
  .stg-nav{ border-right:none; }
  .stg-nav-head{ padding:6px 20px 8px; }
  .stg-nav-head h2{ font-size:20px; }
  .stg-nav-list{ padding:2px 12px 20px; }
  .stg-nav-item{ padding:13px 12px; min-height:48px; }
  .stg-chev{ opacity:1; transform:none; }
  .stg-nav-item.active::before{ display:none; }
  .stg-nav-item.active{ background:transparent; font-weight:500; }

  .stg-content-head{
    display:flex; align-items:center; gap:4px; flex-shrink:0;
    padding:4px 8px; border-bottom:1px solid var(--border-soft);
    min-height:48px;
  }
  .stg-back{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    background:transparent; border:none; color:var(--text); cursor:pointer;
    transition:background .12s ease;
  }
  .stg-back:hover{ background:var(--surface3); }
  .stg-back:active{ transform:scale(.92); }
  .stg-content-title{ margin:0; font-size:16px; font-weight:650; }
  .stg-section-title{ display:none; } /* el título ya vive en la cabecera móvil */

  .stg-body{ padding:6px 18px 32px; -webkit-overflow-scrolling:touch; }
  .stg-row{ padding:14px 2px; min-height:56px; }
  .stg-shortcut-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:400px){
  .stg-shortcut-grid{ grid-template-columns:1fr; }
}

/* Foco atrapado: cuando el modal está abierto, el resto de la app
   queda inerte para lectores de pantalla y teclado. El backdrop
   bloquea interacción y el body no puede scrollear. */
body.stg-open{
  overflow:hidden !important;
  -webkit-overflow-scrolling:auto !important;
}