/* ============================================================
   APEX — Tokens de diseño, temas claro/oscuro, reset y tipografía base
   Extraído de index.html sin cambios de estilo. El ORDEN de
   carga de las hojas (ver <link> en index.html) es significativo:
   las reglas posteriores refinan a las anteriores.
   ============================================================ */

:root{
  --bg:#F5EFE6;
  --surface:#FFFDF9;
  --surface2:#EFE6D8;
  --surface3:#E8DCC8;
  --border:rgba(41,20,10,.12);
  --border-soft:rgba(41,20,10,.08);
  --text:#231208;
  --muted:#6b5a4a;
  --muted2:#a7947e;

  --green:#0f9d63;   --green-soft:#e7f9f0; --green-soft-border:#c3eed9;
  --red:#9B0F21;     --red-soft:#f6e2df;   --red-soft-border:#ecc4bd;
  --amber:#b5650a;   --amber-soft:#fdf0e1; --amber-soft-border:#f4dbb0;
  --blue:#C8102E;    --blue-soft:#f8e2e1;  --blue-soft-border:#f0c3c0;
  --violet:#7c5cbf;  --violet-soft:#f1ebf9; --violet-soft-border:#ddc9ee;

  /* 'Poppins' salió de las dos pilas: siempre iba después de
     Instrument Sans / Inter, que se cargan desde la misma hoja de
     Google Fonts, así que era inalcanzable y solo engordaba la
     descarga inicial (ver el <link> de fuentes en index.html). */
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Instrument Sans','Inter',sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',sans-serif;
  --font-mono:'SF Mono',ui-monospace,'JetBrains Mono',monospace;

  /* ============================================================
     SHADOWS — escala única, muy suave, inspirada en Apple/Linear:
     baja opacidad + blur amplio, sin spread duro. Todo box-shadow
     del sistema referencia una de estas variables.
     ============================================================ */
  --shadow-xs:0 1px 1px rgba(35,18,8,.04), 0 1px 2px rgba(35,18,8,.03);
  --shadow-sm:0 1px 2px rgba(35,18,8,.04), 0 4px 10px rgba(35,18,8,.045);
  --shadow-md:0 2px 6px rgba(35,18,8,.04), 0 14px 28px rgba(35,18,8,.07);
  --shadow-lg:0 4px 12px rgba(35,18,8,.05), 0 28px 56px rgba(35,18,8,.12);
  --shadow-focus:0 0 0 3.5px var(--blue-soft);

  /* RADIOS — misma escala para todo el sistema */
  --r-xl:28px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --r-xs:8px;
  --r-2xs:6px;
  --r-pill:980px;

  /* ESPACIADO — escala de 4px, usada en todo margin/padding */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:64px; --space-11:80px; --space-12:96px;
  --space-page-top:56px; --space-page-bottom:120px;

  /* TIPOGRAFÍA — jerarquía cerrada: display/h1/h2/h3/h4/body/caption/label */
  --text-display-size:clamp(28px,4.2vw,40px); --text-display-weight:700; --text-display-lh:1.12; --text-display-ls:-0.025em;
  --text-h1-size:28px;   --text-h1-weight:700;  --text-h1-lh:1.2;  --text-h1-ls:-0.02em;
  --text-h2-size:22px;   --text-h2-weight:700;  --text-h2-lh:1.25; --text-h2-ls:-0.015em;
  --text-h3-size:18px;   --text-h3-weight:650;  --text-h3-lh:1.3;  --text-h3-ls:-0.01em;
  --text-h4-size:15px;   --text-h4-weight:600;  --text-h4-lh:1.4;  --text-h4-ls:-0.005em;
  --text-body-size:15px; --text-body-weight:400; --text-body-lh:1.6;
  --text-body-sm-size:13.5px; --text-body-sm-weight:400; --text-body-sm-lh:1.55;
  --text-caption-size:12.5px; --text-caption-weight:500; --text-caption-lh:1.5;
  --text-label-size:11px; --text-label-weight:600; --text-label-lh:1.4; --text-label-ls:.04em;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  /* Un único punto con ligerísimo overshoot ("damping ~0.85"), reservado
     para el instante en que algo LLEGA a su sitio — nunca para bucles
     ambientales. Todo lo demás sigue en --ease (crítico, sin rebote). */
  --ease-arrive:cubic-bezier(0.3,1.4,0.5,1);
  --dur-fast:.15s;
  --dur-med:.25s;
  --navblur-bg:rgba(245,239,230,.86);
  --report-nav-gap:14px;
  --report-nav-border:rgba(41,20,10,.10);
  --report-nav-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.5);
  --report-nav-shadow-scrolled:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-theme="dark"]{
  --bg:#150d0a;
  --surface:#1e140f;
  --surface2:#241a13;
  --surface3:#2b1f17;
  --border:rgba(245,239,230,.09);
  --border-soft:rgba(245,239,230,.065);
  --text:#F5EFE6;
  --muted:#c9baa8;
  --muted2:#8a7a68;

  --green:#1fbf7a;   --green-soft:rgba(31,191,122,.12);  --green-soft-border:rgba(31,191,122,.28);
  --red:#e2495a;     --red-soft:rgba(226,73,90,.14);     --red-soft-border:rgba(226,73,90,.3);
  --amber:#e2a13b;   --amber-soft:rgba(226,161,59,.12);  --amber-soft-border:rgba(226,161,59,.28);
  --blue:#e2384f;    --blue-soft:rgba(226,56,79,.16);    --blue-soft-border:rgba(226,56,79,.34);
  --violet:#a98add;  --violet-soft:rgba(169,138,221,.16); --violet-soft-border:rgba(169,138,221,.34);

  --shadow-xs:0 1px 1px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.22);
  --shadow-md:0 2px 6px rgba(0,0,0,.24), 0 14px 28px rgba(0,0,0,.32);
  --shadow-lg:0 4px 12px rgba(0,0,0,.3), 0 28px 56px rgba(0,0,0,.45);
  --shadow-focus:0 0 0 3.5px var(--blue-soft);

  --navblur-bg:rgba(21,13,10,.86);
  --report-nav-border:rgba(245,239,230,.09);
  --report-nav-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.04);
  --report-nav-shadow-scrolled:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.05);
}
html{transition:background var(--dur-med) var(--ease-out);}
body{transition:background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:0.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important;}
  /* Excepción: los indicadores de "esto sigue en proceso" (spinners,
     shimmer de skeletons, punto en vivo) no son decorativos — son la
     única señal de que APEX sigue trabajando. Congelarlos del todo
     deja la pantalla con pinta de colgada, justo lo que reduced-motion
     no debería causar. Se mantienen vivos, sin traslaciones ni
     rebotes, igual de discretos que el resto del sistema. */
  .auth-gate .spin,.btn.is-loading::after,.dot,.av-live-dot,.av-status-msg::before,
  .apex-skel-line,.apex-skel-circle,.tp-skel-line{
    animation-duration:.9s !important;animation-iteration-count:infinite !important;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;}
/* overflow-x:hidden vive SOLO en <html>: si también se declara en <body>,
   ambos elementos abren su propio contenedor de scroll (overflow-x no
   "visible" implica overflow-y:auto por spec). El de <body> nunca llega a
   desplazarse de verdad (su caja siempre mide lo mismo que su contenido),
   así que cualquier position:sticky dentro de él —como .sidebar— calcula
   su ancla contra esa caja fantasma en vez del scroller real de la
   página, y por eso la barra lateral "se iba" con el scroll. */
html{overflow-x:hidden;}
body{min-height:100vh;}
/* Aplicado a html+body mientras el drawer móvil está abierto, para que
   el contenido detrás del overlay no se desplace con el touch-scroll. */
html.no-scroll,html.no-scroll body{overflow:hidden;height:100%;}
img,svg{max-width:100%;}
::selection{background:var(--blue);color:#fff;}
a{color:inherit;}
button{font-family:var(--font-body);}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:5px;background-clip:padding-box;}
::-webkit-scrollbar-track{background:transparent;}

main{max-width:760px;margin:0 auto;padding:var(--space-page-top) var(--space-6) var(--space-page-bottom);}
/* Panel y Market ya corrían a 1180px (ver app.css); el resto de la app
   se quedaba en los 760px de la regla de arriba, una escala visiblemente
   más angosta para la misma app. Un solo ancho para las ocho vistas. */
@media (min-width:901px){ main{max-width:1180px;} }
.view{display:none;}
.view.active{display:block;animation:fadein .35s var(--ease);}
@keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Mismo patrón de cabecera que Panel/Market (.d2-eyebrow+.d2-title,
   .mk2-kicker+.mk2-title): un kicker mono en mayúsculas sobre un título
   grande con clamp(). .page-title ya lo usan Fundamental, Historial,
   Progreso, Trade Tracker y Learning — solo hacía falta escalarlo y
   darle un kicker que reutilizar, no una clase nueva por vista. */
.page-kicker{
  display:block;margin-bottom:8px;color:var(--muted2);
  font-family:var(--font-mono);font-size:var(--text-label-size);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.page-title{font-family:var(--font-display);font-size:clamp(24px,3.2vw,38px);font-weight:var(--text-h1-weight);line-height:var(--text-h1-lh);letter-spacing:var(--text-h1-ls);margin:0 0 var(--space-2);}
p.page-sub{color:var(--muted);font-size:var(--text-body-size);line-height:var(--text-body-lh);margin:0 0 var(--space-9);max-width:480px;}

.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-7);box-shadow:var(--shadow-sm);}
.card + .card{margin-top:var(--space-5);}

/* ============================================================
   ANALYSIS DOC — cada bloque (opinión, riesgo, plan, técnico,
   dimensiones…) es su propio capítulo: superficie, borde y sombra
   independientes, con mucho aire alrededor. Nada de una sola caja
   continua separada por líneas — eso es lo que hacía sentir el
   análisis como un dashboard denso. Ahora cada sección respira
   antes y después, como capítulos de una auditoría, no filas de
   una tabla.
   ============================================================ */
.analysis-doc{display:flex;flex-direction:column;gap:var(--space-7);margin-top:var(--space-8);}
.doc-section{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);}
@media(max-width:480px){.doc-section{border-radius:var(--r-md);}}
@media(max-width:640px){.analysis-doc{gap:var(--space-6);margin-top:var(--space-6);}}
.doc-image-card{padding:var(--space-3);overflow:hidden;}
.doc-image-card img{display:block;width:100%;max-height:560px;object-fit:contain;border-radius:calc(var(--r-lg) - var(--space-3));background:var(--surface2);}

.dropzone{
  border:1.5px dashed var(--border);border-radius:var(--r-md);padding:48px 24px;text-align:center;
  cursor:pointer;background:var(--surface2);
}
.dropzone:hover,.dropzone.drag{border-color:var(--blue);background:var(--blue-soft);}
.dropzone .icon{
  width:52px;height:52px;border-radius:50%;background:var(--surface);border:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 16px;box-shadow:var(--shadow-sm);
}
.dropzone .main-txt{font-size:var(--text-body-size);font-weight:500;}
.dropzone .sub-txt{font-size:var(--text-caption-size);color:var(--muted2);margin-top:6px;}
.preview-wrap{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border-soft);}
.preview-wrap img{width:100%;display:block;max-height:360px;object-fit:contain;background:#0b0b0d;}
.preview-wrap .remove-btn{
  position:absolute;top:12px;right:12px;background:rgba(255,255,255,0.92);border:1px solid rgba(0,0,0,0.12);
  color:#111;border-radius:var(--r-pill);padding:6px 13px;font-size:var(--text-caption-size);font-weight:500;cursor:pointer;
  backdrop-filter:blur(6px);transition:background .15s;
}
.preview-wrap .remove-btn:hover{background:#fff;}

label.field-label{display:block;font-size:var(--text-caption-size);color:var(--muted);margin:var(--space-6) 0 var(--space-2);font-weight:var(--text-caption-weight);}

/* ============================================================
   INPUT SYSTEM — textarea / input / select comparten una sola
   definición base. Estados: focus, error, success, loading,
   disabled. Todo referencia los tokens de color/radio/espaciado.
   ============================================================ */
textarea,input[type=text],input[type=email],input[type=password],select{
  width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);padding:11px var(--space-3);font-family:var(--font-body);font-size:var(--text-body-sm-size);resize:vertical;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
/* Placeholders largos (ej. "Busca cualquier activo: Apple, AAPL, NVDA...")
   se cortaban en seco a mitad de letra en pantallas angostas — con
   overflow/nowrap ya heredado del input, solo faltaba el "…". */
input[type=text],input[type=email],input[type=password]{text-overflow:ellipsis;}
textarea:hover:not(:disabled):not(:focus),input[type=text]:hover:not(:disabled):not(:focus),input[type=email]:hover:not(:disabled):not(:focus),input[type=password]:hover:not(:disabled):not(:focus),select:hover:not(:disabled):not(:focus){border-color:var(--muted2);}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:var(--shadow-focus);}
textarea::placeholder,input::placeholder{color:var(--muted2);}
textarea:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed;background:var(--surface3);}

/* Safari iOS hace zoom automático al enfocar cualquier campo con
   font-size por debajo de 16px. 16px es el mínimo que evita ese zoom,
   así que en móvil es un piso, no una preferencia visual — el resto
   del diseño (padding, colores, radios) no cambia. Misma especificidad
   que la regla base de arriba (más los tipos de input que no cubre)
   para que gane por orden de cascada, no por !important. */
@media(max-width:900px){
  textarea,input[type=text],input[type=email],input[type=password],select,
  input:not([type]),input[type=search],input[type=tel],input[type=number],
  input[type=url],input[type=date]{
    font-size:16px;
  }
}

/* Error / success — se activan agregando .is-error / .is-success al input,
   o al wrapper .field (para casos con mensaje de ayuda debajo). */
textarea.is-error,input.is-error,select.is-error,
.field.is-error textarea,.field.is-error input,.field.is-error select{
  border-color:var(--red);background:var(--red-soft);
}
textarea.is-error:focus,input.is-error:focus,select.is-error:focus{border-color:var(--red);box-shadow:0 0 0 3.5px var(--red-soft-border);}
textarea.is-success,input.is-success,select.is-success,
.field.is-success textarea,.field.is-success input,.field.is-success select{
  border-color:var(--green);background:var(--green-soft);
}
textarea.is-success:focus,input.is-success:focus,select.is-success:focus{border-color:var(--green);box-shadow:0 0 0 3.5px var(--green-soft-border);}
.field-hint{display:flex;align-items:center;gap:6px;font-size:var(--text-caption-size);color:var(--muted);margin-top:var(--space-2);}
.field-hint.is-error{color:var(--red);}
.field-hint.is-success{color:var(--green);}

/* Loading — input deshabilitado visualmente con un shimmer sutil,
   útil mientras se autocompletan campos o se valida en el servidor. */
textarea.is-loading,input.is-loading,select.is-loading{
  color:transparent;pointer-events:none;position:relative;
  background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 37%,var(--surface2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;
}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}

/* ============================================================
   ACCESSIBILITY & USABILITY ENHANCEMENTS
   ============================================================ */

/* Focus visible consistente para todos los elementos interactivos */
*:focus-visible{
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-xs);
}

/* Excepción: elementos que ya tienen su propio focus-visible */
.btn:focus-visible,
.tab:focus-visible,
.authm-pw-toggle:focus-visible,
.authm-pw-field input:focus-visible,
.authm-step input:focus-visible,
.authm-step button:focus-visible,
.auth-menu-item:focus-visible,
.auth-menu-back:focus-visible,
.auth-menu-pane button:focus-visible,
.accordion-trigger:focus-visible,
.news-item:focus-visible,
.news-relevant-hit:focus-visible,
.tt-card:focus-visible,
.tt-move-opt:focus-visible,
.tt-result-btn:focus-visible,
.tt-side-btn:focus-visible,
.tt-mode-btn:focus-visible,
.amode-card:focus-visible,
.dm-action-btn:focus-visible,
.dm-mood-chip:focus-visible,
.fw-cta:focus-visible,
.lrn-path-lesson:focus-visible,
.lrn-weak-item:focus-visible,
.lrn-ex-card:focus-visible,
.tab-badge-pro:focus-visible,
.mx-index-chip:focus-visible,
.mx-graph-btn:focus-visible,
.mx-graph-filter-btn:focus-visible,
.mx-action:focus-visible,
.mx-btn:focus-visible,
.upg-modal-close:focus-visible,
.upg-modal-dismiss:focus-visible,
.upg-modal-cta:focus-visible,
.authm-social-btn:focus-visible,
.authm-email-edit:focus-visible,
.authm-forgot:focus-visible,
.authpage-back:focus-visible,
.authm-google-btn:focus-visible,
.authm-submit:focus-visible,
.landing-login-btn:focus-visible,
.landing-signup-btn:focus-visible,
.landing-link-secondary:focus-visible {
  /* Heredan el focus-visible global, sin estilos adicionales */
}

/* Touch targets mínimos 44x44px para elementos interactivos */
@media (pointer: coarse) {
  .btn,
  .btn.secondary,
  .tab,
  .tab-primary,
  .amode-card,
  .dm-action-btn,
  .dm-mood-chip,
  .tt-mode-btn,
  .tt-side-btn,
  .tt-move-opt,
  .tt-result-btn,
  .tt-side-btn,
  .tt-mode-btn,
  .fw-cta,
  .lrn-path-lesson,
  .lrn-weak-item,
  .lrn-ex-card,
  .mx-index-chip,
  .mx-graph-btn,
  .mx-graph-filter-btn,
  .mx-action,
  .mx-btn,
  .upg-modal-close,
  .upg-modal-dismiss,
  .upg-modal-cta,
  .authm-social-btn,
  .authm-email-edit,
  .authm-forgot,
  .authpage-back,
  .authm-google-btn,
  .authm-submit,
  .landing-login-btn,
  .landing-signup-btn,
  .landing-link-secondary,
  .authm-pw-toggle,
  .tt-modal-close,
  .tt-modal-body button,
  .tt-move-opt,
  .tt-result-btn,
  .tt-side-btn,
  .tt-mode-btn,
  .news-item,
  .news-relevant-hit,
  .news-ticker-chip,
  .news-cat-btn,
  .news-refresh-btn,
  .news-asset-chip,
  .news-relevant-hit,
  .news-detail-source-link,
  .news-analyze-btn,
  .tt-card {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Asegurar padding suficiente en botones pequeños */
  .btn,
  .btn.secondary,
  .tab,
  .tab-primary {
    padding: 12px 16px;
  }
  
  .amode-card {
    padding: 16px;
  }
  
  .dm-action-btn,
  .dm-mood-chip {
    padding: 12px 16px;
  }
}

/* Contraste WCAG AA (4.5:1) para texto - ajustes para modo claro/oscuro */
html[data-theme="light"] {
  /* Texto principal ya cumple 4.5:1 */
  /* Muted text ajustado para cumplir 4.5:1 */
  --muted: #5a4d3d;
  --muted2: #7a6b5a;
}

html[data-theme="dark"] {
  /* Texto principal ya cumple 4.5:1 */
  /* Muted text ajustado para cumplir 4.5:1 */
  --muted: #d4c4b0;
  --muted2: #a89a8a;
}

/* Mejoras ARIA adicionales */
[aria-hidden="true"] {
  display: none !important;
}

[aria-hidden="false"] {
  display: initial;
}

/* Labels para icon-only buttons */
[aria-label]:not(:focus):not(:hover) {
  /* Los labels solo se ven en screen readers */
}

/* Live regions para anuncios importantes */
[aria-live="polite"],
[aria-live="assertive"] {
  /* Los lectores de pantalla anunciarán los cambios */
}

/* Mejora de contraste para estados deshabilitados */
:disabled,
[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Contraste para placeholders */
::placeholder {
  color: var(--muted2);
  opacity: 0.8;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border: currentColor;
    --border-soft: currentColor;
  }
  html[data-theme="light"] {
    --muted: #000;
    --muted2: #333;
  }
  html[data-theme="dark"] {
    --muted: #fff;
    --muted2: #ccc;
  }
}