/* ════════════════════════════════════════════════════════════════
   KYVEN v2 · OVERRIDES
   ════════════════════════════════════════════════════════════════
   
   Sobrescritura selectiva de clases EXISTENTES en index.html.
   
   ESTRATEGIA:
   Este archivo aplica el look v2 a las clases que YA EXISTEN en 
   la app de Carlos, sin renombrarlas. Code no necesita modificar
   el HTML aquí · solo cargar este archivo.
   
   ⚠️ IMPORTANTE:
   - Los selectores aquí son INTENCIONADAMENTE específicos para 
     que ganen la cascada sobre el CSS original.
   - NO TODAS las clases legacy se sobrescriben aquí · solo las
     más visibles. Para casos puntuales, Code añadirá la clase 
     .kv-* al lado en el HTML (ver migration guide).
   - Si un override rompe algo visualmente, Code lo comenta y 
     consulta con Carlos.
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   ELIMINAR · glows residuales en cards
   El CSS original ponía glow-card en cada card. Lo anulamos
   globalmente para que el ojo descanse.
════════════════════════════════════════════════════════════════ */

/* Anular pseudo-elementos ::after que tenían glow */
.brief-card::after,
.bio-mc::after,
.cmp::after,
.cmp-row::after,
.pilar-card::after,
.obj-card::after,
.hero-state::after,
.hero-card::after,
.card::after,
.score-card::after,
.bio-age-card::after,
.perfil-hero::after,
.plan-card::after,
.trend-card::after,
.corr-card::after,
.hub-cat::after,
.note-card::after,
.detail-h-card::after,
.a1-card::after,
.mec-card::after,
.syn-card::after,
.bio-card-detail::after,
.dose-card::after,
.evidence-card::after,
.risk-card::after,
.wk-card::after,
.ob-aha-card::after,
.ob-plan::after,
.ring-hero::after {
  content: none !important;
  background: none !important;
}


/* ════════════════════════════════════════════════════════════════
   ELIMINAR · sombras triples en cards
   Cambiamos por una sola sombra muy sutil o ninguna.
════════════════════════════════════════════════════════════════ */

body .brief-card,
body .bio-mc,
body .cmp,
body .cmp-row,
body .pilar-card,
body .obj-card,
body .hero-state,
body .hero-card,
body .card,
body .score-card,
body .bio-age-card,
body .perfil-hero,
body .plan-card,
body .trend-card,
body .corr-card,
body .hub-cat,
body .note-card,
body .hist-row,
body .reg-card,
body .mec-card,
body .syn-card,
body .dose-card,
body .evidence-card,
body .risk-card,
body .wk-card,
body .ob-aha-card,
body .ob-plan,
body .ring-hero,
body .a1-card,
body .toma-card,
body .brief-next,
body .setting-row,
body .notif-row,
body .prow {
  box-shadow: var(--sh-card) !important;
}

/* CHEF FIX 3 · Hero brief usa sh-hero (3 capas drop) · paridad maqueta L453
   .hero-state usa --sh-hero multicapa (NO --sh-card). Le da profundidad 3D 
   premium tipo flotación cinematográfica que .brief no tenía. */
body #tab-protocol .brief {
  box-shadow: var(--sh-hero) !important;
}

/* Eliminar gradients en cards hero · color sólido */
body .hero-state,
body .hero-card,
body .score-card,
body .bio-age-card,
body .perfil-hero,
body .plan-card,
body .wk-card,
body .ring-hero,
body .a1-card,
body .ob-aha-card {
  background: var(--card-hi) !important;
}


/* ════════════════════════════════════════════════════════════════
   PADDING & SPACING · cards a sistema v2
════════════════════════════════════════════════════════════════ */

body .brief-card,
body .hero-state,
body .hero-card,
body .ring-hero,
body .score-card,
body .bio-age-card,
body .perfil-hero,
body .plan-card,
body .wk-card,
body .a1-card,
body .ob-aha-card {
  padding: var(--sp-3);   /* 32px · respira como hero */
  border-radius: var(--kv-radius-xl);
}

body .bio-mc,
body .cmp,
body .cmp-row,
body .pilar-card,
body .obj-card,
body .trend-card,
body .corr-card,
body .hub-cat,
body .note-card,
body .reg-card,
body .mec-card,
body .syn-card,
body .toma-card,
body .setting-row,
body .notif-row,
body .prow,
body .hist-row,
body .dose-card,
body .evidence-card,
body .risk-card {
  padding: var(--sp-2);   /* 16px */
  border-radius: var(--kv-radius-lg);
}


/* ════════════════════════════════════════════════════════════════
   TIPOGRAFÍA · números a sans light editorial
════════════════════════════════════════════════════════════════ */

/* Greeting · 34px serif · italic solo nombre */
/* FIX 3 paridad maqueta L147-154 · 30px / -.4px / line 1.1 / margin-bottom 6px
   (era 34px / -.6px / 1.05 / 10px). */
body .greeting,
body .brief-greet {
  font-family: var(--serif) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  color: var(--t1) !important;
  letter-spacing: -.4px !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}
body .greeting em,
body .brief-greet em {
  color: var(--sage-soft) !important;
  font-style: italic !important;
}

/* Hero number · 72px sans light · estilo Apple */
body .hero-num,
body .brief-recovery-num,
body .recovery-hero-num {
  font-family: var(--sans) !important;
  font-size: 72px !important;
  font-weight: 300 !important;
  letter-spacing: -4px !important;
  line-height: 0.85 !important;
  color: var(--gold) !important;
}

/* Bio metric values · sans light 30 */
body .bio-mc-val {
  font-family: var(--sans) !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  letter-spacing: -1.4px !important;
  line-height: 1 !important;
  color: var(--t1) !important;
}

/* Pillar score · sans light 30 */
body .pc-score,
body .pillar-score {
  font-family: var(--sans) !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
}

/* Bio age val · 28px sans light */
body .bio-age-val {
  font-family: var(--sans) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  letter-spacing: -1.2px !important;
  color: var(--gold) !important;
  font-style: normal !important;
}

/* A2 / A1 score letter · serif sin italic */
body .sc-letter,
body .a1-score-val,
body .a2-letter {
  font-family: var(--serif) !important;
  font-style: normal !important;
}

/* Streak num · sans light */
body .streak-num {
  font-family: var(--sans) !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  letter-spacing: -1px !important;
  color: var(--gold) !important;
  font-style: normal !important;
}

/* Toma time · 30px light */
body .toma-time {
  font-family: var(--sans) !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  letter-spacing: -1.5px !important;
  color: var(--gold) !important;
}


/* ════════════════════════════════════════════════════════════════
   ELIMINAR ITALIC REDUNDANTE
   Italic SOLO en: quotes Dr.K · em.gold · nombre del usuario.
   El resto de italic en UI fue ruido decorativo.
════════════════════════════════════════════════════════════════ */

body .greeting-sub,
body .brief-sub,
body .slot-sub,
body .plan-desc,
body .wk-desc,
body .ob-sub,
body .pc-sub,
body .syn-desc,
body .note-body,
body .corr-interp,
body .wr-body,
body .wr-discovery-body,
body .mec-body,
body .bio-age-desc {
  font-style: normal !important;
}


/* ════════════════════════════════════════════════════════════════
   TABS · sage activo (no gold) · sistema unificado
════════════════════════════════════════════════════════════════ */

body .tabs {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 4px;
  display: flex;
  gap: 2px;
}

body .tab {
  flex: 1;
  padding: 10px 6px;
  border-radius: var(--kv-radius-xl);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-align: center;
  color: var(--t3);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--kv-dur-fast);
}

/* CAUSA RAÍZ DEFINITIVA reborde sage · selector erróneo del FASE 2 original
   Apuntaba a .tab.active que NO existe en el subnav (subnav usa .subnav-btn.active)
   pero SÍ existe en el contenedor del Protocolo <div class="tab tab-protocol active">
   pintándolo entero en sage. Lo único visible del sage eran los bordes laterales
   del viewport donde el contenido no llega = reborde que Carlos veía en TODAS
   las capturas. Replazamos por selectores específicos de los botones del subnav. */
body .subnav-btn.on,
body .subnav-btn.active,
body .subnav-btn[aria-selected="true"],
body .tab-sm.on,
body .tab-sm.active,
body .tab-sm[aria-selected="true"] {
  background: var(--sage) !important;
  color: var(--bg) !important;
  font-weight: 700;
}

/* Anular el tab-sm legacy · ahora todas las tabs son iguales */
body .tab-sm {
  font-size: 10px !important;
  letter-spacing: 1.6px !important;
  padding: 10px 6px !important;
}


/* ════════════════════════════════════════════════════════════════
   BOTTOM NAV · gold pill active
════════════════════════════════════════════════════════════════ */

body .bnav,
body .bottom-nav,
body .tab-bar {
  /* Sprint fondo-nav-identidad · nav píldora flotante · estilo WHOOP, color KYVEN
     - bg #1C2A24 (Quick Win #2: nav queda MÁS OSCURO que --card #26392F y
       --card-hi #2F4639 · cards aireadas, nav contenido) · presencia clara
     - margin 12px lateral + inferior · separación de bordes
     - border-radius 24px píldora
     - border sutil + box-shadow flotación
     - padding interno preservando safe-area-inset-bottom */
  background: #1C2A24 !important;
  border-top: 0 !important;
  border: 0.5px solid rgba(230,226,218,0.10) !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
  /* safe-area-bottom en MARGIN (no padding) · el nav mantiene IGUAL altura interior
     en Safari y PWA · en PWA flota más arriba para no chocar con home indicator iOS */
  margin: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px !important;
  padding: 9px 4px 8px !important;
}

body .ni,
body .nav-item {
  position: relative;
}

body .ni.on::before,
body .ni.active::before,
body .nav-item.on::before {
  content: '';
  position: absolute;
  top: -2px;
  width: 38px; height: 28px;
  border-radius: 8px;
  background: rgba(200,164,90,0.08);
}

body .ni.on .ni-lbl,
body .ni.active .ni-lbl,
body .nav-item.on .ni-lbl {
  color: var(--gold) !important;
  font-weight: 700;
}

body .ni.on .ni-ic svg *,
body .ni.active .ni-ic svg * {
  stroke: var(--gold) !important;
}


/* ════════════════════════════════════════════════════════════════
   SECTION HEADERS · respiración 64px
════════════════════════════════════════════════════════════════ */

body .section-hdr,
body .section-header {
  margin-top: var(--sp-4) !important;
  margin-bottom: var(--sp-2) !important;
}

body .section-hdr:first-of-type,
body .section-header:first-of-type {
  margin-top: var(--sp-3) !important;
}

body .sh-title,
body .section-title {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 2.8px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
}


/* ════════════════════════════════════════════════════════════════
   DR. KYVEN QUOTE · italic Playfair (mantener)
   Solo esto mantiene italic. El resto NO.
════════════════════════════════════════════════════════════════ */

body .drk-quote,
body .drk-bubble .drk-btxt,
body [data-drk-quote] {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: var(--t2) !important;
  line-height: 1.55 !important;
}

body .drk-quote strong,
body .drk-bubble .drk-btxt strong {
  color: var(--gold) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

body .drk-quote em.gold,
body .drk-bubble .drk-btxt em.gold {
  color: var(--gold) !important;
  font-style: italic !important;
}


/* ════════════════════════════════════════════════════════════════
   GRID 30 DÍAS · DEPRECATED · bloque sparkline editorial legacy
   ELIMINADO 13/05/2026 · causaba bug de layering con FIX 10
   (heights variables 100%/75%/50%/28%/12% colisionaban con
   aspect-ratio:1 del FIX 10 · celdas gold gigantes superpuestas
   con progress bar y subnav).
   La regla nueva paridad maqueta L607-620 vive en el bloque
   "FASE 3.1 · FIX 10 · CONSTANCIA 30 DÍAS" más abajo en este
   archivo (grid de 15 cols con celdas cuadradas).
   Selectores .streak-grid sin uso real tras refactor.
════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   PUSH NOTIFICATIONS UI · respeta el sistema
════════════════════════════════════════════════════════════════ */

body .notif-row {
  background: rgba(230,226,218,0.025) !important;
  border-radius: var(--kv-radius-md) !important;
  padding: var(--sp-2) !important;
}


/* ════════════════════════════════════════════════════════════════
   COMPATIBILIDAD · scroll smooth · phone shell base
════════════════════════════════════════════════════════════════ */

body {
  scroll-behavior: smooth;
}

/* Si el body usa una clase phone-frame, aplicamos glow ambient */
body.app-loaded,
.phone,
.app-shell {
  position: relative;
}
/* CHEF FIX 1 · Glow ambient cubre TODO el shell · paridad maqueta .phone::before
   con inset:0 (L94-98 master). .app-shell tiene overflow:hidden legacy
   (index.html L504) · el glow queda contenido sin generar reborde sage.
   ANTES height:240px cortaba el matiz sage solo arriba (negro plano abajo). */
.app-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glow-ambient);
  pointer-events: none;
  z-index: 1;
}
/* CHEF FIX 2 · :not(.bottom-nav) preserva position:fixed del bottom-nav legacy
   (index.html L6213-6223). Sin esta exclusión, la nav cae en flujo flex. */
.app-shell > *:not(.bottom-nav) {
  position: relative;
  z-index: 2;
}


/* ════════════════════════════════════════════════════════════════
   FASE 2 · KYVEN v2 · ITALIC EDITORIAL · sage-soft con glow sutil
   Carlos AUTORIZÓ añadir esta regla (mensaje 13/05/2026).

   Problema: .kv-hero-title em define color sage-soft + italic, pero
   visualmente no se distingue claramente sobre el resto del texto
   paper. Añadimos text-shadow para diferenciar el primer nombre
   sin cambiar el color de marca.

   Selector aplica a:
   · #id-hero-name (header del Perfil)
   · Cualquier futuro .kv-hero-title con <em> en hero cards (greeting
     de Protocolo en FASE 3, mensajes Dr.K en FASE 5, etc.)
════════════════════════════════════════════════════════════════ */

body .id-name.kv-hero-title em,
body #id-hero-name em,
body .kv-hero-title em {
  color: var(--sage-soft) !important;
  font-style: italic !important;
  font-weight: 500;
  text-shadow: 0 0 12px rgba(133, 190, 170, 0.25);
}


/* ════════════════════════════════════════════════════════════════
   FASE 2 (cobertura global) · KYVEN v2 · TABS ACTIVOS A SAGE
   Carlos AUTORIZÓ regla agresiva sin depender de .kv-tab
   (mensaje 13/05/2026).

   Cubre TODAS las sub-tabs de la app sin tocar HTML:
   · subnav-btn.active en Protocolo HOY/SEMANA/MES (3 tabs · L15261-63)
   · subnav-btn.active en BIO HOY/REGISTRAR/ANALÍTICAS/HISTORIAL (4 tabs · L15316-19)
   · subnav-btn.active en INSIGHTS RESUMEN/TENDENCIAS/CORRELAC/NOTAS (4 tabs · L15759-62)
   · subnav-btn.active en PERFIL DATOS/PLAN/AJUSTES (3 tabs · L16164-66 · ya con .kv-tab)
   · bill-toggle .active en Plan MENSUAL/ANUAL (L16307-08)
   · kv-tab.on / .kv-tab.active (Perfil + futuras fases)
   · [role="tab"][aria-selected="true"] (future-proof · 0 usos hoy)

   NO afecta (verificado en auditoría · 13/05/2026):
   · .nav-item.active (bottom nav · mantiene gold por design)
   · .ob-drmode-card.active (onboarding modo Dr.K · su propio look)
   · .ob-notif-toggle.active (onboarding notif toggle · su propio look)
   · .wk-btn (GENERAR WEEKLY REVIEW · CTA gold intacto)
   · .snd-btn (Enviar Dr.K · CTA gold intacto)
   · .chk.done (Compounds done check · gold intacto)

   Specificity body .subnav-btn.active = 0,2,1 (21) vence al legacy
   .subnav-btn.active (0,2,0 = 20) + !important para mayor robustez.
════════════════════════════════════════════════════════════════ */

body .subnav-btn.active,
body .bill-toggle .active,
body .bill-toggle button.active,
body .kv-tab.on,
body .kv-tab.active,
body [role="tab"][aria-selected="true"],
body [role="tab"].active {
  background: var(--sage) !important;
  background-image: none !important;
  color: var(--bg) !important;
  font-weight: 700;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Hover/focus del estado activo: mantener sage, no volver a gold */
body .subnav-btn.active:hover,
body .subnav-btn.active:focus,
body .bill-toggle .active:hover,
body .bill-toggle .active:focus,
body .kv-tab.on:hover,
body .kv-tab.on:focus {
  background: var(--sage) !important;
  background-image: none !important;
  color: var(--bg) !important;
}


/* ════════════════════════════════════════════════════════════════
   FASE 3.1 · KYVEN v2 · PROTOCOLO HERO REESTRUCTURA
   Carlos AUTORIZÓ esta regla (mensaje 13/05/2026).

   Aplica look v2 a los nuevos elementos del hero del Protocolo
   tras reestructura (HTML refactorizado a hero-num grande Recovery
   + 2 satellites HRV/ADHERENCIA · paridad maqueta L3737-3764).

   Correcciones Carlos:
   1 · Override 72px sans light para brief-hero-num + kv-hero-num
       (el existente body .hero-num NO matchea estos selectores)
   2 · Anular pseudo-elementos legacy .brief::before/::after
       (halo gold radial + línea gold horizontal que chocan con
       look limpio v2) + reset padding al sistema --sp-N

   NO se aplica a sub-fases siguientes (grid-30 = 3.2 ·
   toma/progress look v2 = 3.3 · compound cards = 3.4 · streak
   danger = 3.5).
════════════════════════════════════════════════════════════════ */

/* Eyebrow editorial con dot sage · cubre .brief-eyebrow y futuros .kv-eyebrow */
body .kv-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--t3);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
body .kv-eyebrow-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 8px rgba(107, 168, 142, 0.55);
  flex-shrink: 0;
}

/* Greeting block (greeting + sub) fuera del hero */
/* FIX A · paridad maqueta L444 · margin-bottom 24px (era 64px innecesario) */
body .brief-greeting-block {
  margin: 16px 0 24px !important;
}
body .kv-body-sub {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--t3);
  line-height: 1.5;
  letter-spacing: -.1px;
  margin-top: var(--sp-1);
}

/* BUG 1 · solo anular ::before legacy (halo gold radial)
   ::after queda DISPONIBLE para el glow-card del FIX I.3 abajo. */
body #tab-protocol .brief::before {
  display: none !important;
}

/* FIX E paridad maqueta L447-456 · brief hero card · padding 22px exacto */
body #tab-protocol .brief,
body #tab-protocol .brief.kv-hero-card {
  background: var(--card-hi) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-xl) !important;
  padding: 22px !important;
  overflow: visible !important;
  position: relative !important;
}

/* FIX I.3 · glow-card sutil en hero brief · paridad maqueta L457-460
   BUG 1.B · display:block defensivo (la regla legacy anulaba con display:none) */
body #tab-protocol .brief::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--glow-card) !important;
  pointer-events: none !important;
  border-radius: var(--kv-radius-xl) !important;
}
body #tab-protocol .brief > * {
  position: relative !important;
  z-index: 1 !important;
}

/* FIX I.4 · glow-card en card siguiente toma · paridad maqueta */
body #tab-protocol .brief-next {
  position: relative !important;
  overflow: hidden !important;
}
body #tab-protocol .brief-next::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--glow-card) !important;
  pointer-events: none !important;
  border-radius: var(--kv-radius-lg) !important;
}
body #tab-protocol .brief-next > * {
  position: relative !important;
  z-index: 1 !important;
}

/* FIX 2 paridad maqueta L468-475 · 64px BOLD / -3px / line 0.85
   Carlos AUTORIZÓ 64px / 600 (era 56px / 300 light · ahora bold masivo). */
body .brief-hero-num,
body .kv-hero-num {
  font-family: var(--sans) !important;
  font-size: 64px !important;
  font-weight: 600 !important;
  letter-spacing: -3px !important;
  line-height: 0.85 !important;
  color: var(--gold) !important;
}
/* DEPRECATED · kv-hero-num-unit / brief-hero-side / brief-hero-label / brief-hero-state-sub
   sustituidos por FIXES G + H abajo (con vertical-align super y flex-direction column).
   Solo .brief-hero-main queda aquí (no se duplica). */
body .brief-hero-main {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: var(--sp-2);
}

/* Drk-quote · regla DEPRECATED · sustituida por FIX K abajo (sin background tintado · paridad maqueta) */

/* Satellites grid 2 columnas con divider superior */
body .brief-hero-satellites {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(230, 226, 218, 0.05);
  margin-top: var(--sp-2);
}
body .brief-sat-lbl {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--t3);
  text-transform: uppercase;
  margin-bottom: 4px;
}
/* FIX 5 paridad maqueta L512-518 · 20px BOLD 600 (era 22px / 400) */
body .brief-sat-val {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
  letter-spacing: -.6px !important;
  line-height: 1 !important;
}
body .brief-sat-val small {
  font-size: 11px;
  color: var(--t3);
  font-family: var(--mono);
  margin-left: 2px;
  font-weight: 400;
}
body .brief-sat-delta {
  font-family: var(--mono);
  font-size: 10px;
  margin-left: 6px;
  letter-spacing: 0;
  font-weight: 500;
}
body .brief-sat-delta.pos { color: var(--sage); }
body .brief-sat-delta.neg { color: var(--clay); }

/* Hero num Recovery · animación respiración kv-num-breath (ya activa de FASE 4.3 anterior) */
body #brief-hero-num.kv-hero-num {
  animation: kv-num-breath 4.2s ease-in-out infinite;
}


/* ════════════════════════════════════════════════════════════════
   FASE 3.1 PULIDO TOTAL · 11 fixes (A-K · 13/05/2026)
   Carlos AUTORIZÓ aplicar todo en el mismo PR design-v2-fase3-1.

   A · ::before global anulado (aplicado arriba L480 en bloque previo)
   B · Progress bar sage (no gold) · paridad maqueta L292-302
   C · Subnav píldora con sage activo brillante · paridad maqueta L263-288
   D · Header KYVEN + avatar arriba del Protocolo · maqueta L3724-3727
   E · Sub-greeting italic Playfair (clase .brief-greet-sub) · maqueta L166-172
   G · Hero unit % elevado tipo superscript
   H · Label/state-sub del hero en columna
   I · Card siguiente toma con time 32px + eta · maqueta L3771-3780
   J · Section header SIGUIENTE ACCIÓN · maqueta L175-195
   K · Drk-quote sin background tintado + divider satellites · maqueta L3750-3752
════════════════════════════════════════════════════════════════ */

/* FIX B · Progress bar Protocolo · SAGE sólido (paridad maqueta L292-302) */
body #brief-pgr-fill,
body #tab-protocol .brief-pgr-fill {
  background: var(--sage) !important;
  height: 4px !important;
  border-radius: var(--kv-radius-pill) !important;
}
body #tab-protocol .brief-pgr-track {
  background: var(--stroke) !important;
  height: 4px !important;
  border-radius: var(--kv-radius-pill) !important;
  overflow: hidden;
}

/* FIX C · Subnav HOY/SEMANA/MES forma píldora · paridad maqueta L263-288 */
body #tab-protocol .subnav,
body #tab-bio .subnav,
body #tab-insights .subnav,
body #tab-profile .subnav {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 22px !important;
  padding: 4px !important;
  gap: 2px !important;
  box-shadow: none !important;
  display: flex !important;
  margin: 0 0 var(--sp-2) !important;
}
body .subnav-btn {
  border-radius: var(--kv-radius-xl) !important;
  padding: 10px 0 !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
  text-align: center !important;
  color: var(--t3) !important;
  background: transparent !important;
  border: none !important;
  flex: 1 !important;
  transition: all .2s ease !important;
}
body .subnav-btn.active {
  background: var(--sage) !important;
  color: var(--bg) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(107, 168, 142, 0.25) !important;
  border-radius: var(--kv-radius-xl) !important;
}

/* FIX D · Header KYVEN + avatar · paridad maqueta L3724-3727
   stroke vía currentColor · el color heredado del .brief-avatar-btn pinta el svg */
body .brief-top-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1) 0 var(--sp-3);
}
/* FIX 1 paridad maqueta L421-426 · 17px / letter-spacing 6px (era 14px / 3px)
   !important defensivo (audit · no hay competidor actual pero blindar contra
   futuras adiciones legacy con higher specificity sin !important). */
body .brief-wordmark {
  font-family: var(--mono) !important;
  font-size: 17px !important;
  letter-spacing: 6px !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
body .brief-wordmark-dot {
  color: var(--gold);
  font-size: 18px;
  margin-left: 2px;
  top: -1px;
  position: relative;
}
/* Avatar header eliminado a petición de Carlos · redundante con la tab PERFIL · no aporta nada ahí. */
body .brief-avatar-btn { display: none !important; }
body ._brief-avatar-btn-legacy {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gold-line);
  color: var(--gold-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
body .brief-avatar-btn:active {
  transform: scale(0.95);
  transition: transform .15s;
}

/* FIX E + L · Sub-greeting · italic Playfair · COLOR T3 GRIS (no gold)
   Specificity reforzada para vencer regla legacy #tab-protocol .brief-greet em
   (index.html L13881) que pintaba em interno gold. */
/* FIX 4 paridad maqueta L160-165 · 14px (era 16px) */
body #tab-protocol #brief-greet-sub,
body #tab-protocol .brief-greet-sub,
body .brief-greet-sub {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 14px !important;
  color: var(--t3) !important;
  line-height: 1.4 !important;
  letter-spacing: -.1px !important;
  margin: 4px 0 var(--sp-3) !important;
}
body #tab-protocol .brief-greet-sub em,
body #tab-protocol .brief-greet-sub strong {
  color: var(--t3) !important;
  font-style: italic !important;
}

/* FIX C paridad maqueta L476-481 · 22px / 400 BASELINE (era 20px/300 superscript)
   Eliminado vertical-align super + position relative + top negativo. */
body .kv-hero-num-unit {
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--gold-mute) !important;
  margin-left: 2px !important;
}

/* FIX H · Hero side · label arriba + state-sub debajo en columna */
body .brief-hero-side {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-bottom: 6px;
}
body .brief-hero-label {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.25em !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
}
/* FIX 8 paridad maqueta L490-495 · 9px / 1.5px (era 10px / 0.15em) */
body .brief-hero-state-sub {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;
}

/* FIX I · Card SIGUIENTE TOMA · look maqueta L3771-3780
   Border-left gold · time 32px sans light · eta debajo en mono */
/* CHEF FIX 4 · brief-next paridad maqueta .toma-card L537-547
   ANTES: card-hi + padding sp-3 = card lavada y +14px ancho extra
   AHORA: card sólido + padding 16px 18px exacto maqueta */
body .brief-next {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-left: 2px solid var(--gold) !important;
  border-radius: var(--kv-radius-lg) !important;
  padding: 16px 18px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 0 var(--sp-3) !important;
  gap: var(--sp-2);
}
/* CHEF FIX 4b · brief-next-lbl paridad maqueta L548-555 (8.5px / 2.5px / mb 6px) */
body .brief-next-lbl {
  font-family: var(--mono) !important;
  font-size: 8.5px !important;
  letter-spacing: 2.5px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
/* FIX 7 paridad maqueta L556-561 · 16px / 500 / -.2px (era 17px / 400 / -.3px) */
body .brief-next-name {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -.2px !important;
  line-height: 1.2 !important;
}
body .brief-next-right {
  text-align: right;
  flex-shrink: 0;
}
/* FIX 6 paridad maqueta L562-569 · 28px BOLD 600 / -1px (era 32px light / -1.4px) */
body .brief-next-time {
  font-family: var(--sans) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
  text-align: right !important;
}
body .brief-next-eta {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  color: var(--t4) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

/* FIX J · Section header · mono editorial · paridad maqueta L175-195 */
body .brief-sec-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  /* CHEF FIX 5 · paridad maqueta L168-173 · --section-top 28px / --section-bot 14px
     (sustituimos var(--sp-3) 0 var(--sp-2) que daba 32px/16px) */
  margin: 28px 0 14px;
}
body .brief-sec-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.8px;
  color: var(--t3);
  text-transform: uppercase;
}
body .brief-sec-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--t4);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* FIX D paridad maqueta L240-260 · 14px + bg tint sutil + border-radius derecho
   + strong sage-soft (era 15px / bg transparent / radius 0 / strong t1). */
body .kv-drk-quote {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 14px !important;
  color: var(--t2) !important;
  line-height: 1.55 !important;
  padding: 12px 14px !important;
  background: rgba(230, 226, 218, 0.025) !important;
  border-left: 2px solid var(--sage) !important;
  border-radius: 0 8px 8px 0 !important;
  margin: var(--sp-2) 0 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  overflow: visible !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body .kv-drk-quote strong {
  color: var(--sage-soft) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}
body .kv-drk-quote em {
  color: var(--gold) !important;
  font-style: italic !important;
}

/* FIX M (cont.) · contenedores padres del quote NO deben recortarlo */
body .brief-hero-main {
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

/* FIX N + F1 · padding-bottom suficiente para que el contenido del Protocolo
   no se corte por el bottom nav · safe-area añadido (FIX F1 reforzado) */
body #tab-protocol .tab-scroll {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: var(--sp-2) !important;
}
body #tab-protocol .screen {
  padding: 0 14px !important;
}

/* CHEF FIX 8 · CAUSA RAÍZ DEFINITIVA fondo plano · #tab-protocol.active y
   #tab-protocol .screen tienen bg:var(--cream) en index.html L14098 + L14109
   que tapaban EL ::before del .app-shell (glow ambient sage). El .app-shell
   ya pinta var(--kvn-bg-app, #06110E) como base · estos hijos NO necesitan bg propio.
   Con transparente, el glow CHEF FIX 1+7 (inset:0 + opacity 0.22) finalmente
   se ve en TODA la pantalla del Protocolo · paridad maqueta total. */
body #tab-protocol.active,
body #tab-protocol .screen {
  background: transparent !important;
}

/* FIX FINAL REBORDE · sincronizar .app-shell con body
   --cream alias --night = #060c08 (app-shell) vs body var(--kvn-bg-app, #06110E). */
body .app-shell,
body.app-loaded .app-shell {
  background: var(--kvn-bg-app, #06110E) !important;
}

/* BUG 1 + sprint fondo-nav-identidad · html con MISMO gradient que body
   Razón previa (overscroll iOS): index.html L271 pinta html { background: var(--night) }
   = #060c08 · iOS Safari overscroll mostraba el color del <html>, no del body.
   Razón actual: el body usa gradient forest 3 paradas (#08130F → var(--kvn-bg-app, #06110E) → #050E0B).
   Si html sigue plano var(--kvn-bg-app, #06110E), donde asome el html (overscroll, safe-area-bottom),
   queda más claro que el bottom del gradient (#050E0B) → franja visible.
   Solución: dar al html el MISMO color solid que body · continuidad perfecta
   html ↔ body en cualquier asomo (overscroll, safe-area-bottom). */
html {
  /* GC-FRANJA-FIX jun 11 · ver index.html:441 · solid color elimina el bug iOS PWA (attach fixed) */
  background: var(--kvn-bg-app, #050E0B) !important;
}

/* FIX B paridad maqueta L128-134 · 9px / letter-spacing 2.8px (era 9.5px / 0.18em)
   La legacy #tab-protocol .brief-eyebrow L13844 con letter-spacing 0.26em pintaba gold.
   Override final · color t3 + tracking 2.8px editorial. */
body #tab-protocol .brief-eyebrow,
body #brief-eyebrow,
body .brief-eyebrow.kv-eyebrow {
  color: var(--t3) !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 2.8px !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  margin-bottom: 14px !important;
  padding-right: 0 !important;
}
/* Anular pseudo-element ::before del legacy que pinta dot gold · usamos kv-eyebrow-dot HTML */
body #tab-protocol .brief-eyebrow::before {
  display: none !important;
}
body #tab-protocol .brief-eyebrow .kv-eyebrow-dot {
  background: var(--sage) !important;
}

/* FIX D1 + 3 · Quote drk wrap multi-línea + overflow visible · MEGA-FIX
   Anula overflow:hidden del .brief legacy (index.html L13808) + asegura
   wrap con overflow-wrap: anywhere + box-sizing */
body .kv-drk-quote,
body #brief-drk-quote {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  max-width: 100% !important;
  width: auto !important;
  display: block !important;
  text-overflow: clip !important;
  box-sizing: border-box !important;
}
body #tab-protocol .brief,
body #tab-protocol #protocol-brief,
body #tab-protocol .brief.kv-hero-card,
body .kv-hero-card {
  overflow: visible !important;
}

/* FIX D2 + 5 · Hero num unit % SIN glow gold (solo anti-glow · sizing en FIX C arriba) */
body .kv-hero-num-unit,
body #brief-hero-num .kv-hero-num-unit,
body .brief-hero-num .kv-hero-num-unit {
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
  opacity: 0.85 !important;
}

/* FIX F2 · brief-next-eta · display block visible (refuerzo) */
body .brief-next-eta,
body #brief-next-eta {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  color: var(--t4) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
  display: block !important;
  opacity: 1 !important;
}


/* ════════════════════════════════════════════════════════════════
   FASE 3.1 · CARDS COMPUESTOS PARIDAD MAQUETA L678-728
   Carlos AUTORIZÓ esta regla · CSS-ONLY · NO toca renderToday().

   CRÍTICO · ANIMACIONES PRESERVADAS:
   · compound-check (index.html L10603) · NO tocar
   · cmp-confetti-1 a -6 (L10621-10626) · NO tocar
   · cmp-icon-pop (L10635) · NO tocar
   · .compound-card.just-completed .cmp-check trigger · NO tocar

   CRÍTICO · cmp-ficha-hint ES FUNCIONAL (toggle ficha clínica
   .cmp-note). JS L34945-34962 le añade handler de click.
   MANTENER visible · NO display:none · solo restilizar.
════════════════════════════════════════════════════════════════ */

/* Card base · paridad maqueta L678-690 · padding 14px exacto · gap 12px · margin-bottom 8px */
body #tab-protocol .compound-card {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-lg) !important;
  padding: 14px !important;
  box-shadow: var(--sh-soft) !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: hidden !important;
}
body #tab-protocol .compound-card::before {
  display: none !important;
}

/* CHEF FIX 11 · FASE 3.1 · forzar flex:1 en .cmp-main + 0 en wrapper icon
   Causa raíz: override L1168 cambia display:grid→flex pero grid-template
   -columns "44px 1fr auto" queda inerte sobre flex. Sin flex:1 explícito
   en hijos, .cmp-main shrinka a content-size → .cmp-check queda flotando.
   Cards de nombre corto (NAC, Q10, NAD+) lo exponen visualmente. Confirmado
   con DevTools en sesión real Carlos: NAC tiene .cmp-main w=75, x_check=581
   en vez de borde derecho. */
body #tab-protocol .compound-card .cmp-main {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Card completada · border sage sutil · bg igual */
body #tab-protocol .compound-card.completed {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid rgba(107, 168, 142, 0.18) !important;
}
body #tab-protocol .compound-card.completed::before {
  display: none !important;
}

/* Icono cuadrado sutil · paridad maqueta .cmp-ic */
body #tab-protocol .cmp-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(230, 226, 218, 0.04) !important;
  background-image: none !important;
  border: 1px solid var(--stroke) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body #tab-protocol .compound-card.completed .cmp-icon {
  background: rgba(230, 226, 218, 0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(107, 168, 142, 0.12) !important;
}
/* FIX 6 · stroke gold-soft (paridad maqueta L3817 con rgba(200,164,90,0.55))
   Era paper rgba 0.55 que daba look frío · ahora gold sutil cálido. */
body #tab-protocol .cmp-icon svg,
body #tab-protocol .cmp-icon svg * {
  stroke: rgba(200, 164, 90, 0.55) !important;
  fill: none !important;
}

/* Nombre del compuesto */
body #tab-protocol .cmp-name {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 2px !important;
}
body #tab-protocol .compound-card.completed .cmp-name {
  color: var(--t3) !important;
  /* P1.4 · sin strikethrough · la atenuación de la card .completed
     (opacity 0.42 + saturate 0.6 · ver bloque ELEVACIÓN final) basta
     para indicar tomado. Strikethrough se sentía Todoist/utility. */
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* Dose */
body #tab-protocol .cmp-dose {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: var(--t3) !important;
  letter-spacing: 0.5px !important;
}

/* Check pendiente · solo border sutil · gold gradient OFF */
body #tab-protocol .compound-card .cmp-check,
body #tab-protocol .compound-card .chk,
body #tab-protocol .compound-card .check-status {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid rgba(230, 226, 218, 0.10) !important;
  box-shadow: none !important;
}

/* Check completado · SAGE (no gold legacy) · paridad maqueta */
body #tab-protocol .compound-card.completed .cmp-check,
body #tab-protocol .compound-card.completed .chk,
body #tab-protocol .compound-card.completed .check-status {
  background: var(--sage) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(107, 168, 142, 0.2) !important;
}
/* BUG 2 · palomito visible · stroke var(--kvn-bg-app, #06110E) + width 3px + dimensiones explícitas
   Antes stroke: var(--bg) + stroke-width heredado 2.5 → palomito invisible
   sobre sage por bajo contraste con anti-aliasing iOS. Ahora stroke 3px sobre
   sage da contraste sólido y palomito claramente visible. */
body #tab-protocol .compound-card.completed .cmp-check svg,
body #tab-protocol .compound-card.completed .chk svg,
body #tab-protocol .compound-card.completed .check-status svg {
  stroke: var(--kvn-bg-app, #06110E) !important;
  stroke-width: 3 !important;
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
}
body #tab-protocol .compound-card.completed .cmp-check svg path,
body #tab-protocol .compound-card.completed .chk svg path,
body #tab-protocol .compound-card.completed .check-status svg path,
body #tab-protocol .compound-card.completed .cmp-check svg polyline,
body #tab-protocol .compound-card.completed .chk svg polyline,
body #tab-protocol .compound-card.completed .check-status svg polyline {
  stroke: var(--kvn-bg-app, #06110E) !important;
  stroke-width: 3 !important;
  fill: none !important;
}

/* cmp-ficha-hint · FUNCIONAL (toggle .cmp-note vía JS L34945)
   NO display:none · restilizar v2 manteniendo cursor pointer */
body #tab-protocol .cmp-ficha-hint {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  opacity: 0.7 !important;
  font-weight: 400 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 4px !important;
}
body #tab-protocol .cmp-ficha-hint::after {
  color: var(--t3) !important;
  opacity: 0.8 !important;
}
body #tab-protocol .cmp-ficha-hint:active {
  opacity: 1 !important;
}
body #tab-protocol .compound-card.completed .cmp-ficha-hint {
  opacity: 0.5 !important;
}

/* Chevron sutil */
body #tab-protocol .compound-card .chevron,
body #tab-protocol .compound-card svg.chevron-right {
  color: var(--t3) !important;
  opacity: 0.5 !important;
}


/* ════════════════════════════════════════════════════════════════
   FASE 3.1 · FIX 10 · CONSTANCIA 30 DÍAS · paridad maqueta L3787-3789
   Grid 30 celdas + streak-num · pintado por renderStreakGrid30()
════════════════════════════════════════════════════════════════ */

/* Streak num · días activos · contador junto al título CONSTANCIA */
body .brief-streak-num {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  letter-spacing: -.5px !important;
  font-family: var(--sans) !important;
}
body .brief-streak-num span {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: var(--t3) !important;
  letter-spacing: 1.5px !important;
  margin-left: 4px !important;
  font-weight: 400 !important;
}
body .brief-streak-num strong {
  color: var(--gold) !important;
  font-weight: 600 !important;
}

/* grid-30 · BAR CHART VERTICAL paridad master 2 html L602-620
   30 cols × 1 fila · cada celda altura variable según adherencia · gold + opacity */
body .grid-30 {
  display: grid !important;
  grid-template-columns: repeat(30, 1fr) !important;
  gap: 3px !important;
  height: 28px !important;
  align-items: end !important;
  padding-top: 8px !important;
  margin-bottom: var(--sp-3) !important;
}
body .grid-30 .gd {
  aspect-ratio: unset !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 1.5px !important;
  align-self: end !important;
  transition: height .3s ease !important;
  background: rgba(200, 164, 90, 0.18) !important;
  /* reset padding/font-size legacy de .empty (colisión con padding:30px del placeholder vacío) */
  padding: 0 !important;
  font-size: 0 !important;
}
body .grid-30 .gd.full  { background: var(--gold) !important; height: 100% !important; opacity: 1 !important; }
body .grid-30 .gd.high  { background: var(--gold) !important; height: 75% !important; opacity: 0.82 !important; }
body .grid-30 .gd.mid   { background: var(--gold) !important; height: 50% !important; opacity: 0.62 !important; }
body .grid-30 .gd.low   { background: var(--gold) !important; height: 28% !important; opacity: 0.4 !important; }
body .grid-30 .gd.empty { background: rgba(230, 226, 218, 0.42) !important; height: 12% !important; opacity: 1 !important; }

/* Progress num · paridad maqueta L636-646 */
body .brief-pgr-num {
  color: var(--t2) !important;
  font-size: 13px !important;
  font-family: var(--mono) !important;
}
body .brief-pgr-num strong {
  color: var(--t1) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-family: var(--sans) !important;
}
body .brief-pgr-num span {
  color: var(--t3) !important;
  font-family: var(--mono) !important;
}


/* ════════════════════════════════════════════════════════════════
   FASE 3.1 · FIX 11 · SLOT HEADER look v2 paridad maqueta L649-675
   CSS-only override de .time-header (renderToday no se toca).
   Las clases legacy .time-label/.time-hour/.time-period reciben
   look mono editorial. Italic Playfair para el subtítulo (Ventana
   cognitiva). Dots numéricos legacy ocultados.
════════════════════════════════════════════════════════════════ */
body #tab-protocol .time-header,
body #tab-protocol .time-group .time-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 14px !important;
  padding: var(--sp-2) 0 var(--sp-1) !important;
  background: transparent !important;
  border: none !important;
}
body #tab-protocol .time-header::after,
body #tab-protocol .time-header::before {
  display: none !important;
}
body #tab-protocol .time-header .time-hour,
body #tab-protocol .time-header .time-label {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  color: var(--t2) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  background: transparent !important;
}
body #tab-protocol .time-header .time-period,
body #tab-protocol .time-header .time-subtitle {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 12px !important;
  color: var(--t3) !important;
  margin-left: 8px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body #tab-protocol .time-header .time-count {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: none !important;
}
body #tab-protocol .time-header .time-dots {
  display: none !important;
}

/* FIX 4 · slot header subtitle italic paridad maqueta L3848
   renderToday() inyecta data-period y data-period-label en el time-header.
   Aquí pintamos la etiqueta como pseudo ::after italic al lado del time-hour. */
body #tab-protocol .time-header[data-period]::after {
  content: attr(data-period-label);
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--t3);
  margin-left: 8px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  position: static;
  background: none;
  height: auto;
  opacity: 1;
  display: inline;
}

/* FIX 7 · spacers paridad maqueta L3834 y L3842
   (maqueta usa <div style="height:18px"></div> y <div style="height:22px"></div>
   entre progress/subnav y subnav/slot). Implementado como margin-bottom para
   no añadir HTML adicional. */
body #tab-protocol .brief-pgr-track {
  margin-bottom: 18px !important;
}
body #tab-protocol .subnav {
  margin-bottom: 22px !important;
}


/* ════════════════════════════════════════════════════════════════
   FASE 3.1 · FIX 12 · NOW MARKER "AHORA · 12:55" look v2
   Pill outline gold sutil · sin background tintado fuerte
════════════════════════════════════════════════════════════════ */
body #tab-protocol .now-marker,
body #tab-protocol .now-marker-pill {
  background: transparent !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: var(--kv-radius-pill) !important;
  padding: 4px 14px !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--gold-mute) !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
body #tab-protocol .now-marker-dot {
  background: var(--gold) !important;
  box-shadow: 0 0 6px rgba(200, 164, 90, 0.5) !important;
}
body #tab-protocol .now-marker-time {
  color: var(--gold-mute) !important;
}


/* ════════════════════════════════════════════════════════════════
   FASE 3.1 · BOTTOM NAV PILL · paridad maqueta L390-410
   Pseudo ::before con background pill gold sutil detrás del activo.
   NO modifica el underline ni el stroke gold del icono · solo
   añade un pill behind para enriquecer el activo.
════════════════════════════════════════════════════════════════ */

body .nav-item {
  position: relative !important;
}
body .nav-item.active::before {
  content: '' !important;
  position: absolute !important;
  top: -2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 38px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(200, 164, 90, 0.08) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
body .nav-item.active .nav-icon,
body .nav-item.active .nav-label {
  position: relative !important;
  z-index: 1 !important;
}


/* ════════════════════════════════════════════════════════════════
   FIN · kyven-v2-overrides.css

   NOTA PARA CODE:
   Si encuentras un componente que NO se ve bien después de cargar
   este archivo, NO lo "arregles" modificando este archivo.
   En su lugar:
   1. Anota el problema
   2. Comenta con Carlos
   3. Considera si necesita override aquí o componente kv-* nuevo
════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   FASE 4.1 · BIO · paridad maqueta master v2 (31 CHEF FIXES)
   ════════════════════════════════════════════════════════════════
   
   Mandato Carlos (recuperado de chat 13 mayo 2026):
   "La maqueta la construimos para hacer un diseño nuevo, en plan de 
   que el usuario estuviera más cómodo y pudiera pasar más horas 
   dentro de la aplicación, y no fuera tan saturante."
   
   Aplicar lenguaje visual maqueta master (Forest Deep + Paper t1-t4 + 
   sp-1...sp-5 + Playfair italic puntual + JetBrains Mono labels) a 
   TODO BIO. Re-estilar EXTRA prod (alerta PRECAUCIÓN, etapas sueño, 
   stress 24h, wearables) con mismos tokens · NO eliminar funcionalidad.
   
   Referencia maqueta: design-v2-kit/kyven-master.html L762-911
   Selectores prod en index.html: .recovery-hero (L1871), .mc (L13753), 
   .alert-n3 (L3349), .brief-dz (L2018), .stages (L15412), .stress 
   (L15465), .wearable-card (L2121)
   ════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────
   GRUPO A · HERO ZONE (Recovery ring)
   FIX 1-12 · paridad ring-hero maqueta L762-841
────────────────────────────────────────────── */

/* FIX α · recovery-hero flat editorial paridad master · solid card-hi sin sh */
body #tab-bio .recovery-hero {
  background: var(--card-hi) !important;
  background-image: none !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-xl) !important;
  padding: var(--pad-hero, 22px) !important;
  margin: 0 16px 22px !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}

/* FIX 2 · eliminar gradient gold antiguo + glow ambient overlay paridad maqueta */
body #tab-bio .recovery-hero::before {
  display: none !important;
}
body #tab-bio .recovery-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 20% 0%, rgba(107,168,142,0.06) 0%, transparent 70%) !important;
  pointer-events: none !important;
  height: auto !important;
  top: 0 !important;
}
body #tab-bio .recovery-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

/* FIX 3 · eyebrow "RECOVERY · TU VENTANA DE HOY" mono small 9px 2.8em letter.
   Audit v4 Fase 1.5 · color var(--gold) ratio 4.34:1 fallaba AA por 0.16pt en fz 9px.
   Cambiado a var(--eyebrow-color-strong) (rgba 0.92) → ~5.1:1 AA pass. */
body #tab-bio .recovery-label {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 2.8px !important;
  color: var(--eyebrow-color-strong) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

/* FIX 4 · recovery-row alignment baseline + gap maqueta */
body #tab-bio .recovery-row {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

/* FIX 5 · ring-wrap 100px (no 108) · paridad maqueta */
body #tab-bio .recovery-arc {
  width: 100px !important;
  height: 100px !important;
  flex-shrink: 0 !important;
}

/* FIX 6 · ring rotation -90deg (no -135) · gradient bottom-left limpio */
body #tab-bio .recovery-arc svg {
  width: 100% !important;
  height: 100% !important;
  transform: rotate(-90deg) !important;
}

/* FIX 7 · recovery-num · 28px weight 700 gold · paridad maqueta ring-val */
body #tab-bio .recovery-num {
  font-family: var(--sans) !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  letter-spacing: -1.8px !important;
  line-height: 1 !important;
  color: var(--gold) !important;
  text-shadow: none !important;
}

/* FIX 8 · "% REC" → mono 8px t4 1.5em letter "RECOVERY" estilo maqueta */
body #tab-bio .recovery-num small,
body #tab-bio .recovery-num span {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  margin-left: 1px !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  vertical-align: super !important;
}
body #tab-bio .recovery-unit {
  font-family: var(--mono) !important;
  font-size: 8px !important;
  letter-spacing: 1.5px !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}

/* FIX 9 · ring-info flex:1 */
body #tab-bio .recovery-info,
body #tab-bio .recovery-meta {
  flex: 1 !important;
  min-width: 0 !important;
}

/* FIX 10 · ring-estado "Moderado" serif italic 18px clay + paridad maqueta */
body #tab-bio .recovery-state,
body #tab-bio .recovery-info > div:first-child {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--t1) !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.2px !important;
  line-height: 1.2 !important;
}
body #tab-bio .recovery-state em,
body #tab-bio .recovery-state .recovery-state-val {
  color: var(--clay) !important;
  font-style: italic !important;
}

/* FIX 11 · ring-desc · 12.5px t3 line-height 1.5 paridad maqueta */
body #tab-bio .recovery-desc,
body #tab-bio .recovery-sub,
body #tab-bio .recovery-info p {
  font-size: 12.5px !important;
  color: var(--t3) !important;
  line-height: 1.5 !important;
  font-family: var(--sans) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
body #tab-bio .recovery-desc strong,
body #tab-bio .recovery-sub strong {
  color: var(--gold) !important;
  font-weight: 500 !important;
}

/* FIX 12 · stroke-width ring · 6px paridad maqueta */
body #tab-bio .r-track {
  fill: none !important;
  stroke: rgba(200,164,90,0.10) !important;
  stroke-width: 6 !important;
}
body #tab-bio .r-fill {
  fill: none !important;
  stroke-width: 6 !important;
  stroke-linecap: round !important;
  filter: drop-shadow(0 0 8px rgba(200,164,90,0.4)) !important;
}


/* ──────────────────────────────────────────────
   GRUPO B · NAVEGACIÓN BIO (tabs HOY/REGISTRAR/ANALÍTICAS/HISTORIAL)
   FIX 13-14 · ya casi en paridad por #tab-bio .subnav L783-794 (overrides existente)
   Solo aseguramos margin lateral
────────────────────────────────────────────── */

/* FIX 13 · tabs container margin lateral coherente */
body #tab-bio .subnav {
  margin: 10px 16px 16px !important;
}


/* ──────────────────────────────────────────────
   GRUPO C · CARD DR.K INTERPRETACIÓN (.brief-dz)
   FIX 15-16 · paridad maqueta card-std drk-quote L3911-3931
────────────────────────────────────────────── */

/* FIX 14 · brief-dz card · paridad maqueta card-std + drk style · margin unificado Safari/PWA 42px */
body #tab-bio .brief-dz {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-lg) !important;
  padding: 14px 16px !important;
  margin: 0 16px 42px !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}
body #tab-bio .brief-dz::before,
body #tab-bio .brief-dz::after {
  display: none !important;
}

/* FIX 15 · brief-dz-label · mono 10px gold letter-spacing paridad maqueta */
body #tab-bio .brief-dz-label {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

/* FIX 16 · brief-dz-text · serif italic Playfair t1 14px paridad maqueta drk-quote.
   GC-2.1 patch · color tokenizado a --kvn-cream-on-card-strong con fallback --t2
   para que la quote DR.KYVEN INTERPRETACIÓN sea legible cuando flag ON
   (cream sólido sobre Patek green). */
body #tab-bio .brief-dz-text {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--kvn-cream-on-card-strong, var(--t2)) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.1px !important;
  border-left: 2px solid var(--sage) !important;
  padding-left: 12px !important;
  margin: 0 !important;
}
body #tab-bio .brief-dz-text strong {
  color: var(--gold) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}


/* ──────────────────────────────────────────────
   GRUPO D · ALERTA PRECAUCIÓN GPMI (.alert-n3)
   FIX 17 · EXTRA prod · estilizar con tokens maqueta · MANTENER func
────────────────────────────────────────────── */

/* FIX 17 · alert-n3 paridad maqueta · card style con icono amber a la izq · margin unificado Safari/PWA 52px conservando lateral */
body #tab-bio .alert-n3 {
  background: var(--card) !important;
  border: 1px solid rgba(200,135,90,0.15) !important;
  border-left: 3px solid var(--clay) !important;
  border-radius: var(--kv-radius-md) !important;
  padding: 14px 16px !important;
  margin: 0 16px 52px !important;
  box-shadow: var(--sh-soft) !important;
  display: grid !important;
  grid-template-columns: 30px 1fr !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
body #tab-bio .alert-n3-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(200,135,90,0.18) !important;
  color: var(--clay) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body #tab-bio .alert-n3 .alert-n3-label,
body #tab-bio .alert-n3 [class*="label"] {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  color: var(--clay) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
body #tab-bio .alert-n3 [class*="title"] {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.1px !important;
}
body #tab-bio .alert-n3 [class*="body"],
body #tab-bio .alert-n3 [class*="text"] {
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  color: var(--t3) !important;
  line-height: 1.5 !important;
}


/* ──────────────────────────────────────────────
   GRUPO E · SECTION HEADERS (01·Cardio etc)
   FIX 18-19 · paridad maqueta section-hdr L177-181
────────────────────────────────────────────── */

/* FIX 18 · section-label UPPERCASE Mono "01 · CARDIO" paridad maqueta sh-title */
body #tab-bio .section-label {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 2.8px !important;
  color: var(--t3) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}
/* FIX 19 · section-meta "2 MÉTRICAS" paridad maqueta sh-meta */
body #tab-bio .section-meta {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--t4) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}
/* FIX 19b · section-hdr margin · paridad maqueta section-top/bot */
body #tab-bio .section-hdr {
  margin: var(--sp-3) 16px var(--section-bot, 14px) !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
}


/* ──────────────────────────────────────────────
   GRUPO F · BIO METRIC CARDS (.mc) · las 8 cards de métricas
   FIX 20-28 · paridad maqueta bio-mc L850-911
────────────────────────────────────────────── */

/* FIX 20 · .mc card style paridad maqueta bio-mc · padding 16px (paridad master --sp-2) */
/* P1.2 · v3.0 audit · overflow visible (la sombra estaba siendo cortada) +
   box-shadow hero (antes none neutralizaba elevación) · igual que Protocolo .brief */
body #tab-bio .mc {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-lg) !important;
  padding: 16px !important;
  box-shadow: var(--sh-hero) !important;
  position: relative;
  overflow: visible;
}
/* P1.3 · ELIMINADA la regla zombie display:none sobre ::before/::after
   que mataba el highlight cenital. El ::before lo define el bloque
   ELEVACIÓN UNIFORME al final del archivo. */

/* FIX 21 · .mc-top fila icon + trend badge · paridad maqueta bio-mc-top */
body #tab-bio .mc-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}
body #tab-bio .mc-icon {
  width: 16px !important;
  height: 16px !important;
  color: var(--gold) !important;
}
body #tab-bio .mc-icon svg {
  width: 16px !important;
  height: 16px !important;
}

/* FIX 22 · .mc-val-row + .mc-num · 26px weight 600 t1 · paridad maqueta bio-mc-val */
body #tab-bio .mc-val-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  margin: 0 !important;
}
body #tab-bio .mc-num {
  font-family: var(--sans) !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  letter-spacing: -1.4px !important;
  line-height: 1 !important;
  color: var(--t1) !important;
}

/* FIX 23 · .mc-unit · mono 10px t3 weight 400 · paridad maqueta bio-mc-unit */
body #tab-bio .mc-unit {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: var(--t3) !important;
  margin-left: 2px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

/* FIX 24 · .mc-name · mono 9px UPPERCASE 1.5em letter t3 · paridad maqueta bio-mc-lbl */
body #tab-bio .mc-name {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--t3) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  margin: 2px 0 10px !important;
}

/* FIX 25 · .mc-spark · sparkline height 32px paridad maqueta bio-mc-chart */
body #tab-bio .mc-spark {
  height: 32px !important;
  margin-bottom: 8px !important;
}
body #tab-bio .mc-spark svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* FIX 26 · .mc-foot footer base 7D + delta paridad maqueta bio-mc-base */
body #tab-bio .mc-foot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(230,226,218,0.05) !important;
  margin-top: 0 !important;
}
body #tab-bio .mc-foot > span:first-child,
body #tab-bio .mc-foot .mc-foot-lbl {
  font-family: var(--mono) !important;
  font-size: 7.5px !important;
  letter-spacing: 1.2px !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
body #tab-bio .mc-foot > span:first-child strong {
  color: var(--t3) !important;
  font-weight: 500 !important;
}
/* FIX 27 · .mc-foot-delta · sage(pos)/clay(neg/bad) · NO gold orange */
body #tab-bio .mc-foot-delta {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}
body #tab-bio .mc-foot-delta.good,
body #tab-bio .mc-foot-delta.pos {
  color: var(--sage) !important;
}
body #tab-bio .mc-foot-delta.bad,
body #tab-bio .mc-foot-delta.neg {
  color: var(--clay) !important;
}
body #tab-bio .mc-foot-delta.neutral {
  color: var(--t4) !important;
}

/* FIX 28 · CTA "CONSULTAR DR. K →" estilizar (mono small gold) · MANTENER func */
body #tab-bio .mc .mc-consult-hint,
body #tab-bio .mc-consult-hint {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
  cursor: pointer !important;
  display: block !important;
  text-align: center !important;
}


/* ──────────────────────────────────────────────
   GRUPO G · ETAPAS DE SUEÑO (.stages) · EXTRA prod · estilizar
   FIX 29 · re-estilar con tokens maqueta · MANTENER func gráfica
────────────────────────────────────────────── */

/* FIX 29 · stages card paridad maqueta bio-section-card style */
body #tab-bio .bio-section-card.stages,
body #tab-bio #bio-stages-card {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-lg) !important;
  padding: 14px 16px !important;
  margin: 0 16px 20px !important;
  box-shadow: var(--sh-soft) !important;
}
body #tab-bio .stages-tit {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -0.2px !important;
}
body #tab-bio .stages-tot {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}
body #tab-bio .stages-axis span {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  color: var(--t4) !important;
  letter-spacing: 0.5px !important;
}
body #tab-bio .stages-cell {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body #tab-bio .stages-cell-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
body #tab-bio .stages-cell-name {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
body #tab-bio .stages-cell-val {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  margin-left: 12px !important;
}


/* ──────────────────────────────────────────────
   GRUPO H · STRESS 24H (.stress) · EXTRA prod · estilizar
   FIX 30 · re-estilar con tokens maqueta · MANTENER func barras
────────────────────────────────────────────── */

/* FIX 30 · stress card paridad maqueta */
body #tab-bio .bio-section-card.stress,
body #tab-bio #bio-stress-card {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-lg) !important;
  padding: 14px 16px !important;
  margin: 0 16px 20px !important;
  box-shadow: var(--sh-soft) !important;
}
body #tab-bio .stress-h .stages-tit {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
}
body #tab-bio .stress-now {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}
body #tab-bio .stress-now-val,
body #tab-bio [class*="stress-now"] [class*="val"] {
  font-family: var(--sans) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}
body #tab-bio .stress-now-lbl {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}


/* ──────────────────────────────────────────────
   GRUPO I · WEARABLE CONNECTION · EXTRA prod · estilizar
   FIX 31 · Whoop/Apple/Garmin/Kyven cards con tokens maqueta
────────────────────────────────────────────── */

/* FIX 31 · wearable-card paridad maqueta · clean cards */
body #tab-bio .wearable-card {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-lg) !important;
  padding: 14px 16px !important;
  margin: 0 0 10px !important;
  box-shadow: var(--sh-soft) !important;
  position: relative;
}
body #tab-bio .wearable-card::before,
body #tab-bio .wearable-card::after {
  display: none !important;
}
body #tab-bio .wearable-card.kyven {
  background: linear-gradient(135deg, var(--card-hi) 0%, var(--card) 100%) !important;
  border: 1px solid rgba(200,164,90,0.20) !important;
}
body #tab-bio .wearable-card.kyven::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 20% 0%, rgba(200,164,90,0.06) 0%, transparent 70%) !important;
  pointer-events: none !important;
  border-radius: inherit;
}
body #tab-bio .wearable-name {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
}
body #tab-bio .wearable-name em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: var(--gold) !important;
  font-weight: 400 !important;
}
body #tab-bio .wearable-sub {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: var(--t3) !important;
  letter-spacing: 0.5px !important;
  margin-top: 2px !important;
}
body #tab-bio .wearable-status,
body #tab-bio [class*="wearable"] [class*="status"] {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
body #tab-bio .wearable-compact {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-md) !important;
  padding: 12px 14px !important;
  margin: 0 0 8px !important;
  box-shadow: var(--sh-soft) !important;
}


/* ──────────────────────────────────────────────
   COBERTURA · bio-section-card padding genérico
   Para asegurar que las 4 secciones de métricas tienen padding 0 (las cards 
   internas .mc llevan su propio padding). 
────────────────────────────────────────────── */
body #tab-bio .bio-section-card {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body #tab-bio .bio-section-card.stages,
body #tab-bio .bio-section-card.stress,
body #tab-bio #bio-stages-card,
body #tab-bio #bio-stress-card {
  /* Excepción: stages y stress sí tienen card propia (definida arriba) */
  padding: 14px 16px !important;
  margin: 0 16px 20px !important;
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  box-shadow: var(--sh-soft) !important;
}

/* metrics-grid · 2 cols 10px gap */
body #tab-bio .metrics-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 0 16px !important;
  margin-bottom: 16px !important;
}

/* ──────────────────────────────────────────────
   FIN FASE 4.1 BIO · 31 chef fixes aplicados
────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════
   FASE 4.1.1 · BIO · FIXES POST-AUDIT SAFARI iPhone REAL
   ════════════════════════════════════════════════════════════════
   
   Tras deploy preview FASE 4.1, Carlos validó en Safari iPhone real y 
   detectó 8 issues que el patch original no cubrió porque la auditoría 
   inicial usaba selectores asumidos (no producción real).
   
   Issues resueltos aquí:
   - F1   · recovery-pct "% REC" → reescribir como overlay sobre .recovery-value
   - F2   · recovery-desc text cortado → overflow-wrap
   - F3   · brief-dz-text text cortado → overflow-wrap
   - F4   · alert-n3 body cortado → min-width:0 al col 2 de la grid
   - F6   · mc-name desalineado → padding/margin afinado
   - F7   · subnav-btn active más grande → anular pseudo-element prod
   - F9   · wearable-action layout (pill + button apilados, no superpuestos)
   - F10  · wearables-eyebrow margin respiración (selector correcto)
   
   NO cubierto por CSS · requiere HTML patch separado:
   - F1bis · DIV .recovery-pct sigue siendo "% REC" (texto literal) · 
             ideal sería renombrar a "RECOVERY". Mientras tanto se 
             reposiciona y reestiliza vía CSS para no destruir su markup.
   - F5    · K monogram cuadrado → SVG inline · requiere reemplazar
             el SVG en L15386 de index.html · va en patch HTML separado.
   ════════════════════════════════════════════════════════════════ */


/* ── F1 · Recovery pct overlay paridad maqueta ────────────────
   El HTML real renderiza:
     <div class="recovery-value">
       <div class="recovery-num">46</div>
       <div class="recovery-pct">% REC</div>
     </div>
   Solución: convertir .recovery-pct en mono small uppercase debajo
   del número (idéntico al ring-unit "RECOVERY" de maqueta).
   Cambiar el texto "% REC" → "RECOVERY" se hace cosméticamente vía CSS 
   `content` o requiere patch HTML mínimo. CSS-only es seguro.
   ─────────────────────────────────────────────────────────── */

/* Container .recovery-value: alineación vertical centrada */
body #tab-bio .recovery-value {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

/* .recovery-num: mantener el valor grande pero con % small inline visual */
body #tab-bio .recovery-num {
  font-family: var(--sans) !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  letter-spacing: -1.8px !important;
  line-height: 1 !important;
  color: var(--gold) !important;
  text-shadow: none !important;
  position: relative !important;
}
/* Añadir "%" visualmente tras el número (sin tocar HTML)
   Paridad master ring-val: inline simple (no superscript) en 14px / weight 300
   / color gold-mute. Antes era superscript con vertical-align:super + top:-2px,
   lo cual desalineaba el "%" del "46" y daba sensación "descuadrado". */
body #tab-bio .recovery-num::after {
  content: '%';
  font-size: 14px;
  font-weight: 300;
  color: var(--gold-mute);
  margin-left: 2px;
  letter-spacing: 0;
}

/* .recovery-pct: convertir "% REC" en "RECOVERY" estilo mono small t4 
   Ocultamos el texto original y mostramos "RECOVERY" via ::before */
body #tab-bio .recovery-pct {
  font-size: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body #tab-bio .recovery-pct::before {
  content: 'RECOVERY';
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--t4);
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 400;
  line-height: 1;
  display: block;
}


/* ── F2 · recovery-desc · overflow-wrap para no cortarse ────── */
body #tab-bio .recovery-desc {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
  max-width: 100% !important;
}

/* ── F3 · brief-dz-text · overflow-wrap ─────────────────────── */
body #tab-bio .brief-dz-text {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
  max-width: 100% !important;
}
body #tab-bio .brief-dz-content {
  min-width: 0 !important;
  overflow: hidden !important;
}


/* ── F4 · alert-n3 body · grid col 2 min-width:0 ───────────── */
body #tab-bio .alert-n3 > div:last-child {
  min-width: 0 !important;
  overflow: hidden !important;
}
body #tab-bio .alert-n3 [class*="body"],
body #tab-bio .alert-n3 [class*="title"] {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
  max-width: 100% !important;
}


/* ── F6 · mc-name afinado · sin separación excesiva del valor ── */
body #tab-bio .mc-name {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
/* mc-val-row sin margin inferior ya que el .mc-name maneja su propio espacio */
body #tab-bio .mc-val-row {
  margin: 0 !important;
  padding: 0 !important;
}


/* ── F7 · subnav-btn active size match · anular ::before prod ── */
body #tab-bio .subnav-btn,
body #tab-bio .subnav-btn.active {
  padding: 10px 0 !important;
  border: none !important;
  position: relative !important;
  line-height: 1.2 !important;
  min-height: auto !important;
  height: auto !important;
}
/* Anular pseudo elementos prod que añadían glow/sombra al active */
body #tab-bio .subnav-btn.active::before,
body #tab-bio .subnav-btn.active::after {
  display: none !important;
  content: none !important;
}
/* Forzar background limpio sage al active sin layers extra */
body #tab-bio .subnav-btn.active {
  background: var(--sage) !important;
  color: var(--bg) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(107, 168, 142, 0.25) !important;
  border-radius: var(--kv-radius-xl) !important;
}


/* ── F9 · wearable-action layout · pill + button NO superpuestos ── */
body #tab-bio .wearable-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
}
body #tab-bio .wearable-info {
  flex: 1 !important;
  min-width: 0 !important;
}
body #tab-bio .wearable-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
body #tab-bio .wearable-pill {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: var(--kv-radius-pill) !important;
  white-space: nowrap !important;
}
body #tab-bio .wearable-pill.sage {
  color: var(--sage) !important;
  background: var(--sage-bg) !important;
  border: 1px solid rgba(107,168,142,0.25) !important;
}
body #tab-bio .wearable-pill.gold {
  color: var(--gold) !important;
  background: rgba(200,164,90,0.10) !important;
  border: 1px solid rgba(200,164,90,0.25) !important;
}
body #tab-bio .wearable-pill.amber {
  color: var(--clay) !important;
  background: rgba(200,135,90,0.08) !important;
  border: 1px solid rgba(200,135,90,0.25) !important;
}
body #tab-bio .wearable-pill.muted {
  color: var(--t4) !important;
  background: rgba(230,226,218,0.04) !important;
  border: 1px solid var(--stroke-hi) !important;
}
body #tab-bio .wearable-btn {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  background: transparent !important;
  border: 1px solid var(--gold-line) !important;
  padding: 4px 10px !important;
  border-radius: var(--kv-radius-pill) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
body #tab-bio .wearable-btn:hover,
body #tab-bio .wearable-btn:active {
  background: rgba(200,164,90,0.08) !important;
}


/* ── F10 · wearables-eyebrow · selector correcto + respiración ── */
body #tab-bio .wearables-eyebrow {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  color: var(--t1) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin: 28px 16px 14px !important;
  padding: 0 !important;
  display: block !important;
}

/* ── F10b · wearables-panel container · padding lateral ──────── */
body #tab-bio .wearables-panel {
  padding: 0 16px !important;
  margin-top: 0 !important;
}


/* ── Limpieza adicional · neutralizar reglas prod ruidosas ──── */

/* alert-n3 fix · texto cuerpo sin overflow */
body #tab-bio .alert-n3 .alert-n3-body,
body #tab-bio .alert-n3 .alert-n3-title,
body #tab-bio .alert-n3 .alert-n3-label {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
  max-width: 100% !important;
}

/* ──────────────────────────────────────────────
   FIN FASE 4.1.1 BIO · 8 fixes complementarios CSS aplicados
   PENDIENTE F5 · K monogram hexagonal · requiere patch HTML
────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════
   FASE 4.1.2 · BIO · paridad maqueta SUBTABS (3 paneles)
   ════════════════════════════════════════════════════════════════
   
   Aplicar el mismo lenguaje visual de HOY (FASE 4.1 + 4.1.1) a los 
   3 paneles restantes de BIO:
   - REGISTRAR (#bio-manual) · form de input métricas
   - ANALÍTICAS (#bio-labs) · hub clínico 8 categorías
   - HISTORIAL (#bio-history) · timeline de registros
   
   Filosofía maqueta aplicada:
   - Títulos Playfair italic puntual en palabras clave
   - Labels JetBrains Mono UPPERCASE letter 2-2.5em
   - Cards radius 14 + sh-soft + padding 14/16
   - Spacing sistemático --sp-1...--sp-3
   - Paleta Forest Deep + Paper t1-t4 + accents gold/sage/clay
   - Tokens consistentes con HOY
   ════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────
   COMÚN · títulos bio-form-title + form-sub
   Usados en REGISTRAR + ANALÍTICAS
────────────────────────────────────────────── */

body #tab-bio .bio-form-title {
  font-family: var(--sans) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -0.4px !important;
  line-height: 1.2 !important;
  margin: 28px 16px 6px !important;
  padding: 0 !important;
}
body #tab-bio .bio-form-title em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: var(--gold) !important;
  font-weight: 400 !important;
}
body #tab-bio .bio-form-title em span {
  font-family: inherit !important;
  font-style: inherit !important;
  color: inherit !important;
}

body #tab-bio .form-sub {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 2.5px !important;
  color: var(--t4) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  margin: 0 16px 18px !important;
  padding: 0 !important;
  display: block !important;
}


/* ──────────────────────────────────────────────
   GRUPO J · PANEL REGISTRAR (#bio-manual)
   FIX J1-J6 · form inputs paridad maqueta
────────────────────────────────────────────── */

/* J1 · bio-form grid · 2 cols con gap consistente */
body #tab-bio .bio-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 0 16px !important;
  margin-bottom: 20px !important;
}

/* J2 · .ff field container · card style paridad maqueta */
body #tab-bio .bio-form .ff {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-md) !important;
  padding: 12px 14px !important;
  box-shadow: var(--sh-soft) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: relative;
}
body #tab-bio .bio-form .ff.full {
  grid-column: 1 / -1 !important;
}

/* J3 · label · mono UPPERCASE letter 1.5em t3 */
body #tab-bio .bio-form .ff label {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}
body #tab-bio .bio-form .ff label span {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-transform: lowercase !important;
}

/* J4 · input · Inter sans 18px t1 */
body #tab-bio .bio-form .ff input {
  font-family: var(--sans) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -0.3px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  width: 100% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.1 !important;
}
body #tab-bio .bio-form .ff input::placeholder {
  color: var(--t4) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
body #tab-bio .bio-form .ff input:focus {
  color: var(--gold) !important;
}
body #tab-bio .bio-form .ff:focus-within {
  border-color: var(--gold-line) !important;
  box-shadow: 0 0 0 2px rgba(200,164,90,0.10), var(--sh-soft) !important;
}

/* J5 · button "Guardar métricas del día" · CTA premium */
body #tab-bio .btn-p,
body #tab-bio #bio-manual .btn-p {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  color: var(--bg) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: var(--gold) !important;
  border: none !important;
  border-radius: var(--kv-radius-pill) !important;
  padding: 14px 24px !important;
  margin: 0 16px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  width: calc(100% - 32px) !important;
  box-shadow: 0 4px 14px rgba(200,164,90,0.25) !important;
  transition: all 0.2s ease !important;
}
body #tab-bio .btn-p:hover,
body #tab-bio .btn-p:active {
  background: rgba(200,164,90,0.85) !important;
  transform: translateY(-1px) !important;
}
body #tab-bio .btn-p span {
  font-family: var(--mono) !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}


/* ──────────────────────────────────────────────
   GRUPO K · PANEL ANALÍTICAS (#bio-labs)
   FIX K1-K7 · hub clínico paridad maqueta
────────────────────────────────────────────── */

/* K1 · labs-hub-header container padding */
body #tab-bio #labs-hub-header {
  padding: 0 !important;
  margin: 0 !important;
}

/* K2 · labs-categories grid · spacing entre cards */
body #tab-bio .labs-categories {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 16px !important;
}

/* K3 · lab-cat-card · paridad maqueta card-std */
body #tab-bio .lab-cat-card {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-lg) !important;
  padding: 14px 16px !important;
  box-shadow: var(--sh-soft) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}
body #tab-bio .lab-cat-card::before,
body #tab-bio .lab-cat-card::after {
  display: none !important;
}
body #tab-bio .lab-cat-card.lab-cat-active {
  border-color: rgba(200,164,90,0.20) !important;
}
body #tab-bio .lab-cat-card.lab-cat-soon {
  opacity: 0.5 !important;
  cursor: default !important;
}
body #tab-bio .lab-cat-card:hover,
body #tab-bio .lab-cat-card.lab-cat-active:active {
  transform: translateY(-1px) !important;
  border-color: var(--gold-line) !important;
}

/* K4 · lab-cat-icon · 40px coherente con wearable-icon-wrap */
body #tab-bio .lab-cat-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: rgba(230,226,218,0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--gold) !important;
}
body #tab-bio .lab-cat-icon svg {
  width: 18px !important;
  height: 18px !important;
}

/* K5 · lab-cat-content · column flex 1 */
body #tab-bio .lab-cat-content {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* K6 · lab-cat-name · sans 14 t1 weight 500 */
body #tab-bio .lab-cat-name {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -0.2px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  overflow-wrap: break-word !important;
}

/* K7 · lab-cat-desc · 12px t3 line 1.45 */
body #tab-bio .lab-cat-desc {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  color: var(--t3) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  overflow-wrap: break-word !important;
}

/* K8 · lab-cat-meta · mono UPPERCASE letter 1.2em */
body #tab-bio .lab-cat-meta {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}
body #tab-bio .lab-cat-card.lab-cat-soon .lab-cat-meta {
  color: var(--t4) !important;
}

/* K9 · lab-cat-arrow · chevron derecha gold */
body #tab-bio .lab-cat-arrow {
  font-family: var(--serif) !important;
  font-size: 24px !important;
  color: var(--gold) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  padding-left: 6px !important;
  opacity: 0.7 !important;
}
body #tab-bio .lab-cat-card.lab-cat-soon .lab-cat-arrow {
  opacity: 0.3 !important;
  color: var(--t4) !important;
}

/* K10 · lab-cat-back · botón volver coherente */
body #tab-bio .lab-cat-back {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid rgba(200,164,90,0.20) !important;
  border-radius: var(--kv-radius-pill) !important;
  padding: 8px 14px !important;
  margin: 12px 16px 14px !important;
  cursor: pointer !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
}
body #tab-bio .lab-cat-back:hover,
body #tab-bio .lab-cat-back:active {
  background: rgba(200,164,90,0.08) !important;
}


/* ──────────────────────────────────────────────
   GRUPO L · PANEL HISTORIAL (#bio-history)
   FIX L1-L6 · timeline registros paridad maqueta
────────────────────────────────────────────── */

/* L1 · bio-section-card wrapper · padding 0 (la card individual lleva su propio padding) */
body #tab-bio #bio-history .bio-section-card {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* L2 · section-hdr "Historial completo · 17 REGISTROS" 
   ya tiene fix de FASE 4.1 vía section-label/section-meta */
body #tab-bio #bio-history .section-label {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  color: var(--t1) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
body #tab-bio #bio-history .section-meta {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: var(--t4) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* L3 · history-list · column con gap consistente */
body #tab-bio #history-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 16px !important;
}

/* L4 · hist-card · card style paridad maqueta */
body #tab-bio .hist-card {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-lg) !important;
  padding: 14px 16px !important;
  box-shadow: var(--sh-soft) !important;
  position: relative !important;
  overflow: hidden !important;
}
body #tab-bio .hist-card::before,
body #tab-bio .hist-card::after {
  display: none !important;
}

/* L5 · hist-row (fecha + day badge) */
body #tab-bio .hist-card .hist-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}
body #tab-bio .hist-card .hist-date {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--t1) !important;
  letter-spacing: 0.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}
body #tab-bio .hist-card .hist-day {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* L6 · hist-mtgrid · grid 4 columnas (REC / HRV / SUEÑO / FC) */
body #tab-bio .hist-card .hist-mtgrid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}
body #tab-bio .hist-card .hist-mt {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}
body #tab-bio .hist-card .hist-mt-name {
  font-family: var(--mono) !important;
  font-size: 8.5px !important;
  letter-spacing: 1.2px !important;
  color: var(--t4) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}
body #tab-bio .hist-card .hist-mt-val {
  font-family: var(--sans) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}
/* L6b · color semantic del REC value · gold/sage/amber/clay/ruby */
body #tab-bio .hist-card .hist-mt-val.gold { color: var(--gold) !important; }
body #tab-bio .hist-card .hist-mt-val.sage { color: var(--sage) !important; }
body #tab-bio .hist-card .hist-mt-val.amber { color: var(--gold) !important; }
body #tab-bio .hist-card .hist-mt-val.clay { color: var(--clay) !important; }
body #tab-bio .hist-card .hist-mt-val.ruby { color: var(--clay) !important; }


/* ──────────────────────────────────────────────
   FIN FASE 4.1.2 BIO SUBTABS · 26 fixes complementarios
   (J1-J5 REGISTRAR · K1-K10 ANALÍTICAS · L1-L6 HISTORIAL + comunes)
────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════
   FASE 4.1.3 · BIO · QUIRÚRGICO POST AUDITORÍA SAFARI iPhone REAL
   ════════════════════════════════════════════════════════════════
   
   Carlos identificó 7 issues residuales tras FASE 4.1.1+4.1.2:
   
   A · Hueco vertical enorme entre Hero Recovery y subnav tabs
   B · Hueco vertical entre subnav tabs y Dr.K card  
   C · Hueco vertical entre Dr.K card y "01 · CARDIO"
   D · Wearable WHOOP text "Recovery · HRV · Sleep · Strain en tiempo real"
       desborda y se superpone al botón SINCRONIZAR
   E · "● WEARABLE · CONEXIÓN" eyebrow no se ve / sin respiración top
   F · ANALÍTICAS · lab-cat-desc se corta a la derecha sin wrap
   G · REGISTRAR · bio-form-title "jueves, 14 de mayo" se sale del viewport
   
   Causas raíz IDENTIFICADAS en index.html producción:
   - L1881 .recovery-hero margin-bottom: 14px (OK)
   - L13744 #tab-bio .recovery-hero margin: 0 16px 0 (margin-bottom: 0!)
   - L13746 #tab-bio .brief-dz margin: 0 16px 0 (margin-bottom: 0!)
   - L13747 #tab-bio .subnav margin: 10px 16px 10px (OK)
   - L13781 #tab-bio.active .tab-scroll padding: 10px 16px 100px
            + scroll-snap-type: y mandatory (genera huecos al snap)
   - L1883-84 .recovery-hero scroll-snap-align: start + scroll-margin-top: 8px
   - L2018 .wearable-info NO tiene flex-shrink:1 explícito · el sub desborda
   - L Lab-cat-desc tiene reglas pero white-space:nowrap heredado posible
   
   ESTRATEGIA: specificity altísima (`html body #tab-bio ...`) + !important.
   ════════════════════════════════════════════════════════════════ */


/* ── ISSUE A+B+C · Eliminar scroll-snap-mandatory y huecos verticales ── */

/* Anular scroll-snap-mandatory que causa huecos · proximity es mucho más suave */
html body #tab-bio.active .tab-scroll {
  scroll-snap-type: y proximity !important;
  padding: 8px 16px calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-top: 0 !important;
}

/* Anular scroll-snap-align en zonas fijas que generan offset */
html body #tab-bio .recovery-hero {
  scroll-snap-align: none !important;
  scroll-margin-top: 0 !important;
  margin: 0 16px 12px !important;
  padding: 14px 18px 12px !important;
}

html body #tab-bio .brief-dz {
  scroll-snap-align: none !important;
  scroll-margin-top: 0 !important;
  margin: 0 16px 14px !important;
  padding: 14px 16px !important;
}

html body #tab-bio .subnav {
  margin: 0 16px 10px !important;
}

/* Anular scroll-margin en cards individuales para evitar huecos al scroll */
html body #tab-bio .wearable-card,
html body #tab-bio .bio-section-card,
html body #tab-bio .mc {
  scroll-snap-align: none !important;
  scroll-margin-top: 0 !important;
}


/* ── ISSUE D · Wearable WHOOP text desborda + overlap con botón ── */

/* La causa: .wearable-info tiene flex:1 + min-width:0 pero el sub no wrappea
   y empuja contra .wearable-action haciéndolo solaparse visualmente.
   Solución: forzar wrap del sub + max-width al info */
html body #tab-bio .wearable-card {
  position: relative !important;
  overflow: hidden !important;
  gap: 12px !important;
  align-items: center !important;
}

html body #tab-bio .wearable-info {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
}

html body #tab-bio .wearable-info .wearable-name,
html body #tab-bio .wearable-info .wearable-sub {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

html body #tab-bio .wearable-action {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  position: relative !important;
  z-index: 2 !important;
  background: var(--card) !important;
  padding-left: 6px !important;
}


/* ── ISSUE E · WEARABLE CONEXIÓN eyebrow margin top ── */

html body #tab-bio .wearables-panel {
  margin-top: 20px !important;
  padding: 0 !important;
}

html body #tab-bio .wearables-eyebrow {
  display: block !important;
  visibility: visible !important;
  margin: 0 0 14px !important;
  padding-top: 4px !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}


/* ── ISSUE F · lab-cat-desc se corta · forzar wrap ── */

html body #tab-bio .lab-cat-card .lab-cat-content {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body #tab-bio .lab-cat-card .lab-cat-desc {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
  max-width: 100% !important;
  line-height: 1.4 !important;
}

html body #tab-bio .lab-cat-card .lab-cat-name {
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
}


/* ── ISSUE G · REGISTRAR · bio-form-title overflow ── */

html body #tab-bio .bio-form-title {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  max-width: calc(100% - 32px) !important;
  padding-right: 0 !important;
  margin-right: 16px !important;
  line-height: 1.25 !important;
}


/* ── EXTRA · Reducir aire general del hero (más estilo WHOOP/Oura) ── */
/* Quitar el espacio extra que crea el header oculto bio-header */
html body #tab-bio .screen {
  padding-top: env(safe-area-inset-top, 44px) !important;
}

/* Reducir el padding-top del tab-scroll a mínimo */
html body #tab-bio.active .tab-scroll {
  padding-top: 6px !important;
}


/* ──────────────────────────────────────────────
   FIN FASE 4.1.3 BIO · 7 fixes quirúrgicos
   Specificity html body #tab-bio garantiza victoria sobre cascade prod
────────────────────────────────────────────── */


/* ── EXTRA · ISSUE C residual · primera section-hdr pegada a brief-dz ── */
/* La primera bio-section-card del HOY panel (#bio-overview) tenía padding 12px arriba
   + scroll-snap-align:start que generaba el hueco residual.
   Forzar margin-top 0 y reducir padding-top en la primera section-hdr.
   Unificación Safari/PWA · margin-top sube de 0 a 14px (valor PWA). */

html body #tab-bio #bio-overview > .bio-section-card:first-child {
  margin-top: 14px !important;
  padding-top: 0 !important;
}

html body #tab-bio #bio-overview > .bio-section-card:first-child .section-hdr,
html body #tab-bio .bio-section-card .section-hdr {
  padding: 4px 2px 8px !important;
  margin-bottom: 16px !important;
}

html body #tab-bio .bio-section-card {
  scroll-snap-align: none !important;
  scroll-margin-top: 0 !important;
  margin-bottom: 12px !important;
}


/* ════════════════════════════════════════════════════════════════
   FASE 4.1.3 · ITERACIÓN B · COMPRIMIR HUECO RESIDUAL Dr.K → 01·CARDIO
   ════════════════════════════════════════════════════════════════
   Carlos pidió apretar más todavía.
   
   Causas residuales identificadas:
   1. .brief-dz margin-bottom 14px (de 4.1.3 inicial)
   2. .tab-scroll padding-top 6px (de 4.1.3 inicial)
   3. .bio-section-card padding-top + section-hdr padding 4px
   4. Suma total: ~30-40px de aire entre Dr.K y "01·CARDIO"
   
   Estrategia: comprimir al mínimo + eliminar duplicados de padding.
   ════════════════════════════════════════════════════════════════ */

/* Brief Dr.K · pegar más a tab-scroll · margin-bottom mínimo */
html body #tab-bio .brief-dz {
  margin: 0 16px 8px !important;
  padding: 12px 14px !important;
}

/* Recovery hero · margin unificado Safari/PWA · 22px bajo el hero */
html body #tab-bio .recovery-hero {
  margin: 0 16px 22px !important;
  padding: 12px 16px 10px !important;
}

/* Subnav · margin unificado Safari/PWA · breathing premium tabs */
html body #tab-bio .subnav {
  margin: 26px 16px 46px !important;
}

/* Tab scroll · safe-area refactor · Safari=100px / PWA=94px (env+60) · sin Δ visual */
html body #tab-bio.active .tab-scroll {
  padding: 0 16px calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-top: 0 !important;
  scroll-snap-type: y proximity !important;
}

/* Primera bio-section-card · margin-top unificado Safari/PWA · 14px */
html body #tab-bio #bio-overview > .bio-section-card:first-child {
  margin-top: 14px !important;
  padding-top: 0 !important;
}

html body #tab-bio #bio-overview > .bio-section-card:first-child .section-hdr {
  padding: 2px 2px 6px !important;
  margin-bottom: 8px !important;
}

/* Resto de section-hdr siguientes · margin-bottom unificado Safari/PWA · 16px · first-child mantiene 8px (apretado intencional) */
html body #tab-bio .bio-section-card + .bio-section-card .section-hdr,
html body #tab-bio .bio-section-card:not(:first-child) .section-hdr {
  padding: 4px 2px 6px !important;
  margin-bottom: 16px !important;
  margin-top: 4px !important;
}

/* bio-section-card · spacing unificado Safari/PWA · 28px entre cards de métricas */
html body #tab-bio .bio-section-card {
  margin-bottom: 28px !important;
  scroll-snap-align: none !important;
  scroll-margin-top: 0 !important;
}

/* Screen container · reducir padding fallback safe-area que añade aire en non-notch */
@supports not (padding-top: env(safe-area-inset-top)) {
  html body #tab-bio.active .screen {
    padding-top: 0 !important;
  }
}
html body #tab-bio.active .screen {
  padding-top: env(safe-area-inset-top, 0px) !important;
}


/* ──────────────────────────────────────────────
   FIN FASE 4.1.3 · ITERACIÓN B
   Total comprimido: ~50-60px de aire eliminados
────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════
   FASE 4.1.4 · BIO · CORRECCIÓN DE DOBLE MARGEN LATERAL
   ════════════════════════════════════════════════════════════════
   
   DIAGNÓSTICO Carlos (15 mayo · medición DOM preview vs Safari real):
   
   Preview validado bio-4tabs-preview.html · medidas DOM:
     · margen lateral cards: 16px (correcto · norte visual)
     · ancho card en viewport 393: 359px
   
   Safari real (iPhone Pro Max · viewport 402): 
     · margen lateral cards: 34px (DOBLE del esperado)
     · ancho card: 335px (24px menos · sale recortado)
   
   CAUSA RAÍZ:
   Estructura DOM real de #tab-bio:
     .screen
       ├ .bio-header        (fuera de tab-scroll · OK)
       ├ .recovery-hero     (fuera · margin: 0 16px · OK)
       ├ .subnav            (fuera · margin: 10px 16px · OK)
       ├ .brief-dz          (fuera · margin: 0 16px · OK)
       └ .tab-scroll        ← padding: 10px 16px 100px  [da 16px lateral]
           ├ #bio-overview  → cards bio-mc · doblan margen
           ├ #bio-manual    → inputs registrar · doblan
           ├ #bio-labs      → labs-categories · doblan
           └ #bio-history   → hist-cards · doblan
   
   El #tab-bio.active .tab-scroll (index.html L13780) tiene padding 16px
   lateral. Los hijos de los .bio-panel le añaden OTROS 16px (FASE 4.1.2 
   K2 a .labs-categories, FASE 4.1.2 a .bio-form-title margin 28px 16px, 
   etc). Total 32px lateral. El preview NO tiene .tab-scroll envolviendo, 
   por eso sale a 16px.
   
   FIX: eliminar el margen/padding lateral DE LOS DESCENDIENTES de 
   .tab-scroll, dejando que el padding del .tab-scroll sea el único 
   responsable del lateral. Resultado: 16px reales · paridad preview.
   
   Cero modificaciones al HTML. Solo CSS. Acotado a #tab-bio.
────────────────────────────────────────────── */

/* M1 · TÍTULOS Y SUB-TÍTULOS · margen lateral 0 (heredan los 16px del tab-scroll) */
html body #tab-bio .tab-scroll .bio-form-title,
html body #tab-bio .tab-scroll .form-sub,
html body #tab-bio .tab-scroll .form-tit {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* M2 · LABS-CATEGORIES (HUB ANALÍTICAS) · sin padding lateral propio */
html body #tab-bio .tab-scroll .labs-categories {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* M3 · BIO-SECTION-CARD · contenedor de las secciones HOY (01·Cardio, 02·Sueño, etc) 
   y de los blocks REGISTRAR/HISTORIAL. Quitar márgenes laterales propios si los tuviera. */
html body #tab-bio .tab-scroll .bio-section-card {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* M4 · METRICS-GRID · ya define padding 0 16 en override 4.1 L2241 · revertir */
html body #tab-bio .tab-scroll .metrics-grid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* M5 · HISTORY-LIST · contenedor cards historial */
html body #tab-bio .tab-scroll .history-list,
html body #tab-bio .tab-scroll #bio-history .bio-section-card {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* M6 · LAB-CAT-DETAIL · el detail-view de Sangre/Composición · 
   también vive dentro de tab-scroll · mismo trato */
html body #tab-bio .tab-scroll #lab-cat-detail {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body #tab-bio .tab-scroll #lab-cat-detail .bio-form-title,
html body #tab-bio .tab-scroll #lab-cat-detail .form-sub {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
html body #tab-bio .tab-scroll #lab-cat-detail .drop-zone,
html body #tab-bio .tab-scroll #lab-cat-detail .lab-card,
html body #tab-bio .tab-scroll #lab-cat-detail .bc-card {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* M7 · OVERFLOW-WRAP defensivo para análisis Dr.K y disclaimer (paridad preview) */
html body #tab-bio .tab-scroll #lab-cat-detail .lab-analysis,
html body #tab-bio .tab-scroll #lab-cat-detail .bc-clinical,
html body #tab-bio .tab-scroll #lab-cat-detail .bc-analysis-body,
html body #tab-bio .tab-scroll #lab-cat-detail-content > div[style*="margin-top:14px"],
html body #tab-bio .tab-scroll #lab-cat-detail-content > div[style*="margin-top: 14px"] {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ──────────────────────────────────────────────
   FIN FASE 4.1.4 · 7 reglas · una sola causa raíz · doble margen lateral
   
   Cobertura: HOY (bio-mc cards), REGISTRAR (form inputs), 
   ANALÍTICAS (hub + detail-view), HISTORIAL (timeline cards).
   
   Cero modificaciones a index.html · cero a JavaScript · cero a IDs.
────────────────────────────────────────────── */


/* ──────────────────────────────────────────────
   FASE 4.1.4 · M8 · stages + stress · anular margin lateral 16px
   FIX 29 (L2048) y FIX 30 (L2110) declaran `margin: 0 16px 16px !important`
   con #bio-stages-card / #bio-stress-card en el selector · specificity
   (0,2,0,1) gana a M3 (0,1,2,2) de 4.1.4. Esta regla iguala (0,2,0,2) y
   se declara después · por orden de declaración aplica y deja stages +
   stress alineadas con el resto de cards de HOY a 22px lateral.
   Mantiene margin-bottom: 16px del FIX 29/30 (separación vertical).
────────────────────────────────────────────── */
html body #tab-bio #bio-stages-card,
html body #tab-bio #bio-stress-card {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ──────────────────────────────────────────────
   FASE 4.1.4 · M9 · alert-n3 PRECAUCIÓN · anular margin lateral 16px
   FIX 17 (overrides L1816) declara `margin: 0 16px 16px !important` en
   `body #tab-bio .alert-n3` · specificity (0,1,1,1). Card se inyecta
   como hijo directo de #bio-overview (dentro de .tab-scroll) · el
   margin extra la dejaba descentrada a x=38 vs el resto de cards de
   HOY a x=22. Esta regla con specificity (0,1,2,2) gana por número
   de clases y mantiene margin-bottom 16px del FIX 17.
────────────────────────────────────────────── */
html body #tab-bio .tab-scroll .alert-n3 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ════════════════════════════════════════════════════════════════
   FASE 4.1.4 · M10 + M11 · ANALÍTICAS detail-view paridad v2
   ════════════════════════════════════════════════════════════════

   Audit DOM Playwright sobre preview tras click en card "Sangre y hormonas":
     · #labs-hub-header → display:none OK
     · #lab-cat-detail  → display:block OK
     · #labs-categories → display:flex (¡no se oculta!) · JS hace
       catGrid.style.display='none' pero overrides L2730 declara
       `display: flex !important` ganando al inline style.
       Resultado: usuario ve grid completo + detail a y=1116px (fuera
       del fold de 852px) · "se abre abajo del todo".

     · drop-zone/title/sub usaban estilos legacy (forest-deep, border
       dashed, Geist, glow gold ::after gigante) · no encajaban con
       resto de BIO v2.

   M10 = grid se oculta cuando JS pone inline display:none.
   M11 = detail content con tokens v2 (card paper, stroke sutil, sin
   glow ::after, Inter v2 con em Playfair gold).
──────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────
   M10 · labs-categories oculta cuando JS pone display:none inline
   Bug: `display: flex !important` en L2730 ganaba al inline style.
   Fix: attribute selector con specificity (0,1,3,2) + !important.
   Cuando user pulsa card activa, grid desaparece y detail aparece
   en su lugar (arriba) en vez de a 1116px abajo.
────────────────────────────────────────────── */
html body #tab-bio .labs-categories[style*="display: none"],
html body #tab-bio .labs-categories[style*="display:none"] {
  display: none !important;
}


/* ──────────────────────────────────────────────
   M11 · detail-view content · paridad design v2
   Tokens: --card, --stroke, --t1/t2/t3, --gold, --sage, --sp-*, --sh-soft
   Selectores scoped a #lab-cat-detail para no afectar otras drop-zones
   de la app (REGISTRAR, Manage, etc).
────────────────────────────────────────────── */

/* drop-zone · card v2 (no forest-deep · no border dashed gold · sin glow ::after) */
html body #tab-bio #lab-cat-detail .drop-zone {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-lg) !important;
  padding: var(--sp-3) var(--sp-2) !important;
  box-shadow: var(--sh-soft) !important;
  margin-bottom: var(--sp-2) !important;
}
html body #tab-bio #lab-cat-detail .drop-zone::before,
html body #tab-bio #lab-cat-detail .drop-zone::after {
  display: none !important;
}
html body #tab-bio #lab-cat-detail .drop-zone.over,
html body #tab-bio #lab-cat-detail .drop-zone:hover {
  border-color: var(--gold-line) !important;
  background: var(--card-hi) !important;
}

/* drop-K · monograma KYVEN fiel a maqueta master
   Maqueta `kyven-master.html` L3849-3861 define el monograma oficial:
     polygon hexagonal stroke gold + g.kmono-k (K geometrica con serifs
     + brazos diagonales · 7 paths/rects fill gold) + circle.kmono-sat
     (satelite gold cx=172,cy=56,r=7).

   El JS inyecta en .drop-K un SVG legacy "K-lines sobre fondo forest
   cuadrado" totalmente diferente. Como NO podemos tocar JS (regla),
   ocultamos el SVG hijo y pintamos el kmono real via background-image
   data URI con el SVG completo (poligono + K + satelite). */
html body #tab-bio #lab-cat-detail .drop-K {
  width: 56px !important;
  height: 56px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-52 -52 104 104' preserveAspectRatio='xMidYMid meet' fill='none'><path d='M 0,-49.6 L 42.99,-24.8 L 42.99,24.8 L 0,49.6 L -42.99,24.8 L -42.99,-24.8 Z' fill='none' stroke='%23C8A45A' stroke-width='3'/><rect x='-15.16' y='-22.04' width='4.14' height='44.08' fill='%23C8A45A'/><path d='M -11.02,-0.69 L 15.15,-22.04 L 19.29,-22.04 L -6.89,0.69 Z' fill='%23C8A45A'/><path d='M -11.02,0.69 L 15.15,22.04 L 19.29,22.04 L -6.89,-0.69 Z' fill='%23C8A45A'/><circle cx='28.935' cy='-30.31' r='2.755' fill='%23C8A45A'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 auto var(--sp-1) !important;
}
html body #tab-bio #lab-cat-detail .drop-K .kyven-mark {
  display: none !important;
}

/* drop-title · Inter sans v2 con em Playfair italic gold (paridad bio-form-title) */
html body #tab-bio #lab-cat-detail .drop-title {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 6px !important;
}
html body #tab-bio #lab-cat-detail .drop-title em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--gold) !important;
}

/* drop-sub · mono UPPERCASE letter 2em t3 (paridad form-sub v2) */
html body #tab-bio #lab-cat-detail .drop-sub {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
}

/* drop-cta · pill mono gold (ya bastante v2 · refinar tokens) */
html body #tab-bio #lab-cat-detail .drop-cta {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  color: var(--gold) !important;
  background: rgba(200, 164, 90, 0.08) !important;
  border: 0.5px solid var(--gold-line) !important;
  border-radius: var(--kv-radius-sm) !important;
  padding: 8px 14px !important;
  margin-top: var(--sp-1) !important;
}
html body #tab-bio #lab-cat-detail .drop-zone.over .drop-cta,
html body #tab-bio #lab-cat-detail .drop-zone:hover .drop-cta {
  background: rgba(200, 164, 90, 0.14) !important;
}

/* labs-list + bodycomp-list · flex column gap consistente */
html body #tab-bio #lab-cat-detail #labs-list,
html body #tab-bio #lab-cat-detail #bodycomp-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: var(--sp-2) !important;
}

/* lab-card + bc-card · card v2 (eliminar 5 técnicas 3D legacy A1.7.5) */
html body #tab-bio #lab-cat-detail .lab-card,
html body #tab-bio #lab-cat-detail .bc-card {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-lg) !important;
  padding: var(--sp-2) !important;
  box-shadow: var(--sh-soft) !important;
  margin-bottom: 0 !important;
}
html body #tab-bio #lab-cat-detail .lab-card::before,
html body #tab-bio #lab-cat-detail .bc-card::before {
  display: none !important;
}


/* ──────────────────────────────────────────────
   FASE 4.1.4 · M12 · brief-dz avatar-drz · monograma KYVEN fiel a maqueta

   ACTUALIZADO: master kyven-master.html L3914-3923 define una VARIANTE
   del monograma para Dr.K interpretation card en BIO HOY (.drk-bav
   hex-style) DIFERENTE al monograma estándar de drk-presence floating:
     · polygon stroke-width 3.4 (más grueso, no 2.4)
     · K simplificada: rect cuerpo width 9 + 2 paths brazos (sin serifs)
     · circle satélite r=10 (más grande, no 7)

   Esto da más presencia visual a la K en BIO HOY que en el floating.
   Antes había metido el monograma estándar (M12 v1) · ahora aplico
   la variante drk-bav fiel al master de la card Dr.K en BIO HOY. */
html body #tab-bio .brief-dz .avatar-drz {
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-52 -52 104 104' preserveAspectRatio='xMidYMid meet' fill='none'><path d='M 0,-49.6 L 42.99,-24.8 L 42.99,24.8 L 0,49.6 L -42.99,24.8 L -42.99,-24.8 Z' fill='none' stroke='%23C8A45A' stroke-width='3.5'/><rect x='-15.16' y='-22.04' width='4.14' height='44.08' fill='%23C8A45A'/><path d='M -11.02,-0.69 L 15.15,-22.04 L 19.29,-22.04 L -6.89,0.69 Z' fill='%23C8A45A'/><path d='M -11.02,0.69 L 15.15,22.04 L 19.29,22.04 L -6.89,-0.69 Z' fill='%23C8A45A'/><circle cx='28.935' cy='-30.31' r='2.755' fill='%23C8A45A'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  /* Anular el efecto "redondo + glow gold" del legacy L2073-2082.
     Master .drk-bav.hex-style L368: background transparent + border none.
     Solo el SVG dorado sobre la card · sin círculo ni glow detrás. */
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
html body #tab-bio .brief-dz .avatar-drz .kyven-mark {
  display: none !important;
}


/* ──────────────────────────────────────────────
   FASE 4.1.4 · BLOQUE 3 · subnav-btn font-size canon master
   Master .tab L271-282: font-size 10px / letter 1.6px. Producción
   actual hereda 11px del CSS legacy de index.html. Forzamos 10
   para coherencia tipográfica con escala canon master.
   Solo afecta a las 4 subtabs HOY/REGISTRAR/ANALÍTICAS/HISTORIAL
   en BIO. Specificity (0,1,2,1) gana al CSS legacy. */
html body #tab-bio .subnav-btn {
  font-size: 10px !important;
  letter-spacing: 1.6px !important;
  font-weight: 400 !important;
}
/* Solo la subnav activa mantiene weight 700 (paridad master .tab.on) */
html body #tab-bio .subnav-btn.active {
  font-weight: 700 !important;
}


/* ────────────────────────────────────────────────────────────────
   FASE 4.1.4 · BLOQUE FINAL · RENDERING PARIDAD MASTER
   ════════════════════════════════════════════════════════════════
   Audit Playwright master vs Safari real detectó 3 causas reales del
   "menos refinado / más cargado":

   1. body hereda font-family Geist + letter-spacing -0.08px (legacy
      index.html). Master usa Inter normal. Por eso todo lo que hereda
      sin override propio renderiza Geist con tracking negativo.
   2. .recovery-hero/.brief-dz/.mc tienen ::before y ::after con
      radial-gradient sage + gold hairlines (legacy decorativos).
      Master cards limpias sin pseudo-elementos. Eso es el "glow verde
      agresivo" + "ruido" tonal.
   3. .brief-dz-text Dr.K quote sin tratamiento blockquote (bg paper
      sutil + line-height 1.55 + letter-spacing normal). Master tiene
      pill subtle.
──────────────────────────────────────────────────────────────── */

/* α · Font family + smoothing premium en TODO #tab-bio
   Scope al tab-bio para no afectar a otras tabs ya validadas. */
html body #tab-bio,
html body #tab-bio * {
  font-family: var(--sans);
}
html body #tab-bio {
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* β · Anular pseudo-elementos decorativos legacy de cards BIO.
   Master cards (.ring-hero, .card-std, .bio-mc) NO tienen ::before
   ni ::after. Son hairlines gold + radial-gradients sage/gold que
   añaden ruido y "carga" visual. */
html body #tab-bio .recovery-hero::before,
html body #tab-bio .recovery-hero::after,
html body #tab-bio .brief-dz::before,
html body #tab-bio .brief-dz::after,
html body #tab-bio .mc::before,
html body #tab-bio .mc::after,
html body #tab-bio .bio-section-card::before,
html body #tab-bio .bio-section-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* γ · brief-dz-text Dr.K quote · blockquote paridad master .drk-quote
   bg paper sutil 2.4% + border-radius right + line-height 1.55 +
   letter-spacing normal + padding interior. Da "pill editorial". */
html body #tab-bio .brief-dz-text {
  background: rgba(230, 226, 218, 0.024) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 14px !important;
  letter-spacing: normal !important;
  line-height: 1.55 !important;
}

/* δ · subnav-btn line-height normal (paridad master) */
html body #tab-bio .subnav-btn,
html body #tab-bio .subnav-btn.active {
  line-height: normal !important;
}


/* ════════════════════════════════════════════════════════════════
   FASE 4.1.4 · COLLAPSING HEADER · WHOOP-style
   ────────────────────────────────────────────────────────────────
   Pattern: cuando #tab-bio recibe la clase .scrolled (JS scroll listener
   en index.html), el .recovery-hero se contrae a píldora compacta de
   ~56px de altura manteniendo el % Recovery + estado siempre visibles.

   Transición 300ms cubic-bezier(0.4, 0, 0.2, 1) (estándar Material/iOS).
   will-change declarado para que el navegador prepare composite layer
   y la animación de height vaya a 60fps en Safari iOS.

   Si en testing real se detecta jank <60fps, refactorizar height→
   transform: scaleY + counter-scale del contenido (técnica Material).
   No bloqueamos en hipotético · empezamos con height directo del brief.
──────────────────────────────────────────────────────────────── */

/* Base del hero · transición all paridad preview B + will-change composite iOS */
html body #tab-bio .recovery-hero {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-origin: top center;
  will-change: height, padding, margin;
}
html body #tab-bio .recovery-hero .recovery-arc,
html body #tab-bio .recovery-hero .recovery-arc svg,
html body #tab-bio .recovery-hero .recovery-num,
html body #tab-bio .recovery-hero .recovery-num::after,
html body #tab-bio .recovery-hero .recovery-state,
html body #tab-bio .recovery-hero .recovery-row {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Estado colapsado · paridad preview B WHOOP-style · height fijo 56px */
html body #tab-bio.scrolled .recovery-hero {
  height: 56px !important;
  padding: 8px 14px !important;
  margin: 8px 16px !important;
}
html body #tab-bio.scrolled .recovery-hero .recovery-label {
  display: none !important;
}
html body #tab-bio.scrolled .recovery-hero .recovery-row {
  align-items: center !important;
  gap: 12px !important;
}
html body #tab-bio.scrolled .recovery-hero .recovery-arc,
html body #tab-bio.scrolled .recovery-hero .recovery-arc svg {
  width: 40px !important;
  height: 40px !important;
}
html body #tab-bio.scrolled .recovery-hero .recovery-num {
  font-size: 14px !important;
}
/* ::after pinta "%" en producción (FIX 8 FASE 4.1.1 · paridad maqueta ring-val) */
html body #tab-bio.scrolled .recovery-hero .recovery-num::after {
  font-size: 8px !important;
  top: 0 !important;
}
html body #tab-bio.scrolled .recovery-hero .recovery-pct,
html body #tab-bio.scrolled .recovery-hero .recovery-pct::before {
  display: none !important;
}
html body #tab-bio.scrolled .recovery-hero .recovery-state {
  font-size: 13px !important;
  margin: 0 !important;
}
html body #tab-bio.scrolled .recovery-hero .recovery-desc {
  display: none !important;
}

/* brief-dz Dr.K interpretation · ocultar al scrollear (paridad preview D)
   El usuario ya tiene el % Recovery + estado en la pill del hero compacto ·
   no necesita la card Dr.K visible al scrollear contenido. Ganamos 100+ px
   verticales adicionales. Transition fade + height para suavidad. */
html body #tab-bio .brief-dz {
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-height: 500px;
  overflow: hidden;
}
html body #tab-bio.scrolled .brief-dz {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: transparent !important;
}


/* ════════════════════════════════════════════════════════════════
   FASE 4.2 · DR. KYVEN CHAT · paridad master · SOLO ESTÉTICA
   ════════════════════════════════════════════════════════════════
   REWRITE limpio cubriendo los 10 puntos del brief Carlos: header,
   paleta+bg, layout, tipografía, mensajes Dr.K, input, sugg,
   iconografía, typing, jerarquía premium · master kyven-master.html.

   Funcional intacto 100%: renderChat / sendMessage / streaming /
   scroll auto / typing / input flow / suggestions click logic /
   IDs HTML / listeners / animaciones funcionales. Cero modificación
   de display/position/flex-direction/animation-keyframes/transform.
──────────────────────────────────────────────────────────────── */

/* 1 · HEADER · drk-fullscreen-bar (el header REAL en chat fullscreen
   mode · .drk-h se oculta L13628 con #tab-chat.drk-active). Monograma
   kmono master ::after entre back-btn y título. Premium clínico. */
html body #tab-chat .drk-fullscreen-bar {
  position: relative !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--stroke) !important;
  padding: 14px 20px !important;
  gap: 12px !important;
}
/* FIX FORENSE · eliminada la regla ::after que duplicaba el avatar K
   en el header · sustituida por el HTML inyectado .drk-master-av del
   patch master styling (index.html L16267). Cero impacto cross-tab:
   .drk-fullscreen-bar solo existe en #tab-chat. */
html body #tab-chat .drk-back-btn { color: var(--gold) !important; }
html body #tab-chat .drk-fullscreen-title {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  padding-left: 38px !important;
  margin-bottom: 2px !important;
}
html body #tab-chat .drk-fullscreen-subtitle {
  font-family: var(--mono) !important;
  font-size: 7.5px !important;
  letter-spacing: 1px !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
  padding-left: 38px !important;
  opacity: 0.85 !important;
}
html body #tab-chat .drk-h {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--stroke) !important;
}
html body #tab-chat .drk-h-name {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
}
html body #tab-chat .drk-h-online { color: var(--sage) !important; }
html body #tab-chat .drk-h-eyebrow {
  color: var(--t4) !important;
  background: transparent !important;
  border: none !important;
}
html body #tab-chat .drk-h-btn {
  background: var(--card) !important;
  border-color: var(--stroke) !important;
  color: var(--t3) !important;
}
html body #tab-chat .drk-h-btn:active {
  color: var(--gold) !important;
  border-color: var(--gold-line) !important;
}
/* FIX 3 BUG 1 · ELIMINADAS las 3 reglas legacy de .drk-K-big.
   Razón: el patch en index.html añade `#tab-chat .drk-h { display: none
   !important; }` (oculta el header legacy entero · su hijo .drk-K-big
   queda inalcanzable). Las reglas eran código muerto · su eliminación
   no afecta a otras pantallas porque .drk-K-big solo existe en #tab-chat
   (verified L16305 única ocurrencia HTML). */

/* 2 · BACKGROUND · gradient forest verde profundo cinematográfico
   tinte sage más visible · profundidad ambiental Apple-level */
html body #tab-chat .chat-scroll {
  background: radial-gradient(ellipse at top, rgba(107,168,142,0.07) 0%, rgba(78,132,112,0.04) 25%, var(--bg) 55%, var(--bg-deep) 100%) !important;
  padding: 16px 20px 8px !important;
}

/* 3+4 · LAYOUT · padding lateral 20 · gap horizontal entre K y bubble
   aumentado a 14 (era 11) · línea decorativa DESACTIVADA (invadía
   texto · master no la tiene tampoco) */
html body #tab-chat .chat-msg-ai {
  padding: 16px 20px 6px !important;
  gap: 14px !important;
}
html body #tab-chat .chat-msg-ai::before {
  display: none !important;
}

/* FIX FORENSE · ELIMINADAS las 3 líneas residuales de .chat-msg-K
   (border-color · color · box-shadow). Razón: box-shadow generaba halo
   cuadrado dorado alrededor del bounding box 22×24 del avatar mini K ·
   en Safari iOS se veía como "caja" alrededor del hex. El patch ya
   define avatar K hex correctamente sin necesidad de estas reglas. */
html body #tab-chat .chat-bubble-text {
  font-family: var(--serif) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.005em !important;
  color: var(--t1) !important;
}
html body #tab-chat .chat-bubble-text strong {
  color: var(--gold) !important;
  font-weight: 600 !important;
}
html body #tab-chat .chat-bubble-text em {
  color: var(--sage-soft) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
html body #tab-chat .chat-bubble-text .msg-h {
  color: var(--gold) !important;
  font-family: var(--serif) !important;
  font-style: italic !important;
}
html body #tab-chat .chat-bubble-text .msg-h2 {
  color: var(--gold) !important;
  font-family: var(--mono) !important;
}
html body #tab-chat .chat-bubble-text .msg-hr { background: var(--gold-line) !important; }

/* FIX FORENSE · ELIMINADA regla .chat-msg-user entera.
   Razón: bg var(--card-hi) + border + radius + padding + serif metían
   una caja oscura con borde y texto serif al mensaje del usuario · master
   canon es texto sans-serif derecha SIN caja. El patch en index.html ya
   define background:transparent + border:none + padding:0 + Inter
   sans-serif aligned right. */

/* TIMESTAMPS · mono t4 alineados con bubble start */
html body #tab-chat .msg-time {
  color: var(--t4) !important;
  font-family: var(--mono) !important;
  font-size: 8px !important;
  letter-spacing: 2px !important;
  padding-left: 62px !important;
}
html body #tab-chat .chat-msg-ai + .msg-time {
  color: var(--t4) !important;
  padding-left: 62px !important;
}
html body #tab-chat .msg-time-user {
  color: var(--t4) !important;
  padding-left: 0 !important;
  padding-right: 4px !important;
  text-align: right !important;
}
html body #tab-chat .msg-data-read {
  color: var(--gold-eyebrow) !important;
  padding-left: 62px !important;
}
html body #tab-chat .msg-data-read::before { background: var(--gold) !important; }
html body #tab-chat .msg-close-night {
  color: var(--gold-eyebrow) !important;
  border-top-color: var(--stroke) !important;
}

/* Date divider · mono t4 hairline */
html body #tab-chat .date-divider .line,
html body #tab-chat .date-divider-nat .line { background: var(--stroke) !important; }
html body #tab-chat .date-divider .txt,
html body #tab-chat .date-divider-nat .txt {
  color: var(--t4) !important;
  font-family: var(--mono) !important;
  letter-spacing: 2px !important;
}

/* Bubble-card embebida (risk cards) · card v2 */
html body #tab-chat .bubble-card {
  background: var(--card) !important;
  border-color: var(--stroke) !important;
  border-radius: var(--kv-radius-md) !important;
}
html body #tab-chat .bubble-card-pair { color: var(--gold) !important; }

/* 6 · INPUT BAR · premium compacto · 36×36 botones equilibrados */
html body #tab-chat .input-row {
  background: rgba(6,17,14,0.96) !important;
  border-top: 1px solid var(--stroke) !important;
  padding: 9px 14px 20px !important;
  gap: 8px !important;
  align-items: center !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
html body #tab-chat .input-attach {
  width: 36px !important;
  height: 36px !important;
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-md) !important;
  color: var(--t3) !important;
}
html body #tab-chat .input-area,
html body #tab-chat #chat-input {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-md) !important;
  padding: 9px 12px !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: var(--t1) !important;
  min-height: 36px !important;
}
html body #tab-chat .input-area::placeholder,
html body #tab-chat #chat-input::placeholder {
  color: var(--t4) !important;
  font-style: italic !important;
  font-family: var(--sans) !important;
}
html body #tab-chat .input-area:focus,
html body #tab-chat #chat-input:focus {
  border-color: var(--gold-line) !important;
  outline: none !important;
}
/* FIX 2 BUG 5 · eliminadas `background: var(--gold) !important;` (shorthand
   reseteaba background-image paper-plane del patch) y `color: var(--bg) !important;`
   (forzaba stroke SVG a var(--kvn-bg-app, #06110E) casi invisible sobre gold). El patch en
   index.html ya define el background del .input-send y el color del SVG. */
html body #tab-chat .input-send {
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  border-radius: var(--kv-radius-md) !important;
  box-shadow: 0 2px 10px rgba(200,164,90,0.25) !important;
}
html body #tab-chat .input-send.disabled,
html body #tab-chat .input-send:disabled {
  background: rgba(200,164,90,0.14) !important;
  color: rgba(200,164,90,0.4) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* 7 · SUGGESTIONS · cards verticales (paridad master .prompts) ·
   3 variantes funcionales preservadas */
html body #tab-chat .suggestions-bar {
  padding: 6px 20px 4px !important;
}
html body #tab-chat .sugg {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--kv-radius-md) !important;
  padding: 8px 14px !important;
  color: var(--t2) !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  letter-spacing: -0.1px !important;
  line-height: 1.4 !important;
}
html body #tab-chat .sugg.priority {
  background: rgba(200,164,90,0.08) !important;
  background-image: none !important;
  border-color: var(--gold-line) !important;
  color: var(--t1) !important;
  box-shadow: none !important;
}
html body #tab-chat .sugg.sugg-action.primary {
  background: var(--gold) !important;
  background-image: none !important;
  border-color: var(--gold) !important;
  color: var(--bg) !important;
  font-weight: 600 !important;
}
html body #tab-chat .sugg.sugg-action.secondary {
  background: var(--card-hi) !important;
  border-color: var(--stroke-hi) !important;
  color: var(--t1) !important;
}

/* 9 · TYPING DR.K · solo color · animation legacy preservada */
html body #tab-chat .drk-pulse-cursor { background: var(--gold) !important; }
html body #tab-chat .drk-pulse-placeholder { color: var(--t3) !important; }
html body #tab-chat .drk-pulse-dots { color: var(--gold) !important; }
html body #tab-chat .msg-typing-dot { background: var(--gold) !important; }

/* EMPTY STATE */
html body #tab-chat .drk-empty-wordmark { color: var(--t1) !important; }
html body #tab-chat .drk-empty-greeting { color: var(--t1) !important; }
html body #tab-chat .drk-empty-tagline { color: var(--t3) !important; }
html body #tab-chat .drk-empty-prompt {
  color: var(--t4) !important;
  font-family: var(--serif) !important;
  font-style: italic !important;
}
html body #tab-chat .drk-empty-meta {
  color: var(--gold-eyebrow) !important;
  background: rgba(200,164,90,0.06) !important;
  border-color: var(--gold-line) !important;
}
html body #tab-chat .drk-empty-chip {
  background: var(--card) !important;
  border-color: var(--stroke) !important;
  color: var(--t2) !important;
  border-radius: var(--kv-radius-md) !important;
}
html body #tab-chat .drk-empty-chip.primary {
  background: rgba(200,164,90,0.08) !important;
  background-image: none !important;
  border-color: var(--gold-line) !important;
  color: var(--t1) !important;
  box-shadow: none !important;
}

/* DRZ-PROACTIVE cards */
html body #tab-chat .drz-proactive-title { color: var(--t1) !important; }
html body #tab-chat .drz-proactive-body { color: var(--t2) !important; }
html body #tab-chat .drz-proactive-body strong { color: var(--t1) !important; }
html body #tab-chat .drz-proactive-time { color: var(--t4) !important; }

/* UPGRADE BANNER */
html body #tab-chat .drz-upgrade-banner {
  background: var(--card-hi) !important;
  background-image: none !important;
  border: 1px solid var(--gold-line) !important;
}
html body #tab-chat .drz-upgrade-title { color: var(--t1) !important; }
html body #tab-chat .drz-upgrade-sub { color: var(--t3) !important; }

/* ════════════════════════════════════════════════════════════════
   COLLAPSING HEADER WHOOP-style · Manage
   ────────────────────────────────────────────────────────────────
   Réplica del patrón de Bio: scroll > 80px añade .scrolled al
   #tab-manage. La card .weekly colapsa smooth (max-height 0 +
   opacity 0) y el botón Añadir Compuesto se queda sticky al top
   con backdrop blur. Threshold y timing idénticos a Bio.
   ════════════════════════════════════════════════════════════════ */
html body #tab-manage .weekly {
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-height: 600px;
  overflow: hidden;
  will-change: max-height, opacity;
}
html body #tab-manage.scrolled .weekly {
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
}
/* add-btn NO necesita sticky · ya está fuera del #compounds-groups (scroller real)
   y queda visible siempre al scrollear los compounds · mantiene estilo original */

/* ════════════════════════════════════════════════════════════════
   WHOOP wearable-card · armonía visual pill + button
   ────────────────────────────────────────────────────────────────
   Pill "● CONECTADO" y button "SINCRONIZAR →" deben tener mismo
   tamaño y estar centrados para que la card no quede desproporcionada
   vs las otras wearable-cards (Oura, Apple, Garmin).
   ════════════════════════════════════════════════════════════════ */
body #tab-bio .wearable-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}
body #tab-bio .wearable-pill,
body #tab-bio .wearable-btn {
  width: 110px !important;
  padding: 6px 10px !important;
  font-size: 8.5px !important;
  letter-spacing: 1.2px !important;
  border-radius: 6px !important;
  min-height: 28px !important;
  height: 28px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}


/* PERFIL · rollback al diseño previo a FASE 2 v2 (2026-05-13)
   El bloque HTML del Perfil se restauró al estado del commit 2fa362b.
   Reglas CSS de paridad master eliminadas. Resto de la app intacta. */


/* ════════════════════════════════════════════════════════════════
   PERFIL · PARIDAD PIXEL-PERFECT kyven-master 2 html L5042-5095
   ────────────────────────────────────────────────────────────────
   Audit forense: medidas exactas master replicadas 1:1.
   Avatar letra mantenido (funcional con openAvatarSheet).
   Solo CSS scoped #tab-profile · cero impacto otras pantallas.
   ════════════════════════════════════════════════════════════════ */

/* 1 · Header PERFIL · oculto (preferencia Carlos · arrancar directamente con hero) */
#tab-profile .profile-page-hdr {
  display: none !important;
}

/* 2 · Eyebrow PACIENTE · GPMI · master .eyebrow-sub
   fw 400 (no 700) · color paper-mute (no gold) · ls 2.5px · margin 14/0/16 */
#tab-profile .id-hero-eb {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 14px 0 16px !important;
}
/* dot sage del eyebrow (master usa span.dot) */
#tab-profile .id-hero-eb::before {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--sage) !important;
  display: inline-block !important;
  margin-right: 7px !important;
}

/* 3 · perfil-hero · padding 24 · margin 16 (respiro Cambio 3 · separa hero del switcher tabs) */
#tab-profile .id-hero {
  margin: 0 0 16px !important;
  padding: 24px !important;
  border-radius: 18px !important;
}

/* 3.b · screen wrapper padding lateral 22px · paridad master .scroll padding 8px 22px 32px */
#tab-profile .screen {
  padding-left: 22px !important;
  padding-right: 22px !important;
}
#tab-profile .tab-scroll {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3.c · tabs row · padding 4 · border-radius 22 · margin compactado 14/0/18 · densidad */
#tab-profile .subnav,
#tab-profile .subnav.kv-tabs {
  margin: 14px 0 18px !important;
  padding: 4px !important;
  border-radius: 22px !important;
}
#tab-profile .subnav-btn,
#tab-profile .subnav-btn.kv-tab {
  padding: 10px 0 !important;
  border-radius: 18px !important;
  min-height: 33px !important;
  height: 33px !important;
}

/* 4 · Avatar · master 64x64 · bg gold 0.10 · border gold 0.30 · letra mantenida
   font Inter 16px fw 400 · color gold soft */
#tab-profile .id-avatar {
  width: 64px !important;
  height: 64px !important;
  background: rgba(200,164,90,0.10) !important;
  border: 1px solid rgba(200,164,90,0.30) !important;
  border-radius: 50% !important;
  color: rgb(184,146,74) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

/* 5 · Nombre Carlos · master fs 28 · ls -0.5 · mb 4 */
#tab-profile .id-name {
  font-size: 28px !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1 !important;
  margin: 0 0 4px !important;
}

/* 6 · Meta 38 AÑOS · 170 CM · 77.5 KG · ♂
   fs 9 · fw 400 · ls 1.5 · color paper-fade 0.42 */
#tab-profile .id-meta {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  color: rgba(230,226,218,0.42) !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

/* 7 · Stats container · padding compactado 14/0/2 · densidad master */
#tab-profile .id-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0 !important;
  padding: 14px 0 2px !important;
  margin: 0 !important;
}

/* 8 · Stat item · master flat (border-radius 0 · sin bg) · divisores verticales sutiles */
#tab-profile .id-stat {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 8px !important;
  position: relative !important;
  text-align: center !important;
  box-shadow: none !important;
}
#tab-profile .id-stat + .id-stat::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 14% !important;
  bottom: 14% !important;
  width: 1px !important;
  background: rgba(230,226,218,0.08) !important;
}

/* 9 · Stat número · master fs 36 · fw 300 · ls -1.4 · color gold · lh 1 */
#tab-profile .id-stat-num {
  font-family: 'Inter', sans-serif !important;
  font-size: 36px !important;
  font-weight: 300 !important;
  color: rgb(200,164,90) !important;
  letter-spacing: -1.4px !important;
  line-height: 1 !important;
  margin-bottom: 0 !important;
}

/* 10 · Stat label · master fs 8 · fw 400 · ls 1.2 · color paper-fade 0.42 */
#tab-profile .id-stat-lbl {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 1.2px !important;
  color: rgba(230,226,218,0.42) !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}

/* 11 · Rows .psec · cards de DATOS · margin 16 paridad con Manage .cmp y Protocolo .compound-card (Cambio 3 respiro) */
#tab-profile .psec {
  background: rgb(18,27,24) !important;
  border: 1px solid rgba(230,226,218,0.06) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin: 0 0 16px !important;
  box-shadow: none !important;
}
#tab-profile .psec-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 !important;
  gap: 12px !important;
}
#tab-profile .psec-left {
  text-align: left !important;
  flex: 1 !important;
  min-width: 0 !important;
}
/* eyebrow master .prow-ey · fs 8 · fw 400 · ls 2 · mb 5 */
#tab-profile .psec-lbl {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
  margin: 0 0 5px !important;
  text-align: left !important;
}
/* valor master .prow-val · fs 14 · fw 500 */
#tab-profile .psec-val {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgb(230,226,218) !important;
  text-align: left !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}


/* ════════════════════════════════════════════════════════════════
   BIO · ritmo vertical WHOOP-style · micro-ajustes spacing
   ────────────────────────────────────────────────────────────────
   1. Tabs → Dr.K · +6px (16→22)
   2. Dr.K ↔ Warning · conectados (mismo bloque conversación clínica)
   3. Warning → "01 CARDIO" · +18/+24px separación de nueva sección
   Sin tocar tamaños/fuentes/colores/cards/borders/shadows/scroll.
   ════════════════════════════════════════════════════════════════ */

/* 1 · Bio rhythm refinado · L3 Recovery→Tabs 24px · L5 Tabs→Dr.K 32px */
html body #tab-bio .subnav {
  margin: 24px 16px 32px !important;
}

/* 2 · Dr.K (.brief-dz) → Warning (.alert-n3) · 18px gap */
html body #tab-bio .brief-dz {
  margin-bottom: 18px !important;
}
html body #tab-bio .alert-n3 {
  margin-top: 0 !important;
  margin-bottom: 28px !important;
}

/* 3 · Warning → "01 CARDIO" · gap 28px (Warning mb 28 + section mt 0) · +18px vs 10 default */
/* Si no hay warning visible, Dr.K queda con mb 8 y section-card primer mt 0 ·
   añadir extra margin-top al primer section-card para mantener ritmo cuando no hay warning */
html body #tab-bio #bio-overview > .bio-section-card:first-child:not(:first-of-type),
html body #tab-bio .brief-dz + #bio-overview > .bio-section-card:first-child {
  margin-top: 20px !important;
}

/* Recovery número · anular kv-num-breath animation · paridad master (sin brillo pulsante) */
html body #tab-protocol .recovery-num,
html body #tab-bio .recovery-num {
  animation: none !important;
}

/* ════════════════════════════════════════════════════════════════
   PROTOCOL · paridad tipografía master
   ────────────────────────────────────────────────────────────────
   Eyebrow ventana matutina · Saludo Buenos días · Sub texto
   ════════════════════════════════════════════════════════════════ */

/* Eyebrow "VENTANA MATUTINA · MORNING BRIEF" · fs 10 · fw 400 · ls 2.5 */
html body #tab-protocol .kv-eyebrow,
html body #tab-protocol [class*="brief-eyebrow"],
html body #tab-protocol .brief-eb {
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
}

/* Saludo "Buenos días, Carlos" · fs 34 · ls -0.6 */
html body #tab-protocol .brief-greet,
html body #tab-protocol .greeting {
  font-size: 34px !important;
  letter-spacing: -0.6px !important;
}

/* Sub texto "Tu cuerpo está empezando..." · Inter sans regular (no Playfair italic)
   selector con #id para superar specificity del override previo (body #tab-protocol #brief-greet-sub) */
html body #tab-protocol #brief-greet-sub,
html body #tab-protocol .brief-greet-sub {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
}

/* ════════════════════════════════════════════════════════════════
   PROTOCOL · OPCIÓN A · paridad tipografías master
   ────────────────────────────────────────────────────────────────
   Recovery número 32→72px · sat-val 22px · drk-quote · labels mono
   Valores EXACTOS del master CSS .hero-state · sin tocar JS/arquitectura
   ════════════════════════════════════════════════════════════════ */

/* Recovery número · master .hero-num · 72px · Inter 300 · gold · ls -4 · lh 0.85 */
html body #tab-protocol .recovery-num,
html body #tab-protocol .kba-num-big,
html body #tab-protocol .hero-num {
  font-family: 'Inter', sans-serif !important;
  font-size: 72px !important;
  font-weight: 300 !important;
  color: var(--kvn-gold-mate, #C8A45A) !important;
  letter-spacing: -4px !important;
  line-height: 0.85 !important;
  animation: none !important;
  text-shadow: none !important;
}

/* signo % · master .hero-num-unit · 22px · gold-mute */
html body #tab-protocol .recovery-pct,
html body #tab-protocol .recovery-num span,
html body #tab-protocol .hero-num-unit {
  font-size: 22px !important;
  color: #B8924A !important;
  font-weight: 400 !important;
  margin-left: 2px !important;
}

/* "RECOVERY" label · master .hero-label · mono 11px · paper 0.62 */
html body #tab-protocol .recovery-label,
html body #tab-protocol .hero-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

/* Estado "MODERADO" · master .hero-state-sub · mono 9px */
html body #tab-protocol .recovery-state,
html body #tab-protocol .hero-state-sub {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
}

/* Cita Dr.K dentro card · master .drk-quote · Playfair italic 14px · paper 0.74 · border sage */
html body #tab-protocol .recovery-quote,
html body #tab-protocol .recovery-desc,
html body #tab-protocol .drk-quote {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(230,226,218,0.74) !important;
  line-height: 1.55 !important;
}

/* HRV / ADHERENCIA labels · master .sat-lbl · mono 8px · paper 0.62 */
html body #tab-protocol .kba-num-lbl,
html body #tab-protocol .kba-meta-lbl,
html body #tab-protocol .sat-lbl {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

/* HRV / ADHERENCIA valores · master .sat-val · 22px · 400 · paper t1 · ls -0.6 */
html body #tab-protocol .kba-num,
html body #tab-protocol .kba-meta-val,
html body #tab-protocol .sat-val {
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--kvn-cream-on-card, #E6E2DA) !important;
  letter-spacing: -0.6px !important;
  line-height: 1 !important;
}

/* sub greet margin-bottom 32→0 · paridad master */
html body #tab-protocol #brief-greet-sub,
html body #tab-protocol .brief-greet-sub {
  margin-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   PROTOCOL · OPCIÓN A · SELECTORES CORREGIDOS preview real
   ────────────────────────────────────────────────────────────────
   Clases reales: .brief-hero-num · .brief-hero-label · .brief-hero-state-sub
   · .drk-quote · .brief-hero-satellites
   ════════════════════════════════════════════════════════════════ */

/* Recovery número grande · master .hero-num · 72px Inter 300 gold */
html body #tab-protocol #brief-hero-num,
html body #tab-protocol .brief-hero-num,
html body #tab-protocol .kv-hero-num {
  font-family: 'Inter', sans-serif !important;
  font-size: 72px !important;
  font-weight: 300 !important;
  color: var(--kvn-gold-mate, #C8A45A) !important;
  letter-spacing: -4px !important;
  line-height: 0.85 !important;
  animation: none !important;
  text-shadow: none !important;
}

/* signo % dentro del número · master .hero-num-unit · 22px gold-mute */
html body #tab-protocol .brief-hero-num .kv-hero-num-unit,
html body #tab-protocol .kv-hero-num-unit {
  font-size: 22px !important;
  color: #B8924A !important;
  font-weight: 400 !important;
  margin-left: 2px !important;
}

/* "RECOVERY" label · master .hero-label · mono 11px paper 0.62 */
html body #tab-protocol #brief-hero-label,
html body #tab-protocol .brief-hero-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

/* Estado MODERADO · master .hero-state-sub · mono 9px */
html body #tab-protocol #brief-hero-state-sub,
html body #tab-protocol .brief-hero-state-sub {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
}

/* Cita Dr.K · master .drk-quote · Playfair italic 14px paper 0.74 · border-left sage */
html body #tab-protocol #brief-drk-quote,
html body #tab-protocol .brief .drk-quote,
html body #tab-protocol .kv-drk-quote {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(230,226,218,0.74) !important;
  line-height: 1.55 !important;
  padding: 12px 14px !important;
  background: rgba(230,226,218,0.025) !important;
  border-left: 2px solid var(--kvn-sage-on-card, #6BA88E) !important;
  border-radius: 0 8px 8px 0 !important;
}
html body #tab-protocol #brief-drk-quote strong,
html body #tab-protocol .brief .drk-quote strong {
  color: #85BEAA !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* Satellites HRV / ADHERENCIA · contenedor */
html body #tab-protocol .brief-hero-satellites {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-top: 14px !important;
}
/* Sat label · master .sat-lbl · mono 8px paper 0.62 */
html body #tab-protocol .brief-hero-satellites .sat-lbl,
html body #tab-protocol .brief-hero-satellites [class*="-lbl"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
/* Sat valor · master .sat-val · 22px 400 paper t1 ls -0.6 */
html body #tab-protocol .brief-hero-satellites .sat-val,
html body #tab-protocol .brief-hero-satellites [class*="-val"] {
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--kvn-cream-on-card, #E6E2DA) !important;
  letter-spacing: -0.6px !important;
  line-height: 1 !important;
}

/* ════════════════════════════════════════════════════════════════
   PROTOCOL · DENSIDAD VERTICAL · recuperar fold master 2 html
   ────────────────────────────────────────────────────────────────
   5 micro-ajustes · ahorra ~46px de fold útil
   Sin tocar tipografías, tamaños, scroll, función, ni estructura.
   ════════════════════════════════════════════════════════════════ */

/* 1 · top-hdr · padding-bottom 32→8 · ahorra 24px */
html body #tab-protocol .brief-top-hdr {
  padding-bottom: 8px !important;
}

/* 2 · hero-eyebrow margin-bottom 16→14 · paridad master · ahorra 2px */
html body #tab-protocol .brief-hero-eyebrow {
  margin-bottom: 14px !important;
}

/* 3 · drk-quote dentro hero · margin-top 16→0 · pegado a hero-main · paridad master · ahorra 16px */
html body #tab-protocol #brief-drk-quote,
html body #tab-protocol .brief .drk-quote {
  margin-top: 0 !important;
}

/* 4 · greeting-sub margin-top 4→0 · paridad master · ahorra 4px */
html body #tab-protocol #brief-greet-sub,
html body #tab-protocol .brief-greet-sub {
  margin-top: 0 !important;
}

/* 5 · greeting margin-bottom 6→10 · paridad master spacing exacto */
html body #tab-protocol #brief-greet,
html body #tab-protocol .brief-greet {
  margin-bottom: 10px !important;
}

/* ════════════════════════════════════════════════════════════════
   AJUSTES · section-label · estilo eyebrow gold mono · jerarquía visual
   ────────────────────────────────────────────────────────────────
   Headings de AJUSTES (Notificaciones, Modo Dr.K, Datos, Sesión,
   Zona de reinicio) tenían Inter 14px blanco · sin jerarquía premium.
   Ahora con eyebrow mono gold uppercase igual que master section headers.
   ════════════════════════════════════════════════════════════════ */
html body #ptab-settings .section-label,
html body #tab-profile #ptab-settings .section-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  color: rgba(201, 169, 97, 0.74) !important;
  text-transform: uppercase !important;
  margin-top: 22px !important;
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}
/* primer section-label sin margin-top extra */
html body #ptab-settings .section-hdr:first-of-type .section-label,
html body #ptab-settings > .section-label:first-child {
  margin-top: 14px !important;
}

/* ════════════════════════════════════════════════════════════════
   PERFIL · UNIFICACIÓN TOTAL · paleta + tamaños master 2 html
   Aplicado a TODOS los elementos de DATOS · PLAN · AJUSTES
   bg #121B18 · stroke 0.06 · radius 14 · padding 16 · margin 8
   Sin tocar JS · funciones · estructura · sólo estética
   ════════════════════════════════════════════════════════════════ */

/* ── AJUSTES · Cards Guía de uso (PROTOCOLO/BIO/DR.K/MANAGE/INSIGHTS/DATOS) ── */
html body #ptab-settings .guide-card,
html body #ptab-settings .guide-block .guide-card {
  background: rgb(18,27,24) !important;
  border: 1px solid rgba(230,226,218,0.06) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin: 0 0 8px !important;
  box-shadow: none !important;
}
html body #ptab-settings .guide-card-head {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
html body #ptab-settings .guide-card-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  color: rgba(201,169,97,0.85) !important;
  text-transform: uppercase !important;
}
html body #ptab-settings .guide-card-body {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(230,226,218,0.74) !important;
  line-height: 1.5 !important;
  padding-top: 10px !important;
}

/* ── AJUSTES · Primeros pasos rows (Instalar/Conectar/Subir) ── */
html body #ptab-settings .guide-row,
html body #ptab-settings .ob-feature-item {
  background: rgb(18,27,24) !important;
  border: 1px solid rgba(230,226,218,0.06) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin: 0 0 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ── AJUSTES · Notificaciones items ── */
html body #ptab-settings .notif-item {
  background: rgb(18,27,24) !important;
  border: 1px solid rgba(230,226,218,0.06) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin: 0 0 8px !important;
}
html body #ptab-settings .notif-name {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgb(230,226,218) !important;
}
html body #ptab-settings .notif-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--text-tertiary) !important;
  line-height: 1.4 !important;
}

/* ── AJUSTES · Modo Dr.K cards (Guiado/Experto) ── */
html body #ptab-settings .drmode-card {
  background: rgb(18,27,24) !important;
  border: 1px solid rgba(230,226,218,0.06) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin: 0 0 8px !important;
  box-shadow: none !important;
}
html body #ptab-settings .drmode-card.active {
  background: rgb(22,33,29) !important;
  border: 1px solid rgba(200,164,90,0.30) !important;
}
html body #ptab-settings .drmode-card-title,
html body #ptab-settings .drmode-card .title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  color: rgba(201,169,97,0.85) !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
html body #ptab-settings .drmode-card-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(230,226,218,0.74) !important;
  line-height: 1.5 !important;
}

/* ── AJUSTES · Botones settings (Exportar/Importar/Recuperar/Cerrar sesión) ── */
html body #ptab-settings .btn-s.settings-btn,
html body #ptab-settings .settings-btn {
  background: rgb(18,27,24) !important;
  border: 1px solid rgba(230,226,218,0.06) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin: 0 0 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgb(230,226,218) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 50px !important;
  text-align: left !important;
  box-shadow: none !important;
}
html body #ptab-settings .btn-s.settings-btn:active {
  background: rgb(22,33,29) !important;
}
/* Botón danger · Resetear toda la app */
html body #ptab-settings .btn-s.settings-danger,
html body #ptab-settings .settings-danger {
  border: 1px solid rgba(200,135,90,0.30) !important;
  color: rgba(200,135,90,0.85) !important;
}

/* ── PLAN · Trial card ── */
html body #ptab-billing .trial-card,
html body #ptab-billing [class*="trial"],
html body #ptab-billing .billing-trial {
  background: rgb(18,27,24) !important;
  border: 1px solid rgba(230,226,218,0.06) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin: 0 0 12px !important;
}

/* ── PLAN · Cards de planes (Essential, etc.) ── */
html body #ptab-billing .plan-card,
html body #ptab-billing .billing-plan {
  background: rgb(18,27,24) !important;
  border: 1px solid rgba(230,226,218,0.06) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  margin: 0 0 10px !important;
}
html body #ptab-billing .plan-card.active,
html body #ptab-billing .billing-plan.selected {
  border: 1px solid rgba(200,164,90,0.30) !important;
  background: rgb(22,33,29) !important;
}

/* ── PLAN · Selector MENSUAL/ANUAL ── */
html body #ptab-billing .billing-segmented,
html body #ptab-billing .billing-toggle {
  background: rgb(18,27,24) !important;
  border: 1px solid rgba(230,226,218,0.06) !important;
  border-radius: 22px !important;
  padding: 4px !important;
}

/* ── B4 PWA step instructions ── */
html body #ptab-settings .b4-pwa-step-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: rgba(230,226,218,0.74) !important;
  line-height: 1.5 !important;
}
html body #ptab-settings .b4-pwa-step-text strong {
  color: rgb(200,164,90) !important;
  font-weight: 600 !important;
}

/* Protocol · espaciado lateral cards · paridad Bio
   Gap lateral viewport: 22px (= Bio) · padding interno card hero: 16px (= Bio) */
html body #tab-protocol .brief,
html body #tab-protocol .brief.kv-hero-card {
  padding: 16px !important;
  margin-left: 2px !important;
  margin-right: 2px !important;
}
/* Otras cards principales Protocol también +2px lateral · paridad Bio */
html body #tab-protocol #brief-next-row,
html body #tab-protocol .toma-card,
html body #tab-protocol .compound-card {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

/* ════════════════════════════════════════════════════════════════
   PWA iPhone · safe-area + breathing premium vertical
   ────────────────────────────────────────────────────────────────
   Carlos reporta contenido pegado al notch en PWA real iPhone.
   Soluciones:
   1. +12px extra sobre safe-area-top en TODOS los tabs principales
   2. Chat header padding-top +8 sobre safe-area
   3. Chat composer padding-bottom +18 sobre safe-area-bottom (home bar)
   4. Protocol greeting → card · más separación premium
   ════════════════════════════════════════════════════════════════ */

/* 1 · Safe-area-top + 14px extra · breathing premium iPhone */
html body #tab-protocol .screen,
html body #tab-manage .screen,
html body #tab-insights .screen,
html body #tab-profile .screen {
  padding-top: calc(env(safe-area-inset-top, 44px) + 14px) !important;
}

/* 1b · Bio · padding-top extendido unificado Safari/PWA · +18px sobre safe-area (era PWA-only) */
html body #tab-bio .screen {
  padding-top: calc(env(safe-area-inset-top, 44px) + 18px) !important;
}

/* 2 · Chat fullscreen bar · más aire bajo notch */
html body #tab-chat .drk-fullscreen-bar {
  padding-top: calc(env(safe-area-inset-top, 44px) + 10px) !important;
}

/* 3 · Chat composer · safe-area-bottom + aire premium para home bar iOS */
html body #tab-chat .input-row {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
}

/* 4 · Protocol greeting → card · separación premium WHOOP-style */
html body #tab-protocol .brief-greeting-block {
  margin-bottom: 22px !important;
}

/* 5 · Protocol top-hdr · más aire bajo safe-area antes del logo */
html body #tab-protocol .brief-top-hdr {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ════════════════════════════════════════════════════════════════
   MANAGE · corrección posición vertical inicial PWA
   ────────────────────────────────────────────────────────────────
   Manage empieza demasiado abajo: el +14 extra sobre safe-area
   más el padding interno del tab-scroll y safe-area del wrapper
   suman demasiado. Reducimos solo en Manage al safe-area neto.
   ════════════════════════════════════════════════════════════════ */
html body #tab-manage .screen {
  padding-top: env(safe-area-inset-top, 44px) !important;
}
html body #tab-manage .tab-scroll {
  padding-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   INSIGHTS V5 · paridad con Manage en altura inicial
   La regla genérica de línea 4941 añade +14px sobre safe-area;
   Insights V5 (con sticky-wrap propio) no necesita ese +14 extra.
   Match exacto con Manage: solo safe-area neto.
   ════════════════════════════════════════════════════════════════ */
html body #tab-insights.ins-v5-active .screen {
  padding-top: env(safe-area-inset-top, 44px) !important;
}
html body #tab-manage .weekly {
  margin-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   BIO · corrección densidad PWA · scoped #tab-bio
   ────────────────────────────────────────────────────────────────
   Carlos reporta en PWA: contenido comprimido, tabs muy altas,
   bottom nav dominante, cards inferiores cortadas por el fold.
   Solución: reducir padding-top + compactar tabs subnav.
   ════════════════════════════════════════════════════════════════ */

/* 1 · Safe-area-top neto (sin +14 global) · sube contenido como Manage */
html body #tab-bio .screen {
  padding-top: env(safe-area-inset-top, 44px) !important;
}

/* 2 · Subnav tabs (HOY/REGISTRAR/ANALÍTICAS/HISTORIAL) · más compactas
   Recuperaba ~14px de altura · ahorra fold vertical */
html body #tab-bio .subnav {
  margin: 14px 16px 18px !important;
}

/* 3 · Recovery-hero · margin unificado Safari/PWA · 22px bajo el hero */
html body #tab-bio .recovery-hero {
  margin: 0 16px 22px !important;
}

/* ════════════════════════════════════════════════════════════════
   BIO · breathing premium UNIFICADO Safari/PWA (2026-05-22)
   ────────────────────────────────────────────────────────────────
   El bloque @media (display-mode: standalone) que vivía aquí ha sido
   eliminado. Sus 9 valores se han fusionado en las reglas base de Bio
   (.screen, .recovery-hero, .subnav, .brief-dz, .alert-n3,
   .bio-section-card:first-child, .bio-section-card, .tab-scroll,
   .section-hdr) para que Safari y PWA muestren exactamente el mismo
   espaciado. La safe-area sigue respetada vía env() en .screen y
   .tab-scroll. Razón: los previews validados en Safari ahora reflejan
   con fidelidad lo que verá el usuario en la PWA instalada.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   SPRINT PERFIL · v1 · 2026-05-18
   ════════════════════════════════════════════════════════════════════════════
   Objetivo: aplicar el sistema visual del diseño master (kyven-master.html)
   sobre el tab #tab-profile sin tocar lógica, IDs ni handlers.
   
   Bloques de este sprint:
     1. Sistema base · reset suave del scope #tab-profile
     2. Page header oculto + Hero (id-hero) + eyebrow + stats
     3. Subnav DATOS/PLAN/AJUSTES con look .tabs master
     4. Tab DATOS · cards .psec con look .prow master + accordion inline
     5. Tab PLAN · cards Pro+Elite con look .plan-card · toggle oculto
     6. Tab AJUSTES · notif-rows / mode-toggle / setting-rows + guide oculto
     7. QA final + safe-area + microajustes
   
   Reglas duras:
     - Cero cambios en HTML estructural (solo añadir clases si necesario)
     - Cero cambios en JS de comportamiento
     - Cero pérdida de funcionalidad respecto al 12-may
     - Solo CSS, scoped al tab-profile
   ════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   BLOQUE 1 · SISTEMA BASE · RESET SUAVE DEL PERFIL
   ──────────────────────────────────────────────────────────────────────────
   - Quita el header "PERFIL" arriba (decisión Carlos: no es necesario)
   - Neutraliza glow/halos heredados que ensucian la jerarquía visual
   - Reafirma sombras planas (principio "una sola superficie visual")
   - Alinea el scroll del tab con el sistema sp-* del master
   - Cero impacto en lógica · solo prepara el lienzo limpio para los bloques 2-7
   ────────────────────────────────────────────────────────────────────────── */

/* 1.1 · Header "PERFIL" oculto · usuario entra directo al hero
   Mantenemos el HTML por compatibilidad (no se borra) pero invisible. */
#tab-profile .profile-page-hdr {
  display: none !important;
}

/* 1.2 · Screen wrapper · padding lateral master (22px) · sin paddings duplicados
   El master usa .scroll padding 8px 22px 32px · nuestro equivalente es
   #tab-profile .screen + .tab-scroll. */
#tab-profile .screen {
  padding-left: 22px !important;
  padding-right: 22px !important;
  background: var(--bg) !important;
}
#tab-profile .tab-scroll {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 8px !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
  background: transparent !important;
}

/* 1.3 · Glow card eliminado en TODAS las superficies del Perfil
   Principio master: una sola superficie visual. Sin glow per-card.
   Esto neutraliza ::before/::after decorativos heredados que generan
   ruido visual sumado. */
#tab-profile .id-hero::before,
#tab-profile .id-hero::after,
#tab-profile .psec::before,
#tab-profile .psec::after,
#tab-profile .plan-hero::before,
#tab-profile .plan-hero::after,
#tab-profile .trial::before,
#tab-profile .trial::after,
#tab-profile .guide-section::before,
#tab-profile .guide-section::after,
#tab-profile .drmode-section::before,
#tab-profile .drmode-section::after,
#tab-profile .gpmi-badge::before,
#tab-profile .gpmi-badge::after {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* 1.4 · Sombras planas reafirmadas · ninguna card del Perfil tiene drop-shadow
   exterior agresivo. Solo el inset master sutil de --sh-card. */
#tab-profile .id-hero,
#tab-profile .psec,
#tab-profile .plan-hero,
#tab-profile .trial,
#tab-profile .drmode-section,
#tab-profile .drmode-card,
#tab-profile .guide-section,
#tab-profile .guide-card,
#tab-profile .gpmi-badge,
#tab-profile .btn-s.settings-btn {
  box-shadow: var(--sh-card) !important;
}

/* 1.5 · Animaciones decorativas neutralizadas en cards del Perfil
   El hero/cards no deben pulsar/breathing/shimmer · genera fatiga visual
   en sesiones largas (principio Carlos: app cómoda para horas). 
   Mantenemos solo entry cascade (gestionada en switchTab por JS). */
#tab-profile .id-hero,
#tab-profile .psec,
#tab-profile .plan-hero,
#tab-profile .trial,
#tab-profile .id-hero-eb::before,
#tab-profile .plan-eb::before {
  animation: none !important;
}

/* 1.6 · Fuentes garantizadas en scope · respetan stack del master */
#tab-profile {
  font-family: var(--sans) !important;
  color: var(--t1);
}

/* 1.7 · Eyebrow del id-hero · NO usa gold ni pulse · sage dot estilo master
   Es el "PACIENTE · GPMI" del hero. Master lo quiere sutil, no gritando. */
#tab-profile .id-hero-eb {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
#tab-profile .id-hero-eb::before {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--sage) !important;
  box-shadow: 0 0 8px rgba(107,168,142,0.55) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  animation: none !important;
  margin: 0 !important;
}

/* ── FIN BLOQUE 1 ────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   BLOQUE 2A · HERO MASTER + FEATURED OBJETIVOS · 2026-05-18
   ──────────────────────────────────────────────────────────────────────────
   Aplica al id-hero el aspecto exacto del master:
   - Eyebrow "PACIENTE · GPMI" CENTRADO sobre el card (fuera del card visualmente)
   - Avatar 88px circular sage-bg con icono persona (no inicial, no satélite)
   - Nombre Playfair regular 32px (sin italic · italic solo si hay 2+ palabras)
   - Meta mono 9px t4 mayúsculas
   - Stats grid 3 columnas con dividers verticales sutiles
   - Card hero sin sombra, sin glow, padding sp-3 (32px)
   - Card OBJETIVOS (.psec[data-section="goals"]) con tratamiento .featured
     (border-left 2px gold + bg card-hi + eyebrow gold)
   
   NO toca: IDs · onclick · estructura HTML · JS · funciones de render.
   La inicial "C" del avatar (renderIdHero) la SOBRESCRIBIMOS visualmente 
   con un SVG persona via CSS · la inicial sigue existiendo en el DOM por
   compatibilidad pero queda invisible.
   ────────────────────────────────────────────────────────────────────────── */

/* 2A.1 · Mostrar eyebrow CENTRADO sobre el hero (no dentro del card)
   El master pone "● PACIENTE · GPMI" arriba, centrado, antes del hero.
   En tu HTML el eyebrow vive DENTRO del .id-hero. Lo sacamos visualmente
   con position absolute + transform, manteniendo el div en su sitio. */
#tab-profile .id-hero {
  position: relative !important;
  margin-top: 36px !important;  /* aire arriba para el eyebrow flotante */
}
#tab-profile .id-hero .id-hero-eb {
  position: absolute !important;
  top: -28px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}
#tab-profile .id-hero .id-hero-eb::before {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--sage) !important;
  box-shadow: 0 0 8px rgba(107,168,142,0.55) !important;
  flex-shrink: 0 !important;
  animation: none !important;
}

/* 2A.2 · Hero card · estilo master limpio
   bg --card-hi · border 1px stroke · radius 18px · padding 32px (sp-3)
   sin glow, sin shimmer, sin shadow exterior */
#tab-profile .id-hero {
  background: var(--card-hi) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 18px !important;
  padding: var(--sp-3) !important;
  box-shadow: var(--sh-card) !important;
  overflow: visible !important;  /* importante: el eyebrow está fuera */
}

/* 2A.3 · Layout interno del hero · header + stats con sp-3 entre bloques */
#tab-profile .id-hero-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 24px !important;
}

/* 2A.4 · Avatar 88px · master style · NO inicial, NO satélite
   Usa SVG persona inline como background-image · esto OCULTA la "C" 
   sin tocar JS (renderIdHero sigue poniendo la inicial dentro · invisible). */
#tab-profile .id-avatar {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  border-radius: 50% !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23B8924A' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") center/32px no-repeat,
    rgba(200,164,90,0.10) !important;
  border: 1px solid var(--gold-line) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  /* Oculta visualmente la inicial · sigue accesible para screen readers */
  color: transparent !important;
  text-indent: -9999px !important;
  font-size: 0 !important;
  cursor: pointer !important;
}
/* Si el usuario tiene imagen avatar (.has-img) · respetar la imagen, NO el SVG persona */
#tab-profile .id-avatar.has-img {
  background-image: none !important;
}
#tab-profile .id-avatar.has-img img.kv-av-img {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 2A.5 · Hint satélite gold · OCULTO definitivamente
   El bolito gold que aparecía abajo a la derecha del avatar no encaja
   con el lenguaje master · queda fuera. El tap al avatar sigue funcionando. */
#tab-profile .id-avatar .id-avatar-hint {
  display: none !important;
}

/* 2A.6 · Nombre · Playfair regular 32px (no italic · master usa regular)
   El JS de renderIdHero envuelve el primer nombre en <em> · forzamos
   font-style normal globalmente y dejamos italic solo si hay más de 1 
   palabra (caso poco común · master prioriza limpieza). */
#tab-profile .id-hero .id-name {
  font-family: var(--serif) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--t1) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.05 !important;
  margin: 0 0 6px !important;
}
#tab-profile .id-hero .id-name em {
  font-style: normal !important;  /* override del italic que JS aplica */
  color: var(--t1) !important;
}

/* 2A.7 · Meta · mono 9px t4 mayúsculas (idéntico master) */
#tab-profile .id-hero .id-meta {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* 2A.8 · Stats grid · 3 columnas centradas con divisores VERTICALES sutiles
   Master usa stroke 1px de color stroke · muy sutil · solo visible centrado */
#tab-profile .id-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#tab-profile .id-stat {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 4px 0 !important;
  background: none !important;
  border: none !important;
}
/* Divider vertical · solo entre items (no después del último) */
#tab-profile .id-stat:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 1px !important;
  background: var(--stroke) !important;
}

/* 2A.9 · Stat number · Inter weight 300 36px gold · master spec exacto */
#tab-profile .id-stats .id-stat-num,
#tab-profile .id-stats .id-stat-num.kv-num-md {
  font-family: var(--sans) !important;
  font-size: 36px !important;
  font-weight: 300 !important;
  color: var(--gold) !important;
  letter-spacing: -1.8px !important;
  line-height: 1 !important;
  margin: 0 !important;
  background: none !important;
  -webkit-text-fill-color: var(--gold) !important;  /* override gradient si existe */
}

/* 2A.10 · Stat label · mono 8px t4 mayúsculas */
#tab-profile .id-stats .id-stat-lbl {
  font-family: var(--mono) !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* 2A.11 · Card OBJETIVOS · tratamiento .featured master
   Border-left 2px gold + bg card-hi + eyebrow gold (no t3)
   Solo el .psec con data-section="goals" recibe este tratamiento. */
#tab-profile .psec[data-section="goals"] {
  background: var(--card-hi) !important;
  border: 1px solid var(--gold-line) !important;
  border-left: 2px solid var(--gold) !important;
}
#tab-profile .psec[data-section="goals"] .psec-lbl {
  color: var(--gold) !important;
}
#tab-profile .psec[data-section="goals"] .psec-chevron,
#tab-profile .psec[data-section="goals"] .psec-edit {
  color: rgba(200,164,90,0.6) !important;
}

/* ── FIN BLOQUE 2A ───────────────────────────────────────────────────────── */

/* ── BLOQUE 2A · HOTFIX nombre 32→28 + text-align left columna texto ─────── */
#tab-profile .id-hero .id-name {
  font-size: 28px !important;
}
#tab-profile .id-hero .id-info,
#tab-profile .id-hero .id-name,
#tab-profile .id-hero .id-meta {
  text-align: left !important;
}
/* ── FIN HOTFIX 2A ───────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   BLOQUE 2A v2 · FIX SOBRE BLOQUE 2A · 2026-05-18
   ──────────────────────────────────────────────────────────────────────────
   Fix de 3 bugs del Bloque 2A original:
   - Avatar gigante (background-shorthand reseteó background-size)
   - Layout id-hero-row roto
   - Border featured demasiado grueso
   ────────────────────────────────────────────────────────────────────────── */

#tab-profile .id-hero .id-avatar {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  background-color: rgba(200,164,90,0.10) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23B8924A' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") !important;
  background-size: 32px 32px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
}

#tab-profile .id-hero .id-avatar.has-img {
  background-image: none !important;
}
#tab-profile .id-hero .id-avatar.has-img img.kv-av-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

#tab-profile .id-hero .id-avatar .id-avatar-hint {
  display: none !important;
}

#tab-profile .id-hero-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 24px !important;
  width: 100% !important;
}
#tab-profile .id-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#tab-profile .psec[data-section="goals"] {
  background: var(--card-hi) !important;
  border-top: 1px solid var(--gold-line) !important;
  border-right: 1px solid var(--gold-line) !important;
  border-bottom: 1px solid var(--gold-line) !important;
  border-left: 2px solid var(--gold) !important;
}

/* ── FIN BLOQUE 2A v2 ────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUE 2A v2 · FIX PERFIL · 2026-05-18
   Reescribe avatar 88px, layout hero, featured card OBJETIVOS, stats grandes.
   Sobrescribe reglas previas conflictivas con mayor especificidad.
   ══════════════════════════════════════════════════════════════════════════ */

/* Avatar 88px master con SVG persona · fix shorthand background */
#tab-profile .id-hero .id-avatar {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  background-color: rgba(200,164,90,0.10) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23B8924A' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") !important;
  background-size: 32px 32px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
}
#tab-profile .id-hero .id-avatar.has-img {
  background-image: none !important;
}
#tab-profile .id-hero .id-avatar.has-img img.kv-av-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}
#tab-profile .id-hero .id-avatar .id-avatar-hint {
  display: none !important;
}

/* Hero row · forzar layout horizontal (avatar | info) */
#tab-profile .id-hero-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 24px !important;
  width: 100% !important;
}
#tab-profile .id-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Nombre Playfair regular 28px sin italic (master spec) */
#tab-profile .id-hero .id-name,
#tab-profile .id-hero .id-name.kv-hero-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--t1) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1 !important;
  margin: 0 0 4px !important;
}
#tab-profile .id-hero .id-name em {
  font-style: normal !important;
  color: var(--t1) !important;
  font-family: inherit !important;
}

/* Stats container · evitar overlap del border-radius del hero · padding interno limpio */
#tab-profile .id-stats {
  padding: 14px 0 2px !important;
  margin: 0 !important;
}

/* Stat numbers · refinar tamaño exacto master · garantizar gold sin gradient */
#tab-profile .id-stat-num,
#tab-profile .id-stat-num.kv-num-md,
#tab-profile .id-stat-num.gold {
  font-family: 'Inter', sans-serif !important;
  font-size: 36px !important;
  font-weight: 300 !important;
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  letter-spacing: -1.4px !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
  text-shadow: none !important;
}

/* Card OBJETIVOS featured · border-left gold 2px sin acumular bordes */
#tab-profile .psec[data-section="goals"] {
  background: var(--card-hi) !important;
  border-top: 1px solid var(--gold-line) !important;
  border-right: 1px solid var(--gold-line) !important;
  border-bottom: 1px solid var(--gold-line) !important;
  border-left: 2px solid var(--gold) !important;
}
#tab-profile .psec[data-section="goals"] .psec-lbl {
  color: var(--gold) !important;
}

/* ── FIN BLOQUE 2A v2 ──────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUE 2B · TAB DATOS · CARDS DENSAS + FORM + BOTÓN GUARDAR · 2026-05-18
   ══════════════════════════════════════════════════════════════════════════
   - Cards .psec cerradas tipo .prow master (densas, una línea)
   - Form expandido limpio con inputs sutiles
   - Botón GUARDAR border gold-line (no fondo gold saturado)
   - Goals con check no superpuesto al texto
   ══════════════════════════════════════════════════════════════════════════ */

/* Cards .psec cerradas · estilo .prow master · densa una línea */
#tab-profile .psec {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  overflow: hidden !important;
}
#tab-profile .psec-row {
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  cursor: pointer !important;
  min-height: auto !important;
}
#tab-profile .psec-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
#tab-profile .psec-lbl {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  margin: 0 0 5px !important;
}
#tab-profile .psec-val {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -0.1px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
#tab-profile .psec-val.empty {
  color: var(--t4) !important;
  font-style: italic !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}
#tab-profile .psec-chevron,
#tab-profile .psec-edit {
  font-size: 18px !important;
  color: var(--t4) !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}
#tab-profile .psec.open .psec-chevron,
#tab-profile .psec.open .psec-edit {
  transform: rotate(90deg) !important;
  color: var(--gold) !important;
}

/* Form expandido · sutil · padding interior limpio */
#tab-profile .psec-form {
  padding: 0 16px 16px !important;
  border-top: 1px solid var(--stroke) !important;
  margin-top: -1px !important;
}
#tab-profile .psec-form .ff {
  margin-top: 16px !important;
}
#tab-profile .psec-form .ff-lbl {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
}
#tab-profile .psec-form .ff-lbl-unit {
  color: var(--gold) !important;
}
#tab-profile .psec-form .ff-input {
  width: 100% !important;
  background: rgba(230,226,218,0.025) !important;
  border: 1px solid var(--stroke-hi) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: var(--t1) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  outline: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
#tab-profile .psec-form .ff-input:focus {
  border-color: var(--sage) !important;
  background: rgba(230,226,218,0.04) !important;
}
#tab-profile .psec-form .psec-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* Botón GUARDAR · border gold-line, NO fondo gold saturado */
#tab-profile .psec-form .btn-save {
  width: 100% !important;
  background: transparent !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 10px !important;
  padding: 13px 16px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 2.5px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  margin-top: 18px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
#tab-profile .psec-form .btn-save:active {
  background: rgba(200,164,90,0.06) !important;
  border-color: var(--gold) !important;
}
#tab-profile .psec-form .btn-save span {
  color: var(--gold) !important;
}

/* Goals · check no debe tapar texto · positioning limpio */
#tab-profile .goals {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
#tab-profile .goal {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  background: rgba(230,226,218,0.02) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.2s ease !important;
}
#tab-profile .goal.active {
  background: rgba(200,164,90,0.06) !important;
  border-color: var(--gold-line) !important;
}
#tab-profile .goal .goal-ic {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(200,164,90,0.08) !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 8px !important;
  color: var(--gold) !important;
}
#tab-profile .goal .goal-ic svg {
  width: 18px !important;
  height: 18px !important;
}
#tab-profile .goal .goal-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding-right: 28px !important;
}
#tab-profile .goal .goal-tit {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -0.1px !important;
}
#tab-profile .goal .goal-sub {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 1.2px !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
}
#tab-profile .goal .goal-check {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1px solid var(--stroke-hi) !important;
  background: transparent !important;
  color: var(--sage) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}
#tab-profile .goal.active .goal-check {
  opacity: 1 !important;
  background: var(--sage) !important;
  border-color: var(--sage) !important;
  color: var(--bg) !important;
}
#tab-profile .goal.active .goal-check svg {
  width: 11px !important;
  height: 11px !important;
}
#tab-profile .goal {
  position: relative !important;
}

/* GPMI badge · sutil al final · sin marco saturado */
#tab-profile .gpmi-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 32px 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
#tab-profile .gpmi-badge-K svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--gold) !important;
  opacity: 0.5 !important;
}
#tab-profile .gpmi-badge-info {
  text-align: left !important;
}
#tab-profile .gpmi-badge-name {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
#tab-profile .gpmi-badge-sub {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

/* ── FIN BLOQUE 2B ─────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUE 3 · TAB PLAN · master plan-card · 2026-05-18
   ══════════════════════════════════════════════════════════════════════════
   - 2 cards (KYVEN €49 + KYVEN Elite €99)
   - Toggle MENSUAL/ANUAL oculto (la decisión va en checkout)
   - Trial banner integrado · sin card aparte
   - Look idéntico al .plan-card master
   ══════════════════════════════════════════════════════════════════════════ */

/* Ocultar toggle MENSUAL/ANUAL · decisión va en checkout */
#tab-profile .bill-toggle {
  display: flex !important;   /* re-activado · el pricing anual ya está implementado (Mensual/Anual -17%) */
}

/* Trial banner · sutil al final, no card grande */
#tab-profile #ptab-billing .trial {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  box-shadow: none !important;
  text-align: left !important;
}
#tab-profile #ptab-billing .trial-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
#tab-profile #ptab-billing .trial-days {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--t2) !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
}
#tab-profile #ptab-billing .trial-days em {
  color: var(--gold) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
#tab-profile #ptab-billing .trial-sub {
  display: none !important;
}

/* Founders card · estilo plan-card master */
#tab-profile #founders-plan-active {
  background: var(--card-hi) !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 18px !important;
  padding: 32px !important;
  margin: 0 0 16px !important;
  box-shadow: none !important;
}

/* Tier cards · look .plan-card master · gold-line border · sin gradients */
#tab-profile #plans-container .tier {
  background: var(--card-hi) !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 18px !important;
  padding: 32px !important;
  margin: 0 0 16px !important;
  position: relative !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#tab-profile #plans-container .tier::before,
#tab-profile #plans-container .tier::after {
  display: none !important;
  content: none !important;
}
#tab-profile #plans-container .tier.featured {
  background: var(--card-hi) !important;
  border-color: var(--gold-line) !important;
}

/* Tier header · eyebrow gold + título serif */
#tab-profile #plans-container .tier-h {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
}
#tab-profile #plans-container .tier-tag,
#tab-profile #plans-container .tier-tag.current {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  color: var(--gold) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#tab-profile #plans-container .tier-tag::before {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
}
#tab-profile #plans-container .tier-name {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  color: var(--t1) !important;
  letter-spacing: -0.4px !important;
  line-height: 1.15 !important;
  margin: 0 0 6px !important;
}

/* Precio · Inter bold 28px */
#tab-profile #plans-container .tier-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin: 0 0 12px !important;
}
#tab-profile #plans-container .tier-price {
  font-family: 'Inter', sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
  letter-spacing: -0.5px !important;
}
#tab-profile #plans-container .tier-cycle {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
}

/* Features list · limpio · sin checks coloridos */
#tab-profile #plans-container .tier-features {
  margin: 0 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#tab-profile #plans-container .tier-f {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--t2) !important;
  line-height: 1.5 !important;
}
#tab-profile #plans-container .tier-f.no {
  color: var(--t4) !important;
}
#tab-profile #plans-container .tier-f-ic {
  flex-shrink: 0 !important;
  color: var(--sage) !important;
  display: inline-flex !important;
  width: 14px !important;
  height: 14px !important;
}
#tab-profile #plans-container .tier-f.no .tier-f-ic {
  color: var(--t4) !important;
}

/* CTA button · estilo master border gold-line */
#tab-profile #plans-container .tier-cta {
  width: 100% !important;
  background: transparent !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 10px !important;
  padding: 13px 16px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 2.5px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
#tab-profile #plans-container .tier-cta:active {
  background: rgba(200,164,90,0.06) !important;
  border-color: var(--gold) !important;
}
#tab-profile #plans-container .tier-cta.current {
  border-color: var(--sage) !important;
  color: var(--sage) !important;
}
#tab-profile #plans-container .tier-cta.primary {
  background: rgba(200,164,90,0.06) !important;
  border-color: var(--gold) !important;
}

/* ── FIN BLOQUE 3 ──────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUE 4 v2 · TAB AJUSTES · MASTER + Guía colapsable · 2026-05-18
   ══════════════════════════════════════════════════════════════════════════
   - Guide-section envuelta en accordion <details> (cerrado por defecto)
   - Section headers master (mono + meta derecha)
   - kv-set-row · setting rows master · DND + WHOOP sync
   - mode-toggle Guiado/Experto master
   - Botones cuenta (.settings-btn) · setting-row master
   ══════════════════════════════════════════════════════════════════════════ */

/* Accordion "Cómo usar KYVEN" · cerrado por defecto · summary tappable */
#tab-profile .kv-guide-accordion {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 12px !important;
  margin: 8px 0 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#tab-profile .kv-guide-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
}
#tab-profile .kv-guide-summary::-webkit-details-marker {
  display: none !important;
}
#tab-profile .kv-guide-summary-lbl {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -0.2px !important;
}
#tab-profile .kv-guide-summary-chev {
  font-family: 'Inter', sans-serif !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  color: var(--t4) !important;
  transition: transform 0.25s ease !important;
  line-height: 1 !important;
}
#tab-profile .kv-guide-accordion[open] .kv-guide-summary-chev {
  transform: rotate(90deg) !important;
  color: var(--gold) !important;
}
#tab-profile .kv-guide-accordion[open] .kv-guide-summary {
  border-bottom: 1px solid var(--stroke) !important;
}
#tab-profile .kv-guide-accordion .guide-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 16px 18px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Eyebrow "PRIMEROS PASOS" dentro del accordion · más sutil */
#tab-profile .kv-guide-accordion .guide-section > div:first-child {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  text-align: left !important;
  margin: 0 0 12px !important;
}

/* (F5) CSS muerto eliminado · .guide-step-card y .guide-cta-btn no existen en DOM */

/* Section headers (NOTIFICACIONES, MODO KYVEN, etc) · master ritmo */
#tab-profile #ptab-settings .section-hdr {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin: 32px 0 12px !important;
  padding: 0 !important;
  border: none !important;
}
#tab-profile #ptab-settings .section-hdr:first-of-type {
  margin-top: 8px !important;
}
#tab-profile #ptab-settings .section-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 2.8px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
}
#tab-profile #ptab-settings .section-meta {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
}

/* Notif rows · estilo master · NO tocamos render JS · solo styling externo */
#tab-profile #notif-settings-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
#tab-profile #notif-settings-container > * {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* kv-set-row · setting row master */
#tab-profile .kv-set-row {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin: 0 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  cursor: pointer !important;
}
#tab-profile .kv-set-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
#tab-profile .kv-set-name {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -0.2px !important;
  margin: 0 0 2px !important;
}
#tab-profile .kv-set-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
  letter-spacing: -0.1px !important;
  margin: 0 !important;
}
#tab-profile .kv-toggle {
  width: 38px !important;
  height: 22px !important;
  background: rgba(230,226,218,0.1) !important;
  border: none !important;
  border-radius: 99px !important;
  position: relative !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background 0.2s ease !important;
}
#tab-profile .kv-toggle::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--t1) !important;
  transition: all 0.2s ease !important;
}
#tab-profile .kv-toggle.on {
  background: var(--sage) !important;
}
#tab-profile .kv-toggle.on::after {
  left: 18px !important;
  background: var(--bg) !important;
}

/* Modo Dr. K · mode-toggle master */
#tab-profile .drmode-section {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  margin: 0 0 8px !important;
  box-shadow: none !important;
}
#tab-profile .drmode-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  margin: 0 !important;
}
#tab-profile .drmode-card {
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 10px !important;
  text-align: center !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
}
#tab-profile .drmode-card.active,
#tab-profile .drmode-card[aria-pressed="true"] {
  background: var(--card-hi) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
#tab-profile .drmode-card-icon {
  display: none !important;
}
#tab-profile .drmode-card-name {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  margin: 0 0 4px !important;
}
#tab-profile .drmode-card.active .drmode-card-name,
#tab-profile .drmode-card[aria-pressed="true"] .drmode-card-name {
  color: var(--gold) !important;
  font-weight: 700 !important;
}
#tab-profile .drmode-card-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  color: var(--t4) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.1px !important;
}
#tab-profile .drmode-active {
  display: none !important;
}

/* Botones cuenta · setting-row master */
#tab-profile #ptab-settings .btn-s.settings-btn {
  width: 100% !important;
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin: 0 0 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: flex-start !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-align: left !important;
  transition: background 0.2s ease !important;
}
#tab-profile #ptab-settings .btn-s.settings-btn:active {
  background: var(--card-hi) !important;
}
#tab-profile #ptab-settings .btn-s.settings-btn svg {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--t3) !important;
}
#tab-profile #ptab-settings .btn-s.settings-btn span {
  flex: 1 1 auto !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -0.2px !important;
}
#tab-profile #ptab-settings .btn-s.settings-btn.settings-danger span {
  color: var(--clay) !important;
}

/* Footer wordmark · sutil al final */
#tab-profile .kyven-wordmark-footer {
  margin-top: 48px !important;
  padding: 24px 0 0 !important;
  text-align: center !important;
  opacity: 0.4 !important;
  border-top: 1px solid var(--stroke) !important;
}
#tab-profile .kyven-wordmark {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--t2) !important;
  letter-spacing: 1px !important;
  margin: 0 0 4px !important;
}
#tab-profile .kyven-wordmark .k-gold {
  color: var(--gold) !important;
}
#tab-profile .kyven-descriptor {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
}

/* ── FIN BLOQUE 4 v2 ───────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUE 5a · Modo Dr.K · paridad master .mode-toggle · 2026-05-18
   ──────────────────────────────────────────────────────────────────────────
   Aplicar visual exacto del master a los .drmode-card existentes.
   NO tocar HTML, NO tocar JS (setDrMode), NO tocar textos.
   Spec master L2586-2625.
   ══════════════════════════════════════════════════════════════════════════ */

#tab-profile .drmode-section {
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  margin: 0 0 8px !important;
  box-shadow: none !important;
}
#tab-profile .drmode-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  margin: 0 !important;
}
#tab-profile .drmode-card {
  padding: 12px !important;
  text-align: center !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  display: block !important;
}
#tab-profile .drmode-card.active,
#tab-profile .drmode-card[aria-pressed="true"] {
  background: var(--card-hi) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
#tab-profile .drmode-card-icon {
  display: none !important;
}
#tab-profile .drmode-card-name {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  margin: 0 0 4px !important;
}
#tab-profile .drmode-card.active .drmode-card-name,
#tab-profile .drmode-card[aria-pressed="true"] .drmode-card-name {
  color: var(--gold) !important;
  font-weight: 700 !important;
}
#tab-profile .drmode-card-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  color: var(--t4) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}
#tab-profile .drmode-active {
  display: none !important;
}

/* ── FIN BLOQUE 5a ─────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUE 5 · FINAL · pulido sprint Perfil · 2026-05-18
   ══════════════════════════════════════════════════════════════════════════
   - Banner notif "no disponible" sutil (borde dashed)
   - Modo Dr.K cards · texto legible · sin overflow
   - Section headers minor para grupos pequeños
   - Botón danger reset · clay sutil sin alarmismo
   - Wordmark footer visible al final
   ══════════════════════════════════════════════════════════════════════════ */

/* Banner notif "no disponible" · más sutil cuando único hijo */
#tab-profile #notif-settings-container > div:only-child {
  background: transparent !important;
  border: 1px dashed var(--stroke-hi) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  text-align: left !important;
  opacity: 0.55 !important;
  box-shadow: none !important;
}
#tab-profile #notif-settings-container > div:only-child > * {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Modo Dr.K · texto legible · no truncar · líneas múltiples */
#tab-profile .drmode-card-desc {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  hyphens: none !important;
}
#tab-profile .drmode-card {
  min-height: 88px !important;
}

/* Section headers · menos prominentes para grupos pequeños (SESIÓN, ZONA DE REINICIO, DATOS) */
#tab-profile #ptab-settings .section-hdr {
  margin: 24px 0 10px !important;
}
#tab-profile #ptab-settings .section-hdr:first-of-type {
  margin-top: 8px !important;
}
#tab-profile #ptab-settings .section-label {
  font-size: 9px !important;
  letter-spacing: 2.2px !important;
  opacity: 0.55 !important;
}

/* Botones cuenta · padding optimizado para densidad */
#tab-profile #ptab-settings .btn-s.settings-btn {
  padding: 13px 14px !important;
  margin: 0 0 6px !important;
}

/* Botón Reset (danger) · clay sutil · NO alarmismo */
#tab-profile #ptab-settings .btn-s.settings-btn.settings-danger,
#tab-profile #ptab-settings .btn-s.settings-btn[onclick*="reset"],
#tab-profile #ptab-settings .btn-s.settings-btn[onclick*="Reset"] {
  border-color: rgba(193,118,90,0.22) !important;
  background: rgba(193,118,90,0.035) !important;
}
#tab-profile #ptab-settings .btn-s.settings-btn.settings-danger svg,
#tab-profile #ptab-settings .btn-s.settings-btn[onclick*="reset"] svg,
#tab-profile #ptab-settings .btn-s.settings-btn[onclick*="Reset"] svg {
  color: var(--clay) !important;
  opacity: 0.7 !important;
}
#tab-profile #ptab-settings .btn-s.settings-btn.settings-danger span,
#tab-profile #ptab-settings .btn-s.settings-btn[onclick*="reset"] span,
#tab-profile #ptab-settings .btn-s.settings-btn[onclick*="Reset"] span {
  color: var(--clay) !important;
  opacity: 0.85 !important;
}

/* Wordmark footer · visible al final del scroll */
#tab-profile #ptab-settings .kyven-wordmark-footer,
#tab-profile .kyven-wordmark-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-top: 40px !important;
  margin-bottom: 24px !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid var(--stroke) !important;
  opacity: 0.42 !important;
  text-align: center !important;
}

/* ── FIN BLOQUE 5 · CIERRE SPRINT PERFIL ──────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 6 · COLLAPSING HEADER WHOOP-style · Perfil
   ────────────────────────────────────────────────────────────────
   Réplica idéntica del patrón de Manage. Cuando scroll > 80px en el
   .tab-scroll de Perfil, se añade .scrolled al #tab-profile.
   Colapsan .profile-page-hdr (título PERFIL) y .id-hero (avatar +
   nombre + meta + stats). El .subnav (DATOS / PLAN / AJUSTES) queda
   visible arriba para que el usuario pueda navegar mientras scrollea.
   Threshold, timing y easing idénticos a Manage.
   ════════════════════════════════════════════════════════════════ */
html body #tab-profile .profile-page-hdr,
html body #tab-profile .id-hero {
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-height: 600px;
  overflow: hidden;
  will-change: max-height, opacity;
}
html body #tab-profile.scrolled .profile-page-hdr,
html body #tab-profile.scrolled .id-hero {
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
}
/* ── FIN BLOQUE 6 · COLLAPSING HEADER PERFIL ──────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 7 · FIX guía "Cómo usar KYVEN"
   ────────────────────────────────────────────────────────────────
   F2 · cursor:default para .guide-row.pending sin onclick
   F3 · subir .guide-card-title de 10px → 11px (más legible)
   F4 · unificar ambos .guide-block-title (mismo estilo gold-eyebrow)
   F6 · separación visual entre PRIMEROS PASOS y GUÍA DE USO
   F1 · panel desplegable "Instalar KYVEN" con instrucciones Safari
   ════════════════════════════════════════════════════════════════ */

/* F2 · pending sin onclick deja de mostrar cursor:pointer engañoso */
#tab-profile #ptab-settings .guide-row.pending:not([onclick]) {
  cursor: default !important;
}
#tab-profile #ptab-settings .guide-row.pending:not([onclick]):active {
  background: rgb(18,27,24) !important;
  transform: none !important;
}

/* F3 · guide-card-title más legible (10px → 11px) */
#tab-profile .kv-guide-accordion .guide-card-title {
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
}

/* F4 · unificar ambos .guide-block-title dentro del accordion
   · ambos: 10px · gold-eyebrow · letter-spacing 0.22em
   sobreescribe la regla L6164 que solo afectaba a :first-child */
#tab-profile .kv-guide-accordion .guide-block-title,
#tab-profile .kv-guide-accordion .guide-section > .guide-block-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: var(--gold-eyebrow) !important;
  text-transform: uppercase !important;
  text-align: left !important;
  margin: 0 0 10px !important;
}

/* F6 · separar el segundo bloque (GUÍA DE USO) con border-top + padding */
#tab-profile .kv-guide-accordion .guide-block-title + #guide-setup-rows + .guide-block-title,
#tab-profile .kv-guide-accordion .guide-section > .guide-block-title:nth-of-type(2) {
  margin-top: 22px !important;
  padding-top: 16px !important;
  border-top: 0.5px solid var(--stroke) !important;
}

/* F1 · panel "Instalar KYVEN" desplegable
   El row tiene state .expanded · se muestra panel con pasos visuales */
#tab-profile #ptab-settings .guide-row[data-step="pwa"] {
  flex-wrap: wrap !important;
  cursor: pointer !important;
}
#tab-profile #ptab-settings .guide-row[data-step="pwa"] .guide-pwa-panel {
  flex-basis: 100% !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#tab-profile #ptab-settings .guide-row[data-step="pwa"].expanded .guide-pwa-panel {
  max-height: 400px !important;
  opacity: 1 !important;
  margin-top: 12px !important;
}
#tab-profile #ptab-settings .guide-pwa-panel {
  padding-top: 10px !important;
  border-top: 0.5px dashed var(--stroke) !important;
}
#tab-profile #ptab-settings .guide-pwa-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(230,226,218,0.78) !important;
  line-height: 1.45 !important;
}
#tab-profile #ptab-settings .guide-pwa-step-num {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(201,169,97,0.10) !important;
  border: 0.5px solid rgba(201,169,97,0.32) !important;
  color: var(--gold) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 1px !important;
}
#tab-profile #ptab-settings .guide-pwa-step em {
  color: var(--gold) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}
/* Cuando expandido · el chevron del row rota */
#tab-profile #ptab-settings .guide-row[data-step="pwa"] .guide-row-arrow {
  transition: transform 0.2s ease !important;
}
#tab-profile #ptab-settings .guide-row[data-step="pwa"].expanded .guide-row-arrow {
  transform: rotate(90deg) !important;
}
/* ── FIN BLOQUE 7 · FIX GUÍA CÓMO USAR KYVEN ─────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 8 · FIX FORENSE #tab-profile · white-space heredado
   ────────────────────────────────────────────────────────────────
   CAUSA RAÍZ: la regla L302 `body .tab { white-space: nowrap }` está
   pensada para botones de tabs (segmented control) pero colisiona
   con el contenedor de pantalla <div class="tab tab-profile"> y se
   hereda a TODOS sus descendientes. Por eso los textos largos de la
   guía "Cómo usar KYVEN" y otros panels se desbordaban a la derecha.

   Ya existen FIX FORENSE para #tab-detail, #tab-manage, #tab-chat
   (index.html L16917+). Este bloque hace lo mismo para #tab-profile,
   con excepciones para elementos que SÍ deben quedar en una línea
   (chips, eyebrows mono, números heroicos, sub-meta).
   ════════════════════════════════════════════════════════════════ */
#tab-profile {
  white-space: normal !important;
  text-align: left !important;
}
#tab-profile *,
#tab-profile *::before,
#tab-profile *::after {
  white-space: normal !important;
}
/* Excepciones · elementos que DEBEN mantener nowrap (chips, badges,
   eyebrows mono cortos, números heroicos, tab buttons del subnav) */
#tab-profile .subnav-btn,
#tab-profile .kv-tab,
#tab-profile .tab-eb,
#tab-profile .tab-src,
#tab-profile .id-stat-lbl,
#tab-profile .id-stat-num,
#tab-profile .id-name,
#tab-profile .id-meta,
#tab-profile .psec-val,
#tab-profile .psec-chevron,
#tab-profile .notif-time,
#tab-profile .notif-master-eb,
#tab-profile .notif-section-eb,
#tab-profile .guide-card-title,
#tab-profile .guide-block-title,
#tab-profile .guide-row-arrow,
#tab-profile .guide-pwa-step-num,
#tab-profile .plan-eb,
#tab-profile .plan-price,
#tab-profile .plan-cta,
#tab-profile .badge,
#tab-profile .chip,
#tab-profile .kv-toggle,
#tab-profile .drmode-card-name,
#tab-profile .section-label,
#tab-profile .section-meta {
  white-space: nowrap !important;
}
/* ── FIN BLOQUE 8 · FIX FORENSE WHITESPACE PERFIL ─────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 10 · Avatar sheet · refundir a paleta v2
   ────────────────────────────────────────────────────────────────
   El sheet usaba variables v1 (--forest-soft, --border-strong,
   --forest-deep, --gold-bright, --night, --paper-tri, --ease-standard)
   que en v2 son aliases o no existen. Refundimos a tokens v2 puros:
   Forest Deep + Paper jerárquico + Gold canon · misma estética que
   las cards de Perfil.
   ════════════════════════════════════════════════════════════════ */
body #avatar-sheet {
  background: var(--card-hi) !important;
  border: 0.5px solid var(--stroke-hi) !important;
  border-bottom: none !important;
  box-shadow: 0 -16px 32px rgba(0,0,0,0.4), 0 -1px 0 rgba(255,255,255,0.02) inset !important;
}
body #avatar-sheet-overlay {
  background: rgba(6,17,14,0.78) !important;
}
body .avatar-sheet-handle {
  background: var(--stroke-hi) !important;
  width: 38px !important;
  height: 4px !important;
}
body .avatar-sheet-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  font-weight: 700 !important;
  color: var(--gold-eyebrow) !important;
  text-transform: uppercase !important;
  padding: 14px 0 18px !important;
}
body .avatar-sheet-grid {
  gap: 14px !important;
  padding: 0 18px 22px !important;
}
body .avatar-sheet-item {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .avatar-sheet-item:active {
  transform: scale(0.96) !important;
}
body .avatar-sheet-circle {
  background: var(--card-soft) !important;
  border: 0.5px solid var(--stroke) !important;
  transition:
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .avatar-sheet-circle.initials-circle {
  background: linear-gradient(165deg, var(--gold) 0%, var(--gold-mute) 100%) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--bg-deep) !important;
  letter-spacing: -0.02em !important;
}
body .avatar-sheet-item.selected .avatar-sheet-circle {
  border-color: var(--gold) !important;
  box-shadow:
    0 0 0 2px var(--gold-line),
    0 0 18px var(--gold-glow) !important;
}
body .avatar-sheet-item.selected .avatar-sheet-circle::after {
  background-color: var(--gold) !important;
  border: 1.5px solid var(--card-hi) !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6.5L5 9.5L10 3.5' stroke='%2306110E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 10px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
body .avatar-sheet-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
}
body .avatar-sheet-item.selected .avatar-sheet-label {
  color: var(--gold) !important;
}
/* ── FIN BLOQUE 10 · AVATAR SHEET PALETA V2 ──────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 11 · FIX iniciales en .id-avatar
   ────────────────────────────────────────────────────────────────
   El Bloque 2A v2 (L5523-5525) puso color:transparent + font-size:0
   + text-indent:-9999px al .id-avatar para esconder el "?" inicial
   del HTML legacy y mostrar SVG persona como fondo. Esto también
   escondía las iniciales cuando el usuario elegía "INICIAL" en el
   sheet · el texto se aplicaba al DOM pero quedaba invisible.

   Fix · cuando el JS marca .has-initials (porque hay iniciales reales,
   no '?'), revertir esas reglas para hacer las letras visibles con
   estilo gold canon · paridad con el avatar-sheet initials-circle.
   ════════════════════════════════════════════════════════════════ */
#tab-profile .id-hero .id-avatar.has-initials {
  background-image: none !important;
  background-color: transparent !important;
  background: linear-gradient(165deg, var(--gold) 0%, var(--gold-mute) 100%) !important;
  border: 1px solid var(--gold) !important;
  color: var(--bg-deep) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-indent: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
}
/* ── FIN BLOQUE 11 · FIX INICIALES AVATAR ────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 12 · FIX remarco fino · unificar fondo capas html/body/shell
   ────────────────────────────────────────────────────────────────
   Carlos reportó "remarco fino en otro color" en el fondo. Audit:

   ANTES:
   - html        → var(--night)  = #060c08 (forest-950 · más oscuro)
   - body        → var(--night)  = #060c08
   - .app-shell  → var(--cream)  = var(--night) = #060c08
     Pero algunos pixels mostraban .app-shell = var(--kvn-bg-app, #06110E) porque
     reglas legacy aplicaban var(--bg) en otros sitios.
   - safe-bg ios → var(--night)  = #060c08

   Master usa body=#050a08 + .phone=var(--kvn-bg-app, #06110E) (diferencia intencional
   con phone shell decorativo). En la app real fullscreen no hay
   phone shell · el body queda visible por los safe-area insets
   (notch superior, home indicator inferior) creando el remarco.

   FIX · todo unificado a var(--bg) = var(--kvn-bg-app, #06110E) (paridad master .phone
   y theme-color meta) · sin diferencias entre capas.
   ════════════════════════════════════════════════════════════════ */
/* Sprint fondo-nav-identidad · fondo UNIFORME solid en html/body/.app-shell
   Razón: esta regla (máxima specificity) controla la cascada del fondo raíz.
   Solución: color solid tokenizado · idéntico visualmente al gradient previo
   (sus 3 stops eran todos var(--kvn-bg-app)) · sin el bug WebKit de attach fixed. */
html,
body,
html body {
  /* GC-FRANJA-FIX jun 11 · solid color tokenizado · ver index.html:441
     (este bloque es el de MÁXIMA SPECIFICITY · regla raíz que controla la cascada) */
  background: var(--kvn-bg-app, #050E0B) !important;
}
.app-shell,
html body .app-shell {
  /* GC-FRANJA-FIX jun 11 · solid color tokenizado · ver index.html:441 */
  background: var(--kvn-bg-app, #050E0B) !important;
}
.ios-pwa-safe-bg {
  /* GC-2.2 patch · safe-area fill tokenizado · pinta el área Home Indicator cream con flag ON */
  background: var(--kvn-bg-app, #050E0B) !important;
  background-color: var(--kvn-bg-app, #050E0B) !important;
}
/* Desktop breakpoint · mantener body neutro · shell máx 480 igual */
@media (min-width: 640px) {
  html body {
    background: var(--bg-deep) !important;
  }
  html body .app-shell {
    background: var(--bg) !important;
  }
}
/* ── FIN BLOQUE 12 · UNIFICAR FONDO ──────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 13 · FIX marco fino lateral · ajustar glow ambient
   ────────────────────────────────────────────────────────────────
   Carlos sigue viendo marco fino tras Bloque 12. Audit pixel-perfect:

   y=50:  [0-11: #0a1713] [12-773: var(--kvn-bg-app, #06110e)] [774-785: #0a1814]
   y=100: [0-11: #0a1713] [12-773: var(--kvn-bg-app, #06110e)] [774-785: #0a1713]
   y=400: [0-11: #081511]                    [774-785: #081511]

   Franja lateral de ~5.5px CSS (11px @dpr2) a cada lado con tono
   distinto al centro. Causa: .app-shell::before tiene radial-gradient
   sage `circle at 50% -10%, sage 0.08 0%, transparent 55%` que centra
   el matiz verde solo en zona central superior. Los bordes laterales
   NO reciben el gradient → quedan var(--kvn-bg-app, #06110e) puro mientras el centro
   queda var(--kvn-bg-app, #06110e) + sage 8% = ligeramente más verde.

   FIX · cambiar a ellipse 200% ancho que se extiende más allá del
   viewport → el matiz sage es uniforme en horizontal · marco
   desaparece. Mantiene el efecto vertical (más fuerte arriba, fade
   abajo) idéntico al master.
   ════════════════════════════════════════════════════════════════ */
/* Linear vertical · uniforme horizontalmente · sin marco lateral */
:root {
  --glow-ambient: linear-gradient(180deg, rgba(107,168,142,0.06) 0%, rgba(107,168,142,0) 50%) !important;
}
body.kv-state-optimal {
  --glow-ambient: linear-gradient(180deg, rgba(107,168,142,0.10) 0%, rgba(107,168,142,0) 50%) !important;
}
body.kv-state-moderate {
  --glow-ambient: linear-gradient(180deg, rgba(107,168,142,0.06) 0%, rgba(107,168,142,0) 50%) !important;
}
body.kv-state-low {
  --glow-ambient: linear-gradient(180deg, rgba(200,168,122,0.05) 0%, rgba(200,168,122,0) 50%) !important;
}
/* ── FIN BLOQUE 13 · FIX MARCO LATERAL ───────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 14 · FIX padding lateral viewport · CAUSA RAÍZ marco
   ────────────────────────────────────────────────────────────────
   Audit dimensiones reveló la fuente del marco:

     #tab-profile { padding: 10px 6px; border-radius: 18px }
     #tab-profile .screen { x=6, w=381 }  ← NO cubre x=0-5 ni x=387-392

   La regla `body .tab` (overrides L302) aplica padding 10px 6px +
   border-radius xl pensada para BOTONES de subnav (segmented control)
   pero colisiona con el contenedor de viewport <div class="tab tab-profile">.
   Resultado: el .screen queda con 6px de margen lateral donde el
   .app-shell::before glow ambient es visible · creando el "marco fino"
   que Carlos veía.

   Mismo problema afecta a #tab-protocol, #tab-bio, #tab-chat,
   #tab-manage, #tab-insights, #tab-detail.

   FIX · resetear padding y border-radius en los viewport tabs · mantener
   las otras propiedades de `body .tab` (flex, transition, etc.) que
   no rompen nada en el viewport.
   ════════════════════════════════════════════════════════════════ */
html body #tab-protocol,
html body #tab-bio,
html body #tab-chat,
html body #tab-manage,
html body #tab-insights,
html body #tab-profile {
  padding: 0 !important;
  border-radius: 0 !important;
  background: var(--bg) !important;
}
/* #tab-detail · viewport overlay con notch · Bloque 23 abajo restaura
   safe-area-inset-top (se sacó del selector group de Bloque 14 porque
   `padding: 0 !important` mataba el env() y dejaba botones bajo el notch) */
/* ── FIN BLOQUE 14 · FIX PADDING VIEWPORT ────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 16 · stats hero · display puro (paridad master)
   ────────────────────────────────────────────────────────────────
   Decisión UX (Opción C): los stats DÍAS ACTIVOS / COMPUESTOS /
   PILARES son DISPLAY puro · no tappables. Card .id-hero sigue
   siendo el botón "Editar identidad". Afford. clara: número grande
   = dato, card = acción. Paridad con kyven-master.html (sus stats
   tampoco son onclick).

   El stopPropagation en HTML evita el bubble al hero. Este CSS quita
   cursor:pointer + tap-highlight para que visualmente no parezcan
   tappables.
   ════════════════════════════════════════════════════════════════ */
#tab-profile .id-hero .id-stats,
#tab-profile .id-hero .id-stat,
#tab-profile .id-hero .id-stat-num,
#tab-profile .id-hero .id-stat-lbl {
  cursor: default !important;
  -webkit-tap-highlight-color: transparent !important;
}
/* ── FIN BLOQUE 16 · STATS HERO DISPLAY ──────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 17 · VISUAL Pulse Dr. K → paridad KYVEN Master
   ────────────────────────────────────────────────────────────────
   Refundir SOLO la capa estética del sistema Pulse Dr. K a tokens v2
   y lenguaje master (drk-presence, drk-bubble). PROHIBIDO tocar:
   JS, keyframes, animation, transition, transform, opacity, timers,
   listeners, min-height, lógica streaming/typewriter. Sólo CSS
   visual estático: color, background, border, shadow, tipografía,
   padding, backdrop-filter.

   Selectores tocados: 28 (card overlay + floating bubble + nav badge)
   ════════════════════════════════════════════════════════════════ */

/* ── 1 · drk-pulse-card · superficie principal ───────────────────────── */
html body .drk-pulse-card {
  background: var(--card-hi) !important;
  background-color: var(--card-hi) !important;
  background-image: none !important;
  border: 1px solid var(--stroke-hi) !important;
  border-top: 1px solid var(--stroke-hi) !important;
  box-shadow:
    0 -2px 32px rgba(0,0,0,0.55),
    0 8px 32px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

/* ── 2 · línea hairline superior · sutil sage ── */
html body .drk-pulse-card::before {
  background: linear-gradient(90deg, transparent, rgba(107,168,142,0.32), transparent) !important;
}

/* ── 3 · glow interior · sustituido por sage suave editorial ── */
html body .drk-pulse-card::after {
  background: radial-gradient(circle at 80% 0%, rgba(107,168,142,0.10) 0%, rgba(107,168,142,0) 60%) !important;
}

/* ── 4 · handle ── */
html body .drk-pulse-handle {
  background: var(--stroke-hi) !important;
}

/* ── 5 · header · spacing master ── */
html body .drk-pulse-header {
  padding: 0 18px 12px !important;
}

/* ── 6 · avatar Dr. K · estilo master hex (sin tocar animation halo) ── */
html body .drk-pulse-avatar {
  background: rgba(200,164,90,0.08) !important;
  background-image: none !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 11px !important;
}

/* ── 7 · eyebrow "DR. KYVEN · GPMI" ── */
html body .drk-pulse-eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  letter-spacing: 0.24em !important;
  font-weight: 700 !important;
  color: var(--gold-eyebrow) !important;
}

/* ── 8 · dot del eyebrow · sage en lugar de gold (paridad master drk-pulse-dot) ── */
html body .drk-pulse-eyebrow::before {
  background: var(--sage-soft) !important;
  box-shadow: 0 0 6px rgba(133,190,170,0.55) !important;
}

/* ── 9 · nombre "Nueva recomendación" · serif italic master ── */
html body .drk-pulse-name {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: var(--t1) !important;
  letter-spacing: -0.005em !important;
}

/* ── 10 · em dentro del nombre · gold normal (paridad master drk-btxt strong) ── */
html body .drk-pulse-name em {
  color: var(--gold) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* ── 11 · botón close × ── */
html body .drk-pulse-close {
  background: rgba(230,226,218,0.04) !important;
  border: 0.5px solid var(--stroke-hi) !important;
  color: var(--t3) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* ── 12 · body separator ── */
html body .drk-pulse-body {
  border-top: 0.5px solid var(--stroke) !important;
  padding: 13px 18px 14px !important;
  margin: 0 14px !important;
}

/* ── 13 · mensaje principal · Playfair italic editorial (paridad master drk-btxt) ── */
html body .drk-pulse-message {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.65 !important;
  color: var(--t2) !important;
  letter-spacing: -0.005em !important;
}

/* ── 14 · strong del mensaje · gold serif normal ── */
html body .drk-pulse-message strong {
  color: var(--gold) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* ── 15 · em del mensaje · sage-soft italic (paridad master) ── */
html body .drk-pulse-message em {
  color: var(--sage-soft) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* ── 16 · cursor gold del typewriter · paleta v2 sin tocar size/display ── */
html body .drk-pulse-cursor {
  background: var(--gold) !important;
  box-shadow: 0 0 5px rgba(200,164,90,0.45) !important;
}

/* ── 17 · placeholder "Dr.K analizando…" ── */
html body .drk-pulse-placeholder {
  color: var(--t4) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
}

/* ── 18 · dots animados del placeholder · color sólo, NO tocar animation ── */
html body .drk-pulse-dots {
  color: var(--gold-eyebrow) !important;
}

/* ── 19 · CTA "Responder al Dr. Kyven" · gold flat v2 master ── */
html body .drk-pulse-cta {
  background: var(--gold) !important;
  background-image: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow:
    0 4px 14px rgba(200,164,90,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* ── 20 · label del CTA · color bg-deep (paridad master) ── */
html body .drk-pulse-cta-label {
  color: var(--bg-deep) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  font-weight: 700 !important;
}

/* ── 21 · arrow del CTA ── */
html body .drk-pulse-cta-arrow {
  color: var(--bg-deep) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ── 22 · meta inferior (eyebrow + bar) ── */
html body .drk-pulse-meta-bottom {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.20em !important;
  color: var(--t4) !important;
  font-weight: 600 !important;
}

/* ── 23 · track de la progress bar autoclose · NO tocar width ni animation ── */
html body .drk-pulse-meta-bottom-bar {
  background: var(--stroke-hi) !important;
}

/* ── 24 · fill de la progress bar · NO tocar animation: pulseProgressBar 14s ── */
html body .drk-pulse-meta-bottom-bar-fill {
  background: var(--gold) !important;
  background-image: linear-gradient(90deg, var(--gold-mute) 0%, var(--gold) 100%) !important;
  box-shadow: 0 0 4px rgba(200,164,90,0.4) !important;
}

/* ── 25 · floating bubble · paridad master drk-presence ── */
html body .drk-fb {
  background: rgba(20,36,27,0.88) !important;
  border: 1px solid rgba(107,168,142,0.25) !important;
  border-radius: 50% !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.5),
    0 0 0 0 rgba(107,168,142,0.2) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* ── 26 · pulse ring del bubble · sage en lugar de gold (paridad master) ── */
html body .drk-fb-pulse-ring {
  border: 1.5px solid var(--sage) !important;
}

/* ── 27 · dot del bubble · sage-soft (paridad master drk-pulse-dot) ── */
html body .drk-fb-dot {
  background: var(--sage-soft) !important;
  border: 2px solid rgba(20,36,27,0.88) !important;
  box-shadow: 0 0 8px rgba(133,190,170,0.6) !important;
}

/* ── 28 · nav-badge · refresh tokens v2 manteniendo ruby (alerta proactive) ── */
html body .nav-badge.pulse {
  background: var(--ruby) !important;
  box-shadow:
    0 0 10px rgba(166,61,47,0.75),
    0 0 22px rgba(166,61,47,0.35) !important;
  border: none !important;
}

/* ── FIN BLOQUE 17 · VISUAL PULSE DR.K MASTER ───────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 18 · Kebab acciones compuesto · Manage card premium
   ────────────────────────────────────────────────────────────────
   Audit detectó que el botón VER FICHA + kebab ⋮ vivían en
   `.cmp-actions` que estaba ocultado por L16005 paridad master.
   Sin entry point al sheet de acciones · usuario no podía
   editar/pausar/borrar.

   Solución senior:
   - Tap card entera → openCompoundDetail (ficha) · sin cambios
   - Chevron .cmp::after (decorativo) sigue como affordance navegación
   - Kebab ⋮ standalone fuera del wrapper .cmp-actions (que sigue
     display:none por la regla legacy)
   - stopPropagation inline en kebab + event delegation L28732-28741
     evita bubble al card tap
   - Hitbox 48×48 efectiva via ::before inset -6px (WCAG ≥44)

   No tocadas: openCompoundDetail, openMgrContext, mgrCtxAction,
   deleteCompound, editCompound, toggleCompoundActive, event delegation.
   ════════════════════════════════════════════════════════════════ */

/* Kebab standalone · estética premium iOS/WHOOP · paridad tokens v2 */
html body #tab-manage .cmp-menu {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0.5px solid var(--stroke-hi) !important;
  border-radius: 9px !important;
  color: var(--t2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  margin-right: 24px !important;
  align-self: center !important;
  box-shadow: none !important;
}
/* Hitbox virtual ampliada (48×48 efectivo · WCAG ≥44) */
html body #tab-manage .cmp-menu::before {
  content: '' !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 12px !important;
}
/* Press feedback · sutil paper alpha */
html body #tab-manage .cmp-menu:active {
  background: rgba(230,226,218,0.05) !important;
  border-color: var(--stroke-hi) !important;
}
/* SVG kebab · paper sutil · sin pointer events para no bloquear stopPropagation */
html body #tab-manage .cmp-menu svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--t3) !important;
  fill: currentColor !important;
  pointer-events: none !important;
}
/* Padding-right de la card aumentado · acomoda kebab + chevron decorativo
   sin que se solapen (chevron ::after queda a right:14px) */
html body #tab-manage .cmp .cmp-row {
  padding-right: 10px !important;
}
/* ── FIN BLOQUE 18 · KEBAB ACCIONES PREMIUM ──────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 20 · Flujo Chat / Proactive / Sheets / Modales · paleta v2
   ────────────────────────────────────────────────────────────────
   Adapta TODO el flujo posterior al Pulse Dr.K a tokens v2 master.
   Solo CSS visual estático · cero animations/transitions/keyframes
   tocadas · cero JS · cero IDs/clases cambiadas.
   ════════════════════════════════════════════════════════════════ */

/* ═══ A · DRZ-PROACTIVE card (recomendación en chat) ═══ */
html body #tab-chat .drz-proactive {
  background: var(--card-hi) !important;
  background-image: none !important;
  border: 1px solid var(--stroke-hi) !important;
  border-left: 1px solid var(--stroke-hi) !important;
  border-radius: 4px 14px 14px 14px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.02) inset,
    0 6px 18px rgba(0,0,0,0.30) !important;
}
html body #tab-chat .drz-proactive::before {
  background: linear-gradient(90deg, transparent, rgba(200,164,90,0.30), transparent) !important;
}
html body #tab-chat .drz-proactive::after {
  background: radial-gradient(circle at 80% 0%, rgba(107,168,142,0.10) 0%, transparent 60%) !important;
}
html body #tab-chat .drz-proactive-eyebrow {
  color: var(--gold-eyebrow) !important;
}
html body #tab-chat .drz-proactive-eyebrow::before {
  background: var(--sage-soft) !important;
  box-shadow: 0 0 6px rgba(133,190,170,0.55) !important;
}
html body #tab-chat .drz-proactive-title em {
  color: var(--gold) !important;
}

/* ═══ B · Header chat ═══ */
html body #tab-chat .drk-h {
  background: var(--card-hi) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--stroke-hi) !important;
}
html body #tab-chat .drk-K-big {
  background: rgba(200,164,90,0.08) !important;
  background-image: none !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html body #tab-chat .drk-K-status {
  background: var(--sage-soft) !important;
  border: 2.5px solid var(--card-hi) !important;
}
html body #tab-chat .drk-h-name {
  color: var(--t1) !important;
}
html body #tab-chat .drk-h-online {
  color: var(--sage) !important;
  background: rgba(107,168,142,0.10) !important;
  border: 0.5px solid rgba(107,168,142,0.28) !important;
}
html body #tab-chat .drk-h-online::before {
  background: var(--sage-soft) !important;
  box-shadow: 0 0 5px rgba(133,190,170,0.6) !important;
}
html body #tab-chat .drk-h-btn {
  background: rgba(200,164,90,0.06) !important;
  border: 0.5px solid var(--stroke-hi) !important;
  color: var(--gold-eyebrow) !important;
}
html body #tab-chat .drk-h-btn:active {
  background: rgba(200,164,90,0.14) !important;
}

/* ═══ C · Modal Protocol Update ═══ */
html body .update-modal-bg {
  background: rgba(6,17,14,0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
html body .update-modal {
  background: var(--card-hi) !important;
  background-image: none !important;
  border: 1px solid var(--stroke-hi) !important;
  border-left: 1px solid var(--stroke-hi) !important;
  border-radius: 16px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.02) !important;
}
html body .update-modal-close {
  background: rgba(230,226,218,0.04) !important;
  border: 0.5px solid var(--stroke-hi) !important;
  color: var(--t3) !important;
}
html body .update-modal-close:active {
  background: rgba(230,226,218,0.10) !important;
  color: var(--t1) !important;
}
html body .update-modal-header-sticky {
  background: transparent !important;
  border-bottom: 0.5px solid var(--stroke) !important;
}
html body .update-modal-banner {
  color: var(--gold-eyebrow) !important;
}
html body .update-modal-title {
  color: var(--t1) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
html body .update-modal-title em {
  color: var(--gold) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}
html body .update-modal-title-meta {
  color: var(--t3) !important;
}
html body .update-modal-body {
  background: transparent !important;
}
html body .update-protocol-table th {
  color: var(--gold-eyebrow) !important;
  border-bottom: 0.5px solid var(--stroke) !important;
}
html body .update-protocol-table td {
  border-bottom: 0.5px solid var(--stroke) !important;
}
html body .update-action-pill.add {
  background: rgba(200,164,90,0.10) !important;
  color: var(--gold) !important;
  border: 0.5px solid var(--gold-line) !important;
}
html body .update-action-pill.modify {
  background: rgba(107,168,142,0.10) !important;
  color: var(--sage-soft) !important;
  border: 0.5px solid rgba(107,168,142,0.32) !important;
}
html body .update-action-pill.remove {
  background: rgba(200,168,122,0.10) !important;
  color: var(--clay) !important;
  border: 0.5px solid rgba(200,168,122,0.32) !important;
}
html body .update-compound-name {
  color: var(--t1) !important;
}
html body .update-compound-dose,
html body .update-compound-timing {
  color: var(--gold) !important;
}
html body .update-modal-notes {
  color: var(--t3) !important;
  border-top: 0.5px solid var(--stroke) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
}
html body .update-modal-footer-sticky {
  background: rgba(6,17,14,0.4) !important;
  border-top: 0.5px solid var(--stroke) !important;
  box-shadow: none !important;
}
html body .update-modal-gpmi {
  color: var(--t4) !important;
}
html body .update-modal-actions .btn-apply {
  background: var(--gold) !important;
  background-image: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%) !important;
  color: var(--bg-deep) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow:
    0 4px 14px rgba(200,164,90,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
html body .update-modal-actions .btn-discard {
  background: rgba(230,226,218,0.04) !important;
  color: var(--t3) !important;
  border: 0.5px solid var(--stroke-hi) !important;
  border-radius: 12px !important;
}
html body .update-modal-actions .btn-discard:active {
  background: rgba(230,226,218,0.10) !important;
  color: var(--t1) !important;
}

/* ═══ D · Drz-sheet (sheet detalle Dr.K) ═══ */
html body #drz-sheet,
html body .drz-sheet {
  background: var(--card-hi) !important;
  background-image: none !important;
  border: 1px solid var(--stroke-hi) !important;
  border-bottom: none !important;
  box-shadow:
    0 -8px 32px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.02) !important;
}
html body #drz-sheet .drz-handle,
html body .drz-sheet .drz-handle {
  background: var(--stroke-hi) !important;
}
html body #drz-sheet .drz-eyebrow,
html body .drz-sheet .drz-eyebrow {
  color: var(--gold-eyebrow) !important;
  letter-spacing: 0.22em !important;
}
html body #drz-sheet .drz-sheet-title,
html body .drz-sheet .drz-sheet-title {
  color: var(--t1) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
html body #drz-sheet .drz-close,
html body .drz-sheet .drz-close {
  background: rgba(230,226,218,0.04) !important;
  border: 0.5px solid var(--stroke-hi) !important;
  color: var(--t3) !important;
}
html body #drz-sheet .drz-scores,
html body .drz-sheet .drz-scores {
  background: var(--card-soft) !important;
  border: 0.5px solid var(--stroke) !important;
}
html body #drz-sheet .drz-score-val.sage,
html body .drz-sheet .drz-score-val.sage {
  color: var(--sage-soft) !important;
}
html body #drz-sheet .drz-score-val.gold,
html body .drz-sheet .drz-score-val.gold {
  color: var(--gold) !important;
  text-shadow: 0 0 8px rgba(200,164,90,0.32) !important;
}
html body #drz-sheet .drz-score-val.amber,
html body .drz-sheet .drz-score-val.amber {
  color: var(--clay) !important;
}
html body #drz-sheet .drz-score-lbl,
html body .drz-sheet .drz-score-lbl {
  color: var(--t4) !important;
}
html body #drz-sheet .drz-verdict-check,
html body .drz-sheet .drz-verdict-check {
  background: var(--sage) !important;
  color: var(--bg-deep) !important;
  box-shadow: 0 0 10px rgba(107,168,142,0.35) !important;
}
html body #drz-sheet .drz-tag.ok,
html body .drz-sheet .drz-tag.ok {
  color: var(--sage-soft) !important;
  background: rgba(107,168,142,0.10) !important;
  border: 0.5px solid rgba(107,168,142,0.28) !important;
}
html body #drz-sheet .drz-tag.warn,
html body .drz-sheet .drz-tag.warn {
  color: var(--clay) !important;
  background: rgba(200,168,122,0.10) !important;
  border: 0.5px solid rgba(200,168,122,0.32) !important;
}
html body #drz-sheet .drz-footer,
html body .drz-sheet .drz-footer {
  background: rgba(6,17,14,0.4) !important;
  border-top: 0.5px solid var(--stroke) !important;
}
html body #drz-sheet .drz-footer-btn,
html body .drz-sheet .drz-footer-btn {
  background: var(--gold) !important;
  background-image: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%) !important;
  color: var(--bg-deep) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow:
    0 4px 14px rgba(200,164,90,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* ═══ E · Add Compound Sheet ═══ */
html body .add-sheet {
  background: var(--card-hi) !important;
  background-image: none !important;
  border-top: 1px solid var(--stroke-hi) !important;
  box-shadow:
    0 -8px 32px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.02) !important;
}
html body .add-sheet .add-handle {
  background: var(--stroke-hi) !important;
}
html body .add-sheet .add-title {
  color: var(--t1) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
html body .add-sheet .add-title svg {
  color: var(--gold) !important;
}
html body .add-sheet .add-close {
  background: rgba(230,226,218,0.04) !important;
  border: 0.5px solid var(--stroke-hi) !important;
  color: var(--t3) !important;
}
html body .add-sheet .inp-lbl {
  color: var(--t3) !important;
}
html body .add-sheet .inp-lbl-required {
  color: var(--clay) !important;
}
html body .add-sheet .inp-lbl-optional {
  color: var(--t4) !important;
}
html body .add-sheet .inp {
  background: var(--card-soft) !important;
  border: 0.5px solid var(--stroke-hi) !important;
  color: var(--t1) !important;
}
html body .add-sheet .inp::placeholder {
  color: var(--t4) !important;
}

/* ═══ F · Chat messages (typing bubble + ai bubble + user bubble) ═══ */
html body #tab-chat .msg-typing-bubble {
  background: var(--card-hi) !important;
  border: 1px solid var(--stroke-hi) !important;
  border-left: 1px solid var(--stroke-hi) !important;
}
html body #tab-chat .chat-msg-user {
  background: rgba(230,226,218,0.04) !important;
  color: var(--t1) !important;
  border: none !important;
}
html body #tab-chat .chat-msg.ai .chat-bubble {
  background: var(--card-hi) !important;
  background-image: none !important;
  border: 1px solid var(--stroke-hi) !important;
  border-radius: 4px 14px 14px 14px !important;
}
html body #tab-chat .chat-msg.ai .chat-bubble strong {
  color: var(--gold) !important;
}
/* Bloque 20.1 fix · regla .chat-msg-K eliminada · el shorthand `background:`
   mataba el background-image del kmono SVG configurado en L15182-15201.
   Esa regla anterior ya pinta el kmono master con tokens v2 (var(--kvn-gold-mate, #C8A45A) = gold)
   · no necesita override. */
/* ── FIN BLOQUE 20 · CHAT/PROACTIVE/SHEETS V2 ────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 21 · WHOOP banner informativo (sustituye toggle falso)
   ────────────────────────────────────────────────────────────────
   El toggle WHOOP automático cambiaba visualmente pero persistía en
   kv_settings huérfano · no había cron 4h real. Sustituido por
   banner informativo honesto · sin acción tappable falsa.
   Estética master · card-soft alpha + gold-line icon.
   ════════════════════════════════════════════════════════════════ */
#tab-profile .kv-set-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(230,226,218,0.025);
  border: 0.5px solid var(--stroke);
  border-radius: 12px;
  margin: 0 0 8px;
}
#tab-profile .kv-set-banner-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(200,164,90,0.08);
  border: 0.5px solid var(--gold-line);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
#tab-profile .kv-set-banner-icon svg {
  width: 16px;
  height: 16px;
}
#tab-profile .kv-set-banner-info {
  flex: 1;
  min-width: 0;
}
#tab-profile .kv-set-banner-name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--t1);
  letter-spacing: -0.2px;
}
#tab-profile .kv-set-banner-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--t3);
  line-height: 1.4;
  margin-top: 2px;
}
/* ── FIN BLOQUE 21 · DND REAL + WHOOP BANNER ────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 22 · FIX typing state · doble monograma K
   ────────────────────────────────────────────────────────────────
   Causa raíz: el JS L28256 crea el contenedor streaming oculto con
   inline `style="display:none"` pero la regla L15165
   `#tab-chat .chat-msg-ai { display: flex !important }` GANA sobre
   el inline. Resultado: placeholder vacío visible durante typing →
   2 monogramas K simultáneos.

   Fix: regla CSS con attribute selector que respeta el inline
   display:none durante typing. Cuando el JS cambia
   `style.display='flex'` al llegar el primer token, el selector
   ya no matchea y vuelve la regla L15165 normal.

   Cero JS · cero HTML · cero lógica streaming/typewriter tocada.
   ════════════════════════════════════════════════════════════════ */
html body #tab-chat .chat-msg-ai[style*="display:none"],
html body #tab-chat .chat-msg-ai[style*="display: none"] {
  display: none !important;
}
/* ── FIN BLOQUE 22 · FIX TYPING DOBLE MONOGRAMA ─────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 23 · FIX safe-area + hitbox · ficha compuesto (#tab-detail)
   ────────────────────────────────────────────────────────────────
   Causa raíz: el Bloque 14 incluyó #tab-detail en el selector group
   `padding: 0 !important`, lo que mataba la regla
   `#tab-detail { padding-top: env(safe-area-inset-top, 0px) }` de
   index.html L9519. Resultado en iPhone PWA con notch: topbar se
   pegaba bajo el notch · botones atrás/compartir difíciles de tocar.

   FIX 1 · #tab-detail fuera del Bloque 14 (arriba) + regla específica
   con padding asymmetric: env(safe-area-inset-top) arriba + 0 lateral
   (sin marco) + 0 abajo (scroll absorbe).

   FIX 2 · respiración extra +4px en .fd-topbar + tap area virtual
   44×44 (WCAG min) en .fd-back/.fd-share via ::before inset -4.

   Cero JS · cero handlers · cero animations · cero HTML.
   ════════════════════════════════════════════════════════════════ */

/* FIX 1 · safe-area-inset-top respetado */
html body #tab-detail {
  padding: env(safe-area-inset-top, 0px) 0 0 0 !important;
  border-radius: 0 !important;
  background: var(--bg) !important;
}

/* FIX 2a · respiración extra en topbar (4px sobre el safe-area) */
html body #tab-detail .fd-topbar {
  padding: 18px 20px 10px !important;
}

/* FIX 2b · hitbox 44×44 virtual via ::before · botones siguen visibles 36×36 */
html body #tab-detail .fd-back,
html body #tab-detail .fd-share {
  position: relative !important;
}
html body #tab-detail .fd-back::before,
html body #tab-detail .fd-share::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}
/* ── FIN BLOQUE 23 · FIX SAFE-AREA + HITBOX FICHA ────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 24 · FIX visual banner extracción · Bio > Analíticas
   ────────────────────────────────────────────────────────────────
   Causa raíz: .loading-row (index.html L2936) aplica al padre:
     letter-spacing: 0.2em
     text-transform: uppercase
     font-family: monospace
   Los divs hijos del HTML inyectado tienen inline style con font
   Inter + size 11px pero NO override letter-spacing / text-transform
   → los heredan · el texto "Extrayendo peso, % grasa, masa magra y
   cruzando con tu protocolo…" se renderiza en uppercase mono con
   letter-spacing pesado → overflow horizontal en iPhone.

   Fix solo CSS · scoped a #labs-status y #bodycomp-status (los dos
   banners de extracción Bio > Analíticas + Body Composition).
   Cero JS · cero HTML · cero lógica · cero timing.
   ════════════════════════════════════════════════════════════════ */
html body #tab-bio #labs-status .loading-row,
html body #tab-bio #bodycomp-status .loading-row {
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-family: 'Inter', sans-serif !important;
  border-radius: 10px !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
}
/* Pulse-dot alineado con eyebrow superior (no centro vertical) */
html body #tab-bio #labs-status .loading-row > .pulse-dot,
html body #tab-bio #bodycomp-status .loading-row > .pulse-dot {
  margin-top: 6px !important;
  flex-shrink: 0 !important;
}
/* Bloque texto · ocupa el resto y permite wrap natural sin overflow */
html body #tab-bio #labs-status .loading-row > div:not(.pulse-dot),
html body #tab-bio #bodycomp-status .loading-row > div:not(.pulse-dot) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
/* Texto secundario (Extrayendo … cruzando con tu protocolo) · wrap suave */
html body #tab-bio #labs-status .loading-row > div:not(.pulse-dot) > div:nth-child(2),
html body #tab-bio #bodycomp-status .loading-row > div:not(.pulse-dot) > div:nth-child(2) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  letter-spacing: -0.005em !important;
  line-height: 1.45 !important;
}
/* Eyebrow superior (● DR. KYVEN · LEYENDO ANALÍTICA) · respeta su estilo */
html body #tab-bio #labs-status .loading-row > div:not(.pulse-dot) > div:nth-child(1),
html body #tab-bio #bodycomp-status .loading-row > div:not(.pulse-dot) > div:nth-child(1) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
/* ── FIN BLOQUE 24 · FIX BANNER EXTRACCIÓN BIO ──────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 25 · .drop-sub centrado + wrap natural · Bio category cards
   ────────────────────────────────────────────────────────────────
   Carlos reportó: la línea .drop-sub del drop-zone Composición corporal
   se desbordaba a la derecha en iPhone. HTML acortado en index.html
   ("Withings · InBody · Tanita · Renpho · DEXA"). Para garantizar wrap
   natural y centrado en ambos drop-zones (sangre + composición), CSS
   añade text-align center + max-width + white-space normal + line-height.
   Sólo CSS visual · cero lógica · cero JS.
   ════════════════════════════════════════════════════════════════ */
html body #tab-bio #lab-cat-detail .drop-sub {
  text-align: center !important;
  max-width: 280px !important;
  margin: 0 auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.55 !important;
}
/* ── FIN BLOQUE 25 · DROP-SUB CENTRADO + WRAP ───────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 26 · INSIGHTS V5 · FASE 1 · feature-flagged wrapper
   ────────────────────────────────────────────────────────────────
   Master visual: /Users/carlos/Desktop/kyven-insights-v5-final.html
   Scope estricto: html body #tab-insights .ins-v5-root *
   Prefijo: ins-v5-*  (cero conflicto con clases globales)
   Fase 1 cubre: sticky header · score-card · tabs internas · hero
   del día · objetivos · pilares list · edad biológica · adherencia 7d.
   NO incluye: octágono panorama · body anatomy · tendencias drawing ·
   correlaciones cascade · notas extendidas (Fase 2/3).
   Reversible: toggle ?v5=on / localStorage.kv_insights_v5.
   ════════════════════════════════════════════════════════════════ */

/* Root wrapper · ocupa flex:1 dentro del .screen del #tab-insights */
html body #tab-insights .ins-v5-root {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
html body #tab-insights .ins-v5-root.on {
  display: flex !important;
}

/* ── STICKY HEADER + SCORE CARD + TABS ── */
html body #tab-insights .ins-v5-sticky-wrap {
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--stroke);
  padding: 10px 20px 10px;
  position: relative;
  z-index: 5;
}
html body #tab-insights .ins-v5-header-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--t3);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
html body #tab-insights .ins-v5-header-eb::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 8px rgba(107,168,142,0.55);
}
html body #tab-insights .ins-v5-header-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  line-height: 1.15;
}
html body #tab-insights .ins-v5-header-title em {
  color: var(--gold);
  font-style: italic;
}

html body #tab-insights .ins-v5-score-card {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 20px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
html body #tab-insights .ins-v5-sc-ring {
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  position: relative;
}
html body #tab-insights .ins-v5-sc-ring svg {
  width: 66px;
  height: 66px;
  transform: rotate(-90deg);
}
html body #tab-insights .ins-v5-sc-track {
  fill: none;
  stroke: rgba(200,164,90,0.10);
  stroke-width: 5;
}
html body #tab-insights .ins-v5-sc-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke: url(#ins-v5-scg);
  filter: drop-shadow(0 0 6px rgba(200,164,90,0.3));
  transition: stroke-dasharray 0.8s ease;
}
html body #tab-insights .ins-v5-sc-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
html body #tab-insights .ins-v5-sc-letter {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.8px;
}
html body #tab-insights .ins-v5-sc-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--t4);
  text-transform: uppercase;
  margin-top: 2px;
}
html body #tab-insights .ins-v5-sc-info {
  flex: 1;
  min-width: 0;
}
html body #tab-insights .ins-v5-sc-hl {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
  line-height: 1.25;
}
html body #tab-insights .ins-v5-sc-hl em {
  color: var(--gold);
  font-style: italic;
}
html body #tab-insights .ins-v5-sc-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--t3);
  line-height: 1.5;
}

/* Tabs internas V5 */
html body #tab-insights .ins-v5-tabs {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 4px;
  display: flex;
  gap: 2px;
}
html body #tab-insights .ins-v5-tab {
  flex: 1;
  background: transparent;
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--t3);
  text-transform: uppercase;
  padding: 10px 4px;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
html body #tab-insights .ins-v5-tab.on {
  background: var(--sage);
  color: var(--bg);
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(107,168,142,0.25);
}

/* Scroll + sub-paneles */
html body #tab-insights .ins-v5-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 20px calc(100px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html body #tab-insights .ins-v5-scroll::-webkit-scrollbar { width: 0; display: none; }
html body #tab-insights .ins-v5-subpanel {
  display: none;
}
html body #tab-insights .ins-v5-subpanel.on {
  display: block;
  animation: insV5FadeIn 0.35s ease;
}
@keyframes insV5FadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

html body #tab-insights .ins-v5-section-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 24px 0 12px;
}
html body #tab-insights .ins-v5-subpanel > :first-child + .ins-v5-section-hdr,
html body #tab-insights .ins-v5-subpanel > .ins-v5-section-hdr:first-child {
  margin-top: 16px;
}
html body #tab-insights .ins-v5-sh-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2.8px;
  color: var(--t3);
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-sh-title strong {
  color: var(--t1);
  font-weight: 700;
}
html body #tab-insights .ins-v5-sh-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--t4);
  text-transform: uppercase;
}

/* ── HERO DEL DÍA ── */
html body #tab-insights .ins-v5-hero-day {
  background: linear-gradient(180deg, rgba(200,164,90,0.05) 0%, var(--card) 100%);
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
html body #tab-insights .ins-v5-hero-day::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
html body #tab-insights .ins-v5-hero-day-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--t3);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
html body #tab-insights .ins-v5-hero-day-eb::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 8px rgba(107,168,142,0.55);
}
html body #tab-insights .ins-v5-hero-day-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--t1);
  line-height: 1.55;
  letter-spacing: -0.2px;
}
html body #tab-insights .ins-v5-hero-day-quote strong {
  color: var(--gold);
  font-weight: 600;
  font-style: normal;
}
html body #tab-insights .ins-v5-hero-day-sign {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-hero-day-sig {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--t4);
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-hero-day-sig em {
  color: var(--gold);
  font-style: normal;
}

/* ── EDAD BIOLÓGICA ── */
html body #tab-insights .ins-v5-bioage-card {
  background: linear-gradient(180deg, rgba(107,168,142,0.06) 0%, var(--card) 100%);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
}
html body #tab-insights .ins-v5-bioage-ring {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  position: relative;
}
html body #tab-insights .ins-v5-bioage-ring svg {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg);
}
html body #tab-insights .ins-v5-bioage-track {
  fill: none;
  stroke: rgba(107,168,142,0.10);
  stroke-width: 5;
}
html body #tab-insights .ins-v5-bioage-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke: url(#ins-v5-bag);
  filter: drop-shadow(0 0 6px rgba(107,168,142,0.3));
  transition: stroke-dasharray 1s ease;
}
html body #tab-insights .ins-v5-bioage-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
html body #tab-insights .ins-v5-bioage-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--sage-soft);
  line-height: 1;
  letter-spacing: -0.5px;
}
html body #tab-insights .ins-v5-bioage-unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--t4);
  text-transform: uppercase;
  margin-top: 3px;
}
html body #tab-insights .ins-v5-bioage-info { flex: 1; min-width: 0; }
html body #tab-insights .ins-v5-bioage-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--t3);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
html body #tab-insights .ins-v5-bioage-eb::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 6px rgba(107,168,142,0.5);
}
html body #tab-insights .ins-v5-bioage-hl {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--t1);
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-bioage-hl em {
  color: var(--sage-soft);
  font-style: italic;
  font-weight: 600;
}
html body #tab-insights .ins-v5-bioage-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--t3);
  line-height: 1.55;
}
html body #tab-insights .ins-v5-bioage-desc strong {
  color: var(--t2);
  font-weight: 500;
}

/* ── OBJETIVOS ── */
html body #tab-insights .ins-v5-obj-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}
html body #tab-insights .ins-v5-obj-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
html body #tab-insights .ins-v5-obj-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
html body #tab-insights .ins-v5-obj-name em {
  color: var(--gold);
  font-style: italic;
}
html body #tab-insights .ins-v5-obj-state {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 600;
}
html body #tab-insights .ins-v5-obj-state.prog {
  background: var(--sage-bg);
  color: var(--sage-soft);
  border: 1px solid rgba(107,168,142,0.25);
}
html body #tab-insights .ins-v5-obj-state.dev {
  background: rgba(212,166,85,0.10);
  color: var(--clay);
  border: 1px solid rgba(212,166,85,0.25);
}
html body #tab-insights .ins-v5-obj-state.ini {
  background: rgba(230,226,218,0.04);
  color: var(--t3);
  border: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-obj-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--t3);
  line-height: 1.55;
}

/* ── PILARES (list) ── */
html body #tab-insights .ins-v5-p-row {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}
html body #tab-insights .ins-v5-p-row.critical {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(200,164,90,0.04) 0%, var(--card) 100%);
}
html body #tab-insights .ins-v5-p-row-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
html body #tab-insights .ins-v5-p-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
html body #tab-insights .ins-v5-p-info {
  flex: 1;
  min-width: 0;
}
html body #tab-insights .ins-v5-p-name {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -0.1px;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 6px;
}
html body #tab-insights .ins-v5-p-name .ins-v5-crit-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 5px var(--gold);
}
html body #tab-insights .ins-v5-p-state {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--t3);
  text-transform: uppercase;
  margin-top: 3px;
}
html body #tab-insights .ins-v5-p-state.optim { color: var(--sage-soft); }
html body #tab-insights .ins-v5-p-state.mod { color: var(--clay); }
html body #tab-insights .ins-v5-p-state.low { color: var(--clay); }
html body #tab-insights .ins-v5-p-state.crit { color: var(--ruby); }
html body #tab-insights .ins-v5-p-score {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.5px;
}
html body #tab-insights .ins-v5-p-score small {
  font-size: 10px;
  color: var(--t4);
  font-weight: 400;
}
html body #tab-insights .ins-v5-p-bar {
  height: 3px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 11px;
}
html body #tab-insights .ins-v5-p-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-mute), var(--gold));
  border-radius: 2px;
  transition: width 1s ease;
}

/* ── ADHERENCIA 7D ── */
html body #tab-insights .ins-v5-adh-strip {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
html body #tab-insights .ins-v5-adh-ring-mini {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  position: relative;
}
html body #tab-insights .ins-v5-adh-ring-mini svg {
  width: 42px;
  height: 42px;
  transform: rotate(-90deg);
}
html body #tab-insights .ins-v5-adh-track {
  fill: none;
  stroke: rgba(107,168,142,0.10);
  stroke-width: 3.5;
}
html body #tab-insights .ins-v5-adh-fill {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke: var(--sage-soft);
  transition: stroke-dasharray 1s ease;
}
html body #tab-insights .ins-v5-adh-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--sage-soft);
}
html body #tab-insights .ins-v5-adh-info {
  flex: 1;
  min-width: 0;
}
html body #tab-insights .ins-v5-adh-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--t4);
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-adh-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  color: var(--t1);
  margin-top: 3px;
}
html body #tab-insights .ins-v5-adh-val em {
  color: var(--gold);
  font-style: italic;
}
html body #tab-insights .ins-v5-adh-grid7 {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
html body #tab-insights .ins-v5-adh-d {
  width: 9px;
  height: 20px;
  border-radius: 2px;
  background: rgba(255,255,255,0.04);
}
html body #tab-insights .ins-v5-adh-d.full { background: var(--sage-soft); }
html body #tab-insights .ins-v5-adh-d.partial { background: var(--clay); opacity: 0.7; }

/* ── EMPTY BLOCKS (Fase 2/3 placeholders) ── */
html body #tab-insights .ins-v5-empty {
  background: var(--card);
  border: 1px dashed var(--stroke-hi);
  border-radius: 14px;
  padding: 40px 20px;
  text-align: center;
}
html body #tab-insights .ins-v5-empty-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.2px;
  color: var(--gold-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
html body #tab-insights .ins-v5-empty-tit {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-style: italic;
  color: var(--t2);
  line-height: 1.4;
}
/* ── FIN BLOQUE 26 · INSIGHTS V5 FASE 1 ────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 27 · INSIGHTS V5 · HARDENING 2.0 (pre-Fase 2A)
   ────────────────────────────────────────────────────────────────
   Audit Playwright detectó:
   1) DOBLE NAVEGACIÓN · legacy .subnav seguía visible (inline style
      .display='none' del JS no ganaba sobre regla CSS .subnav{display:flex})
   2) OVERFLOW HORIZONTAL · 'white-space: nowrap' heredado de
      `body .tab` (mismo bug que Bloques 8/14) contaminaba todos los
      descendientes de #tab-insights .ins-v5-root.

   Fix robusto:
   - JS añade clase .ins-v5-active a #tab-insights cuando V5 está on
   - CSS oculta legacy via [.ins-v5-active] > .screen > X !important
   - FIX FORENSE white-space normal heredado a TODOS los descendientes
     de .ins-v5-root, con whitelist de elementos que SÍ deben nowrap
     (tabs, eyebrows mono, units, states · tipográficos cortos).
   ════════════════════════════════════════════════════════════════ */

/* 1 · Ocultar legacy cuando V5 activo (selector robusto) */
html body #tab-insights.ins-v5-active > .screen > .bio-header,
html body #tab-insights.ins-v5-active > .screen > .brief,
html body #tab-insights.ins-v5-active > .screen > .subnav,
html body #tab-insights.ins-v5-active > .screen > .tab-scroll {
  display: none !important;
}

/* 2 · FIX FORENSE white-space normal en TODO el wrapper V5
   Neutraliza `body .tab { white-space: nowrap }` heredado.
   Mismo patrón ya usado en #tab-detail, #tab-manage, #tab-chat, #tab-profile. */
html body #tab-insights .ins-v5-root,
html body #tab-insights .ins-v5-root * {
  white-space: normal !important;
}

/* 3 · Excepciones · elementos tipográficos cortos que DEBEN nowrap */
html body #tab-insights .ins-v5-tab,
html body #tab-insights .ins-v5-sc-sub,
html body #tab-insights .ins-v5-sc-letter,
html body #tab-insights .ins-v5-header-eb,
html body #tab-insights .ins-v5-sh-meta,
html body #tab-insights .ins-v5-bioage-eb,
html body #tab-insights .ins-v5-bioage-unit,
html body #tab-insights .ins-v5-bioage-num,
html body #tab-insights .ins-v5-p-state,
html body #tab-insights .ins-v5-p-score,
html body #tab-insights .ins-v5-hero-day-sig,
html body #tab-insights .ins-v5-obj-state,
html body #tab-insights .ins-v5-adh-lbl,
html body #tab-insights .ins-v5-adh-center,
html body #tab-insights .ins-v5-empty-eb {
  white-space: nowrap !important;
}
/* ── FIN BLOQUE 27 · HARDENING 2.0 ──────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 28 · INSIGHTS V5 · FASE 2A · Tendencias + Correlaciones + Notas
   ────────────────────────────────────────────────────────────────
   9 componentes premium · scope estricto #tab-insights .ins-v5-root
   Master visual aplicado · datos reales de latestBrain + STATE.bio +
   STATE.labs + STATE.compounds + adh_history.
   ════════════════════════════════════════════════════════════════ */

/* ── Cards base tendencias/correlaciones ── */
html body #tab-insights .ins-v5-gcard {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}
html body #tab-insights .ins-v5-gcard.hero {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(200,164,90,0.04) 0%, var(--card) 100%);
}
html body #tab-insights .ins-v5-gc-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 12px;
}
html body #tab-insights .ins-v5-gc-tit {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -0.2px;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}
html body #tab-insights .ins-v5-gc-tit em {
  color: var(--gold);
  font-style: italic;
}
html body #tab-insights .ins-v5-gc-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  color: var(--t4);
  text-transform: uppercase;
  margin-top: 5px;
}
html body #tab-insights .ins-v5-gc-rt {
  text-align: right;
  flex-shrink: 0;
}
html body #tab-insights .ins-v5-gc-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: -0.8px;
  line-height: 1;
}
html body #tab-insights .ins-v5-gc-val small {
  font-size: 12px;
  color: var(--t3);
  font-weight: 400;
  margin-left: 2px;
}
html body #tab-insights .ins-v5-gc-vd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.3px;
  color: var(--sage-soft);
  text-transform: uppercase;
  margin-top: 5px;
}
html body #tab-insights .ins-v5-gc-canvas {
  width: 100%;
  height: 90px;
  display: block;
  margin: 8px 0 6px;
}
html body #tab-insights .ins-v5-gc-canvas.tall { height: 120px; }
html body #tab-insights .ins-v5-gc-xaxis {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--t4);
  text-transform: uppercase;
  margin-top: 4px;
}
html body #tab-insights .ins-v5-gc-events {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
html body #tab-insights .ins-v5-gc-evt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  color: var(--t3);
  line-height: 1.4;
}
html body #tab-insights .ins-v5-gc-evt strong {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 1px;
  margin-right: 4px;
}
html body #tab-insights .ins-v5-gc-legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}
html body #tab-insights .ins-v5-gc-leg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--t3);
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-gc-leg-line {
  width: 14px;
  height: 2px;
  border-radius: 1px;
}
html body #tab-insights .ins-v5-gc-leg-line.gold { background: var(--gold); }
html body #tab-insights .ins-v5-gc-leg-line.sage { background: var(--sage-soft); }
html body #tab-insights .ins-v5-gc-leg-line.clay { background: var(--clay); }
html body #tab-insights .ins-v5-gc-leg-line.dash {
  background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 8px);
}
html body #tab-insights .ins-v5-gc-leg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
html body #tab-insights .ins-v5-gc-leg-dot.sage { background: var(--sage-soft); }
html body #tab-insights .ins-v5-gc-cta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--gold);
  text-transform: uppercase;
  cursor: pointer;
  text-align: right;
  font-weight: 500;
}
html body #tab-insights .ins-v5-gc-proj-stat {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--t2);
  line-height: 1.5;
  margin-top: 10px;
}
html body #tab-insights .ins-v5-gc-proj-stat strong {
  color: var(--gold);
  font-weight: 600;
}

/* ── Correlation hero ── */
html body #tab-insights .ins-v5-corr-hero {
  background: linear-gradient(180deg, rgba(200,164,90,0.04) 0%, var(--card) 100%);
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  padding: 22px 20px;
  margin-bottom: 16px;
}
html body #tab-insights .ins-v5-corr-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.2px;
  color: var(--gold-eyebrow);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-weight: 600;
}
html body #tab-insights .ins-v5-corr-eb::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}
html body #tab-insights .ins-v5-corr-hero-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-style: italic;
  color: var(--t1);
  line-height: 1.55;
  letter-spacing: -0.2px;
  margin-bottom: 14px;
}
html body #tab-insights .ins-v5-corr-hero-quote em {
  color: var(--gold);
  font-weight: 600;
  font-style: italic;
}
html body #tab-insights .ins-v5-corr-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-corr-st {
  text-align: center;
}
html body #tab-insights .ins-v5-corr-st-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--t4);
  text-transform: uppercase;
  margin-bottom: 4px;
}
html body #tab-insights .ins-v5-corr-st-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}

/* ── Cascada Bloomberg-style ── */
html body #tab-insights .ins-v5-casc-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}
html body #tab-insights .ins-v5-casc-canvas {
  width: 100%;
  height: 120px;
  display: block;
  margin: 8px 0 6px;
}
html body #tab-insights .ins-v5-casc-xaxis {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 1px;
  color: var(--t4);
  text-transform: uppercase;
  margin-top: 4px;
}
html body #tab-insights .ins-v5-casc-sum {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--t2);
  line-height: 1.55;
  margin-top: 12px;
}
html body #tab-insights .ins-v5-casc-sum strong {
  color: var(--gold);
  font-weight: 600;
}

/* ── Pearson rows ── */
html body #tab-insights .ins-v5-pearson-row {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
html body #tab-insights .ins-v5-pr-info {
  flex: 1;
  min-width: 0;
}
html body #tab-insights .ins-v5-pr-pair {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--t1);
  line-height: 1.4;
}
html body #tab-insights .ins-v5-pr-pair strong {
  color: var(--gold);
  font-weight: 600;
}
html body #tab-insights .ins-v5-pr-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.4px;
  color: var(--t4);
  text-transform: uppercase;
  margin-top: 4px;
}
html body #tab-insights .ins-v5-pr-r {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  text-align: right;
  letter-spacing: -0.3px;
}
html body #tab-insights .ins-v5-pr-r.high { color: var(--gold); }
html body #tab-insights .ins-v5-pr-r.mid { color: var(--sage-soft); }
html body #tab-insights .ins-v5-pr-r.low { color: var(--t3); }
html body #tab-insights .ins-v5-pr-r-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 1px;
  color: var(--t4);
  text-transform: uppercase;
  margin-top: 3px;
  text-align: right;
}

/* ── Compound × Biomarcador ── */
html body #tab-insights .ins-v5-cxb-row {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-cxb-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
html body #tab-insights .ins-v5-cxb-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--t1);
}
html body #tab-insights .ins-v5-cxb-name em {
  color: var(--gold);
  font-style: italic;
  margin-left: 4px;
}
html body #tab-insights .ins-v5-cxb-days {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.4px;
  color: var(--t4);
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-cxb-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html body #tab-insights .ins-v5-cxb-eff {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid;
  font-weight: 500;
}
html body #tab-insights .ins-v5-cxb-eff.pos {
  background: var(--sage-bg);
  color: var(--sage-soft);
  border-color: rgba(107,168,142,0.25);
}
html body #tab-insights .ins-v5-cxb-eff.neut {
  background: rgba(230,226,218,0.04);
  color: var(--t3);
  border-color: var(--stroke);
}
html body #tab-insights .ins-v5-cxb-eff.neg {
  background: rgba(200,168,122,0.10);
  color: var(--clay);
  border-color: rgba(200,168,122,0.25);
}

/* ── Discoveries (notas panel) ── */
html body #tab-insights .ins-v5-disc-featured {
  background: linear-gradient(180deg, rgba(200,164,90,0.05) 0%, var(--card) 100%);
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  position: relative;
}
html body #tab-insights .ins-v5-disc-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.45;
}
html body #tab-insights .ins-v5-disc-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.2px;
  color: var(--gold-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
html body #tab-insights .ins-v5-disc-eb::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}
html body #tab-insights .ins-v5-disc-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--t1);
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-disc-title em {
  color: var(--gold);
  font-style: italic;
}
html body #tab-insights .ins-v5-disc-body {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
  margin-bottom: 12px;
}
html body #tab-insights .ins-v5-disc-body strong { color: var(--t1); font-weight: 600; }
html body #tab-insights .ins-v5-disc-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.3px;
  color: var(--t4);
  text-transform: uppercase;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-disc-mag {
  color: var(--gold);
  font-weight: 700;
}
html body #tab-insights .ins-v5-disc-evid {
  background: var(--sage-bg);
  color: var(--sage-soft);
  border: 0.5px solid rgba(107,168,142,0.25);
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 600;
}
/* Fase 3.6d · confidence chip · alta(sage) / media(gold) / baja(warm) */
html body #tab-insights .ins-v5-disc-conf {
  background: rgba(230,226,218,0.04);
  color: var(--t3);
  border: 0.5px solid var(--stroke);
  padding: 2px 7px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.7px;
  font-weight: 600;
}
html body #tab-insights .ins-v5-disc-ref {
  color: var(--t3);
}

html body #tab-insights .ins-v5-disc-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-disc-card .ins-v5-disc-title { font-size: 14px; margin-bottom: 6px; }
html body #tab-insights .ins-v5-disc-card .ins-v5-disc-body { font-size: 12.5px; }

/* ── Top movers + Actions ── */
html body #tab-insights .ins-v5-mover-row {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
html body #tab-insights .ins-v5-mover-pillar {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--gold-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
}
html body #tab-insights .ins-v5-mover-delta {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1;
  margin-top: 4px;
}
html body #tab-insights .ins-v5-mover-delta.pos { color: var(--sage-soft); }
html body #tab-insights .ins-v5-mover-delta.neg { color: var(--clay); }
html body #tab-insights .ins-v5-mover-reason {
  flex: 1;
  min-width: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.5;
}

html body #tab-insights .ins-v5-action-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border-left: 2px solid var(--stroke);
}
html body #tab-insights .ins-v5-action-card.prio-alta { border-left-color: var(--gold); }
html body #tab-insights .ins-v5-action-card.prio-media { border-left-color: var(--sage); }
html body #tab-insights .ins-v5-action-card.prio-baja { border-left-color: var(--stroke-hi); }
html body #tab-insights .ins-v5-action-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 10px;
}
html body #tab-insights .ins-v5-action-tit {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--t1);
  line-height: 1.3;
}
html body #tab-insights .ins-v5-action-prio {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.4px;
  color: var(--t4);
  text-transform: uppercase;
  flex-shrink: 0;
  font-weight: 700;
}
html body #tab-insights .ins-v5-action-card.prio-alta .ins-v5-action-prio { color: var(--gold); }
html body #tab-insights .ins-v5-action-card.prio-media .ins-v5-action-prio { color: var(--sage-soft); }
html body #tab-insights .ins-v5-action-body {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.55;
}

/* ── Notas clínicas N2/N3/N5 ── */
html body #tab-insights .ins-v5-note-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-note-card.n5 {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(200,164,90,0.04) 0%, var(--card) 100%);
}
html body #tab-insights .ins-v5-note-card.n2 {
  background: rgba(230,226,218,0.025);
}
html body #tab-insights .ins-v5-note-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.6px;
  color: var(--t4);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
html body #tab-insights .ins-v5-note-card.n5 .ins-v5-note-eb { color: var(--gold); }
html body #tab-insights .ins-v5-note-card.n3 .ins-v5-note-eb { color: var(--sage-soft); }
html body #tab-insights .ins-v5-note-tit {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--t1);
  line-height: 1.3;
  margin-bottom: 6px;
}
html body #tab-insights .ins-v5-note-tit em {
  color: var(--gold);
  font-style: italic;
}
html body #tab-insights .ins-v5-note-body {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.55;
}
html body #tab-insights .ins-v5-note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-note-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.8px;
  color: var(--t3);
  background: rgba(230,226,218,0.04);
  border: 0.5px solid var(--stroke);
  padding: 3px 7px;
  border-radius: 5px;
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-note-ref {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  color: var(--t4);
  text-transform: uppercase;
  margin-top: 6px;
}
html body #tab-insights .ins-v5-note-ref strong { color: var(--gold-eyebrow); font-weight: 600; }
/* ── FIN BLOQUE 28 · FASE 2A ───────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 29 · INSIGHTS V5 · FASE 2B-BIS · POLISH
   ─────────────────────────────────────────────────────────────────────
   Polish quirúrgico:
   1) Safe-area top en sticky (env(safe-area-inset-top))
   2) Sticky collapse on scroll (clase .is-collapsed)
   3) Score sub 8px → 9.5px para legibilidad iPhone
   4) FadeUp staggered sutil al activar subpanel
   5) prefers-reduced-motion respetado
   NO toca contenido nuevo. NO toca estructura. Solo polish base.
   ═════════════════════════════════════════════════════════════════════ */

/* 1 · Safe-area top + transición preparada
   AJUSTE TOP SPACING · score card sube ~35-45px para igualar Manage.
   Antes: padding-top calc(16px + safe-area), score-card padding 20px 18px, mb 12px.
   Ahora: padding-top calc(2px + safe-area), score-card padding 12px 18px, mb 6px. */
html body #tab-insights .ins-v5-sticky-wrap {
  padding-top: calc(2px + env(safe-area-inset-top, 0px));
  padding-bottom: 4px;
  transition: padding 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
html body #tab-insights .ins-v5-sticky-wrap .ins-v5-score-card {
  padding: 12px 18px;
  margin-bottom: 6px;
}

/* 2 · Sticky collapse — header eb/title se ocultan, score card reduce */
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed {
  padding-top: calc(env(safe-area-inset-top, 0px));
  padding-bottom: 4px;
}
html body #tab-insights .ins-v5-sticky-wrap .ins-v5-header-eb,
html body #tab-insights .ins-v5-sticky-wrap .ins-v5-header-title {
  transition: max-height 0.28s ease, opacity 0.22s ease, margin 0.28s ease;
  max-height: 60px;
  overflow: hidden;
}
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-header-eb,
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-header-title {
  max-height: 0;
  margin: 0;
  opacity: 0;
}
html body #tab-insights .ins-v5-sticky-wrap .ins-v5-score-card {
  transition: padding 0.28s ease, margin 0.28s ease;
}
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-score-card {
  padding: 10px 14px;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-sticky-wrap .ins-v5-sc-ring,
html body #tab-insights .ins-v5-sticky-wrap .ins-v5-sc-ring svg {
  transition: width 0.28s ease, height 0.28s ease;
}
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-sc-ring,
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-sc-ring svg {
  width: 46px;
  height: 46px;
}
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-sc-letter {
  font-size: 17px;
}
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-sc-sub {
  display: none;
}
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-sc-hl {
  font-size: 13.5px;
  margin-bottom: 0;
}
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-sc-desc {
  display: none;
}

/* 3 · sc-sub legibilidad 8 → 9.5 */
html body #tab-insights .ins-v5-sc-sub {
  font-size: 9.5px;
  letter-spacing: 1.4px;
}

/* 4 · FadeUp staggered sutil al activar subpanel */
@keyframes ins-v5-fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
html body #tab-insights .ins-v5-subpanel.on > * {
  animation: ins-v5-fadeUp 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
html body #tab-insights .ins-v5-subpanel.on > *:nth-child(1) { animation-delay: 0.00s; }
html body #tab-insights .ins-v5-subpanel.on > *:nth-child(2) { animation-delay: 0.04s; }
html body #tab-insights .ins-v5-subpanel.on > *:nth-child(3) { animation-delay: 0.08s; }
html body #tab-insights .ins-v5-subpanel.on > *:nth-child(4) { animation-delay: 0.12s; }
html body #tab-insights .ins-v5-subpanel.on > *:nth-child(5) { animation-delay: 0.16s; }
html body #tab-insights .ins-v5-subpanel.on > *:nth-child(6) { animation-delay: 0.20s; }
html body #tab-insights .ins-v5-subpanel.on > *:nth-child(7) { animation-delay: 0.24s; }
html body #tab-insights .ins-v5-subpanel.on > *:nth-child(8) { animation-delay: 0.28s; }
html body #tab-insights .ins-v5-subpanel.on > *:nth-child(9) { animation-delay: 0.32s; }

/* 5 · Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html body #tab-insights .ins-v5-subpanel.on > * { animation: none; }
  html body #tab-insights .ins-v5-sticky-wrap,
  html body #tab-insights .ins-v5-sticky-wrap *,
  html body #tab-insights .ins-v5-sc-ring,
  html body #tab-insights .ins-v5-sc-ring svg,
  html body #tab-insights .ins-v5-score-card { transition: none !important; }
}
/* ── FIN BLOQUE 29 · FASE 2B-BIS POLISH ─────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 30 · INSIGHTS V5 · FASE 2B · CONTENIDO
   ─────────────────────────────────────────────────────────────────────
   4 componentes nuevos:
   · Proyección 30 días (Tendencias)
   · Ventanas semanales · día de la semana (Tendencias)
   · Body composition trend 8 semanas (Correlac)
   · Labs evolution bioquímica 6 meses (Notas)
   ═════════════════════════════════════════════════════════════════════ */

/* — 1 · Proyección 30 días — */
html body #tab-insights .ins-v5-proj-card {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px 16px 18px;
  margin-bottom: 14px;
  position: relative;
}
html body #tab-insights .ins-v5-proj-h {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 12px;
}
html body #tab-insights .ins-v5-proj-tit {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px; font-weight: 400; color: var(--t1);
  letter-spacing: -0.2px; line-height: 1.3;
}
html body #tab-insights .ins-v5-proj-tit em { color: var(--gold); font-style: italic; }
html body #tab-insights .ins-v5-proj-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.4px; color: var(--t4);
  text-transform: uppercase; margin-top: 4px;
}
html body #tab-insights .ins-v5-proj-rt { text-align: right; flex-shrink: 0; }
html body #tab-insights .ins-v5-proj-target {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; font-weight: 600; color: var(--sage);
  line-height: 1; letter-spacing: -0.5px;
}
html body #tab-insights .ins-v5-proj-target small { font-size: 11px; color: var(--t4); }
html body #tab-insights .ins-v5-proj-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 1px; color: var(--sage);
  margin-top: 3px; text-transform: uppercase;
}
html body #tab-insights .ins-v5-proj-canvas {
  width: 100%; height: 130px; display: block; margin: 6px 0 10px;
}
html body #tab-insights .ins-v5-proj-narr {
  font-family: 'Inter', sans-serif;
  font-size: 12px; line-height: 1.5; color: var(--t2);
  padding-top: 10px; border-top: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-proj-narr strong { color: var(--gold); font-weight: 600; }

/* — 2 · Ventanas semanales · día de la semana — */
html body #tab-insights .ins-v5-week-card {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px 16px 18px;
  margin-bottom: 14px;
}
html body #tab-insights .ins-v5-week-h {
  margin-bottom: 14px;
}
html body #tab-insights .ins-v5-week-tit {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px; font-weight: 400; color: var(--t1);
  letter-spacing: -0.2px; line-height: 1.3;
}
html body #tab-insights .ins-v5-week-tit em { color: var(--gold); font-style: italic; }
html body #tab-insights .ins-v5-week-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 10px;
}
html body #tab-insights .ins-v5-week-col {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 2px; border-radius: 10px;
  background: rgba(230,226,218,0.025);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
html body #tab-insights .ins-v5-week-col.best {
  background: rgba(107,168,142,0.12);
  border-color: rgba(107,168,142,0.35);
}
html body #tab-insights .ins-v5-week-dow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 1.2px; color: var(--t4);
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-week-col.best .ins-v5-week-dow { color: var(--sage); }
html body #tab-insights .ins-v5-week-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px; font-weight: 500; color: var(--t1);
  line-height: 1;
}
html body #tab-insights .ins-v5-week-col.best .ins-v5-week-val { color: var(--sage); font-weight: 600; }
html body #tab-insights .ins-v5-week-bar {
  width: 18px; height: 28px;
  background: linear-gradient(to top, rgba(200,164,90,0.25) 0%, rgba(200,164,90,0.55) 100%);
  border-radius: 3px; transition: height 0.4s ease;
}
html body #tab-insights .ins-v5-week-col.best .ins-v5-week-bar {
  background: linear-gradient(to top, rgba(107,168,142,0.45) 0%, rgba(107,168,142,0.85) 100%);
  box-shadow: 0 0 8px rgba(107,168,142,0.3);
}
html body #tab-insights .ins-v5-week-cap {
  font-family: 'Inter', sans-serif;
  font-size: 12px; line-height: 1.5; color: var(--t2);
  padding-top: 8px; border-top: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-week-cap strong { color: var(--sage); font-weight: 600; }

/* — 3 · Sparklines SVG genérico (body comp + labs) — */
html body #tab-insights .ins-v5-spk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-spk-row:last-child { border-bottom: none; }
html body #tab-insights .ins-v5-spk-meta {
  flex: 0 0 88px; min-width: 0;
}
html body #tab-insights .ins-v5-spk-name {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500; color: var(--t1);
  line-height: 1.2; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #tab-insights .ins-v5-spk-unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.8px; color: var(--t4);
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-spk-svg {
  flex: 1; height: 32px; display: block;
}
html body #tab-insights .ins-v5-spk-rt {
  flex: 0 0 64px; text-align: right;
}
html body #tab-insights .ins-v5-spk-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px; font-weight: 500; color: var(--t1);
  line-height: 1; letter-spacing: -0.3px;
}
html body #tab-insights .ins-v5-spk-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.8px;
  margin-top: 3px; text-transform: uppercase;
}
html body #tab-insights .ins-v5-spk-delta.up { color: var(--sage); }
html body #tab-insights .ins-v5-spk-delta.down { color: rgba(216, 119, 90, 0.85); }
html body #tab-insights .ins-v5-spk-delta.flat { color: var(--t4); }
html body #tab-insights .ins-v5-spk-svg path.line { fill: none; stroke-width: 1.6; }
html body #tab-insights .ins-v5-spk-svg path.area { stroke: none; opacity: 0.18; }
html body #tab-insights .ins-v5-spk-svg circle.last { stroke: none; }
html body #tab-insights .ins-v5-spk-svg.gold path.line, html body #tab-insights .ins-v5-spk-svg.gold circle.last { stroke: var(--gold); fill: var(--gold); }
html body #tab-insights .ins-v5-spk-svg.gold path.area { fill: var(--gold); }
html body #tab-insights .ins-v5-spk-svg.sage path.line, html body #tab-insights .ins-v5-spk-svg.sage circle.last { stroke: var(--sage); fill: var(--sage); }
html body #tab-insights .ins-v5-spk-svg.sage path.area { fill: var(--sage); }
/* P3.2 · v3.0 audit · Tendencias línea Grasa de coral saturado a clay calibrado.
   Antes: rgba(216,119,90) · fuera del lenguaje cromático KYVEN. Ahora: var(--clay). */
html body #tab-insights .ins-v5-spk-svg.warn path.line, html body #tab-insights .ins-v5-spk-svg.warn circle.last { stroke: var(--clay) !important; fill: var(--clay) !important; }
html body #tab-insights .ins-v5-spk-svg.warn path.area { fill: var(--clay) !important; }

/* — 4 · Card wrap para grupos de sparklines (body comp + labs) — */
html body #tab-insights .ins-v5-spk-card {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
}
html body #tab-insights .ins-v5-spk-card-h {
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-spk-card-tit {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px; font-weight: 400; color: var(--t1);
  letter-spacing: -0.2px; line-height: 1.3; margin-bottom: 6px;
}
html body #tab-insights .ins-v5-spk-card-tit em { color: var(--gold); font-style: italic; }
html body #tab-insights .ins-v5-spk-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--t3); line-height: 1.5;
}
html body #tab-insights .ins-v5-spk-card-sub strong { color: var(--sage); font-weight: 600; }
html body #tab-insights .ins-v5-spk-card-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 1.2px; color: var(--t4);
  text-transform: uppercase;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--stroke);
  text-align: center;
}
/* ── FIN BLOQUE 30 · FASE 2B CONTENIDO ──────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 31 · INSIGHTS V5 · FASE 3 · OCTÁGONO PANORAMA CLÍNICO
   ─────────────────────────────────────────────────────────────────────
   SVG procedural · 8 pilares como vértices · radio = score/100
   Estética WHOOP/Oura/Apple Health: calma editorial + clinical confidence
   Microinteracciones sutiles: pulse mejor score, glow gold best-delta
   prefers-reduced-motion respeta · todo SVG inline · scope ins-v5-*
   ═════════════════════════════════════════════════════════════════════ */

html body #tab-insights .ins-v5-oct-card {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 18px 14px 16px;
  margin-bottom: 14px;
  position: relative;
}
html body #tab-insights .ins-v5-oct-h {
  text-align: center;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-oct-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 1.6px; color: var(--t4);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
html body #tab-insights .ins-v5-oct-eb::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--sage); box-shadow: 0 0 6px rgba(107,168,142,0.55);
}
html body #tab-insights .ins-v5-oct-tit {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px; font-weight: 400; color: var(--t1);
  letter-spacing: -0.2px; line-height: 1.3; margin-top: 4px;
}
html body #tab-insights .ins-v5-oct-tit em { color: var(--gold); font-style: italic; }
html body #tab-insights .ins-v5-oct-svg-wrap {
  width: 100%;
  max-width: 320px;
  margin: 4px auto 0;
  position: relative;
  aspect-ratio: 1 / 1;
}
html body #tab-insights .ins-v5-oct-svg {
  width: 100%; height: 100%; display: block;
  overflow: visible;
}
html body #tab-insights .ins-v5-oct-axis {
  stroke: rgba(230,226,218,0.06);
  stroke-width: 0.7;
  fill: none;
}
html body #tab-insights .ins-v5-oct-ring {
  stroke: rgba(230,226,218,0.05);
  stroke-width: 0.6;
  fill: none;
  stroke-dasharray: 2 3;
}
html body #tab-insights .ins-v5-oct-poly {
  stroke: var(--sage);
  stroke-width: 1.6;
  fill: rgba(107,168,142,0.14);
  stroke-linejoin: round;
  transition: stroke 0.4s ease, fill 0.4s ease;
}
html body #tab-insights .ins-v5-oct-vertex {
  fill: rgba(230,226,218,0.42);
  stroke: var(--bg);
  stroke-width: 1.5;
  transition: fill 0.3s ease, r 0.3s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body #tab-insights .ins-v5-oct-vertex.best {
  fill: var(--sage);
  filter: drop-shadow(0 0 8px rgba(107,168,142,0.55));
}
html body #tab-insights .ins-v5-oct-vertex.glow {
  fill: var(--gold);
  filter: drop-shadow(0 0 6px rgba(200,164,90,0.55));
}
html body #tab-insights .ins-v5-oct-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 9.5px;
  font-weight: 400;
  fill: var(--t2);
  font-style: italic;
  pointer-events: none;
  letter-spacing: -0.1px;
}
html body #tab-insights .ins-v5-oct-label.best { fill: var(--sage); }
html body #tab-insights .ins-v5-oct-label.glow { fill: var(--gold); }
html body #tab-insights .ins-v5-oct-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.8px;
  fill: var(--t3);
  pointer-events: none;
}
html body #tab-insights .ins-v5-oct-score.best { fill: var(--sage); font-weight: 600; }
html body #tab-insights .ins-v5-oct-score.glow { fill: var(--gold); font-weight: 600; }

/* Fase 3.6a · sparkline 7d por pilar desde STATE.pillarHistory */
html body #tab-insights .ins-v5-oct-spark {
  fill: none;
  stroke: var(--text-tertiary);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
html body #tab-insights .ins-v5-oct-spark.best { stroke: var(--sage); stroke-width: 1.5; }
html body #tab-insights .ins-v5-oct-spark.glow { stroke: var(--gold); stroke-width: 1.5; }

/* — Pulse sutil del mejor pilar — */
@keyframes ins-v5-oct-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
html body #tab-insights .ins-v5-oct-pulse {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.4;
  transform-origin: center;
  transform-box: fill-box;
  animation: ins-v5-oct-pulse 2.8s ease-in-out infinite;
}

/* — Footer narrativo bajo octágono — */
html body #tab-insights .ins-v5-oct-foot {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--t2); line-height: 1.5;
  text-align: center;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-oct-foot strong.best { color: var(--sage); font-weight: 600; }
html body #tab-insights .ins-v5-oct-foot strong.glow { color: var(--gold); font-weight: 600; }

/* — Fase 3 cierre · chips deltas históricos d7/d30/baseline — */
html body #tab-insights .ins-v5-oct-deltas {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
  flex-wrap: wrap;
}
html body #tab-insights .ins-v5-oct-delta-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  background: rgba(230,226,218,0.025);
  border: 0.5px solid var(--stroke);
  border-radius: 8px;
  min-width: 56px;
}
html body #tab-insights .ins-v5-oct-delta-chip.pos {
  background: rgba(107,168,142,0.08);
  border-color: rgba(107,168,142,0.25);
}
html body #tab-insights .ins-v5-oct-delta-chip.neg {
  background: rgba(216,119,90,0.06);
  border-color: rgba(216,119,90,0.22);
}
html body #tab-insights .ins-v5-oct-delta-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--t4);
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-oct-delta-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--t2);
  letter-spacing: -0.2px;
  line-height: 1;
}
html body #tab-insights .ins-v5-oct-delta-chip.pos .ins-v5-oct-delta-val { color: var(--sage); }
html body #tab-insights .ins-v5-oct-delta-chip.neg .ins-v5-oct-delta-val { color: rgba(216,119,90,0.95); }

/* — Fase 3 cierre · CTA Dr.K consult inline para pilares bajos — */
html body #tab-insights .ins-v5-oct-drk-cta {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(200,164,90,0.10) 0%, rgba(200,164,90,0.04) 100%);
  border: 1px solid rgba(200,164,90,0.30);
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.2px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
html body #tab-insights .ins-v5-oct-drk-cta em {
  font-style: italic;
  font-weight: 600;
}
html body #tab-insights .ins-v5-oct-drk-cta:active {
  background: linear-gradient(135deg, rgba(200,164,90,0.18) 0%, rgba(200,164,90,0.08) 100%);
  border-color: rgba(200,164,90,0.50);
  transform: scale(0.98);
}

/* — Respeta prefers-reduced-motion — */
@media (prefers-reduced-motion: reduce) {
  html body #tab-insights .ins-v5-oct-pulse { animation: none; opacity: 0.7; }
  html body #tab-insights .ins-v5-oct-poly,
  html body #tab-insights .ins-v5-oct-vertex,
  html body #tab-insights .ins-v5-oct-drk-cta { transition: none; }
}
/* ── FIN BLOQUE 31 · FASE 3 OCTÁGONO ────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 32 · INSIGHTS V5 · FASE 3.5 · AI RECOVERY
   ─────────────────────────────────────────────────────────────────────
   Reconecta inteligencia narrativa de loadInsightsForUser (motor anterior)
   en la carcasa V5. Cards premium para overview_cards + trend_insight +
   notes generadas por Sonnet 4-6 via mode=insights_generate.

   Reglas:
   · CONSUMIR el cache legacy (read-only) · NO duplicar fetch
   · Badge distinto a weekly brain: "AI INSIGHTS · SONNET"
   · No saturar visualmente · estilo bloomberg-calm
   · prefers-reduced-motion respeta
   ═════════════════════════════════════════════════════════════════════ */

/* — Section header AI · diferenciado — */
html body #tab-insights .ins-v5-ai-section-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 10px;
}
html body #tab-insights .ins-v5-ai-sh-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  color: var(--t3);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}
html body #tab-insights .ins-v5-ai-sh-title::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(200,164,90,0.55);
  animation: ins-v5-ai-spark 3.2s ease-in-out infinite;
}
html body #tab-insights .ins-v5-ai-sh-title strong { color: var(--t1); font-weight: 600; }
html body #tab-insights .ins-v5-ai-sh-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.4px;
  color: var(--t4);
  text-transform: uppercase;
}

/* — Overview card AI premium — */
html body #tab-insights .ins-v5-ai-card {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
html body #tab-insights .ins-v5-ai-card.highlight {
  border-color: rgba(200,164,90,0.30);
  background: linear-gradient(135deg, rgba(200,164,90,0.06) 0%, var(--card-hi) 60%);
}
html body #tab-insights .ins-v5-ai-card.highlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,164,90,0.45) 50%, transparent 100%);
}
html body #tab-insights .ins-v5-ai-card-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-ai-card-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--gold-eyebrow);
  text-transform: uppercase;
  line-height: 1.2;
}
html body #tab-insights .ins-v5-ai-card.highlight .ins-v5-ai-card-label { color: var(--gold); }
html body #tab-insights .ins-v5-ai-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  background: rgba(230,226,218,0.04);
  border: 0.5px solid var(--stroke);
  color: var(--t3);
  flex-shrink: 0;
}
html body #tab-insights .ins-v5-ai-card-tag.sinergia { color: var(--sage); border-color: rgba(107,168,142,0.30); background: rgba(107,168,142,0.06); }
html body #tab-insights .ins-v5-ai-card-tag.timing { color: var(--gold); border-color: rgba(200,164,90,0.30); background: rgba(200,164,90,0.06); }
html body #tab-insights .ins-v5-ai-card-tag.alerta { color: rgba(216,119,90,0.92); border-color: rgba(216,119,90,0.30); background: rgba(216,119,90,0.06); }
html body #tab-insights .ins-v5-ai-card-tag.bio { color: var(--sage); border-color: rgba(107,168,142,0.30); background: rgba(107,168,142,0.05); }
html body #tab-insights .ins-v5-ai-card-tag.peptido { color: var(--gold); border-color: rgba(200,164,90,0.30); background: rgba(200,164,90,0.05); }
html body #tab-insights .ins-v5-ai-card-tag.suplemento { color: var(--t2); border-color: var(--stroke); }
html body #tab-insights .ins-v5-ai-card-tag.cognitivo,
html body #tab-insights .ins-v5-ai-card-tag.metabolico,
html body #tab-insights .ins-v5-ai-card-tag.longevidad { color: var(--sage); border-color: rgba(107,168,142,0.25); background: rgba(107,168,142,0.05); }
html body #tab-insights .ins-v5-ai-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -0.2px;
  line-height: 1.35;
  margin-bottom: 6px;
}
html body #tab-insights .ins-v5-ai-card-title em { color: var(--gold); font-style: italic; }
html body #tab-insights .ins-v5-ai-card-body {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t2);
}
html body #tab-insights .ins-v5-ai-card-body strong { color: var(--gold); font-weight: 600; }

/* — Trend insight card · narrativa larga — */
html body #tab-insights .ins-v5-ai-trend-card {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 18px 16px;
  margin-bottom: 14px;
  position: relative;
}
html body #tab-insights .ins-v5-ai-trend-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--gold-eyebrow);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
html body #tab-insights .ins-v5-ai-trend-label::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 5px rgba(200,164,90,0.6);
}
html body #tab-insights .ins-v5-ai-trend-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-ai-trend-title em { color: var(--gold); font-style: italic; }
html body #tab-insights .ins-v5-ai-trend-body {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--t2);
}
html body #tab-insights .ins-v5-ai-trend-body strong { color: var(--gold); font-weight: 600; }
html body #tab-insights .ins-v5-ai-trend-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  color: var(--t3);
  background: rgba(230,226,218,0.04);
  border: 0.5px solid var(--stroke);
  text-transform: uppercase;
}

/* — AI Notes · diferenciadas de weekly brain notes (N2/N3/N5) — */
html body #tab-insights .ins-v5-ai-note-card {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  position: relative;
}
html body #tab-insights .ins-v5-ai-note-card.n2 { border-left: 3px solid rgba(216,119,90,0.85); }
html body #tab-insights .ins-v5-ai-note-card.n3 { border-left: 3px solid var(--gold); }
html body #tab-insights .ins-v5-ai-note-card.n5 { border-left: 3px solid var(--sage); }
html body #tab-insights .ins-v5-ai-note-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.3px;
  color: var(--t4);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
html body #tab-insights .ins-v5-ai-note-card.n2 .ins-v5-ai-note-eb { color: rgba(216,119,90,0.95); }
html body #tab-insights .ins-v5-ai-note-card.n3 .ins-v5-ai-note-eb { color: var(--gold); }
html body #tab-insights .ins-v5-ai-note-card.n5 .ins-v5-ai-note-eb { color: var(--sage); }
html body #tab-insights .ins-v5-ai-note-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin-bottom: 6px;
}
html body #tab-insights .ins-v5-ai-note-body {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t2);
}
html body #tab-insights .ins-v5-ai-note-body strong { color: var(--gold); font-weight: 600; }

/* — Empty state AI (cache vacío o fail) — */
html body #tab-insights .ins-v5-ai-empty {
  background: rgba(200,164,90,0.03);
  border: 1px dashed rgba(200,164,90,0.20);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  text-align: center;
}
html body #tab-insights .ins-v5-ai-empty-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--gold-eyebrow);
  text-transform: uppercase;
  margin-bottom: 6px;
}
html body #tab-insights .ins-v5-ai-empty-msg {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--t3);
  line-height: 1.5;
}

/* — Spark pulse del bullet dorado en section header — */
@keyframes ins-v5-ai-spark {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  html body #tab-insights .ins-v5-ai-sh-title::before,
  html body #tab-insights .ins-v5-ai-trend-label::before { animation: none; opacity: 0.85; }
}
/* ── FIN BLOQUE 32 · FASE 3.5 AI RECOVERY ──────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 33 · INSIGHTS V5 · FASE 3.6b · Bio Extras + Weight Evolution
   ═════════════════════════════════════════════════════════════════════ */

/* Bio extras chips strip (REM · Strain · HR rest · SpO2) */
html body #tab-insights .ins-v5-bio-extras-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 14px;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
html body #tab-insights .ins-v5-bio-extras-strip::-webkit-scrollbar { display: none; }
html body #tab-insights .ins-v5-bio-extra-chip {
  flex: 1 0 auto;
  min-width: 72px;
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
html body #tab-insights .ins-v5-bio-extra-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.3px;
  color: var(--t4);
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-bio-extra-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--t1);
  letter-spacing: -0.3px;
  line-height: 1;
}
html body #tab-insights .ins-v5-bio-extra-val small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  color: var(--t4);
  margin-left: 2px;
  letter-spacing: 0.5px;
}
/* ── FIN BLOQUE 33 · FASE 3.6b ─────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 34 · INSIGHTS V5 · FASE 3.6c · Goal Analyses enriquecido + Streak
   ═════════════════════════════════════════════════════════════════════ */

/* Streak banner */
html body #tab-insights .ins-v5-streak-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(200,164,90,0.08) 0%, rgba(200,164,90,0.02) 100%);
  border: 1px solid rgba(200,164,90,0.22);
  border-radius: 14px;
}
html body #tab-insights .ins-v5-streak-lhs { flex: 1; min-width: 0; }
html body #tab-insights .ins-v5-streak-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 4px;
}
html body #tab-insights .ins-v5-streak-banner.tier-3 {
  background: linear-gradient(135deg, rgba(200,164,90,0.14) 0%, rgba(200,164,90,0.04) 100%);
  border-color: rgba(200,164,90,0.40);
}
html body #tab-insights .ins-v5-streak-banner.tier-3 .ins-v5-streak-eb::before {
  content: ' · ';
  letter-spacing: 0;
}
html body #tab-insights .ins-v5-streak-msg {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--t2);
}
html body #tab-insights .ins-v5-streak-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.5px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
html body #tab-insights .ins-v5-streak-num small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  color: var(--t4);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 400;
}

/* Goal card enriquecido (cuando hay goal_analyses real) */
html body #tab-insights .ins-v5-obj-card.has-drk {
  background: linear-gradient(135deg, rgba(200,164,90,0.04) 0%, var(--card-hi) 60%);
}
html body #tab-insights .ins-v5-obj-drk-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 8px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-obj-drk-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: -0.5px;
  line-height: 1;
}
html body #tab-insights .ins-v5-obj-drk-unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--t4);
  letter-spacing: 0.8px;
}
html body #tab-insights .ins-v5-obj-drk-tag {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.3px;
  color: var(--gold);
  text-transform: uppercase;
  padding: 3px 8px;
  background: rgba(200,164,90,0.08);
  border: 0.5px solid rgba(200,164,90,0.30);
  border-radius: 6px;
}
html body #tab-insights .ins-v5-obj-block { margin-top: 10px; }
html body #tab-insights .ins-v5-obj-blk-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.4px;
  color: var(--t4);
  text-transform: uppercase;
  margin-bottom: 6px;
}
html body #tab-insights .ins-v5-obj-blk-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
html body #tab-insights .ins-v5-obj-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 8px;
  letter-spacing: 0.2px;
}
html body #tab-insights .ins-v5-obj-tag.covered {
  color: var(--sage);
  background: rgba(107,168,142,0.08);
  border: 0.5px solid rgba(107,168,142,0.25);
}
html body #tab-insights .ins-v5-obj-tag.missing {
  color: rgba(216,119,90,0.92);
  background: rgba(216,119,90,0.06);
  border: 0.5px solid rgba(216,119,90,0.25);
}
html body #tab-insights .ins-v5-obj-blk-recs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
html body #tab-insights .ins-v5-obj-rec {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--t2);
}
/* QA Final · CTA Dr.K en cards goals (motor anterior recuperado) */
html body #tab-insights .ins-v5-obj-drk-cta {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(200,164,90,0.08) 0%, rgba(200,164,90,0.02) 100%);
  border: 1px solid rgba(200,164,90,0.28);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.2px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
html body #tab-insights .ins-v5-obj-drk-cta em { font-style: italic; font-weight: 600; }
html body #tab-insights .ins-v5-obj-drk-cta:active {
  background: linear-gradient(135deg, rgba(200,164,90,0.16) 0%, rgba(200,164,90,0.06) 100%);
  border-color: rgba(200,164,90,0.48);
  transform: scale(0.98);
}
/* ── FIN BLOQUE 34 · FASE 3.6c ─────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 35 · INSIGHTS V5 · FASE 4 · Sheets expandibles por pilar
   ─────────────────────────────────────────────────────────────────────
   Bottom sheet iOS-style · tap en vertex octágono → muestra compounds +
   biomarkers + acciones del pilar. Cero impacto en otros tabs.
   ═════════════════════════════════════════════════════════════════════ */

/* Backdrop */
html body .ins-v5-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  z-index: 9998;
  pointer-events: none;
  transition: background 0.28s ease;
}
html body .ins-v5-sheet-backdrop.open {
  background: rgba(0,0,0,0.55);
  pointer-events: auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Sheet container */
html body .ins-v5-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 82vh;
  background: var(--bg);
  border-top: 1px solid var(--stroke);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  padding: 0 0 calc(20px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html body .ins-v5-sheet.open { transform: translateY(0); }
html body .ins-v5-sheet-handle {
  width: 36px; height: 4px;
  background: rgba(230,226,218,0.18);
  border-radius: 2px;
  margin: 10px auto 8px;
  flex-shrink: 0;
}
html body .ins-v5-sheet-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(230,226,218,0.06);
  border: 1px solid var(--stroke);
  color: var(--t2);
  font-size: 18px;
  line-height: 1;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
html body .ins-v5-sheet-close:active { background: rgba(230,226,218,0.12); }
html body .ins-v5-sheet-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 20px 0;
  -webkit-overflow-scrolling: touch;
}
html body .ins-v5-sheet-body::-webkit-scrollbar { display: none; }
html body.ins-v5-sheet-lock { overflow: hidden; }

/* Header del sheet */
html body .ins-v5-sheet-hdr {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--stroke);
}
html body .ins-v5-sheet-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--gold-eyebrow);
  text-transform: uppercase;
  margin-bottom: 6px;
}
html body .ins-v5-sheet-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 12px;
}
html body .ins-v5-sheet-title em { color: var(--gold); font-style: italic; }
html body .ins-v5-sheet-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
html body .ins-v5-sheet-score {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: -0.8px;
  line-height: 1;
}
html body .ins-v5-sheet-score small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--t4);
  letter-spacing: 0.6px;
  font-weight: 400;
  margin-left: 2px;
}
html body .ins-v5-sheet-state {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  padding: 5px 10px;
  border-radius: 7px;
  text-transform: uppercase;
  background: rgba(230,226,218,0.04);
  border: 0.5px solid var(--stroke);
  color: var(--t3);
}
html body .ins-v5-sheet-state.optim { color: var(--sage); background: rgba(107,168,142,0.08); border-color: rgba(107,168,142,0.30); }
html body .ins-v5-sheet-state.mod { color: var(--gold); background: rgba(200,164,90,0.08); border-color: rgba(200,164,90,0.30); }
html body .ins-v5-sheet-state.low,
html body .ins-v5-sheet-state.crit { color: rgba(216,119,90,0.95); background: rgba(216,119,90,0.06); border-color: rgba(216,119,90,0.30); }

/* Sections */
html body .ins-v5-sheet-section { margin-bottom: 18px; }
html body .ins-v5-sheet-section-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--t4);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Compound cards */
html body .ins-v5-sheet-comp {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
html body .ins-v5-sheet-comp-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
html body .ins-v5-sheet-comp-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--t1);
  letter-spacing: -0.2px;
}
html body .ins-v5-sheet-comp-dose {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--t4);
  font-weight: 400;
  letter-spacing: 0.4px;
  margin-left: 4px;
}
html body .ins-v5-sheet-comp-w {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  padding: 3px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
html body .ins-v5-sheet-comp-w.pri { color: var(--gold); background: rgba(200,164,90,0.10); border: 0.5px solid rgba(200,164,90,0.32); }
html body .ins-v5-sheet-comp-w.rel { color: var(--sage); background: rgba(107,168,142,0.08); border: 0.5px solid rgba(107,168,142,0.28); }
html body .ins-v5-sheet-comp-w.adj { color: var(--t3); background: rgba(230,226,218,0.04); border: 0.5px solid var(--stroke); }
html body .ins-v5-sheet-comp-evid {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  color: var(--t4);
  text-transform: uppercase;
  margin-bottom: 6px;
}
html body .ins-v5-sheet-comp-mech {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--t2);
}

/* Biomarker rows */
html body .ins-v5-sheet-bm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--stroke);
}
html body .ins-v5-sheet-bm-row:last-child { border-bottom: none; }
html body .ins-v5-sheet-bm-name {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--t1);
}
html body .ins-v5-sheet-bm-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--t1);
}
html body .ins-v5-sheet-bm-val small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  color: var(--t4);
  margin-left: 2px;
}
html body .ins-v5-sheet-bm-st {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.1px;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(230,226,218,0.04);
  border: 0.5px solid var(--stroke);
  color: var(--t3);
  text-transform: uppercase;
  min-width: 64px;
  text-align: center;
}
html body .ins-v5-sheet-bm-st.ok { color: var(--sage); background: rgba(107,168,142,0.08); border-color: rgba(107,168,142,0.25); }
html body .ins-v5-sheet-bm-st.warn { color: var(--gold); background: rgba(200,164,90,0.08); border-color: rgba(200,164,90,0.25); }
html body .ins-v5-sheet-bm-st.crit { color: rgba(216,119,90,0.95); background: rgba(216,119,90,0.06); border-color: rgba(216,119,90,0.30); }

/* Action cards (within sheet) */
html body .ins-v5-sheet-action {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
html body .ins-v5-sheet-action.alta { border-left: 3px solid var(--gold); }
html body .ins-v5-sheet-action.media { border-left: 3px solid var(--sage); }
html body .ins-v5-sheet-action.baja { border-left: 3px solid var(--stroke); }
html body .ins-v5-sheet-action-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
html body .ins-v5-sheet-action-tit {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  color: var(--t1);
  font-weight: 500;
  letter-spacing: -0.2px;
}
html body .ins-v5-sheet-action-prio {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.2px;
  color: var(--t4);
  text-transform: uppercase;
  flex-shrink: 0;
}
html body .ins-v5-sheet-action.alta .ins-v5-sheet-action-prio { color: var(--gold); }
html body .ins-v5-sheet-action.media .ins-v5-sheet-action-prio { color: var(--sage); }
html body .ins-v5-sheet-action-body {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t2);
}

/* Empty state within sheet */
html body .ins-v5-sheet-empty {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--t3);
  font-style: italic;
  padding: 12px 0;
  text-align: center;
  background: rgba(230,226,218,0.02);
  border: 1px dashed var(--stroke);
  border-radius: 10px;
}
html body .ins-v5-sheet-empty strong { color: var(--t2); font-weight: 600; font-style: normal; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html body .ins-v5-sheet { transition: none; }
  html body .ins-v5-sheet-backdrop { transition: none; }
}
/* ── FIN BLOQUE 35 · FASE 4 SHEETS ──────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 36 · INSIGHTS V5 · QA FINAL · Pearson REALES + Cascade Recovery
   ═════════════════════════════════════════════════════════════════════ */

/* Pearson real rows */
html body #tab-insights .ins-v5-pearson-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-pearson-row:last-child { border-bottom: none; }
html body #tab-insights .ins-v5-pearson-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 10px;
}
html body #tab-insights .ins-v5-pearson-rel {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
  letter-spacing: -0.1px;
  line-height: 1.3;
}
html body #tab-insights .ins-v5-pearson-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  color: var(--t4);
  text-transform: uppercase;
  margin-top: 3px;
}
html body #tab-insights .ins-v5-pearson-r {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1;
  flex-shrink: 0;
}
html body #tab-insights .ins-v5-pearson-r.strong-pos { color: var(--sage); }
html body #tab-insights .ins-v5-pearson-r.strong-neg { color: rgba(216,119,90,0.95); }
html body #tab-insights .ins-v5-pearson-r.weak { color: var(--gold); }
html body #tab-insights .ins-v5-pearson-bar {
  height: 4px;
  background: rgba(230,226,218,0.05);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-pearson-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
html body #tab-insights .ins-v5-pearson-bar-fill.strong-pos { background: linear-gradient(90deg, var(--sage), rgba(159, 196, 163, 0.9)); box-shadow: 0 0 6px rgba(107,168,142,0.45); }
html body #tab-insights .ins-v5-pearson-bar-fill.strong-neg { background: linear-gradient(90deg, rgba(216,119,90,0.95), rgba(224, 154, 58, 0.9)); box-shadow: 0 0 6px rgba(216,119,90,0.45); }
html body #tab-insights .ins-v5-pearson-bar-fill.weak { background: var(--gold); }
html body #tab-insights .ins-v5-pearson-body {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--t2);
  line-height: 1.5;
  margin-bottom: 6px;
}
html body #tab-insights .ins-v5-pearson-stats {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  color: var(--t4);
  text-transform: uppercase;
}

/* Cascade Recovery real (bars) */
html body #tab-insights .ins-v5-casc-real-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  align-items: end;
  padding: 12px 4px 0;
}
html body #tab-insights .ins-v5-casc-real-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 100px;
  justify-content: flex-end;
}
html body #tab-insights .ins-v5-casc-real-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
html body #tab-insights .ins-v5-casc-real-bar.base .ins-v5-casc-real-val { color: var(--text-tertiary); }
html body #tab-insights .ins-v5-casc-real-bar.pos .ins-v5-casc-real-val { color: var(--sage); }
html body #tab-insights .ins-v5-casc-real-bar.neg .ins-v5-casc-real-val { color: rgba(216,119,90,0.95); }
html body #tab-insights .ins-v5-casc-real-bar.total .ins-v5-casc-real-val { color: var(--gold); }
html body #tab-insights .ins-v5-casc-real-fill {
  width: 100%;
  border-radius: 3px;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
html body #tab-insights .ins-v5-casc-real-bar.base .ins-v5-casc-real-fill { background: rgba(230,226,218,0.32); }
html body #tab-insights .ins-v5-casc-real-bar.pos .ins-v5-casc-real-fill {
  background: linear-gradient(to top, rgba(107,168,142,0.45), rgba(107,168,142,0.85));
  box-shadow: 0 0 6px rgba(107,168,142,0.30);
}
html body #tab-insights .ins-v5-casc-real-bar.neg .ins-v5-casc-real-fill {
  background: linear-gradient(to top, rgba(216,119,90,0.40), rgba(216,119,90,0.80));
}
html body #tab-insights .ins-v5-casc-real-bar.total .ins-v5-casc-real-fill {
  background: linear-gradient(to top, rgba(200,164,90,0.45), rgba(200,164,90,0.95));
  box-shadow: 0 0 8px rgba(200,164,90,0.40);
}
html body #tab-insights .ins-v5-casc-real-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.8px;
  color: var(--t4);
  text-transform: uppercase;
  margin-top: 4px;
}
/* ── FIN BLOQUE 36 · QA FINAL ──────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 37 · INSIGHTS V5 · QA FINAL · Toggle PILARES + Body Anatomy
   Adaptado del master kyven-insights-v5-final.html
   ═════════════════════════════════════════════════════════════════════ */

/* Toggle Lista/Anatomía */
html body #tab-insights .ins-v5-pillars-toggle {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
}
html body #tab-insights .ins-v5-pt-btn {
  background: transparent;
  border: none;
  color: var(--t4);
  text-transform: uppercase;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
html body #tab-insights .ins-v5-pt-btn svg { width: 11px; height: 11px; }
html body #tab-insights .ins-v5-pt-btn.on {
  color: var(--sage);
  background: rgba(107,168,142,0.10);
}
html body #tab-insights .ins-v5-pillars-list { display: none; }
html body #tab-insights .ins-v5-pillars-list.on { display: block; }
html body #tab-insights .ins-v5-pillars-body { display: none; }
html body #tab-insights .ins-v5-pillars-body.on { display: block; }

/* Body layout · 3 cols (cards izq + silueta + cards derecha) */
html body #tab-insights .ins-v5-body-layout {
  display: grid;
  grid-template-columns: 1fr 130px 1fr;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 14px;
}
html body #tab-insights .ins-v5-body-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html body #tab-insights .ins-v5-body-silhouette {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}
html body #tab-insights .ins-v5-body-svg {
  width: 130px;
  height: auto;
  opacity: 1;
}

/* Cards laterales */
html body #tab-insights .ins-v5-bcard {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
html body #tab-insights .ins-v5-bcard:active { transform: scale(0.97); }
html body #tab-insights .ins-v5-bcard.crit {
  border-color: rgba(216,119,90,0.35);
  background: linear-gradient(135deg, rgba(216,119,90,0.06) 0%, var(--card-hi) 60%);
}
html body #tab-insights .ins-v5-bcard.dim { opacity: 0.45; }
html body #tab-insights .ins-v5-bcard-name {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--t2);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
html body #tab-insights .ins-v5-bcard-score {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--t1);
  line-height: 1;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
html body #tab-insights .ins-v5-bcard.crit .ins-v5-bcard-score { color: rgba(216,119,90,0.95); }
html body #tab-insights .ins-v5-bcard-st {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--t4);
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-bcard-st.optim { color: var(--sage); }
html body #tab-insights .ins-v5-bcard-st.mod { color: var(--gold); }
html body #tab-insights .ins-v5-bcard-st.low { color: rgba(216,119,90,0.85); }
html body #tab-insights .ins-v5-bcard-st.crit { color: rgba(216,119,90,0.95); font-weight: 700; }

/* Organ dots · gold pulsantes en órganos críticos · muted en normales */
html body #tab-insights .ins-v5-organ-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px var(--gold), 0 0 5px rgba(224,195,120,0.9);
  border: 1.5px solid var(--bg);
  transform: translate(-50%, -50%);
  animation: ins-v5-organ-pulse 1.8s ease-in-out infinite;
  z-index: 3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body #tab-insights .ins-v5-organ-dot.dim {
  background: var(--t4);
  box-shadow: none;
  animation: none;
  opacity: 0.45;
  border-color: transparent;
}
html body #tab-insights .ins-v5-organ-label {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.4px;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(6,17,14,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(200,164,90,0.35);
  border-radius: 5px;
  padding: 3px 6px;
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
  animation: ins-v5-label-fadein 0.5s ease-out;
}
html body #tab-insights .ins-v5-organ-label.left { transform: translate(-115%, -50%); }
html body #tab-insights .ins-v5-organ-label.right { transform: translate(15%, -50%); }
@keyframes ins-v5-organ-pulse {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes ins-v5-label-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html body #tab-insights .ins-v5-organ-dot { animation: none; }
  html body #tab-insights .ins-v5-organ-label { animation: none; }
}
/* ── FIN BLOQUE 37 · QA FINAL ANATOMY ─────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 38 · INSIGHTS V5 · P1 · Compound × Resultado + Timeline Protocolo
   ═════════════════════════════════════════════════════════════════════ */

/* Compound × Resultado (Correlac) */
html body #tab-insights .ins-v5-cxr-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--stroke);
}
html body #tab-insights .ins-v5-cxr-row:last-child { border-bottom: none; }
html body #tab-insights .ins-v5-cxr-h {
  display: flex; justify-content: space-between;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-cxr-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px; font-weight: 500; color: var(--t1);
  letter-spacing: -0.2px;
}
html body #tab-insights .ins-v5-cxr-dose {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--t4); font-weight: 400;
  letter-spacing: 0.4px; margin-left: 4px;
}
html body #tab-insights .ins-v5-cxr-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 1px; color: var(--t4);
  text-transform: uppercase; margin-top: 3px;
}
html body #tab-insights .ins-v5-cxr-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
html body #tab-insights .ins-v5-cxr-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 8px;
  border: 0.5px solid var(--stroke);
  background: rgba(230,226,218,0.03);
}
html body #tab-insights .ins-v5-cxr-chip.pos { border-color: rgba(107,168,142,0.30); background: rgba(107,168,142,0.06); }
html body #tab-insights .ins-v5-cxr-chip.neg { border-color: rgba(216,119,90,0.30); background: rgba(216,119,90,0.05); }
html body #tab-insights .ins-v5-cxr-chip.flat { border-color: rgba(200,164,90,0.22); background: rgba(200,164,90,0.04); }
html body #tab-insights .ins-v5-cxr-chip-name {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500; color: var(--t2);
  letter-spacing: 0.2px;
}
html body #tab-insights .ins-v5-cxr-chip-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.5px;
}
html body #tab-insights .ins-v5-cxr-chip.pos .ins-v5-cxr-chip-delta { color: var(--sage); }
html body #tab-insights .ins-v5-cxr-chip.neg .ins-v5-cxr-chip-delta { color: rgba(216,119,90,0.95); }
html body #tab-insights .ins-v5-cxr-chip.flat .ins-v5-cxr-chip-delta { color: var(--gold); }
html body #tab-insights .ins-v5-cxr-chip.unk .ins-v5-cxr-chip-delta { color: var(--t4); }

/* Timeline Protocolo (Notas) */
html body #tab-insights .ins-v5-tl-list {
  position: relative;
  padding: 4px 0;
}
html body #tab-insights .ins-v5-tl-row {
  display: flex; gap: 12px;
  padding: 10px 0;
  position: relative;
}
html body #tab-insights .ins-v5-tl-marker {
  flex: 0 0 14px;
  display: flex; flex-direction: column; align-items: center;
}
html body #tab-insights .ins-v5-tl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(200,164,90,0.55);
  border: 1.5px solid var(--bg);
  flex-shrink: 0;
}
html body #tab-insights .ins-v5-tl-row.paused .ins-v5-tl-dot { background: var(--t4); box-shadow: none; }
html body #tab-insights .ins-v5-tl-line {
  width: 1.5px; flex: 1;
  background: rgba(200,164,90,0.20);
  margin-top: 4px;
}
html body #tab-insights .ins-v5-tl-row:last-child .ins-v5-tl-line { display: none; }
html body #tab-insights .ins-v5-tl-body {
  flex: 1; min-width: 0;
  padding-bottom: 6px;
}
html body #tab-insights .ins-v5-tl-h {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
html body #tab-insights .ins-v5-tl-when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.2px;
  color: var(--gold); text-transform: uppercase;
  font-weight: 600;
}
html body #tab-insights .ins-v5-tl-act {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 1.2px;
  color: var(--t4); text-transform: uppercase;
}
html body #tab-insights .ins-v5-tl-row.paused .ins-v5-tl-act { color: rgba(216,119,90,0.85); }
html body #tab-insights .ins-v5-tl-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13.5px; font-weight: 500; color: var(--t1);
  letter-spacing: -0.2px; line-height: 1.3;
  margin-bottom: 3px;
}
html body #tab-insights .ins-v5-tl-dose {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--t4); font-weight: 400;
  letter-spacing: 0.4px;
}
html body #tab-insights .ins-v5-tl-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.8px;
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-tl-delta.pos { color: var(--sage); }
html body #tab-insights .ins-v5-tl-delta.neg { color: rgba(216,119,90,0.95); }
html body #tab-insights .ins-v5-tl-delta.flat { color: var(--gold); }
html body #tab-insights .ins-v5-tl-delta.unk { color: var(--t4); }
/* ── FIN BLOQUE 38 · P1 ───────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 39 · CONVERGENCIA MASTER · cuerpo SVG + tier bars + aurora
   ═════════════════════════════════════════════════════════════════════ */
html body #tab-insights .ins-v5-oct-svg-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(ellipse at center, rgba(107,168,142,0.06) 0%, transparent 65%);
  padding: 4px 10px;
}
html body #tab-insights .ins-v5-oct-aurora {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(200,164,90,0.18) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ins-v5-oct-aurora-pulse 4s ease-in-out infinite;
  z-index: 0;
}
@keyframes ins-v5-oct-aurora-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}
html body #tab-insights .ins-v5-oct-grid {
  position: absolute;
  inset: 18% 20%;
  background-image: linear-gradient(rgba(200,164,90,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(200,164,90,0.08) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(circle, black 30%, transparent 75%);
  mask-image: radial-gradient(circle, black 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
html body #tab-insights .ins-v5-oct-scanline {
  position: absolute;
  left: 10%; right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(224,195,120,0.85), transparent);
  top: 20%;
  pointer-events: none;
  animation: ins-v5-oct-scanline 4.5s linear infinite;
  z-index: 1;
}
@keyframes ins-v5-oct-scanline {
  0% { top: 18%; opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { top: 78%; opacity: 0; }
}
html body #tab-insights .ins-v5-oct-body-svg {
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  width: 120px;
  opacity: 0.78;
  pointer-events: none;
  z-index: 1;
}
html body #tab-insights .ins-v5-oct-svg {
  position: relative;
  z-index: 2;
}
html body #tab-insights .ins-v5-oct-scanning {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--gold-eyebrow);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(6,17,14,0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
}
html body #tab-insights .ins-v5-oct-scanning::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
  animation: ins-v5-oct-aurora-pulse 1.4s ease-in-out infinite;
}
html body #tab-insights .ins-v5-oct-index {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
html body #tab-insights .ins-v5-oct-oi-l { flex-shrink: 0; }
html body #tab-insights .ins-v5-oct-oi-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.4px;
  color: var(--t4);
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 4px;
}
html body #tab-insights .ins-v5-oct-oi-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: -0.5px;
  line-height: 1;
}
html body #tab-insights .ins-v5-oct-oi-num small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--t4);
  letter-spacing: 0.5px;
  margin-left: 2px;
  font-weight: 400;
}
html body #tab-insights .ins-v5-oct-oi-bw { flex: 1; min-width: 0; }
html body #tab-insights .ins-v5-oct-oi-track {
  height: 5px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
html body #tab-insights .ins-v5-oct-oi-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(200,164,90,0.45), rgba(200,164,90,0.85), rgba(224,195,120,1));
  border-radius: 3px;
  transition: width 1s ease;
}
html body #tab-insights .ins-v5-oct-oi-tiers {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 1px;
  color: var(--t4);
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  html body #tab-insights .ins-v5-oct-aurora,
  html body #tab-insights .ins-v5-oct-scanline,
  html body #tab-insights .ins-v5-oct-scanning::before { animation: none; }
}
/* ── FIN BLOQUE 39 · CONVERGENCIA MASTER ──────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 40 · QA · CTAs Dr.K en cards + skeleton premium
   ═════════════════════════════════════════════════════════════════════ */

/* CTA "CONSULTAR DR. K →" dentro de Evolución KyvenScore (master ln 1390) */
html body #tab-insights .ins-v5-gc-cta,
html body #tab-insights .ins-v5-n5-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  background: linear-gradient(135deg, rgba(200,164,90,0.08) 0%, rgba(200,164,90,0.02) 100%);
  border: 1px solid rgba(200,164,90,0.30);
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
html body #tab-insights .ins-v5-gc-cta span,
html body #tab-insights .ins-v5-n5-cta span {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}
html body #tab-insights .ins-v5-gc-cta:active,
html body #tab-insights .ins-v5-n5-cta:active {
  background: linear-gradient(135deg, rgba(200,164,90,0.18) 0%, rgba(200,164,90,0.06) 100%);
  border-color: rgba(200,164,90,0.50);
  transform: scale(0.98);
}

/* Skeleton premium AI overview (sustituye "SINCRONIZANDO ANÁLISIS") */
html body #tab-insights .ins-v5-ai-skel {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 12px;
}
html body #tab-insights .ins-v5-ai-skel-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(230,226,218,0.04) 0%, rgba(230,226,218,0.08) 50%, rgba(230,226,218,0.04) 100%);
  background-size: 200% 100%;
  animation: ins-v5-ai-skel-shimmer 2.2s ease-in-out infinite;
}
html body #tab-insights .ins-v5-ai-skel-line:last-child { margin-bottom: 0; }
html body #tab-insights .ins-v5-ai-skel-line.w55 { width: 55%; }
html body #tab-insights .ins-v5-ai-skel-line.w70 { width: 70%; }
html body #tab-insights .ins-v5-ai-skel-line.w90 { width: 90%; }
@keyframes ins-v5-ai-skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body #tab-insights .ins-v5-ai-skel-line { animation: none; }
}
/* ── FIN BLOQUE 40 · QA ──────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 41 · CIERRE V5 · Affordance (clicables visualmente claros)
   ═════════════════════════════════════════════════════════════════════ */

/* Vertices del octágono · cursor + subtle glow */
html body #tab-insights .ins-v5-oct-vertex {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.2s ease, r 0.2s ease;
}
html body #tab-insights .ins-v5-oct-vertex:hover,
html body #tab-insights .ins-v5-oct-vertex:active {
  filter: drop-shadow(0 0 6px rgba(200,164,90,0.65));
}

/* Pillars Lista rows · ya NO chevron sutil · usa CTA editorial "VER LECTURA CLÍNICA" */
html body #tab-insights .ins-v5-pillars-list .ins-v5-p-row {
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Body cards · cursor + chip CTA inline en bcard-cta */
html body #tab-insights .ins-v5-bcard {
  position: relative;
  cursor: pointer;
}

/* Organ dots · cursor (ya tiene animation pulse) */
html body #tab-insights .ins-v5-organ-dot {
  cursor: pointer;
}

/* Compound × Resultado rows · cursor + indicator dot gold pulsante */
html body #tab-insights .ins-v5-cxr-row {
  position: relative;
  cursor: default;
}

/* Timeline items · indicator dot ya gold pulsante en css existente */

/* Notes cards · al hacer click se podrían expandir (futuro) · cursor implícito */
html body #tab-insights .ins-v5-note-card,
html body #tab-insights .ins-v5-disc-card,
html body #tab-insights .ins-v5-mover-row,
html body #tab-insights .ins-v5-action-card {
  transition: border-color 0.2s ease;
}
/* ── FIN BLOQUE 41 · AFFORDANCE ──────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 42 · P0 · Adherencia source chip + Octágono scanner cycling
   ═════════════════════════════════════════════════════════════════════ */

/* Chip fuente adherencia */
html body #tab-insights .ins-v5-adh-src {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 1px;
  color: var(--sage);
  background: rgba(107,168,142,0.08);
  border: 0.5px solid rgba(107,168,142,0.25);
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  vertical-align: middle;
}
html body #tab-insights .ins-v5-adh-src.warn {
  color: var(--gold);
  background: rgba(200,164,90,0.08);
  border-color: rgba(200,164,90,0.30);
}
html body #tab-insights .ins-v5-adh-d.low {
  background: rgba(216,119,90,0.40);
  border: 0.5px solid rgba(216,119,90,0.50);
}

/* Scanner cycling fade (P0.3) */
html body #tab-insights .ins-v5-oct-scanning {
  transition: opacity 0.45s ease;
}
html body #tab-insights .ins-v5-oct-scanning.fading {
  opacity: 0;
}
/* ── FIN BLOQUE 42 · P0 ────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 43 · P1 · Wearable → KYVEN
   Causal cards (Correlaciones) + bestday insight (Resumen)
   ═════════════════════════════════════════════════════════════════════ */

/* Bestday insight · línea compacta en Resumen */
html body #tab-insights .ins-v5-bestday-line {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(107,168,142,0.04);
  border: 0.5px solid rgba(107,168,142,0.20);
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
html body #tab-insights .ins-v5-bestday-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.3px;
  color: var(--sage);
  text-transform: uppercase;
}
html body #tab-insights .ins-v5-bestday-txt strong { color: var(--t1); font-weight: 600; }

/* Causal card · Correlaciones · HIPÓTESIS / EVIDENCIA / DR.K / ACCIÓN */
html body #tab-insights .ins-v5-causal-card {
  background: var(--card-hi);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  border-left: 3px solid var(--stroke);
}
html body #tab-insights .ins-v5-causal-card.strong-pos { border-left-color: var(--sage); }
html body #tab-insights .ins-v5-causal-card.strong-neg { border-left-color: rgba(216,119,90,0.85); }
html body #tab-insights .ins-v5-causal-card.weak { border-left-color: var(--gold); }
html body #tab-insights .ins-v5-causal-eb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--gold-eyebrow);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
html body #tab-insights .ins-v5-causal-eb::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 5px rgba(200,164,90,0.7);
}
html body #tab-insights .ins-v5-causal-claim {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -0.2px;
  line-height: 1.4;
  margin-bottom: 14px;
}
html body #tab-insights .ins-v5-causal-claim em {
  color: var(--gold);
  font-style: italic;
}
html body #tab-insights .ins-v5-causal-evidence {
  background: rgba(230,226,218,0.03);
  border: 0.5px solid var(--stroke);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
html body #tab-insights .ins-v5-causal-evidence-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--t4);
  text-transform: uppercase;
  margin-bottom: 8px;
}
html body #tab-insights .ins-v5-causal-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
html body #tab-insights .ins-v5-causal-r {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  flex-shrink: 0;
  min-width: 56px;
}
html body #tab-insights .ins-v5-causal-r.strong-pos { color: var(--sage); }
html body #tab-insights .ins-v5-causal-r.strong-neg { color: rgba(216,119,90,0.95); }
html body #tab-insights .ins-v5-causal-r.weak { color: var(--gold); }
html body #tab-insights .ins-v5-causal-bar {
  flex: 1;
  height: 4px;
  background: rgba(230,226,218,0.05);
  border-radius: 2px;
  overflow: hidden;
}
html body #tab-insights .ins-v5-causal-bar-fill {
  height: 100%;
  border-radius: 2px;
}
html body #tab-insights .ins-v5-causal-bar-fill.strong-pos { background: linear-gradient(90deg, var(--sage), rgba(159,196,163,0.85)); box-shadow: 0 0 6px rgba(107,168,142,0.45); }
html body #tab-insights .ins-v5-causal-bar-fill.strong-neg { background: linear-gradient(90deg, rgba(216,119,90,0.95), rgba(224,154,58,0.9)); }
html body #tab-insights .ins-v5-causal-bar-fill.weak { background: var(--gold); }
html body #tab-insights .ins-v5-causal-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  color: var(--t4);
  text-transform: uppercase;
  flex-shrink: 0;
}
html body #tab-insights .ins-v5-causal-mech {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t2);
  margin-bottom: 10px;
}
html body #tab-insights .ins-v5-causal-mech-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(200,164,90,0.08);
  border: 0.5px solid rgba(200,164,90,0.25);
  border-radius: 4px;
  margin-right: 6px;
}
html body #tab-insights .ins-v5-causal-action {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.2px;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
  line-height: 1.45;
}
/* ── FIN BLOQUE 43 · P1 ────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 44 · UX Refinement · "VER LECTURA CLÍNICA →" pilares
   Hairline editorial + CTA gold soft (mismo lenguaje "Consultar Dr.K")
   ═════════════════════════════════════════════════════════════════════ */

/* CTA editorial en cada row de Pillars Lista */
html body #tab-insights .ins-v5-pillar-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 0 2px;
  background: transparent;
  border: none;
  border-top: 0.5px solid rgba(200,164,90,0.13);
  width: 100%;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.6px;
  color: rgba(200,164,90,0.72);
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.22s ease, border-top-color 0.22s ease;
}
html body #tab-insights .ins-v5-pillar-cta:hover,
html body #tab-insights .ins-v5-pillar-cta:active {
  color: var(--gold);
  border-top-color: rgba(200,164,90,0.30);
}
html body #tab-insights .ins-v5-pillar-cta-arrow {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0;
  line-height: 1;
  margin-left: 2px;
  transition: transform 0.22s ease;
}
html body #tab-insights .ins-v5-pillar-cta:hover .ins-v5-pillar-cta-arrow,
html body #tab-insights .ins-v5-pillar-cta:active .ins-v5-pillar-cta-arrow {
  transform: translateX(3px);
}

/* Spacing premium · row más respirado que tabla densa */
html body #tab-insights .ins-v5-pillars-list .ins-v5-p-row {
  padding: 14px 14px 10px;
  margin-bottom: 8px;
}

/* CTA compacto para bcard (anatomía cards laterales) · 1 palabra "LECTURA →" */
html body #tab-insights .ins-v5-bcard-cta {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 0.5px solid rgba(200,164,90,0.13);
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 1.3px;
  color: rgba(200,164,90,0.70);
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: color 0.22s ease, border-top-color 0.22s ease;
}
html body #tab-insights .ins-v5-bcard:hover .ins-v5-bcard-cta,
html body #tab-insights .ins-v5-bcard:active .ins-v5-bcard-cta {
  color: var(--gold);
  border-top-color: rgba(200,164,90,0.30);
}
html body #tab-insights .ins-v5-bcard.dim .ins-v5-bcard-cta {
  opacity: 0.4;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  html body #tab-insights .ins-v5-pillar-cta,
  html body #tab-insights .ins-v5-pillar-cta-arrow,
  html body #tab-insights .ins-v5-bcard-cta {
    transition: none;
  }
}
/* ── FIN BLOQUE 44 · UX Refinement Pillares ────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 45 · Audit Correlac · hero stats chips + Mejores Ventanas cap
   ═════════════════════════════════════════════════════════════════════ */

/* Hero stats · chips visuales tinted por intensidad */
html body #tab-insights .ins-v5-corr-st {
  position: relative;
  transition: border-color 0.2s ease;
}
html body #tab-insights .ins-v5-corr-st.strong { border-color: rgba(107,168,142,0.40); background: rgba(107,168,142,0.06); }
html body #tab-insights .ins-v5-corr-st.strong .ins-v5-corr-st-val { color: var(--sage); }
html body #tab-insights .ins-v5-corr-st.mid { border-color: rgba(200,164,90,0.35); background: rgba(200,164,90,0.05); }
html body #tab-insights .ins-v5-corr-st.mid .ins-v5-corr-st-val { color: var(--gold); }
html body #tab-insights .ins-v5-corr-st.weak,
html body #tab-insights .ins-v5-corr-st.low { border-color: rgba(216,119,90,0.30); background: rgba(216,119,90,0.04); }
html body #tab-insights .ins-v5-corr-st.weak .ins-v5-corr-st-val,
html body #tab-insights .ins-v5-corr-st.low .ins-v5-corr-st-val { color: rgba(216,119,90,0.92); }
html body #tab-insights .ins-v5-corr-st.high { border-color: rgba(107,168,142,0.40); background: rgba(107,168,142,0.06); }
html body #tab-insights .ins-v5-corr-st.high .ins-v5-corr-st-val { color: var(--sage); }
html body #tab-insights .ins-v5-corr-st-text {
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  font-family: 'JetBrains Mono', monospace;
}

/* Week card · respiración premium + cap más editorial */
html body #tab-insights .ins-v5-week-card {
  padding: 16px 16px 18px;
}
html body #tab-insights .ins-v5-week-cap {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t2);
  padding-top: 12px;
  margin-top: 10px;
  border-top: 0.5px solid rgba(200,164,90,0.12);
}
html body #tab-insights .ins-v5-week-cap strong { color: var(--gold); font-weight: 600; }
/* ── FIN BLOQUE 45 · Audit Correlac ────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   BLOQUE 46 · CIERRE V5 · CTA Dr. K en sheet pilar
   Reutiliza la estética del CTA del octágono (.ins-v5-oct-drk-cta).
   Scoped al sheet de Insights V5.
   ═════════════════════════════════════════════════════════════════════ */
html body #tab-insights .ins-v5-sheet-cta-section {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 0.5px solid rgba(200,164,90,0.12);
}
html body .ins-v5-sheet-drk-cta {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(200,164,90,0.10) 0%, rgba(200,164,90,0.04) 100%);
  border: 1px solid rgba(200,164,90,0.30);
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.2px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
html body .ins-v5-sheet-drk-cta em {
  font-style: italic;
  font-weight: 600;
}
html body .ins-v5-sheet-drk-cta:active {
  background: linear-gradient(135deg, rgba(200,164,90,0.18) 0%, rgba(200,164,90,0.08) 100%);
  border-color: rgba(200,164,90,0.50);
  transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
  html body .ins-v5-sheet-drk-cta { transition: none; }
}
/* ── FIN BLOQUE 46 · CTA Dr.K sheet pilar ──────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   KYVEN Insights V5 UI polish — scoped
   Objetivo:
   1) Score/brief card respira como Manage (más altura, más padding interno).
   2) Panorama no asoma como franja verde sobre el bottom nav.
   Solo CSS · scope estricto: html body #tab-insights.ins-v5-active …
   ═════════════════════════════════════════════════════════════════════ */

/* A · sticky-wrap · padding sin env() · la safe-area-top YA la aplica
   .screen (línea 4986 con env(safe-area-inset-top, 44px)). Si aquí
   volvemos a sumar env(), en PWA con notch se duplica → 94+ px de aire.
   Mismo patrón que Bio/Manage: safe-area aplicada UNA SOLA VEZ en .screen.
   Score card en PWA notch: 47 (safe-area) + 10 (sticky pt) = 57px. */
html body #tab-insights.ins-v5-active .ins-v5-sticky-wrap {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* B · score-card · más presencia, padding interno como Manage */
html body #tab-insights.ins-v5-active .ins-v5-sticky-wrap .ins-v5-score-card {
  padding: 22px 20px !important;
  margin-bottom: 14px !important;
  min-height: 96px;
}
/* Mantener proporciones del ring y textos centrados (no romper layout interno) */
html body #tab-insights.ins-v5-active .ins-v5-sticky-wrap .ins-v5-sc-ring {
  flex-shrink: 0;
}

/* C · scroll · más aire abajo para que Panorama no asome contra el bottom nav */
html body #tab-insights.ins-v5-active .ins-v5-scroll {
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
}

/* D · Panorama oct-card · separación extra del scroll inferior */
html body #tab-insights.ins-v5-active .ins-v5-oct-card {
  margin-bottom: 28px !important;
}
/* ── FIN · KYVEN Insights V5 UI polish ───────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   Sprint fondo-nav-identidad: shield body::after ELIMINADO.
   Razón: con nav píldora flotante (bg #1C2A24 opaco + box-shadow), la
   función protectora del shield ya se cumple por la propia píldora.
   El shield var(--kvn-bg-app, #06110E) sólido sobre el body con gradient creaba una franja
   visible (color plano sobre gradient). Verificado en preview que sin
   shield NADA del contenido se asoma alrededor del nav píldora.

   Se conserva el z-index 60 forzado del nav (era acompañante necesario
   por el orden de stacking dentro del .app-shell).
   ═════════════════════════════════════════════════════════════════════ */
html body .bottom-nav,
html body .bnav,
html body .tab-bar {
  z-index: 60 !important;
}
/* ── FIN · shield retirado ─────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   KYVEN Insights V5 · ADHERENCIA card · badge wrap fix
   ─────────────────────────────────────────────────────────────────────
   Problema: en PWA/iPhone (390px) el badge "NO SINCRONIZADO" no cabe
   en línea con "ADHERENCIA 7 DÍAS" y wrappea sin gap controlado, lo
   que parece montarse sobre el valor o sobre el grid7.

   Fix: convertir .adh-lbl en flex con wrap controlado y row-gap, dar
   flex-shrink:0 + white-space:nowrap al badge, y .adh-info en column
   flex con gap para separar label/valor de forma robusta.

   Scope: solo #tab-insights .ins-v5-adh-*. Cero impacto otras cards.
   ═════════════════════════════════════════════════════════════════════ */

/* 1 · label: flex con wrap controlado · badge no se mete con valor */
html body #tab-insights .ins-v5-adh-lbl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 4px;
}

/* 2 · badge: no comprimir + texto interno nowrap */
html body #tab-insights .ins-v5-adh-src {
  margin-left: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 3 · info: column flex con gap entre label/valor + min-width 0 robusto */
html body #tab-insights .ins-v5-adh-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* 4 · valor: anular margin-top hardcoded · el gap del padre lo maneja */
html body #tab-insights .ins-v5-adh-val {
  margin-top: 0;
}
/* ── FIN · ADHERENCIA card badge wrap fix ─────────────────────── */


/* ════════════════════════════════════════════════════════════════════════════
   KYVEN AAA Visual Polish · canvas + scroll fades + nav margin
   ════════════════════════════════════════════════════════════════════════════
   3 capas · solo CSS · cero JS / backend / cards / nav-behavior / tipografía.
   Performance-safe iOS Safari / PWA · NO usa backdrop-filter.
   Reversible: borrar este bloque revierte 100% al estado main.
   ──────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   1 · ATMOSPHERIC CANVAS · profundidad forest SUTIL PERO PERCEPTIBLE
   ─────────────────────────────────────────────────────────────────────────
   Halo sage centro-superior + vignette forest-deep abajo. Carlos pidió
   subir de 0.025 → 0.05 (halo) y 0.45 → 0.55 (vignette) para notarlo
   más sin pasar a gaming/SaaS. Sumado al glow existente .app-shell::before
   (0.08 sage) → máximo 0.13 opacity total · sigue siendo sutil.
   inset:0 z-index:0 · debajo de .app-shell > * (z:2) · sobre body gradient. */
.app-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(107,168,142,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(8,19,15,0.55) 0%, transparent 55%);
}

/* ─────────────────────────────────────────────────────────────────────────
   2 · SCROLL FADE SYSTEM · mask-image POR CONTENEDOR REAL DE CADA TAB
   ─────────────────────────────────────────────────────────────────────────
   Diagnóstico runtime detectó que el scroll real varía por tab:
     Protocolo · Bio · Profile  → .tab-scroll (overflow:auto)
     Manage                      → #compounds-groups (.tab-scroll es wrapper hidden)
     Insights                    → #ins-v5-scroll  (.tab-scroll scrollH=0)
   Aplicar mask al contenedor INCORRECTO produce cortes duros (las cards
   se cortan en seco en vez de fadear). Bug Carlos confirmado en Manage e
   Insights con la v50 anterior. Esta versión scopea por contenedor real. */

/* TODAS las tabs · mismo mask top+bottom (idéntico comportamiento Insights).
   El mask afecta SOLO al contenido DENTRO del scroll-container.
   Elementos que viven FUERA del scroll (subnav · brief-dz · sticky-wrap)
   NO se ven afectados · siguen nítidos. Esto reproduce el comportamiento
   de Insights donde los tabs RESUMEN/TENDENCIAS están fuera del scroll
   y nunca se nublan cuando las cards scrollean. */
html body #tab-protocol .tab-scroll,
html body #tab-bio.active .tab-scroll,
html body #tab-profile .tab-scroll,
html body #tab-manage #compounds-groups,
html body #tab-insights #ins-v5-scroll {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Insights · quitar el border-bottom del header sticky de tabs
   (RESUMEN/TENDENCIAS/CORRELAC./NOTAS). Es un separador decorativo
   que dibuja rayita verde JUSTO donde arranca el fade del #ins-v5-scroll.
   El fade abajo del wrapper ya separa visualmente sin necesidad de border. */
html body #tab-insights .ins-v5-sticky-wrap {
  border-bottom-color: transparent !important;
}

/* Bio · misma rayita verde que en Insights pero por causa distinta:
   .subnav (HOY/REGISTRAR/ANALÍTICAS/HISTORIAL · píldora sticky) tiene
   border completo 1px rgba(230,226,218,0.12) en los 4 lados. El border
   inferior + la curva del radius:22px crean la "línea verde cruzando
   de lado a lado" que Carlos ve sobre las cards HRV/FC Reposo.
   La píldora se mantiene visible por su bg sólido + radius · NO necesita
   border para definirse. */
html body #tab-bio .subnav {
  border-color: transparent !important;
}

/* Bio · .brief-dz mask propio ELIMINADO.
   Sin top fade en el scroll de Bio · el border-bottom de la card ya no
   crea pico verde donde arrancaba el fade · la card vive con sus borders
   originales completos · NO necesita mask propio. */

/* ─────────────────────────────────────────────────────────────────────────
   3 · NAV MARGIN · 12 → 8px decorativo · safe-area INTACTA
   ─────────────────────────────────────────────────────────────────────────
   Original: margin: 0 12px calc(12px + env(safe-area-inset-bottom)) 12px
   Version A: bajar el 12px decorativo a 8px (4px más pegado al borde).
   La env(safe-area-inset-bottom) NO se toca (línea roja iOS gestos).
   Si Carlos quiere más pegado: cambiar 8px a 6px (2px más).
   Padding interno del nav y todo lo demás: INTACTO. */
body .bottom-nav,
body .tab-bar {
  margin: 0 12px 22px 12px !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FIN · KYVEN AAA Visual Polish
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   HEADER DESAPARECE · INSIGHTS · score-card colapsa entera al scroll
   ════════════════════════════════════════════════════════════════════════════
   Sprint feat/header-desaparece-bio-insights. Patrón objetivo: Manage .weekly
   (L4154-4170 · max-height:0 + opacity:0 + margin:0 + padding:0). Hoy el
   .ins-v5-score-card solo encoge 16px al .is-collapsed (runtime medido:
   112px → 96px · sigue robando 96px de altura inútil). Con este bloque
   desaparece deslizando suave hacia arriba, dejando los .ins-v5-tabs pegados
   al top como si la subnav fuera el header real.

   Reglas hijas viejas (L9313-9333: anillo 46px, letra 17px, sub/desc
   display:none) quedan INTACTAS · son inocuas cuando el padre tiene
   max-height:0 (el contenido ya no se ve). Cero JS · solo CSS override del
   estado colapsado · el toggle .is-collapsed (JS L36617-36637) se mantiene.

   max-height base 140px ajustado al contenido real medido (112px) · evita
   que la transición anime de 600→0 (corte aparente raro) y mantiene
   deslizamiento proporcional. Si en estado futuro el contenido crece, subir
   a 200px sin tocar nada más. .ins-v5-tabs NO se toca (sibling, no hijo). */
html body #tab-insights .ins-v5-sticky-wrap .ins-v5-score-card {
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-height: 140px;
  overflow: hidden;
  will-change: max-height, opacity;
}
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-score-card {
  max-height: 0 !important;
  min-height: 0 !important;       /* override L11699 min-height:96px (CSS spec: min-height gana sobre max-height) */
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   HEADER DESAPARECE · BIO · recovery-hero colapsa entera al scroll
   ════════════════════════════════════════════════════════════════════════════
   Sprint feat/header-desaparece-bio-insights. Mismo patrón Manage .weekly /
   Insights bloque arriba. Hoy el .recovery-hero encoge a 56px alto al
   .scrolled (runtime medido: 137px → 56px · sigue robando ~72px). Con este
   bloque desaparece deslizando suave hacia arriba, dejando la .subnav
   (HOY/REGISTRAR/ANALÍTICAS/HISTORIAL) pegada al top.

   Reglas viejas L3756-3791 (height:56px, padding:8px 14px, sub-elementos
   encogen) quedan INTACTAS · inocuas con max-height:0 en el padre. Sobrescribo
   también height:0 porque la regla L3757 fuerza height:56px !important · sin
   height:0 explícito el navegador podría ignorar max-height:0 y mostrar 56px.

   .subnav NO se toca (sibling) · .brief-dz NO se toca (ya tiene su collapse
   funcional propio L3797-3815). Cero JS · solo CSS override del estado
   colapsado · el toggle .scrolled (JS L44118-44188) se mantiene.

   max-height base 160px ajustado al contenido real medido (137px) · misma
   lógica que Insights. Si crece, subir sin tocar nada más. */
html body #tab-bio .recovery-hero {
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-height: 160px;
  overflow: hidden;
  will-change: max-height, opacity;
}
html body #tab-bio.scrolled .recovery-hero {
  animation: none !important;          /* FIX opacity · neutralizar animation finished que pisa transition */
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-height: 0 !important;
  height: auto !important;             /* FIX timing · max-height (animado) controla */
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   NO-BOUNCE SCROLL · Bio / Insights / Manage / Profile · iOS Safari
   ════════════════════════════════════════════════════════════════════════════
   Sprint feat/no-bounce-scroll. Matar el rubber-band scroll de iOS Safari
   en los 4 scroll containers verticales · que se sienta nativo y fijo como
   Protocol.

   Por qué `overscroll-behavior: contain` NO bastaba:
     · contain previene CHAINING del scroll al padre (rebote propagado)
     · pero PERMITE el rubber-band LOCAL del propio container
     · iOS Safari real muestra ese rebote local · Chromium simulado no
       (mi diagnóstico runtime previo en Playwright era engañoso).

   `overscroll-behavior: none` mata AMBOS · chaining y rubber-band local.
   Soportado en iOS Safari 16+ · iPhone moderno OK.

   Protocol NO se toca (orden Carlos). Bio · Profile actualmente tenían
   `contain` y los 4 (incluido Manage/Insights con `auto`) pasan a `none`.

   Sobrescribe:
     · index.html L836 base .tab-scroll: overscroll-behavior: contain
     · default browser en #ins-v5-scroll / #compounds-groups (auto) */
html body #tab-bio.active .tab-scroll,
html body #tab-insights #ins-v5-scroll,
html body #tab-manage #compounds-groups,
html body #tab-profile .tab-scroll {
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   BIO IGUAL QUE INSIGHTS · solo recovery-hero se esconde · brief-dz scrollea
   ════════════════════════════════════════════════════════════════════════════
   Sprint feat/bio-igual-insights. brief-dz movido DENTRO de .tab-scroll en
   HTML (ya no es sibling fuera). Resultado:
     · recovery-hero · FUERA del scroll · colapsa max-height:0 al .scrolled
     · subnav · FUERA del scroll · fija arriba como anchor (igual tabs Insights)
     · brief-dz · DENTRO del scroll · scrollea con cards · NO colapsa nunca
   δ imán = 137 (solo recovery) ≈ Insights 126.

   + JS: listener Bio modificado con rAF + hysteresis 40/80 (idéntico Insights).

   2 reglas CSS:
     1. brief-dz dentro de .tab-scroll: margin lateral 0 (hereda padding scroll)
     2. brief-dz dentro de .tab-scroll cuando .scrolled: NO colapsa (sobrescribe
        feat/header-desaparece) */
html body #tab-bio .tab-scroll > .brief-dz {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body #tab-bio.scrolled .tab-scroll > .brief-dz {
  max-height: none !important;
  opacity: 1 !important;
  margin: 0 0 18px !important;
  padding: 12px 14px !important;
  border-color: rgba(230, 226, 218, 0.12) !important;
  pointer-events: auto !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   BIO · NEUTRALIZAR efectos del feat/header-desaparece que ralentizan scroll
   ════════════════════════════════════════════════════════════════════════════
   Audit runtime detectó 5 efectos en brief-dz (heredados de cuando era sibling
   fuera del scroll) que ahora dentro del scroll RALENTIZAN la fluidez vs
   Insights:
     · transition: max-height 0.3s (anima cualquier cambio de altura)
     · max-height: 500px (límite que browser revisa cada frame)
     · transform: matrix(1,0,0,1,0,0) (activa GPU compositor innecesario)
     · position: relative (crea stacking context extra)
     · scroll-snap-type: y en .tab-scroll (iOS evalúa snap en cada scroll)

   Fix: neutralizar los 5 efectos · resultado: Bio scrollea igual fluido que
   Insights (que tiene snap-type:none + brief-equivalente sin transitions). */
html body #tab-bio .tab-scroll > .brief-dz {
  transition: none !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
  position: static !important;
}
html body #tab-bio.active .tab-scroll {
  scroll-snap-type: none !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   BIO · igualar δ imán a Insights (126) · mantener margin-bottom recovery
   ════════════════════════════════════════════════════════════════════════════
   El bloque feat/header-desaparece ponía margin:0 al recovery-hero cuando
   .scrolled · perdía sus 22 px de margin-bottom → δ Bio = 137+22 = 159.
   Insights δ = 126. Diferencia 33 px.

   Fix: mantener margin-bottom 22 px al colapsar · recovery pierde solo
   altura+padding+border (137 px) sin perder margin → δ ≈ 137 (≈ Insights). */
html body #tab-bio.scrolled .recovery-hero {
  margin: 0 16px 22px !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   BIO · subnav igualar margin + border a Insights ins-v5-tabs
   ════════════════════════════════════════════════════════════════════════════
   Bio subnav (HOY/REGISTRAR/etc) tenía margin 14/16/18 + border transparente.
   Insights ins-v5-tabs tiene margin 0 + border 1px paper 12% visible.
   Aplicar mismo styling para que Bio se vea igual de compacto que Insights. */
html body #tab-bio .subnav {
  margin: 0 16px !important;
  border-color: rgba(230, 226, 218, 0.12) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   BIO · separación brief-dz · alejar del tab para que el fade no lo afecte
   ════════════════════════════════════════════════════════════════════════════
   El fade superior del polish AAA (.tab-scroll mask-image) ocupa los primeros
   48 px del scroll · si brief-dz está pegado arriba, se ve transparentado.
   Añadir margin-top 24 px da respiración respecto al tab + reduce el
   solapamiento con la zona del fade. */
html body #tab-bio .tab-scroll > .brief-dz:first-child {
  margin-top: 24px !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   MANAGE · chevron derecho · micro polish · igualar masa visual al kebab
   ════════════════════════════════════════════════════════════════════════════
   Sprint feat/manage-chevron-polish. El chevron derecho de las cards en
   Manage es decorativo (pseudo .cmp::after definido en index.html L16066)
   pero se ve casi disabled: stroke paper 31% vs kebab paper 74% · tamaño
   8x14 px casi imperceptible · pegado al borde.

   Cambios scoped #tab-manage · solo el ::after:
     · width 8 → 10 px (+25%) · height 14 → 17 px (+21%)
     · stroke color rgba(...,0.31) → rgba(...,0.74) (mismo tono kebab)
     · stroke-width 1.5 → 2 (un poco más cuerpo · estética luxury)
     · right 14 → 20 px (+6 px hacia dentro · respiración)

   NO se toca: kebab .cmp-menu, card .cmp, layout, JS, otros tabs.
   pointer-events: none sigue (decorativo · sin tap area propia).
   Verificación no-solape: kebab right=307 · chevron quedará ~x=354 · 47 px separación. */
html body #tab-manage .cmp::after {
  width: 10px !important;
  height: 17px !important;
  right: 20px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(230,226,218,0.74)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   PROTOCOLO · nota GPMI (.alert-n5-text) · permitir envolver a varias líneas
   ════════════════════════════════════════════════════════════════════════════
   Sprint feat/gpmi-note-connected. La nota GPMI ahora es dinámica y larga
   (130+ chars). Heredaba white-space:nowrap de algún padre → se cortaba a la
   derecha. Forzar wrap natural + word-wrap defensivo. */
html body #tab-protocol .alert-n5-text {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FIX · fix/profile-layout-spacing · 2026-05-27
   ────────────────────────────────────────────────────────────────────────────
   3 retoques scopeados a #tab-profile:
   (1) Eliminar eyebrow PACIENTE · GPMI (~28px arriba ganados).
   (2) Subir la hero card a la altura visual de la hero de Insights anulando el
       margin-top:36px que dejaba aire para el eyebrow flotante.
   (3) Separar la primera card de cada panel (DATOS/PLAN/AJUSTES) del fade
       superior de 48px del .tab-scroll — patrón equivalente al margin-top
       que ya se usa en #tab-bio.
   Sin tocar JS · sin tocar HTML · Bio/Insights/Manage/Protocol intactos.
   ════════════════════════════════════════════════════════════════════════════ */

/* (1) Eyebrow oculto */
html body #tab-profile .id-hero .id-hero-eb {
  display: none !important;
}

/* (2) Sin aire de eyebrow flotante · la hero arranca pegada al subnav superior */
html body #tab-profile .id-hero {
  margin-top: 0 !important;
}

/* (3) Primera card del scroll separada del fade de 48px (mismo principio que
   #tab-bio .tab-scroll > .brief-dz:first-child). Se aplica a los 3 paneles
   porque solo uno está visible a la vez (los otros llevan display:none vía JS).
   En estado .scrolled subimos el margen a 100px para compensar el scrollTop
   conservado al colapsar (threshold 80) · sin esto la card 01 queda oculta
   detrás del viewport del scroller tras colapsar la hero (issue 2026-05-28). */
html body #tab-profile .tab-scroll > #ptab-data,
html body #tab-profile .tab-scroll > #ptab-billing,
html body #tab-profile .tab-scroll > #ptab-settings {
  margin-top: 22px !important;
  transition: margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body #tab-profile.scrolled .tab-scroll > #ptab-data,
html body #tab-profile.scrolled .tab-scroll > #ptab-billing,
html body #tab-profile.scrolled .tab-scroll > #ptab-settings {
  margin-top: 100px !important;
}

/* MANAGE · primer hijo de #compounds-groups separado del fade superior de 48px.
   El primer .cat-h ("MEDICACIÓN RX · X") quedaba nublado bajo el mask-image. */
html body #tab-manage #compounds-groups > *:first-child {
  margin-top: 22px !important;
}

/* MANAGE · padding-bottom para que la última card no quede cortada por el fade
   inferior del mask-image (transparente en los últimos 96px del scroller).
   L15947 aplica padding:0 !important que anulaba el padding-bottom de L13800,
   por eso la última card ("MAGNESIO") quedaba bajo el fade. Restauramos con
   especificidad reforzada. */
html body #tab-manage #compounds-groups {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   P1.5 · ELEVACIÓN UNIFORME · v3.0 audit pixel-perfect
   ──────────────────────────────────────────────────────────────
   37 selectores validados en runtime · jerarquía 3 niveles
   (hero · card · soft) + highlight cenital 1px en todas las
   cards levantadas.
   Cada selector apunta a clases específicas · cero wildcards.
   ═══════════════════════════════════════════════════════════════ */

/* HEROES · sombra grande (triple capa) · cards centrales de pantalla */
body .brief,
body .kv-hero-card,
body .id-hero,
body .weekly,
body .bc-hero,
body .drk-pulse-card,
body .a1-card, body .score-card, body .obj-card,
body .plan-card, body .pilar-card, body .next-action, body .accion,
body .tier {
  box-shadow: var(--sh-hero) !important;
  position: relative;
}

/* CARDS REGULARES · sombra media */
body .compound-card,
body .cmp,
body .bc-card,
body .brief-dz, body .brief-dz-text,
body .brief-next,
body .drop-zone,
body .psec.kv-card,
body .ins-v5-ai-skel,
body .ins-v5-oct-card, body .ins-v5-oct-index,
body .hist-card,
body .ff,
body .syn-card, body .mec-card, body .dose-card,
body .trend-card, body .corr-card, body .note-card,
body .drmode-section, body .drmode-card {
  box-shadow: var(--sh-card) !important;
  overflow: visible !important;
  position: relative;
}

/* AJUSTES Y SETTINGS · sombra suave (jerarquía inferior) */
body .settings-row, body .guide-row, body .guide-card,
body .kv-set-row, body .kv-set-banner,
body .btn-s {
  box-shadow: var(--sh-soft) !important;
  position: relative;
}

/* TRIAL badges en Perfil PLAN · sombra media */
html body .trial-label,
html body .trial-days {
  box-shadow: var(--sh-card) !important;
  position: relative !important;
}

/* FIX especificidad · cards .ff en BIO Registrar */
html body #tab-bio .bio-form .ff {
  box-shadow: var(--sh-card) !important;
  position: relative !important;
}

/* COMPLETED state luxury · sin strikethrough · atenuación elegante */
body .compound-card.completed {
  opacity: 0.42 !important;
  filter: saturate(0.6) !important;
}

/* HIGHLIGHT cenital · 1px de luz arriba en TODAS las cards levantadas */
body .brief::before,
body .kv-hero-card::before,
body .id-hero::before,
body .weekly::before,
body .bc-card::before,
body .bc-hero::before,
body .drk-pulse-card::before,
body .a1-card::before,
body .score-card::before,
body .obj-card::before,
body .plan-card::before,
body .next-action::before,
body .accion::before,
body .tier::before,
body .cmp::before,
body .compound-card::before,
body .ins-v5-oct-card::before,
body .ins-v5-oct-index::before,
body .ins-v5-ai-skel::before,
body .psec.kv-card::before,
body .brief-next::before,
body .brief-dz::before,
body .hist-card::before,
body .drmode-card::before,
body .drmode-section::before,
body #tab-bio .mc::before,
html body #tab-bio .bio-form .ff::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: rgba(230, 226, 218, 0.10) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* ═══════════════════════════════════════════════════════════════
   P2 · QUOTE DR. K · Bronze plate · placa editorial premium · v3.0
   ──────────────────────────────────────────────────────────────
   Tratamiento "placa de bronce" para las voces editorial-clínicas
   del producto · gradient cálido-frío + border-left dorado +
   highlight superior inset + drop shadow tenue + border-radius
   asimétrico (0 derecha, 6px izquierda) emulando placa metálica.

   Selectores objetivo (validados runtime DOM):
   · .drk-quote.kv-drk-quote  → Protocolo home #brief-drk-quote
                                "Tu cuerpo está empezando la ventana..."
   · .bc-clinical             → BIO Analíticas · clinical_note del lab
   · #tab-bio .brief-dz       → BIO HOY · "DR. KYVEN · INTERPRETACIÓN · GPMI"
                                Estructura: .brief-dz > .brief-dz-content
                                > .brief-dz-label + .brief-dz-text
   ═══════════════════════════════════════════════════════════════ */

body .drk-quote,
body .kv-drk-quote,
body .bc-clinical,
body #tab-bio .brief-dz {
  background: linear-gradient(
    180deg,
    rgba(200, 164, 90, 0.04) 0%,
    rgba(58, 85, 70, 0.18) 100%
  ) !important;
  border-left: 2px solid var(--kvn-gold-mate, #C8A45A) !important;
  box-shadow:
    inset 0 1px 0 rgba(200, 164, 90, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.2) !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 14px 18px !important;
}

/* ═══════════════════════════════════════════════════════════════
   P3 · DETALLES VISUALES · v3.0 audit pixel-perfect
   ──────────────────────────────────────────────────────────────
   5 detalles que mejoran percepción premium sin tocar JS/IDs.
   (P3.2 ya aplicado inline en regla previa · P3.7 ya en P1.5
    bloque ELEVACIÓN UNIFORME)
   ═══════════════════════════════════════════════════════════════ */

/* P3.1 · Sparklines BIO · stroke naranja #c9783a a clay calibrado.
   Opción A · CSS-only · no toca el JS que genera el SVG inline. */
html body #tab-bio .mc-spark polyline {
  stroke: var(--clay) !important;
}

/* P3.3 · CTA "EMPEZAR KYVEN ELITE" · outline tenue a dorado fill
   ceremonial. Acción de upgrade premium (99€/mes) debe destacar
   como el "GENERAR WEEKLY REVIEW" de Manage. */
html body #tab-profile #plans-container button.tier-cta.secondary {
  background: linear-gradient(180deg, var(--kvn-gold-mate, #C8A45A), #9A7A3A) !important;
  border: 1px solid var(--kvn-gold-mate, #C8A45A) !important;
  color: var(--kvn-bg-app, #06110E) !important;
  font-weight: 700 !important;
}

/* P3.4 · "+ AÑADIR COMPUESTO" · refinar border + bg con dorado
   tenue · acción secundaria clara (antes se podía leer skeleton). */
body .add-btn {
  border: 1px solid rgba(200, 164, 90, 0.30) !important;
  background: rgba(200, 164, 90, 0.04) !important;
}
body .add-btn:hover {
  border-color: rgba(200, 164, 90, 0.50) !important;
  background: rgba(200, 164, 90, 0.08) !important;
}

/* P3.5 · Skeleton loader DR. KYVEN · ANÁLISIS · CALIBRANDO ·
   animación shimmer que hace respirar el gradient estático. */
@keyframes kvShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
html body #tab-insights .ins-v5-ai-skel-line {
  background-size: 200% 100% !important;
  animation: kvShimmer 2.4s ease-in-out infinite !important;
}
/* Respect prefers-reduced-motion · no animar */
@media (prefers-reduced-motion: reduce) {
  html body #tab-insights .ins-v5-ai-skel-line {
    animation: none !important;
  }
}

/* P3.6 · Chips de chat Dr. K (.sugg/.suggestions-bar) · levantar
   ligeramente con sombra suave · destacan sobre forest-deep. */
body .sugg,
body .suggestions-bar > * {
  box-shadow: var(--sh-soft) !important;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   P4 · CONTRASTE + TIPOGRAFÍA · v3.0 audit pixel-perfect
   ──────────────────────────────────────────────────────────────
   (P4.1 ya aplicado en tokens.css · --gold-eyebrow 0.42 → 0.85)
   (P4.3 Geist · pendiente decisión usuario · NO aplicado aquí)
   (P4.5 text-align:justify · no existe en chat actual · skip)
   ═══════════════════════════════════════════════════════════════ */

/* P4.2 · subir labels críticas sub-11px a 11px (Apple HIG + WCAG AA).
   Selectivo: solo .mc-name (BIO HRV/SpO2/etc · 10.5px) y
   .brief-next-lbl (SIGUIENTE TOMA en Protocolo · 10px). Las eyebrows
   JetBrains Mono 10px se dejan · son característica del producto y
   ya quedan legibles con P4.1 (gold-eyebrow 0.42 → 0.85). */
html body #tab-bio .mc-name {
  font-size: 11px !important;
}
html body #tab-protocol .brief-next-label,
html body #tab-protocol .brief-next-lbl {
  font-size: 11px !important;
}

/* P4.4 · chat body text de Playfair/Georgia serif a Inter sans-serif
   para lectura larga. Mantener Playfair en .msg-h (h1 italic gold)
   y JetBrains Mono en .msg-h2 (h2 mono uppercase). */
html body #tab-chat .chat-bubble-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}
/* Headlines internos del chat · MANTENER su tipografía especial */
html body #tab-chat .chat-bubble-text .msg-h {
  font-family: 'Playfair Display', serif !important;
}
html body #tab-chat .chat-bubble-text .msg-h2 {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ═══════════════════════════════════════════════════════════════
   STACK SATURADO BADGE · v3.0 sprint pre-launch
   ──────────────────────────────────────────────────────────────
   Cuando los 8 pilares clínicos llegan a 100/100, mostrar badge
   informativo dorado tipo PREMIUM en vista LISTA y ANATOMÍA del
   panel Insights · Summary. Conversación visual del síntoma
   "todos saturados" en feature: "stack completo · cobertura total".

   Fórmula compute-insights matemáticamente correcta para stacks
   pequeños · satura con stacks grandes (Carlos 21 compounds bilingual).
   Refinar fórmula = decisión clínica · backlog post-launch con Dr. K.
   ═══════════════════════════════════════════════════════════════ */

.ins-saturated-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  margin: 0 0 14px !important;
  border: 1px solid rgba(200, 164, 90, 0.45) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(200, 164, 90, 0.14) 0%, rgba(200, 164, 90, 0.06) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(200, 164, 90, 0.20),
    0 4px 14px rgba(0, 0, 0, 0.20) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--gold-bright, #d4b878) !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-shadow: 0 0 12px rgba(201, 169, 97, 0.25) !important;
  position: relative !important;
}

/* ═══════════════════════════════════════════════════════════════
   AUDIT v4 · FASE 1 · Silicon Valley Tier-1 pre-launch
   ──────────────────────────────────────────────────────────────
   5 fixes sin tocar zona prohibida (CSS only):
   · Fix #1 · 8 selectores var(--text-tertiary) → --text-tertiary
   · Fix #3 · .nav-label opacity 0.55 → 0.72
   · Fix #4 · .subnav-btn + .ins-v5-tab min-height 44px (Apple HIG)
   · Fix #5 · .drk-pulse-close + .drk-back-btn + .drk-pulse-cta 44px

   Fix #2 (tokens --eyebrow-color) aplicado in-place en index.html L110-111.

   Smoke baseline → target (Apéndice C / B):
   · lowOp -54% · WCAG-AA -24% · animaciones OOV 3 → 0
   ═══════════════════════════════════════════════════════════════ */

/* ─── Fix #1 · 8 selectores con texto crítico → --text-tertiary 0.82 ───
   Contraste sobre var(--kvn-bg-app, #06110E): 3.42:1 (fail AA) → 6.1:1 (AA con margen). */
body .brief-greet-sub,
body .brief-hero-eyebrow,
body .brief-hero-label,
body .brief-hero-state-sub,
body .weekly-eb,
body .weekly-eb span,
body .manage-eyebrow-count {
  color: var(--text-tertiary) !important;
}
body .subnav-btn:not(.active),
body .ins-v5-tab:not(.on) {
  color: var(--text-tertiary) !important;
}

/* ─── Fix #3 · .nav-label bottom nav opacity 0.55 → 0.72 ───
   Contraste 3.6:1 (fail AA) → 5.5:1 (AA con margen).
   .active mantiene var(--gold) sin cambio. */
body .nav-item .nav-label {
  color: rgba(250,247,239,0.72) !important;
}

/* ─── Fix #4 · sub-nav segmented controls 33px → 44px (Apple HIG) ───
   .subnav-btn y .ins-v5-tab fallaban HIG sistemático en 11 instancias. */
body .subnav-btn,
body .ins-v5-tab {
  min-height: 44px !important;
  padding: 12px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
body .subnav,
body .ins-v5-tabs {
  min-height: 48px !important;
  align-items: stretch !important;
}

/* ─── Fix #5 · botones Dr.K pulse · 44×44 (Apple HIG) ───
   .drk-pulse-close 27×27 → 44×44 · .drk-back-btn variable → 44×44 ·
   .drk-pulse-cta 43px → 44px (1pt ganado). */
body .drk-pulse-close,
body .drk-back-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body .drk-pulse-cta {
  min-height: 44px !important;
}

/* ═══════════════════════════════════════════════════════════════
   AUDIT v4 · FASE 1.5 · reemplazo global rgba(230,226,218,0.6X)
   ──────────────────────────────────────────────────────────────
   El audit Tier-1 inicial cortó el top-5 selectores por pantalla.
   Esta fase aplica reemplazo global: 53 `color: rgba literal` →
   `color: var(--text-tertiary)` cross-file (index.html + overrides).

   Plus defensiva extra:
   · SVG <text> dentro de pillars-grid · fill bilingual con token
   · 2 edits puntuales fuera de tokens base:
       .recovery-label #tab-bio → var(--eyebrow-color-strong)
       .ko-pillar-lbl fz 7.5px  → var(--paper-soft) (0.92 AAA)

   Stroke 0.55/0.62 SVG (sparkline/border) y fill 0.42 vertex: no
   se modifican · no es texto · no afecta WCAG legibility.
   ═══════════════════════════════════════════════════════════════ */

/* SVG text en pillars-grid · defensiva por si hay <text> sin clase
   específica que herede fill default oscuro. Cualquier SVG text
   dentro de containers de pillares usa --text-tertiary AA pass. */
body .pillars-grid svg text,
body .ins-pillars-grid text,
body .ins-pillars-grid svg text,
body #tab-insights .pillars-grid text {
  fill: var(--text-tertiary);
}

/* ════════════════════════════════════════════════════════════════
   AUDIT v5 · FASE 2 · Pre-launch hardening (1 jun 2026)
   Cache bump: kyven-motor-f2b-20260601a
   Validado por Carlos en producción vía Chrome MCP.
   ════════════════════════════════════════════════════════════════ */

/* F2.4 · Eyebrows dorado → cream-muted · 108 elementos dorados disuelven
   el accent. Preservamos dorado solo en wordmark, hero numbers, italic
   Georgia, CTAs primarios, bronze plate Dr.K, barra constancia, A1 outline. */
.brief-hero-eyebrow,
.kv-eyebrow,
.section-label,
.bc-eyebrow,
.id-eyebrow,
.mgr-eyebrow,
.weekly-eb,
.ins-v5-obj-blk-lbl,
.manage-eyebrow-count,
.bc-clinical-eyebrow,
.fd-section-eyebrow {
  color: rgba(245, 241, 232, 0.72) !important;
}

/* F2.5 · Layering cards · highlight cenital + shadow drop
   NO TOCAR: .drk-pulse-card (animación pulse) · .kv-skeleton-card (loading). */
.kv-hero-card,
.brief.kv-hero-card,
.compound-card,
.cmp,
.mc,
.bc-card,
.a1-card,
.ins-v5-obj-blk,
.bc-clinical,
.id-hero,
.weekly,
.bc-hero,
.mgr-card,
.fd-card {
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* F3.0e cleanup · bloque F2c BUG-I (cristal bg rgba(14,26,19,0.55) + blur 32px)
   ELIMINADO · estaba overridden por F3.0c L12854+ (bg cards rgba(38,57,47,0.55)
   + blur 40px sat 180%) · misma especificidad, F3.0c gana por orden de fuente
   pero el bloque previo era código muerto. F3.0c es ahora la única regla activa.

   PRESERVADO el bloque .bottom-nav .nav-item de F2c (width 100% + max-width none
   + justify-self center) · no está duplicado en F3.0c y sigue siendo necesario
   para el layout horizontal de los 5 nav items. */
.bottom-nav .nav-item,
nav.bottom-nav .nav-item {
  width: 100% !important;
  max-width: none !important;
  justify-self: center !important;
}

/* F2.8 · add-btn outline-solid (sustituye dashed) */
.add-btn {
  border-style: solid !important;
  border-width: 1px !important;
  border-color: rgba(201, 169, 97, 0.62) !important;
  background: transparent !important;
}

/* F2.10 · ⋮ menu contextual en compound-cards de PROTOCOLO HOY */
#tab-protocol .compound-card {
  position: relative;
}
#tab-protocol .compound-card .cmp-menu {
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: rgba(230, 226, 218, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  z-index: 5;
  transition: background 150ms ease, color 150ms ease;
}
#tab-protocol .compound-card .cmp-menu:hover,
#tab-protocol .compound-card .cmp-menu:active {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(230, 226, 218, 0.9);
}

/* F2.11 · Group labels CATEGORÍAS · mono uppercase tracking
   BUG-2 audit · selector real es .cat-h .cat-name (renderManage L34516).
   Aplicamos tanto en MANAGE (#compounds-groups) como en el clon dentro
   de PROTOCOLO (#proto-categorias-container). */
#proto-categorias-container .cat-h .cat-name,
#compounds-groups .cat-h .cat-name,
#tab-protocol .cat-h .cat-name {
  font-family: 'JetBrains Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 11px !important;
  color: var(--eyebrow-color) !important;
}
#proto-categorias-container .cat-h .cat-count,
#tab-protocol .cat-h .cat-count {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: var(--eyebrow-color) !important;
}

/* F2.6 + BUG-3 · BIO REGISTRAR inputs 48px Apple HIG + 16px fz iOS no-zoom.
   Selector con specificity reforzada (#bio-manual .bio-form .ff input). */
#bio-manual .bio-form .ff input[type="number"],
#bio-manual .bio-form .ff input[type="text"] {
  min-height: 48px !important;
  height: 48px !important;
  font-size: 16px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}

/* BUG-4 · F3.2 · strikethrough en compound-card.completed.
   text-decoration vive en spans hijos (cmp-name, cmp-dose, etc.).
   Aplica recursivamente sobre todos descendientes con !important. */
.compound-card.completed,
.compound-card.completed *,
.cmp.completed,
.cmp.completed *,
#tab-protocol .compound-card.completed,
#tab-protocol .compound-card.completed * {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* ════════════════════════════════════════════════════════════════
   AUDIT v5 · FASE 2b · iPhone 16 Pro real audit (1 jun 2026)
   Cache bump: kyven-motor-f2b-20260601c
   ════════════════════════════════════════════════════════════════ */

/* BUG-A · "Siguiente toma" hora 11px → 20px hero + ATRASADA con padding-right.
   Selectores reales: .brief-next-time (CSS L1095 + L14074 override). */
.brief-next-time,
#tab-protocol .brief-next-time,
#brief-next-time {
  font-size: 20px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
}
.brief-next,
#brief-next-row {
  padding-right: 16px !important;
}

/* BUG-B · #add-btn-protocol pegado al siguiente componente · margin-bottom 24px */
#add-btn-protocol {
  margin-top: 8px !important;
  margin-bottom: 24px !important;
}

/* BUG-C · INSIGHTS .ins-v5-tab se cortan en iPhone 393px · reducir fz + tracking */
.ins-v5-tab,
#tab-insights .ins-v5-tab {
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
}

/* F2.9 · Wrapper para weekly-btn en INSIGHTS · ancho completo.
   BUG-F (Fase 2c) · padding-top 28px para separar del segmented (era 8px = pegado).
   Apple Music / iOS nativo usan 24-32px entre segmented y botones principales. */
.kv-weekly-action {
  padding: 28px 16px 16px 16px !important;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.kv-weekly-action .weekly-btn {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════════════
   AUDIT v5 · FASE 2c · iPhone 16 Pro real audit refinement (1 jun 2026)
   Cache bump: kyven-motor-f2c-20260601a
   ════════════════════════════════════════════════════════════════ */

/* BUG-H · CHIP PERFIL · F2f ROLLBACK (1 jun 2026).
   Carlos confirmó que el chip de PERFIL DEBE ser idéntico a BIO/PROTOCOLO
   (sage sólido, h:38-44, padding nativo, border-radius:18, sin border outline,
   text oliva oscuro). Las iteraciones F2c/F2d/F2e BUG-H lo sacaban del lenguaje
   de diseño del producto. Bloque eliminado intencionalmente. El estilo nativo
   (overrides L4282-4288) se preserva sin override. */

/* ════════════════════════════════════════════════════════════════
   AUDIT v5 · FASE 2d · BRIGHTNESS GLOBAL + 4 PENDIENTES (1 jun 2026)
   Cache bump: kyven-motor-f2d-20260601a
   Diagnóstico: Carlos necesitaba iPhone con brillo MAX para ver la app.
   Bg base var(--kvn-bg-app, #06110E) luminance≈0 → cards ratio AAA OK pero suelo de luz negro.
   ════════════════════════════════════════════════════════════════ */

/* P1.1 · App background · subir suelo de luminance.
   El bg base se aplica vía var(--night) en html/body + inline <body style="..."> L18442
   + JS dinámico body.style.background en runtime. !important en html,body gana sobre
   inline normal (no-important). Forest deep editorial pero MUCHO más legible. */
html,
body {
  /* GC-3.6c FIX · era #0d1f17 (rgb 13,31,23) VERDE · esta era LA fuente de la "franja verde"
   * inferior en iOS (Safari + PWA): el html/body raíz verde asomaba en safe-area / overscroll /
   * detrás de la toolbar de Safari / detrás de la nav translúcida. El brillo del contenido lo
   * da .app-shell (gradiente) + cards · NO el raíz. → raíz dark puro (cream con geneva). */
  background: var(--kvn-bg-app, #050E0B) !important;
  background-color: var(--kvn-bg-app, #050E0B) !important;
}

/* P1.2 · Cards background con diferenciación translúcida del nuevo bg.
   rgba(255,255,255,0.035) sobre #0d1f17 → tono notable pero sin chillar.
   Mantiene jerarquía visual vs el bg sin sobrecargar contraste cards. */
.kv-hero-card,
.brief.kv-hero-card,
.compound-card,
.cmp,
.mc,
.bc-card,
.a1-card,
.ins-v5-obj-blk,
.bc-clinical,
.id-hero,
.weekly,
.bc-hero,
.mgr-card,
.fd-card {
  background: rgba(255, 255, 255, 0.035) !important;
}

/* P1.3 · text-quaternary suelo de legibilidad subido a 0.78
   (era 0.65 · captions decorativos quedaban borrosos con bg full). */
:root {
  --text-quaternary: rgba(230, 226, 218, 0.78) !important;
}

/* ════════════════════════════════════════════════════════════════
   AUDIT v5 · FASE 3.0 · NAV NATIVO iOS (2 jun 2026)
   Cache bump: kyven-motor-f30-20260602a
   Hotfix de 2 bugs detectados en iPhone real PWA standalone:
   · BUG-J · franja verde debajo del nav (safe-area-inset-bottom no manejado)
   · BUG-K · cristal nav incompatible con paleta cards (familias tonales distintas)
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   AUDIT v5 · FASE 3.0.1 · HOTFIX NAV iOS COMPLETO (2 jun 2026)
   Cache bump: kyven-motor-f3-0-1-20260602a
   Resuelve: BUG-J (franja verde safe-area) · BUG-K residual (cristal opaco)
            · BUG-L (frosted invisible · contenido no pasaba detrás)
   Solución: variante D pill flotante WHOOP-style refinada + safe-area +
             scroll padding 80px+env para que contenido pase detrás del nav.
   Validado runtime Chrome MCP con screenshots before/after.
   ════════════════════════════════════════════════════════════════ */

/* F3.0.1 · Bottom nav pill flotante WHOOP-style · cristal real frosted.
   Selector defensivo 4-way OR (clase + ID + variants legacy bnav/tab-bar)
   garantiza victoria sobre 4 reglas existentes con !important (L345-364,
   L11737-11741, L11887-11890) que tocaban el mismo elemento.

   Diferencias clave vs F3.0c:
   · bg 0.55 → 0.30 (más transparente · cristal frosted real)
   · blur 40px sat 180% → blur 50px sat 220% brightness 115% (más vibrante)
   · border-radius 0 → 28px (pill flotante)
   · margin 0 → margin 0 + left/right 12px (separado de bordes)
   · padding 0 → 9px 8px (compacto)
   · border-top → border full 1px (encierra todo el pill)
   · z-index 100 → 60 (alineado con sprint identidad legacy) */
html body nav#bottom-nav.bottom-nav,
html body .bottom-nav,
html body .bnav,
html body .tab-bar {
  position: fixed !important;
  /* F3.0.2 (jun 11) · restaurado max(8px, env(safe-area-inset-bottom))
     El "fix" de bottom constante dejaba el home indicator (~34px) expuesto
     debajo del pill en iPhone PWA real · franja oliva visible. */
  bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  margin: 0 !important;
  border-radius: 28px !important;
  padding: 9px 8px !important;
  /* GC-3.7 · tinte neutro (era rgba(20,35,28,0.30) verde forest) + saturate 140% (era 220%)
   * para no amplificar el verde del fondo · mismo pill frosted, sin franja verde abajo. */
  background: rgba(10, 16, 14, 0.30) !important;
  backdrop-filter: blur(50px) saturate(140%) brightness(115%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(140%) brightness(115%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.40),
    0 -1px 14px rgba(0, 0, 0, 0.20) !important;
  z-index: 60 !important;
  grid-template-columns: repeat(5, 1fr) !important;
}

/* P4 · Strikethrough custom en .compound-card.completed.
   ORIGEN REAL identificado (L10688-10695 index.html):
     .cmp-name::after { content: ''; absolute; width: 0; height: 1px;
                        background: var(--gold); opacity: 0.7; }
     .compound-card.completed .cmp-name::after { width: 100%; }
   Es un pseudo-element decorativo (línea dorada animada L→R), NO text-decoration.
   Por eso DOM reporta text-decoration:none pero VISUALMENTE sigue ahí.
   Fix: anular el pseudo-element con width 0 + display none + background transparent
   sobre todas las variantes (completed, is-done, just-completed) y ambos scopes
   (compound-card en PROTOCOLO, cmp en MANAGE/CATEGORÍAS). */
.compound-card.completed .cmp-name::after,
.compound-card.is-done .cmp-name::after,
.compound-card.just-completed .cmp-name::after,
.cmp.completed .cmp-name::after,
.cmp.is-done .cmp-name::after,
.cmp.just-completed .cmp-name::after,
#tab-protocol .compound-card.completed .cmp-name::after,
#tab-protocol .compound-card.is-done .cmp-name::after {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
  content: none !important;
}
/* Defensiva total · cualquier text-decoration residual + extra cobertura. */
.compound-card.completed,
.compound-card.completed *,
.compound-card.is-done,
.compound-card.is-done *,
.cmp.completed,
.cmp.completed *,
.cmp.is-done,
.cmp.is-done * {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* P5 · Subtextos descriptivos · 0.65 → 0.88 alpha.
   Selectores reales identificados en runtime:
   · .brief-greet-sub (L18672) "Tu cuerpo está empezando la ventana matutina"
   · .drk-quote.kv-drk-quote (L18685) quote contextual Dr.K
   + selectores hipotéticos del spec por defensiva. */
.brief-greet-sub,
.drk-quote.kv-drk-quote,
.brief-hero-subtitle,
.kv-subtitle,
.context-text,
.app-subtext,
.protocol-status,
.ventana-status {
  color: rgba(230, 226, 218, 0.88) !important;
}

/* ════════════════════════════════════════════════════════════════
   AUDIT v5 · FASE 2e · 2 hotfixes técnicos finales (1 jun 2026)
   Cache bump: kyven-motor-f2e-20260601a
   ════════════════════════════════════════════════════════════════ */

/* F2e.1 · BUG-H tercer intento · ROLLBACK F2f (1 jun 2026).
   El intento de uniformar el chip PERFIL con un look outline/transparente
   (sage 0.18 + border 0.4) lo sacó del lenguaje de diseño consistente con
   BIO/PROTOCOLO (sage sólido, h:38-44, padding nativo, sin border).
   Bloque eliminado · estilo nativo restaurado vía overrides L4282-4288. */

/* F2e.2 · Override bg negro hardcoded en tabs no-PROTOCOLO para que todos
   hereden el html bg #0d1f17 (consistencia luminance post-P1.1).
   Runtime F2d confirmó: #tab-bio/#tab-chat/#tab-insights tienen
   bg rgb(6,17,14) = var(--kvn-bg-app, #06110E) hardcoded (legacy pre-F2d).
   Forzar transparent permite herencia del nuevo bg global. */
#tab-protocol,
#tab-bio,
#tab-chat,
#tab-insights,
#tab-profile,
#tab-perfil,
#tab-manage,
div.tab,
.tab {
  background: transparent !important;
}

/* ═══════════ GC-3.5 · SPLASH PATEK TIER S CINEMATOGRÁFICO · 5.5s ═══════════ */
/* NOTA: display SIN !important · para que el JS splash.style.display='none' del cierre gane
 * (el inline pierde contra !important · footgun conocido en elementos toggleables). */

#splash.splash-v2 {
  background: #26392F !important;
  /* GC-3.6i · borde del radial #1F2F26 → #26392F · la safe-area cae en el borde y se veía
   * un pelín más oscura que el chrome (#26392F). Ahora borde = chrome = uniforme · centro sutil. */
  background: radial-gradient(ellipse at center, #2D4337 0%, #26392F 65%, #26392F 100%) !important;
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;   /* N1 refuerzo defensivo · cubre safe-area completa */
  height: 100vh !important;  /* N1 refuerzo defensivo */
  z-index: 99999 !important; /* N1 · era 9999 · subir sobre cualquier safe-bg */
  overflow: hidden !important;
  padding: 40px 24px !important;
  transition: opacity 0.5s ease-out !important;
}

#splash.splash-v2.fade-out {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* === PARTICLES dorados · aparecen al final === */
#splash.splash-v2 .splash-particle {
  position: absolute;
  background: #C8A45A;
  border-radius: 50%;
  opacity: 0;
  animation: splash-particle-appear 1s ease-out forwards;
}
#splash.splash-v2 .splash-particle:nth-of-type(1){width:2px;height:2px;top:25%;left:18%;animation-delay:4.0s;}
#splash.splash-v2 .splash-particle:nth-of-type(2){width:3px;height:3px;top:62%;left:82%;animation-delay:4.2s;}
#splash.splash-v2 .splash-particle:nth-of-type(3){width:2px;height:2px;top:42%;left:78%;animation-delay:4.3s;}
#splash.splash-v2 .splash-particle:nth-of-type(4){width:2px;height:2px;top:72%;left:25%;animation-delay:4.4s;}
#splash.splash-v2 .splash-particle:nth-of-type(5){width:3px;height:3px;top:30%;left:72%;animation-delay:4.1s;}
#splash.splash-v2 .splash-particle:nth-of-type(6){width:2px;height:2px;top:55%;left:15%;animation-delay:4.2s;}
@keyframes splash-particle-appear {
  0%{opacity:0;transform:scale(0.5);}
  50%{opacity:0.7;transform:scale(1);}
  100%{opacity:0.4;transform:scale(1);}
}

/* === RINGS concéntricos · expanden post-monograma === */
#splash.splash-v2 .splash-ring {
  position: absolute;
  top: 38%;
  left: 50%;
  border: 1px solid rgba(200,164,90,0);
  border-radius: 50%;
  pointer-events: none;
  animation: splash-ring-expand 2s ease-out forwards;
}
#splash.splash-v2 .splash-ring:nth-of-type(1){width:200px;height:200px;transform:translate(-50%,-50%);animation-delay:2.0s;}
#splash.splash-v2 .splash-ring:nth-of-type(2){width:320px;height:320px;transform:translate(-50%,-50%);animation-delay:2.3s;}
#splash.splash-v2 .splash-ring:nth-of-type(3){width:440px;height:440px;transform:translate(-50%,-50%);animation-delay:2.6s;}
@keyframes splash-ring-expand {
  0%{border-color:rgba(200,164,90,0);transform:translate(-50%,-50%) scale(0.5);}
  20%{border-color:rgba(200,164,90,0.4);}
  100%{border-color:rgba(200,164,90,0);transform:translate(-50%,-50%) scale(1.2);}
}

/* === GLOW radial · respira === */
#splash.splash-v2 .splash-glow {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%,-50%) scale(0.6);
  background: radial-gradient(circle, rgba(200,164,90,0.25) 0%, transparent 65%);
  opacity: 0;
  animation: splash-glow-build 1.7s ease-out 0.4s forwards;
  pointer-events: none;
}
@keyframes splash-glow-build {
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.6);}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.15);}
  100%{opacity:0.75;transform:translate(-50%,-50%) scale(1);}
}

/* === MONOGRAMA construcción · 0.2s-2.7s === */
#splash.splash-v2 .splash-logo-wrap-v2 {
  position: relative;
  margin-bottom: 48px;
  z-index: 5;
}
#splash.splash-v2 .splash-monogram-v2 {
  width: 140px;
  height: 140px;
  display: block;
  margin: 0 auto;
}

/* Hexágono · stroke-dasharray drawing 1.0s · 0.2s-1.2s */
#splash.splash-v2 .splash-hex-stroke {
  fill: none;
  stroke: url(#splash-monogram-gold);
  stroke-width: 2.5;
  stroke-linejoin: miter;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  animation: splash-draw-hex 1.0s cubic-bezier(0.65, 0.05, 0.36, 1) 0.2s forwards;
}
@keyframes splash-draw-hex {
  to { stroke-dashoffset: 0; }
}

/* K pilar · scaleY 1.3s */
#splash.splash-v2 .splash-k-pillar {
  fill: url(#splash-monogram-gold);
  opacity: 0;
  transform-origin: center;
  transform: scaleY(0);
  animation: splash-k-pillar-build 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.3s forwards;
}
@keyframes splash-k-pillar-build {
  0%{opacity:0;transform:scaleY(0);}
  100%{opacity:1;transform:scaleY(1);}
}

/* K diag up · 1.6s */
#splash.splash-v2 .splash-k-diag-up {
  fill: url(#splash-monogram-gold);
  opacity: 0;
  transform-origin: -11px 0;
  transform: scaleX(0);
  animation: splash-k-diag-build 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.6s forwards;
}
@keyframes splash-k-diag-build {
  0%{opacity:0;transform:scaleX(0);}
  100%{opacity:1;transform:scaleX(1);}
}

/* K diag down · 1.8s */
#splash.splash-v2 .splash-k-diag-down {
  fill: url(#splash-monogram-gold);
  opacity: 0;
  transform-origin: -11px 0;
  transform: scaleX(0);
  animation: splash-k-diag-build 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.8s forwards;
}

/* Satélite ● firma Patek · 2.2s */
#splash.splash-v2 .splash-k-satellite {
  fill: url(#splash-monogram-gold);
  opacity: 0;
  transform-origin: 28.9px -30.3px;
  transform: scale(0);
  animation: splash-satellite-pulse 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.2s forwards;
}
@keyframes splash-satellite-pulse {
  0%{opacity:0;transform:scale(0);}
  50%{opacity:1;transform:scale(1.4);}
  100%{opacity:1;transform:scale(1);}
}

/* === WORDMARK letras · opacity-only (preserva transforms SVG) · 2.50-3.35s === */
#splash.splash-v2 .splash-wordmark-v2 {
  display: block;
  margin: 0 auto;
  width: 240px;
  height: 60px;
}

#splash.splash-v2 .splash-wm-letter {
  opacity: 0;
  animation: splash-wm-letter-in 0.5s ease-out forwards;
}
@keyframes splash-wm-letter-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

#splash.splash-v2 .splash-wm-K { animation-delay: 2.50s; }
#splash.splash-v2 .splash-wm-Y { animation-delay: 2.65s; }
#splash.splash-v2 .splash-wm-V { animation-delay: 2.80s; }
#splash.splash-v2 .splash-wm-E { animation-delay: 2.95s; }
#splash.splash-v2 .splash-wm-N { animation-delay: 3.10s; }
#splash.splash-v2 .splash-wm-dot { animation-delay: 3.35s; }

/* === SUBTITLE · 3.6s === */
#splash.splash-v2 .splash-sub-v2 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(200,164,90,0.85);
  margin-top: 24px;
  opacity: 0;
  animation: splash-fade-up 0.7s ease-out 3.6s forwards;
  text-align: center;
}
@keyframes splash-fade-up {
  0%{opacity:0;transform:translateY(8px);}
  100%{opacity:1;transform:translateY(0);}
}

/* === BOTTOM · 3.9s === */
#splash.splash-v2 .splash-bottom-v2 {
  position: absolute;
  bottom: 64px;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  animation: splash-fade-in 0.7s ease-out 3.9s forwards;
}
@keyframes splash-fade-in { to { opacity: 1; } }

#splash.splash-v2 .splash-version {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(200,164,90,0.6);
  margin-bottom: 12px;
}

#splash.splash-v2 .splash-loader-track {
  width: 100px;
  height: 1px;
  background: rgba(200,164,90,0.15);
  margin: 0 auto 14px;
  overflow: hidden;
}

/* Barra dorada · 4.0s start · 1.4s duration · LLENA a 5.4s */
#splash.splash-v2 #splash-bar.splash-loader-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C8A45A, #B8924A, #C8A45A);
  background-size: 200% 100%;
  animation: splash-load-bar 1.4s cubic-bezier(0.65,0.05,0.36,1) 4.0s forwards,
             splash-shimmer 1.5s linear 4.0s infinite;
}
@keyframes splash-load-bar { to { width: 100%; } }
@keyframes splash-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

#splash.splash-v2 .splash-gpmi {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(245,241,232,0.55);
}

#splash.splash-v2 .splash-gpmi-dot {
  color: #C8A45A;
  margin-left: 4px;
  animation: splash-dot-pulse 2s ease-in-out 4.8s infinite;
}
@keyframes splash-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* === Cleanup legacy splash · ocultar refs antiguas si quedaran === */
#splash.splash-v2 svg line[id^="k"],
#splash.splash-v2 .splash-logo-bg,
#splash.splash-v2 #splash-wordmark.splash-wordmark {
  display: none !important;
}

/* === FIN GC-3.5 splash Patek tier S 5.5s === */
/* === FIN GC-3.5 splash Patek tier S 5.5s === */

/* ════════════════════════════════════════════════════════════════
   FIX P1.1 · WCAG · eyebrows .psec-lbl en PERFIL > DATOS
   ════════════════════════════════════════════════════════════════

   PROBLEMA RUNTIME (medido 7 jun 2026):
   Los eyebrows "01 · DATOS DEL PACIENTE", "02 · OBJETIVOS",
   "03 · WEARABLE", "04 · NOTAS MÉDICAS" usaban color #8A6E45
   (gold viejo hardcoded) sobre card Patek #3F5249.
   Contraste medido: 1.50–1.75:1 (FALLA WCAG AA y AA Large).

   CAUSA:
   La cascada original aplicaba var(--text-tertiary) y var(--t3)
   con !important desde #tab-profile .psec-lbl, ambos resuelven
   al gold viejo. El selector base .psec-lbl { color: var(--gold) }
   no llegaba a aplicar porque #tab-profile lo pisaba.

   FIX:
   Forzar gold-mate canónico #C8A45A (master constitución sec.3).
   Contraste resultante: 3.54:1 sobre #3F5249 → PASA AA Large.
   Acordado con Carlos: AA Large es suficiente para eyebrows
   JetBrains Mono uppercase bold (mismo criterio Linear/Stripe/
   Vercel). Documentado en audit doc, decisión 1.

   Selector con la misma fuerza que el original que pisaba.
════════════════════════════════════════════════════════════════ */

/* v2 (7 jun 2026): el selector simple (1,1,2) PERDÍA la cascada en runtime.
   La inversión Geneva fija .psec-lbl con `:is(.psec-lbl, #_kvn-b1_#_kvn-b2_#_kvn-b3_)`
   = especificidad (3,1,1) Y un -webkit-text-fill-color que repinta el texto.
   → Hay que (a) superar (3,1,1) con el mismo truco de IDs fantasma del codebase
     y (b) fijar TAMBIÉN -webkit-text-fill-color (si no, el color base no se ve). */
html body #tab-profile .psec-lbl:is(.psec-lbl, #_kvn-b1_#_kvn-b2_#_kvn-b3_),
html[data-geneva-mode="on"] body #tab-profile .psec-lbl:is(.psec-lbl, #_kvn-b1_#_kvn-b2_#_kvn-b3_),
html[data-geneva-mode="dark"] body #tab-profile .psec-lbl:is(.psec-lbl, #_kvn-b1_#_kvn-b2_#_kvn-b3_) {
  color: #C8A45A !important;
  -webkit-text-fill-color: #C8A45A !important;
}


/* ════════════════════════════════════════════════════════════════
   FIX P1.2 · constitución · bottom-nav sin glass blur
   ════════════════════════════════════════════════════════════════

   PROBLEMA RUNTIME (visible en iPhone PWA standalone real):
   .bottom-nav tenía:
     background: rgba(10, 16, 14, 0.3);
     backdrop-filter: blur(50px) saturate(1.4) brightness(1.15);

   Esto producía un efecto de glass que en iPhone real "comía"
   visualmente las barras de CONSTANCIA · 30 DÍAS y el número de
   DÍAS ACTIVOS justo encima del nav. Screenshot iPhone aportado
   por Carlos como evidencia (audit doc · 7 jun 2026).

   VIOLACIÓN:
   Master constitución sec.3 · "PROHIBIDO USAR: Glass blur /
   backdrop-filter en headers". Sec.12 · "Header glass /
   backdrop-filter (rechazado P19)".

   FIX:
   Bg sólido Patek-dark #1C2A24 (sin alpha), backdrop-filter:none,
   box-shadow sutil hacia arriba como separación. Mantiene los
   iconos cream del nav legibles (decisión 2A con Carlos: bg dark
   sólido en vez de invertir todo el color scheme del nav).

   Selector con especificidad nuclear porque el original tiene
   "html body nav#bottom-nav.bottom-nav" en otra parte del CSS.
════════════════════════════════════════════════════════════════ */

html body nav#bottom-nav.bottom-nav,
html body #bottom-nav.bottom-nav,
html body .bottom-nav,
html body .bnav,
html body .tab-bar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #1C2A24 !important;
  border: 0.5px solid rgba(200, 164, 90, 0.10) !important;
  box-shadow: 0 -4px 24px rgba(5, 14, 11, 0.18) !important;
}

/* === FIN FIX P1.1 + P1.2 · runtime-validated 7 jun 2026 === */



/* ════════════════════════════════════════════════════════════════
   FASE 1 · FOUNDATION VISUAL · selectores escalados · 7 jun 2026
   ════════════════════════════════════════════════════════════════ */


/* ─── HERO NUMBER · pisa: html body #tab-protocol #brief-hero-num (2,0,2) ──── */
/* Ciclo 2: el ganador real tenía DOS IDs (#tab-protocol + #brief-hero-num,
   overrides.css:4601). Subimos a (2,1,2) con #tab-protocol #brief-hero-num.kv-hero-num. */

html body #tab-protocol #brief-hero-num.kv-hero-num,
html body #brief-hero-num.kv-hero-num,
html body #tab-protocol .brief-hero-num.kv-hero-num,
html body #tab-protocol .brief-hero-num,
html body #tab-protocol .kv-hero-num {
  color: #D4B36C !important;
  font-size: 80px !important;
  font-weight: 200 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}


/* ─── HERO CARD · pisa: #tab-protocol .brief (1,1,0) ─────────── */
/* Añadir html body para ganar */

html body #tab-protocol .brief.kv-hero-card {
  border-radius: 20px !important;
  padding: 18px !important;
  margin: 0 6px 14px 6px !important;
  box-shadow:
    0 2px 8px  rgba(63, 82, 73, 0.08),
    0 12px 32px rgba(63, 82, 73, 0.10),
    0 1px 0    rgba(255, 255, 255, 0.04) inset !important;
  border: 1px solid rgba(63, 82, 73, 0.14) !important;
}

/* Hero card Dark */
html body #tab-protocol .brief.kv-hero-card[data-theme="dark"],
html[data-geneva-mode="dark"] body #tab-protocol .brief.kv-hero-card {
  box-shadow:
    0 2px 8px  rgba(0, 0, 0, 0.30),
    0 12px 32px rgba(0, 0, 0, 0.25),
    0 1px 0    rgba(255, 255, 255, 0.06) inset !important;
  border: 1px solid rgba(200, 164, 90, 0.10) !important;
}


/* ─── COMPOUND CARDS · en #tab-protocol ──────────────────────── */

html body #tab-protocol .compound-card {
  margin: 0 6px 20px 6px !important;
  border-radius: 14px !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}
html body #tab-protocol .compound-card:active {
  opacity: 0.85 !important;
  transform: scale(0.995) !important;
}
html[data-geneva-mode="on"] body #tab-protocol .compound-card {
  box-shadow: 0 1px 6px rgba(63, 82, 73, 0.06),
              0 4px 16px rgba(63, 82, 73, 0.04) !important;
}
html[data-geneva-mode="on"] body #tab-protocol .compound-card.completed {
  box-shadow: 0 1px 6px rgba(90, 122, 90, 0.10),
              0 4px 16px rgba(63, 82, 73, 0.04) !important;
  border: 1px solid rgba(168, 192, 166, 0.22) !important;
}
html[data-geneva-mode="on"] body #tab-protocol .compound-card.next-up {
  box-shadow: 0 1px 6px rgba(200, 164, 90, 0.10),
              0 4px 16px rgba(63, 82, 73, 0.04) !important;
  border: 1px solid rgba(200, 164, 90, 0.22) !important;
}


/* ─── SUBNAV · pisa: reglas #tab-* .subnav ───────────────────── */

html body #tab-protocol .subnav,
html body #tab-bio .subnav,
html body #tab-insights .subnav,
html body #tab-chat .subnav,
html body #tab-profile .subnav {
  border-radius: 12px !important;
  margin: 0 6px 26px 6px !important;
}


/* ─── SUBNAV-BTN ACTIVE · pisa: body .subnav-btn.active (0,2,1) ─ */
/* Añadir html para subir a (1,2,1) */

html body .subnav-btn.active,
html body .subnav-btn.on {
  background: rgba(235, 231, 221, 0.12) !important;
  border: 1px solid rgba(235, 231, 221, 0.38) !important;
  color: #C8A45A !important;
}
html body .subnav-btn:not(.active):not(.on) {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(230, 226, 218, 0.48) !important;
}

/* Dark */
html[data-geneva-mode="dark"] body .subnav-btn.active,
html[data-geneva-mode="dark"] body .subnav-btn.on {
  background: rgba(200, 164, 90, 0.16) !important;
  border: 1px solid rgba(200, 164, 90, 0.36) !important;
  color: #C8A45A !important;
}


/* ─── INSIGHTS TABS · ya ganaba · confirmar ──────────────────── */

.ins-v5-tab.on,
.ins-v5-tab.active {
  background: rgba(235, 231, 221, 0.12) !important;
  border: 1px solid rgba(235, 231, 221, 0.38) !important;
  color: #C8A45A !important;
}
.ins-v5-tab:not(.on):not(.active) {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(230, 226, 218, 0.48) !important;
}
.ins-v5-pt-btn.on,
.ins-v5-pt-btn.active {
  background: rgba(235, 231, 221, 0.12) !important;
  border: 1px solid rgba(235, 231, 221, 0.38) !important;
  color: #C8A45A !important;
}
.ins-v5-pt-btn:not(.on):not(.active) {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(230, 226, 218, 0.48) !important;
}


/* ─── NOMBRE CARLOS · pisa: body ...greeting-block em sage ────── */

html body .brief-greeting-block em,
html body .brief-greeting-block i,
html body [class*=greeting-block] em,
html body [class*=greeting-block] i,
html body [class*=greeting] em,
html body [class*=greeting] i {
  color: #C8A45A !important;
}


/* ─── PSEC-LBL LETTER-SPACING · pisa: #tab-profile .psec-lbl ─── */

html body #tab-profile .psec-lbl {
  letter-spacing: 0.14em !important;
}


/* ─── PROGRESS FILL ──────────────────────────────────────────── */

html body .brief-progress-fill,
html body .ob-progress-fill,
html body [class*=progress-fill] {
  background: linear-gradient(90deg, #C8A45A 0%, #D4B36C 100%) !important;
}


/* ─── PULSE CARD ─────────────────────────────────────────────── */

html body .drk-pulse-card {
  border-radius: 18px !important;
  padding: 14px 16px !important;
  box-shadow:
    0 4px 16px rgba(63, 82, 73, 0.12),
    0 16px 40px rgba(63, 82, 73, 0.14) !important;
  border: 1px solid rgba(63, 82, 73, 0.16) !important;
}


/* ─── GEIST → INTER · ya ganaba · confirmar ─────────────────── */

.drk-pulse, .drk-pulse *,
.drk-pulse-header, .drk-pulse-meta,
.drk-pulse-close, .drk-pulse-cta,
.nav-item, .nav-item *, .nav-label,
.add-btn, .add-btn-plus,
[class*=drk-pulse], [class*=nav-item], [class*=add-btn] {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Geist→Inter · sheets: añadir compuesto · drawer · avatar */
.add-sheet, .add-sheet *,
.add-sheet-handle, .add-sheet-header,
.add-sheet-scroll, .add-sheet-footer,
.inp-row, .inp-row *,
.drz-handle-wrap, .drz-handle,
.drz-topbar, .drz-close,
.drz-body, .drz-footer,
.drz-body *, .drz-footer *,
.avatar-sheet-handle, .avatar-sheet-grid,
.avatar-sheet-grid *,
[class*=add-sheet],
[class*=drz-],
[class*=avatar-sheet] {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}


/* ─── SECCIONES BRIEF · PROGRESO ────────────────────────────── */

html body #tab-protocol .ob-progress {
  margin: 0 0 18px 0 !important;
}

html body #tab-protocol .brief-section,
html body #tab-protocol .brief-next-action,
html body #tab-protocol .brief-streak-row,
html body #tab-protocol .brief-progress-row {
  margin-left: 6px !important;
  margin-right: 6px !important;
}


/* ─── HERO EYEBROW SUPERIOR · subtle ────────────────────────── */

html body #tab-protocol [class*=brief-eyebrow],
html body #tab-protocol [class*=brief-window] {
  opacity: 0.65 !important;
  letter-spacing: 0.12em !important;
}


/* ─── TOKENS GLOBALES ────────────────────────────────────────── */

html[data-geneva-mode="on"],
html[data-geneva-mode="dark"],
html[data-geneva-mode] {
  --card-elevated: #475C53;
  --card-default:  #3F5249;
}

/* === FIN FASE 1 · FOUNDATION VISUAL · selectores escalados === */


/* ════════════════════════════════════════════════════════════════
   FASE 1 · INSIGHTS REFORMULACIÓN · audit L633-659 · 7 jun 2026
   ════════════════════════════════════════════════════════════════ */


/* ─── 3 SUB-CARDS · STACK / EJECUC / BIO (audit L641) ─────────── */

html body #tab-insights .ins-v5-subscores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 10px 14px 22px !important;
}

html body #tab-insights .ins-v5-subcard {
  background: #475C53;
  border-radius: 14px;
  padding: 14px 10px 12px;
  position: relative;
  border: 1px solid transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 6px 18px rgba(42,59,51,0.08);
}

html body #tab-insights .ins-v5-subcard.warn {
  border-color: rgba(184,138,62,0.30);
  background: linear-gradient(180deg, #4d4534 0%, #3d3a2a 100%);
}

html body #tab-insights .ins-v5-subcard.danger {
  border-color: rgba(163,90,58,0.35);
  background: linear-gradient(180deg, #4a3d35 0%, #3a2d28 100%);
}

html body #tab-insights .ins-v5-subcard-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: rgba(235,231,221,0.62);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

html body #tab-insights .ins-v5-subcard-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #A8C0A6;
}
html body #tab-insights .ins-v5-subcard.warn .ins-v5-subcard-dot { background: #b88a3e; }
html body #tab-insights .ins-v5-subcard.danger .ins-v5-subcard-dot { background: #a35a3a; }

html body #tab-insights .ins-v5-subcard-val {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: rgba(235,231,221,0.92);
  letter-spacing: -0.02em;
  line-height: 1;
}

html body #tab-insights .ins-v5-subcard-unit {
  font-size: 13px;
  font-weight: 400;
  color: rgba(235,231,221,0.55);
}

html body #tab-insights .ins-v5-subcard-trend {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(235,231,221,0.55);
  margin-top: 7px;
  letter-spacing: 0.06em;
}


/* ─── P2 audit L484 · Sub-tab activo contraste fix ─────────── */

html body #tab-insights .ins-v5-tab.on,
html body #tab-insights .ins-v5-tab.active {
  background: rgba(235,231,221,0.14) !important;
  border: 1px solid rgba(200,164,90,0.42) !important;
  color: #D4B36C !important;
  font-weight: 600 !important;
}

html body #tab-insights .ins-v5-tab:not(.on):not(.active) {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(235,231,221,0.50) !important;
}


/* ─── WCAG FIX · cards Dr.K narrative (audit L845-847) ────── */
/* Nota: en Geneva-on la inversión (3,1,1) gana sobre estas reglas → solo
   surten efecto en DARK (card oscura), evitando cream-sobre-cream en claro. */

html body #tab-insights .ins-v5-ai-card-body,
html body #tab-insights .ins-v5-hero-day-quote {
  color: rgba(235,231,221,0.92) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

html body #tab-insights .ins-v5-ai-card-title {
  color: rgba(235,231,221,0.95) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

html body #tab-insights .ins-v5-ai-card-h {
  color: #D4B36C !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
}

/* Firmas footer · clases REALES (card-foot era fantasma) ·
   firma = section header DR.KYVEN + hero-day sig "Dr. Kyven · GPMI" */
html body #tab-insights .ins-v5-ai-sh-title,
html body #tab-insights .ins-v5-ai-sh-title strong,
html body #tab-insights .ins-v5-ai-sh-meta,
html body #tab-insights .ins-v5-hero-day-sig,
html body #tab-insights .ins-v5-hero-day-sig em {
  color: #D4B36C !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* Strong/B dentro de cards Dr.K · números clínicos legibles */
html body #tab-insights .ins-v5-ai-card-body b,
html body #tab-insights .ins-v5-ai-card-body strong,
html body #tab-insights .ins-v5-hero-day-quote b,
html body #tab-insights .ins-v5-hero-day-quote strong {
  color: #D4B36C !important;
  font-weight: 600 !important;
}


/* === FIN FASE 1 INSIGHTS REFORMULACIÓN · 7 jun 2026 === */


/* ════════════════════════════════════════════════════════════════
   FASE 1 · INSIGHTS · CICLO 4 · cards Geneva claro · 8 jun 2026
   Cards RESUMEN/WEEKLY tenían gradient/bg claro → invisibles sobre root
   cream. Fix: bg Patek sólido + (texto cream/gold · ver inversión PATRÓN
   INS-DARK para los eyebrows gobernados por phantom-IDs).
   ════════════════════════════════════════════════════════════════ */

/* ─── FIX 1 · bg Patek sólido (quita gradients invisibles) ─── */
html[data-geneva-mode="on"] body #tab-insights .ins-v5-hero-day,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-ai-card,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-ai-card.highlight {
  background: #3F5249 !important;
  border: 1px solid rgba(201,164,90,0.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 6px 18px rgba(42,59,51,0.08) !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-ai-card.highlight {
  border-color: rgba(163,90,58,0.30) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 8px 24px rgba(163,90,58,0.08) !important;
}

/* ─── FIX 2 · texto interior cards (clases NO gobernadas por phantom-ID) ─── */
html[data-geneva-mode="on"] body #tab-insights .ins-v5-hero-day-quote,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-ai-card-body {
  color: rgba(235,231,221,0.92) !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-ai-card-title {
  color: rgba(235,231,221,0.95) !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-hero-day-eb,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-ai-card-h {
  color: #D4B36C !important;
  font-weight: 600 !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-hero-day-sig,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-hero-day-sig em {
  color: #D4B36C !important;
  font-weight: 600 !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-ai-card b,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-ai-card strong,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-hero-day b,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-hero-day strong {
  color: #D4B36C !important;
  font-weight: 600 !important;
}

/* ─── FIX 3 · sticky colapso optimizado (solo barra sub-tabs al scrollear) ─── */
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-score-card,
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .kv-weekly-action,
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed .ins-v5-subscores {
  display: none !important;
}
html body #tab-insights .ins-v5-sticky-wrap.is-collapsed {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ─── FIX 4 · cards N2/N3 WEEKLY · bg Patek + textos cream/gold ─── */
html[data-geneva-mode="on"] body #tab-insights .ins-v5-note-card.n2,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-note-card.n3 {
  background: #3F5249 !important;
  border: 1px solid rgba(201,164,90,0.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 6px 18px rgba(42,59,51,0.08) !important;
  padding: 18px 20px !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-note-card .ins-v5-note-tit {
  color: rgba(235,231,221,0.95) !important;
  font-weight: 500 !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-note-card .ins-v5-note-body {
  color: rgba(235,231,221,0.92) !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-note-card .ins-v5-note-tag {
  color: rgba(235,231,221,0.70) !important;
  background: rgba(235,231,221,0.08) !important;
  border: 1px solid rgba(235,231,221,0.14) !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-note-card b,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-note-card strong {
  color: #D4B36C !important;
  font-weight: 600 !important;
}

/* === FIN FASE 1 INSIGHTS CICLO 4 · 8 jun 2026 === */


/* ════════════════════════════════════════════════════════════════
   FASE 1 · INSIGHTS · CICLO 5 · cards restantes + pseudo-elements · 8 jun 2026
   Más cards principales con bg claro/gradient + pseudo ::before/::after con
   linear-gradient blanco (asumían dark) → tinte blanco visible sobre Patek.
   Fix: bg Patek + neutralizar pseudos. (Textos hijos → inversión INS-DARK-v2
   con clases REALES · el task adivinó nombres inexistentes.)
   ════════════════════════════════════════════════════════════════ */

/* ─── FIX 1 · bg Patek sólido en todas las cards principales ─── */
html[data-geneva-mode="on"] body #tab-insights .brief,
html[data-geneva-mode="on"] body #tab-insights .ko-card,
html[data-geneva-mode="on"] body #tab-insights .kba-card,
html[data-geneva-mode="on"] body #tab-insights .kwb-card,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-obj-card,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-obj-card.has-drk,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-corr-hero,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-note-card.n5,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-disc-featured,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-spk-card {
  background: #3F5249 !important;
  background-image: none !important;
  border: 1px solid rgba(201,164,90,0.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 6px 18px rgba(42,59,51,0.08) !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-note-card.n5 {
  border-color: rgba(163,90,58,0.35) !important;
}

/* ─── Neutralizar pseudo-elements gradient blanco ─── */
html[data-geneva-mode="on"] body #tab-insights .brief::before,
html[data-geneva-mode="on"] body #tab-insights .brief::after,
html[data-geneva-mode="on"] body #tab-insights .ko-card::before,
html[data-geneva-mode="on"] body #tab-insights .ko-card::after,
html[data-geneva-mode="on"] body #tab-insights .kba-card::before,
html[data-geneva-mode="on"] body #tab-insights .kba-card::after,
html[data-geneva-mode="on"] body #tab-insights .kwb-card::before,
html[data-geneva-mode="on"] body #tab-insights .kwb-card::after,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-obj-card::before,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-obj-card::after,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-corr-hero::before,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-corr-hero::after,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-note-card.n5::before,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-note-card.n5::after,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-disc-featured::before,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-disc-featured::after,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-spk-card::before,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-spk-card::after {
  background: none !important;
  background-image: none !important;
  display: none !important;
}

/* ─── CTAs internos · bg amber sutil sin gradient ─── */
html[data-geneva-mode="on"] body #tab-insights .ins-v5-obj-drk-cta,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-n5-cta {
  background: rgba(201,164,90,0.12) !important;
  background-image: none !important;
  border: 1px solid rgba(201,164,90,0.32) !important;
  color: #D4B36C !important;
  font-weight: 600 !important;
}

/* === FIN FASE 1 INSIGHTS CICLO 5 (overrides) · 8 jun 2026 === */


/* ════════════════════════════════════════════════════════════════
   FASE 1 · INSIGHTS · CICLO 6 · polish UX · 8 jun 2026
   ════════════════════════════════════════════════════════════════ */

/* ─── FIX 1 · "A2 SCORE" como eyebrow externo (el ring solo lleva el número) ─── */
html body #tab-insights .ins-v5-sc-eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(235,231,221,0.55) !important;
  margin: 0 0 8px 2px !important;
  line-height: 1 !important;
}
/* el sub interno del ring queda oculto (lo hace el JS, refuerzo por si acaso) */
html body #tab-insights .ins-v5-sc-center .ins-v5-sc-sub { display: none !important; }

/* ─── FIX 3 · sub-tabs PROTOCOLO/BIO/PERFIL · paridad con INSIGHTS (#D4B36C) ─── */
/* Scope #tab-* porque BIO/PERFIL tienen reglas con ID (1,2,2) que ganan al genérico */
html[data-geneva-mode="on"] body .subnav-btn.active,
html[data-geneva-mode="on"] body .subnav-btn.on,
html[data-geneva-mode="on"] body #tab-protocol .subnav-btn.active,
html[data-geneva-mode="on"] body #tab-protocol .subnav-btn.on,
html[data-geneva-mode="on"] body #tab-bio .subnav-btn.active,
html[data-geneva-mode="on"] body #tab-bio .subnav-btn.on,
html[data-geneva-mode="on"] body #tab-profile .subnav-btn.active,
html[data-geneva-mode="on"] body #tab-profile .subnav-btn.on {
  background: rgba(235, 231, 221, 0.14) !important;
  background-image: none !important;
  border: 1px solid rgba(200, 164, 90, 0.42) !important;
  color: #D4B36C !important;
  font-weight: 600 !important;
}
html[data-geneva-mode="on"] body #tab-protocol .subnav-btn:not(.active):not(.on),
html[data-geneva-mode="on"] body #tab-bio .subnav-btn:not(.active):not(.on),
html[data-geneva-mode="on"] body #tab-profile .subnav-btn:not(.active):not(.on),
html[data-geneva-mode="on"] body .subnav-btn:not(.active):not(.on) {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(235, 231, 221, 0.65) !important; /* ciclo 8 FIX 2 · 0.50→0.65 WCAG */
  font-weight: 500 !important;
}

/* ─── FIX 4 · barra "PROGRESO HOY" PROTOCOLO · gold (corregido con #tab-protocol) ─── */
html[data-geneva-mode="on"] body #tab-protocol .brief-pgr-fill {
  background: linear-gradient(90deg, #C8A45A 0%, #D4B36C 100%) !important;
  box-shadow: 0 0 6px rgba(200, 164, 90, 0.25) !important;
}

/* === FIN FASE 1 INSIGHTS CICLO 6 · 8 jun 2026 === */


/* ════════════════════════════════════════════════════════════════
   FASE 1 · INSIGHTS · CICLO 7 · 8 jun 2026
   ════════════════════════════════════════════════════════════════ */

/* ─── FIX 1 · eyebrow "A2 SCORE" · era cream 0.55 sobre cream root = invisible ─── */
html[data-geneva-mode="on"] body #tab-insights .ins-v5-sc-eyebrow {
  color: #C8A45A !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
}
html[data-geneva-mode="dark"] body #tab-insights .ins-v5-sc-eyebrow {
  color: #D4B36C !important;
  font-weight: 500 !important;
}

/* ─── FIX 2 · cards "PRÓXIMAMENTE" WCAG · bg sage claro+texto cream débil = ilegible ─── */
/* Clases REALES verificadas: A wearable-card.coming (BIO) · B lab-cat-soon (BIO) · C tier.soon (PERFIL) */
/* Scope con #tab-* / #plans-container porque las reglas base tienen ID (hasta 2 en .tier) */

/* A · WEARABLE coming (BIO HOY) · opacity 0.4 era el killer */
html[data-geneva-mode="on"] body #tab-bio .wearable-card.coming {
  opacity: 1 !important;
  background: rgba(63,82,73,0.55) !important;
  border: 1px solid rgba(201,164,90,0.25) !important;
}
html[data-geneva-mode="on"] body #tab-bio .wearable-card.coming .wearable-name,
html[data-geneva-mode="on"] body #tab-bio .wearable-card.coming .wearable-sub {
  color: rgba(235,231,221,0.92) !important;
}
html[data-geneva-mode="on"] body #tab-bio .wearable-card.coming .wearable-pill.muted {
  color: #D4B36C !important;
  border-color: rgba(201,164,90,0.35) !important;
}

/* B · ANALÍTICAS lab-cat-soon (BIO) */
html[data-geneva-mode="on"] body #tab-bio .lab-cat-card.lab-cat-soon {
  background: rgba(63,82,73,0.55) !important;
  border: 1px solid rgba(201,164,90,0.25) !important;
}
html[data-geneva-mode="on"] body #tab-bio .lab-cat-card.lab-cat-soon .lab-cat-name,
html[data-geneva-mode="on"] body #tab-bio .lab-cat-card.lab-cat-soon .lab-cat-desc {
  color: rgba(235,231,221,0.92) !important;
}
html[data-geneva-mode="on"] body #tab-bio .lab-cat-card.lab-cat-soon .lab-cat-meta {
  color: #D4B36C !important;
}

/* C · PLAN tier.soon (PERFIL) · base tiene 2 IDs (#tab-profile #plans-container) */
html[data-geneva-mode="on"] body #tab-profile #plans-container .tier.soon {
  background: rgba(63,82,73,0.55) !important;
  border: 1px solid rgba(201,164,90,0.25) !important;
}
html[data-geneva-mode="on"] body #tab-profile #plans-container .tier.soon .tier-name,
html[data-geneva-mode="on"] body #tab-profile #plans-container .tier.soon .tier-price,
html[data-geneva-mode="on"] body #tab-profile #plans-container .tier.soon .tier-cycle,
html[data-geneva-mode="on"] body #tab-profile #plans-container .tier.soon .tier-f {
  color: rgba(235,231,221,0.92) !important;
}
html[data-geneva-mode="on"] body #tab-profile #plans-container .tier.soon .tier-tag.soon {
  color: #D4B36C !important;
  border-color: rgba(201,164,90,0.35) !important;
}

/* === FIN FASE 1 INSIGHTS CICLO 7 · 8 jun 2026 === */


/* ════════════════════════════════════════════════════════════════
   FASE 1 · INSIGHTS · CICLO 8 · polish visual definitivo · 8 jun 2026
   Patrón único: gradient/bg con alpha bajo claro (cream/sage/gold) que sobre
   cream root = casi blanco → texto cream interior invisible. Fix: bg Patek +
   cream 0.92 + eyebrow gold. (FIX 2 sub-tabs inactivos editado arriba 0.50→0.65)
   ════════════════════════════════════════════════════════════════ */

/* ─── FIX 1 · toast .cmp-microinsight (compuesto tomado · PROTOCOLO) ─── */
/* Clases reales: .cmp-microinsight-toma / -tip / -mark / -text (no hay [class*=title]) */
html[data-geneva-mode="on"] body .cmp-microinsight.show {
  background: #3F5249 !important;
  background-image: none !important;
  border: 1px solid rgba(201,164,90,0.20) !important;
}
html[data-geneva-mode="on"] body .cmp-microinsight.show * {
  color: rgba(235,231,221,0.92) !important;
}
html[data-geneva-mode="on"] body .cmp-microinsight.show .cmp-microinsight-mark,
html[data-geneva-mode="on"] body .cmp-microinsight.show .cmp-microinsight-toma,
html[data-geneva-mode="on"] body .cmp-microinsight.show b,
html[data-geneva-mode="on"] body .cmp-microinsight.show strong {
  color: #D4B36C !important;
}

/* ─── FIX 3 · card EDAD BIOLÓGICA (gradient sage→card al top) ─── */
html[data-geneva-mode="on"] body #tab-insights .ins-v5-bioage-card {
  background: #3F5249 !important;
  background-image: none !important;
  border: 1px solid rgba(201,164,90,0.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 6px 18px rgba(42,59,51,0.08) !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-bioage-eb {
  color: #D4B36C !important;
  font-weight: 500 !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-bioage-hl,
html[data-geneva-mode="on"] body #tab-insights .ins-v5-bioage-desc {
  color: rgba(235,231,221,0.92) !important;
}

/* ─── FIX 4 · card RITMO SEMANAL (.ins-v5-bestday-line · texto invisible) ─── */
html[data-geneva-mode="on"] body #tab-insights .ins-v5-bestday-line {
  background: #3F5249 !important;
  background-image: none !important;
  border: 1px solid rgba(201,164,90,0.10) !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-bestday-line * {
  color: rgba(235,231,221,0.92) !important;
}
html[data-geneva-mode="on"] body #tab-insights .ins-v5-bestday-eb {
  color: #D4B36C !important;
  font-weight: 500 !important;
}

/* ─── FIX 5 · card DR. KYVEN INTERPRETACIÓN BIO HOY (.brief-dz) ─── */
/* bg = radial gold + linear forest (en geneva-on los tokens forest resuelven claro)
   Scope #tab-bio porque existe `html body #tab-bio .brief-dz` (1,1,2) que pisa el genérico. */
html[data-geneva-mode="on"] body #tab-bio .brief-dz {
  background: #3F5249 !important;
  background-image: none !important;
  border: 1px solid rgba(201,164,90,0.10) !important;
}
html[data-geneva-mode="on"] body #tab-bio .brief-dz::before,
html[data-geneva-mode="on"] body #tab-bio .brief-dz::after {
  background: none !important;
  background-image: none !important;
}
/* NOTA: no existe card PRECAUCIÓN con clase propia en BIO HOY (.brief-prec/
   .brief-warn/.precaution-card = 0 · fantasmas). El contenido "PRECAUCIÓN"
   vive en las notas INSIGHTS (.ins-v5-note-card/.ins-v5-ai-card · ya cubiertas
   ciclos 4-5) y en el propio .brief-dz cuando Dr.K emite precaución. */

/* === FIN FASE 1 INSIGHTS CICLO 8 · 8 jun 2026 === */

/* ════ CONSOLIDADO · features ciclo 10 que SÍ se mantienen (no-shadow) ════ */

/* ─── CICLO 10 · FIX C · sub-tabs PERFIL paridad visual ───
   Diferencia REAL hallada: PERFIL usa .subnav.kv-tabs con container border +
   bg var(--card) (de .kv-tabs base) y margin 0 horizontal · el resto de tabs
   (BIO/PROTOCOLO/INSIGHTS) usan .subnav plano SIN container ni border + margin
   16px. Igualamos PERFIL a borderless + inset para que la pill activa gold
   sea el único fill, como en las otras 3 secciones. */
/* v2: PERFIL debe ser IDÉNTICO a BIO/PROTOCOLO/INSIGHTS · medido runtime su .subnav =
   container Patek #3F5249 + border cream 0.12 + margin 0 6px 26px (NO transparente · v1
   lo dejó invisible). Igualamos el container kv-tabs a esos valores exactos. */
html[data-geneva-mode="on"] body #tab-profile .subnav.kv-tabs {
  background: #3F5249 !important;
  border: 1px solid rgba(230, 226, 218, 0.12) !important;
  margin: 0 6px 26px !important;
  padding: 4px !important;
  gap: 2px !important;
}
/* === FIN CICLO 10 FIX C === */

/* ─── CICLO 10 · streak-danger "Racha en peligro" · legibilidad (Carlos) ───
   En geneva-on era amber 0.12→0.04 sobre cream = washed · título amber medio se
   funde, sub paper-mute se pierde. Mantenemos el look amber suave pero subimos
   contraste: bg amber algo más presente, título dark-amber bold (primario),
   sub brown oscuro legible (secundario) · jerarquía clara. */
html[data-geneva-mode="on"] body .streak-danger {
  background: linear-gradient(160deg, rgba(224,154,58,0.22) 0%, rgba(224,154,58,0.11) 100%) !important;
  border-color: rgba(224,154,58,0.48) !important;
}
html[data-geneva-mode="on"] body .streak-danger-title {
  color: #8A5418 !important;
  font-weight: 600 !important;
}
html[data-geneva-mode="on"] body .streak-danger-title #streak-danger-num,
html[data-geneva-mode="on"] body .streak-danger-title #streak-danger-unit {
  color: #8A5418 !important;
}
html[data-geneva-mode="on"] body .streak-danger-sub {
  color: rgba(74,56,30,0.88) !important;
  font-weight: 500 !important;
}
/* === FIN streak-danger legibilidad === */

/* ════════════════════════════════════════════════════════════════
   FASE A · ELEVATION SHADOW SYSTEM UNIFICADO
   Aprobado MCP runtime · iPhone 14 Pro Max · 8 jun 2026

   LEVEL 0: Background / secciones → none
   LEVEL 1: Headers / navbars → --elev-1
   LEVEL 2: Cards normales → --elev-2
   LEVEL 3: Hero / Metric / Dr.K → --elev-3 (3 capas + halo 72px)
   LEVEL 4: Bottom-nav → ya ok (glow ascendente)
   ════════════════════════════════════════════════════════════════ */

:root {
  --elev-1: 0 1px 2px rgba(0,0,0,0.04), 0 8px 26px rgba(0,0,0,0.08);
  --elev-2: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.10);
  --elev-3: 0 1px 2px rgba(0,0,0,0.05), 0 10px 30px rgba(0,0,0,0.11),
            0 30px 72px rgba(0,0,0,0.10);
}


/* ─── COMPOUND CARDS · LEVEL 2 ─── */
html body #tab-protocol .compound-card:not(.completed) {
  box-shadow: var(--elev-2) !important;
}
html body #tab-protocol .compound-card.completed {
  opacity: 1 !important;
  box-shadow: var(--elev-2) !important;
}
html body #tab-protocol .compound-card.completed > *:not([class*=check]):not([class*=checkbox]) {
  opacity: 0.42 !important;
}
html body #tab-protocol .compound-card.completed [class*=check],
html body #tab-protocol .compound-card.completed [class*=checkbox],
html body #tab-protocol .compound-card.completed [class*=cmp-check] {
  opacity: 1 !important;
}


/* ─── SIGUIENTE TOMA / BRIEF-NEXT · LEVEL 2 + margin fix ─── */
html body #tab-protocol .brief-next,
html body #tab-protocol [class*=brief-next] {
  box-shadow: var(--elev-2) !important;
}
/* FIX cascada (audit): el margen lo controla el contenedor #brief-next-row, no .brief-next */
html body #tab-protocol #brief-next-row {
  margin-left: 6px !important;
  margin-right: 6px !important;
}


/* ─── ALERT CARDS · LEVEL 2 ─── */
html body .alert-n3,
html body .alert-n2,
html body .alert-n1,
html body [class*=alert-n3],
html body [class*=alert-n2] {
  box-shadow: var(--elev-2) !important;
}


/* ─── BIO SECTION CARDS · LEVEL 2 ─── */
html body .bio-section-card,
html body [class*=bio-section-card] {
  box-shadow: var(--elev-2) !important;
}


/* ─── SUGGESTED REPLIES · LEVEL 2 + GEORGIA → INTER ─── */
html body .sugg,
html body .btn-s,
html body .suggestions-bar .sugg,
html body [class*=sugg-] {
  box-shadow: var(--elev-2) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
html body .sugg *,
html body .btn-s *,
html body .suggestions-bar * {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}


/* ─── BRIEF-DZ-TEXT · quitar shadow agresiva ─── */
html body .brief-dz-text,
html body [class*=brief-dz-text] {
  box-shadow: none !important;
}


/* ─── GPMI-BADGE · LEVEL 2 ─── */
html body .gpmi-badge,
html body [class*=gpmi-badge] {
  box-shadow: var(--elev-2) !important;
}


/* ─── ADD-BTN · LEVEL 2 + gold inset ─── */
html body .add-btn {
  box-shadow: var(--elev-2),
              rgba(200, 164, 90, 0.08) 0px 0px 0px 1px inset !important;
}


/* ─── INSIGHTS · EL GRAN GAP ─── */
html body .ins-v5-score-card,
html body [class*=ins-v5-score-card] {
  box-shadow: var(--elev-3) !important;
}
html body .ins-v5-tabs,
html body [class*=ins-v5-tabs] {
  box-shadow: var(--elev-1) !important;
}
html body .ins-v5-obj-card,
html body [class*=ins-v5-obj-card] {
  box-shadow: var(--elev-2) !important;
}
html body .weekly-btn,
html body [class*=weekly-btn] {
  box-shadow: var(--elev-2),
              rgba(201, 169, 97, 0.28) 0px 4px 16px 0px !important;
}
html body .ins-v5-subcard,
html body [class*=ins-v5-subcard] {
  box-shadow: var(--elev-2) !important;
}


/* ─── ACTIVE TABS · quitar sage glow ruidoso ─── */
html body .subnav-btn.active,
html body .subnav-btn.on,
html body .ins-v5-tab.on,
html body .ins-v5-tab.active,
html body .ins-v5-pt-btn.on,
html body .ins-v5-pt-btn.active {
  box-shadow: none !important;
}


/* ─── FIX cascada (audit) · Georgia → Inter en sugg dentro de #tab-chat ───
   La regla #tab-chat .sugg (1,2,1) ganaba a html body .sugg (1,1,1). */
html body #tab-chat .sugg,
html body #tab-chat .sugg *,
html body #tab-chat .btn-s,
html body #tab-chat .btn-s * {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* FIX cascada final (MCP audit) · Georgia en sugg · ganador era
   #tab-chat .suggestions-bar .sugg (1,2,1) · este (1,2,3) lo cierra. */
html body #tab-chat .suggestions-bar .sugg,
html body #tab-chat .suggestions-bar .sugg * {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* === FIN FASE A · ELEVATION SHADOW SYSTEM · 8 jun 2026 === */


/* ================================================================
   VISUAL FIXES CONSOLIDADO · Aprobado MCP runtime · 9 jun 2026
   1. Subnav unification (PROTOCOLO / BIO / PERFIL = INSIGHTS)
   2. AJUSTES selectors sage → gold (TEMA, IDIOMA)
   3. Toggle kv-toggle.on sage → gold
   ================================================================ */

/* 1 · SUBNAV UNIFICATION (padding .tab-scroll retirado · cambiaba tamaño de cards) */
html body #tab-protocol .subnav,
html body #tab-bio .subnav,
html body #tab-profile .subnav {
  border-radius: 22px !important;
  min-height: 54px !important;
  box-shadow: var(--elev-1) !important;
}
/* BIO · subnav igual de ancho que las cards (cards a 16px · el subnav original
   estaba a 6px = 10px más ancho cada lado · lo igualamos). */
html body #tab-bio .subnav {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
html body #tab-protocol .subnav .subnav-btn,
html body #tab-bio .subnav .subnav-btn,
html body #tab-profile .subnav .subnav-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  padding: 0 16px !important;
  height: auto !important;
}

/* 2 · AJUSTES · TEMA / IDIOMA sage → gold */
html body .lang-opt.active {
  background-color: rgba(235, 231, 221, 0.14) !important;
  border: 1px solid rgba(200, 164, 90, 0.42) !important;
  color: rgb(212, 179, 108) !important;
  border-radius: 18px !important;
}
html body .lang-opt:not(.active) {
  border-radius: 18px !important;
}

/* 3 · TOGGLE · No molestar nocturno sage → gold
   El toggle real (#kv-dnd-toggle en PERFIL) lo gobierna
   #tab-profile .kv-toggle.on { background: var(--sage) } (1,2,0) · scope
   #tab-profile (1,2,2) para ganar. */
html body .kv-toggle.on,
html body #tab-profile .kv-toggle.on {
  background: rgba(200, 164, 90, 0.85) !important;
}

/* === FIN VISUAL FIXES CONSOLIDADO · 9 jun 2026 === */


/* ─── billing toggle MENSUAL/ANUAL → mismo sistema gold que los selectores ───
   Botones .kv-tab.active.on en #ptab-billing · antes sage vía .bill-toggle .active (0,2,1)
   · este #ptab-billing (1,2,2) gana. */
html body #ptab-billing .kv-tab.active,
html body #ptab-billing .kv-tab.on {
  background-color: rgba(235, 231, 221, 0.14) !important;
  border: 1px solid rgba(200, 164, 90, 0.42) !important;
  color: rgb(212, 179, 108) !important;
  border-radius: 18px !important;
}
html body #ptab-billing .kv-tab:not(.active):not(.on) {
  border-radius: 18px !important;
}
/* === FIN billing toggle gold === */


/* Confeti: sin filter durante la animación + tamaño DPR3 */
html body #tab-protocol .compound-card.just-completed {
  overflow: visible !important;
  filter: none !important;
}
html body .cmp-confetti-1 { width: 10px !important; height: 10px !important; }
html body .cmp-confetti-2 { width: 8px !important;  height: 8px !important;  }
html body .cmp-confetti-3 { width: 10px !important; height: 6px !important;  }
html body .cmp-confetti-4 { width: 8px !important;  height: 8px !important;  }
html body .cmp-confetti-5 { width: 6px !important;  height: 6px !important;  }
html body .cmp-confetti-6 { width: 10px !important; height: 6px !important;  }

/* ═══ FIX CHAT · input negro → cream (SOLO Geneva) ═══
   El "negro" del chat son DOS capas: el contenedor .input-row (var(--forest-deep))
   y el campo .input-area (var(--forest)). Ambos a cream/paper solo en tema claro.
   Scope [data-geneva-mode="on"] para NO romper el chat en modo oscuro. */
html[data-geneva-mode="on"] body #tab-chat .input-row {
  background-color: rgb(235, 231, 221) !important;
  border-top: 1px solid rgba(42, 59, 51, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* campo de escritura: paper claro + borde sutil + texto/placeholder verde oscuro legible.
   Incluye #chat-input (2 IDs) para ganar a la regla pre-existente que lo fija en var(--card). */
html[data-geneva-mode="on"] body #tab-chat .input-area,
html[data-geneva-mode="on"] body #tab-chat #chat-input {
  background-color: rgb(245, 241, 232) !important;
  border: 1px solid rgba(42, 59, 51, 0.16) !important;
  color: rgb(42, 59, 51) !important;
  -webkit-text-fill-color: rgb(42, 59, 51) !important;
}
html[data-geneva-mode="on"] body #tab-chat .input-area::placeholder,
html[data-geneva-mode="on"] body #tab-chat #chat-input::placeholder {
  color: rgba(42, 59, 51, 0.42) !important;
  -webkit-text-fill-color: rgba(42, 59, 51, 0.42) !important;
  opacity: 1 !important;
}
/* FIN FIX CHAT input */

/* ═══ FIX CHAT · nombre del saludo en dorado ═══
   clinicalGreeting envuelve el nombre en <em> (no en .drk-empty-name) · sin regla
   hereda el color oscuro del greeting. Restaurar dorado italic (look original). */
html body #tab-chat .drk-empty-greeting em {
  color: var(--gold, #C8A45A) !important;
  -webkit-text-fill-color: var(--gold, #C8A45A) !important;
  font-style: italic !important;
}
/* FIN FIX CHAT nombre dorado */

/* ═══ FIX CHAT · jerarquía saludo · 2ª línea (datos) más pequeña ═══
   clinicalGreeting devuelve 2 .brief-greeting-line · en el chat heredan 28px (.drk-empty-greeting).
   Saludo grande se queda; la línea de datos (Recovery/HRV/racha) baja a ~15px con aire. */
html body #tab-chat .drk-empty-greeting .brief-greeting-line:last-child {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  display: block !important;
  margin-top: 10px !important;
}
/* FIN FIX CHAT jerarquía saludo */

/* ═══ FIX PROTOCOLO · jerarquía saludo · 2ª línea = estilo brief-sub ═══
   clinicalGreeting devuelve 2 .brief-greeting-line dentro de #brief-greet (kv-hero-title).
   La 2ª línea (Recovery/racha) heredaba el tamaño del saludo (24px+) → enorme y se cortaba.
   Replicar el sub original (.brief-greet-sub): 14px · Inter · 400 · opacity 0.72.
   NO toca la 1ª línea (saludo principal). */
html body #tab-protocol #brief-greet .brief-greeting-line:last-child {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  letter-spacing: -0.1px !important;
  opacity: 0.72 !important;
  display: block !important;
  margin-top: 6px !important;
}
/* strong de la 2ª línea (valores 78% / "2 días") sin negrita dura · paridad sub */
html body #tab-protocol #brief-greet .brief-greeting-line:last-child strong {
  font-weight: 600 !important;
}
/* FIN FIX PROTOCOLO jerarquía saludo */

/* ═══ F3 · PROTOCOLO · brief greeting wrap multi-línea (jun 11) ═══
   .brief-greet.kv-hero-title resolvía white-space: nowrap heredado · greeting
   contextual "son las X de la madrugada/tarde/noche" desbordaba a la derecha.
   La misma clase en #tab-chat .drk-empty-greeting funciona porque está scoped.
   Aquí scope explícito a PROTOCOLO con override defensivo. */
html body #tab-protocol .brief-greet.kv-hero-title,
html body #tab-protocol .brief-greet.kv-hero-title .brief-greeting-line,
html body #tab-protocol #brief-greet,
html body #tab-protocol #brief-greet .brief-greeting-line {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
/* FIN F3 FIX PROTOCOLO brief wrap */

/* ═══ N5 · Geneva mode · glow ambient OFF · uniformidad cream Patek (jun 11) ═══
 * El .app-shell::before tiene glow sage 6% (linear-gradient rgba(107,168,142,0.06) 0% → 0% 50%)
 * clampado por env(safe-area-inset-top) en iPhone PWA. Esto crea diferencia visible
 * de 17 RGB entre safe-area-top (cream solid) y el resto del body (cream + sage tint).
 * En Geneva (Patek tier), el cream uniforme es más editorial · sage tint NO suma valor.
 * Override el token --glow-ambient solo en Geneva · Dark mode mantiene el glow original.
 * (kv-state-* nunca se aplica en JS → :root es el origen real · html[geneva] (0,1,1) gana.) */
html[data-geneva-mode="on"] {
  --glow-ambient: linear-gradient(180deg, transparent 0%, transparent 100%) !important;
}
/* FIN N5 */

/* ═══ F1b · Geneva mode · nav píldora shadow atenuada (jun 11) ═══
 * Box-shadow original (línea 13320): 0 -4px 24px rgba(5,14,11,0.18)
 * Justificada en Dark mode (separación visual del contenido scrolleado).
 * En Geneva (cream body), el blur 24px proyecta halo oscuro lateral/inferior
 * visible como "sombra debajo del nav" sobre la zona del home indicator iPhone.
 * Atenuamos en Geneva: blur 10px + verde patek 0.08 (más cálido + sutil).
 * NO toca el bg dark sólido del nav (decisión 2A constitución sec.3). */
html[data-geneva-mode="on"] body nav#bottom-nav.bottom-nav,
html[data-geneva-mode="on"] body #bottom-nav.bottom-nav,
html[data-geneva-mode="on"] body .bottom-nav,
html[data-geneva-mode="on"] body .bnav,
html[data-geneva-mode="on"] body .tab-bar {
  box-shadow: 0 -2px 10px rgba(42, 59, 51, 0.10) !important;
}
/* FIN F1b */

/* ═══════════ FRANJA-INFERIOR · FIX MULTI-CAPA · jun 11 v5 ═══════════
 * Auditoría píxel a píxel (3 capturas iPhone Carlos) identificó franja
 * oliva oscuro #42413D en y_logical 785-818 (56-89px arriba del filo bottom),
 * IDÉNTICA en login/protocolo/bio → no es solo el nav.
 * Causa: superposición de capas dark sobre cream. Neutralizadas en Geneva. */

/* CAPA 1 (PRIMARIA) · .app-shell::after lleva un radial dark bottom
   rgba(8,19,15,0.55) at 50% 100% que pinta franja oscura en TODAS las
   pantallas (incl. login sin nav). OFF en Geneva · Dark conserva el gradient. */
html[data-geneva-mode="on"] .app-shell::after,
html[data-geneva-mode="on"] #app-shell::after {
  background: transparent !important;
  background-image: none !important;
}

/* CAPA 2 · box-shadow del nav aún más sutil en Geneva (F1b 0.10 → 0.04) */
html[data-geneva-mode="on"] body nav#bottom-nav.bottom-nav,
html[data-geneva-mode="on"] body #bottom-nav.bottom-nav,
html[data-geneva-mode="on"] body .bottom-nav,
html[data-geneva-mode="on"] body .bnav,
html[data-geneva-mode="on"] body .tab-bar {
  box-shadow: 0 -1px 4px rgba(42, 59, 51, 0.04) !important;
}

/* CAPA 3 · #drk-pulse-card oculto cuando NO hay pulse activo.
   NOTA DESVIACIÓN VERIFICADA: el prompt usaba `.drk-pulse-overlay:not(.show)`,
   pero `.show` va en la CARD (no en el overlay) → ese selector matchearía SIEMPRE
   y rompería el pulse permanentemente (showDrkPulse es función intocable).
   Mecanismo real (verificado L33449-33478): pulse activo = overlay `.active` +
   card `.show`; al cerrar = card `.hide` y luego overlay pierde `.active`.
   Por eso el estado inactivo se identifica con `:not(.active)` en el overlay:
   oculta la card en reposo (satisface el check) y la muestra/anima cuando .active. */
html body .drk-pulse-overlay:not(.active) .drk-pulse-card {
  display: none !important;
  visibility: hidden !important;
}
/* FIN FRANJA-INFERIOR FIX */

/* ═══════════════════════════════════════════════════════════════
   IOS-WEBKIT-OVERLAY-FIX · jun 11 v7 · BLOQUEANTE RELEASE
   ───────────────────────────────────────────────────────────────
   Causa raíz: iOS Safari mantiene compositing layer GPU activo en
   elementos position:fixed + backdrop-filter + opacity:0, procesando
   el blur y filtrando el bg semi-transparente al frame (franja #42413D).
   Chromium maneja compositing distinto, no reproduce.

   Fix: visibility:hidden en estado inactivo · previene la generación
   del compositing layer sin romper el fade-in de opacity.

   DESVIACIÓN VERIFICADA DEL PROMPT (seguridad · evita romper login):
   El prompt incluía .modal-bg y .update-modal-bg, PERO:
   - .modal-bg envuelve #onboard-modal (LOGIN/ONBOARDING) y #expired-link-modal
   - .update-modal-bg vive dentro de #update-modal
   Ambos se activan por style.display (none↔block/flex), NO por clase.
   Con :not(.show):not(.active):not(.open) quedarían visibility:hidden
   PERMANENTE → romperían el login al mostrarse. Además usan display:none
   en reposo → NO generan compositing layer ni contribuyen a la franja
   (el bug es exclusivo de opacity:0 + backdrop-filter). Por eso se
   EXCLUYEN: ni necesarios para el fix ni seguros.

   Incluidos solo los overlays opacity:0 con activación por CLASE verificada:
   avatar(.open) · add-sheet(.show) · mgr-context(.show) · sheet-overlay(.open)
   reset-modal-overlay(.open · CSS) · drz-advice-overlay (no existe · inocuo).
   ═══════════════════════════════════════════════════════════════ */
#avatar-sheet-overlay:not(.open),
#add-sheet-overlay:not(.show):not(.active):not(.open),
#mgr-context-overlay:not(.show):not(.active):not(.open),
.sheet-overlay:not(.show):not(.active):not(.open),
.reset-modal-overlay:not(.show):not(.active):not(.open),
.drz-advice-overlay:not(.show):not(.active):not(.open) {
  visibility: hidden !important;
}
/* FIN IOS-WEBKIT-OVERLAY-FIX */

/* ═══════════════════════════════════════════════════════════════
   IOS-DRAWER-SHADOW-FIX · jun 11 v8 · BLOQUEANTE RELEASE
   ───────────────────────────────────────────────────────────────
   Causa: drawers (#add-sheet, #drz-sheet, #avatar-sheet) en estado
   inactivo (translate(…,100%)) están "fuera" del viewport por abajo,
   pero su box-shadow con offset Y negativo y blur grande proyecta
   visualmente HACIA ARRIBA en la zona del nav píldora (bottom:
   env(safe-area-inset-bottom) + 8px). El nav opaco bloquea el centro
   pero la shadow emerge a los lados → "elevación / corte" visible
   solo en iOS Safari (Chromium no amplifica este compositing).

   Fix: visibility:hidden cuando el drawer está inactivo · previene
   el rendering de la shadow sin romper la transition de transform.
   Mismo patrón que IOS-WEBKIT-OVERLAY-FIX (v7).

   ACTIVACIÓN VERIFICADA (todas por clase · seguro):
   - #add-sheet / .add-sheet → .show (L5215 · sheet.classList.add('show'))
   - #drz-sheet → .open (L10951 · classList.add('open'))
   - #avatar-sheet → .open (L7580 · classList.add('open'))
   NO incluye #onboard-modal/#expired-link-modal/#update-modal
   (usan style.display · romperían login si se incluyeran). */
#add-sheet:not(.open):not(.show):not(.active),
#drz-sheet:not(.open):not(.show):not(.active),
#avatar-sheet:not(.open):not(.show):not(.active),
.add-sheet:not(.open):not(.show):not(.active),
/* v8b · INSIGHTS · #ins-v5-sheet (detalle de pilar) tiene box-shadow 0 -8px 32px
   rgba(0,0,0,0.4) + translateY(100%) inactivo → misma sombra hacia el nav en
   Insights. Activación verificada por .open (sheet.classList.add('open') L40561). */
#ins-v5-sheet:not(.open):not(.show):not(.active),
.ins-v5-sheet:not(.open):not(.show):not(.active) {
  visibility: hidden !important;
}
/* FIN IOS-DRAWER-SHADOW-FIX */