/* ═══════════════════════════════════════════════════════════════
   TOOLBOX CLÍNICO — hub.
   Se apoya en ../platform-home/home.css (primitivas, botones, revelado)
   y en ../mph-plus/member.css (barra de miembro, sello, puerta).
   Solo presentación: la puerta de acceso y sus ids/scripts no cambian.
═══════════════════════════════════════════════════════════════ */

.tb :where(ol, ul) { list-style: none; margin: 0; padding: 0; }
.tb :where(a) { text-decoration: none; }

/* ── Hero ─────────────────────────────────────────────────── */
.tbh { position: relative; overflow: clip; isolation: isolate; background: var(--ink); color: #fff; border-bottom: 1px solid var(--mx-gold); }
.tbh__glow { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(760px 420px at 88% -4%, rgba(204,41,54,.26), transparent 70%),
  radial-gradient(620px 360px at 4% 108%, rgba(232,150,12,.10), transparent 70%); }
.tbh__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(40px, 6vw, 104px); align-items: end; padding-top: clamp(52px, 6.4vw, 96px); padding-bottom: clamp(52px, 6vw, 88px); }
.tbh__plate { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 10px; border: 1px solid var(--mx-gold); border-radius: 999px; margin-bottom: clamp(26px, 3vw, 40px);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--mx-t1); }
.tbh__plate .mx-seal { width: 22px; height: 22px; }
.tbh__t { font-weight: 800; line-height: .88; font-size: clamp(60px, 9vw, 132px); color: #fff; }
.tbh__t .hl { color: #E03A48; position: relative; display: inline-block; }
.tbh__t .hl::after { content: ''; position: absolute; left: 0; right: 4%; bottom: .03em; height: .06em; background: currentColor; transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease-out) 700ms; }
.is-ready .tbh__t .hl::after { transform: scaleX(1); }
.tbh__lead { margin-top: clamp(24px, 3vw, 36px); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: rgba(240,242,244,.9); max-width: 46ch; }
.tbh__lead strong { color: #fff; }
.tbh__stats { display: flex; gap: clamp(28px, 4vw, 56px); margin-top: clamp(30px, 3.4vw, 46px); }
.tbh__stat { padding-top: 14px; border-top: 2px solid var(--mx-amber); min-width: 104px; }
.tbh__stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(46px, 5vw, 68px); line-height: .9; color: #fff; font-variant-numeric: tabular-nums; }
.tbh__stat span { display: block; margin-top: 8px; font-size: 15px; color: var(--on-ink-2); }
.tbh__cta { margin-top: clamp(26px, 3vw, 38px); display: flex; flex-wrap: wrap; gap: 14px; }

/* Índice de módulos */
.tbi__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--mx-amber); padding-bottom: 14px; border-bottom: 1px solid var(--mx-gold); }
.tbi a { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: baseline; gap: 6px; padding: 15px 4px; border-bottom: 1px solid rgba(240,242,244,.12); color: #fff; transition: padding-left 300ms var(--ease-out), background-color 200ms; }
.tbi a:hover, .tbi a:focus-visible { padding-left: 14px; background: rgba(240,242,244,.04); }
.tbi__n { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: .06em; color: var(--steel); font-variant-numeric: tabular-nums; }
.tbi__m { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.tbi__c { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--on-ink-2); font-variant-numeric: tabular-nums; }
.tbi__c small { font-family: var(--font-body); font-size: 14px; font-weight: 400; margin-left: 6px; color: var(--steel); }

/* ── Herramienta destacada ───────────────────────────────── */
.tbf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 84px); align-items: center; }
.tbf__tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-ink); margin-bottom: 18px; }
.tbf__tag .mx-seal { width: 20px; height: 20px; }
.tbf__tag b { color: var(--text-3); font-weight: 600; letter-spacing: .1em; }
.tbf__cat { margin-top: 16px; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--red-d); }
.tbf__d { margin-top: 18px; font-size: 18px; line-height: 1.62; color: var(--text-2); max-width: 48ch; }
.tbf__ev { margin-top: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.tbf__ev span { font-size: 15px; color: var(--text-3); }
.tbf__panel { background: var(--ink); color: #fff; border-radius: 10px; padding: clamp(22px, 2.6vw, 34px); box-shadow: var(--shadow-m); position: relative; overflow: hidden; }
.tbf__panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--mx-amber); }
.tbf__ph { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.tbf__ph b { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--mx-t2); }
.tbf__ph span { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: .04em; color: #fff; }
.si { display: grid; gap: 8px; }
.si__r { --c: var(--steel); position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 6px; background: rgba(240,242,244,.05); border-left: 4px solid var(--c); overflow: hidden; }
.si__r::after { content: ''; position: absolute; inset: 0; background: var(--c); opacity: .13; transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 110ms + 200ms); }
.is-in .si__r::after, .si.is-in .si__r::after { transform: scaleX(1); }
.si__r span { position: relative; font-weight: 500; font-size: 17px; }
.si__r em { position: relative; font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: .03em; color: #fff; font-variant-numeric: tabular-nums; }
.si__r--hi { --c: #7B8FA6; } .si__r--no { --c: #6FCF97; } .si__r--le { --c: #E8960C; } .si__r--sg { --c: #E8643C; } .si__r--se { --c: #E0404E; }
.tbf__f { margin-top: 18px; font-size: 15px; color: var(--mx-t3); }

/* ── Catálogo por módulos ────────────────────────────────── */
.tbm { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); padding: clamp(36px, 4.4vw, 64px) 0; border-top: 1px solid var(--line-2); }
.tbm:first-of-type { border-top: 0; padding-top: 0; }
.tbm__h { position: sticky; top: 92px; align-self: start; }
.tbm__n { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .12em; color: var(--red); font-variant-numeric: tabular-nums; }
.tbm__t { margin-top: 10px; font-weight: 800; font-size: clamp(34px, 3.6vw, 52px); line-height: .94; text-wrap: balance; }
.tbm__c { margin-top: 14px; display: flex; align-items: center; gap: 9px; font-size: 15.5px; color: var(--text-2); }
.tbm__c .mx-seal { width: 18px; height: 18px; }
.tbm__list { display: grid; gap: 12px; }
.trow { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px 22px; align-items: start; padding: 22px 24px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 200ms; }
.trow::before { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); transform: scaleY(0); transition: transform 300ms var(--ease-out); }
.trow:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: rgba(13,27,42,.28); }
.trow:hover::before { transform: scaleY(1); }
.trow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.trow__ic { width: 48px; height: 48px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.trow__ic svg { width: 24px; height: 24px; }
.trow__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.3vw, 32px); line-height: 1; text-transform: uppercase; }
.trow__c { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--red-d); }
.trow__d { margin-top: 8px; font-size: 16.5px; line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.trow__r { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.trow__id { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .12em; color: var(--text-3); white-space: nowrap; }
.trow__tag { font-size: 13.5px; font-weight: 600; color: var(--text); padding: 4px 10px; border-radius: 4px; background: var(--mist); white-space: nowrap; }
.trow__go { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: background-color 220ms, border-color 220ms, color 220ms; }
.trow__go svg { width: 18px; height: 18px; transition: transform 260ms var(--ease-out); }
.trow:hover .trow__go { background: var(--red); border-color: var(--red); color: #fff; }
.trow:hover .trow__go svg { transform: translateX(3px); }

/* ── Aviso clínico ───────────────────────────────────────── */
.tbn { display: flex; gap: 14px; align-items: flex-start; padding: 22px 26px; border: 1px solid var(--line-2); border-left: 4px solid var(--amber); border-radius: 6px; background: var(--paper); font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.tbn svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--amber-ink); }
.tbn strong { color: var(--text); }

/* ── Seguí entrenando ────────────────────────────────────── */
.tbp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(240,242,244,.2); }
.tbp a { display: grid; gap: 10px; padding: 28px 28px 30px 0; color: #fff; border-right: 1px solid rgba(240,242,244,.14); transition: background-color 240ms; }
.tbp a + a { padding-left: 28px; }
.tbp a:last-child { border-right: 0; }
.tbp a:hover { background: rgba(240,242,244,.04); }
.tbp__k { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--mx-amber); }
.tbp__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 2.8vw, 38px); line-height: .98; text-transform: uppercase; }
.tbp__d { font-size: 16.5px; line-height: 1.55; color: var(--on-ink-2); }
.tbp__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
.tbp__go svg { width: 17px; height: 17px; transition: transform 260ms var(--ease-out); }
.tbp a:hover .tbp__go svg { transform: translateX(5px); }
.tbp--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(240,242,244,.14); }
.tbp--2 a:nth-child(2) { border-right: 0; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1020px) {
  .tbh__grid, .tbf__grid { grid-template-columns: 1fr; }
  .tbm { grid-template-columns: 1fr; gap: 22px; }
  .tbm__h { position: static; }
  .tbp { grid-template-columns: 1fr; }
  .tbp a, .tbp a + a { padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(240,242,244,.14); }
}
@media (max-width: 640px) {
  .trow { grid-template-columns: 44px minmax(0, 1fr); padding: 18px; gap: 6px 14px; }
  .trow__ic { width: 44px; height: 44px; }
  .trow__r { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; margin-top: 6px; }
  .tbh__stats { gap: 28px; }
}
/* Celulares angostos (320–360 px): que ningún título ni ficha empuje el ancho de la página */
.trow, .trow > *, .tbm__h, .tbm__list, .tbm__t, .tbm__n, .tbm__c { min-width: 0; }
.trow__t, .tbm__t, .tbm__c, .trow__d { overflow-wrap: anywhere; }
@media (max-width: 640px) { .trow__r { flex-wrap: wrap; gap: 8px 12px; } }
@media (max-width: 380px) { .trow { padding: 16px 14px; gap: 6px 12px; } .trow__t { font-size: 24px; } }
/* (bloque reduced-motion retirado) */

/* Movimiento: el sitio ya no se apaga con el ajuste «reducir movimiento» del teléfono (muchos Android lo activan con el ahorro de batería y dejaba todo estático). Las animaciones son suaves (fundidos y desplazamientos cortos). */

/* ── Consola: rejilla técnica + pulso vivo en la cabecera ───── */
.tbh::before, .edh::before, .edm::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 60% 20%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 80% 90% at 60% 20%, #000 15%, transparent 75%);
}
.tbh::after, .edh::after, .edm::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 14px; height: 48px; z-index: -1; pointer-events: none; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' viewBox='0 0 240 48'%3E%3Cpath d='M0 26h70l6-3 6 3h22l5 6 8-26 8 34 6-14h26l8-5 9 5h60' fill='none' stroke='%23E8960C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 240px 48px; animation: mx-ecg-scroll 6s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  filter: drop-shadow(0 0 5px rgba(232,150,12,.6));
}
@keyframes mx-ecg-scroll { from { background-position-x: 0; } to { background-position-x: -240px; } }