que envuelve cada sección),
no sobre .doc-section-collapsible-content: nth-of-type cuenta entre
hermanos del MISMO tag, y el de contenido es siempre el único
hijo de su — sin este ajuste, todas las secciones
colapsables saldrían con el mismo delay (nth-of-type(1) relativo a
un único hermano). */
.analysis-doc .doc-section-collapsible:nth-of-type(1) .doc-section-collapsible-content{animation-delay:.02s;}
.analysis-doc .doc-section-collapsible:nth-of-type(2) .doc-section-collapsible-content{animation-delay:.08s;}
.analysis-doc .doc-section-collapsible:nth-of-type(3) .doc-section-collapsible-content{animation-delay:.14s;}
.analysis-doc .doc-section-collapsible:nth-of-type(4) .doc-section-collapsible-content{animation-delay:.2s;}
.analysis-doc .doc-section-collapsible:nth-of-type(5) .doc-section-collapsible-content{animation-delay:.26s;}
.analysis-doc .doc-section-collapsible:nth-of-type(6) .doc-section-collapsible-content{animation-delay:.32s;}
.analysis-doc .doc-section-collapsible:nth-of-type(7) .doc-section-collapsible-content{animation-delay:.38s;}
.analysis-doc .doc-section-collapsible:nth-of-type(8) .doc-section-collapsible-content{animation-delay:.44s;}
.analysis-doc .doc-section-collapsible:nth-of-type(9) .doc-section-collapsible-content{animation-delay:.5s;}
@media (prefers-reduced-motion: reduce){
.doc-section-collapsible-content{ animation: none; }
}
/* ============================================================
GLOSSARY TERMS — tooltips contextuales para términos técnicos
============================================================ */
.glossary-term{
position: relative;
border-bottom: 1px dotted var(--muted2);
cursor: help;
transition: border-color var(--dur-fast);
}
.glossary-term:hover,
.glossary-term:focus{
border-bottom-color: var(--blue);
outline: none;
}
/* ============================================================
APEX COACH — bloque principal del análisis. "¿Qué haría APEX?"
es lo primero y más grande que ve el usuario: una opinión, no
una tabla de datos. Todo lo demás vive plegado debajo.
============================================================ */
.coach-hero{background:linear-gradient(180deg,var(--decision-soft,var(--surface)) 0%,var(--surface) 45%);padding:var(--space-9) var(--space-8) var(--space-8);position:relative;overflow:hidden;box-shadow:var(--shadow-md) !important;border-color:var(--decision-border,var(--border-soft)) !important;}
.coach-hero:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--decision-color);}
.coach-hero>*{position:relative;}
.coach-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--space-5);}
.coach-hero-lean .coach-hero-asset{margin-bottom:var(--space-4);}
.coach-hero-asset{font-size:var(--text-caption-size);color:var(--muted);font-weight:600;letter-spacing:.01em;}
.coach-hero-asset .tf{color:var(--muted2);font-weight:500;}
.coach-hero-eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-label-size);text-transform:uppercase;letter-spacing:.09em;color:var(--decision-color);font-weight:700;}
.coach-hero-eyebrow svg{width:16px;height:16px;}
.coach-hero-verdict{font-family:var(--font-display);font-size:clamp(30px,5vw,44px);font-weight:750;letter-spacing:-0.03em;line-height:1.06;color:var(--decision-color);margin:12px 0 18px;display:flex;align-items:center;gap:14px;}
.coach-hero-verdict svg{width:1em;height:1em;flex-shrink:0;}
.coach-hero-opinion{font-size:18px;line-height:1.68;color:var(--text);margin:0;max-width:640px;}
.coach-hero-foot{display:flex;align-items:center;gap:var(--space-8);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-soft);flex-wrap:wrap;row-gap:var(--space-5);}
.conviction-block{flex:0 0 auto;}
.conviction-label{display:flex;align-items:baseline;justify-content:space-between;font-size:var(--text-label-size);text-transform:uppercase;letter-spacing:.05em;color:var(--muted2);margin-bottom:7px;}
.conviction-label b{font-family:var(--font-display);font-size:var(--text-h4-size);text-transform:none;letter-spacing:0;color:var(--text);}
.coach-hero-stat{min-width:90px;}
.coach-hero-stat .cs-label{font-size:var(--text-label-size);text-transform:uppercase;letter-spacing:.05em;color:var(--muted2);margin-bottom:5px;}
.coach-hero-stat .cs-value{font-family:var(--font-display);font-size:17px;font-weight:650;}
@media(max-width:520px){.coach-hero{padding:var(--space-7) var(--space-5) var(--space-6);} .coach-hero-foot{gap:var(--space-6);}}
/* ---- "Para ti" — la misma opinión, aplicada a ESTE trader.
No es una tarjeta nueva: es un párrafo más dentro del veredicto,
separado por una línea fina y con la etiqueta en color de marca
para que se lea como el matiz personal de lo de arriba. Solo
existe cuando el usuario tiene historial que cruzar (ver
contexto_trader en analysis/prompts.js). ---- */
.coach-hero-personal{font-size:var(--text-body-size);line-height:1.6;color:var(--text);margin:var(--space-4) 0 0;padding-top:var(--space-4);border-top:1px solid var(--border-soft);max-width:640px;}
.coach-hero-personal-tag{display:inline-block;font-family:var(--font-mono);font-size:var(--text-label-size);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--violet);margin-right:8px;}
/* ---- "Ver por qué pienso esto" — detalle secundario plegado
dentro de la propia opinión, no una sección aparte: los motivos
apoyan el veredicto, no compiten con él. ---- */
.coach-hero-reasons{margin-top:var(--space-5);}
.coach-hero-reasons summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-size:var(--text-caption-size);font-weight:600;color:var(--decision-color);user-select:none;}
.coach-hero-reasons summary::-webkit-details-marker{display:none;}
.coach-hero-reasons summary::marker{content:'';}
.coach-hero-reasons summary svg{width:12px;height:12px;transition:transform var(--dur-med) var(--ease-out);}
.coach-hero-reasons[open] summary svg{transform:rotate(90deg);}
.coach-hero-reasons .reasons-list{margin-top:14px;}
/* ============================================================
"TU TESIS" — abre el documento en vez del antiguo veredicto
(comprar/esperar/no_entrar). A propósito NO lleva ningún color de
decisión: es la restitución neutral de la apuesta del usuario,
antes de que APEX opine nada — el color solo entra más abajo, en
las secciones que sí toman postura (contraargumentos, riesgo…).
============================================================ */
.thesis-hero{padding:var(--space-9) var(--space-8) var(--space-8);}
.thesis-hero-eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-label-size);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;margin-bottom:var(--space-4);}
.thesis-hero-eyebrow svg{width:16px;height:16px;}
.thesis-hero-meta{font-size:var(--text-caption-size);color:var(--muted);font-weight:600;letter-spacing:.01em;display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:var(--space-4);}
.thesis-hero-meta .tf{color:var(--muted2);font-weight:500;}
.thesis-dir-badge{font-family:var(--font-mono);font-size:var(--text-label-size);font-weight:700;letter-spacing:.05em;color:var(--muted);background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-2xs);padding:2px 8px;}
.thesis-hero-statement{font-family:var(--font-display);font-size:clamp(21px,3.4vw,28px);font-weight:650;letter-spacing:-0.015em;line-height:1.35;color:var(--text);margin:0 0 var(--space-5);max-width:640px;}
.thesis-hero-own{margin:0 0 var(--space-5);padding:var(--space-4) var(--space-5);background:var(--surface2);border-radius:var(--r-md);border-left:3px solid var(--border);max-width:640px;}
.thesis-hero-own-tag{display:block;font-family:var(--font-mono);font-size:var(--text-label-size);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);margin-bottom:6px;}
.thesis-hero-own p{margin:0;font-size:var(--text-body-sm-size);line-height:1.55;color:var(--muted);font-style:italic;}
.thesis-good-list{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-direction:column;gap:9px;max-width:640px;}
.thesis-good-list li{display:flex;align-items:flex-start;gap:9px;font-size:var(--text-body-sm-size);line-height:1.5;color:var(--text);}
.thesis-good-list li svg{color:var(--green);flex-shrink:0;margin-top:3px;}
@media(max-width:520px){.thesis-hero{padding:var(--space-7) var(--space-5) var(--space-6);}}
/* ============================================================
"¿QUÉ HACER AHORA?" — el cierre accionable del análisis: qué
debe hacer el trader después de leer todo lo anterior. Mismo
lenguaje visual que Progreso (.tp-hero): tarjeta plana, acento
de color sutil en la esquina y pasos numerados como
.tp-strength-item, para que se sienta parte del mismo producto.
============================================================ */
.next-steps-card{background:var(--surface);border:1px solid var(--decision-border,var(--border-soft));border-radius:var(--r-lg);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.next-steps-card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--decision-color);opacity:.55;}
.next-steps-card>*{position:relative;}
.next-steps-sentence{font-size:var(--text-h4-size);font-weight:400;line-height:1.65;color:var(--text);margin:0;max-width:640px;}
.next-steps-sentence strong{font-weight:650;color:var(--text);}
/* El ajuste que APEX pediría a ESTE trader por su historial, no por el
gráfico. Cierra la misma frase, no abre otra sección. */
.next-steps-personal{font-size:var(--text-body-size);line-height:1.6;color:var(--text);margin:var(--space-4) 0 0;padding-top:var(--space-4);border-top:1px solid var(--border-soft);max-width:640px;}
/* La pregunta que cierra el análisis (sacada del contraargumento más
fuerte, ver closingSection en render.js): en cursiva y en tono
discreto para que se lea como una pregunta que se hace el usuario a
sí mismo, no como otra afirmación de APEX. */
.next-steps-question{font-size:var(--text-body-size);font-style:italic;color:var(--muted);margin:var(--space-4) 0 0;max-width:640px;}
/* La lectura de APEX ("mi lectura, si tuviera que resumirla"): antes
era el titular de todo el análisis (coach-hero-verdict, grande y en
el color de la decisión); ahora es la última línea, pequeña y en
texto neutro — una nota más, no la conclusión que manda. */
.closing-verdict-quiet{display:flex;align-items:center;gap:8px;font-size:var(--text-caption-size);color:var(--muted2);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border-soft);}
.closing-verdict-quiet svg{width:15px;height:15px;flex-shrink:0;}
.closing-verdict-quiet strong{color:var(--muted);font-weight:650;}
/* ============================================================
"ESTO ES TUYO, NO DEL MERCADO" — el contexto del trader.
Las señales vienen de analysis/trader-context.js: hechos calculados
sobre el historial real del usuario, cada uno con su nota de origen
(.tctx-evidence). El color del filo dice la urgencia; el resto de la
tarjeta es idéntico al lenguaje del resto de APEX, sin paleta nueva.
Cuando no hay señales no se pinta nada — la ausencia se cuenta
omitiendo la sección, nunca con una tarjeta vacía.
============================================================ */
.tctx-sub{margin:0 0 var(--space-4);font-size:var(--text-body-sm-size);color:var(--muted2);}
.tctx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);}
.tctx-item{position:relative;background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--space-4) var(--space-5);padding-left:calc(var(--space-5) + 3px);overflow:hidden;}
.tctx-item:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--muted2);}
.tctx-item.tone-bad:before{background:var(--red);}
.tctx-item.tone-warn:before{background:var(--amber);}
.tctx-item.tone-good:before{background:var(--green);}
.tctx-item.tone-info:before{background:var(--blue);}
.tctx-item-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-bottom:5px;}
.tctx-title{font-weight:650;font-size:var(--text-body-size);color:var(--text);}
.tctx-badge{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--text-label-size);text-transform:uppercase;letter-spacing:.05em;color:var(--muted2);white-space:nowrap;}
.tctx-text{margin:0;font-size:var(--text-body-sm-size);line-height:var(--text-body-lh);color:var(--text);}
.tctx-evidence{margin-top:8px;font-family:var(--font-mono);font-size:var(--text-label-size);color:var(--muted2);}
.tctx-card{margin-top:var(--space-6);}
/* ============================================================
EL ECO DE MEMORIA (§10) — pie de "Esto es tuyo, no del mercado"
NO es una tarjeta más ni una sección nueva: es el pie de la que ya
existe, separado por una línea. «Esta decisión se parece a 3
anteriores en BTC» pertenece exactamente ahí, y abrirle un bloque
propio con su propio título habría dicho lo mismo dos veces.
Ni un color nuevo: los mismos tokens que el resto de la sección.
============================================================ */
.tctx-echo{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border-soft);}
.tctx-echo-t{margin:0 0 2px;font-size:var(--text-label-size);letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);}
.tctx-echo-f{margin:0 0 var(--space-3);font-size:var(--text-body-size);color:var(--text);}
.tctx-echo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.tctx-echo-l{font-size:var(--text-body-sm-size);color:var(--text);}
/* EL DENOMINADOR ES PARTE DE LA FRASE, no letra pequeña aparte: «en 2»
a secas insinúa que las otras fueron peores. Tabular para que las
fracciones se alineen. */
.tctx-echo-n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted2);}
@media(max-width:520px){
.tctx-item-head{flex-direction:column;gap:2px;}
.tctx-badge{align-self:flex-start;}
}
/* Teaser de plan — como mucho UNO, siempre al final de la lista (ver
lockedTeaserFor en analysis/trader-context.js). Filo discontinuo en
vez de sólido: distingue de un vistazo "esto es una invitación" de
"esto es un hecho de tu historial" sin introducir un color nuevo ni
sonar a advertencia (nunca tone-bad/warn). El icono de candado va en
línea con el título, mismo patrón que .premium-overlay-icon. */
.tctx-item-locked{background:transparent;border-style:dashed;border-color:var(--violet-soft-border);}
.tctx-item-locked:before{background:var(--violet);opacity:.55;}
.tctx-item-locked .tctx-title{display:flex;align-items:center;gap:7px;color:var(--muted);}
.tctx-item-locked .tctx-title svg{width:14px;height:14px;flex:0 0 auto;opacity:.8;}
.tctx-item-locked .tctx-text{color:var(--muted2);}
.tctx-locked-cta{margin-top:var(--space-3);border:1px solid var(--violet-soft-border);background:var(--violet-soft);color:var(--violet);font-size:var(--text-label-size);font-weight:650;padding:7px 14px;border-radius:var(--r-full,999px);cursor:pointer;}
.tctx-locked-cta:hover{filter:brightness(1.05);}
/* ============================================================
"APEX CONECTA LO QUE ACABAS DE APRENDER" — el puente con APEX
Learning (ver learning/analysis-bridge.js). Mismo lenguaje visual
que "Esto es tuyo, no del mercado": una sola tarjeta, sin paleta
nueva. Solo aparece cuando Learning está activo Y el análisis de
verdad conecta con un concepto reciente o en curso — nunca por
defecto, así que no hace falta ningún estado "vacío".
============================================================ */
.lrn-edu-card{margin-top:var(--space-6);}
.lrn-edu-text{margin:0 0 var(--space-4);font-size:var(--text-body-sm-size);line-height:var(--text-body-lh);color:var(--text);}
.lrn-edu-text strong{font-weight:650;}
.lrn-edu-cta{
background:none;border:none;padding:0;font-family:var(--font-body);font-size:var(--text-body-sm-size);font-weight:650;
color:var(--blue);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);
}
.lrn-edu-cta:hover{opacity:.75;}
/* ============================================================
"SI SOLO PUDIERA CORREGIR UNA COSA..." — la sección más
importante de todo el análisis después de la opinión: UN solo
error, grande y sin competencia visual, no una lista de cinco.
============================================================ */
/* Ya no es una segunda "hero": el veredicto de arriba debe quedar como
el único bloque dominante, así que esta sección se abre igual que el
resto del documento (hairline + acento de color a la izquierda), en
vez de competir con su propia caja y sombra. */
.correction-hero{background:none;box-shadow:none;border:none;border-radius:0;border-top:1px solid var(--border-soft);padding:var(--space-8) var(--space-7) var(--space-1);position:relative;overflow:hidden;}
.correction-hero:before{content:'';position:absolute;left:0;top:var(--space-8);bottom:0;width:3px;background:var(--amber);}
.correction-hero>*{position:relative;}
.correction-hero-eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-label-size);text-transform:uppercase;letter-spacing:.08em;color:var(--amber);margin-bottom:var(--space-4);}
.correction-hero-text{font-family:var(--font-display);font-size:clamp(19px,2.8vw,25px);font-weight:650;letter-spacing:-0.015em;color:var(--text);line-height:1.4;margin:0;max-width:640px;}
@media(max-width:520px){.correction-hero{padding:var(--space-6) var(--space-4) 2px;}}
/* ---- Estrategia accionable: opinión del coach + plan de
ejecución (entrada/stop/tp), confirmaciones necesarias y qué
esperar antes de ejecutar — todo dentro de la misma tarjeta
protagonista, en vez de un solo error suelto. ---- */
.strategy-opinion{margin-bottom:var(--space-2);}
.strategy-plan{margin-top:var(--space-6);padding-top:var(--space-1);}
.strategy-sub{margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--border-soft);}
.strategy-sub-title{display:flex;align-items:center;gap:8px;font-size:var(--text-caption-size);font-weight:650;color:var(--text);margin-bottom:var(--space-4);}
.strategy-sub-title .dotmark{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.strategy-confirm-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.strategy-confirm-list li{font-size:var(--text-body-sm-size);line-height:1.5;padding-left:18px;position:relative;color:var(--text);}
.strategy-confirm-list li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--blue);}
.expect-rows{display:flex;flex-wrap:wrap;gap:var(--space-3);}
.expect-row{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-pill);padding:8px 15px 8px 12px;font-size:var(--text-body-sm-size);transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);}
.expect-row:hover{background:var(--surface3);transform:translateY(-1px);}
.expect-k{display:flex;align-items:center;gap:7px;color:var(--muted);font-weight:500;}
.expect-k svg{flex-shrink:0;color:var(--muted2);}
.expect-v{font-weight:650;color:var(--text);}
@media(max-width:520px){.expect-row{width:100%;justify-content:space-between;}}
/* ---- Secciones "estáticas": mismo encabezado que un acordeón
(ícono + título) pero siempre visibles — para "Lo que
probablemente no viste" y "Checklist", que deben leerse sin
tocar nada, nunca quedar plegadas por accidente. ---- */
.doc-section-static{padding:var(--space-6) var(--space-7) var(--space-7);}
.doc-section-static .result-group-head{margin:0 0 var(--space-5);}
@media(max-width:480px){.doc-section-static{padding:var(--space-4);}}
/* ---- Documento abierto: entre el veredicto (arriba) y "¿Qué hacer
ahora?" (abajo) — las dos únicas tarjetas con caja propia — el resto
fluye como capítulos de un mismo documento, separados por un hairline
y espacio en blanco en vez de apilar una caja con sombra tras otra.
Menos "dashboard de tarjetas", más lectura continua. Excluye
.next-steps-card, que conserva su propia caja de cierre. ---- */
.analysis-doc .doc-section-static:not(.next-steps-card){
background:none;border:none;box-shadow:none;border-radius:0;
border-top:1px solid var(--border-soft);
padding:var(--space-8) var(--space-7) var(--space-1);
}
@media(max-width:480px){
.analysis-doc .doc-section-static:not(.next-steps-card){padding:var(--space-6) var(--space-4) 2px;}
}
/* "El riesgo" es el único capítulo-badge dentro del recorrido plano:
se lee de un vistazo, así que conserva una superficie propia y
ligeramente elevada (mismo lenguaje clay que .next-steps-card, sin
pedir foco: sombra difusa, sin borde marcado) en vez del hairline
plano del resto de capítulos. */
.analysis-doc .doc-section-static.risk-card{
border-top:none;margin-top:var(--space-2);
background:var(--surface);border:1px solid var(--border-soft);
border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
padding:var(--space-6) var(--space-7);
}
@media(max-width:480px){.analysis-doc .doc-section-static.risk-card{padding:var(--space-5) var(--space-4);}}
/* ============================================================
ACORDEONES — todo lo que no es la opinión principal vive
plegado por defecto (salvo "¿Por qué?"), con animación suave
al abrir. Reutiliza .result-group-head para el encabezado.
============================================================ */
details.acc{padding:0;overflow:hidden;}
details.acc>summary{list-style:none;cursor:pointer;padding:var(--space-6) var(--space-7);}
details.acc>summary::-webkit-details-marker{display:none;}
details.acc>summary::marker{content:'';}
details.acc>summary.result-group-head{margin:0;padding:0;width:100%;}
.acc-chevron{margin-left:auto;flex-shrink:0;color:var(--muted2);transition:transform var(--dur-med) var(--ease-out);align-self:center;}
details.acc[open]>summary .acc-chevron{transform:rotate(90deg);}
details.acc[open]>summary{padding-bottom:var(--space-5);}
.acc-body{padding:0 var(--space-7) var(--space-7);}
@media(max-width:480px){details.acc>summary{padding:var(--space-4) var(--space-4);} .acc-body{padding:0 var(--space-4) var(--space-4);}}
/* ---- por qué: máximo 5 motivos, un ícono cada uno ---- */
.reasons-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.reason-item{display:flex;align-items:flex-start;gap:11px;font-size:var(--text-body-size);line-height:1.5;}
.reason-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:12px;}
/* ---- "Lo que probablemente no viste" — cada punto ciego es una
tarjeta interactiva (mismo flip que .tech-flip-card): el frente
solo muestra la observación, un tap revela por qué influye en
el análisis. ---- */
.blindspot-list{display:flex;flex-direction:column;gap:var(--space-4);}
.blindspot-flip{min-height:118px;}
.blindspot-flip .tech-flip-inner{min-height:118px;}
.blindspot-flip .tech-flip-icon{width:24px;height:24px;border-radius:50%;background:var(--violet-soft);color:var(--violet);display:flex;align-items:center;justify-content:center;font-size:inherit;flex-shrink:0;margin:0;}
.blindspot-teaser{-webkit-line-clamp:3;font-weight:500;color:var(--text);}
/* La sección "Puntos importantes que no viste" se distingue con la
misma barra de acento lateral que coach-hero/correction-hero, en
vez de un fondo degradado — mismo lenguaje visual plano que el
resto de APEX (Progreso / Trade Tracker), solo con un acento de
color para que se note de un vistazo. */
.blindspot-section{position:relative;overflow:hidden;}
.blindspot-section:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--violet);opacity:.55;}
.blindspot-section>*{position:relative;}
/* ---- escenarios: alcista / bajista, planificación no predicción ---- */
.scenario-v2{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-soft);}
.scenario-v2:last-child{border-bottom:none;padding-bottom:0;}
.scenario-v2:first-child{padding-top:0;}
.scenario-v2-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.scenario-v2-body{flex:1;min-width:0;}
.scenario-v2-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;}
.scenario-v2-name{font-weight:650;font-size:var(--text-body-size);}
.scenario-v2-pct{font-family:var(--font-mono);font-size:var(--text-caption-size);color:var(--muted2);}
.scenario-v2-just{font-size:var(--text-body-sm-size);color:var(--muted);line-height:1.5;margin:0;}
/* ---- auditoría técnica avanzada: subsecciones dentro de un único
acordeón cerrado por defecto, para no duplicar el veredicto ---- */
.tech-sub{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-soft);}
.tech-sub:first-child{margin-top:0;padding-top:0;border-top:none;}
.tech-sub-title{font-size:var(--text-caption-size);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;}
/* ---- NIVEL 5: dato técnico bajo su traducción, discreto ---- */
.tech-audit-sub{font-size:var(--text-body-sm-size);color:var(--muted);margin:-4px 0 var(--space-5);}
.indicator-card .ic-tech{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border-soft);font-size:var(--text-label-size);color:var(--muted2);line-height:1.4;}
/* ============================================================
DIMENSIONES — grilla visual de las 6 categorías puntuadas.
Nunca lista, nunca tabla: cada categoría es un medidor circular
+ una etiqueta de color (Fortaleza / A mejorar / Riesgo), para
que el usuario vea sus puntos fuertes y débiles de un vistazo,
sin leer un solo párrafo.
============================================================ */
.dim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);}
@media(max-width:640px){.dim-grid{grid-template-columns:1fr 1fr;}}
.dim-chip{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:var(--space-5) var(--space-2);background:var(--surface2);border-radius:var(--r-md);transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);}
.dim-chip:hover{background:var(--surface3);transform:translateY(-2px);}
.dim-chip .dim-label{font-size:var(--text-caption-size);font-weight:600;color:var(--text);line-height:1.3;}
.dim-chip .dim-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 10px;border-radius:var(--r-pill);}
@media(max-width:480px){.dim-grid{gap:var(--space-2);}.dim-chip{padding:var(--space-4) var(--space-1);}}
/* ============================================================
V3 — VISUALES PREMIUM DEL ANÁLISIS
Todo lo que sigue son componentes de datos (radar, barras de
riesgo:beneficio, probabilidades, heatmap de cobertura, chips
de sesgos, anillos de progreso) que reemplazan bloques de texto
por lectura visual instantánea. Reutilizan exclusivamente los
tokens ya definidos (color/radio/sombra/espaciado) para no
romper la coherencia del resto de APEX.
============================================================ */
/* Anillo + leyenda genérico (reutilizado por checklist) */
.gauge-wrap .gauge-caption .gauge-label{font-weight:600;color:var(--text);font-size:var(--text-body-sm-size);text-transform:none;letter-spacing:0;}
/* Barra de riesgo:beneficio — dos segmentos proporcionales, rojo (riesgo)
y verde (beneficio), en vez de solo el texto "R:R 1:2.5". */
.rr-bar{margin-top:15px;}
.rr-bar-track{display:flex;width:100%;height:10px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface3);box-shadow:inset 0 0 0 1px var(--border-soft);}
.rr-bar-seg{height:100%;transition:width .8s var(--ease-out);}
.rr-bar-seg.risk{background:var(--red);}
.rr-bar-seg.reward{background:var(--green);}
.rr-bar-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:var(--text-caption-size);color:var(--muted);}
.rr-bar-labels .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle;}
.rr-bar-labels .dot.risk{background:var(--red);}
.rr-bar-labels .dot.reward{background:var(--green);}
/* Barras de probabilidad de escenarios — sustituyen la sola lista por
una lectura tipo "cuánto pesa cada escenario", coloreada por sesgo. */
.scenario-bars{display:flex;flex-direction:column;gap:13px;margin-bottom:var(--space-2);}
.scenario-bar-row{display:flex;flex-direction:column;gap:6px;}
.sbr-head{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-body-sm-size);}
.sbr-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:650;}
.sbr-name svg{width:14px;height:14px;flex-shrink:0;}
/* Etiqueta valida/invalida/neutral de cada escenario (ver
scenariosSection en render.js) — mismo lenguaje de badge que
.tctx-badge, con color propio por tipo en vez de gris uniforme,
para que "valida" y "invalida" se distingan sin leer el texto. */
.sbr-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:var(--r-pill);}
.sbr-tag-validates{color:var(--green);background:var(--green-soft);}
.sbr-tag-invalidates{color:var(--red);background:var(--red-soft);}
.sbr-tag-neutral{color:var(--muted2);background:var(--surface2);}
.sbr-pct{font-family:var(--font-mono);font-weight:600;color:var(--muted);}
.sbr-track{width:100%;height:8px;border-radius:var(--r-pill);background:var(--surface3);overflow:hidden;}
.sbr-fill{height:100%;border-radius:var(--r-pill);transition:width .8s var(--ease-out);}
/* Heatmap de cobertura técnica — 14 celdas, una por dimensión de la
auditoría; azul si el modelo la tradujo a lenguaje simple, gris si
solo hay dato crudo. Da una lectura de "cuánto se auditó" en un
vistazo, antes de leer una sola tarjeta. */
.tech-heatmap{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin:0 0 var(--space-3);}
.heat-cell{display:block;height:8px;border-radius:3px;transition:transform var(--dur-fast) var(--ease-out);}
.heat-cell:hover{transform:scaleY(1.6);}
@media(max-width:640px){.tech-heatmap{grid-template-columns:repeat(7,1fr);}}
.heat-legend{display:flex;gap:16px;font-size:var(--text-caption-size);color:var(--muted);margin:0 0 var(--space-4);}
.heat-legend .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle;}
/* Chips de sesgos psicológicos detectados — tags en vez de bullets,
para que se lean como "hallazgos" y no como un párrafo. */
.bias-chips{display:flex;flex-wrap:wrap;gap:8px;}
.bias-chip{display:inline-flex;align-items:center;gap:7px;background:var(--amber-soft);border:1px solid var(--amber-soft-border);color:var(--amber);border-radius:var(--r-pill);padding:7px 13px 7px 10px;font-size:var(--text-body-sm-size);font-weight:500;line-height:1.35;}
.bias-chip svg{width:13px;height:13px;flex-shrink:0;}
/* Insignia de conteo (puntos ciegos, checklist) — número + etiqueta,
discreta, junto al encabezado de sección. */
.count-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--text-caption-size);font-weight:600;color:var(--muted);background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-pill);padding:4px 11px;margin-left:auto;flex-shrink:0;align-self:flex-start;}
/* Cabecera del bloque "Checklist final": anillo de progreso + texto */
.checklist-progress{display:flex;align-items:center;gap:14px;margin-bottom:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-soft);}
/* Score-strip en el coach-hero: tercer elemento del pie (junto a
convicción y riesgo) — miniatura del radar, "esto se auditó". */
.coach-hero-audit{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex-shrink:0;}
.coach-hero-audit .cs-label{font-size:var(--text-label-size);text-transform:uppercase;letter-spacing:.05em;color:var(--muted2);margin-bottom:2px;}
.coach-hero-audit .radar-thumb{line-height:0;}
/* Micro-animaciones de entrada para los componentes nuevos, coherentes
con el revealUp que ya usa el resto del documento. */
.rr-bar,.scenario-bar-row,.bias-chip,.heat-cell{animation:revealUp .4s var(--ease) both;}
.scenario-bar-row:nth-child(2){animation-delay:.05s;}
.scenario-bar-row:nth-child(3){animation-delay:.1s;}
.bias-chip:nth-child(2){animation-delay:.04s;}
.bias-chip:nth-child(3){animation-delay:.08s;}
.bias-chip:nth-child(4){animation-delay:.12s;}
/* ---- Grupo de secciones de detalle (6. Explicación técnica,
7. Dimensiones, 8. Información secundaria): comparten un mismo
contenedor y un mismo hairline entre sí, en vez de ser tres
tarjetas sueltas — siguen sintiéndose parte del mismo documento. ---- */
.doc-detail-item{border-top:1px solid var(--border-soft);}
.doc-detail-item:first-child{border-top:none;}
.empty-state{text-align:center;padding:var(--space-11) var(--space-5);color:var(--muted2);}
.empty-state .icon{margin-bottom:16px;opacity:.45;display:flex;justify-content:center;}
.empty-state .icon svg{width:34px;height:34px;}
.empty-state .t1{font-size:var(--text-body-size);color:var(--muted);font-weight:500;}
.empty-state .t2{font-size:var(--text-body-sm-size);margin-top:5px;}
/* HISTORY COUNTER — pill con "X / 8 análisis" (Free) o "Historial
ilimitado ✓" (Pro), justo debajo del título de Historial. */
.history-counter{
display:inline-flex;align-items:center;gap:6px;font-size:var(--text-caption-size);font-weight:600;
color:var(--muted);background:var(--surface2);border:1px solid var(--border-soft);
border-radius:var(--r-pill);padding:6px 14px;margin:-16px 0 28px;
}
.history-counter.is-unlimited{color:var(--blue);background:var(--blue-soft);border-color:var(--blue-soft-border);}
/* ============================================================
HISTORIAL / BIBLIOTECA — carpetas, filtros y lista.
============================================================ */
/* ---- Barra de carpetas: "Todos" + "Sin carpeta" + carpetas propias +
"Nueva carpeta". Mismo lenguaje de chip horizontal con scroll que
APEX News (.news-cats), con clases propias para no tocar esa vista. ---- */
.hist-folder-bar{
display:flex;align-items:center;gap:7px;overflow-x:auto;overflow-y:hidden;
padding:2px 2px 4px;margin-bottom:var(--space-4);scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.hist-folder-chip{
flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);
font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1.5px solid var(--border);
border-radius:var(--r-pill);padding:6.5px 13px;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);
}
.hist-folder-chip-btn{all:unset;display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.hist-folder-chip:hover{border-color:var(--muted2);color:var(--text);}
.hist-folder-chip.active{background:var(--text);border-color:var(--text);color:var(--bg);}
.hist-folder-chip.active svg{color:var(--bg);}
.hist-folder-count{font-family:var(--font-mono);font-size:11px;opacity:.75;}
.hist-folder-add{color:var(--muted2);border-style:dashed;}
.hist-folder-add:hover{color:var(--blue);border-color:var(--blue);}
.hist-folder-mini{
all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
color:inherit;opacity:.7;padding:2px;border-radius:var(--r-2xs);
}
.hist-folder-mini:hover{opacity:1;}
.hist-folder-mini.is-danger{all:unset;cursor:pointer;font-size:11px;font-weight:700;color:var(--red);opacity:1;padding:0 4px;}
.hist-folder-chip.is-editing{padding:4px 6px 4px 12px;background:var(--surface);border-color:var(--blue);}
.hist-folder-rename-input{
border:none;background:transparent;outline:none;font-family:var(--font-body);font-size:12.5px;font-weight:600;
color:var(--text);width:130px;padding:2px 0;
}
/* ---- Barra de herramientas: búsqueda + filtro de tipo ---- */
.hist-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:var(--space-5);}
.hist-search-wrap{position:relative;flex:0 1 220px;min-width:170px;}
.hist-search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted2);pointer-events:none;}
.hist-search-wrap input{width:100%;padding:8px 13px 8px 34px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:var(--text-body-sm-size);}
/* 16px mínimo en móvil para que Safari iOS no haga zoom al enfocar
(ver regla global en base.css; esta pisa por especificidad). */
@media(max-width:900px){ .hist-search-wrap input{font-size:16px;} }
.hist-search-wrap input:focus{outline:none;border-color:var(--muted2);box-shadow:var(--shadow-focus);}
.hist-type-bar{display:flex;gap:6px;flex-wrap:wrap;}
.hist-type-btn{font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;border:1.5px solid transparent;border-radius:var(--r-pill);padding:6.5px 13px;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);}
.hist-type-btn:hover{color:var(--text);}
.hist-type-btn.active{background:var(--surface2);border-color:var(--border-soft);color:var(--text);}
/* ---- Lista: una sola superficie con filas separadas por hairline en
vez de una tarjeta suelta por análisis (antes: .hist-item con su
propio borde+sombra+margen cada uno — la "sopa de tarjetas"). ---- */
.hist-table{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);overflow:hidden;}
.hist-row{
display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;
border-top:1px solid var(--border-soft);transition:background var(--dur-fast) var(--ease-out);
}
.hist-row:first-child{border-top:none;}
.hist-row:hover{background:var(--surface2);}
.hist-row-icon{
flex-shrink:0;width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
font-size:16px;line-height:1;background:var(--surface2);color:var(--muted);
}
.hist-row-icon.type-chart{background:var(--blue-soft);color:var(--blue);}
.hist-row-icon.type-decision{background:var(--violet-soft);color:var(--violet);}
.hist-row-icon.type-fundamental{background:var(--amber-soft);color:var(--amber);}
.hist-row-main{flex:1 1 auto;min-width:0;}
.hist-row-title{font-family:var(--font-display);font-weight:var(--text-h4-weight);font-size:var(--text-h4-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hist-row-meta{font-size:var(--text-caption-size);color:var(--muted2);margin-top:3px;}
.hist-row-folder{
flex-shrink:0;max-width:130px;font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--muted);
background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-pill);padding:5px 9px;cursor:pointer;
}
.hist-row-badges{flex-shrink:0;display:flex;align-items:center;gap:10px;}
.hist-analysis-number{font-family:var(--font-mono);font-size:11px;color:var(--blue);letter-spacing:.02em;margin-right:4px;}
.hist-row.is-dragging{opacity:.45}.hist-folder-chip.is-drop-target{outline:2px solid var(--blue);outline-offset:2px;background:var(--blue-soft);}
.hist-context-menu{position:fixed;z-index:2000;display:grid;min-width:210px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);}
.hist-context-menu button{border:0;background:transparent;color:var(--text);text-align:left;padding:10px 12px;border-radius:7px;cursor:pointer;font:500 13px var(--font-body)}.hist-context-menu button:hover{background:var(--surface2)}.hist-context-menu .danger{color:var(--red)}
.analysis-identity{display:flex;align-items:center;gap:12px;margin:10px 0 22px;padding:12px 0;border-bottom:1px solid var(--border-soft)}.analysis-identity span{font:700 12px var(--font-mono);color:var(--blue)}.analysis-identity strong{font-size:15px;flex:1}
.apex-share-backdrop{position:fixed;inset:0;z-index:2100;background:#05080c99;display:grid;place-items:center;padding:18px}.apex-share-modal{width:min(520px,100%);background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px;box-shadow:var(--shadow-lg);position:relative}.apex-share-close{position:absolute;right:16px;top:12px;border:0;background:transparent;color:var(--muted);font-size:26px;cursor:pointer}.apex-share-sub{color:var(--muted);font-size:13px}.apex-share-status{margin-top:24px;display:grid;gap:14px;color:var(--text)}.apex-share-status input{width:100%;padding:11px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);font-size:12px}.apex-share-actions{display:flex;gap:8px;flex-wrap:wrap}.apex-share-actions button,.apex-share-status>button{border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:8px;padding:9px 12px;cursor:pointer}.apex-share-actions button:hover,.apex-share-status .primary{border-color:var(--blue);color:var(--blue)}.apex-share-actions .danger{color:var(--red)}
@media(max-width:640px){
.hist-toolbar{flex-direction:column;align-items:stretch;}
.hist-search-wrap{flex:0 0 auto;width:100%;}
.hist-row{flex-wrap:wrap;row-gap:8px;}
.hist-row-folder{order:3;margin-left:48px;}
.hist-row-badges{order:4;margin-left:auto;}
}
/* TAB PRO BADGE — pequeña insignia junto a funciones exclusivas de Pro
en la barra lateral (ej. "Progreso"). Dos estados:
- Free (por defecto): fondo rojo sólido, texto blanco — marca la
función como bloqueada/por desbloquear.
- Pro (.is-pro): fondo transparente, borde rojo fino, texto rojo —
mismo lenguaje visual que el badge de la tarjeta Pro, ya desbloqueada.
line-height:1 (en vez de 1.4) evita que el interlineado desplace el
texto dentro del pill; con inline-flex + align-items:center el
centrado queda exacto en vez de aproximado. */
.tab-badge-pro{
margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
font-size:var(--text-label-size);font-weight:700;letter-spacing:.03em;line-height:1;
color:#fff;background:var(--blue);border:1px solid var(--blue);
border-radius:var(--r-2xs);padding:3px 6px;
}
.tab-badge-pro.is-pro{color:var(--blue);background:transparent;border:1px solid var(--blue);}
.tab-badge-pro.is-max{color:var(--violet);background:transparent;border:1px solid var(--violet);}