/* ============================================================
   APEX — REFINAMIENTO UX/UI 2026.3

   Esta capa no crea una segunda interfaz. Ajusta el sistema existente
   después de todas las hojas de producto para recuperar profundidad,
   materialidad y jerarquía en los puntos donde el usuario necesita
   distinguir estructura, contenido y acción.

   Principios:
   - el indigo sigue siendo el único acento de marca;
   - el vidrio queda reservado a chrome flotante y superficies encima
     del contenido;
   - las tarjetas de datos no ganan decoración por defecto;
   - reduced motion/transparency/contrast tienen una salida explícita.
   ============================================================ */

/* ------------------------------------------------------------
   APP SHELL — una base con profundidad mínima, no un fondo decorativo.
   ------------------------------------------------------------ */
.app-shell{
  background:
    radial-gradient(880px 360px at 72% -12%, color-mix(in srgb, var(--blue) 5%, transparent), transparent 70%),
    var(--bg);
}

@media (min-width:901px){
  .app-shell::before{
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    border-right-color:color-mix(in srgb, var(--text) 8%, transparent);
    backdrop-filter:blur(18px) saturate(135%);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
  }

  .sidebar{
    background:transparent;
  }
}

/* El activo de la barra lateral lo declara UNA vez brand-evolution.css
   (superficie seleccionada). Aquí había un segundo anillo que, sumado a
   las esquinas vivas de aquella capa, pintaba un rectángulo que se leía
   como un foco perdido. */

/* El workspace y las superficies de lectura son los lugares donde la
   elevación informa jerarquía. Las listas de filas siguen planas. */
.app-shell .card-workspace{
  /* Apoyado: borde, sin sombra — como el formulario del analizador de
     Investment Mode, que es el mismo trabajo. */
  background:var(--surface);
  box-shadow:none;
}

/* Una tarjeta de Intelligence NO es pulsable entera: lo pulsable es «¿Por
   qué APEX piensa esto?». Levantarla al pasar el ratón prometía un clic
   que no existe. Lo que sí cambia es el estado ABIERTO: la evidencia
   desplegada gana un filo índigo y algo más de altura, porque ahí el
   usuario está leyendo de verdad. */
.app-shell .ix-card,
.app-shell .ix-pattern{
  background:var(--surface);
  border-color:var(--border-soft);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.app-shell .ix-pattern.is-open{
  border-color:color-mix(in srgb, var(--blue) 24%, var(--border));
  box-shadow:var(--shadow-sm);
}

/* Markets: un poco más de materialidad en el resumen y una respuesta
   táctil clara en las filas, sin convertir la vista de datos en un muro
   de tarjetas. */
.mk2-status{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--border) 78%,var(--blue-soft-border));
  background:color-mix(in srgb,var(--surface) 97%,var(--blue-soft) 3%);
}
.mk2-status > *{position:relative;}
.mk2-pulse-item:active{transform:translateY(0) scale(.985);}
.mkw-main{
  border-radius:var(--r-xs);
  transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.mkw-main:hover{background:color-mix(in srgb,var(--surface2) 60%,transparent);}
.mkw-main:active{transform:translateY(1px);}
.mkw-main:focus-visible{box-shadow:var(--shadow-focus);}
.mkw-toggle:active{transform:scale(.95);}
.mkw-row.is-open .mkw-main{background:color-mix(in srgb,var(--surface2) 48%,transparent);}

/* ------------------------------------------------------------
   CHROME FLOTANTE — material encima del contenido.
   ------------------------------------------------------------ */
.mobile-topbar,
.bottom-nav{
  background:color-mix(in srgb, var(--navblur-bg) 86%, transparent);
  border-color:color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:var(--shadow-sm);
}

@media (max-width:900px){
  .mobile-topbar{
    backdrop-filter:blur(20px) saturate(165%);
    -webkit-backdrop-filter:blur(20px) saturate(165%);
  }

  /* La tab bar se separa del borde del viewport y gana una sombra leve:
     sigue reservando su altura, pero ahora se lee como una herramienta
     flotante sobre el lienzo. */
  .bottom-nav{
    left:10px;
    right:10px;
    bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
    border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius:var(--r-xl);
    backdrop-filter:blur(24px) saturate(175%);
    -webkit-backdrop-filter:blur(24px) saturate(175%);
  }

  main{
    padding-bottom:calc(var(--bn-h) + env(safe-area-inset-bottom,0px) + var(--space-7) + 12px);
  }

  /* EL ACTIVO EN LA BARRA INFERIOR: un indicador en píldora detrás del
     icono, no la caja del `.tab.active` de escritorio. En una barra de
     cinco destinos la caja entera competía con sus vecinos; la píldora
     marca dónde estás y deja respirar la etiqueta. Entra creciendo desde
     el centro — el cambio de destino se VE ocurrir. */
  .bottom-nav .tab.active{background:transparent;box-shadow:none;}
  .bn-item{isolation:isolate;border-radius:var(--r-md);}
  .bn-item::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:7px;
    left:50%;
    width:48px;
    height:28px;
    margin-left:-24px;
    border-radius:var(--r-pill);
    background:var(--blue-soft);
    opacity:0;
    transform:scaleX(.5);
    transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-out);
  }
  .bn-item.active::before{opacity:1;transform:scaleX(1);}
}

/* La acción primaria gana una sombra contenida y el control secundario
   permanece visualmente más ligero. */
.app-shell .btn:not(.secondary){
  box-shadow:0 8px 18px color-mix(in srgb, var(--blue) 18%, transparent);
}
.app-shell .btn:not(.secondary):hover:not(:disabled):not(.is-loading){
  box-shadow:0 10px 24px color-mix(in srgb, var(--blue) 24%, transparent);
}

/* ------------------------------------------------------------
   PUBLIC PRODUCT PAGES — el hero recibe una atmósfera editorial
   discreta y las tarjetas solo elevan al interactuar.
   ------------------------------------------------------------ */
.lp-page{
  background:
    radial-gradient(960px 360px at 78% -6%, color-mix(in srgb, var(--blue) 5%, transparent), transparent 72%),
    var(--lp-canvas);
}

.lp-pagehero{
  position:relative;
  isolation:isolate;
}
.lp-pagehero::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  width:min(58vw,720px);
  height:clamp(260px,30vw,430px);
  pointer-events:none;
  background:radial-gradient(circle at 72% 22%, color-mix(in srgb, var(--lp-accent) 11%, transparent), transparent 66%);
}

.lp-card,
.lp-plan,
.lp-next-card,
.lp-ui,
.lp-chain-card,
.lp-msg.is-apex{
  box-shadow:0 18px 42px -34px color-mix(in srgb, var(--lp-ink) 38%, transparent);
}

.lp-card,
.lp-plan,
.lp-next-card{
  transition:border-color .2s var(--lp-ease), transform .2s var(--lp-ease), box-shadow .2s var(--lp-ease);
}
.lp-card:hover,
.lp-plan:hover,
.lp-next-card:hover{
  border-color:var(--lp-line-2);
  box-shadow:0 20px 42px -30px color-mix(in srgb, var(--lp-ink) 34%, transparent);
}

/* La barra pública es el único cristal persistente: una capa ligera
   encima del contenido, con suficiente opacidad para mantener contraste. */
.lp-nav{
  padding:10px var(--lp-gutter) 0;
  background:transparent;
  border-bottom:0;
}
.lp-nav.is-scrolled{padding-bottom:10px;}
.lp-nav-inner{
  padding:12px clamp(16px,2.6vw,30px);
  border:1px solid color-mix(in srgb, var(--lp-line) 86%, transparent);
  border-radius:18px;
  background:color-mix(in srgb, var(--lp-canvas) 84%, transparent);
  box-shadow:0 12px 30px -22px color-mix(in srgb, var(--lp-ink) 38%, transparent);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
}
.lp-nav.is-scrolled .lp-nav-inner{
  background:color-mix(in srgb, var(--lp-canvas) 94%, transparent);
  box-shadow:0 18px 36px -24px color-mix(in srgb, var(--lp-ink) 46%, transparent);
}

@media (max-width:900px){
  .lp-nav{padding-inline:12px;}
  .lp-nav-inner{border-radius:16px;}
}

/* ------------------------------------------------------------
   ACCESSIBILITY / PERFORMANCE
   ------------------------------------------------------------ */
@media (prefers-reduced-transparency:reduce){
  .app-shell::before,
  .mobile-topbar,
  .bottom-nav,
  .lp-nav-inner,
  .lp-drawer{
    background:var(--surface) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

@media (prefers-contrast:more){
  .app-shell .tab.active,
  .mobile-topbar,
  .bottom-nav,
  .lp-nav-inner,
  .lp-card,
  .lp-plan,
  .lp-next-card{
    border-color:var(--text);
  }
}

@media (prefers-reduced-motion:reduce){
  .bn-item::before,
  .app-shell .ix-card,
  .app-shell .ix-pattern,
  .mkw-main,
  .mkw-toggle,
  .lp-card,
  .lp-plan,
  .lp-next-card{
    transition:none;
  }
  .lp-card:hover,
  .lp-plan:hover,
  .lp-next-card:hover{
    transform:none;
  }
}

/* The main header keeps language within reach in both layouts. */
.app-locale{display:inline-flex;flex-shrink:0;gap:2px;padding:3px;border:1px solid var(--border-soft);border-radius:var(--r-sm);background:var(--surface2);}
.app-locale button{width:auto;min-width:36px;min-height:32px;padding:4px 8px;border:1px solid transparent;border-radius:calc(var(--r-sm) - 3px);background:transparent;color:var(--muted);font:600 12px/1 var(--font-body);letter-spacing:.04em;cursor:pointer;}
.app-locale button:hover{color:var(--text);}
.app-locale button[aria-pressed="true"]{color:var(--blue);background:var(--surface);border-color:var(--border-soft);box-shadow:var(--shadow-xs);}
.app-locale button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
@media(min-width:901px){
  .app-topbar{display:flex;justify-content:flex-end;padding:8px var(--space-6);position:sticky;top:0;z-index:40;}
  .app-topbar > :not(.app-locale){display:none;}
}
@media(max-width:900px){
  .app-topbar .app-locale{margin-left:2px;}
}