/* ============================================================
   APEX — Refinamiento visual del análisis (v2)
   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.
   ============================================================ */

/* ============================================================
   REDISEÑO DEL ANÁLISIS v2 — mismo lenguaje visual que el resto de
   APEX (tokens de :root de arriba: superficies, bordes suaves,
   sombras ligeras, radios), aplicado a los tres bloques nuevos que
   pide el flujo: Convicción / Riesgo como tarjetas propias, Gestión
   de riesgo, la grilla de Análisis técnico con flip, y Dimensiones
   como auditoría del trader.
   ============================================================ */

/* ---- Riesgo: icono + título + texto, en línea en escritorio y
   móvil (el bloque siempre es corto, no hace falta apilar). */
.risk-card-inner{display:flex;align-items:center;gap:var(--space-6);}
.risk-card-body{min-width:0;}
.risk-card-text{color:var(--muted);font-size:var(--text-body-sm-size);line-height:1.55;margin:6px 0 0;max-width:480px;}
.risk-card-icon{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--risk-soft);color:var(--risk-color);}
.risk-card-icon svg{width:24px;height:24px;}
.risk-card-level{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--risk-color);margin-top:2px;}
@media(max-width:560px){.risk-card-inner{gap:var(--space-4);}}

/* ---- Gestión de riesgo: reutiliza .plan-hero-row para SL/TP,
   y agrega la barra R:B con su propio título. */
.riskmgmt-plan{margin-top:2px;}
.riskmgmt-rr{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border-soft);}

/* ---- Grilla de Análisis técnico: 3 columnas en escritorio, 1 en
   móvil. Cada tarjeta es un flip 3D sutil (sin rebote), controlado
   por .is-flipped desde initTechFlipCards(). Respeta prefers-
   reduced-motion (ver regla global de arriba). */
.tech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-4);}
@media(max-width:720px){.tech-grid{grid-template-columns:1fr;gap:var(--space-3);}}
.tech-flip-card{perspective:1800px;cursor:pointer;min-height:164px;outline:none;}
.tech-flip-inner{position:relative;width:100%;height:100%;min-height:164px;transition:transform .6s var(--ease-out);transform-style:preserve-3d;}
.tech-flip-card.is-flipped .tech-flip-inner{transform:rotateY(180deg);}
.tech-flip-card:focus-visible .tech-flip-face{box-shadow:var(--shadow-focus);}
.tech-flip-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface2);padding:var(--space-6);display:flex;align-items:flex-start;gap:var(--space-4);overflow:hidden;transition:background .45s ease,border-color .45s ease;}
.tech-flip-front{align-items:center;}
.tech-flip-back{transform:rotateY(180deg);background:var(--tone-soft,var(--surface));border-color:var(--tone-border,var(--border-soft));overflow-y:auto;align-items:flex-start;}
.tech-flip-icon{font-size:28px;line-height:1;flex-shrink:0;width:40px;text-align:center;}
.tech-flip-front-text{min-width:0;flex:1;}
.tech-flip-label{font-size:var(--text-body-sm-size);font-weight:650;color:var(--text);margin-bottom:6px;letter-spacing:.005em;}
.tech-flip-teaser{font-size:var(--text-body-sm-size);line-height:1.5;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tech-flip-status{margin-top:8px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center;gap:4px;color:var(--muted2);}
.tech-flip-status svg{width:11px;height:11px;transform:rotate(90deg);}
.tech-flip-full{font-size:var(--text-body-sm-size);line-height:1.55;color:var(--text);margin:0;}
.tech-flip-raw{margin-top:10px;padding-top:10px;border-top:1px dashed var(--tone-border,var(--border-soft));font-size:11px;line-height:1.5;color:var(--muted2);}
@media (prefers-reduced-motion: reduce){.tech-flip-inner{transition:none;}}
/* En móvil las tarjetas se veían abultadas: misma altura mínima y
   mismo padding que en escritorio para un teaser de una sola línea.
   Se reduce el aire interno sin tocar el mecanismo del flip. */
@media(max-width:520px){
  .tech-flip-card,.tech-flip-inner{min-height:124px;}
  .tech-flip-face{padding:var(--space-4);gap:var(--space-3);}
  .tech-flip-icon{font-size:22px;width:30px;}
}

/* ---- Dimensiones de mi decisión: auditoría del trader. Cada
   categoría es una tarjeta con gauge + veredicto en palabras +
   explicación (no solo un número), y al final se integra —sin
   acordeón propio— lo que era "Información secundaria". */
.dim-intro{color:var(--muted);font-size:var(--text-body-sm-size);margin:0 0 var(--space-6);max-width:520px;}
.dim-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-top:var(--space-7);}
@media(max-width:640px){.dim-cards-grid{grid-template-columns:1fr;}}
.dim-card{border:1px solid var(--border-soft);border-radius:var(--r-md);background:var(--surface2);padding:var(--space-5);}
.dim-card-top{display:flex;align-items:center;gap:var(--space-4);}
.dim-card-titles{display:flex;flex-direction:column;gap:2px;}
.dim-card-label{font-size:var(--text-caption-size);font-weight:650;color:var(--text);}
.dim-card-tier{font-size:var(--text-body-sm-size);font-weight:650;}
.dim-card-text{margin:var(--space-3) 0 0;font-size:var(--text-caption-size);line-height:1.5;color:var(--muted);}

/* Diagnóstico psicológico — misma lógica visual que .landing-panel-row
   (is-bad/is-warn/is-good) pero como tarjetas grandes, para que se
   sienta como la extensión directa de lo que promete la landing. */
.psych-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-top:var(--space-5);}
@media(max-width:640px){.psych-grid{grid-template-columns:1fr;}}
.psych-card{border:1px solid var(--border-soft);border-radius:var(--r-md);background:var(--surface2);padding:var(--space-5);animation:revealUp .45s var(--ease) both;}
.psych-card:nth-child(2){animation-delay:.05s;} .psych-card:nth-child(3){animation-delay:.1s;} .psych-card:nth-child(4){animation-delay:.15s;}
.psych-card-top{display:flex;align-items:center;gap:var(--space-3);}
.psych-card-icon{width:30px;height:30px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.psych-card-label{font-size:var(--text-caption-size);font-weight:650;color:var(--text);flex:1;}
.psych-card-badge{font-family:var(--font-mono);font-size:11.5px;font-weight:650;padding:3px 9px;border-radius:var(--r-pill);flex-shrink:0;}
.psych-card-text{margin:var(--space-3) 0 0;font-size:var(--text-caption-size);line-height:1.5;color:var(--muted);}
.psych-card.tone-good .psych-card-icon{background:var(--green-soft);color:var(--green);}
.psych-card.tone-good .psych-card-badge{background:var(--green-soft);color:var(--green);}
.psych-card.tone-warn .psych-card-icon{background:var(--amber-soft);color:var(--amber);}
.psych-card.tone-warn .psych-card-badge{background:var(--amber-soft);color:var(--amber);}
.psych-card.tone-bad .psych-card-icon{background:var(--red-soft);color:var(--red);}
.psych-card.tone-bad .psych-card-badge{background:var(--red-soft);color:var(--red);}
.dim-mentor-wrap{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-soft);}