/* * Cardioteca.com — Guías Clínicas Interactivas * Guía: Síndrome Coronario Crónico (SCC) — ESC 2024 * Carpeta: /components/com_cardiotools/scc/ * Versión: 20260601 * © Campus Formación Sanitaria S.L. — CIF B88633318 */ /* ══ SCOPE ═══════════════════════════════════════════════════════════════ */ #scc-root{ --bg:#f0f4f8;--surface:#fff;--surface2:#f8fafc; --border:#dde3ed;--bfocus:#0e6fbd; --navy:#0d2d5e;--navy2:#1a4a8a; --teal:#0891b2;--teal2:#0e7490; --green:#059669;--blue:#2563eb;--amber:#d97706;--red:#dc2626; --text:#1e293b;--text2:#475569;--text3:#94a3b8; --sh:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06); --sh2: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;color:var(--text); background:var(--bg);border-radius:12px; padding:24px 16px 48px;min-height:auto; } /* BUG-01: -webkit-tap-highlight-color obligatorio en reset */ #scc-root *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} /* BUG-01: outline:none solo para interacciones de ratón/toque, preserva accesibilidad teclado */ #scc-root button:focus:not(:focus-visible), #scc-root input:focus:not(:focus-visible), #scc-root select:focus:not(:focus-visible), #scc-root label:focus:not(:focus-visible){outline:none} #scc-root .aw{max-width:780px;margin:0 auto} /* ── HEADER ──────────────────────────────────────────────────────────── */ #scc-root .ah{text-align:center;margin-bottom:28px} #scc-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:14px;font-family:'Outfit',sans-serif} #scc-root .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:sccPulse 2s infinite} @keyframes sccPulse{0%,100%{opacity:1}50%{opacity:.4}} #scc-root .ah h1{font-family:'Outfit',sans-serif;font-size:26px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:6px} #scc-root .ah h1 span{color:var(--teal)} #scc-root .ah p{color:var(--text2);font-size:14px;max-width:540px;margin:0 auto} /* ── PROGRESS BAR ────────────────────────────────────────────────────── */ /* Neutralización intencional de Bootstrap .progress-bar, scoped bajo #scc-root */ #scc-root .progress-bar{background:transparent;width:auto;float:none;font-size:inherit;line-height:inherit;color:inherit;text-align:inherit;white-space:inherit;transition:none} #scc-root .scc-pbar{display:flex;align-items:center;margin-bottom:28px;padding:0 4px} #scc-root .scc-ps{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1} #scc-root .scc-pc{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)} #scc-root .scc-pc.active{border-color:var(--navy);background:var(--navy);color:#fff} #scc-root .scc-pc.done{border-color:var(--teal);background:var(--teal);color:#fff} #scc-root .scc-pl{font-size:10px;color:var(--text3);font-weight:500;text-align:center;line-height:1.3;white-space:nowrap} #scc-root .scc-pl.active{color:var(--navy);font-weight:600} #scc-root .scc-pl.done{color:var(--teal)} #scc-root .scc-pline{flex:1;height:2px;background:var(--border);transition:background .3s;max-width:60px;margin-bottom:18px} #scc-root .scc-pline.done{background:var(--teal)} /* ── CARD ────────────────────────────────────────────────────────────── */ #scc-root .card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--sh);margin-bottom:16px} #scc-root .ct{font-family:'Outfit',sans-serif;font-size:18px;font-weight:600;color:var(--navy);margin-bottom:6px} #scc-root .cs{font-size:13px;color:var(--text2);margin-bottom:22px} /* ── HUB MODULE CARDS ────────────────────────────────────────────────── */ #scc-root .hub-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:8px} @media(min-width:520px){#scc-root .hub-grid{grid-template-columns:1fr 1fr}} #scc-root .mcard{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:20px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden} #scc-root .mcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--mc-color,var(--teal));border-radius:14px 14px 0 0} #scc-root .mcard:hover{border-color:var(--mc-color,var(--teal));transform:translateY(-2px);box-shadow:var(--sh2)} #scc-root .mc-top{display:flex;align-items:center;gap:12px} #scc-root .mc-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;background:var(--mc-bg,#e0f2fe)} #scc-root .mc-num{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text3);font-weight:500} #scc-root .mc-title{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:2px} #scc-root .mc-sub{font-size:12px;color:var(--text2);line-height:1.5;flex:1} #scc-root .mc-btn{background:var(--mc-color,var(--teal));color:#fff;border:none;border-radius:7px;padding:8px 16px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;cursor:pointer;align-self:flex-start;transition:opacity .15s} #scc-root .mcard:hover .mc-btn{opacity:.85} /* ── BACK TO HUB ─────────────────────────────────────────────────────── */ #scc-root .back-hub{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;padding:6px 12px;border:1.5px solid var(--border);border-radius:20px;background:var(--surface);transition:all .15s;margin-bottom:20px;font-family:'Outfit',sans-serif;text-transform:uppercase;letter-spacing:.06em} #scc-root .back-hub:hover{border-color:var(--navy);color:var(--navy)} /* ── OPTION GRID & LIST ──────────────────────────────────────────────── */ #scc-root .ogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(min-width:520px){#scc-root .ogrid.c3{grid-template-columns:repeat(3,1fr)}#scc-root .ogrid.c4{grid-template-columns:repeat(4,1fr)}#scc-root .ogrid.c5{grid-template-columns:repeat(5,1fr)}} #scc-root .obtn{border:2px solid var(--border);background:var(--surface2);border-radius:12px;padding:14px 10px;cursor:pointer;text-align:center;transition:all .2s} #scc-root .obtn:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 4px 16px rgba(8,145,178,.12)} #scc-root .obtn.sel{border-color:var(--navy);background:var(--navy);color:#fff} #scc-root .obtn .oi{font-size:24px;margin-bottom:5px;display:block} #scc-root .obtn .on{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--navy);display:block;line-height:1.3;margin-bottom:2px} #scc-root .obtn.sel .on{color:#fff} #scc-root .obtn .os{font-size:11px;color:var(--text3);display:block;font-family:'JetBrains Mono',monospace} #scc-root .obtn.sel .os{color:rgba(255,255,255,.6)} #scc-root .olist{display:flex;flex-direction:column;gap:8px} #scc-root .olbtn{border:2px solid var(--border);background:var(--surface2);border-radius:10px;padding:12px 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);line-height:1.4} #scc-root .olbtn:hover{border-color:var(--teal)} #scc-root .olbtn.sel{border-color:var(--navy);background:var(--navy);color:#fff} #scc-root .olbtn.na{background:#fafbfc;color:var(--text3);font-style:italic;border-style:dashed} #scc-root .olbtn.na.sel{background:var(--text2);color:#fff;border-color:var(--text2);font-style:normal;border-style:solid} #scc-root .olbtn .os2{font-size:12px;color:var(--text3);display:block;margin-top:3px} #scc-root .olbtn.sel .os2{color:rgba(255,255,255,.6)} /* ── CHIPS & CHECKBOX ────────────────────────────────────────────────── */ #scc-root .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} #scc-root .chlbl{cursor:pointer} #scc-root .chlbl input{display:none} #scc-root .cht{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)} #scc-root .chlbl input:checked+.cht{background:var(--navy);border-color:var(--navy);color:#fff} #scc-root .chlbl:hover .cht{border-color:var(--teal)} #scc-root .chkrow{display:flex;flex-direction:column;gap:8px;margin-top:4px} #scc-root .chklbl{display:block;cursor:pointer;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface2);transition:all .15s;position:relative;padding-left:42px} #scc-root .chklbl input{position:absolute;left:14px;top:13px;width:16px;height:16px;accent-color:var(--navy);cursor:pointer} #scc-root .chklbl.chkd{border-color:var(--navy);background:#eff3fc} #scc-root .chk-lbl-text{font-size:14px;font-weight:500;color:var(--text);line-height:1.4;display:block} #scc-root .chk-lbl-sub{font-size:12px;color:var(--text3);display:block;margin-top:2px;font-weight:400} /* ── SECTION TITLE ───────────────────────────────────────────────────── */ #scc-root .stitle{font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;color:var(--teal2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)} #scc-root .sec{margin-bottom:22px} /* ── BUTTONS ─────────────────────────────────────────────────────────── */ #scc-root .navrow{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:12px;flex-wrap:wrap} #scc-root .bbk{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} #scc-root .bbk:hover{border-color:var(--navy);color:var(--navy)} #scc-root .bnx{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} #scc-root .bnx:hover:not([disabled]){background:var(--navy2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(13,45,94,.25)} #scc-root .bnx[disabled]{background:var(--text3);cursor:not-allowed} #scc-root .bana{background:linear-gradient(135deg,var(--teal2),var(--navy));color:#fff;border:none;border-radius:8px;padding:12px 28px;font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px;box-shadow:0 4px 16px rgba(8,145,178,.25)} #scc-root .bana:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 6px 20px rgba(8,145,178,.35)} #scc-root .bana[disabled]{background:var(--text3);cursor:not-allowed;box-shadow:none} #scc-root .brs{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} #scc-root .brs:hover{background:var(--border);color:var(--navy)} /* ── PROFILE BOX ─────────────────────────────────────────────────────── */ #scc-root .profbox{background:linear-gradient(135deg,#eff6ff,#ecfdf5);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:18px} #scc-root .proflbl{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-family:'Outfit',sans-serif} #scc-root .proftags{display:flex;flex-wrap:wrap;gap:6px} #scc-root .ptag{background:#fff;border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:12px;color:var(--text);font-weight:500} /* ── EVIDENCE BADGES ─────────────────────────────────────────────────── */ #scc-root .evrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} #scc-root .evb{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} #scc-root .evb.c1{background:#f0fdf4;color:#065f46;border-color:#6ee7b7} #scc-root .evb.c2a{background:#eff6ff;color:#1e40af;border-color:#93c5fd} #scc-root .evb.c2b{background:#fffbeb;color:#92400e;border-color:#fcd34d} #scc-root .evb.c3{background:#fef2f2;color:#991b1b;border-color:#fca5a5} #scc-root .evb.loe{background:#f8fafc;color:var(--text2);border-color:var(--border)} #scc-root .evb.guide{background:#f0f9ff;color:#0369a1;border-color:#7dd3fc} /* ── PTP BOX (M1) ────────────────────────────────────────────────────── */ #scc-root .ptp-box{border-radius:14px;padding:20px 22px;margin-bottom:20px;text-align:center} #scc-root .ptp-box.vlow{background:#f0fdf4;border:2px solid #6ee7b7} #scc-root .ptp-box.low{background:#eff6ff;border:2px solid #93c5fd} #scc-root .ptp-box.mod{background:#fffbeb;border:2px solid #fcd34d} #scc-root .ptp-box.high{background:#fef2f2;border:2px solid #fca5a5} #scc-root .ptp-box.vhigh{background:#fef2f2;border:2px solid #f87171} #scc-root .ptp-pct{font-family:'JetBrains Mono',monospace;font-size:36px;font-weight:700;line-height:1} #scc-root .ptp-box.vlow .ptp-pct{color:var(--green)} #scc-root .ptp-box.low .ptp-pct{color:var(--blue)} #scc-root .ptp-box.mod .ptp-pct{color:var(--amber)} #scc-root .ptp-box.high .ptp-pct,#scc-root .ptp-box.vhigh .ptp-pct{color:var(--red)} #scc-root .ptp-cat{font-family:'Outfit',sans-serif;font-size:17px;font-weight:700;margin-top:6px} #scc-root .ptp-box.vlow .ptp-cat{color:#065f46} #scc-root .ptp-box.low .ptp-cat{color:#1e40af} #scc-root .ptp-box.mod .ptp-cat{color:#92400e} #scc-root .ptp-box.high .ptp-cat,#scc-root .ptp-box.vhigh .ptp-cat{color:#991b1b} #scc-root .ptp-range{font-size:13px;color:var(--text3);margin-top:4px} /* ── TEST RECOMMENDATION ─────────────────────────────────────────────── */ #scc-root .test-rec{border-left:4px solid var(--teal);background:var(--surface2);border-radius:0 10px 10px 0;padding:14px 18px;margin-bottom:16px} #scc-root .test-rec-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--teal2);font-family:'Outfit',sans-serif;margin-bottom:6px} #scc-root .test-rec-val{font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;color:var(--navy);margin-bottom:4px} #scc-root .test-rec-why{font-size:13px;color:var(--text2);line-height:1.5} /* ── STRUCTURED RECOMMENDATION PANEL (M1) ────────────────────────────── */ #scc-root .rec-primary{background:linear-gradient(135deg,#ecfdf5,#eff6ff);border:2px solid var(--teal);border-radius:12px;padding:16px 18px;margin-bottom:14px;box-shadow:0 2px 8px rgba(8,145,178,.08)} #scc-root .rec-primary-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--teal2);font-family:'Outfit',sans-serif;margin-bottom:6px;display:flex;align-items:center;gap:6px} #scc-root .rec-primary-test{font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin-bottom:6px;line-height:1.3} #scc-root .rec-primary-evrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} #scc-root .rec-primary-why{font-size:13px;color:var(--text2);line-height:1.5} #scc-root .rec-section{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px} #scc-root .rec-section-tit{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:10px;font-family:'Outfit',sans-serif;display:flex;align-items:center;gap:6px} #scc-root .rec-alt{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:2px solid var(--border)} #scc-root .rec-alt:first-child{padding-top:0} #scc-root .rec-alt:last-child{border-bottom:none;padding-bottom:0} #scc-root .rec-alt-row{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap} #scc-root .rec-alt-name{flex:1;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--navy);min-width:0} #scc-root .rec-alt-why{font-size:12px;color:var(--text2);line-height:1.5;margin-top:4px} #scc-root .rec-alt-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px} #scc-root .rec-tag{display:inline-block;background:rgba(8,145,178,.1);border:1px solid rgba(8,145,178,.3);color:var(--teal2);font-size:11px;font-weight:500;padding:2px 9px;border-radius:10px;font-family:'Source Sans 3',sans-serif;letter-spacing:.01em} #scc-root .rec-cons{margin-top:10px;padding-top:10px;border-top:1px dotted #d4a843} /* ── RISK SECTIONS (M1 paso 3) ──────────────────────────────────────── */ #scc-root .risk-section{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:16px;margin-bottom:18px} #scc-root .risk-section.override{border-color:#fca5a5;background:#fef9f9} #scc-root .risk-section.modifiers{border-color:#fcd34d;background:#fffdf5} #scc-root .risk-section-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)} #scc-root .risk-section-icon{font-size:24px;flex-shrink:0;line-height:1} #scc-root .risk-section.override .risk-section-icon{color:var(--red)} #scc-root .risk-section.modifiers .risk-section-icon{color:var(--amber)} #scc-root .risk-section-tit{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:4px} #scc-root .risk-section-sub{font-size:12px;color:var(--text2);line-height:1.5;font-style:italic} /* ── OVERRIDE BANNER ─────────────────────────────────────────────────── */ #scc-root .ovr-banner{background:linear-gradient(135deg,#fef2f2,#fff5f5);border:2px solid var(--red);border-radius:12px;padding:16px 18px;margin-bottom:16px;box-shadow:0 2px 8px rgba(220,38,38,.1)} #scc-root .ovr-banner-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} #scc-root .ovr-banner-ico{font-size:24px} #scc-root .ovr-banner-tit{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:#991b1b;line-height:1.3} #scc-root .ovr-banner-body{font-size:13px;color:#7f1d1d;line-height:1.6} #scc-root .ovr-banner-list{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:5px} #scc-root .ovr-banner-list li{padding-left:18px;position:relative;font-size:13px;line-height:1.5} #scc-root .ovr-banner-list li::before{content:"\2713";position:absolute;left:4px;color:#991b1b;font-weight:700} #scc-root .ovr-banner-foot{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(153,27,27,.3);font-size:12px;font-style:italic;color:#7f1d1d} /* ── MODIFIER BANNER ─────────────────────────────────────────────────── */ #scc-root .mod-banner{background:linear-gradient(135deg,#fffbeb,#fff8e1);border:2px solid var(--amber);border-radius:12px;padding:16px 18px;margin-bottom:16px;box-shadow:0 2px 8px rgba(217,119,6,.1)} #scc-root .mod-banner-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} #scc-root .mod-banner-ico{font-size:24px} #scc-root .mod-banner-tit{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:#78350f;line-height:1.3} #scc-root .mod-banner-body{font-size:13px;color:#78350f;line-height:1.6} #scc-root .mod-banner-list{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:5px} #scc-root .mod-banner-list li{padding-left:18px;position:relative;font-size:13px;line-height:1.5} #scc-root .mod-banner-list li::before{content:"\2192";position:absolute;left:2px;color:#78350f;font-weight:700} #scc-root .mod-banner-foot{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(120,53,15,.3);font-size:12px;color:#78350f} #scc-root .mod-banner-foot em{font-style:italic;font-weight:600} #scc-root .rec-cons-tit{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#92400e;margin-bottom:6px;font-family:'Outfit',sans-serif;display:flex;align-items:center;gap:6px} #scc-root .rec-cons-tit::before{content:"⚠";font-size:12px} #scc-root .rec-con-item{font-size:12px;color:#78350f;line-height:1.5;margin-bottom:5px;padding-left:14px;position:relative} #scc-root .rec-con-item::before{content:"·";position:absolute;left:4px;color:var(--amber);font-weight:700} #scc-root .rec-con-item:last-child{margin-bottom:0} #scc-root .rec-primary .rec-cons{border-top-color:rgba(0,0,0,.1)} #scc-root .rec-fallback{background:#fffbeb;border:1px solid #fcd34d;border-radius:10px;padding:12px 14px;margin-bottom:12px;display:flex;gap:10px;align-items:flex-start} #scc-root .rec-fallback-ico{font-size:18px;flex-shrink:0} #scc-root .rec-fallback-text{font-size:13px;color:#78350f;line-height:1.5} #scc-root .rec-fallback-text strong{font-family:'Outfit',sans-serif;color:#78350f;display:block;margin-bottom:4px;font-size:13px} /* ── RISK BADGE (M2) ─────────────────────────────────────────────────── */ #scc-root .risk-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:24px;font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;border:2px solid;margin-bottom:16px} #scc-root .risk-badge.low{background:#f0fdf4;color:var(--green);border-color:#6ee7b7} #scc-root .risk-badge.int{background:#eff6ff;color:var(--blue);border-color:#93c5fd} #scc-root .risk-badge.high{background:#fef2f2;color:var(--red);border-color:#fca5a5} /* ── TREATMENT LADDER (M3) ───────────────────────────────────────────── */ #scc-root .ladder{display:flex;flex-direction:column;gap:0;margin-bottom:20px} #scc-root .lstep{display:flex;gap:12px} #scc-root .lcol{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:36px} #scc-root .lnum{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:#fff;flex-shrink:0} #scc-root .lnum.primera{background:var(--navy)} #scc-root .lnum.combi{background:var(--teal)} #scc-root .lnum.addon{background:var(--blue)} #scc-root .lnum.third{background:var(--amber)} #scc-root .lnum.special{background:var(--green)} #scc-root .lnum.refractario{background:var(--red)} #scc-root .lline{flex:1;width:2px;background:var(--border);margin:4px 0} #scc-root .lcard{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.05)} #scc-root .lcard.primera{border-left:3px solid var(--navy)} #scc-root .lcard.combi{border-left:3px solid var(--teal)} #scc-root .lcard.addon{border-left:3px solid var(--blue)} #scc-root .lcard.third{border-left:3px solid var(--amber)} #scc-root .lcard.special{border-left:3px solid var(--green)} #scc-root .ltitle{font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:4px} #scc-root .lsub{font-size:12px;color:var(--text2);margin-bottom:10px;line-height:1.5} #scc-root .drugs{display:flex;flex-direction:column;gap:8px} #scc-root .drug{background:var(--surface2);border-radius:8px;padding:10px 12px} #scc-root .dn{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px} #scc-root .dd{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--teal);margin-bottom:3px} #scc-root .dnote{font-size:12px;color:var(--text2);line-height:1.5} #scc-root .dgrp{margin-bottom:8px} #scc-root .dgrp-lbl{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;padding:4px 0;font-family:'Outfit',sans-serif} #scc-root .dgrp-lbl.warn{color:var(--red)} #scc-root .lstep-nota{font-size:12px;color:var(--text2);background:var(--surface2);border-radius:6px;padding:8px 12px;margin-top:-4px;margin-bottom:12px;border-left:3px solid var(--border);line-height:1.5} /* ── CONTRAINDICATIONS ──────────────────────────────────────────────── */ #scc-root .contbox{background:#fff5f5;border:1px solid #fca5a5;border-radius:12px;padding:16px;margin-bottom:16px} #scc-root .conttitle{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:var(--red);margin-bottom:12px} #scc-root .citem{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #fecaca} #scc-root .citem:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none} #scc-root .citem-top{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap} #scc-root .cdrug{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--navy);flex:1} #scc-root .cbadge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;font-family:'Outfit',sans-serif;text-transform:uppercase} #scc-root .cbadge.alta{background:#fee2e2;color:#b91c1c} #scc-root .cbadge.precaucion{background:#fef3c7;color:#92400e} #scc-root .cmot{font-size:12px;color:var(--text2);line-height:1.5} /* ── TREATMENT BLOCKS (M4) ───────────────────────────────────────────── */ #scc-root .tblock{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden} #scc-root .tblock-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface2);border-bottom:1px solid var(--border)} #scc-root .tblock-ico{font-size:18px} #scc-root .tblock-title{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--navy);line-height:1.3} #scc-root .tblock-body{padding:14px 16px;display:flex;flex-direction:column;gap:8px} #scc-root .titem{background:var(--surface2);border-radius:8px;padding:10px 12px;border-left:3px solid var(--border)} #scc-root .titem.c1{border-left-color:var(--green)} #scc-root .titem.c2a{border-left-color:var(--blue)} #scc-root .titem.c2b{border-left-color:var(--amber)} #scc-root .titem-name{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:3px;line-height:1.3} #scc-root .titem-detail{font-size:12px;color:var(--text2);line-height:1.5} #scc-root .titem-evrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px} /* ── REVASC BOXES (M5) ───────────────────────────────────────────────── */ #scc-root .revasc-box{border-radius:12px;padding:16px 18px;margin-bottom:14px;border:2px solid} #scc-root .revasc-box.cabg{background:#fef2f2;border-color:#fca5a5} #scc-root .revasc-box.pci{background:#eff6ff;border-color:#93c5fd} #scc-root .revasc-box.either{background:#f0fdf4;border-color:#6ee7b7} #scc-root .revasc-box.medical{background:#f8fafc;border-color:var(--border)} #scc-root .revasc-box.team{background:#fffbeb;border-color:#fcd34d} #scc-root .rvtit{font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;margin-bottom:6px;line-height:1.3} #scc-root .revasc-box.cabg .rvtit{color:var(--red)} #scc-root .revasc-box.pci .rvtit{color:var(--blue)} #scc-root .revasc-box.either .rvtit{color:var(--green)} #scc-root .revasc-box.medical .rvtit{color:var(--text)} #scc-root .revasc-box.team .rvtit{color:var(--amber)} #scc-root .rvtxt{font-size:13px;color:var(--text2);line-height:1.6} /* ── ANOCA ENDOTYPE (M6) ─────────────────────────────────────────────── */ #scc-root .endo-box{border-radius:12px;padding:16px;margin-bottom:12px;border:2px solid} #scc-root .endo-box.mvd{background:#eff6ff;border-color:#93c5fd} #scc-root .endo-box.vsa{background:#fef2f2;border-color:#fca5a5} #scc-root .endo-box.endo{background:#f0fdf4;border-color:#6ee7b7} #scc-root .endo-box.mixed{background:#fffbeb;border-color:#fcd34d} #scc-root .endo-tit{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;margin-bottom:10px} #scc-root .endo-box.mvd .endo-tit{color:var(--blue)} #scc-root .endo-box.vsa .endo-tit{color:var(--red)} #scc-root .endo-box.endo .endo-tit{color:var(--green)} #scc-root .endo-box.mixed .endo-tit{color:var(--amber)} /* ── FOLLOW-UP STEPS (M7) ────────────────────────────────────────────── */ #scc-root .fustep{display:flex;gap:14px;margin-bottom:20px} #scc-root .funum{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;flex-shrink:0;margin-top:2px} #scc-root .fucont{flex:1} #scc-root .futit{font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:4px} #scc-root .futxt{font-size:13px;color:var(--text2);line-height:1.6} #scc-root .fubullets{list-style:none;margin:8px 0 0 0;padding:0;display:flex;flex-direction:column;gap:6px} #scc-root .fubullets li{font-size:13px;color:var(--text2);line-height:1.5;padding-left:18px;position:relative} #scc-root .fubullets li::before{content:"\2022";position:absolute;left:6px;color:var(--teal);font-weight:700;font-size:14px} #scc-root .fubullets-num{counter-reset:fubn} #scc-root .fubullets-num li{counter-increment:fubn;padding-left:26px} #scc-root .fubullets-num li::before{content:counter(fubn)".";position:absolute;left:4px;color:var(--teal2);font-weight:700;font-size:13px;font-family:'Outfit',sans-serif} #scc-root .fudivider{height:1px;background:var(--border);margin:14px 0;border:none} /* ── NOTES & WARNINGS ────────────────────────────────────────────────── */ #scc-root .nbox{background:var(--surface2);border-radius:10px;padding:14px;margin-bottom:14px} #scc-root .ntit{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;font-family:'Outfit',sans-serif} #scc-root .nlist{list-style:none;display:flex;flex-direction:column;gap:7px} #scc-root .nlist li{display:block;font-size:13px;color:var(--text2);line-height:1.5;padding-left:14px;position:relative} #scc-root .nlist li::before{content:"\2022";color:var(--teal);font-weight:700;position:absolute;left:0} #scc-root .wbox{background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;padding:10px 14px;margin-bottom:10px;font-size:13px;color:#7f1d1d;display:flex;gap:8px;align-items:flex-start;line-height:1.5} #scc-root .infobox{background:#eff6ff;border:1px solid #93c5fd;border-radius:8px;padding:10px 14px;margin-bottom:10px;font-size:13px;color:#1e40af;display:flex;gap:8px;align-items:flex-start;line-height:1.5} /* ── DISCLAIMER & FOOTER ─────────────────────────────────────────────── */ #scc-root .disclaimer{background:#fff8e1;border:1px solid #fde68a;border-radius:10px;padding:12px 16px;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start} #scc-root .disclaimer-icon{font-size:16px;flex-shrink:0;margin-top:2px} #scc-root .disclaimer-text{font-size:11px;color:#78350f;line-height:1.6} #scc-root .disclaimer-text strong{display:inline;font-weight:700} @media(min-width:520px){#scc-root .disclaimer-text{font-size:12px}} #scc-root .scc-footer{text-align:center;margin-top:24px;font-size:11px;color:var(--text3);line-height:1.7} #scc-root .scc-footer strong{color:var(--text2)} /* ── EXPORTACIÓN DE RESULTADOS ──────────────────────────────────────── */ #scc-root .scc-action-row { display: flex; gap: 10px; margin: 4px 0 16px 0; width: 100%; } #scc-root button.scc-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; } #scc-root button#scc-btn-copy:hover { border-color: #0891b2 !important; color: #0e7490 !important; background: #f0f9ff !important; } #scc-root button#scc-btn-print:hover { border-color: #0d2d5e !important; color: #0d2d5e !important; background: #eff6ff !important; } @media (max-width: 420px) { #scc-root .scc-action-row { flex-direction: column; } } /* ═══════════════════════════════════════════════════════════════ * MEJORAS TRANSVERSALES v5.1 — Cardioteca.com * Guía: Síndrome Coronario Crónico (SCC) — ESC 2024 * Prefijo: scc · Aplicado: 20260601 * ═══════════════════════════════════════════════════════════════ */ /* ── MJ-01 · ANIMACIÓN FADE ──────────────────────────────────── */ @keyframes sccFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } #scc-root #scc-app.scc-anim { animation: sccFadeIn 180ms ease forwards; } /* ── MJ-02 · MODO OSCURO — BOTÓN (v4.4 DEFINITIVO) ────────────── Botón en fragmento-joomla.html como HERMANO de .ah/.app-header. #scc-root tiene position:relative para anclarlo. NUNCA rgba(255,255,255,...) en modo claro. */ #scc-root { position: relative; } #scc-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; } #scc-root .dark-toggle:hover { background: rgba(13,45,94,.18); transform: scale(1.08); } #scc-root.dk .dark-toggle { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.40); color: #fff; } #scc-root.dk .dark-toggle:hover { background: rgba(255,255,255,.28); } /* ── MJ-02 · MODO OSCURO — VARIABLES ────────────────────────── */ #scc-root.dk { --bg: #0f172a; --surface: #1e293b; --surface2: #162032; --border: #334155; --bfocus: #38bdf8; --navy: #7dd3fc; --navy2: #38bdf8; --teal: #22d3ee; --teal2: #06b6d4; --green: #34d399; --blue: #60a5fa; --amber: #fbbf24; --red: #f87171; --text: #f1f5f9; --text2: #94a3b8; --text3: #64748b; --sh: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); --sh2: 0 2px 8px rgba(0,0,0,.5), 0 8px 32px rgba(0,0,0,.4); } /* ── MJ-02 · MODO OSCURO — OVERRIDES COMPONENTES SCC ────────── */ #scc-root.dk .ah h1 { color: var(--navy); } #scc-root.dk .ah h1 span { color: var(--teal); } #scc-root.dk .ah p { color: var(--text2); } #scc-root.dk .badge { background: var(--navy); color: #0f172a; } #scc-root.dk .badge .dot { background: var(--teal); } /* Cards */ #scc-root.dk .card { background: var(--surface); border-color: var(--border); } #scc-root.dk .ct { color: var(--navy); } #scc-root.dk .cs { color: var(--text2); } #scc-root.dk .nbox { background: var(--surface2); } #scc-root.dk .ntit { color: var(--text3); } #scc-root.dk .nlist li { color: var(--text2); } #scc-root.dk .wbox { background: #2d1515; border-color: #7f1d1d; color: #fca5a5; } #scc-root.dk .infobox { background: #0c1a3d; border-color: #1e40af; color: #93c5fd; } /* Progress bar */ #scc-root.dk .scc-pc { background: var(--surface); border-color: var(--border); color: var(--text3); } #scc-root.dk .scc-pc.active { background: var(--navy); border-color: var(--navy); color: #0f172a; } #scc-root.dk .scc-pc.done { background: var(--teal); border-color: var(--teal); color: #0f172a; } #scc-root.dk .scc-pl { color: var(--text3); } #scc-root.dk .scc-pl.active { color: var(--navy); } #scc-root.dk .scc-pl.done { color: var(--teal); } #scc-root.dk .scc-pline { background: var(--border); } #scc-root.dk .scc-pline.done { background: var(--teal); } /* Hub — module cards */ #scc-root.dk .mcard { background: var(--surface); border-color: var(--border); } #scc-root.dk .mcard:hover { box-shadow: var(--sh2); } #scc-root.dk .mc-title { color: var(--navy); } #scc-root.dk .mc-num { color: var(--text3); } #scc-root.dk .mc-sub { color: var(--text2); } /* Option buttons */ #scc-root.dk .obtn { background: var(--surface2); border-color: var(--border); color: var(--text); } #scc-root.dk .obtn:hover { border-color: var(--teal); } #scc-root.dk .obtn.sel { background: var(--navy2); border-color: var(--navy2); color: #0f172a; } #scc-root.dk .obtn .on { color: var(--text); } #scc-root.dk .obtn.sel .on { color: #0f172a; } #scc-root.dk .obtn .os { color: var(--text3); } #scc-root.dk .obtn.sel .os { color: rgba(15,23,42,.6); } #scc-root.dk .olist .olbtn { background: var(--surface2); border-color: var(--border); color: var(--text); } #scc-root.dk .olist .olbtn:hover { border-color: var(--teal); } #scc-root.dk .olist .olbtn.sel { background: var(--navy); border-color: var(--navy); color: #0f172a; } #scc-root.dk .olist .olbtn.na { background: var(--surface); color: var(--text3); border-color: var(--border); } #scc-root.dk .olist .olbtn.na.sel { background: var(--text2); color: #0f172a; border-color: var(--text2); } #scc-root.dk .olbtn .os2 { color: var(--text3); } #scc-root.dk .olbtn.sel .os2 { color: rgba(15,23,42,.55); } /* Chips & checkboxes */ #scc-root.dk .cht { background: var(--surface2); border-color: var(--border); color: var(--text2); } #scc-root.dk .chlbl input:checked + .cht { background: var(--navy2); border-color: var(--navy2); color: #0f172a; } #scc-root.dk .chklbl { background: var(--surface2); border-color: var(--border); } #scc-root.dk .chk-lbl-text { color: var(--text); } #scc-root.dk .chk-lbl-sub { color: var(--text3); } #scc-root.dk .chklbl.chkd { background: #0c2340; border-color: var(--navy2); } /* Buttons */ #scc-root.dk .back-hub { background: var(--surface); border-color: var(--border); color: var(--text3); } #scc-root.dk .back-hub:hover { border-color: var(--navy); color: var(--navy); } #scc-root.dk .bbk { background: var(--surface); border-color: var(--border); color: var(--text2); } #scc-root.dk .bbk:hover { border-color: var(--navy); color: var(--navy); } #scc-root.dk .bnx { background: #1e40af; } #scc-root.dk .bnx:hover:not([disabled]) { background: #2563eb; } #scc-root.dk .bnx[disabled] { background: var(--text3); } #scc-root.dk .bana { box-shadow: 0 4px 16px rgba(8,145,178,.45); } #scc-root.dk .brs { background: var(--surface); border-color: var(--border); color: var(--text2); } #scc-root.dk .brs:hover { background: var(--surface2); border-color: var(--teal); color: var(--teal2); } /* Profile box */ #scc-root.dk .profbox { background: linear-gradient(135deg,#0c2340,#0c1a10); border-color: var(--border); } #scc-root.dk .proflbl { color: var(--text3); } #scc-root.dk .ptag { background: var(--surface); border-color: var(--border); color: var(--text); } /* Evidence badges */ #scc-root.dk .evb.c1 { background: #064e3b; color: #34d399; border-color: #065f46; } #scc-root.dk .evb.c2a { background: #1e3a5f; color: #60a5fa; border-color: #1e40af; } #scc-root.dk .evb.c2b { background: #451a03; color: #fbbf24; border-color: #92400e; } #scc-root.dk .evb.c3 { background: #450a0a; color: #f87171; border-color: #7f1d1d; } #scc-root.dk .evb.loe { background: var(--surface2); color: var(--text2); border-color: var(--border); } #scc-root.dk .evb.guide { background: #0c1a3d; color: #7dd3fc; border-color: #1e3a8a; } /* Section titles */ #scc-root.dk .stitle { color: var(--teal2); border-bottom-color: var(--border); } /* PTP box (M1) */ #scc-root.dk .ptp-box.vlow { background: #0a2e1a; border-color: #065f46; } #scc-root.dk .ptp-box.low { background: #0c1a3d; border-color: #1e40af; } #scc-root.dk .ptp-box.mod { background: #2d1600; border-color: #92400e; } #scc-root.dk .ptp-box.high, #scc-root.dk .ptp-box.vhigh { background: #2d0a0a; border-color: #7f1d1d; } #scc-root.dk .ptp-range { color: var(--text3); } /* Recommendation cards (M1) */ #scc-root.dk .rec-primary { background: linear-gradient(135deg,#064e3b,#0c1a3d); border-color: var(--teal2); } #scc-root.dk .rec-primary-lbl { color: var(--teal2); } #scc-root.dk .rec-primary-test { color: var(--navy); } #scc-root.dk .rec-primary-why { color: var(--text2); } #scc-root.dk .rec-section { background: var(--surface); border-color: var(--border); } #scc-root.dk .rec-alt-name { color: var(--navy); } #scc-root.dk .rec-alt-why { color: var(--text2); } #scc-root.dk .rec-tag { background: rgba(6,182,212,.15); border-color: rgba(6,182,212,.3); color: var(--teal2); } #scc-root.dk .rec-fallback { background: #2d1600; border-color: #92400e; } #scc-root.dk .rec-fallback-text { color: #fbbf24; } #scc-root.dk .rec-fallback-text strong { color: #fbbf24; } #scc-root.dk .ovr-banner { background: linear-gradient(135deg,#2d0a0a,#1a0a0a); border-color: #7f1d1d; } #scc-root.dk .ovr-banner-tit { color: #fca5a5; } #scc-root.dk .ovr-banner-body { color: #fca5a5; } #scc-root.dk .ovr-banner-list li { color: #fca5a5; } #scc-root.dk .mod-banner { background: linear-gradient(135deg,#2d1600,#1a1000); border-color: #92400e; } #scc-root.dk .mod-banner-tit, #scc-root.dk .mod-banner-body { color: #fbbf24; } #scc-root.dk .mod-banner-list li { color: #fbbf24; } #scc-root.dk .test-rec { background: var(--surface2); border-left-color: var(--teal2); } #scc-root.dk .test-rec-lbl { color: var(--teal2); } #scc-root.dk .test-rec-val { color: var(--navy); } #scc-root.dk .test-rec-why { color: var(--text2); } /* Risk badge (M2) */ #scc-root.dk .risk-badge.low { background: #0a2e1a; color: var(--green); border-color: #065f46; } #scc-root.dk .risk-badge.int { background: #0c1a3d; color: var(--blue); border-color: #1e40af; } #scc-root.dk .risk-badge.high { background: #2d0a0a; color: var(--red); border-color: #7f1d1d; } /* Treatment ladder (M3) */ #scc-root.dk .ladder .lcard { background: var(--surface); border-color: var(--border); } #scc-root.dk .ltitle { color: var(--navy); } #scc-root.dk .lsub { color: var(--text2); } #scc-root.dk .lline { background: var(--border); } #scc-root.dk .drug { background: var(--surface2); } #scc-root.dk .dn { color: var(--navy); } #scc-root.dk .dd { color: var(--teal2); } #scc-root.dk .dnote { color: var(--text2); } #scc-root.dk .dgrp-lbl { color: var(--text3); } #scc-root.dk .dgrp-lbl.warn { color: var(--red); } #scc-root.dk .lstep-nota { color: var(--text2); background: var(--surface2); border-left-color: var(--border); } #scc-root.dk .contbox { background: #2d0a0a; border-color: #7f1d1d; } #scc-root.dk .conttitle { color: var(--red); } #scc-root.dk .cmot { color: var(--text2); } #scc-root.dk .cbadge.alta { background: #450a0a; color: #fca5a5; } #scc-root.dk .cbadge.precaucion { background: #451a03; color: #fbbf24; } #scc-root.dk .citem { border-bottom-color: var(--border); } #scc-root.dk .cdrug { color: var(--navy); } /* Treatment blocks (M4) */ #scc-root.dk .tblock { background: var(--surface); border-color: var(--border); } #scc-root.dk .tblock-head { background: var(--surface2); border-bottom-color: var(--border); } #scc-root.dk .tblock-title { color: var(--navy); } #scc-root.dk .titem { background: var(--surface2); } #scc-root.dk .titem-name { color: var(--navy); } #scc-root.dk .titem-detail { color: var(--text2); } /* Revascularization boxes (M5) */ #scc-root.dk .revasc-box.cabg { background: #2d0a0a; border-color: #7f1d1d; } #scc-root.dk .revasc-box.pci { background: #0c1a3d; border-color: #1e40af; } #scc-root.dk .revasc-box.either{ background: #0a2e1a; border-color: #065f46; } #scc-root.dk .revasc-box.medical{ background: var(--surface2); border-color: var(--border); } #scc-root.dk .revasc-box.team { background: #2d1600; border-color: #92400e; } #scc-root.dk .rvtxt { color: var(--text2); } /* Endotype boxes (M6) */ #scc-root.dk .endo-box.mvd { background: #0c1a3d; border-color: #1e40af; } #scc-root.dk .endo-box.vsa { background: #2d0a0a; border-color: #7f1d1d; } #scc-root.dk .endo-box.endo { background: #0a2e1a; border-color: #065f46; } #scc-root.dk .endo-box.mixed{ background: #2d1600; border-color: #92400e; } #scc-root.dk .endo-tit { color: var(--text); } /* Follow-up steps (M7) */ #scc-root.dk .funum { background: var(--navy); color: #0f172a; } #scc-root.dk .futit { color: var(--navy); } #scc-root.dk .futxt { color: var(--text2); } #scc-root.dk .fubullets li { color: var(--text2); } #scc-root.dk .fubullets li::before { color: var(--teal); } #scc-root.dk .fudivider { background: var(--border); } /* Risk section panels */ #scc-root.dk .risk-section { background: var(--surface); border-color: var(--border); } #scc-root.dk .risk-section.override { background: #2d0a0a; border-color: #7f1d1d; } #scc-root.dk .risk-section.modifiers { background: #2d1600; border-color: #92400e; } #scc-root.dk .risk-section-tit { color: var(--navy); } #scc-root.dk .risk-section-sub { color: var(--text2); } /* Disclaimer */ #scc-root.dk .disclaimer { background: #271a00; border-color: #92400e; } #scc-root.dk .disclaimer-text { color: #fde68a; } #scc-root.dk .disclaimer-icon { color: #fbbf24; } /* Footer */ #scc-root.dk .scc-footer { color: var(--text3); } #scc-root.dk .scc-footer strong { color: var(--text2); } /* Export buttons (MT override for dk) */ #scc-root.dk button.scc-btn-export { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text2) !important; } #scc-root.dk button#scc-btn-copy:hover { border-color: var(--teal2) !important; color: var(--teal2) !important; background: #0c1a3d !important; } #scc-root.dk button#scc-btn-print:hover { border-color: var(--navy) !important; color: var(--navy) !important; background: #0c1a3d !important; } /* ── MJ-03 · MEDIDOR VISUAL DE RIESGO ────────────────────────── */ #scc-root .risk-gauge-wrap { margin: 14px 0 16px; padding: 14px 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; } #scc-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; } #scc-root .risk-gauge-track { height: 10px; border-radius: 5px; position: relative; overflow: visible; background: linear-gradient(90deg, #22c55e, #eab308, #f97316, #ef4444); } #scc-root .risk-gauge-marker { position: absolute; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #0d2d5e; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: left .5s ease; } #scc-root.dk .risk-gauge-marker { background: #f1f5f9; border-color: var(--navy); } #scc-root .risk-gauge-scale-labels { display: flex; justify-content: space-between; margin-top: 5px; } #scc-root .risk-gauge-scale-labels span { font-size: 10px; color: var(--text3); font-family: 'JetBrains Mono', monospace; } #scc-root .risk-gauge-value { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700; text-align: center; margin-top: 4px; } /* ── MJ-04 · TIMELINE DE SEGUIMIENTO ─────────────────────────── */ #scc-root .followup-timeline { margin: 14px 0 16px; padding: 14px 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; } #scc-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; } #scc-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; } #scc-root .ft-track::-webkit-scrollbar { display: none; } #scc-root .ft-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 72px; flex-shrink: 0; position: relative; } #scc-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; } #scc-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; } #scc-root .ft-step:first-child .ft-dot { background: var(--navy); box-shadow: 0 0 0 2px var(--navy); } #scc-root .ft-step-content { text-align: center; margin-top: 6px; padding: 0 2px; } #scc-root .ft-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--teal); } #scc-root .ft-step:first-child .ft-time { color: var(--navy); } #scc-root .ft-action { font-size: 10px; color: var(--text2); line-height: 1.3; margin-top: 2px; } /* ── MJ-11 · GUARDAR CASO ─────────────────────────────────────── */ #scc-root .scc-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; } #scc-root .scc-btn-save:hover { opacity: .92; transform: translateY(-1px); } #scc-root input#scc-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; } #scc-root input#scc-case-name:focus { outline: none; border-color: var(--teal); } #scc-root .cases-panel-scroll { max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } #scc-root .cases-panel-scroll::-webkit-scrollbar { width: 4px; } #scc-root .cases-panel-scroll::-webkit-scrollbar-track { background: transparent; } #scc-root .cases-panel-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }