/* aula-11.css — componentes exclusivos da Aula 11. */
:root {
  --a11-amber-local: #ffc24a;
  --a11-green-local: #37d6a0;
  --a11-red-local: #ff5b70;
  --a11-rose-local: #ff5c8a;
  --a11-ink-local: #faf4f8;
  --a11-panel-local: #2b2033;
  --a11-border-local: #faf4f829;
  --a11-amber: var(--kw-amber, var(--a11-amber-local, #ffc24a));
  --a11-green: var(--kw-green, var(--a11-green-local, #37d6a0));
  --a11-red: var(--kw-red, var(--a11-red-local, #ff5b70));
  --a11-rose: var(--rose, var(--a11-rose-local, #ff5c8a));
  --a11-ink: var(--ink-100, var(--a11-ink-local, #faf4f8));
  --a11-panel: var(--bg-2, var(--a11-panel-local, #2b2033));
  --a11-border: var(--border-mid, var(--a11-border-local, #faf4f829));
}

:root[data-theme="light"] {
  --rose: #781039;
  --rose-hi: #711033;
  --wine: #711033;
  --kw-amber: #563600;
  --kw-green: #064b32;
  --ink-90: #2b1722;
  --ink-70: #493640;
}

.a11-bonus, .a11-modmark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.a11-bonus {
  color: var(--a11-amber, #ffc24a);
  border: 1px dashed var(--a11-amber, #ffc24a);
  background: var(--kw-amber-dim, #ffc24a1f);
}
.a11-bonus::before { content: "★"; }
.a11-modmark {
  color: var(--rose-hi, #ff87ab);
  border: 1px solid var(--a11-border, #faf4f829);
  background: var(--rose-soft, #ff5c8a1f);
}

.a11-part-divider {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--a11-border, #faf4f829);
  border-left: 5px solid var(--a11-red, #ff5b70);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--kw-red-dim, #ff5b701f), var(--bg-glass, #211a28cc));
}
.a11-part-divider span, .a11-objective > span, .a11-opener__label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--a11-amber, #ffc24a);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.a11-part-divider strong { display: block; color: var(--a11-ink, #faf4f8); font-size: var(--fs-xl); }
.a11-part-divider p { margin: var(--sp-2) 0 0; text-indent: 0; }

.a11-opener {
  position: relative;
  overflow: hidden;
  margin: var(--sp-6) 0;
  padding: var(--sp-6);
  border: 1px solid var(--a11-border, #faf4f829);
  border-top: 3px solid var(--a11-amber, #ffc24a);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 90% 10%, var(--kw-amber-dim, #ffc24a1f), transparent 38%),
    var(--bg-glass, #211a28cc);
}
.a11-opener p {
  margin: 0;
  max-width: 68ch;
  color: var(--a11-ink, #faf4f8);
  font-family: var(--font-serif);
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.4;
  text-indent: 0;
}
.a11-objective {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--a11-border, #faf4f829);
  border-radius: var(--r-md);
  background: var(--bg-1, #211a28);
}
.a11-objective p { margin: 0; text-indent: 0; }

.a11-linkback {
  display: inline-flex;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 .35em;
  border: 1px solid var(--a11-border, #faf4f829);
  border-radius: var(--r-pill);
  color: var(--rose-hi, #ff87ab);
  font-family: var(--font-mono);
  font-size: .78em;
  text-decoration: none;
}
.a11-linkback:focus-visible { outline: 2px solid var(--rose-hi, #ff87ab); outline-offset: 2px; }
.card__label, .fig__hint, .conn__lbl, .page-nav .nav-dir, .a11-table caption {
  color: var(--rose-hi, #ff87ab);
}

.a11-component, .a11-panel, .a11-review {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  border: 1px solid var(--a11-border, #faf4f829);
  border-radius: var(--r-lg);
  background: var(--bg-glass, #211a28cc);
  box-shadow: var(--shadow-md);
}
.a11-component__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.a11-component__head h3, .a11-panel h3, .a11-review h3 { margin: 0; color: var(--a11-ink, #faf4f8); }
.a11-component__head > span, .a11-component__sub {
  color: var(--ink-70, #b3a2ad);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.a11-component__sub { margin: var(--sp-3) 0; text-indent: 0; }

.a11-table-wrap { overflow-x: auto; margin: var(--sp-4) 0; }
.a11-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.a11-table caption {
  padding-bottom: var(--sp-3);
  color: var(--a11-rose, #ff5c8a);
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
}
.a11-table th, .a11-table td {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--a11-border, #faf4f829);
  vertical-align: top;
  text-align: left;
}
.a11-table thead th { color: var(--a11-ink, #faf4f8); background: var(--a11-panel, #2b2033); }
.a11-table tbody th { color: var(--a11-ink, #faf4f8); background: var(--bg-1, #211a28); }
.a11-table td { color: var(--ink-90, #ecdde6); background: var(--bg-1, #211a28); }

.a11-realpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.a11-realpair__cell { display: grid; align-content: start; gap: var(--sp-2); min-width: 0; }
.a11-realpair__cell img { display: block; width: 100%; height: auto; object-fit: contain; }
.a11-realpair__label { color: var(--ink-70, #b3a2ad); font-family: var(--font-mono); font-size: var(--fs-xs); }
.real__lead + .real__lead { margin-top: var(--sp-3); }
.a11-hero .fig__frame { min-height: min(78vh, 900px); border: 2px solid var(--a11-rose, #ff5c8a); }
.a11-floor { max-width: 860px; margin-inline: auto; opacity: .94; }
.a11-floor .fig__frame { border-style: dashed; }

.a11-inline-svg [role="button"] { transition: opacity .18s ease, filter .18s ease; }
.a11-inline-svg [role="button"]:hover,
.a11-inline-svg [role="button"]:focus-visible,
.a11-inline-svg [role="button"].is-a11-active {
  opacity: 1 !important;
  filter: brightness(1.12) drop-shadow(0 0 5px var(--a11-rose, #ff5c8a));
}
.a11-inline-svg[data-active-target]:not([data-active-target="none"]) [role="button"] { opacity: .42; }
.a11-inline-svg[data-active-target]:not([data-active-target="none"]) [role="button"].is-a11-active { opacity: 1; }

.a11-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto minmax(0, 1.35fr);
  gap: var(--sp-2);
  align-items: stretch;
}
.a11-timeline button, .a11-sequence button {
  padding: var(--sp-3);
  border: 1px solid var(--a11-border, #faf4f829);
  border-radius: var(--r-md);
  background: var(--bg-1, #211a28);
  color: var(--ink-90, #ecdde6);
  text-align: left;
}
.a11-timeline button:hover, .a11-timeline button.is-active,
.a11-sequence button:hover, .a11-sequence button.is-active {
  border-color: var(--a11-amber, #ffc24a);
  background: var(--kw-amber-dim, #ffc24a1f);
}
.a11-timeline button b, .a11-timeline button small { display: block; }
.a11-timeline button b { color: var(--a11-ink, #faf4f8); }
.a11-timeline button small { margin-top: var(--sp-1); color: var(--ink-70, #b3a2ad); }
.a11-timeline__break {
  display: grid;
  place-items: center;
  padding: var(--sp-2);
  border-inline: 2px dashed var(--a11-amber, #ffc24a);
  color: var(--a11-amber, #ffc24a);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  writing-mode: vertical-rl;
}
.a11-live {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3);
  border-left: 4px solid var(--a11-amber, #ffc24a);
  background: var(--kw-amber-dim, #ffc24a1f);
  text-indent: 0;
}

.a11-sequence { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.a11-sequence button b {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: var(--sp-2);
  border-radius: 50%;
  background: var(--a11-panel, #2b2033);
  color: var(--a11-amber, #ffc24a);
}
.a11-branches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.a11-branches article { padding: var(--sp-4); border: 2px solid var(--a11-border, #faf4f829); border-radius: var(--r-md); background: var(--bg-1, #211a28); }
.a11-branches .is-cert { border-color: var(--a11-green, #37d6a0); }
.a11-branches .is-prob { border-color: var(--a11-amber, #ffc24a); }
.a11-branches h4 { margin-bottom: var(--sp-2); }
.a11-branches p { margin: 0; text-indent: 0; }
.a11-seals { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.a11-seals span, .a11-seals strong { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--a11-border, #faf4f829); border-radius: var(--r-pill); font-size: var(--fs-xs); }
.a11-seals strong { color: var(--a11-amber, #ffc24a); border-color: var(--a11-amber, #ffc24a); }
.a11-reset, .a11-zoom {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--a11-border, #faf4f829);
  border-radius: var(--r-pill);
  background: var(--bg-1, #211a28);
  color: var(--ink-90, #ecdde6);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.a11-reset:hover, .a11-zoom:hover { border-color: var(--a11-rose, #ff5c8a); color: var(--a11-rose, #ff5c8a); }

.a11-flow { display: grid; gap: var(--sp-3); }
.a11-flow__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.a11-flow__node, .a11-flow__decision {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: 1px solid var(--a11-border, #faf4f829);
  border-radius: var(--r-md);
  background: var(--bg-1, #211a28);
}
.a11-flow__node b { color: var(--a11-ink, #faf4f8); }
.a11-flow__node small { color: var(--ink-70, #b3a2ad); }
.a11-flow__node.is-start { border-left: 5px solid var(--a11-rose, #ff5c8a); }
.a11-flow__node.is-ok { border-color: var(--a11-green, #37d6a0); background: var(--kw-green-dim, #37d6a01f); }
.a11-flow__node.is-alert { border-color: var(--a11-amber, #ffc24a); background: var(--kw-amber-dim, #ffc24a1f); }
.a11-flow__decision { justify-self: center; border-radius: var(--r-pill); color: var(--a11-amber, #ffc24a); }

.a11-funnel { display: grid; gap: var(--sp-3); padding: 0; list-style: none; counter-reset: funnel; }
.a11-funnel li {
  display: grid;
  gap: var(--sp-2);
  margin-inline: calc(var(--funnel-level, 0) * 2%);
  padding: var(--sp-4);
  border: 1px solid var(--a11-border, #faf4f829);
  border-left: 5px solid var(--a11-rose, #ff5c8a);
  border-radius: var(--r-md);
  background: var(--bg-1, #211a28);
}
.a11-funnel li:nth-child(2) { margin-inline: 3%; }
.a11-funnel li:nth-child(3) { margin-inline: 6%; }
.a11-funnel li:nth-child(4) { margin-inline: 9%; border-left-color: var(--a11-amber, #ffc24a); }
.a11-funnel li span { color: var(--ink-90, #ecdde6); }
.a11-funnel li small { color: var(--a11-amber, #ffc24a); }
.a11-funnel__aside {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 2px dashed var(--a11-amber, #ffc24a);
  border-radius: var(--r-md);
  background: var(--kw-amber-dim, #ffc24a1f);
}

.a11-dual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.a11-dual article {
  padding: var(--sp-5);
  border: 1px solid var(--a11-green, #37d6a0);
  border-radius: var(--r-lg);
  background: var(--kw-green-dim, #37d6a01f);
}
.a11-dual span { color: var(--a11-green, #37d6a0); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; }
.a11-dual h3 { margin: var(--sp-2) 0; color: var(--a11-ink, #faf4f8); }
.a11-dual p { margin: 0; text-indent: 0; }
.a11-dont {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 2px solid var(--a11-red, #ff5b70);
  border-radius: var(--r-lg);
  background: var(--kw-red-dim, #ff5b701f);
}
.a11-dont h3 { color: var(--a11-red, #ff5b70); }
.a11-dont li::marker { color: var(--a11-red, #ff5b70); }

.a11-review { border-style: dashed; }
.a11-mnemonic { border-left: 4px solid var(--a11-amber, #ffc24a); }
.a11-data { border-left: 4px solid var(--a11-rose, #ff5c8a); }
.a11-advanced { border-left: 4px solid var(--a11-amber, #ffc24a); }
.a11-practice { border-left: 4px solid var(--a11-green, #37d6a0); }
.a11-quote {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  border-left: 4px solid var(--a11-amber, #ffc24a);
  background: var(--kw-amber-dim, #ffc24a1f);
  color: var(--a11-ink, #faf4f8);
}

.real[data-a11-zoomable].is-expanded {
  position: fixed;
  inset: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  z-index: 1000;
  overflow: auto;
  margin: 0;
  padding: var(--sp-4);
  background: var(--bg-0, #171219);
}
.real[data-a11-zoomable].is-expanded .real__frame { max-width: 920px; margin-inline: auto; }

@media (max-width: 820px) {
  .a11-objective { grid-template-columns: 1fr; }
  .a11-timeline { grid-template-columns: 1fr; }
  .a11-timeline__break { writing-mode: horizontal-tb; border-inline: 0; border-block: 2px dashed var(--a11-amber, #ffc24a); }
  .a11-sequence, .a11-branches, .a11-flow__split, .a11-dual, .a11-realpair { grid-template-columns: 1fr; }
  .a11-funnel li { margin-inline: 0 !important; }
  .a11-funnel__aside { flex-direction: column; }
  .a11-hero .fig__frame { min-height: 0; }
}

@media (max-width: 760px) {
  .a11-table, .a11-table thead, .a11-table tbody, .a11-table tr, .a11-table th, .a11-table td { display: block; width: auto; }
  .a11-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .a11-table tr { margin-bottom: var(--sp-3); border: 1px solid var(--a11-border, #faf4f829); border-radius: var(--r-md); overflow: hidden; }
  .a11-table th, .a11-table td { border: 0; border-bottom: 1px solid var(--border-soft, #faf4f814); }
  .a11-table td::before { content: attr(data-lbl); display: block; margin-bottom: var(--sp-1); color: var(--a11-rose, #ff5c8a); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; }
}

@media (prefers-reduced-motion: reduce) {
  .a11-inline-svg [role="button"] { transition: none; }
}