.ssd-diagrama{container-type:inline-size;color:var(--text);font-family:inherit;line-height:1.6} .ssd-diagrama *{box-sizing:border-box} .ssd-diagrama h4{font-size:20px;line-height:1.35;margin:8px 0 12px;color:var(--text);font-weight:700} .ssd-diagrama .sd-description{font-size:15px;margin:0 0 24px;text-align:justify} .ssd-diagrama .sd-kind{display:inline-block;font-size:12px;line-height:1.5;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--course-accent,var(--text))} .ssd-diagrama .sd-node{position:relative;min-width:0;padding:16px 18px;border:1px solid var(--text-muted);border-radius:14px;background:var(--bg-white);color:var(--text)} .ssd-diagrama .sd-node strong{display:block;font-size:16px;line-height:1.4;font-weight:650;overflow-wrap:anywhere} .ssd-diagrama .sd-node p{margin:8px 0 0;font-size:14px;line-height:1.6;text-align:justify;overflow-wrap:anywhere} .ssd-diagrama .sd-root,.ssd-diagrama .sd-decision{border:2px solid var(--course-accent,var(--text));background:color-mix(in srgb,var(--course-accent,var(--text)) 7%,var(--bg-white))} .ssd-diagrama .sd-relation{display:block;font-size:13px;line-height:1.5;font-weight:650;margin-bottom:7px;color:var(--course-accent,var(--text));overflow-wrap:anywhere} .ssd-diagrama .sd-architecture{display:grid;grid-template-columns:minmax(180px,.85fr) minmax(0,1.4fr);gap:36px;align-items:center} .ssd-diagrama .sd-architecture>.sd-root::after{content:"";position:absolute;right:-38px;top:50%;width:36px;border-top:2px solid var(--course-accent,var(--text))} .ssd-diagrama .sd-branches{position:relative;list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid var(--course-accent,var(--text));display:grid;gap:16px} .ssd-diagrama .sd-branches>li{position:relative;margin:0;min-width:0;list-style:none} .ssd-diagrama .sd-branches>li::before{content:"";position:absolute;left:-24px;top:50%;width:22px;border-top:2px solid var(--course-accent,var(--text))} .ssd-diagrama .sd-branches>li::after{content:"";position:absolute;left:-6px;top:calc(50% - 4px);width:8px;height:8px;border-top:2px solid var(--course-accent,var(--text));border-right:2px solid var(--course-accent,var(--text));transform:rotate(45deg)} .ssd-diagrama .sd-start{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:stretch} .ssd-diagrama .sd-arrow{align-self:center;height:2px;background:var(--course-accent,var(--text));position:relative} .ssd-diagrama .sd-arrow::after{content:"";position:absolute;right:0;top:-3px;width:8px;height:8px;border-top:2px solid var(--course-accent,var(--text));border-right:2px solid var(--course-accent,var(--text));transform:rotate(45deg)} .ssd-diagrama .sd-down{height:28px;width:2px;margin:0 auto;background:var(--course-accent,var(--text));position:relative} .ssd-diagrama .sd-down::after{content:"";position:absolute;bottom:0;left:-3px;width:8px;height:8px;border-bottom:2px solid var(--course-accent,var(--text));border-right:2px solid var(--course-accent,var(--text));transform:rotate(45deg)} .ssd-diagrama .sd-action-join{height:32px;position:relative} .ssd-diagrama .sd-action-join::before{content:"";position:absolute;left:50%;right:calc(25% - 8px);bottom:0;height:16px;border-left:2px solid var(--course-accent,var(--text));border-top:2px solid var(--course-accent,var(--text))} .ssd-diagrama .sd-action-join::after{content:"";position:absolute;left:calc(75% + 8px);top:0;height:16px;border-left:2px solid var(--course-accent,var(--text))} .ssd-diagrama .sd-fork{height:28px;position:relative} .ssd-diagrama .sd-fork::before{content:"";position:absolute;left:0;right:50%;bottom:0;height:14px;border-left:2px solid var(--course-accent,var(--text));border-top:2px solid var(--course-accent,var(--text))} .ssd-diagrama .sd-fork::after{content:"";position:absolute;left:50%;top:0;height:14px;border-left:2px solid var(--course-accent,var(--text))} .ssd-diagrama .sd-decision{max-width:520px;margin:0 auto;text-align:center;border-radius:24px} .ssd-diagrama .sd-decision .sd-relation::before{content:"";display:inline-block;width:9px;height:9px;border:2px solid currentColor;transform:rotate(45deg);margin-right:9px} .ssd-diagrama .sd-outcomes{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid var(--course-accent,var(--text));display:grid;gap:16px} .ssd-diagrama .sd-return{display:block;margin-top:10px;padding-top:9px;border-top:1px dashed var(--text-muted);font-size:13px;line-height:1.6} .ssd-diagrama details{margin-top:22px;border-top:1px solid var(--border);padding-top:12px} .ssd-diagrama summary{cursor:pointer;min-height:44px;padding:10px 0;font-size:14px;font-weight:650;line-height:1.5;color:var(--text)} .ssd-diagrama summary:focus-visible{outline:2px solid var(--course-accent,var(--text));outline-offset:3px;border-radius:4px} .ssd-diagrama .sd-table-wrap{overflow-x:auto} .ssd-diagrama table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;table-layout:fixed} .ssd-diagrama caption{text-align:left;font-size:13px;padding:10px 0;color:var(--text)} .ssd-diagrama th,.ssd-diagrama td{text-align:left;vertical-align:top;border-bottom:1px solid var(--border);padding:10px 6px;overflow-wrap:anywhere;color:var(--text)} @container(max-width:540px){ .ssd-diagrama .sd-architecture{grid-template-columns:minmax(0,1fr);gap:24px} .ssd-diagrama .sd-architecture>.sd-root::after{right:auto;top:auto;left:20px;bottom:-26px;width:2px;height:24px;border:0;background:var(--course-accent,var(--text))} .ssd-diagrama .sd-architecture>.sd-branches{margin-left:22px} .ssd-diagrama .sd-start{grid-template-columns:minmax(0,1fr);gap:0} .ssd-diagrama .sd-arrow{width:2px;height:28px;margin:0 auto} .ssd-diagrama .sd-arrow::after{right:auto;top:auto;bottom:0;left:-3px;transform:rotate(135deg)} .ssd-diagrama .sd-action-join::before{right:auto;top:0;bottom:auto;height:32px;border-top:0} .ssd-diagrama .sd-action-join::after{display:none} .ssd-diagrama .sd-node{padding:14px} } @media print{.ssd-diagrama .sd-node{break-inside:avoid}.ssd-diagrama details{display:block}}