/*
 * Cardioteca.com — Guías Clínicas Interactivas
 * Guía: Síncope ESC 2018
 * Carpeta: /components/com_cardiotools/sinc/
 * Versión: 20260609
 * © Campus Formación Sanitaria S.L. — CIF B88633318
 * ─────────────────────────────────────────────────────────────────
 * MT v5.1 | P-01 sinc | P-02 SINC | P-10 sinc-app | P-11 sinc-prog
 * P-16 Multi-módulo (portada 4) | P-17 NINGUNO | P-19 3 hitos M2
 */

/* ══════════════════════════════════════════════════════════════════
 * 1 · VARIABLES CSS  (bajo #sinc-root — NUNCA en :root)
 * ══════════════════════════════════════════════════════════════════ */
#sinc-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);
  position:     relative;
}

/* ══════════════════════════════════════════════════════════════════
 * 2 · RESET
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
#sinc-root button:focus:not(:focus-visible),
#sinc-root input:focus:not(:focus-visible),
#sinc-root select:focus:not(:focus-visible),
#sinc-root textarea:focus:not(:focus-visible) { outline: none; }
#sinc-root a { color: var(--teal); text-decoration: none; }
#sinc-root a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════
 * 3 · LAYOUT
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root #app-wrapper {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* ══════════════════════════════════════════════════════════════════
 * 4 · HEADER
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root .app-header { text-align: center; margin-bottom: 32px; }

#sinc-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 12px;
  border-radius: 20px;
  margin-bottom: 14px;
  font-family: 'Outfit', sans-serif;
}
#sinc-root .app-header .badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: sincPulse 2s infinite;
}
@keyframes sincPulse { 0%,100%{opacity:1} 50%{opacity:.4} }

#sinc-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;
}
#sinc-root .app-header h1 span { color: var(--teal); }
#sinc-root .app-header p {
  color: var(--text2);
  font-size: 14px;
  max-width: 500px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════
 * 5 · PROGRESS BAR — .sinc-prog-bar (NUNCA .progress-bar — BUG-03)
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root #sinc-prog { margin-bottom: 24px; }

#sinc-root .sinc-prog-bar {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
}
#sinc-root .sinc-prog-step {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text3);
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  white-space: nowrap;
}
#sinc-root .sinc-prog-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background .2s, transform .2s;
}
#sinc-root .sinc-prog-dot.active {
  background: var(--teal);
  transform: scale(1.4);
}
#sinc-root .sinc-prog-dot.done { background: var(--navy2); }
#sinc-root .sinc-prog-conn {
  width: 16px;
  height: 2px;
  background: var(--border);
  transition: background .2s;
}
#sinc-root .sinc-prog-conn.done { background: var(--navy2); }
#sinc-root .sinc-prog-label { font-size: 10px; color: var(--text3); }
#sinc-root .sinc-prog-label.active { color: var(--teal); font-weight: 600; }
#sinc-root .sinc-prog-label.done   { color: var(--navy2); }

/* ══════════════════════════════════════════════════════════════════
 * 6 · CARDS
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
#sinc-root .card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  line-height: 1.3;
}
#sinc-root .card-subtitle {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 20px;
  line-height: 1.5;
}
#sinc-root .card-section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
  margin-bottom: 10px;
  margin-top: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════════
 * 7 · MODULE SELECTOR — PORTADA 4 MÓDULOS
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root .module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0 28px;
}
#sinc-root .module-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 20px 14px 16px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .12s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#sinc-root .module-card:hover {
  box-shadow: var(--shadow2);
  transform: translateY(-3px);
}
#sinc-root .module-card:active { transform: translateY(0); }

#sinc-root .module-card.m1 { border-color: rgba(8,145,178,.35); }
#sinc-root .module-card.m1:hover { border-color: var(--teal); }
#sinc-root .module-card.m2 { border-color: rgba(220,38,38,.35); }
#sinc-root .module-card.m2:hover { border-color: var(--red); }
#sinc-root .module-card.m3 { border-color: rgba(5,150,105,.35); }
#sinc-root .module-card.m3:hover { border-color: var(--green); }
#sinc-root .module-card.m4 { border-color: rgba(13,45,94,.35); }
#sinc-root .module-card.m4:hover { border-color: var(--navy); }

#sinc-root .module-emoji {
  font-size: 34px;
  margin-bottom: 10px;
  display: block;
  line-height: 1;
}
#sinc-root .module-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  line-height: 1.3;
}
#sinc-root .module-subtitle {
  font-size: 11px;
  color: var(--text2);
  font-style: italic;
  margin-bottom: 8px;
  line-height: 1.4;
}
#sinc-root .module-btn {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  padding: 5px 14px;
  border-radius: 20px;
  margin-top: 6px;
  transition: background .15s;
}
#sinc-root .module-card.m1 .module-btn { background: var(--teal); }
#sinc-root .module-card.m2 .module-btn { background: var(--red); }
#sinc-root .module-card.m3 .module-btn { background: var(--green); }
#sinc-root .module-card.m4 .module-btn { background: var(--navy); }

/* ══════════════════════════════════════════════════════════════════
 * 8 · NAVIGATION BUTTONS
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root .nav-row {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}
#sinc-root .btn-next {
  flex: 1;
  min-width: 140px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
#sinc-root .btn-next:hover { background: var(--navy2); }
#sinc-root .btn-next:disabled {
  background: var(--border);
  color: var(--text3);
  cursor: not-allowed;
}
#sinc-root .btn-back {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  white-space: nowrap;
}
#sinc-root .btn-back:hover { border-color: var(--navy); color: var(--navy); }

#sinc-root .btn-restart {
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#sinc-root .btn-restart:hover { background: var(--border); }

/* ══════════════════════════════════════════════════════════════════
 * 9 · FORM ELEMENTS
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root .field { margin-bottom: 16px; }
#sinc-root .field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text2);
  margin-bottom: 6px;
}
#sinc-root .field input[type="text"],
#sinc-root .field input[type="number"],
#sinc-root .field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: 'Source Sans 3', sans-serif;
  color: var(--text);
  background: var(--surface);
  transition: border-color .2s;
}
#sinc-root .field input:focus,
#sinc-root .field select:focus { border-color: var(--border-focus); outline: none; }

/* ══════════════════════════════════════════════════════════════════
 * 10 · OPTION BUTTONS (single / multi select)
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root .opts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
#sinc-root .opts-grid.full { grid-template-columns: 1fr; }
#sinc-root .opts-grid.three { grid-template-columns: 1fr 1fr 1fr; }

#sinc-root .btn-opt {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  text-align: left;
  font-family: 'Source Sans 3', sans-serif;
  line-height: 1.4;
}
#sinc-root .btn-opt:hover {
  border-color: var(--teal);
  background: #f0f9ff;
  color: var(--teal2);
}
#sinc-root .btn-opt.sel {
  border-color: var(--teal);
  background: #e0f2fe;
  color: var(--teal2);
  font-weight: 600;
}
#sinc-root .btn-opt.sel-navy {
  border-color: var(--navy);
  background: #eff3fa;
  color: var(--navy);
  font-weight: 600;
}
#sinc-root .btn-opt.sel-red {
  border-color: var(--red);
  background: #fef2f2;
  color: #991b1b;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
 * 11 · CHECKLIST (con checkboxes visuales)
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root .chk-list { list-style: none; padding: 0; margin-bottom: 8px; }
#sinc-root .chk-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  border: 1.5px solid transparent;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text2);
}
#sinc-root .chk-item:hover { background: var(--surface2); border-color: var(--border); }
#sinc-root .chk-item.chk-on {
  background: #f0fdf4;
  border-color: #6ee7b7;
  color: #065f46;
}
#sinc-root .chk-item.chk-on-red {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
#sinc-root .chk-item.chk-on-amber {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
#sinc-root .chk-box {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-top: 1px;
  transition: background .15s, border-color .15s;
  font-family: 'JetBrains Mono', monospace;
}
#sinc-root .chk-item.chk-on     .chk-box { background: var(--green); border-color: var(--green); color: #fff; }
#sinc-root .chk-item.chk-on-red .chk-box { background: var(--red); border-color: var(--red); color: #fff; }
#sinc-root .chk-item.chk-on-amber .chk-box { background: var(--amber); border-color: var(--amber); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
 * 12 · RESULT COMPONENTS
 * ══════════════════════════════════════════════════════════════════ */

/* — Result header — */
#sinc-root .result-header { text-align: center; padding: 16px 0 12px; margin-bottom: 12px; }
#sinc-root .result-icon { font-size: 36px; display: block; margin-bottom: 8px; }
#sinc-root .result-title {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  line-height: 1.25;
}
#sinc-root .result-subtitle { font-size: 14px; color: var(--text2); font-style: italic; }

/* — Evidence badges — */
#sinc-root .ev-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}
#sinc-root .ev-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  border: 1.5px solid;
  white-space: nowrap;
}
#sinc-root .ev-badge.cI   { background:#f0fdf4; color:#065f46; border-color:#6ee7b7; }
#sinc-root .ev-badge.cIIa { background:#eff6ff; color:#1e40af; border-color:#93c5fd; }
#sinc-root .ev-badge.cIIb { background:#fffbeb; color:#92400e; border-color:#fcd34d; }
#sinc-root .ev-badge.cIII { background:#fef2f2; color:#991b1b; border-color:#fca5a5; }
#sinc-root .ev-badge.loe  { background:var(--surface2); color:var(--text2); border-color:var(--border); }
#sinc-root .ev-badge.guia { background:var(--navy); color:#fff; border-color:var(--navy); }

/* — Result text — */
#sinc-root .result-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: 8px;
  border-left: 3px solid var(--teal);
}

/* — Risk box (M2) — */
#sinc-root .risk-box {
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 2px solid;
}
#sinc-root .risk-box.low   { background:#f0fdf4; border-color:#6ee7b7; color:#065f46; }
#sinc-root .risk-box.med   { background:#fffbeb; border-color:#fcd34d; color:#92400e; }
#sinc-root .risk-box.high  { background:#fef2f2; border-color:#fca5a5; color:#991b1b; }

#sinc-root .risk-level-label {
  font-family: 'Outfit', sans-serif;
  font-size: 21px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
#sinc-root .risk-destination {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
#sinc-root .risk-criteria-count {
  font-size: 12px;
  opacity: .8;
  margin-bottom: 8px;
}

/* — Treatment steps (M3) — */
#sinc-root .treatment-steps { margin-bottom: 14px; }
#sinc-root .treatment-step {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
#sinc-root .treatment-step.always {
  border-color: #6ee7b7;
  background: #f0fdf4;
}
#sinc-root .treatment-step.cI   { border-left: 4px solid var(--green); }
#sinc-root .treatment-step.cIIa { border-left: 4px solid var(--blue); }
#sinc-root .treatment-step.cIIb { border-left: 4px solid var(--amber); }
#sinc-root .treatment-step.cIII { border-left: 4px solid var(--red); background: #fef2f2; border-color: #fca5a5; }
#sinc-root .treatment-step.cIII .treatment-step-title { color: #991b1b; }

#sinc-root .treatment-step-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
#sinc-root .treatment-step-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  flex: 1;
  line-height: 1.35;
}
#sinc-root .treatment-step-badges { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
#sinc-root .treatment-step-body {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
}
#sinc-root .treatment-step-note {
  font-size: 12px;
  color: var(--text3);
  margin-top: 6px;
  font-style: italic;
}

/* — Test cards (M4) — */
#sinc-root .test-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
#sinc-root .test-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
#sinc-root .test-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  background: var(--navy);
  color: #fff;
}
#sinc-root .test-card-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
}
#sinc-root .test-card-badges { display: flex; gap: 5px; flex-wrap: wrap; }
#sinc-root .test-card-body { padding: 14px 16px; }
#sinc-root .test-card-indication {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 9px;
  line-height: 1.65;
}
#sinc-root .test-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  font-family: 'Outfit', sans-serif;
  margin-bottom: 5px;
}
#sinc-root .test-card-criteria {
  font-size: 13px;
  color: var(--text2);
  background: var(--surface2);
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  border-left: 3px solid var(--teal);
  line-height: 1.55;
}
#sinc-root .test-card-ci {
  font-size: 12px;
  color: #991b1b;
  background: #fef2f2;
  padding: 9px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  border-left: 3px solid #fca5a5;
}
#sinc-root .test-card-note {
  font-size: 12px;
  color: var(--text3);
  font-style: italic;
  line-height: 1.5;
}

/* — Emergency box — */
#sinc-root .emergency-box {
  background: #fef2f2;
  border: 2.5px solid #dc2626;
  border-radius: 12px;
  padding: 22px 20px;
  margin-bottom: 16px;
  text-align: center;
}
#sinc-root .emergency-icon { font-size: 42px; display: block; margin-bottom: 8px; }
#sinc-root .emergency-title {
  font-family: 'Outfit', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 8px;
}
#sinc-root .emergency-text { font-size: 14px; color: #991b1b; font-weight: 600; line-height: 1.6; }

/* — Cross module suggestion — */
#sinc-root .cross-box {
  background: #eff6ff;
  border: 1.5px solid #93c5fd;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#sinc-root .cross-box-text { flex: 1; font-size: 13px; color: #1e40af; line-height: 1.5; }
#sinc-root .btn-cross {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
#sinc-root .btn-cross:hover { background: #1d4ed8; }

/* — Followup box — */
#sinc-root .followup-box {
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 14px;
  border: 1.5px solid;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#sinc-root .followup-box.green { background:#f0fdf4; border-color:#6ee7b7; color:#065f46; }
#sinc-root .followup-box.blue  { background:#eff6ff; border-color:#93c5fd; color:#1e40af; }
#sinc-root .followup-box.amber { background:#fffbeb; border-color:#fcd34d; color:#92400e; }
#sinc-root .followup-box.red   { background:#fef2f2; border-color:#fca5a5; color:#991b1b; }
#sinc-root .followup-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
#sinc-root .followup-content { flex: 1; }
#sinc-root .followup-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: 'Outfit', sans-serif;
  margin-bottom: 3px;
  opacity: .8;
}
#sinc-root .followup-text { font-size: 14px; font-weight: 600; line-height: 1.5; }

/* — Notes list — */
#sinc-root .notes-list {
  background: var(--surface2);
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 14px;
  border-left: 3px solid var(--teal);
}
#sinc-root .notes-list-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  font-family: 'Outfit', sans-serif;
  margin-bottom: 10px;
}
#sinc-root .notes-list ul { list-style: none; padding: 0; }
#sinc-root .notes-list li {
  font-size: 13px;
  color: var(--text2);
  padding: 3px 0 3px 18px;
  position: relative;
  line-height: 1.55;
}
#sinc-root .notes-list li::before { content:'→'; position:absolute; left:0; color:var(--teal); font-size:12px; }

/* — Warning box — */
#sinc-root .warn-box {
  background: #fffbeb;
  border: 1.5px solid #fcd34d;
  border-radius: 10px;
  padding: 11px 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.55;
}
#sinc-root .warn-box.red-w { background:#fef2f2; border-color:#fca5a5; color:#991b1b; }
#sinc-root .warn-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* — Disclaimer (BUG-07: strong inline siempre) — */
#sinc-root .disclaimer {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 15px;
  margin: 14px 0;
  font-size: 11px;
  color: var(--text3);
  line-height: 1.6;
}
#sinc-root .disclaimer-text strong { display: inline; }

/* — Info box (azul informativo) — */
#sinc-root .info-box {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  padding: 11px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #1e40af;
  line-height: 1.55;
}
#sinc-root .info-box strong { color: #1e3a8a; }

/* — Context box (gris informativo) — */
#sinc-root .context-box {
  background: var(--surface2);
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
}
#sinc-root .context-box strong { color: var(--navy); }

/* ══════════════════════════════════════════════════════════════════
 * 13 · APP FOOTER
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root .app-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text3);
  padding-top: 32px;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════
 * 14 · SPINNER + ERROR DE RED
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root .spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 20px;
  gap: 12px;
  color: var(--text3);
  font-size: 14px;
}
#sinc-root .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: sincSpin .8s linear infinite;
}
@keyframes sincSpin { to { transform: rotate(360deg); } }

#sinc-root .net-error {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
  padding: 20px;
  margin: 16px 0;
  text-align: center;
  font-size: 14px;
  color: #991b1b;
}

/* ══════════════════════════════════════════════════════════════════
 * 15 · COORDINADORES + FORMSPREE
 * ══════════════════════════════════════════════════════════════════ */
#sinc-root .coords-wrap { padding-top: 16px; display: grid; gap: 16px; }
#sinc-root .coords-wrap.single { max-width: 520px; margin: 0 auto; }
#sinc-root .coord-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
}
#sinc-root .coord-photo { width:68px; height:68px; border-radius:50%; object-fit:cover; flex-shrink:0; }
#sinc-root .coord-name { font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; color:var(--navy); }
#sinc-root .coord-role { font-size:13px; color:var(--text2); margin-top:2px; }
#sinc-root .coord-hosp { font-size:12px; color:var(--text3); margin-top:2px; }
#sinc-root .coord-badge {
  text-align:center; margin-top:10px;
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text3); font-family:'Outfit',sans-serif;
}
#cterr-root { max-width:780px; margin:32px auto 0; }

/* ══════════════════════════════════════════════════════════════════
 * 16 · RESPONSIVE
 * ══════════════════════════════════════════════════════════════════ */
@media(max-width:519px) {
  #sinc-root .module-grid       { grid-template-columns: 1fr; }
  #sinc-root .opts-grid         { grid-template-columns: 1fr; }
  #sinc-root .opts-grid.three   { grid-template-columns: 1fr 1fr; }
  #sinc-root .app-header h1     { font-size: 22px; }
  #sinc-root .result-title      { font-size: 18px; }
  #sinc-root .risk-level-label  { font-size: 18px; }
  #sinc-root .treatment-step-header { flex-direction: column; }
}
@media(min-width:520px) {
  #sinc-root .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #sinc-root .module-emoji { font-size: 38px; }
}

/* ══════════════════════════════════════════════════════════════════
 * MEJORAS TRANSVERSALES v5.1 — Cardioteca.com
 * Guía: Síncope ESC 2018 · Prefijo: sinc · Aplicado: 20260609
 * ══════════════════════════════════════════════════════════════════ */

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

/* ── MJ-02 · MODO OSCURO — BOTÓN (v4.4 DEFINITIVO) ─────────────────
   El botón #sinc-dark-btn va en fragmento.html como HERMANO de
   .app-header (nunca dentro). #sinc-root tiene position:relative.
   ─────────────────────────────────────────────────────────────── */
#sinc-dark-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--navy);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
#sinc-dark-btn:hover { background: var(--navy2); }

/* — Colores modo oscuro — */
#sinc-root.dk                       { --bg:#0f1c2e; --surface:#1a2d4a; --surface2:#1e3555;
                                       --border:#2d4a6e; --text:#e2e8f0; --text2:#94a3b8;
                                       --text3:#64748b; --navy:#1e3a5f; --navy2:#2a4f7a; }
#sinc-root.dk #sinc-dark-btn        { background: #fff; color: #0d2d5e; border-color: #93c5fd; }
#sinc-root.dk .card                 { background:var(--surface); border-color:var(--border); }
#sinc-root.dk .btn-opt              { background:var(--surface2); border-color:var(--border);
                                       color:var(--text2); }
#sinc-root.dk .btn-opt:hover        { background:#1e3a5f; }
#sinc-root.dk .btn-opt.sel          { background:#0e3a5c; color:#7dd3fc; border-color:#0891b2; }
#sinc-root.dk .btn-back             { border-color:var(--border); color:var(--text2); }
#sinc-root.dk .btn-restart          { background:var(--surface2); border-color:var(--border); }
#sinc-root.dk .result-text          { background:var(--surface2); }
#sinc-root.dk .notes-list           { background:var(--surface2); }
#sinc-root.dk .context-box          { background:var(--surface2); }
#sinc-root.dk .disclaimer           { background:var(--surface2); border-color:var(--border); }
#sinc-root.dk .test-card            { border-color:var(--border); }
#sinc-root.dk .treatment-step       { background:var(--surface2); border-color:var(--border); }
#sinc-root.dk .chk-item:hover       { background:var(--surface2); border-color:var(--border); }
#sinc-root.dk [style*="background:#f8fafc"] { background:var(--surface2) !important; }
#sinc-root.dk .btn-restart,
#sinc-root.dk .btn-back,
#sinc-root.dk .btn-next             { filter: brightness(0.88); }

/* ── MJ-04 · TIMELINE DE SEGUIMIENTO (M2 — 3 hitos) ──────────────── */
#sinc-root .followup-timeline        { margin-bottom: 14px; overflow-x: auto; }
#sinc-root .ft-track                 { display: flex; align-items: flex-start; gap: 0; min-width: 260px; }
#sinc-root .ft-step                  { display: flex; flex-direction: column; align-items: center;
                                        flex: 1; min-width: 80px; }
#sinc-root .ft-top                   { display: flex; align-items: center; width: 100%; }
#sinc-root .ft-dot                   { width: 14px; height: 14px; border-radius: 50%;
                                        border: 2.5px solid; flex-shrink: 0; }
#sinc-root .ft-dot.active            { background: var(--teal); border-color: var(--teal); }
#sinc-root .ft-dot.done              { background: var(--navy); border-color: var(--navy); }
#sinc-root .ft-dot.pending           { background: var(--surface); border-color: var(--border); }
#sinc-root .ft-line                  { flex: 1; height: 2px; }
#sinc-root .ft-line.done             { background: var(--navy); }
#sinc-root .ft-line.pending          { background: var(--border); }
#sinc-root .ft-label                 { font-size: 11px; color: var(--text3);
                                        font-family: 'JetBrains Mono',monospace;
                                        text-align: center; margin-top: 6px;
                                        line-height: 1.3; padding: 0 2px; }
#sinc-root .ft-action                { font-size: 11px; color: var(--text2);
                                        text-align: center; margin-top: 3px;
                                        line-height: 1.3; padding: 0 2px; }
#sinc-root .ft-label.active          { color: var(--teal); font-weight: 700; }
#sinc-root .ft-label.done            { color: var(--navy); font-weight: 600; }

/* ── MJ-05 · CAMPOS OPCIONALES — HINT ÁMBAR ──────────────────────── */
#sinc-root .opt-hint-box {
  background: #fffbeb;
  border: 1.5px solid #fcd34d;
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.55;
}
#sinc-root .opt-hint-title {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#sinc-root .opt-hint-list { list-style: none; padding: 0; }
#sinc-root .opt-hint-list li { padding: 2px 0 2px 14px; position: relative; }
#sinc-root .opt-hint-list li::before { content:'·'; position:absolute; left:0; color:var(--amber); }

/* ── MJ-11 · PANEL CASOS GUARDADOS ──────────────────────────────── */
#sinc-root .cases-panel-wrap { margin-bottom: 16px; }
#sinc-root .cases-panel-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 13px;
  font-family: 'Source Sans 3', sans-serif;
  cursor: pointer;
  padding: 6px 0;
}
#sinc-root .cases-panel-toggle:hover { color: var(--navy); }

#sinc-root .cases-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
}
#sinc-root .cases-panel-header {
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#sinc-root .cases-panel-help {
  font-size: 11px;
  color: var(--text3);
  padding: 6px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
#sinc-root .cases-list {
  max-height: 260px;
  overflow-y: auto;
}
#sinc-root .case-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#sinc-root .case-item:last-child { border-bottom: none; }
#sinc-root .case-lock {
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
}
#sinc-root .case-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  line-height: 1.35;
}
#sinc-root .case-name:hover { text-decoration: underline; }
#sinc-root .case-meta {
  font-size: 11px;
  color: var(--text3);
  margin-top: 3px;
  line-height: 1.35;
}
#sinc-root .case-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
#sinc-root .btn-case-pdf {
  font-size: 15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
#sinc-root .btn-case-del {
  font-size: 15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  color: var(--text3);
}
#sinc-root .btn-case-del:hover { color: var(--red); }
#sinc-root .cases-empty {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text3);
}
#sinc-root .save-form {
  padding: 14px 16px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
}
#sinc-root .save-form input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: 'Source Sans 3', sans-serif;
  margin-bottom: 8px;
}
#sinc-root .save-form-actions { display: flex; gap: 8px; }
#sinc-root .btn-save-ok {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  cursor: pointer;
  flex: 1;
}
#sinc-root .btn-save-cancel {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}
#sinc-root .save-confirm {
  background: #f0fdf4;
  color: #065f46;
  text-align: center;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  border-top: 1px solid #6ee7b7;
}

/* ── MJ-09 · BANNER SESIÓN ───────────────────────────────────────── */
#sinc-root .session-banner {
  background: #fffbeb;
  border: 1.5px solid #fcd34d;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #92400e;
}
#sinc-root .session-banner-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  margin-bottom: 8px;
}
#sinc-root .session-banner-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
#sinc-root .btn-session-continue {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  cursor: pointer;
}
#sinc-root .btn-session-fresh {
  background: transparent;
  color: var(--amber);
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  cursor: pointer;
}

/* ── MJ-11 · BANNER CASO CARGADO ─────────────────────────────────── */
#sinc-root .case-loaded-banner {
  background: #eff6ff;
  border: 1.5px solid #93c5fd;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #1e40af;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
#sinc-root .btn-dismiss-banner {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text3);
  flex-shrink: 0;
}

/* ── MJ-08 · EXPORT BUTTONS ──────────────────────────────────────── */
#sinc-root .export-row {
  display: flex;
  gap: 10px;
  margin: 14px 0 8px;
  flex-wrap: wrap;
}
#sinc-root .btn-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: var(--text2);
  transition: background .15s, border-color .15s;
}
#sinc-root .btn-export:hover { background: var(--surface2); border-color: var(--navy); color: var(--navy); }

/* ── FIN MT v5.1 ──────────────────────────────────────────────────── */