/*
 * Cardioteca.com — Guías Clínicas Interactivas
 * Guía: Miocardiopatía Hipertrófica (MCH)
 * Carpeta: /components/com_cardiotools/mch/
 * Versión: 20260601
 * © Campus Formación Sanitaria S.L. — CIF B88633318
 */

/* ── VARIABLES Y RESET ───────────────────────────────────── */
#mch-root {
  --bg:#f0f4f8; --surface:#ffffff; --surface2:#f8fafc;
  --border:#dde3ed; --border-focus:#0e6fbd;
  --navy:#0d2d5e; --navy2:#1a4a8a;
  --teal:#0891b2; --teal2:#0e7490;
  --green:#059669; --blue:#2563eb; --amber:#d97706; --red:#dc2626;
  --text:#1e293b; --text2:#475569; --text3:#94a3b8;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);
  --shadow2:0 2px 8px rgba(0,0,0,.12),0 8px 32px rgba(0,0,0,.08);
  font-family:'Source Sans 3',sans-serif;
  font-size:15px; line-height:1.6; min-height:auto;
  background:var(--bg);
}
#mch-root * {
  box-sizing:border-box; margin:0; padding:0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
#mch-root strong, #mch-root b { display:inline; font-weight:700; }
#mch-root #mch-wrapper { max-width:780px; margin:0 auto; padding:24px 16px 56px; }

/* ── HEADER ─────────────────────────────────────────────── */
#mch-root .app-header { text-align:center; margin-bottom:32px; }
#mch-root .app-header .badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--navy); color:#fff;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 14px; border-radius:20px; margin-bottom:14px;
  font-family:'Outfit',sans-serif;
}
#mch-root .app-header .badge .dot {
  width:6px; height:6px; border-radius:50%; background:var(--teal);
  animation:mch-pulse 2s infinite;
}
@keyframes mch-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
#mch-root .app-header h1 {
  font-family:'Outfit',sans-serif; font-size:28px; font-weight:700;
  color:var(--navy); line-height:1.2; margin-bottom:6px;
}
#mch-root .app-header h1 span { color:var(--teal); }
#mch-root .app-header p { color:var(--text2); font-size:14px; max-width:560px; margin:0 auto; }

/* ── PROGRESS BAR ────────────────────────────────────────── */
#mch-root .mch-prog-bar {
  display:flex; align-items:center; margin-bottom:28px; padding:0 4px;
}
#mch-root .prog-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
#mch-root .prog-circle {
  width:32px; height:32px; border-radius:50%; display:flex;
  align-items:center; justify-content:center;
  font-size:12px; font-weight:700; font-family:'Outfit',sans-serif;
  transition:all .3s; border:2px solid var(--border);
  background:var(--surface); color:var(--text3);
}
#mch-root .prog-circle.active { border-color:var(--navy); background:var(--navy); color:#fff; }
#mch-root .prog-circle.done  { border-color:var(--teal);  background:var(--teal);  color:#fff; }
#mch-root .prog-label {
  font-size:11px; color:var(--text3); font-weight:500;
  text-align:center; line-height:1.3; white-space:nowrap;
}
#mch-root .prog-label.active { color:var(--navy); font-weight:600; }
#mch-root .prog-label.done   { color:var(--teal); }
#mch-root .prog-line {
  flex:1; height:2px; background:var(--border);
  transition:background .3s; max-width:60px; margin-bottom:18px;
}
#mch-root .prog-line.done { background:var(--teal); }

/* ── CARD ────────────────────────────────────────────────── */
#mch-root .card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:28px; box-shadow:var(--shadow); margin-bottom:16px;
}
#mch-root .card-title {
  font-family:'Outfit',sans-serif; font-size:18px; font-weight:600;
  color:var(--navy); margin-bottom:6px;
}
#mch-root .card-subtitle { font-size:13px; color:var(--text2); margin-bottom:24px; }

/* ── PORTADA — HUB GRID ─────────────────────────────────── */
#mch-root .hub-grid { display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:8px; }
@media(min-width:520px){ #mch-root .hub-grid { grid-template-columns:1fr 1fr; } }
#mch-root .hub-card {
  background:var(--surface); border:2px solid var(--border);
  border-radius:16px; padding:22px;
  display:flex; flex-direction:column; gap:14px;
  transition:all .2s; cursor:pointer;
}
#mch-root .hub-card:hover {
  border-color:var(--teal); box-shadow:var(--shadow2); transform:translateY(-1px);
}
#mch-root .hub-top { display:flex; align-items:center; gap:14px; }
#mch-root .hub-icon {
  width:48px; height:48px; border-radius:13px;
  background:#fff; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; flex-shrink:0;
}
#mch-root .hub-num {
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--text3); letter-spacing:.1em; text-transform:uppercase; display:block;
}
#mch-root .hub-title {
  font-family:'Outfit',sans-serif; font-size:16px; font-weight:700;
  color:var(--navy); line-height:1.25; margin-top:2px;
}
#mch-root .hub-desc { font-size:13px; color:var(--text2); line-height:1.55; flex:1; }
#mch-root .hub-footer { display:flex; align-items:center; }
#mch-root .hub-btn {
  background:var(--navy); color:#fff; border:none; border-radius:8px;
  padding:9px 20px; font-family:'Outfit',sans-serif; font-size:13px;
  font-weight:600; cursor:pointer; transition:background .15s;
  letter-spacing:.02em; pointer-events:none;
}
#mch-root .hub-card:hover .hub-btn { background:var(--navy2); }

/* ── PATH-BAR ───────────────────────────────────────────── */
#mch-root .path-bar {
  background:linear-gradient(135deg,#eff6ff,#ecfdf5);
  border:1px solid var(--border); border-radius:10px;
  padding:10px 16px; margin-bottom:20px;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
}
#mch-root .path-bar .pb-label {
  font-size:11px; color:var(--text3); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  font-family:'Outfit',sans-serif; flex-shrink:0; margin-right:2px;
}
#mch-root .path-bar .pb-chip {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:4px 11px;
  font-size:12px; color:var(--navy); font-weight:600;
  font-family:'Outfit',sans-serif;
}

/* ── NAVIGATION BUTTONS ─────────────────────────────────── */
#mch-root .nav-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:24px; gap:12px;
}
#mch-root .btn-back {
  background:none; border:1.5px solid var(--border); border-radius:8px;
  padding:10px 20px; font-family:'Source Sans 3',sans-serif;
  font-size:14px; font-weight:500; color:var(--text2); cursor:pointer; transition:all .2s;
}
#mch-root .btn-back:hover { border-color:var(--navy); color:var(--navy); }
#mch-root .btn-next {
  background:var(--navy); color:#fff; border:none; border-radius:8px;
  padding:11px 28px; font-family:'Outfit',sans-serif;
  font-size:15px; font-weight:600; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:8px; letter-spacing:.01em;
}
#mch-root .btn-next:hover {
  background:var(--navy2); transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(13,45,94,.25);
}
#mch-root .btn-next:disabled {
  background:var(--text3); cursor:not-allowed;
  transform:none; box-shadow:none;
}
#mch-root .btn-analyze {
  background:linear-gradient(135deg,var(--teal2),var(--navy));
  color:#fff; border:none; border-radius:8px; padding:13px 32px;
  font-family:'Outfit',sans-serif; font-size:16px; font-weight:700;
  cursor:pointer; transition:all .2s; width:100%;
  display:flex; align-items:center; justify-content:center;
  gap:10px; letter-spacing:.02em; box-shadow:0 4px 16px rgba(8,145,178,.3);
}
#mch-root .btn-analyze:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(8,145,178,.4); }
#mch-root .btn-restart {
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:8px; padding:10px 24px;
  font-family:'Source Sans 3',sans-serif; font-size:14px; font-weight:600;
  color:var(--text2); cursor:pointer; transition:all .2s; width:100%; margin-top:8px;
}
#mch-root .btn-restart:hover { background:var(--border); color:var(--navy); }
#mch-root .btn-home {
  background:none; border:1.5px solid var(--border); border-radius:8px;
  padding:10px 20px; font-family:'Source Sans 3',sans-serif;
  font-size:14px; font-weight:500; color:var(--text2); cursor:pointer;
  transition:all .2s; display:flex; align-items:center; gap:6px;
}
#mch-root .btn-home:hover { border-color:var(--teal); color:var(--teal); }

/* ── OPTION GRID ─────────────────────────────────────────── */
#mch-root .option-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
@media(min-width:520px){ #mch-root .option-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
#mch-root .option-btn {
  border:2px solid var(--border); background:var(--surface2);
  border-radius:12px; padding:16px 10px; cursor:pointer;
  text-align:center; transition:all .2s;
}
#mch-root .option-btn:hover {
  border-color:var(--teal); transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(8,145,178,.12);
}
#mch-root .option-btn.selected { border-color:var(--navy); background:var(--navy); color:#fff; }
#mch-root .option-btn .opt-icon { font-size:26px; margin-bottom:6px; display:block; }
#mch-root .option-btn .opt-name {
  font-family:'Outfit',sans-serif; font-size:13px; font-weight:600;
  color:var(--navy); display:block; line-height:1.3; margin-bottom:2px;
}
#mch-root .option-btn.selected .opt-name { color:#fff; }
#mch-root .option-btn .opt-sub {
  font-size:11px; color:var(--text3); display:block;
  font-family:'JetBrains Mono',monospace;
}
#mch-root .option-btn.selected .opt-sub { color:rgba(255,255,255,.65); }

/* ── OPTION LIST ─────────────────────────────────────────── */
#mch-root .option-list { display:flex; flex-direction:column; gap:10px; }
#mch-root .option-list-btn {
  border:2px solid var(--border); background:var(--surface2);
  border-radius:10px; padding:14px 18px; cursor:pointer; text-align:left;
  transition:all .2s; font-family:'Source Sans 3',sans-serif;
  font-size:14px; font-weight:500; color:var(--text);
}
#mch-root .option-list-btn:hover { border-color:var(--teal); }
#mch-root .option-list-btn.selected { border-color:var(--navy); background:var(--navy); color:#fff; }
#mch-root .option-list-btn .opt-code {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  display:block; margin-top:2px; opacity:.6;
}

/* ── FORM ────────────────────────────────────────────────── */
#mch-root .form-section { margin-bottom:24px; }
#mch-root .form-section-title {
  font-family:'Outfit',sans-serif; font-size:13px; font-weight:700;
  color:var(--teal2); text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:14px; padding-bottom:6px; border-bottom:1px solid var(--border);
}
#mch-root .form-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:500px){ #mch-root .form-grid.cols2 { grid-template-columns:1fr 1fr; } }
#mch-root .field { display:flex; flex-direction:column; gap:5px; }
#mch-root .field label {
  font-size:12px; font-weight:600; color:var(--text2);
  text-transform:uppercase; letter-spacing:.06em;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
#mch-root .field label .unit {
  font-family:'JetBrains Mono',monospace; font-weight:400;
  color:var(--text3); font-size:11px; text-transform:none; letter-spacing:0;
}
#mch-root .field label .opt {
  font-size:10px; color:var(--text3); font-weight:400; text-transform:none;
  letter-spacing:0; background:var(--bg); padding:1px 6px; border-radius:4px;
}
#mch-root .field input,
#mch-root .field select {
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:8px; padding:10px 12px; color:var(--text);
  font-family:'Source Sans 3',sans-serif; font-size:14px; width:100%;
  transition:border-color .15s; outline:none;
  -webkit-appearance:none; appearance:none;
}
#mch-root .field input:focus,
#mch-root .field select:focus { border-color:var(--border-focus); background:#fff; }
#mch-root button:focus-visible,
#mch-root .chip-label:focus-visible .chip-text,
#mch-root .mch-flag-chip:focus-visible { box-shadow:0 0 0 3px rgba(14,111,189,.35); }
#mch-root .field input::placeholder { color:var(--text3); }
#mch-root .field .hint,
#mch-root .hint { font-size:11px; color:var(--text3); margin-top:2px; font-style:italic; line-height:1.5; }

/* ── RADIO CHIPS ─────────────────────────────────────────── */
#mch-root .radio-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
#mch-root .chip-label { cursor:pointer; }
#mch-root .chip-label input { display:none; }
#mch-root .chip-text {
  display:inline-block; padding:6px 14px; border:1.5px solid var(--border);
  border-radius:20px; font-size:13px; font-weight:500; color:var(--text2);
  transition:all .15s; background:var(--surface2);
}
#mch-root .chip-label input:checked + .chip-text {
  background:var(--navy); border-color:var(--navy); color:#fff;
}
#mch-root .chip-label:hover .chip-text { border-color:var(--teal); }

/* ── RESULT COMPONENTS ──────────────────────────────────── */
#mch-root .result-header {
  display:flex; align-items:flex-start; gap:16px; margin-bottom:20px;
}
#mch-root .result-icon {
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; flex-shrink:0;
}
#mch-root .result-icon.diag    { background:#eff6ff; color:var(--blue); }
#mch-root .result-icon.risk    { background:#fef2f2; color:var(--red); }
#mch-root .result-icon.ohcm    { background:#f0fdf4; color:var(--green); }
#mch-root .result-icon.nhcm    { background:#eff6ff; color:var(--blue); }
#mch-root .result-icon.fa      { background:#fffbeb; color:var(--amber); }
#mch-root .result-icon.hta     { background:#f5f3ff; color:#7c3aed; }
#mch-root .result-icon.special { background:#fdf2f8; color:#db2777; }
#mch-root .result-icon.comorbid{ background:#f0f9ff; color:var(--navy); }
#mch-root .result-icon.team    { background:#fffbeb; color:var(--amber); }
#mch-root .result-icon.warning { background:#fef2f2; color:var(--red); }
#mch-root .result-icon.followup{ background:#f0fdf4; color:var(--green); }
#mch-root .result-icon.sport   { background:#eff6ff; color:var(--blue); }
#mch-root .result-icon.fam     { background:#fdf2f8; color:#db2777; }
#mch-root .result-icon.cad     { background:#f0f9ff; color:var(--navy); }
#mch-root .result-title {
  font-family:'Outfit',sans-serif; font-size:21px; font-weight:700;
  color:var(--navy); line-height:1.2; margin-bottom:4px;
}
#mch-root .result-subtitle { font-size:14px; color:var(--text2); }

/* ── EVIDENCE BADGES ────────────────────────────────────── */
#mch-root .evidence-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
#mch-root .ev-badge {
  display:inline-flex; align-items:center; gap:5px; padding:5px 12px;
  border-radius:20px; font-family:'JetBrains Mono',monospace;
  font-size:11px; font-weight:500; border:1.5px solid;
}
#mch-root .ev-badge.classI   { background:#f0fdf4; color:#065f46; border-color:#6ee7b7; }
#mch-root .ev-badge.classIIa { background:#eff6ff; color:#1e40af; border-color:#93c5fd; }
#mch-root .ev-badge.classIIb { background:#fffbeb; color:#92400e; border-color:#fcd34d; }
#mch-root .ev-badge.classIII { background:#fef2f2; color:#991b1b; border-color:#fca5a5; }
#mch-root .ev-badge.loe      { background:#f8fafc; color:var(--text2); border-color:var(--border); }
#mch-root .ev-badge.source   { background:#f0f9ff; color:var(--navy2); border-color:#bae6fd; }

/* ── RESULT TEXT & NOTES ────────────────────────────────── */
#mch-root .result-text { font-size:15px; color:var(--text); line-height:1.7; margin-bottom:16px; }
#mch-root .notes-list  { background:var(--surface2); border-radius:10px; padding:16px; margin-bottom:14px; }
#mch-root .notes-title {
  font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:10px; font-family:'Outfit',sans-serif;
}
#mch-root .notes-list ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
#mch-root .notes-list li { display:block; padding-left:14px; position:relative; font-size:13px; color:var(--text2); line-height:1.6; }
#mch-root .notes-list li::before { content:"•"; color:var(--teal); font-weight:700; position:absolute; left:0; top:0; }

/* ── FOLLOW-UP BOX ──────────────────────────────────────── */
#mch-root .followup-box {
  border:2px solid; border-radius:10px; padding:14px 18px;
  display:flex; align-items:flex-start; gap:12px; margin-bottom:14px;
}
#mch-root .followup-box.green  { border-color:#6ee7b7; background:#f0fdf4; }
#mch-root .followup-box.blue   { border-color:#93c5fd; background:#eff6ff; }
#mch-root .followup-box.amber  { border-color:#fcd34d; background:#fffbeb; }
#mch-root .followup-box .fu-icon { font-size:20px; flex-shrink:0; margin-top:2px; }
#mch-root .followup-box .fu-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-family:'Outfit',sans-serif; opacity:.7;
}
#mch-root .followup-box .fu-value {
  font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; margin-top:2px; line-height:1.25;
}
#mch-root .followup-box.green .fu-value { color:var(--green); }
#mch-root .followup-box.blue  .fu-value { color:var(--blue); }
#mch-root .followup-box.amber .fu-value { color:var(--amber); }

/* ── WARNING BOX ─────────────────────────────────────────── */
#mch-root .warning-box {
  background:#fef2f2; border:1px solid #fca5a5; border-radius:10px;
  padding:12px 16px; margin-bottom:12px; font-size:13px;
  color:#7f1d1d; display:flex; gap:8px; align-items:flex-start;
}
#mch-root .warning-box .warning-icon { flex-shrink:0; }

/* ── INFO BOX ────────────────────────────────────────────── */
#mch-root .info-box {
  background:#eff6ff; border:1px solid #93c5fd; border-radius:10px;
  padding:12px 16px; margin-bottom:12px; font-size:13px;
  color:#1e40af; display:flex; gap:8px; align-items:flex-start;
}

/* ── DISCLAIMER ──────────────────────────────────────────── */
#mch-root .disclaimer {
  background:#fff8e1; border:1px solid #fde68a; border-radius:10px;
  padding:12px 16px; margin-bottom:16px;
  display:block;
}
#mch-root .disclaimer-text { font-size:11px; color:#78350f; line-height:1.6; }
#mch-root .disclaimer-text strong { display:inline; font-weight:700; }
@media (min-width:520px) {
  #mch-root .disclaimer-text { font-size:12px; }
}

/* ── DRUG CARD ───────────────────────────────────────────── */
#mch-root .drug-card {
  border-radius:0 10px 10px 0; padding:14px 16px; margin-bottom:12px;
  border-left:4px solid var(--border);
}
#mch-root .drug-card-head {
  display:flex; flex-direction:column; gap:8px; margin-bottom:8px;
}
#mch-root .drug-badge {
  display:inline-block; padding:4px 10px; border-radius:20px;
  font-size:11px; font-weight:700; font-family:'JetBrains Mono',monospace;
  white-space:nowrap; border:1.5px solid; align-self:flex-start;
}
#mch-root .drug-name {
  font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; color:var(--navy);
}
#mch-root .drug-brand {
  font-size:12px; color:var(--text2); margin-top:2px;
  font-family:'Source Sans 3',sans-serif;
}
@media(min-width:480px){
  #mch-root .drug-card-head {
    flex-direction:row; justify-content:space-between; align-items:flex-start;
  }
  #mch-root .drug-badge { flex-shrink:0; align-self:auto; }
}
#mch-root .drug-indication {
  font-size:13px; color:var(--text); line-height:1.55;
  margin-bottom:10px; padding-top:8px;
  border-top:1px solid rgba(0,0,0,.08);
}
#mch-root .drug-notes {
  list-style:none; display:flex; flex-direction:column; gap:5px; margin-bottom:0;
}
#mch-root .drug-notes li {
  display:block; padding-left:16px; position:relative;
  font-size:12px; color:var(--text2); line-height:1.55;
}
#mch-root .drug-notes li::before {
  content:"›"; position:absolute; left:0; top:0;
  color:var(--teal2); font-weight:700; font-size:14px; line-height:1.3;
}
#mch-root .drug-sns {
  margin-top:10px; border-radius:8px; overflow:hidden;
  border:1px solid var(--border);
}
#mch-root .drug-sns-toggle {
  width:100%; background:var(--surface2); border:none; padding:8px 12px;
  text-align:left; cursor:pointer; font-size:12px; font-weight:600;
  color:var(--teal2); font-family:'Outfit',sans-serif; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .15s;
}
#mch-root .drug-sns-toggle:hover { background:var(--border); }
#mch-root .drug-sns-body {
  display:none; background:var(--surface); padding:12px 14px;
  border-top:1px solid var(--border);
}
#mch-root .drug-sns-body.open { display:block; }
#mch-root .drug-sns-sublabel {
  font-size:11px; font-weight:700; color:var(--text2);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;
}
#mch-root .drug-sns-list {
  list-style:none; display:flex; flex-direction:column; gap:4px; margin-bottom:10px;
}
#mch-root .drug-sns-list li {
  font-size:12px; color:var(--text2); line-height:1.5;
  display:flex; gap:6px; align-items:flex-start;
}
#mch-root .drug-sns-list li .sns-ico { flex-shrink:0; font-weight:700; }
#mch-root .drug-sns-footer {
  font-size:11px; color:var(--text3); font-style:italic; line-height:1.5;
  border-top:1px solid var(--border); padding-top:8px; margin-top:4px;
}

/* ── SECTION HEADER ─────────────────────────────────────── */
#mch-root .sec-header {
  display:flex; align-items:flex-start; gap:12px;
  border:1.5px solid; border-radius:12px;
  padding:14px 16px; margin:20px 0 14px;
}
#mch-root .sec-header .sec-ico { font-size:22px; flex-shrink:0; margin-top:1px; }
#mch-root .sec-header .sec-title {
  font-family:'Outfit',sans-serif; font-size:15px; font-weight:700;
  color:var(--navy); line-height:1.2; margin-bottom:3px;
}
#mch-root .sec-header .sec-sub { font-size:12px; color:var(--text2); line-height:1.4; }

/* ── SCORE DISPLAY ───────────────────────────────────────── */
#mch-root .score-box {
  border-radius:16px; padding:22px 20px 20px; text-align:center; margin-bottom:20px;
  color:#fff;
}
#mch-root .score-box.low  { background:linear-gradient(135deg,#065f46,#059669); }
#mch-root .score-box.mid  { background:linear-gradient(135deg,#92400e,#d97706); }
#mch-root .score-box.high { background:linear-gradient(135deg,#7f1d1d,#dc2626); }
#mch-root .score-box .score-formula {
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; opacity:.75; margin-bottom:2px;
}
#mch-root .score-box .score-label {
  font-size:13px; font-weight:500; opacity:.85;
  font-family:'Source Sans 3',sans-serif; margin-bottom:14px;
}
#mch-root .score-box .score-value {
  font-family:'Outfit',sans-serif; font-size:52px; font-weight:700;
  line-height:1; margin-bottom:6px;
}
#mch-root .score-box .score-unit {
  font-size:18px; font-weight:400; opacity:.9; font-family:'JetBrains Mono',monospace;
}
#mch-root .score-box .score-zone {
  display:inline-flex; align-items:center; gap:6px;
  border-radius:20px; padding:6px 20px; margin-top:4px;
  font-family:'Outfit',sans-serif; font-size:14px; font-weight:700;
  background:rgba(255,255,255,.22); color:#fff; border:1.5px solid rgba(255,255,255,.4);
}

/* ── TABLA SEMÁFORO (Módulo 6 HTA) ──────────────────────── */
#mch-root .semaforo-table { width:100%; border-collapse:collapse; margin-bottom:16px; }
#mch-root .semaforo-table th {
  background:var(--navy); color:#fff; padding:10px 12px;
  font-family:'Outfit',sans-serif; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; text-align:left;
}
#mch-root .semaforo-table td {
  padding:10px 12px; border-bottom:1px solid var(--border);
  font-size:13px; color:var(--text); vertical-align:top;
}
#mch-root .semaforo-table tr:last-child td { border-bottom:none; }
#mch-root .semaforo-table .pill {
  display:inline-block; padding:2px 10px; border-radius:12px;
  font-size:11px; font-weight:700; font-family:'Outfit',sans-serif;
}
#mch-root .semaforo-table .pill.green  { background:#dcfce7; color:#166534; }
#mch-root .semaforo-table .pill.amber  { background:#fef9c3; color:#854d0e; }
#mch-root .semaforo-table .pill.red    { background:#fee2e2; color:#991b1b; }
#mch-root .semaforo-table .pill.gray   { background:#f1f5f9; color:var(--text2); }

/* ── FOOTER ──────────────────────────────────────────────── */
#mch-root .app-footer {
  text-align:center; margin-top:28px; font-size:11px;
  color:var(--text3); line-height:1.7;
}
#mch-root .app-footer strong { color:var(--text2); }
#mch-root .app-footer em { font-style:italic; }

/* ── MODULE STUB ─────────────────────────────────────────── */
#mch-root .stub-card {
  background:var(--surface); border:2px dashed var(--border);
  border-radius:16px; padding:40px 28px; text-align:center;
  margin-bottom:16px;
}
#mch-root .stub-card .stub-ico { font-size:40px; margin-bottom:12px; }
#mch-root .stub-card h3 {
  font-family:'Outfit',sans-serif; font-size:18px; font-weight:700;
  color:var(--navy); margin-bottom:6px;
}
#mch-root .stub-card p { font-size:14px; color:var(--text2); max-width:400px; margin:0 auto; }

/* ── MÓDULO 1 — DIAGNÓSTICO ──────────────────────────────── */
#mch-root .flag-section { margin-bottom:18px; }
#mch-root .flag-section-title { font-size:12px; font-weight:700; color:var(--teal2); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; padding-bottom:4px; border-bottom:1px solid var(--border); font-family:'Outfit',sans-serif; }
#mch-root .flag-chips { display:flex; flex-wrap:wrap; gap:6px; }
#mch-root .mch-flag-chip { border:1.5px solid var(--border); background:var(--surface2); border-radius:20px; padding:5px 13px; cursor:pointer; font-size:12px; font-weight:500; color:var(--text2); transition:all .15s; font-family:'Source Sans 3',sans-serif; }
#mch-root .mch-flag-chip:hover { border-color:var(--teal); color:var(--teal2); background:#fff; }
#mch-root .mch-flag-chip.active { background:var(--navy); border-color:var(--navy); color:#fff; }
#mch-root .mimetic-card { background:var(--surface2); border:1.5px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
#mch-root .mimetic-card .mim-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
#mch-root .mimetic-card .mim-ico { font-size:20px; }
#mch-root .mimetic-card .mim-name { font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; color:var(--navy); }
#mch-root .mimetic-card .mim-why { font-size:12px; color:var(--text2); line-height:1.5; margin-bottom:8px; font-style:italic; }
#mch-root .mimetic-card .mim-tests { list-style:none; display:flex; flex-direction:column; gap:5px; }
#mch-root .mimetic-card .mim-tests li { display:flex; gap:7px; font-size:12px; color:var(--text); line-height:1.5; }
#mch-root .mimetic-card .mim-tests li::before { content:"→"; color:var(--teal); font-weight:700; flex-shrink:0; margin-top:1px; }
#mch-root .diag-conclusion { border-radius:14px; padding:18px 20px; margin-bottom:20px; display:flex; align-items:flex-start; gap:14px; }
#mch-root .diag-conclusion.confirmed    { background:#f0fdf4; border:2px solid #6ee7b7; }
#mch-root .diag-conclusion.possible     { background:#fffbeb; border:2px solid #fcd34d; }
#mch-root .diag-conclusion.insufficient { background:#fef2f2; border:2px solid #fca5a5; }
#mch-root .diag-conclusion.alternative  { background:#fffbeb; border:2px solid #fcd34d; }
#mch-root .diag-conclusion .dc-ico { font-size:20px; flex-shrink:0; margin-top:2px; }
#mch-root .diag-conclusion .dc-title { font-family:'Outfit',sans-serif; font-size:16px; font-weight:700; margin-bottom:4px; line-height:1.25; }
#mch-root .diag-conclusion.confirmed    .dc-title { color:#065f46; }
#mch-root .diag-conclusion.possible     .dc-title { color:#92400e; }
#mch-root .diag-conclusion.insufficient .dc-title { color:#991b1b; }
#mch-root .diag-conclusion.alternative  .dc-title { color:#92400e; }
#mch-root .diag-conclusion .dc-text { font-size:13px; color:var(--text2); line-height:1.5; }

/* ── GLOSARIO DE ABREVIATURAS ───────────────────────────── */
#mch-root .abbr-toggle {
  width:100%; background:var(--surface); border:1.5px solid var(--border);
  border-radius:12px; padding:14px 18px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; transition:all .2s;
}
#mch-root .abbr-toggle:hover { border-color:var(--teal); background:#f8fafc; }
#mch-root .abbr-toggle.open  { border-color:var(--teal); border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent; }
#mch-root .abbr-toggle .abbr-left { display:flex; align-items:center; gap:10px; }
#mch-root .abbr-toggle .abbr-ico  { font-size:18px; }
#mch-root .abbr-toggle .abbr-title { font-family:'Outfit',sans-serif; font-size:14px; font-weight:600; color:var(--navy); }
#mch-root .abbr-toggle .abbr-hint  { font-size:12px; color:var(--text3); font-style:italic; }
#mch-root .abbr-toggle .abbr-arrow { font-size:12px; color:var(--text3); transition:transform .2s; }
#mch-root .abbr-toggle.open .abbr-arrow { transform:rotate(180deg); }
#mch-root .abbr-panel {
  display:none; background:var(--surface); border:1.5px solid var(--teal);
  border-top:none; border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  padding:16px 18px; margin-top:-20px; margin-bottom:0;
}
#mch-root .abbr-panel.open { display:block; }
#mch-root .abbr-grid {
  display:flex; flex-direction:column; gap:3px;
}
#mch-root .abbr-row { display:flex; gap:8px; font-size:12px; line-height:1.4; padding:2px 0; }
#mch-root .abbr-row .abbr-key { font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--navy); flex-shrink:0; min-width:72px; }
#mch-root .abbr-row .abbr-val { color:var(--text2); }

/* ── NYHA SELECTOR ──────────────────────────────────────── */
#mch-root .nyha-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:0; }
#mch-root .nyha-btn {
  border:2px solid var(--border); background:var(--surface2); border-radius:12px;
  padding:14px 14px 12px; cursor:pointer; text-align:left;
  transition:all .2s; display:flex; flex-direction:column; gap:0;
}
#mch-root .nyha-btn:hover { border-color:var(--teal); transform:translateY(-1px); box-shadow:0 4px 12px rgba(8,145,178,.12); }
#mch-root .nyha-btn.selected { border-color:var(--navy); background:var(--navy); }
#mch-root .nyha-btn .nyha-dot { font-size:20px; line-height:1; margin-bottom:8px; }
#mch-root .nyha-btn .nyha-grade { font-family:'Outfit',sans-serif; font-size:17px; font-weight:700; color:var(--navy); line-height:1.1; margin-bottom:5px; }
#mch-root .nyha-btn.selected .nyha-grade { color:#fff; }
#mch-root .nyha-btn .nyha-desc { font-size:12px; font-weight:600; color:var(--text2); line-height:1.35; margin-bottom:4px; }
#mch-root .nyha-btn.selected .nyha-desc { color:rgba(255,255,255,.85); }
#mch-root .nyha-btn .nyha-detail { font-size:11px; color:var(--text3); line-height:1.45; font-style:italic; }
#mch-root .nyha-btn.selected .nyha-detail { color:rgba(255,255,255,.6); }

/* ── EXPORTACIÓN DE RESULTADOS (EXP-R9) ─────────────────── */
/* EXP-R9: selector button. + !important para vencer Bootstrap 4  */
#mch-root .mch-action-row {
  display: flex;
  gap: 10px;
  margin: 4px 0 16px 0;
  width: 100%;
}
#mch-root button.mch-btn-export {
  flex: 1;
  display: block !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 13px 16px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  cursor: pointer !important;
  text-align: center !important;
  letter-spacing: .01em;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  line-height: 1.4 !important;
  outline: none !important;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color .18s, color .18s, background .18s;
}
#mch-root button#mch-btn-copy:hover {
  border-color: #0891b2 !important;
  color: #0e7490 !important;
  background: #f0f9ff !important;
}
#mch-root button#mch-btn-print:hover {
  border-color: #0d2d5e !important;
  color: #0d2d5e !important;
  background: #eff6ff !important;
}
@media (max-width: 420px) {
  #mch-root .mch-action-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
 * MEJORAS TRANSVERSALES v5.1 — Cardioteca.com
 * Guía: Miocardiopatía Hipertrófica (MCH) · Prefijo: mch · Aplicado: 20260601
 * ═══════════════════════════════════════════════════════════════ */

/* ── MJ-01 · ANIMACIÓN FADE ─────────────────────────────────────────── */
@keyframes mchFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#mch-root #mch-app.mch-anim {
  animation: mchFadeIn 180ms ease forwards;
}

/* ── MJ-02 · MODO OSCURO — BOTÓN (v4.4 DEFINITIVO) ──────────────────
   Botón en fragmento-joomla.html como HERMANO de .app-header.
   #mch-root tiene position:relative para anclarlo.
   NUNCA rgba(255,255,255,...) en modo claro — fondo es var(--bg), no navy. */
#mch-root { position: relative; }
#mch-root .dark-toggle {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; z-index: 2;
  background: rgba(13,45,94,.10);
  border: 1.5px solid rgba(13,45,94,.28);
  color: #0d2d5e;
  box-shadow: 0 1px 4px rgba(13,45,94,.12);
  transition: background .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
#mch-root .dark-toggle:hover { background: rgba(13,45,94,.18); transform: scale(1.08); }
#mch-root.dk .dark-toggle {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.40);
  color: #fff;
}
#mch-root.dk .dark-toggle:hover { background: rgba(255,255,255,.28); }

/* ── MJ-02 · MODO OSCURO — VARIABLES ───────────────────────────── */
#mch-root.dk {
  --bg:#0f172a; --surface:#1e293b; --surface2:#162032;
  --border:#334155; --border-focus:#38bdf8;
  --navy:#7dd3fc; --navy2:#38bdf8; --teal:#22d3ee; --teal2:#06b6d4;
  --green:#34d399; --amber:#fbbf24; --red:#f87171;
  --text:#f1f5f9; --text2:#94a3b8; --text3:#64748b;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
  --shadow2:0 2px 8px rgba(0,0,0,.5),0 8px 32px rgba(0,0,0,.4);
}
#mch-root.dk .app-header {
  background: linear-gradient(135deg,#0c1a3d 0%,#1e293b 100%);
}
#mch-root.dk .card,
#mch-root.dk .hub-card { background: var(--surface); border-color: var(--border); }
#mch-root.dk .disclaimer  { background: #271a00; border-color: #92400e; }
#mch-root.dk .info-box    { background: #0c2340; border-color: #1e3a5f; }
#mch-root.dk .warning-box { background: #300; }
#mch-root.dk .drug-card   { filter: brightness(.9); }
#mch-root.dk .followup-box { filter: brightness(.85); }
#mch-root.dk .option-btn,
#mch-root.dk .option-list-btn,
#mch-root.dk .nyha-btn    { background: var(--surface); border-color: var(--border); color: var(--text); }
#mch-root.dk .option-btn.selected,
#mch-root.dk .option-list-btn.selected,
#mch-root.dk .nyha-btn.selected { background: #0c2340; border-color: var(--navy2); }
#mch-root.dk .btn-next, #mch-root.dk .btn-analyze, #mch-root.dk .btn-restart { filter: brightness(.85); }
#mch-root.dk .btn-back    { background: var(--surface); border-color: var(--border); color: var(--text2); }
#mch-root.dk .mch-prog-bar { background: var(--surface); }
#mch-root.dk .prog-circle  { background: var(--surface2); color: var(--text3); border-color: var(--border); }
#mch-root.dk .prog-circle.active { background: var(--navy); color: var(--bg); border-color: var(--navy); }
#mch-root.dk .prog-circle.done   { background: var(--green); color: var(--bg); border-color: var(--green); }
#mch-root.dk .prog-line.done     { background: var(--green); }
#mch-root.dk .app-footer  { background: var(--surface2); border-top-color: var(--border); color: var(--text3); }
#mch-root.dk input, #mch-root.dk select { background: var(--surface); border-color: var(--border); color: var(--text); }
#mch-root.dk .result-header { background: var(--surface2); }
#mch-root.dk .diag-conclusion { filter: brightness(.85); }
#mch-root.dk [style*="background:#f8fafc"] { background: var(--surface2) !important; }
#mch-root.dk [style*="background:#eff6ff"] { background: #0c1f40 !important; }
#mch-root.dk [style*="background:#f0fdf4"] { background: #0a2417 !important; }
#mch-root.dk [style*="background:#fef2f2"] { background: #2d0808 !important; }
#mch-root.dk [style*="background:#fffbeb"] { background: #271a00 !important; }

/* ── MJ-03 · MEDIDOR VISUAL DE RIESGO (M2 solamente) ────────────── */
#mch-root .risk-gauge-wrap    { margin-bottom: 16px; }
#mch-root .risk-gauge-label   {
  font-size: 11px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .08em;
  font-family: 'Outfit', sans-serif; margin-bottom: 6px;
}
#mch-root .risk-gauge-track   {
  height: 10px; border-radius: 5px; position: relative; overflow: visible;
  background: linear-gradient(90deg,#22c55e,#eab308,#f97316,#ef4444);
}
#mch-root .risk-gauge-marker  {
  position: absolute; top: -4px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; border: 3px solid #0d2d5e;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: left .5s ease;
}
#mch-root.dk .risk-gauge-marker { background: #f1f5f9; border-color: #1e293b; }
#mch-root .risk-gauge-scale-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 4px;
}
#mch-root .risk-gauge-value   {
  text-align: center; font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 700; margin-top: 4px;
}

/* ── MJ-04 · TIMELINE DE SEGUIMIENTO ───────────────────────────── */
#mch-root .followup-timeline {
  margin: 14px 0; padding: 14px 16px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
}
#mch-root .ft-label {
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--teal2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
}
#mch-root .ft-track {
  display: flex; align-items: flex-start; gap: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-top: 8px; padding-bottom: 8px; scrollbar-width: none;
}
#mch-root .ft-track::-webkit-scrollbar { display: none; }
#mch-root .ft-step {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; min-width: 72px; flex-shrink: 0; position: relative;
}
#mch-root .ft-step:not(:last-child)::after {
  content: ''; position: absolute; top: 10px;
  left: calc(50% + 10px); right: calc(-50% + 10px);
  height: 2px; background: var(--teal); opacity: .4;
}
#mch-root .ft-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--teal); z-index: 1; position: relative; flex-shrink: 0;
}
#mch-root .ft-step:first-child .ft-dot {
  background: var(--navy); box-shadow: 0 0 0 2px var(--navy);
}
#mch-root .ft-step-content { text-align: center; margin-top: 6px; padding: 0 2px; }
#mch-root .ft-time {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--teal);
}
#mch-root .ft-step:first-child .ft-time { color: var(--navy); }
#mch-root .ft-action { font-size: 10px; color: var(--text2); line-height: 1.3; margin-top: 2px; }

/* ── MJ-11 · GUARDAR CASOS ──────────────────────────────────────── */
#mch-root .mch-btn-save {
  display: block; width: 100%; padding: 13px 16px;
  background: linear-gradient(135deg,var(--teal2),var(--navy));
  color: #fff; border: none; border-radius: 10px;
  font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700;
  cursor: pointer; margin-top: 10px; margin-bottom: 6px;
  letter-spacing: .02em; transition: opacity .2s, transform .15s;
  box-shadow: 0 2px 8px rgba(8,145,178,.25); text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#mch-root .mch-btn-save:hover { opacity: .92; transform: translateY(-1px); }
#mch-root input#mch-case-name {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 14px; color: var(--text); background: var(--surface);
  margin-bottom: 10px; box-sizing: border-box;
  font-family: 'Source Sans 3', sans-serif;
}
#mch-root input#mch-case-name:focus { outline: none; border-color: var(--teal); }