/*
 * Cardioteca.com — Guías Clínicas Interactivas
 * Guía: Síndrome Coronario Agudo (ESC 2023)
 * Carpeta: /components/com_cardiotools/sca/
 * Versión: 20260601
 * © Campus Formación Sanitaria S.L. — CIF B88633318
 */

/* ═══════════════════════════════════════════════════════
   VARIABLES Y RESET
═══════════════════════════════════════════════════════ */
#sca-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); color:var(--text);
}
#sca-root *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
#sca-root button:focus:not(:focus-visible),
#sca-root input:focus:not(:focus-visible),
#sca-root select:focus:not(:focus-visible){outline:none}
#sca-root #app-wrapper{max-width:780px;margin:0 auto;padding:24px 16px 48px}

/* ═══════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════ */
#sca-root .app-header{text-align:center;margin-bottom:32px}
#sca-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}
#sca-root .app-header .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:sca-pulse 2s infinite}
@keyframes sca-pulse{0%,100%{opacity:1}50%{opacity:.4}}
#sca-root .app-header h1{font-family:'Outfit',sans-serif;font-size:26px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:6px}
#sca-root .app-header h1 span{color:var(--teal)}
#sca-root .app-header p{color:var(--text2);font-size:14px;max-width:520px;margin:0 auto}

/* ═══════════════════════════════════════════════════════
   BARRA DE PROGRESO
═══════════════════════════════════════════════════════ */
#sca-root .sca-prog-bar{display:flex;align-items:flex-start;margin-bottom:28px;padding:0 4px}
#sca-root .prog-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
#sca-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)}
#sca-root .prog-circle.active{border-color:var(--navy);background:var(--navy);color:#fff}
#sca-root .prog-circle.done{border-color:var(--teal);background:var(--teal);color:#fff}
#sca-root .prog-label{font-size:11px;color:var(--text3);font-weight:500;text-align:center;line-height:1.3}
#sca-root .prog-label.active{color:var(--navy);font-weight:600}
#sca-root .prog-label.done{color:var(--teal)}
#sca-root .prog-line{flex:1;height:2px;background:var(--border);transition:background .3s;max-width:60px;margin-top:15px}
#sca-root .prog-line.done{background:var(--teal)}

/* ═══════════════════════════════════════════════════════
   PORTADA — MÓDULOS
═══════════════════════════════════════════════════════ */
#sca-root .hub-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:8px}
@media(min-width:520px){#sca-root .hub-grid{grid-template-columns:1fr 1fr}}
#sca-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}
#sca-root .hub-card:hover{border-color:var(--teal);box-shadow:var(--shadow2);transform:translateY(-1px)}
#sca-root .hub-top{display:flex;align-items:center;gap:14px}
#sca-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}
#sca-root .hub-num{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;display:block}
#sca-root .hub-title{font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;color:var(--navy);line-height:1.25;margin-top:2px}
#sca-root .hub-desc{font-size:13px;color:var(--text2);line-height:1.55;flex:1}
#sca-root .hub-footer{display:flex;align-items:center}
#sca-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}
#sca-root .hub-card:hover .hub-btn{background:var(--navy2)}

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

/* ═══════════════════════════════════════════════════════
   ETIQUETAS DE SECCIÓN
═══════════════════════════════════════════════════════ */
#sca-root .sec-label{font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;color:var(--teal2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;margin-top:20px;padding-bottom:5px;border-bottom:1px solid var(--border)}
#sca-root .sec-label:first-child{margin-top:0}

/* ═══════════════════════════════════════════════════════
   BOTONES DE OPCIÓN — LISTA VERTICAL
═══════════════════════════════════════════════════════ */
#sca-root .opt-list{display:flex;flex-direction:column;gap:12px;margin-top:6px}
#sca-root .sca-opt-btn{display:flex;align-items:flex-start;gap:12px;border:2px solid var(--border);background:var(--surface2);border-radius:10px;padding:13px 16px;cursor:pointer;text-align:left;transition:all .2s;font-family:'Source Sans 3',sans-serif;font-size:14px;font-weight:500;color:var(--text);width:100%}
#sca-root .sca-opt-btn:hover{border-color:var(--teal)}
#sca-root .sca-opt-btn.selected{border-color:var(--navy);background:var(--navy);color:#fff}
#sca-root .sca-opt-btn .opt-icon{font-size:18px;flex-shrink:0;line-height:1.3;margin-top:2px}
#sca-root .sca-opt-btn .opt-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
#sca-root .sca-opt-btn .opt-main{font-size:14px;font-weight:600;color:var(--navy);line-height:1.4;display:block}
#sca-root .sca-opt-btn.selected .opt-main{color:#fff}
#sca-root .sca-opt-btn .opt-sub{font-size:13px;display:block;color:var(--text2);font-family:'Source Sans 3',sans-serif;line-height:1.4}
#sca-root .sca-opt-btn.selected .opt-sub{color:rgba(255,255,255,.7)}

/* ═══════════════════════════════════════════════════════
   CHECKBOXES
═══════════════════════════════════════════════════════ */
#sca-root .check-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
#sca-root .check-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:all .2s;background:var(--surface2)}
#sca-root .check-item:hover{border-color:var(--teal)}
#sca-root .check-item.checked{border-color:var(--navy);background:#eff6ff}
#sca-root .check-box{width:20px;height:20px;border-radius:5px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .2s;margin-top:1px}
#sca-root .check-item.checked .check-box{background:var(--navy);border-color:var(--navy);color:#fff}
#sca-root .check-text{font-size:14px;color:var(--text);line-height:1.4}
#sca-root .check-text .ct-sub{font-size:12px;color:var(--text3);display:block;margin-top:2px}

/* ═══════════════════════════════════════════════════════
   INFO BOX
═══════════════════════════════════════════════════════ */
#sca-root .info-box{background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:12px 14px;margin-top:12px;margin-bottom:16px;font-size:13px;color:#0c4a6e;line-height:1.5;display:flex;gap:10px;align-items:flex-start}
#sca-root .info-box .ib-icon{flex-shrink:0;font-size:16px;margin-top:1px}
#sca-root .info-box ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin-top:2px}
#sca-root .info-box li{display:flex;gap:7px;font-size:13px;line-height:1.5;color:#0c4a6e}
#sca-root .info-box li span{flex:1;min-width:0}
#sca-root .info-box li::before{content:"•";color:#0891b2;font-weight:700;flex-shrink:0}

/* ═══════════════════════════════════════════════════════
   BOTONES DE NAVEGACIÓN
═══════════════════════════════════════════════════════ */
#sca-root .nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:12px}
#sca-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}
#sca-root .btn-back:hover{border-color:var(--navy);color:var(--navy)}
#sca-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}
#sca-root .btn-next:hover{background:var(--navy2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(13,45,94,.25)}
#sca-root .btn-next:disabled{background:var(--text3);cursor:not-allowed;transform:none;box-shadow:none}
#sca-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;box-shadow:0 4px 16px rgba(8,145,178,.3)}
#sca-root .btn-analyze:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(8,145,178,.4)}
#sca-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}
#sca-root .btn-restart:hover{background:var(--border);color:var(--navy)}
#sca-root .btn-continue{background:linear-gradient(135deg,var(--teal2),var(--navy));color:#fff;border:none;border-radius:8px;padding:13px 24px;font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;margin-bottom:20px;letter-spacing:.02em}
#sca-root .btn-continue:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(8,145,178,.35)}
#sca-root .btn-continue .bc-arrow{font-size:18px}

/* ═══════════════════════════════════════════════════════
   ELEMENTOS DE RESULTADO
═══════════════════════════════════════════════════════ */
#sca-root .result-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
#sca-root .result-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
#sca-root .result-icon.red{background:#fef2f2}
#sca-root .result-icon.blue{background:#eff6ff}
#sca-root .result-icon.amber{background:#fffbeb}
#sca-root .result-icon.green{background:#f0fdf4}
#sca-root .result-icon.teal{background:#ecfeff}
#sca-root .result-icon.purple{background:#faf5ff}
#sca-root .result-title{font-family:'Outfit',sans-serif;font-size:21px;font-weight:700;color:var(--navy);line-height:1.1;margin-bottom:4px}
#sca-root .result-subtitle{font-size:14px;color:var(--text2)}

/* ═══════════════════════════════════════════════════════
   BADGES DE EVIDENCIA
═══════════════════════════════════════════════════════ */
#sca-root .ev-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
#sca-root .ev-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;border:1.5px solid}
#sca-root .ev-badge.cl1{background:#f0fdf4;color:#065f46;border-color:#6ee7b7}
#sca-root .ev-badge.cl2a{background:#eff6ff;color:#1e40af;border-color:#93c5fd}
#sca-root .ev-badge.cl2b{background:#fffbeb;color:#92400e;border-color:#fcd34d}
#sca-root .ev-badge.cl3{background:#fef2f2;color:#991b1b;border-color:#fca5a5}
#sca-root .ev-badge.loe{background:#f8fafc;color:var(--text2);border-color:var(--border)}

/* ═══════════════════════════════════════════════════════
   TEXTO DE RESULTADO
═══════════════════════════════════════════════════════ */
#sca-root .result-text{font-size:15px;color:var(--text);line-height:1.7;margin-bottom:16px}
#sca-root .result-text strong{color:var(--navy)}

/* ═══════════════════════════════════════════════════════
   NOTAS / BULLETS
═══════════════════════════════════════════════════════ */
#sca-root .notes-box{background:var(--surface2);border-radius:10px;padding:16px;margin-bottom:14px}
#sca-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}
#sca-root .notes-box ul{list-style:none;display:flex;flex-direction:column;gap:8px}
#sca-root .notes-box li{display:flex;gap:8px;font-size:13px;color:var(--text2);line-height:1.5}
#sca-root .notes-box li span{flex:1;min-width:0}
#sca-root .notes-box li::before{content:"•";color:var(--teal);font-weight:700;flex-shrink:0}

/* ═══════════════════════════════════════════════════════
   TIMING BOX
═══════════════════════════════════════════════════════ */
#sca-root .timing-box{border:2px solid;border-radius:12px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
#sca-root .timing-box.red{border-color:#fca5a5;background:#fef2f2}
#sca-root .timing-box.amber{border-color:#fcd34d;background:#fffbeb}
#sca-root .timing-box.blue{border-color:#93c5fd;background:#eff6ff}
#sca-root .timing-box.green{border-color:#6ee7b7;background:#f0fdf4}
#sca-root .timing-box .tb-icon{font-size:24px;flex-shrink:0;margin-top:2px}
#sca-root .timing-box .tb-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-family:'Outfit',sans-serif;opacity:.7;margin-bottom:3px}
#sca-root .timing-box .tb-value{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;line-height:1.2}
#sca-root .timing-box.red .tb-value{color:var(--red)}
#sca-root .timing-box.amber .tb-value{color:var(--amber)}
#sca-root .timing-box.blue .tb-value{color:var(--blue)}
#sca-root .timing-box.green .tb-value{color:var(--green)}
#sca-root .timing-box .tb-desc{font-size:13px;color:var(--text2);margin-top:4px;line-height:1.4}
#sca-root .timing-box ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:10px}
#sca-root .timing-box li{display:flex;gap:8px;font-size:13px;line-height:1.5}
#sca-root .timing-box li span{flex:1;min-width:0}
#sca-root .timing-box li::before{content:"•";font-weight:700;flex-shrink:0}
#sca-root .timing-box.red li{color:#7f1d1d}
#sca-root .timing-box.red li::before{color:var(--red)}
#sca-root .timing-box.amber li{color:#78350f}
#sca-root .timing-box.amber li::before{color:var(--amber)}
#sca-root .timing-box.blue li{color:#1e3a5f}
#sca-root .timing-box.blue li::before{color:var(--blue)}
#sca-root .timing-box.green li{color:#064e3b}
#sca-root .timing-box.green li::before{color:var(--green)}

/* ═══════════════════════════════════════════════════════
   TIMELINE BOX — secuencias temporales DAPT/OAC
═══════════════════════════════════════════════════════ */
#sca-root .timeline-block{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px}
#sca-root .timeline-header{background:var(--navy);color:#fff;padding:10px 16px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em}
#sca-root .timeline-row{display:flex;align-items:stretch;border-top:1px solid var(--border)}
#sca-root .timeline-row:first-child{border-top:none}
#sca-root .timeline-time{background:var(--surface2);border-right:1px solid var(--border);padding:10px 12px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--navy);min-width:80px;max-width:110px;display:flex;align-items:center;flex-shrink:0;word-break:break-word;white-space:normal}
#sca-root .timeline-content{padding:10px 14px;font-size:13px;color:var(--text);line-height:1.5;flex:1}
#sca-root .timeline-content strong{color:var(--navy)}
#sca-root .timeline-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;border:1.5px solid;margin-left:6px;vertical-align:middle}
#sca-root .timeline-badge.cl1{background:#f0fdf4;color:#065f46;border-color:#6ee7b7}
#sca-root .timeline-badge.cl2a{background:#eff6ff;color:#1e40af;border-color:#93c5fd}
#sca-root .timeline-badge.cl2b{background:#fffbeb;color:#92400e;border-color:#fcd34d}
#sca-root .timeline-badge.cl3{background:#fef2f2;color:#991b1b;border-color:#fca5a5}

/* ═══════════════════════════════════════════════════════
   DRUG CARD
═══════════════════════════════════════════════════════ */
#sca-root .drug-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px}
#sca-root .drug-card .dc-name{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#sca-root .drug-card .dc-body{font-size:13px;color:var(--text2);line-height:1.5}
#sca-root .drug-card .dc-badge{font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 8px;border-radius:20px;border:1.5px solid}
#sca-root .dc-badge.cl1{background:#f0fdf4;color:#065f46;border-color:#6ee7b7}
#sca-root .dc-badge.cl2a{background:#eff6ff;color:#1e40af;border-color:#93c5fd}
#sca-root .dc-badge.cl2b{background:#fffbeb;color:#92400e;border-color:#fcd34d}
#sca-root .dc-badge.cl3{background:#fef2f2;color:#991b1b;border-color:#fca5a5}
#sca-root .dc-badge.loe{background:#f8fafc;color:var(--text2);border-color:var(--border)}

/* ═══════════════════════════════════════════════════════
   CAJAS DE ALERTA
═══════════════════════════════════════════════════════ */
#sca-root .warn-box{background:#fef2f2;border:1px solid #fca5a5;border-radius:10px;padding:12px 14px;margin-bottom:12px;font-size:13px;color:#7f1d1d;display:flex;gap:8px;align-items:flex-start;line-height:1.5}
#sca-root .warn-box strong{display:block;margin-bottom:2px}
#sca-root .warn-box-amber{background:#fffbeb;border:1px solid #fcd34d;border-radius:10px;padding:12px 14px;margin-top:12px;margin-bottom:12px;font-size:13px;color:#78350f;display:flex;gap:8px;align-items:flex-start;line-height:1.5}
#sca-root .warn-box-amber > div > strong:first-child{display:block;margin-bottom:2px}
#sca-root .clase3-box{background:#fef2f2;border:2px solid #dc2626;border-radius:10px;padding:12px 16px;margin-top:12px;margin-bottom:12px;font-size:13px;color:#7f1d1d;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
#sca-root .clase3-box .c3-badge{flex-shrink:0;background:#dc2626;color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;margin-top:1px}
#sca-root .clase3-box .c3-text strong{display:block;margin-bottom:2px;color:#991b1b}

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

/* ═══════════════════════════════════════════════════════
   SEPARADOR
═══════════════════════════════════════════════════════ */
#sca-root .sep{height:1px;background:var(--border);margin:16px 0}

/* ═══════════════════════════════════════════════════════
   SUMMARY BOX
═══════════════════════════════════════════════════════ */
#sca-root .sum-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px;padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:10px}
#sca-root .sum-chip{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:3px 9px;font-size:11px;color:var(--text2);font-family:'Source Sans 3',sans-serif;white-space:nowrap}
#sca-root .sum-chip .sc-v{font-weight:600;color:var(--navy);font-family:'Outfit',sans-serif}

/* ═══════════════════════════════════════════════════════
   CALCULADORA GRACE
═══════════════════════════════════════════════════════ */
#sca-root .grace-calc{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}
#sca-root .grace-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
#sca-root .grace-field{display:flex;flex-direction:column;gap:4px}
#sca-root .grace-field label{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
#sca-root .grace-field input{background:#fff;border:1.5px solid var(--border);border-radius:8px;padding:8px 10px;font-size:16px;font-family:'JetBrains Mono',monospace;color:var(--navy);font-weight:600;width:100%;outline:none;-webkit-appearance:none;-moz-appearance:textfield}
#sca-root .grace-field input:focus{border-color:var(--border-focus)}
#sca-root .grace-field input::placeholder{color:var(--text3);font-weight:400;font-size:13px}
#sca-root .grace-toggles{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
#sca-root .grace-toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-radius:8px;border:1.5px solid var(--border);background:#fff;cursor:pointer;transition:all .15s;width:100%;text-align:left}
#sca-root .grace-toggle.grace-active{border-color:var(--navy);background:var(--navy)}
#sca-root .grace-toggle .gt-label{font-size:13px;color:var(--text);font-weight:500;flex:1}
#sca-root .grace-toggle.grace-active .gt-label{color:#fff}
#sca-root .grace-toggle .gt-pts{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text3);font-weight:600;flex-shrink:0;margin-left:8px}
#sca-root .grace-toggle.grace-active .gt-pts{color:rgba(255,255,255,.65)}
#sca-root .grace-result{border-radius:10px;padding:13px 16px;display:flex;align-items:center;gap:14px}
#sca-root .grace-result-empty{background:#f8fafc;border:1.5px dashed var(--border)}
#sca-root .grace-result-green{background:#f0fdf4;border:2px solid #6ee7b7}
#sca-root .grace-result-red{background:#fef2f2;border:2px solid #fca5a5}
#sca-root .grace-score-num{font-family:'Outfit',sans-serif;font-size:30px;font-weight:700;flex-shrink:0;line-height:1}
#sca-root .grace-result-green .grace-score-num{color:var(--green)}
#sca-root .grace-result-red .grace-score-num{color:var(--red)}
#sca-root .grace-score-text{font-size:13px;line-height:1.4;color:var(--text2)}
#sca-root .grace-score-text strong{display:block;margin-bottom:2px}

/* ═══════════════════════════════════════════════════════
   OBJETIVO BOX
═══════════════════════════════════════════════════════ */
#sca-root .objetivo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
#sca-root .objetivo-grid .objetivo-card:nth-child(3){grid-column:1/-1;max-width:calc(50% - 5px);margin:0 auto;width:100%}
@media(min-width:520px){#sca-root .objetivo-grid{grid-template-columns:repeat(3,1fr)}
#sca-root .objetivo-grid .objetivo-card:nth-child(3){grid-column:auto;max-width:100%;margin:0}}
#sca-root .objetivo-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center}
#sca-root .objetivo-card .oj-icon{font-size:22px;margin-bottom:6px}
#sca-root .objetivo-card .oj-label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-family:'Outfit',sans-serif;margin-bottom:4px}
#sca-root .objetivo-card .oj-value{font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;color:var(--navy);line-height:1.2}
#sca-root .objetivo-card .oj-sub{font-size:11px;color:var(--text3);margin-top:3px}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
#sca-root .app-footer{text-align:center;margin-top:24px;font-size:11px;color:var(--text3);line-height:1.8}
#sca-root .app-footer strong{color:var(--text2)}

/* ── EXPORTACIÓN DE RESULTADOS (EXP-R7, EXP-R9) ──── */
#sca-root .sca-action-row {
  display: flex;
  gap: 10px;
  margin: 4px 0 16px 0;
  width: 100%;
}
#sca-root button.sca-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;
  transition: border-color .18s, color .18s, background .18s;
  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;
}
#sca-root button#sca-btn-copy:hover {
  border-color: #0891b2 !important;
  color: #0e7490 !important;
  background: #f0f9ff !important;
}
#sca-root button#sca-btn-print:hover {
  border-color: #0d2d5e !important;
  color: #0d2d5e !important;
  background: #eff6ff !important;
}
@media (max-width: 420px) {
  #sca-root .sca-action-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
 * MEJORAS TRANSVERSALES v5.1 — Cardioteca.com
 * Guía: Síndrome Coronario Agudo ESC 2023 · Prefijo: sca
 * Aplicado: 2026-06-02
 * ═══════════════════════════════════════════════════════════════ */

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

/* ── MJ-02 · MODO OSCURO — BOTÓN (v4.4 DEFINITIVO) ─────────────
   El botón está en fragmento-joomla.html como HERMANO de .app-header.
   #sca-root tiene position:relative para anclarlo.
   NUNCA rgba(255,255,255,...) en modo claro — fondo es var(--bg). */
#sca-root { position: relative; }
#sca-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;
}
#sca-root .dark-toggle:hover { background: rgba(13,45,94,.18); transform: scale(1.08); }
#sca-root.dk .dark-toggle {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.40);
  color: #fff;
}
#sca-root.dk .dark-toggle:hover { background: rgba(255,255,255,.28); }

/* ── MJ-02 · MODO OSCURO — VARIABLES ───────────────────────────── */
#sca-root.dk {
  --bg:#0f172a; --surface:#1e293b; --surface2:#162032;
  --border:#334155; --border-focus:#38bdf8;
  --navy:#7dd3fc; --navy2:#38bdf8; --teal:#22d3ee; --teal2:#06b6d4;
  --green:#34d399; --blue:#60a5fa; --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);
}

/* ── MJ-02 · MODO OSCURO — ELEMENTOS ───────────────────────────── */
#sca-root.dk .app-header {
  background: linear-gradient(135deg,#0c1a3d 0%,#1e293b 100%);
}
#sca-root.dk .app-header .badge {
  background: rgba(125,211,252,.15);
  border: 1px solid rgba(125,211,252,.30);
  color: var(--teal);
}
#sca-root.dk .app-header h1 { color: #f1f5f9; }
#sca-root.dk .app-header p  { color: var(--text2); }
#sca-root.dk .card,
#sca-root.dk .hub-card       { background: var(--surface); border-color: var(--border); }
#sca-root.dk .hub-icon       { background: var(--surface2); border-color: var(--border); }
#sca-root.dk .hub-title      { color: var(--navy); }
#sca-root.dk .disclaimer     { background: #1a1200; border-color: #78350f; color: #d97706; }
#sca-root.dk .notes-box      { background: var(--surface2); border-color: var(--border); }
#sca-root.dk .notes-title    { color: var(--navy); }
#sca-root.dk .warn-box       { background: #1c0a0a; border-left-color: var(--red); }
#sca-root.dk .info-box       { background: #0a1628; border-left-color: var(--teal); }
#sca-root.dk .timing-box     { background: var(--surface2); border-color: var(--border); }
#sca-root.dk .result-header  { background: var(--surface2); }
#sca-root.dk .drug-card      { background: var(--surface2); border-color: var(--border); }
#sca-root.dk .objetivo-grid  { background: var(--surface2); border-color: var(--border); }
#sca-root.dk .grace-box      { background: var(--surface2); border-color: var(--border); }
#sca-root.dk .sca-prog-bar   { background: transparent; }
#sca-root.dk .prog-circle    { background: var(--surface); border-color: var(--border); color: var(--text3); }
#sca-root.dk .prog-circle.active { background: var(--navy2); border-color: var(--navy2); color: #0f172a; }
#sca-root.dk .prog-circle.done   { background: var(--teal2); border-color: var(--teal2); color: #0f172a; }
#sca-root.dk .prog-line      { background: var(--border); }
#sca-root.dk .prog-line.done { background: var(--teal2); }
#sca-root.dk .section-label  { color: var(--text3); }
#sca-root.dk .opt-btn        { background: var(--surface2); border-color: var(--border); color: var(--text); }
#sca-root.dk .opt-btn.sel    { background: #0c2a4a; border-color: var(--navy2); color: var(--navy); }
#sca-root.dk .chk-item       { background: var(--surface2); border-color: var(--border); }
#sca-root.dk .chk-item.checked { background: #0c2a4a; border-color: var(--navy2); }
#sca-root.dk .app-footer     { border-top-color: var(--border); }
#sca-root.dk .af-brand       { color: var(--teal); }
#sca-root.dk .af-ref         { color: var(--text3); }
#sca-root.dk .af-copy        { color: var(--text3); }

/* ERROR-17: botones de acción visibles en modo oscuro */
#sca-root.dk .btn-restart,
#sca-root.dk .btn-back {
  background: var(--surface);
  border-color: #475569;
  color: var(--text2);
}
#sca-root.dk .btn-restart:hover,
#sca-root.dk .btn-back:hover  { border-color: var(--teal); color: var(--teal2); background: #0c2340; }
#sca-root.dk .btn-continue    { background: var(--navy2); color: #0f172a; border-color: transparent; }
#sca-root.dk .btn-continue:hover { background: var(--navy); }
#sca-root.dk .btn-next        { background: #1d4ed8; }
#sca-root.dk .btn-next:hover  { background: #2563eb; }
#sca-root.dk .btn-analyze     { box-shadow: 0 4px 16px rgba(8,145,178,.45); }

/* MJ-02 · botones exportación en dk */
#sca-root.dk button.sca-btn-export {
  background: var(--surface) !important;
  border-color: #475569 !important;
  color: var(--text2) !important;
}
#sca-root.dk button#sca-btn-copy:hover  { border-color: var(--teal)  !important; color: var(--teal2) !important; background: #071e2e !important; }
#sca-root.dk button#sca-btn-print:hover { border-color: var(--navy2) !important; color: var(--navy)  !important; background: #071e2e !important; }

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

#sca-root.dk .followup-timeline { background: var(--surface2); border-color: var(--border); }
#sca-root.dk .ft-dot { border-color: var(--surface2); }
#sca-root.dk .ft-step:not(:last-child)::after { background: var(--border); }

/* ── MJ-05 · DATOS PENDIENTES — CAJA ÁMBAR ─────────────────────
   Posición obligatoria: ANTES del disclaimer, en CADA función resultado */
#sca-root .sca-hint-amber {
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.6;
}
#sca-root .sca-hint-amber .hint-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 700;
  color: #92400e; margin-bottom: 4px;
}
#sca-root .sca-hint-amber .hint-body { color: #78350f; }
#sca-root.dk .sca-hint-amber {
  background: #1a1000;
  border-color: #92400e;
}
#sca-root.dk .sca-hint-amber .hint-title { color: #fbbf24; }
#sca-root.dk .sca-hint-amber .hint-body  { color: #d97706; }

/* ── MJ-11 · PANEL DE CASOS GUARDADOS ──────────────────────────── */
#sca-root .sca-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;
}
#sca-root .sca-btn-save:hover { opacity: .92; transform: translateY(-1px); }
#sca-root input#sca-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;
}
#sca-root input#sca-case-name:focus { outline: none; border-color: var(--teal); }
#sca-root .cases-panel-scroll {
  max-height: 260px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
#sca-root .cases-panel-scroll::-webkit-scrollbar { width: 4px; }
#sca-root .cases-panel-scroll::-webkit-scrollbar-track { background: transparent; }
#sca-root .cases-panel-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Bootstrap 4 override: div contenedor del panel de casos */
#sca-root .sca-action-row {
  display: flex !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── Drug-card: franja de color según clase de recomendación ── */
#sca-root .drug-card.dc-cl1  { border-left: 3px solid #6ee7b7; }
#sca-root .drug-card.dc-cl2a { border-left: 3px solid #93c5fd; }
#sca-root .drug-card.dc-cl2b { border-left: 3px solid #fcd34d; }
#sca-root .drug-card.dc-cl3  { border-left: 3px solid #fca5a5; }

/* ── Alta checklist cards ── */
#sca-root .alta-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--surface2);margin-bottom:10px}
#sca-root .alta-card-hdr{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
#sca-root .alta-card-hdr .ac-icon{font-size:20px;flex-shrink:0;line-height:1.3;margin-top:1px}
#sca-root .alta-card-hdr .ac-meta{flex:1;min-width:0}
#sca-root .alta-card-hdr .ac-title{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:4px}
#sca-root .alta-card .ac-body{font-size:13px;color:var(--text2);line-height:1.6}
#sca-root .alta-card .ac-study{font-size:12px;color:var(--text3);margin-top:6px;font-style:italic;line-height:1.5}
#sca-root.dk .alta-card{background:var(--surface2);border-color:var(--border)}
#sca-root.dk .alta-card-hdr .ac-title{color:var(--navy)}