/* aula-05.css — componentes-Executor próprios da Aula 5 (Hemorragia puerperal). ADITIVO e element-scoped: todas as classes usam prefixo .a5- para nunca colidir com base.css / components.css (não regride Aula 1/2/3/4). Herda os tokens da casa (rosa-vinho). Só declara tokens NOVOS (--a5-* e --violet, acento cirúrgico que os heróis já pedem via var(--violet, …)) — nunca redefine os canônicos. Carrega apenas nas páginas da Aula 5. */ :root { --violet: #c9a6ff; /* sutura/instrumento cirúrgico (B-Lynch, Allis) — os heróis consomem */ --violet-dim: rgba(201, 166, 255, 0.15); --a5-neuro: #7cc4ff; /* choque neurogênico (não confundir com sangue) */ --a5-neuro-dim: rgba(124, 196, 255, 0.15); --a5-vac: #6fe3d0; /* vácuo/JADA (mecanismo inverso ao balão) */ --a5-vac-dim: rgba(111, 227, 208, 0.15); } :root[data-theme="light"] { --violet: #7b3fd4; --violet-dim: rgba(123, 63, 212, 0.12); --a5-neuro: #1f74c4; --a5-neuro-dim: rgba(31, 116, 196, 0.12); --a5-vac: #12876f; --a5-vac-dim: rgba(18, 135, 111, 0.12); } /* Palavras-chave próprias da aula (cor contextual) */ .a5-neuro { color: var(--a5-neuro); font-weight: 700; } .a5-vac { color: var(--a5-vac); font-weight: 700; } .a5-surg { color: var(--violet); font-weight: 700; } /* ============ Números-chave em linha (doses, cortes, janelas) ============ */ .a5-numline { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); padding: 0; list-style: none; } .a5-numline li { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid var(--border-mid); border-radius: var(--r-pill); background: var(--bg-1); font-size: var(--fs-sm); } .a5-numline .n { font-family: var(--font-mono); font-weight: 700; color: var(--rose-hi); } .a5-numline .l { color: var(--ink-70); } /* ============ E2 opener — dado impactante (>50%) — P6 ============ */ .opener--stat { text-align: center; padding: var(--sp-7) var(--sp-5); background: radial-gradient(120% 120% at 50% 0%, var(--kw-green-dim), transparent 72%); border: 1px solid var(--kw-green); border-radius: var(--r-lg); } .opener--stat .a5-stat__big { font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-display); color: var(--kw-green); line-height: 1; letter-spacing: -0.02em; } .opener--stat .a5-stat__cap { font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--ink-90); max-width: 44ch; margin: var(--sp-3) auto 0; } /* ============ P2 — Calculadora do índice de choque (peça-forte) ============ */ .a5-calc { margin: var(--sp-6) 0; border: 1px solid var(--rose); border-radius: var(--r-lg); background: var(--bg-glass); overflow: hidden; box-shadow: var(--glow-rose); } .a5-calc__head { padding: var(--sp-4) var(--sp-5); background: var(--wine-soft); border-bottom: 1px solid var(--border-mid); display: flex; align-items: center; gap: var(--sp-2); } .a5-calc__head h4 { margin: 0; color: var(--rose); font-size: var(--fs-lg); } .a5-calc__head .a5-calc__formula { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-70); } .a5-calc__body { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: var(--sp-4); padding: var(--sp-5); align-items: end; } .a5-calc__field { display: flex; flex-direction: column; gap: var(--sp-2); } .a5-calc__field label { font-size: var(--fs-sm); color: var(--ink-90); font-weight: 600; } .a5-calc__field input { font-family: var(--font-mono); font-size: var(--fs-xl); text-align: center; padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--border-mid); background: var(--bg-1); color: var(--ink-100); width: 100%; } .a5-calc__field input:focus-visible { border-color: var(--rose); } .a5-calc__field .a5-calc__unit { font-size: var(--fs-xs); color: var(--ink-50); font-family: var(--font-mono); } .a5-calc__out { border-radius: var(--r-md); border: 1px solid var(--border-mid); background: var(--bg-1); padding: var(--sp-4); text-align: center; transition: border-color var(--dur-fast), background var(--dur-fast); } .a5-calc__val { font-family: var(--font-mono); font-size: var(--fs-3xl); font-weight: 800; color: var(--ink-100); line-height: 1; } .a5-calc__flag { font-size: var(--fs-sm); font-weight: 700; margin-top: var(--sp-2); color: var(--ink-70); } .a5-calc__out.is-alert { border-color: var(--kw-amber); background: var(--kw-amber-dim); } .a5-calc__out.is-alert .a5-calc__val { color: var(--kw-amber); } .a5-calc__out.is-alert .a5-calc__flag { color: var(--kw-amber); } .a5-calc__out.is-danger { border-color: var(--kw-red); background: var(--kw-red-dim); } .a5-calc__out.is-danger .a5-calc__val { color: var(--kw-red); } .a5-calc__out.is-danger .a5-calc__flag { color: var(--kw-red); } .a5-calc__note { padding: 0 var(--sp-5) var(--sp-5); font-size: var(--fs-xs); color: var(--ink-70); text-indent: 0; text-align: justify; margin: 0; } .a5-calc__note b { color: var(--rose-hi); } @media (max-width: 620px) { .a5-calc__body { grid-template-columns: 1fr 1fr; } .a5-calc__out { grid-column: 1 / -1; } } /* ============ P1 — mini-timeline precoce × tardia (link-back) ============ */ .a5-split24 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; margin: var(--sp-5) 0; align-items: stretch; border: 1px solid var(--border-mid); border-radius: var(--r-lg); overflow: hidden; } .a5-split24__side { padding: var(--sp-5); background: var(--bg-glass); } .a5-split24__side.pre { border-left: 4px solid var(--kw-red); } .a5-split24__side.tard { border-left: 4px solid var(--ink-50); background: var(--bg-1); } .a5-split24__k { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--rose); } .a5-split24__side.tard .a5-split24__k { color: var(--ink-70); } .a5-split24__t { font-size: var(--fs-lg); font-weight: 700; color: var(--ink-100); margin: var(--sp-1) 0; } .a5-split24__d { font-size: var(--fs-sm); color: var(--ink-90); } .a5-split24__mark { display: grid; place-items: center; padding: var(--sp-3); background: var(--wine-soft); font-family: var(--font-mono); font-weight: 800; color: var(--rose); writing-mode: vertical-rl; text-orientation: mixed; } @media (max-width: 560px) { .a5-split24 { grid-template-columns: 1fr; } .a5-split24__mark { writing-mode: horizontal-tb; } } /* ============ P3 — Grid de acrônimo dos 4 "Ts" (hotspot por T) ============ */ .a5-ts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); } .a5-ts__card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border-mid); background: var(--bg-glass); border-top: 4px solid var(--border-mid); cursor: pointer; transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); } .a5-ts__card:hover, .a5-ts__card:focus-visible { transform: translateY(-2px); border-color: var(--rose); } .a5-ts__card[aria-expanded="true"] { box-shadow: var(--glow-rose); } .a5-ts__pct { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 800; line-height: 1; } .a5-ts__t { font-size: var(--fs-md); font-weight: 700; color: var(--ink-100); } .a5-ts__sub { font-size: var(--fs-xs); color: var(--ink-70); } .a5-ts__card.t-tonus { border-top-color: var(--kw-red); } .a5-ts__card.t-tonus .a5-ts__pct { color: var(--kw-red); } .a5-ts__card.t-trauma { border-top-color: var(--rose); } .a5-ts__card.t-trauma .a5-ts__pct { color: var(--rose-hi); } .a5-ts__card.t-tecido { border-top-color: var(--kw-amber); } .a5-ts__card.t-tecido .a5-ts__pct { color: var(--kw-amber); } .a5-ts__card.t-tromb { border-top-color: var(--ink-50); } .a5-ts__card.t-tromb .a5-ts__pct { color: var(--ink-70); } .a5-ts__detail { margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--bg-glass-strong); border: 1px solid var(--border-mid); border-left: 3px solid var(--rose); } .a5-ts__detail[hidden] { display: none; } .a5-ts__detail h5 { margin: 0 0 var(--sp-2); color: var(--rose-hi); } .a5-ts__detail p { margin: 0; font-size: var(--fs-sm); color: var(--ink-90); text-align: justify; text-indent: 0; } .a5-ts__hint { font-size: var(--fs-xs); color: var(--rose); font-family: var(--font-mono); margin: 0 0 var(--sp-5); } @media (max-width: 620px) { .a5-ts { grid-template-columns: 1fr 1fr; } } /* ============ P4/P5 — Escada "morreu" (degraus numerados, sobe sem pular) ============ */ .a5-escada { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-5) 0; } .a5-escada__cap { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--rose); margin-bottom: var(--sp-1); } .a5-escada__step { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-3); align-items: stretch; padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border-mid); background: var(--bg-glass); } .a5-escada__step.is-clin { border-left: 4px solid var(--kw-green); } .a5-escada__step.is-tamp { border-left: 4px solid var(--rose); } .a5-escada__step.is-surg { border-left: 4px solid var(--violet); } .a5-escada__step.is-last { border-left: 4px solid var(--kw-red); background: var(--kw-red-dim); } .a5-escada__n { font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-xl); color: var(--rose); display: grid; place-items: center; border-right: 1px solid var(--border-soft); } .a5-escada__step.is-last .a5-escada__n { color: var(--kw-red); } .a5-escada__b h5 { margin: 0 0 4px; font-size: var(--fs-md); } .a5-escada__b p { margin: 0; font-size: var(--fs-sm); color: var(--ink-90); text-align: justify; text-indent: 0; } .a5-escada__conn { text-align: center; color: var(--rose); font-family: var(--font-mono); font-size: var(--fs-xs); } .a5-escada__conn b { color: var(--kw-amber); } /* Card regra-de-ouro / pegadinha / divergência (reforço da escada) */ .a5-rule { border: 1px solid var(--kw-green); background: var(--kw-green-dim); border-left: 4px solid var(--kw-green); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0; } .a5-rule .a5-lbl { color: var(--kw-green); } .a5-lbl { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); } .a5-rule p, .a5-diverg p { margin: 0; text-align: justify; text-indent: 0; color: var(--ink-90); } .a5-diverg { border: 1px solid var(--a5-neuro); background: var(--a5-neuro-dim); border-left: 4px solid var(--a5-neuro); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0; } .a5-diverg .a5-lbl { color: var(--a5-neuro); } /* ============ P6 — Timeline do terceiro período (link-back) ============ */ .a5-tl3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: var(--sp-5) 0; } .a5-tl3__step { padding: var(--sp-4); border: 1px solid var(--border-mid); border-right: 0; background: var(--bg-glass); position: relative; } .a5-tl3__step:last-child { border-right: 1px solid var(--border-mid); } .a5-tl3__step:first-child { border-radius: var(--r-md) 0 0 var(--r-md); } .a5-tl3__step:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; } .a5-tl3__t { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rose); font-weight: 700; } .a5-tl3__b { font-size: var(--fs-sm); color: var(--ink-90); margin-top: 4px; } .a5-tl3__b b { color: var(--ink-100); } .a5-tl3__step.warn { border-color: var(--kw-amber); } .a5-tl3__step.warn .a5-tl3__t { color: var(--kw-amber); } .a5-tl3__step.bad { border-color: var(--kw-red); background: var(--kw-red-dim); } .a5-tl3__step.bad .a5-tl3__t { color: var(--kw-red); } @media (max-width: 620px) { .a5-tl3 { grid-template-columns: 1fr; } .a5-tl3__step { border-right: 1px solid var(--border-mid); border-bottom: 0; border-radius: 0; } .a5-tl3__step:first-child { border-radius: var(--r-md) var(--r-md) 0 0; } .a5-tl3__step:last-child { border-radius: 0 0 var(--r-md) var(--r-md); border-bottom: 1px solid var(--border-mid); } } /* ============ P7 — Fluxo de decisão da inversão ============ */ .a5-flowinv { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-5) 0; } .a5-flowinv__node { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--border-mid); background: var(--bg-glass); } .a5-flowinv__node .step-k { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rose); font-weight: 700; display: block; margin-bottom: 2px; } .a5-flowinv__node p { margin: 0; font-size: var(--fs-sm); color: var(--ink-90); text-align: justify; text-indent: 0; } .a5-flowinv__node.clin { border-left: 4px solid var(--kw-green); } .a5-flowinv__node.relax { border-left: 4px solid var(--kw-amber); } .a5-flowinv__node.contract { border-left: 4px solid var(--kw-red); } .a5-flowinv__node.surg { border-left: 4px solid var(--violet); } .a5-flowinv__conn { text-align: center; color: var(--rose); font-size: 1.1rem; line-height: 1; } .a5-flowinv__conn small { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-70); } /* ============ P8 — Mapa fator → T (eixos paralelos) ============ */ .a5-map { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin: var(--sp-5) 0; } .a5-map__row { display: grid; grid-template-columns: 1fr 46px 1fr; align-items: center; gap: var(--sp-2); } .a5-map__f { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--bg-1); border: 1px solid var(--border-soft); font-size: var(--fs-sm); color: var(--ink-90); text-align: right; } .a5-map__arrow { text-align: center; color: var(--rose); font-family: var(--font-mono); } .a5-map__t { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; border: 1px solid var(--border-mid); } .a5-map__t.atonia { color: var(--kw-red); background: var(--kw-red-dim); border-color: var(--kw-red); } .a5-map__t.lacer { color: var(--rose-hi); background: var(--wine-soft); border-color: var(--rose); } @media (max-width: 560px) { .a5-map__row { grid-template-columns: 1fr; gap: 2px; text-align: center; } .a5-map__f { text-align: center; } .a5-map__arrow { transform: rotate(90deg); } } /* ============ P8 — Grid de complicações (óbvias + Sheehan destacado) ============ */ .a5-comp { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); } .a5-comp__card { padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border-mid); background: var(--bg-1); text-align: center; } .a5-comp__card h5 { margin: 0 0 4px; color: var(--kw-white); font-size: var(--fs-md); } .a5-comp__card p { margin: 0; font-size: var(--fs-xs); color: var(--ink-70); text-indent: 0; text-align: center; } .a5-comp__sheehan { grid-column: 1 / -1; border: 1px solid var(--kw-red); background: var(--kw-red-dim); border-left: 4px solid var(--kw-red); border-radius: var(--r-md); padding: var(--sp-5); } .a5-comp__sheehan .a5-lbl { color: var(--kw-red); } .a5-comp__sheehan h4 { margin: 0 0 var(--sp-2); color: var(--kw-red); } .a5-comp__sheehan p { margin: 0; text-align: justify; text-indent: 0; color: var(--ink-90); } @media (max-width: 560px) { .a5-comp { grid-template-columns: 1fr; } } /* ============ Caso paradigmático (fechamento do Caso 3) ============ */ .a5-caso { border: 1px solid var(--wine); border-left: 4px solid var(--rose); border-radius: var(--r-md); background: var(--bg-glass-strong); padding: var(--sp-5); margin: var(--sp-5) 0; } .a5-caso .a5-lbl { color: var(--rose); } .a5-caso p { margin: 0 0 var(--sp-2); text-align: justify; text-indent: 0; color: var(--ink-90); } .a5-caso dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0 0; } .a5-caso dt { font-weight: 700; color: var(--rose-hi); font-size: var(--fs-sm); } .a5-caso dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-90); } @media (max-width: 560px) { .a5-caso dl { grid-template-columns: 1fr; gap: 2px var(--sp-4); } .a5-caso dd { margin-bottom: var(--sp-2); } } /* ============ Par de imagens reais (composição simétrica — P2, P4, P5) ============ */ .a5-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: 0 0 var(--sp-3); } .a5-pair__cell { display: flex; flex-direction: column; border: 1px solid var(--border-mid); border-radius: var(--r-md); overflow: hidden; background: var(--bg-1); } .a5-pair__cell img { width: 100%; height: 240px; object-fit: contain; display: block; background: #0d0a10; padding: var(--sp-2); } :root[data-theme="light"] .a5-pair__cell img { background: #ece2ea; } .a5-pair__lbl { padding: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-90); border-top: 1px solid var(--border-soft); } .a5-pair__lbl b { display: block; color: var(--rose-hi); font-family: var(--font-serif); margin-bottom: 2px; } @media (max-width: 620px) { .a5-pair { grid-template-columns: 1fr; } } /* ============ Nota de licença não-comercial / decisão pendente (badge + attribution) ============ */ .a5-nc { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--kw-amber); border: 1px solid var(--kw-amber); border-radius: var(--r-pill); padding: 2px 10px; background: var(--kw-amber-dim); } .a5-nc::before { content: "⛔"; font-size: 0.85em; } .a5-ncnote { border: 1px dashed var(--kw-amber); border-radius: var(--r-md); background: var(--kw-amber-dim); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; font-size: var(--fs-sm); color: var(--ink-90); } .a5-ncnote .a5-lbl { color: var(--kw-amber); } .a5-ncnote p { margin: 0; text-align: justify; text-indent: 0; } /* attribution compacta sob imagem real (licença citada) */ .a5-attr { font-size: var(--fs-xs); color: var(--ink-70); text-indent: 0; text-align: left; } .a5-attr a { color: var(--ink-70); } /* ============ BLINDAGEM contra vazamento de