/* aula-07.css — componentes-Executor da Aula 7 (Ginecologia · Módulo III):
   Incontinência urinária na mulher. ADITIVO e element-scoped: prefixo .a7- para nunca colidir
   com base.css / components.css nem regredir as Aulas 1–6. Herda os tokens da casa (rosa-vinho)
   — NÃO reskin; só declara tokens NOVOS (--a7-*). Trilha PRINCIPAL, Módulo III (divisor
   "Ginecologia", NÃO âmbar). Carrega só nas páginas da Aula 7. */

:root {
  --a7-flow: #7cc4ff;                 /* azul frio p/ traçado/urina — não é sangue */
  --a7-flow-dim: rgba(124, 196, 255, 0.14);
  --a7-empty: rgba(250, 244, 248, 0.05);
}
:root[data-theme="light"] {
  --a7-flow: #1f74c4;
  --a7-flow-dim: rgba(31, 116, 196, 0.12);
  --a7-empty: rgba(34, 16, 25, 0.045);
}

/* ============================================================
   BLINDAGEM contra vazamento de <style> dos SVG (defensiva).
   Os SVGs desta aula são namespeados a7pN-, mas reafirmo o esperado da UI com maior
   especificidade para nunca pintar caixa atrás de ícones/rachaduras (idem Aula 6).
   ============================================================ */
.site-header svg, .icon-btn svg, .menu-panel svg, .page-nav svg,
.crack-field svg, .site-footer svg {
  background: transparent !important; background-color: transparent !important;
}
.site-header svg, .icon-btn svg, .menu-panel svg, .page-nav svg { color: inherit !important; }

/* ============ Selo de trilha PRINCIPAL — Módulo III · Ginecologia (rosa, NÃO âmbar) ============ */
.a7-modmark { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rose-hi); border: 1px solid var(--rose); background: var(--wine-soft);
  border-radius: var(--r-pill); padding: 3px 11px; }
.a7-modmark::before { content: "III"; font-size: 0.78em; opacity: 0.85; }

/* ============ Palavra-chave própria da aula (fluxo/traçado) ============ */
.a7-flow { color: var(--a7-flow); font-weight: 700; }

/* ============ Números-chave em linha (cortes, volumes, janelas) ============ */
.a7-numline { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); padding: 0; list-style: none; }
.a7-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); }
.a7-numline .n { font-family: var(--font-mono); font-weight: 700; color: var(--rose-hi); }
.a7-numline .l { color: var(--ink-70); }
.a7-numline li.red   .n { color: var(--kw-red); }
.a7-numline li.amber .n { color: var(--kw-amber); }
.a7-numline li.green .n { color: var(--kw-green); }

/* ============ E2 opener — dado impactante (60 e 90 cmH₂O) — P9 ============ */
.opener--stat { text-align: center; padding: var(--sp-7) var(--sp-5);
  background: radial-gradient(120% 120% at 50% 0%, var(--kw-amber-dim), transparent 72%);
  border: 1px solid var(--kw-amber); border-radius: var(--r-lg); }
.opener--stat .a7-stat__big { font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-display);
  color: var(--kw-amber); line-height: 1; letter-spacing: -0.02em; }
.opener--stat .a7-stat__cap { font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--ink-90);
  max-width: 48ch; margin: var(--sp-3) auto 0; }

/* ============ Olho-de-banca (callout "aqui te derrubam") — P6/P7/P12 ============ */
.a7-lens { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center;
  border: 1px solid var(--kw-amber); border-left: 4px solid 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; }
.a7-lens__eye { font-size: 1.5rem; line-height: 1; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--bg-glass-strong); border: 1px solid var(--kw-amber); }
.a7-lens__b .a7-lens__k { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--kw-amber); display: block; margin-bottom: 2px; }
.a7-lens__b p { margin: 0; font-size: var(--fs-sm); color: var(--ink-90); text-align: justify; text-indent: 0; }
@media (max-width: 520px) { .a7-lens { grid-template-columns: 1fr; } .a7-lens__eye { width: 40px; height: 40px; } }

/* ============ Card-caso do Corredor (Lurdinha) — objeto persistente, nasce P1 ============ */
.a7-caso { 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); }
.a7-caso__head { padding: var(--sp-4) var(--sp-5); background: var(--wine-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; border-bottom: 1px solid var(--border-mid); }
.a7-caso__head h4 { margin: 0; color: var(--rose); font-size: var(--fs-lg); font-family: var(--font-serif); }
.a7-caso__badge { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rose-hi);
  border: 1px solid var(--rose); border-radius: var(--r-pill); padding: 2px 10px; background: var(--bg-1); }
.a7-caso__body { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-4); padding: var(--sp-5); }
.a7-caso__body dt { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--rose-hi); font-weight: 700; }
.a7-caso__body dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-90); text-align: justify; text-indent: 0; }
.a7-caso__body dd strong { color: var(--ink-100); }
.a7-caso__foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs); color: var(--ink-70); font-family: var(--font-mono); display: flex; align-items: center; gap: var(--sp-2); }
.a7-caso__foot .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kw-green); flex-shrink: 0; box-shadow: 0 0 8px var(--kw-green); }
@media (max-width: 520px) { .a7-caso__body { grid-template-columns: 1fr; gap: 2px var(--sp-4); } .a7-caso__body dd { margin-bottom: var(--sp-2); } }

/* ============ Mapa do Assoalho Pélvico — objeto persistente que CRESCE A7→A8, nasce P3 ============ */
.a7-mapa { margin: var(--sp-6) 0; border: 1px solid var(--rose); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--glow-rose); }
.a7-mapa__head { padding: var(--sp-4) var(--sp-5); background: var(--wine-soft); border-bottom: 1px solid var(--border-mid);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.a7-mapa__head h4 { margin: 0; color: var(--rose); font-size: var(--fs-lg); font-family: var(--font-serif); }
.a7-mapa__meta { font-size: var(--fs-xs); color: var(--ink-70); font-family: var(--font-mono); }
.a7-mapa__body { padding: var(--sp-3); }
.a7-mapa__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.a7-mapa__col h5 { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.a7-mapa__col.filled h5 { color: var(--kw-green); }
.a7-mapa__col.empty h5 { color: var(--ink-70); }
.a7-mapa__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.a7-mapa__col.filled li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--kw-green-dim); border: 1px solid var(--kw-green);
  font-size: var(--fs-sm); color: var(--ink-90); }
.a7-mapa__col.filled li b { color: var(--kw-green); }
.a7-mapa__col.filled li .ic { color: var(--kw-green); font-weight: 800; }
.a7-mapa__col.empty li { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--a7-empty);
  border: 1px dashed var(--border-mid); font-size: var(--fs-sm); color: var(--ink-70); font-style: italic;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.a7-mapa__col.empty li .todo { font-family: var(--font-mono); font-size: var(--fs-xs); font-style: normal;
  color: var(--rose-hi); border: 1px solid var(--rose-soft); border-radius: var(--r-pill); padding: 1px 9px; white-space: nowrap; }
.a7-mapa__col.empty li.seeded { color: var(--ink-90); border-style: solid; border-color: var(--rose); background: var(--wine-soft); }
.a7-mapa__col.empty li.seeded .todo { color: var(--rose); border-color: var(--rose); }
@media (max-width: 620px) { .a7-mapa__cols { grid-template-columns: 1fr; } }

/* toque de hidratação parcial do Mapa (P9/P10/P14) */
.a7-mapa-touch { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: center;
  border: 1px dashed var(--rose); border-radius: var(--r-md); background: var(--wine-soft);
  padding: var(--sp-3) var(--sp-5); margin: var(--sp-5) 0; }
.a7-mapa-touch .ic { font-size: 1.3rem; color: var(--rose); }
.a7-mapa-touch p { margin: 0; font-size: var(--fs-sm); color: var(--ink-90); text-indent: 0; text-align: justify; }
.a7-mapa-touch .k { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--rose); display: block; margin-bottom: 2px; }

/* ============ Régua da PPE — 3 ZONAS interativas (INEGOCIÁVEL) — P9 ============ */
.a7-regua { 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); }
.a7-regua__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); flex-wrap: wrap; }
.a7-regua__head h4 { margin: 0; color: var(--rose); font-size: var(--fs-lg); }
.a7-regua__head .a7-regua__unit { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-70); }
.a7-regua__scale { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; margin: var(--sp-5) var(--sp-5) 0; border-radius: var(--r-md); overflow: hidden; }
.a7-regua__zone { padding: var(--sp-4) var(--sp-3); text-align: center; border: 1px solid transparent; transition: filter var(--dur-fast), box-shadow var(--dur-fast); }
.a7-regua__zone .z-range { display: block; font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-lg); }
.a7-regua__zone .z-name { display: block; font-size: var(--fs-sm); font-weight: 700; margin-top: 4px; }
.a7-regua__zone .z-clin { display: block; font-size: var(--fs-xs); color: var(--ink-70); margin-top: 4px; text-indent: 0; }
.a7-regua__zone.z-low   { background: var(--kw-red-dim);   border-color: var(--kw-red); }
.a7-regua__zone.z-low   .z-range, .a7-regua__zone.z-low   .z-name { color: var(--kw-red); }
.a7-regua__zone.z-mid   { background: var(--kw-amber-dim); border-color: var(--kw-amber); }
.a7-regua__zone.z-mid   .z-range, .a7-regua__zone.z-mid   .z-name { color: var(--kw-amber); }
.a7-regua__zone.z-high  { background: var(--kw-green-dim); border-color: var(--kw-green); }
.a7-regua__zone.z-high  .z-range, .a7-regua__zone.z-high  .z-name { color: var(--kw-green); }
.a7-regua__zone.on { filter: saturate(1.35) brightness(1.12); box-shadow: inset 0 0 0 2px currentColor; }
.a7-regua__io { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--sp-4); padding: var(--sp-5); align-items: end; }
.a7-regua__field { display: flex; flex-direction: column; gap: var(--sp-2); }
.a7-regua__field label { font-size: var(--fs-sm); color: var(--ink-90); font-weight: 600; }
.a7-regua__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%; }
.a7-regua__field input:focus-visible { border-color: var(--rose); }
.a7-regua__out { border-radius: var(--r-md); border: 1px solid var(--border-mid); background: var(--bg-1); padding: var(--sp-4);
  transition: border-color var(--dur-fast), background var(--dur-fast); }
.a7-regua__verdict { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 700; color: var(--ink-100); line-height: 1.2; }
.a7-regua__hint { font-size: var(--fs-sm); color: var(--ink-70); margin-top: var(--sp-2); text-indent: 0; text-align: left; }
.a7-regua__out.is-red   { border-color: var(--kw-red);   background: var(--kw-red-dim); }
.a7-regua__out.is-red   .a7-regua__verdict { color: var(--kw-red); }
.a7-regua__out.is-amber { border-color: var(--kw-amber); background: var(--kw-amber-dim); }
.a7-regua__out.is-amber .a7-regua__verdict { color: var(--kw-amber); }
.a7-regua__out.is-green { border-color: var(--kw-green); background: var(--kw-green-dim); }
.a7-regua__out.is-green .a7-regua__verdict { color: var(--kw-green); }
.a7-regua__note { padding: 0 var(--sp-5) var(--sp-5); margin: 0; font-size: var(--fs-xs); color: var(--ink-70); text-indent: 0; text-align: justify; }
.a7-regua__note b { color: var(--kw-amber); }
@media (max-width: 620px) { .a7-regua__scale { grid-template-columns: 1fr; } .a7-regua__io { grid-template-columns: 1fr; } }

/* ============ Timeline dos 3 tempos da urodinâmica — P7 ============ */
.a7-timeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--sp-2); align-items: stretch; margin: var(--sp-6) 0; }
.a7-timeline__step { border: 1px solid var(--border-mid); border-radius: var(--r-md); background: var(--bg-glass); padding: var(--sp-4); }
.a7-timeline__step .t-n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rose); letter-spacing: 0.08em; text-transform: uppercase; }
.a7-timeline__step h5 { margin: 4px 0 var(--sp-2); font-size: var(--fs-md); }
.a7-timeline__step p { margin: 0; font-size: var(--fs-sm); color: var(--ink-90); text-indent: 0; text-align: left; }
.a7-timeline__step.t1 { border-left: 4px solid var(--a7-flow); }
.a7-timeline__step.t2 { border-left: 4px solid var(--kw-amber); }
.a7-timeline__step.t3 { border-left: 4px solid var(--kw-green); }
.a7-timeline__step .t-flag { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-xs); font-family: var(--font-mono);
  padding: 1px 8px; border-radius: var(--r-pill); }
.a7-timeline__step.t2 .t-flag { color: var(--kw-amber); border: 1px solid var(--kw-amber); background: var(--kw-amber-dim); }
.a7-timeline__step.t3 .t-flag { color: var(--kw-green); border: 1px solid var(--kw-green); background: var(--kw-green-dim); }
.a7-timeline__arrow { display: grid; place-items: center; color: var(--rose); font-size: 1.4rem; }
@media (max-width: 720px) { .a7-timeline { grid-template-columns: 1fr; } .a7-timeline__arrow { transform: rotate(90deg); padding: var(--sp-1) 0; } }

/* ============ Handoff POP-Q cru (NÃO decodificar) — P14 ============ */
.a7-popq { margin: var(--sp-6) 0; border: 1px solid var(--kw-amber); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-glass); }
.a7-popq__head { padding: var(--sp-4) var(--sp-5); background: var(--kw-amber-dim); border-bottom: 1px solid var(--kw-amber);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.a7-popq__head h4 { margin: 0; color: var(--kw-amber); font-size: var(--fs-lg); }
.a7-popq__grid { list-style: none; margin: 0; padding: var(--sp-5); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.a7-popq__grid li { text-align: center; padding: var(--sp-4) var(--sp-2); border-radius: var(--r-md); border: 1px solid var(--border-mid); background: var(--bg-1); }
.a7-popq__grid .p-pt { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-70); text-transform: uppercase; letter-spacing: 0.06em; }
.a7-popq__grid .p-val { display: block; font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 800; color: var(--kw-amber); line-height: 1.1; margin-top: 4px; }
.a7-popq__seta { padding: var(--sp-3) var(--sp-5) var(--sp-5); display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  font-family: var(--font-serif); font-weight: 700; color: var(--rose-hi); font-size: var(--fs-lg); }
.a7-popq__seta .arrow { color: var(--rose); font-size: 1.4rem; }
@media (max-width: 560px) { .a7-popq__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ Nota de licença / share-alike (real com CC BY-SA / vista honesta) ============ */
.a7-attr { font-size: var(--fs-xs); color: var(--ink-70); text-indent: 0; text-align: left; }
.a7-attr a { color: var(--ink-70); }
.a7-note-honest { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-family: var(--font-mono);
  color: var(--ink-70); border: 1px solid var(--border-mid); border-radius: var(--r-pill); padding: 1px 9px; margin-top: 4px; background: var(--bg-1); }

/* ============ Contenção de altura das imagens reais (algumas são retrato alto / densas) ============ */
.reading figure.real .real__frame { display: flex; justify-content: center; background: var(--bg-2); }
.reading figure.real .real__frame img { max-height: 560px; width: auto; max-width: 100%; object-fit: contain; }

/* ============ Tabela larga: grid mobile / table desktop (TVT×TOT, 5 anticolinérgicos) ============ */
.a7-wide caption { text-align: left; font-weight: 700; color: var(--rose); padding: var(--sp-3) 0; font-family: var(--font-serif); font-size: var(--fs-md); }
.a7-wide details { margin-top: var(--sp-3); border: 1px solid var(--border-mid); border-radius: var(--r-md); background: var(--bg-1); padding: 0 var(--sp-4); }
.a7-wide details summary { cursor: pointer; padding: var(--sp-3) 0; font-size: var(--fs-sm); font-weight: 600; color: var(--rose-hi); }
.a7-wide details[open] summary { border-bottom: 1px solid var(--border-soft); margin-bottom: var(--sp-3); }
.a7-wide details p { font-size: var(--fs-sm); color: var(--ink-90); text-indent: 0; }

/* ============ Reflow 320px (SD · aula-07): alternativa de quiz com token longo
   sem espaço (ex.: "biofeedback/eletroestimulação" na P10) não pode empurrar a
   coluna além da viewport. min-width:0 destrava o encolhimento do item flex e
   overflow-wrap:anywhere permite a quebra do token. Element-scoped à aula-07. ============ */
.quiz__alt { min-width: 0; }
.quiz__alt > span:not(.letter) { min-width: 0; overflow-wrap: anywhere; }