.portal:has(.evolucao) .faixa-estreita { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.portal:has(.evolucao) .portal-page-heading { margin-bottom: var(--space-8); padding-bottom: var(--space-8); }
.portal:has(.evolucao) .portal-page-heading h1 { font-size: var(--type-h1); letter-spacing: var(--tracking-heading); }
.evolucao { margin-block: 0 32px; letter-spacing: 0; }
.portal .evolucao :is(h2,h3) { letter-spacing: var(--tracking-heading); }
.evolucao-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 8px 20px; }
.portal .evolucao h2 { margin: 4px 0 0; font-size: var(--type-h2); }
.evolucao-status { color:var(--color-success); font-weight:600; font-size:14px; }
.evolucao-status::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--color-success); margin-right:8px; }
.evolucao-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; padding-bottom: 24px; }
.evolucao-filters label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto-calmo); flex: 1 1 160px; max-width: 260px; }
.evolucao-filters select { width: 100%; height: 44px; padding: 8px 32px 8px 12px; border: 1px solid var(--linha-forte); border-radius: 4px; background-color: var(--campo); color: var(--texto); }
.evolucao-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.evolucao-player { margin: 0; min-width: 0; }
.evolucao-player video { display:block; width:100%; height:auto; background:var(--color-secondary-soft); border:1px solid var(--color-border); border-radius:var(--radius-md); image-rendering:pixelated; }
.evolucao-player[data-sharp] > video { display:none; }
.evolucao-intro { max-width:72ch; margin:0 0 var(--space-4); color:var(--color-text-muted); font-size:var(--type-small); }
.evolucao-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); font-size:var(--type-small); color:var(--color-text-muted); }
.evolucao-quality { font-weight:600; color:var(--color-primary); }
.evolucao-tools label { display:flex; align-items:center; gap:var(--space-2); font-weight:600; }
.evolucao-tools select { min-height:44px; padding:6px 24px 6px 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); color:var(--color-primary); background:var(--color-surface); font:inherit; }
.evolucao-views { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
.evolucao-view { min-width:0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:linear-gradient(125deg,var(--color-secondary-soft),var(--color-surface)); box-shadow:var(--shadow-sm); }
.evolucao-view header { padding:var(--space-4); border-bottom:1px solid var(--color-border); }
.portal .evolucao-view h3 { margin:var(--space-2) 0; font-size:22px; }
.evolucao-view header p { min-height:42px; margin:0; font-size:var(--type-small); color:var(--color-text-muted); line-height:1.5; }
.evolucao-stage { box-sizing:border-box; height:344px; padding:12px; overflow:auto; background:#edf3f6; scrollbar-color:var(--color-primary) var(--color-secondary); }
.evolucao-stage canvas { display:block; width:var(--visual-size,320px); height:var(--visual-size,320px); max-width:none; margin-inline:auto; margin-block:max(0px,calc((320px - var(--visual-size,320px))/2)); image-rendering:pixelated; }
.evolucao-view-foot,.evolucao-map-legend { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; min-height:56px; margin:0; padding:var(--space-3) var(--space-4); border-top:1px solid var(--color-border); font-size:var(--type-caption); color:var(--color-text-muted); line-height:1.5; }
.evolucao-map-legend span { display:flex; align-items:center; gap:6px; }.evolucao-map-legend i { width:8px; height:8px; background:var(--color-primary); border-radius:50%; }.evolucao-map-legend .preservado { background:#aeb9be; }
.evolucao-pixel-note { margin:var(--space-3) 0 0; max-width:90ch; font-size:var(--type-caption); line-height:1.6; color:var(--color-text-muted); }
.evolucao :is(button,select,a,.evolucao-stage,input):focus-visible { outline:3px solid var(--color-primary); outline-offset:3px; }
.evolucao-player figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 10px; font-size: 13px; color: var(--texto-calmo); }
.evolucao-controls { display: flex; gap: 8px; align-items: center; padding-block: 8px; border-bottom: 1px solid var(--linha); }
.evolucao-controls button { flex:0 0 44px; width:44px; height:44px; border:1px solid var(--linha); border-radius:var(--radius-sm); background:var(--color-surface); display:grid; place-items:center; cursor:pointer; padding:0; }
.evolucao-controls button:hover { background:var(--color-secondary-soft); }
.evolucao-controls input { min-width:0; width:100%; flex:1; accent-color:var(--color-text); padding:0; }
.evolucao-controls span { font-variant-numeric: tabular-nums; font-size: 13px; min-width: 48px; }
.evolucao-player:fullscreen { background:var(--color-bg); display:flex; flex-direction:column; padding:24px; overflow:auto; }
.evolucao-player:fullscreen video { min-height: 0; max-height: calc(100vh - 110px); object-fit: contain; border: 0; }
.evolucao-notes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:var(--space-6); padding:var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.portal .evolucao-notes h3 { font-size: 20px; margin: 8px 0 12px; }
.evolucao-notes p,.evolucao-notes li { font-size: 15px; }
.evolucao-notes ul { margin:0; padding-left:18px; }
.evolucao-notes li { padding-left: 2px; margin-bottom: 12px; }
.evolucao-notes .evolucao-date { font-size: 13px; color: var(--texto-calmo); }
.evolucao-footer { margin-top: 32px; border-top: 1px solid var(--linha); padding-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
.evolucao-footer p { margin: 0; }
.evolucao-error { color:var(--color-danger); font-size:14px; }
.evolucao-error button { color: inherit; text-decoration: underline; background: none; border: 0; cursor: pointer; font: inherit; }
.evolucao [hidden] { display: none !important; }
@media (max-width: 900px) {
  .evolucao-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .evolucao-views { grid-template-columns:minmax(0,1fr); }
  .evolucao-notes { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 480px) {
  .evolucao-heading { align-items: start; flex-direction: column; gap: 8px; }
  .evolucao-filters { gap: 12px; }
  .evolucao-filters label { flex-basis: calc(50% - 6px); min-width: 0; max-width: none; }
  .evolucao-filters:has([data-visual-sex-field][hidden]) label:last-of-type { flex-basis: 100%; }
  .evolucao-tools { justify-content:flex-start; }.evolucao-tools>span:last-child { flex-basis:100%; }
  .evolucao-notes { padding:var(--space-4); }
}
@media (max-width: 360px) {
  .evolucao-filters label { flex-basis: 100%; }
  .portal:has(.evolucao) .portal-page-heading h1 { font-size: 28px; }
}


/* Native previews fit the available width and enlarge the document vertically. */
.evolucao .evolucao-views{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--visual-size,320px) + 24px)),1fr))}
.evolucao .evolucao-stage{
  display:grid;place-items:center;min-height:344px;height:auto;overflow:visible}
.evolucao .evolucao-stage canvas{max-width:100%;height:auto}