/* * Cardioteca.com — Guías Clínicas Interactivas * Guía: Cardio-Oncología ESC 2022 — Suite Clínica (Módulos 1·2·3) * Carpeta: /components/com_cardiotools/onco/ * Versión: 20260522 * © Campus Formación Sanitaria S.L. — CIF B88633318 * * Correcciones aplicadas vs. original: * + BUG-01: añadido -webkit-tap-highlight-color:transparent * + BUG-01: añadido focus:not(:focus-visible){outline:none} en botones/inputs * + BUG-02: añadido min-height:auto explícito en #hfa-root * + CSS-FIX: corregido selector .risk-box.vh .risk-level (faltaba prefijo #hfa-root) * - Eliminado @import Google Fonts (reemplazado por en fragmento Joomla) */ /* ── VARIABLES Y RESET ──────────────────────────────────── */ #hfa-root { --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); background:var(--bg); color:var(--text); font-family:'Source Sans 3',sans-serif; font-size:15px; line-height:1.6; padding:24px 16px 48px; box-sizing:border-box; min-height:auto; /* BUG-02: nunca 100vh en Joomla inline */ } #hfa-root *,#hfa-root *::before,#hfa-root *::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; /* BUG-01: elimina flash en Android */ } /* BUG-01: elimina rectángulo azul post-click sin romper accesibilidad de teclado */ #hfa-root button:focus:not(:focus-visible), #hfa-root input:focus:not(:focus-visible), #hfa-root select:focus:not(:focus-visible), #hfa-root label:focus:not(:focus-visible) { outline:none; } /* ── WRAPPER ────────────────────────────────────────────── */ #hfa-root .wr{max-width:780px;margin:0 auto} /* ── HEADER ─────────────────────────────────────────────── */ #hfa-root .hdr{text-align:center;margin-bottom:28px} #hfa-root .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:12px;font-family:'Outfit',sans-serif} #hfa-root .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:hfa-pulse 2s infinite} @keyframes hfa-pulse{0%,100%{opacity:1}50%{opacity:.4}} #hfa-root .hdr h1{font-family:'Outfit',sans-serif;font-size:26px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:6px} #hfa-root .hdr h1 span{color:var(--teal)} #hfa-root .hdr p{color:var(--text2);font-size:14px;max-width:520px;margin:0 auto} /* ── PROGRESS BAR ───────────────────────────────────────── */ #hfa-root .prog{display:flex;align-items:center;margin-bottom:24px;padding:0 4px} #hfa-root .ps{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1} #hfa-root .pc{width:30px;height:30px;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)} #hfa-root .pc.active{border-color:var(--navy);background:var(--navy);color:#fff} #hfa-root .pc.done{border-color:var(--teal);background:var(--teal);color:#fff} #hfa-root .pl{font-size:11px;color:var(--text3);font-weight:500;text-align:center;line-height:1.3} #hfa-root .pl.active{color:var(--navy);font-weight:600} #hfa-root .pl.done{color:var(--teal)} #hfa-root .pline{flex:1;height:2px;background:var(--border);max-width:60px;margin-bottom:18px;transition:background .3s} #hfa-root .pline.done{background:var(--teal)} /* ── CARD ───────────────────────────────────────────────── */ #hfa-root .card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow);margin-bottom:14px} #hfa-root .card-title{font-family:'Outfit',sans-serif;font-size:18px;font-weight:600;color:var(--navy);margin-bottom:6px} #hfa-root .card-sub{font-size:13px;color:var(--text2);margin-bottom:20px} /* ── BREADCRUMB ─────────────────────────────────────────── */ #hfa-root .selbar{background:linear-gradient(135deg,#eff6ff,#ecfdf5);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} #hfa-root .sel-lbl{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-family:'Outfit',sans-serif} #hfa-root .sel-val{font-size:14px;font-weight:600;color:var(--navy);font-family:'Outfit',sans-serif} /* ── TREATMENT GRID ─────────────────────────────────────── */ #hfa-root .tx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(min-width:520px){#hfa-root .tx-grid{grid-template-columns:repeat(3,1fr)}} #hfa-root .tx-btn{border:2px solid var(--border);background:var(--surface2);border-radius:12px;padding:14px 10px;cursor:pointer;text-align:center;transition:all .2s;width:100%} #hfa-root .tx-btn:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 4px 16px rgba(8,145,178,.12)} #hfa-root .tx-btn.sel{border-color:var(--navy);background:var(--navy);color:#fff} #hfa-root .tx-icon{font-size:26px;margin-bottom:6px;display:block} #hfa-root .tx-name{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--navy);display:block;line-height:1.3;margin-bottom:2px} #hfa-root .tx-btn.sel .tx-name{color:#fff} #hfa-root .tx-sub{font-size:10px;color:var(--text3);display:block;font-family:'JetBrains Mono',monospace;line-height:1.4} #hfa-root .tx-btn.sel .tx-sub{color:rgba(255,255,255,.55)} /* ── FACTOR GROUPS ──────────────────────────────────────── */ #hfa-root .grp-title{font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;color:var(--teal2);text-transform:uppercase;letter-spacing:.08em;margin:18px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--border)} #hfa-root .grp-note{font-size:11px;color:var(--text3);font-style:italic;margin-bottom:8px} #hfa-root .factors{display:flex;flex-direction:column;gap:7px} #hfa-root .fct{border:2px solid var(--border);background:var(--surface2);border-radius:10px;padding:11px 14px;cursor:pointer;text-align:left;transition:all .2s;width:100%;display:flex;align-items:flex-start;gap:10px;font-family:'Source Sans 3',sans-serif} #hfa-root .fct:hover{border-color:var(--teal)} #hfa-root .fct.chk{border-color:var(--navy);background:#eff6ff} #hfa-root .fct-cb{width:18px;height:18px;border-radius:4px;border:2px solid var(--border);background:var(--surface);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:all .15s} #hfa-root .fct.chk .fct-cb{background:var(--navy);border-color:var(--navy)} #hfa-root .fct-cbx{font-size:10px;color:#fff;display:none} #hfa-root .fct.chk .fct-cbx{display:block} #hfa-root .fct-body{flex:1} #hfa-root .fct-lbl{font-size:14px;font-weight:500;color:var(--text)} #hfa-root .fct.chk .fct-lbl{color:var(--navy);font-weight:600} #hfa-root .fct-hint{font-size:11px;color:var(--text3);margin-top:2px;font-style:italic} #hfa-root .fct-score{font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 7px;border-radius:10px;flex-shrink:0;margin-top:2px;font-weight:500} #hfa-root .sc-ma{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5} #hfa-root .sc-a{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa} #hfa-root .sc-m2{background:#fffbeb;color:#92400e;border:1px solid #fcd34d} #hfa-root .sc-m1{background:#f0fdf4;color:#065f46;border:1px solid #6ee7b7} /* ── SCORE COUNTER ──────────────────────────────────────── */ #hfa-root .score-bar{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin:18px 0;display:flex;align-items:center;gap:14px} #hfa-root .score-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);font-family:'Outfit',sans-serif} #hfa-root .score-val{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;color:var(--navy);min-width:28px} #hfa-root .score-risk{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;padding:4px 14px;border-radius:20px;margin-left:auto} #hfa-root .score-risk.low{background:#f0fdf4;color:#065f46} #hfa-root .score-risk.mod{background:#fffbeb;color:#92400e} #hfa-root .score-risk.high{background:#fef2f2;color:#991b1b} #hfa-root .score-risk.vh{background:#fef2f2;color:#7f1d1d;font-weight:800} /* ── EXTRA TOGGLE (dosis antraciclinas) ─────────────────── */ #hfa-root .extra-toggle{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 14px;margin-top:12px;display:flex;align-items:flex-start;gap:10px} #hfa-root .toggle-label{font-size:13px;color:var(--text);font-weight:500;flex:1;cursor:pointer} #hfa-root .toggle-hint{font-size:11px;color:var(--text3);font-style:italic;display:block;margin-top:2px} /* ── NAV BUTTONS ────────────────────────────────────────── */ #hfa-root .nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px} #hfa-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} #hfa-root .btn-back:hover{border-color:var(--navy);color:var(--navy)} #hfa-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} #hfa-root .btn-next:hover{background:var(--navy2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(13,45,94,.25)} #hfa-root .btn-calc{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);margin-top:18px} #hfa-root .btn-calc:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(8,145,178,.4)} #hfa-root .btn-calc:disabled{background:var(--text3);box-shadow:none;cursor:not-allowed;transform:none;opacity:.7} #hfa-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} #hfa-root .btn-restart:hover{background:var(--border);color:var(--navy)} /* ── RESULT ─────────────────────────────────────────────── */ #hfa-root .res-hdr{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px} #hfa-root .res-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0} #hfa-root .res-icon.low{background:#f0fdf4} #hfa-root .res-icon.mod{background:#fffbeb} #hfa-root .res-icon.high{background:#fef2f2} #hfa-root .res-icon.vh{background:#fef2f2} #hfa-root .res-title{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:4px} #hfa-root .res-sub{font-size:14px;color:var(--text2)} /* ── RISK LEVEL BOX ─────────────────────────────────────── */ #hfa-root .risk-box{border:2px solid;border-radius:12px;padding:16px 18px;margin-bottom:16px} #hfa-root .risk-box.low{border-color:#6ee7b7;background:#f0fdf4} #hfa-root .risk-box.mod{border-color:#fcd34d;background:#fffbeb} #hfa-root .risk-box.high{border-color:#fca5a5;background:#fef2f2} #hfa-root .risk-box.vh{border-color:#f87171;background:#fff1f2} #hfa-root .risk-level{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px} #hfa-root .risk-box.low .risk-level{color:#059669} #hfa-root .risk-box.mod .risk-level{color:#d97706} /* CSS-FIX: selector original faltaba #hfa-root en .risk-box.vh .risk-level */ #hfa-root .risk-box.high .risk-level, #hfa-root .risk-box.vh .risk-level{color:#dc2626} #hfa-root .risk-pts{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text3)} /* ── EV BADGES ──────────────────────────────────────────── */ #hfa-root .ev-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} #hfa-root .ev-b{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} #hfa-root .ev-b.I{background:#f0fdf4;color:#065f46;border-color:#6ee7b7} #hfa-root .ev-b.IIa{background:#eff6ff;color:#1e40af;border-color:#93c5fd} #hfa-root .ev-b.IIb{background:#fffbeb;color:#92400e;border-color:#fcd34d} #hfa-root .ev-b.loe{background:#f8fafc;color:var(--text2);border-color:var(--border)} /* ── PARAM CHIPS ────────────────────────────────────────── */ #hfa-root .params-used{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:16px} #hfa-root .params-used-title{font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px} #hfa-root .params-chips{display:flex;flex-wrap:wrap;gap:6px} #hfa-root .param-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-family:'Source Sans 3',sans-serif;border:1.5px solid var(--border);background:var(--surface);color:var(--text2)} #hfa-root .param-chip .chip-label{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.04em} #hfa-root .param-chip .chip-val{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;color:var(--navy)} #hfa-root .param-chip.flag-warn{border-color:#fcd34d;background:#fffbeb} #hfa-root .param-chip.flag-warn .chip-val{color:#92400e} #hfa-root .param-chip.flag-alert{border-color:#fca5a5;background:#fef2f2} #hfa-root .param-chip.flag-alert .chip-val{color:#991b1b} #hfa-root .param-chip.flag-ok{border-color:#6ee7b7;background:#f0fdf4} #hfa-root .param-chip.flag-ok .chip-val{color:#065f46} /* ── ACTIONS ────────────────────────────────────────────── */ #hfa-root .actions{margin-bottom:18px} #hfa-root .action-title{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:var(--teal2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px} #hfa-root .action-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)} #hfa-root .action-item:last-child{border-bottom:none} #hfa-root .action-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:6px} #hfa-root .action-dot.I{background:var(--green)} #hfa-root .action-dot.IIa{background:var(--blue)} #hfa-root .action-dot.IIb{background:var(--amber)} #hfa-root .action-text{font-size:14px;color:var(--text);flex:1} /* ── MONITORING GRID ────────────────────────────────────── */ #hfa-root .mon-title{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:var(--teal2);text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px} #hfa-root *+.mon-title{margin-top:18px} #hfa-root .mon-grid{display:grid;grid-template-columns:1fr;gap:8px} @media(min-width:480px){#hfa-root .mon-grid{grid-template-columns:1fr 1fr}} #hfa-root .mon-item{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;border-left:3px solid} #hfa-root .mon-item.ETT{border-left-color:#2563eb} #hfa-root .mon-item.ECG{border-left-color:#0d2d5e} #hfa-root .mon-item.cTn{border-left-color:#dc2626} #hfa-root .mon-item.PN{border-left-color:#d97706} #hfa-root .mon-item.cTnPN{border-left-color:#9333ea} #hfa-root .mon-item.PA{border-left-color:#0891b2} #hfa-root .mon-item.EvalCV{border-left-color:#64748b} #hfa-root .mon-item.ETTRMС{border-left-color:#4f46e5} #hfa-root .mon-item.ITB{border-left-color:#7c3aed} #hfa-root .mon-item.ECGcTn{border-left-color:#be185d} #hfa-root .mon-item.TEV{border-left-color:#059669} #hfa-root .mon-item.BEM{border-left-color:#7c3aed} #hfa-root .mon-type{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:3px} #hfa-root .mon-desc{font-size:13px;color:var(--text);line-height:1.45;margin-bottom:6px} #hfa-root .mon-timing{font-size:11px;color:var(--teal2);font-weight:600;font-family:'Outfit',sans-serif;margin-bottom:6px} #hfa-root .mon-badges{display:flex;gap:5px} /* ── NOTES ──────────────────────────────────────────────── */ #hfa-root .notes{background:var(--surface2);border-radius:10px;padding:14px 16px;margin-bottom:14px} #hfa-root .notes-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-family:'Outfit',sans-serif} #hfa-root .notes ul{list-style:none;display:flex;flex-direction:column;gap:7px} #hfa-root .notes li{display:block;padding-left:16px;position:relative;font-size:13px;color:var(--text2);line-height:1.6} #hfa-root .notes li::before{content:"•";color:var(--teal);font-weight:700;position:absolute;left:0;top:0} /* ── WARNING ────────────────────────────────────────────── */ #hfa-root .warn{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} /* ── DISCLAIMER ─────────────────────────────────────────── */ #hfa-root .disclaimer{background:#fff8e1;border:1px solid #fde68a;border-radius:10px;padding:12px 16px;margin-bottom:16px;display:block} #hfa-root .disc-text{font-size:12px;color:#78350f;line-height:1.5} #hfa-root .disc-text strong{display:inline;font-weight:700} #hfa-root .disclaimer-text{font-size:11px;color:#78350f;line-height:1.6} #hfa-root .disclaimer-text strong{display:inline;font-weight:700} @media(min-width:520px){#hfa-root .disclaimer-text{font-size:12px}} /* ── FOOTER ─────────────────────────────────────────────── */ #hfa-root .footer{text-align:center;margin-top:20px;font-size:11px;color:var(--text3);line-height:1.7} #hfa-root .footer strong{color:var(--text2)} /* ── HUB (PORTADA) ──────────────────────────────────────── */ #hfa-root .hub-intro{text-align:center;margin-bottom:28px} #hfa-root .hub-intro h2{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;color:var(--navy);margin-bottom:6px} #hfa-root .hub-intro p{font-size:14px;color:var(--text2);max-width:540px;margin:0 auto;line-height:1.6} #hfa-root .hub-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:16px} @media(min-width:540px){#hfa-root .hub-grid{grid-template-columns:1fr 1fr}} #hfa-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} #hfa-root .hub-card.soon{opacity:.55} #hfa-root .hub-top{display:flex;align-items:center;gap:14px} #hfa-root .hub-icon{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,#eff6ff,#e0f2fe);border:1.5px solid #bae6fd;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0} #hfa-root .hub-icon.dim{background:#f8fafc;border-color:var(--border);filter:grayscale(0.4)} #hfa-root .hub-num{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:3px} #hfa-root .hub-title{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:var(--navy);line-height:1.25} #hfa-root .hub-desc{font-size:13px;color:var(--text2);line-height:1.55;flex:1} #hfa-root .hub-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px} #hfa-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} #hfa-root .hub-btn:hover{background:var(--navy2)} #hfa-root .hub-pill{font-family:'JetBrains Mono',monospace;font-size:10px;padding:3px 10px;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;font-weight:600} #hfa-root .hub-pill.done{background:#f0fdf4;color:#059669;border:1px solid #6ee7b7} #hfa-root .hub-pill.soon{background:var(--surface2);color:var(--text3);border:1px solid var(--border)} #hfa-root .hub-warn{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:10px 14px;font-size:12px;color:#78350f;display:flex;gap:8px;margin-bottom:20px} /* ── BREADCRUMB DE MÓDULO ───────────────────────────────── */ #hfa-root .mod-bc{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap} #hfa-root .mod-bc-home{font-size:12px;color:var(--text3);cursor:pointer;font-family:'Outfit',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;background:none;border:none;padding:0} #hfa-root .mod-bc-home:hover{color:var(--navy)} #hfa-root .mod-bc-sep{font-size:12px;color:var(--text3)} #hfa-root .mod-bc-cur{font-size:12px;color:var(--navy);font-family:'Outfit',sans-serif;font-weight:600} /* ── FORM FIELDS — Sistema unificado de campos de entrada ── */ #hfa-root .s2-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px} @media(min-width:480px){#hfa-root .s2-grid.cols2{grid-template-columns:1fr 1fr}} @media(min-width:480px){#hfa-root .s2-grid.cols3{grid-template-columns:1fr 1fr 1fr}} #hfa-root .s2-field{display:flex;flex-direction:column;gap:7px} #hfa-root .s2-label{font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:center;gap:6px;flex-wrap:wrap} #hfa-root .s2-unit{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--teal2);font-weight:600;text-transform:none;letter-spacing:.03em;background:rgba(8,145,178,.07);padding:2px 7px;border-radius:4px;border:1px solid rgba(8,145,178,.18)} #hfa-root .s2-iw{position:relative;display:flex;align-items:center} #hfa-root .s2-input{width:100%;background:var(--surface);border:2px solid var(--border);border-radius:10px;padding:11px 48px 11px 14px;font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:var(--navy);transition:border-color .15s,box-shadow .15s,background .15s;outline:none;-webkit-appearance:none;appearance:textfield} #hfa-root .s2-input::-webkit-outer-spin-button,#hfa-root .s2-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} #hfa-root .s2-input[type=number]{-moz-appearance:textfield} #hfa-root .s2-input::placeholder{color:#b0bec5;font-size:14px;font-weight:400;font-family:'Source Sans 3',sans-serif} #hfa-root .s2-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(8,145,178,.13);background:#fff} #hfa-root .s2-input:not(:placeholder-shown){border-color:var(--navy);background:linear-gradient(155deg,#f5f8ff 0%,#fff 60%)} #hfa-root .s2-utag{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--teal2);pointer-events:none;background:rgba(8,145,178,.08);padding:3px 8px;border-radius:6px;letter-spacing:.04em;white-space:nowrap;border:1px solid rgba(8,145,178,.2)} #hfa-root .s2-select{width:100%;background:var(--surface);border:2px solid var(--border);border-radius:10px;padding:12px 42px 12px 14px;font-family:'Source Sans 3',sans-serif;font-size:15px;font-weight:500;color:var(--navy);transition:border-color .15s,box-shadow .15s;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center} #hfa-root .s2-select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(8,145,178,.13);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230891b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")} #hfa-root .s2-select option[value=""]{color:var(--text3)} /* ── LVEF INPUTS (M2 y Step 0) ──────────────────────────── */ #hfa-root .lvef-input{background:var(--surface);border:2px solid var(--border);border-radius:10px;padding:9px 12px;font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:var(--navy);outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:textfield;text-align:center} #hfa-root .lvef-input::-webkit-outer-spin-button,#hfa-root .lvef-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} #hfa-root .lvef-input[type=number]{-moz-appearance:textfield} #hfa-root .lvef-input::placeholder{color:#b0bec5;font-size:16px;font-weight:400;font-family:'Source Sans 3',sans-serif} #hfa-root .lvef-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(8,145,178,.13)} #hfa-root .lvef-input:not(:placeholder-shown){border-color:var(--navy)} #hfa-root .lvef-unit{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--teal2);background:rgba(8,145,178,.07);padding:3px 8px;border-radius:5px;border:1px solid rgba(8,145,178,.18)} #hfa-root .lvef-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:8px;font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;white-space:nowrap} #hfa-root .lvef-badge.preserved{background:#f0fdf4;color:#059669;border:2px solid #6ee7b7} #hfa-root .lvef-badge.reduced{background:#fef2f2;color:#dc2626;border:2px solid #fca5a5} #hfa-root .lvef-badge.mildly{background:#fffbeb;color:#92400e;border:2px solid #fcd34d} /* ── EXPORTACIÓN DE RESULTADOS ────────────────────────────────────── EXP-R9: selector button.[prefix] + !important obligatorio Bootstrap 4 del template T4/JA Blockk sobreescribe sin esto. Colores explícitos (nunca var(--x)) para que funcionen en el popup PDF. ────────────────────────────────────────────────────────────────────── */ #hfa-root .hfa-action-row { display: flex !important; flex-direction: row !important; gap: 10px !important; margin: 4px 0 16px 0 !important; width: 100% !important; box-sizing: border-box !important; background: transparent !important; border: none !important; padding: 0 !important; } #hfa-root button.hfa-btn-export { flex: 1 1 0 !important; display: block !important; min-width: 0 !important; background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; padding: 13px 10px !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 !important; text-align: center !important; letter-spacing: .01em !important; 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; margin: 0 !important; } #hfa-root button#hfa-btn-copy:hover { border-color: #0891b2 !important; color: #0e7490 !important; background: #f0f9ff !important; } #hfa-root button#hfa-btn-print:hover { border-color: #0d2d5e !important; color: #0d2d5e !important; background: #eff6ff !important; } @media (max-width: 420px) { #hfa-root .hfa-action-row { flex-direction: column !important; } } /* ═══════════════════════════════════════════════════════════════ * MEJORAS TRANSVERSALES v4.4 — Cardioteca.com * Guía: Cardio-Oncología ESC 2022 · Prefijo: hfa · 2026-05-25 * ═══════════════════════════════════════════════════════════════ */ /* ── MJ-01 · ANIMACIÓN FADE ──────────────────────────────────── */ @keyframes hfaFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } } #hfa-root #hfa-app.hfa-anim { animation: hfaFadeIn 180ms ease forwards; } /* ── MJ-02 · MODO OSCURO — BOTÓN (solución definitiva v4.4) ───── #hfa-root tiene position:relative — botón absoluto en esquina */ #hfa-root { position:relative; } #hfa-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; } #hfa-root .dark-toggle:hover { background:rgba(13,45,94,.18); transform:scale(1.08); } #hfa-root.dk .dark-toggle { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.40); color:#fff; } #hfa-root.dk .dark-toggle:hover { background:rgba(255,255,255,.28); } /* ── MJ-02 dk · VARIABLES MODO OSCURO ─────────────────────────── */ #hfa-root.dk { --bg:#0f172a; --surface:#1e293b; --surface2:#162032; --border:#334155; --border-focus:#38bdf8; --navy:#7dd3fc; --navy2:#38bdf8; --teal:#22d3ee; --teal2:#06b6d4; --green:#34d399; --amber:#fbbf24; --red:#f87171; --text:#f1f5f9; --text2:#94a3b8; --text3:#64748b; --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3); } #hfa-root.dk .app-header { background:linear-gradient(135deg,#0c1a3d 0%,#1e293b 100%); } #hfa-root.dk .card, #hfa-root.dk .module-card, #hfa-root.dk .hub-card { background:var(--surface); border-color:var(--border); } #hfa-root.dk .disclaimer { background:#271a00; border-color:#92400e; } #hfa-root.dk .disclaimer-text { color:#fde68a; } /* Botones de navegación en modo oscuro */ #hfa-root.dk .btn-restart, #hfa-root.dk .btn-back { background:var(--surface); border-color:#475569; color:var(--text2); } #hfa-root.dk .btn-restart:hover, #hfa-root.dk .btn-back:hover { border-color:var(--teal); color:var(--teal2); background:#0c2340; } #hfa-root.dk .btn-next { background:#1d4ed8; } #hfa-root.dk .btn-next:hover { background:#2563eb; } #hfa-root.dk .btn-calc { background:var(--navy); color:#0f172a; } /* Botones de exportación en modo oscuro */ #hfa-root.dk button.hfa-btn-export { background:#1e293b !important; border-color:#334155 !important; color:#94a3b8 !important; } #hfa-root.dk button#hfa-btn-copy:hover { border-color:#22d3ee !important; color:#06b6d4 !important; background:#0c2340 !important; } #hfa-root.dk button#hfa-btn-print:hover { border-color:#7dd3fc !important; color:#7dd3fc !important; background:#0c2340 !important; } /* Inputs, selects, fct buttons en modo oscuro */ #hfa-root.dk input, #hfa-root.dk select { background:var(--surface); border-color:var(--border); color:var(--text); } #hfa-root.dk .fct { background:var(--surface2); border-color:var(--border); color:var(--text2); } #hfa-root.dk .fct.chk { background:var(--navy2); border-color:var(--navy2); color:#0f172a; } #hfa-root.dk .mon-item { background:var(--surface); border-color:var(--border); } #hfa-root.dk .prog .pc { background:var(--surface); border-color:var(--border); color:var(--text2); } #hfa-root.dk .prog .pc.active { background:var(--navy2); border-color:var(--navy2); color:#0f172a; } #hfa-root.dk .prog .pc.done { background:var(--green); border-color:var(--green); } #hfa-root.dk .ev-b { background:var(--surface2); border-color:var(--border); } #hfa-root.dk .hub-card.avail { background:var(--surface); border-color:var(--border); } /* ── MJ-03 · MEDIDOR VISUAL DE RIESGO ───────────────────────── */ #hfa-root .risk-gauge-wrap { margin:14px 0 10px; padding:12px 16px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; } #hfa-root .risk-gauge-label { font-family:'Outfit',sans-serif; font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; } #hfa-root .risk-gauge-track { height:8px; border-radius:4px; background:linear-gradient(to right,#059669 0%,#d97706 50%,#dc2626 100%); position:relative; margin-bottom:4px; } #hfa-root .risk-gauge-marker { position:absolute; top:-4px; width:16px; height:16px; background:#fff; border:3px solid var(--navy); border-radius:50%; transform:translateX(-50%); box-shadow:0 1px 4px rgba(0,0,0,.25); transition:left .4s ease; } #hfa-root .risk-gauge-scale-labels { display:flex; justify-content:space-between; margin-top:5px; } #hfa-root .risk-gauge-scale-labels span { font-size:9px; color:var(--text3); font-family:'JetBrains Mono',monospace; } #hfa-root .risk-gauge-value { font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; margin-top:8px; text-align:center; } /* ── MJ-04 · TIMELINE DE SEGUIMIENTO ───────────────────────── */ #hfa-root .followup-timeline { margin:14px 0; padding:14px 16px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; } #hfa-root .ft-label { font-family:'Outfit',sans-serif; font-size:11px; font-weight:700; color:var(--teal2); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; } #hfa-root .ft-track { display:flex; align-items:flex-start; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-top:8px; padding-bottom:8px; scrollbar-width:none; } #hfa-root .ft-track::-webkit-scrollbar { display:none; } #hfa-root .ft-step { display:flex; flex-direction:column; align-items:center; flex:1; min-width:72px; flex-shrink:0; position:relative; } #hfa-root .ft-step:not(:last-child)::after { content:''; position:absolute; top:10px; left:calc(50% + 10px); right:calc(-50% + 10px); height:2px; background:var(--teal); opacity:.4; } #hfa-root .ft-dot { width:20px; height:20px; border-radius:50%; background:var(--teal); border:3px solid var(--bg); box-shadow:0 0 0 2px var(--teal); z-index:1; position:relative; flex-shrink:0; } #hfa-root .ft-step:first-child .ft-dot { background:var(--navy); box-shadow:0 0 0 2px var(--navy); } #hfa-root .ft-step-content { text-align:center; margin-top:6px; padding:0 2px; } #hfa-root .ft-time { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; color:var(--teal); } #hfa-root .ft-step:first-child .ft-time { color:var(--navy); } #hfa-root .ft-action { font-size:10px; color:var(--text2); line-height:1.3; margin-top:2px; } /* ── MJ-11 · GUARDAR CASO ───────────────────────────────────── */ #hfa-root .hfa-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; } #hfa-root .hfa-btn-save:hover { opacity:.92; transform:translateY(-1px); } #hfa-root input#hfa-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; } #hfa-root input#hfa-case-name:focus { outline:none; border-color:var(--teal); } #hfa-root .cases-panel-scroll { max-height:210px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; } #hfa-root .cases-panel-scroll::-webkit-scrollbar { width:4px; } #hfa-root .cases-panel-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }