/*
 * Cardioteca.com — Guías Clínicas Interactivas
 * Guía: Hipertensión Arterial ESC 2024
 * Carpeta: /components/com_cardiotools/hta/
 * Versión: 20250520
 * © Campus Formación Sanitaria S.L. — CIF B88633318
 */

/* ── VARIABLES Y RESET ─────────────────────────────────────────── */
#hta-esc2024{--bg:#f0f4f8;--surface:#fff;--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)}
#hta-esc2024 *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
#hta-esc2024{background:var(--bg);color:var(--text);font-family:'Source Sans 3',sans-serif;font-size:15px;line-height:1.6;min-height:auto}
#hta-esc2024 #hw{max-width:780px;margin:0 auto;padding:24px 16px 48px}

/* ── ANIMACIONES ───────────────────────────────────────────────── */
@keyframes htaPulse{0%,100%{opacity:1}50%{opacity:.4}}

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

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

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

/* ── SECTION SELECTED ──────────────────────────────────────────── */
#hta-esc2024 .section-selected{background:linear-gradient(135deg,#eff6ff,#ecfdf5);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:20px;display:flex;align-items:center;gap:10px}
#hta-esc2024 .section-selected .sel-label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-family:'Outfit',sans-serif}
#hta-esc2024 .section-selected .sel-value{font-size:14px;font-weight:600;color:var(--navy);font-family:'Outfit',sans-serif}

/* ── FORMULARIO ────────────────────────────────────────────────── */
#hta-esc2024 .form-section{margin-bottom:24px}
#hta-esc2024 .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)}
#hta-esc2024 .form-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:500px){#hta-esc2024 .form-grid.cols2{grid-template-columns:1fr 1fr}}
@media(min-width:500px){#hta-esc2024 .form-grid.cols3{grid-template-columns:1fr 1fr 1fr}}
#hta-esc2024 .field{display:flex;flex-direction:column;gap:5px}
#hta-esc2024 .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}
#hta-esc2024 .field label .unit{font-family:'JetBrains Mono',monospace;font-weight:400;color:var(--text3);font-size:11px;text-transform:none;letter-spacing:0}
#hta-esc2024 .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}
#hta-esc2024 .field input,#hta-esc2024 .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}
#hta-esc2024 .field input:focus,#hta-esc2024 .field select:focus{border-color:var(--border-focus);background:#fff}
#hta-esc2024 .field input::placeholder{color:var(--text3)}
#hta-esc2024 .field .hint{font-size:11px;color:var(--text3);margin-top:2px;font-style:italic}

/* ── RADIO CHIPS ───────────────────────────────────────────────── */
#hta-esc2024 .radio-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
#hta-esc2024 .chip-label{cursor:pointer;-webkit-tap-highlight-color:transparent}
#hta-esc2024 .chip-label input{display:none}
#hta-esc2024 .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)}
#hta-esc2024 .chip-label input:checked+.chip-text{background:var(--navy);border-color:var(--navy);color:#fff}
#hta-esc2024 .chip-label:hover .chip-text{border-color:var(--teal)}

/* ── COMORBILIDADES CHECKBOXES ─────────────────────────────────── */
#hta-esc2024 .comorbidity-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:500px){#hta-esc2024 .comorbidity-grid{grid-template-columns:1fr 1fr}}
#hta-esc2024 .comorbidity-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:all .15s;background:var(--surface2);-webkit-tap-highlight-color:transparent}
#hta-esc2024 .comorbidity-item:hover{border-color:var(--teal)}
#hta-esc2024 .comorbidity-item.checked{border-color:var(--navy);background:#eff6ff}
#hta-esc2024 .comorbidity-item input{width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--navy);cursor:pointer}
#hta-esc2024 .comorbidity-item label{font-size:13px;color:var(--text);cursor:pointer;line-height:1.4}
#hta-esc2024 .comorbidity-item label strong{display:block;font-weight:600;font-size:13px}
#hta-esc2024 .comorbidity-item label span{font-size:11px;color:var(--text3)}

/* ── LIFESTYLE TABLE ───────────────────────────────────────────── */
#hta-esc2024 .lifestyle-table{width:100%;border-collapse:collapse;font-size:13px}
#hta-esc2024 .lifestyle-table th{background:var(--navy);color:#fff;padding:8px 12px;text-align:left;font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.04em}
#hta-esc2024 .lifestyle-table td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top}
#hta-esc2024 .lifestyle-table tr:hover td{background:var(--surface2)}
#hta-esc2024 .lifestyle-table .impact{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--green);font-weight:500}

/* ── SCORE2 ────────────────────────────────────────────────────── */
#hta-esc2024 .score2-result{display:flex;align-items:center;gap:16px;padding:16px;background:var(--surface2);border-radius:12px;border:1.5px solid var(--border);margin-bottom:16px}
#hta-esc2024 .score2-number{font-family:'Outfit',sans-serif;font-size:36px;font-weight:700;min-width:70px;text-align:center;line-height:1}
#hta-esc2024 .score2-number .pct{font-size:16px;font-weight:400}
#hta-esc2024 .score2-info .score2-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-family:'Outfit',sans-serif;opacity:.7}
#hta-esc2024 .score2-info .score2-cat{font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;margin-top:2px}
#hta-esc2024 .score2-info .score2-note{font-size:12px;color:var(--text3);margin-top:4px}
#hta-esc2024 .score2-result.bajo{border-color:#6ee7b7;background:#f0fdf4}
#hta-esc2024 .score2-result.bajo .score2-number{color:var(--green)}
#hta-esc2024 .score2-result.bajo .score2-cat{color:var(--green)}
#hta-esc2024 .score2-result.alto{border-color:#93c5fd;background:#eff6ff}
#hta-esc2024 .score2-result.alto .score2-number{color:var(--blue)}
#hta-esc2024 .score2-result.alto .score2-cat{color:var(--blue)}
#hta-esc2024 .score2-result.muyalto{border-color:#fca5a5;background:#fef2f2}
#hta-esc2024 .score2-result.muyalto .score2-number{color:var(--red)}
#hta-esc2024 .score2-result.muyalto .score2-cat{color:var(--red)}

/* ── BADGE CLASIFICACIÓN PA ────────────────────────────────────── */
#hta-esc2024 .pa-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;border:1.5px solid}
#hta-esc2024 .pa-badge.no-elevada{background:#f0fdf4;color:#065f46;border-color:#6ee7b7}
#hta-esc2024 .pa-badge.elevada{background:#fffbeb;color:#92400e;border-color:#fcd34d}
#hta-esc2024 .pa-badge.hta{background:#fef2f2;color:#991b1b;border-color:#fca5a5}
#hta-esc2024 .pa-badge.urgencia{background:#7f1d1d;color:#fff;border-color:#7f1d1d}

/* ── BOTONES ───────────────────────────────────────────────────── */
#hta-esc2024 .nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:12px}
#hta-esc2024 .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}
#hta-esc2024 .btn-back:hover{border-color:var(--navy);color:var(--navy)}
#hta-esc2024 .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}
#hta-esc2024 .btn-next:hover{background:var(--navy2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(13,45,94,.25)}
#hta-esc2024 .btn-next:disabled{background:var(--text3);cursor:not-allowed;transform:none;box-shadow:none}
#hta-esc2024 .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)}
#hta-esc2024 .btn-analyze:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(8,145,178,.4)}
#hta-esc2024 .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}
#hta-esc2024 .btn-restart:hover{background:var(--border);color:var(--navy)}

/* ── BADGES DE EVIDENCIA ESC ───────────────────────────────────── */
#hta-esc2024 .evidence-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
#hta-esc2024 .ev-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;border:1.5px solid}
#hta-esc2024 .ev-badge.classI{background:#f0fdf4;color:#065f46;border-color:#6ee7b7}
#hta-esc2024 .ev-badge.classIIa{background:#eff6ff;color:#1e40af;border-color:#93c5fd}
#hta-esc2024 .ev-badge.classIIb{background:#fffbeb;color:#92400e;border-color:#fcd34d}
#hta-esc2024 .ev-badge.loe{background:#f8fafc;color:var(--text2);border-color:var(--border)}

/* ── HEADER DE RESULTADO ───────────────────────────────────────── */
#hta-esc2024 .result-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
#hta-esc2024 .result-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
#hta-esc2024 .result-icon.green{background:#ecfdf5;color:var(--green)}
#hta-esc2024 .result-icon.blue{background:#eff6ff;color:var(--blue)}
#hta-esc2024 .result-icon.amber{background:#fffbeb;color:var(--amber)}
#hta-esc2024 .result-icon.red{background:#fef2f2;color:var(--red)}
#hta-esc2024 .result-icon.navy{background:#eff6ff;color:var(--navy)}
#hta-esc2024 .result-title{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:4px}
#hta-esc2024 .result-subtitle{font-size:14px;color:var(--text2)}

/* ── RECOMENDACIÓN FARMACOLÓGICA ───────────────────────────────── */
#hta-esc2024 .drug-step-header{display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:12px;margin-bottom:16px}
#hta-esc2024 .drug-step-num{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.5);color:#fff;font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#hta-esc2024 .drug-step-label{font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;color:#fff;line-height:1.3}
#hta-esc2024 .drug-box{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:0;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
#hta-esc2024 .drug-box-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
#hta-esc2024 .drug-class-icon{font-size:18px}
#hta-esc2024 .drug-class{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--navy)}
#hta-esc2024 .drug-box-body{padding:14px 16px}
#hta-esc2024 .drug-subgroup{margin-bottom:10px}
#hta-esc2024 .drug-subgroup-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--teal2);font-family:'Outfit',sans-serif;margin-bottom:6px}
#hta-esc2024 .drug-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
#hta-esc2024 .drug-pill{background:var(--navy);color:#fff;border-radius:6px;padding:5px 11px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.3}
#hta-esc2024 .drug-note{font-size:12px;color:var(--text2);line-height:1.6;background:var(--surface2);border-radius:8px;padding:8px 12px;margin:10px 0}
#hta-esc2024 .drug-razon{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
#hta-esc2024 .drug-razon-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);font-family:'Outfit',sans-serif;margin-bottom:8px}
#hta-esc2024 .drug-razon ul{list-style:none;display:flex;flex-direction:column;gap:6px}
#hta-esc2024 .drug-razon li{font-size:12px;color:var(--text2);padding-left:16px;position:relative;line-height:1.5}
#hta-esc2024 .drug-razon li::before{content:"›";position:absolute;left:0;color:var(--teal);font-weight:700;font-size:14px;line-height:1.3}
#hta-esc2024 .drug-box{background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:16px;margin-bottom:12px}
#hta-esc2024 .drug-names{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--navy);font-weight:500;margin-bottom:4px}
#hta-esc2024 .drug-combo-box{background:#eff6ff;border:1.5px solid #93c5fd;border-radius:12px;padding:16px;margin-bottom:12px}
#hta-esc2024 .drug-combo-title{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:#1e40af;margin-bottom:10px}
#hta-esc2024 .drug-combo-pill{display:inline-flex;align-items:center;gap:4px;background:#dbeafe;color:#1e40af;border-radius:6px;padding:5px 10px;font-family:'Source Sans 3',sans-serif;font-size:12px;font-weight:600;margin:2px}

/* ── COMORBILIDAD ADD-ON ───────────────────────────────────────── */
#hta-esc2024 .addon-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:0;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
#hta-esc2024 .addon-card-header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
#hta-esc2024 .addon-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
#hta-esc2024 .addon-card-title{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--navy);line-height:1.3}
#hta-esc2024 .addon-card-body{padding:14px 16px}
#hta-esc2024 .addon-drug-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--teal2);font-family:'Outfit',sans-serif;margin-bottom:8px}
#hta-esc2024 .addon-drug-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#hta-esc2024 .addon-drug-pill{background:var(--navy);color:#fff;border-radius:6px;padding:5px 10px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:400;line-height:1.3}
#hta-esc2024 .addon-drug-pill.alt{background:var(--surface2);color:var(--navy);border:1.5px solid var(--border)}
#hta-esc2024 .addon-note{font-size:12px;color:var(--text2);line-height:1.6;background:var(--surface2);border-radius:8px;padding:8px 12px;margin-bottom:10px}
#hta-esc2024 .addon-evidence{display:flex;align-items:center;gap:8px}

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

/* ── NOTAS Y AVISOS ────────────────────────────────────────────── */
#hta-esc2024 .notes-list{background:var(--surface2);border-radius:10px;padding:16px;margin-bottom:16px}
#hta-esc2024 .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}
#hta-esc2024 .notes-list ul{list-style:none;display:flex;flex-direction:column;gap:8px}
#hta-esc2024 .notes-list li{display:block;font-size:13px;color:var(--text2);line-height:1.6;padding-left:16px;position:relative}
#hta-esc2024 .notes-list li::before{content:"•";color:var(--teal);font-weight:700;position:absolute;left:0;top:0}
#hta-esc2024 .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}
#hta-esc2024 .alert-box{background:#fff8e1;border:1px solid #fde68a;border-radius:10px;padding:12px 16px;margin-bottom:12px;font-size:13px;color:#78350f;display:flex;gap:8px;align-items:flex-start}
#hta-esc2024 .info-box{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:12px 16px;margin-bottom:12px;font-size:13px;color:#1e3a8a;display:flex;gap:8px;align-items:flex-start}
#hta-esc2024 .success-box{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:12px 16px;margin-bottom:12px;font-size:13px;color:#14532d;display:flex;gap:8px;align-items:flex-start}

/* ── HTA RESISTENTE ────────────────────────────────────────────── */
#hta-esc2024 .resistant-header{background:var(--navy);color:#fff;border-radius:10px 10px 0 0;padding:12px 18px;display:flex;align-items:center;gap:10px}
#hta-esc2024 .resistant-header h3{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:#fff !important}
#hta-esc2024 .resistant-body{border:1.5px solid var(--navy);border-top:none;border-radius:0 0 10px 10px;padding:16px;margin-bottom:16px}

/* ── OBJETIVO DE PA ────────────────────────────────────────────── */
#hta-esc2024 .target-box{padding:20px;border-radius:12px;margin-bottom:8px}
#hta-esc2024 .target-box.standard{background:#eff6ff;border:1.5px solid #93c5fd}
#hta-esc2024 .target-box.relaxed{background:#fffbeb;border:1.5px solid #fcd34d}
#hta-esc2024 .target-box.individualizado{background:#f8fafc;border:1.5px solid var(--border)}
#hta-esc2024 .target-bp-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:8px}
#hta-esc2024 .target-bp-col{display:flex;flex-direction:column;align-items:center;gap:6px}
#hta-esc2024 .target-bp-tag{font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;padding:2px 10px;border-radius:20px;white-space:nowrap}
#hta-esc2024 .target-bp-tag.pas{background:var(--navy);color:#fff}
#hta-esc2024 .target-bp-tag.pad{background:var(--teal);color:#fff}
#hta-esc2024 .target-bp-num{font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:500;line-height:1;color:var(--navy);white-space:nowrap}
#hta-esc2024 .target-bp-unit{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text3);letter-spacing:.03em}
#hta-esc2024 .target-bp-sep{font-family:'JetBrains Mono',monospace;font-size:26px;color:var(--text3);font-weight:300;line-height:1;padding-top:20px;flex-shrink:0}
#hta-esc2024 .target-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-family:'Outfit',sans-serif;margin-bottom:4px}
#hta-esc2024 .target-note{font-size:12px;color:var(--text2)}

/* ── SEPARADOR ─────────────────────────────────────────────────── */
#hta-esc2024 .section-divider{border:none;border-top:1px solid var(--border);margin:20px 0}

/* ── PIE DE PÁGINA ─────────────────────────────────────────────── */
#hta-esc2024 .app-footer{text-align:center;margin-top:24px;font-size:11px;color:var(--text3);line-height:1.7}
#hta-esc2024 .app-footer strong{color:var(--text2)}
#hta-esc2024 .app-footer em{font-style:italic}

/* ── DISCLAIMER ────────────────────────────────────────────────── */
#hta-esc2024 .disclaimer-legal{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:14px 18px;margin:24px 0 8px;font-size:12px;color:#6c757d;line-height:1.6}
#hta-esc2024 .disclaimer{background:#fff8e1;border:1px solid #fde68a;border-radius:10px;padding:12px 16px;margin-bottom:16px;display:block}
#hta-esc2024 .disclaimer-text{font-size:11px;color:#78350f;line-height:1.6}
#hta-esc2024 .disclaimer-text strong{display:inline;font-weight:700}
@media(min-width:520px){#hta-esc2024 .disclaimer-text{font-size:12px}}

/* ── EXPORTACIÓN DE RESULTADOS ─────────────────────────────────────────── */
#hta-esc2024 .hta-action-row{display:flex !important;gap:10px;margin:4px 0 16px 0;width:100%;border:none !important;background:transparent !important;padding:0 !important;box-shadow:none !important;border-radius:0 !important}
#hta-esc2024 button.hta-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}
#hta-esc2024 button#hta-btn-copy:hover{border-color:#0891b2 !important;color:#0e7490 !important;background:#f0f9ff !important}
#hta-esc2024 button#hta-btn-print:hover{border-color:#0d2d5e !important;color:#0d2d5e !important;background:#eff6ff !important}
@media(max-width:420px){#hta-esc2024 .hta-action-row{flex-direction:column}}

/* ═══════════════════════════════════════════════════════════════
 * MEJORAS TRANSVERSALES v4.4 — Cardioteca.com
 * Guía: Hipertensión Arterial ESC 2024 · Prefijo: hta
 * Aplicado: 2026-05-31
 * ═══════════════════════════════════════════════════════════════ */

/* ── MJ-01 · ANIMACIÓN FADE (guard en JS con htaPrevStep) ──────── */
@keyframes htaFadeIn {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}
#hta-esc2024 #app.hta-anim { animation:htaFadeIn 180ms ease forwards; }

/* ── MJ-02 · BOTÓN MODO OSCURO (ERROR-04 v4.4: HTML estático) ──── */
#hta-esc2024 { position:relative; }
#hta-esc2024 .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;
}
#hta-esc2024 .dark-toggle:hover { background:rgba(13,45,94,.18); transform:scale(1.08); }
#hta-esc2024.dk .dark-toggle {
  background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.40); color:#fff;
}
#hta-esc2024.dk .dark-toggle:hover { background:rgba(255,255,255,.28); }

/* ── MJ-02 · MODO OSCURO — VARIABLES ───────────────────────────── */
#hta-esc2024.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);
}
#hta-esc2024.dk .app-header { background:linear-gradient(135deg,#0c1a3d 0%,#1e293b 100%); }
#hta-esc2024.dk .app-header h1 { color:#f1f5f9; }
#hta-esc2024.dk .app-header h1 span { color:var(--teal); }
#hta-esc2024.dk .app-header p { color:var(--text2); }
#hta-esc2024.dk .app-header .badge { background:rgba(34,211,238,.15);color:var(--teal);border:1px solid rgba(34,211,238,.30); }
#hta-esc2024.dk .card { background:var(--surface); border-color:var(--border); }
#hta-esc2024.dk .section-title { color:var(--navy); }
#hta-esc2024.dk .form-label { color:var(--text2); }
#hta-esc2024.dk input[type=number],
#hta-esc2024.dk select { background:var(--surface2); border-color:var(--border); color:var(--text); }
#hta-esc2024.dk .chip-text { background:var(--surface2); border-color:var(--border); color:var(--text2); }
#hta-esc2024.dk input[type=radio]:checked + .chip-text,
#hta-esc2024.dk input[type=checkbox]:checked + .chip-text {
  background:rgba(8,145,178,.20); border-color:var(--teal); color:var(--teal);
}
#hta-esc2024.dk .result-card { background:var(--surface); border-color:var(--border); }
#hta-esc2024.dk .param-box   { background:var(--surface2); border-color:var(--border); }
#hta-esc2024.dk .disclaimer  { background:#1a1200; border-color:#78350f; }
#hta-esc2024.dk .disclaimer-text { color:#fde68a; }
#hta-esc2024.dk .app-footer  { color:var(--text3); }
#hta-esc2024.dk .prog-step   { color:var(--text3); }
#hta-esc2024.dk .prog-step.active { color:var(--teal); }
#hta-esc2024.dk .score2-result { background:var(--surface2); border-color:var(--border); }

/* ── MJ-02 · OVERRIDES BOTONES EN MODO OSCURO (ERROR-17) ───────── */
#hta-esc2024.dk .btn-restart,
#hta-esc2024.dk .btn-back {
  background:var(--surface) !important; border-color:#475569 !important;
  color:var(--text2) !important;
}
#hta-esc2024.dk .btn-restart:hover,
#hta-esc2024.dk .btn-back:hover {
  border-color:var(--teal) !important; color:var(--teal2) !important; background:#0c2340 !important;
}
#hta-esc2024.dk .btn-next { background:#1d4ed8 !important; }
#hta-esc2024.dk .btn-next:hover { background:#2563eb !important; }
#hta-esc2024.dk button.hta-btn-export {
  background:var(--surface) !important; border-color:#475569 !important; color:var(--text2) !important;
}
#hta-esc2024.dk button.hta-btn-export:hover {
  border-color:var(--teal) !important; color:var(--teal2) !important; background:#0c2340 !important;
}

/* ── MJ-03 · GAUGE SCORE2 ───────────────────────────────────────── */
#hta-esc2024 .hta-risk-gauge-wrap {
  margin:12px 0; padding:14px 16px;
  background:var(--surface2); border:1px solid var(--border); border-radius:10px;
}
#hta-esc2024 .hta-risk-gauge-label {
  font-family:'Outfit',sans-serif; font-size:11px; font-weight:700;
  color:var(--teal2); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;
}
#hta-esc2024 .hta-risk-gauge-bar {
  position:relative; height:10px; border-radius:5px;
  background:linear-gradient(90deg,#34d399 0%,#fbbf24 50%,#f87171 80%,#dc2626 100%);
  margin-bottom:6px;
}
#hta-esc2024 .hta-risk-gauge-pointer {
  position:absolute; top:-4px; width:18px; height:18px; border-radius:50%;
  border:3px solid var(--bg); box-shadow:0 1px 4px rgba(0,0,0,.3);
  transform:translateX(-50%); transition:left .5s cubic-bezier(.4,0,.2,1);
}
#hta-esc2024 .hta-risk-gauge-ticks {
  display:flex; justify-content:space-between;
  font-size:9px; color:var(--text3); font-family:'JetBrains Mono',monospace; margin-top:2px;
}
#hta-esc2024 .hta-risk-gauge-legend {
  display:flex; justify-content:space-between; margin-top:4px; font-size:10px; color:var(--text2);
}

/* ── MJ-04 · TIMELINE ───────────────────────────────────────────── */
#hta-esc2024 .hta-timeline-wrap {
  margin:14px 0; padding:14px 16px;
  background:var(--surface2); border:1px solid var(--border); border-radius:10px;
}
#hta-esc2024 .hta-timeline-label {
  font-family:'Outfit',sans-serif; font-size:11px; font-weight:700;
  color:var(--teal2); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px;
}
#hta-esc2024 .hta-timeline-track {
  display:flex; align-items:flex-start;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-top:8px; scrollbar-width:none;
}
#hta-esc2024 .hta-timeline-track::-webkit-scrollbar { display:none; }
#hta-esc2024 .hta-timeline-step {
  display:flex; flex-direction:column; align-items:center;
  flex:1; min-width:72px; flex-shrink:0; position:relative;
}
#hta-esc2024 .hta-timeline-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;
}
#hta-esc2024 .hta-timeline-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; flex-shrink:0;
}
#hta-esc2024 .hta-timeline-step:first-child .hta-timeline-dot {
  background:var(--navy); box-shadow:0 0 0 2px var(--navy);
}
#hta-esc2024 .hta-timeline-content { text-align:center; margin-top:6px; padding:0 2px; }
#hta-esc2024 .hta-timeline-time {
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; color:var(--teal);
}
#hta-esc2024 .hta-timeline-step:first-child .hta-timeline-time { color:var(--navy); }
#hta-esc2024 .hta-timeline-action { font-size:10px; color:var(--text2); line-height:1.3; margin-top:2px; }

/* ── MJ-09 · BANNER DE SESIÓN ───────────────────────────────────── */
#hta-esc2024 .session-banner {
  background:#fffbeb; border:1px solid #fcd34d; border-radius:10px;
  padding:12px 14px; margin-bottom:14px;
  display:flex; align-items:flex-start; gap:10px;
}
#hta-esc2024.dk .session-banner { background:#1a1400; border-color:#92400e; }
#hta-esc2024 .session-banner-icon { font-size:20px; flex-shrink:0; }
#hta-esc2024 .session-banner-body { flex:1; min-width:0; }
#hta-esc2024 .session-banner-title {
  font-family:'Outfit',sans-serif; font-size:13px; font-weight:700;
  color:#92400e; margin-bottom:2px;
}
#hta-esc2024.dk .session-banner-title { color:#fbbf24; }
#hta-esc2024 .session-banner-sub { font-size:11px; color:#a16207; line-height:1.4; margin-bottom:8px; }
#hta-esc2024.dk .session-banner-sub { color:#d97706; }
#hta-esc2024 .session-banner-btns { display:flex; gap:8px; flex-wrap:wrap; }
#hta-esc2024 .session-banner-btns button {
  padding:5px 12px; border-radius:8px; font-size:12px; font-weight:600;
  cursor:pointer; font-family:'Source Sans 3',sans-serif; border:1.5px solid;
}
#hta-esc2024 .session-btn-continue { background:#0d2d5e; color:#fff; border-color:#0d2d5e; }
#hta-esc2024 .session-btn-fresh { background:transparent; color:#92400e; border-color:#fcd34d; }
#hta-esc2024.dk .session-btn-fresh { color:#fbbf24; border-color:#92400e; }

/* ── EXPORTACIÓN — Bootstrap 4 fix (dos niveles !important) ────── */
#hta-esc2024 .hta-action-row {
  display:flex !important; gap:10px; margin:4px 0 16px 0; width:100%;
  border:none !important; background:transparent !important;
  padding:0 !important; box-shadow:none !important; border-radius:0 !important;
}
#hta-esc2024 button.hta-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; box-shadow:0 1px 4px rgba(0,0,0,.08) !important;
  line-height:1.4 !important; outline:none !important;
  -webkit-appearance:none !important; appearance:none !important;
  transition:border-color .18s,color .18s,background .18s;
}
#hta-esc2024 button#hta-btn-print:hover {
  border-color:#0d2d5e !important; color:#0d2d5e !important; background:#eff6ff !important;
}
#hta-esc2024 button#hta-btn-copy:hover {
  border-color:#0891b2 !important; color:#0e7490 !important; background:#f0f9ff !important;
}
@media(max-width:420px){#hta-esc2024 .hta-action-row{flex-direction:column}}

/* ── MJ-11 · GUARDAR CASO ───────────────────────────────────────── */
/* Contenedor unificado: botón + aviso forman una sola unidad visual  */
#hta-esc2024 .hta-save-wrap {
  border:1px solid #fde68a; border-radius:10px;
  overflow:hidden; margin-top:6px; margin-bottom:16px;
}
/* El .hta-btn-save dentro del contenedor no debe tener margin ni border-radius */
#hta-esc2024 .hta-save-wrap .hta-btn-save {
  margin:0 !important; border-radius:0 !important; border:none !important;
}
#hta-esc2024 .hta-save-warn {
  font-size:13px; color:#92400e; background:#fffbeb;
  padding:9px 14px; line-height:1.5; border-top:1px solid #fde68a;
}
#hta-esc2024.dk .hta-save-wrap { border-color:#92400e; }
#hta-esc2024.dk .hta-save-warn { background:#1a1400; color:#fbbf24; border-top-color:#92400e; }
/* Botón guardar caso fuera del contenedor (estado abierto / form) */
#hta-esc2024 .hta-btn-save {
  display:block !important; width:100% !important; padding:13px 16px !important;
  background:linear-gradient(135deg,var(--teal2),var(--navy)) !important;
  color:#fff !important; border:none !important; border-radius:10px !important;
  font-family:'Outfit',sans-serif !important; font-size:15px !important;
  font-weight:700 !important; cursor:pointer !important;
  transition:opacity .2s,transform .15s !important;
  box-shadow:0 2px 8px rgba(8,145,178,.25) !important; text-align:center !important;
}
#hta-esc2024 .hta-btn-save:hover { opacity:.92 !important; transform:translateY(-1px) !important; }
/* Input nombre caso */
#hta-esc2024 input.hta-case-name {
  width:100%; padding:9px 12px; margin-bottom:10px;
  border:1.5px solid var(--teal); border-radius:8px;
  font-size:14px; color:var(--text); background:var(--surface);
  box-sizing:border-box; font-family:'Source Sans 3',sans-serif;
  box-shadow:0 0 0 3px rgba(8,145,178,.18);
}
#hta-esc2024 input.hta-case-name:focus { outline:none; }
/* Panel de casos */
#hta-esc2024 .cases-panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; margin-bottom:16px; overflow:hidden;
}
#hta-esc2024 .cases-panel-header {
  padding:9px 14px; background:var(--surface2); border-bottom:1px solid var(--border);
}
#hta-esc2024 .cases-panel-scroll {
  max-height:210px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
#hta-esc2024 .cases-panel-scroll::-webkit-scrollbar { width:4px; }
#hta-esc2024 .cases-panel-scroll::-webkit-scrollbar-thumb {
  background:var(--border); border-radius:2px;
}