.rotas-demo {
  --demo-ink: #201728;
  --demo-purple: #47215e;
  --demo-muted: #665d6d;
  --demo-line: #e5dfe7;
  --demo-paper: #f8f5fa;
  --demo-lime: #dcea44;
  background: #fff;
  border: 1px solid var(--demo-line);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgb(49 27 61 / 9%), 0 2px 8px rgb(49 27 61 / 5%);
  color: var(--demo-ink);
  text-align: left;
}

.rotas-demo *, .rotas-demo *::before, .rotas-demo *::after { box-sizing: border-box; }
.rotas-demo [hidden] { display: none !important; }
.rotas-demo button { font: inherit; cursor: pointer; }
.rotas-demo :focus-visible { outline: 2px solid #7448a1; outline-offset: 4px; }
.rotas-demo h3, .rotas-demo h4, .rotas-demo p, .rotas-demo dl, .rotas-demo dd { margin: 0; }

.rotas-demo__bar {
  align-items: center;
  border-bottom: 1px solid var(--demo-line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 63px;
  padding: 12px clamp(16px, 3vw, 30px);
}

.rotas-demo__brand { align-items: center; display: flex; font-size: 0.875rem; font-weight: 800; gap: 9px; }
.rotas-demo__brand svg { flex: none; }

.rotas-demo__badge, .rotas-demo__context {
  background: var(--demo-paper);
  border: 1px solid var(--demo-line);
  border-radius: 999px;
  color: var(--demo-purple);
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
  padding: 6px 11px;
}

.rotas-demo__tabs {
  background: var(--demo-paper);
  border-bottom: 1px solid var(--demo-line);
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 7px clamp(12px, 3vw, 24px);
}

.rotas-demo__tabs button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--demo-muted);
  display: flex;
  font-size: 0.84rem;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-height: 42px;
  padding: 7px 5px;
}

.rotas-demo__tabs button span { font-family: ui-monospace, Consolas, monospace; font-size: 0.68rem; opacity: 0.84; }
.rotas-demo__tabs button:hover { background: #ede5f1; }
.rotas-demo__tabs button[aria-selected="true"] { background: #fff; border-color: #d6c4df; color: var(--demo-purple); box-shadow: 0 2px 4px rgb(49 27 61 / 5%); }
.rotas-demo__tabs button[aria-selected="true"] span { opacity: 1; }

.rotas-demo__panel { padding: clamp(16px, 3vw, 30px); }
.rotas-demo__panel + .rotas-demo__panel { border-top: 1px solid var(--demo-line); }
.rotas-demo__panel:focus-visible { outline-offset: -5px; }
.rotas-demo__heading { align-items: flex-end; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 18px; }

.rotas-demo__eyebrow {
  color: var(--demo-purple);
  display: block;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.4;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.rotas-demo h3 { color: var(--demo-ink); font-size: clamp(1.45rem, 2.8vw, 2.125rem); font-weight: 800; letter-spacing: -0.055em; line-height: 1.08; }
.rotas-demo h4 { color: var(--demo-ink); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.22; }
.rotas-demo p { color: var(--demo-muted); font-size: 0.8rem; line-height: 1.5; margin-top: 4px; }
.rotas-demo__context--active { background: #f0e8f6; border-color: #e4d4ef; }

.rotas-demo__grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }
.rotas-demo__metrics { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; }
.rotas-demo__metric { background: #f9f6fb; border: 1px solid var(--demo-line); border-radius: 12px; color: var(--demo-muted); padding: 12px; }
.rotas-demo__metric--accent { background: #f3f6cf; border-color: #e0e6a6; }
.rotas-demo__metric span, .rotas-demo__metric small { display: block; line-height: 1.25; }
.rotas-demo__metric span { font-size: 0.75rem; font-weight: 800; }
.rotas-demo__metric strong { color: var(--demo-ink); display: block; font-size: clamp(1.55rem, 3.5vw, 2.35rem); font-weight: 800; letter-spacing: -0.055em; line-height: 1.06; margin: 5px 0 1px; }
.rotas-demo__metric small { font-size: 0.68rem; }

.rotas-demo__record, .rotas-demo__side, .rotas-demo__case, .rotas-demo__collection { border: 1px solid var(--demo-line); border-radius: 12px; }
.rotas-demo__record { align-items: center; display: flex; gap: 10px; justify-content: space-between; min-height: 86px; padding: 12px 14px; }
.rotas-demo__record > div:first-child { min-width: 0; }

.rotas-demo__action {
  align-items: center;
  background: var(--demo-purple);
  border: 1px solid var(--demo-purple);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  gap: 6px;
  justify-content: center;
  line-height: 1.2 !important;
  min-height: 44px;
  padding: 7px 11px;
  text-align: center;
  white-space: nowrap;
}

.rotas-demo__action:hover { background: #60317b; }
.rotas-demo__side { align-self: stretch; background: #f8f4fa; padding: 15px; }
.rotas-demo__status { align-items: center; border-top: 1px solid var(--demo-line); color: var(--demo-purple); display: flex; font-size: 0.73rem; font-weight: 800; gap: 7px; margin-top: 13px; padding-top: 12px; }
.rotas-demo__status i, .rotas-demo__timeline i { background: var(--demo-lime); border: 1px solid #8f9a25; border-radius: 50%; flex: 0 0 8px; height: 8px; }

.rotas-demo__collection-head, .rotas-demo__collection-foot {
  align-items: center;
  color: var(--demo-muted);
  display: flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 8px;
  justify-content: space-between;
  padding: 10px 14px;
}

.rotas-demo__collection-head { background: var(--demo-paper); border-bottom: 1px solid var(--demo-line); border-radius: 11px 11px 0 0; }
.rotas-demo__collection .rotas-demo__record { border: 0; border-radius: 0; }
.rotas-demo__collection-foot { border-top: 1px solid var(--demo-line); }
.rotas-demo__date { text-align: right; white-space: nowrap; }
.rotas-demo__date strong, .rotas-demo__date small { display: block; }
.rotas-demo__date strong { color: var(--demo-purple); font-size: 1.02rem; }
.rotas-demo__date small { color: var(--demo-muted); font-size: 0.7rem; }

.rotas-demo__case { padding: 15px; }
.rotas-demo__dates { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px !important; }
.rotas-demo__dates div { background: #f7f2fa; border: 1px solid var(--demo-line); border-radius: 9px; padding: 10px; }
.rotas-demo__dates div:first-child { background: #f3f6cf; border-color: #e0e6a6; }
.rotas-demo__dates dt { color: var(--demo-muted); font-size: 0.71rem; font-weight: 800; }
.rotas-demo__dates dd { color: var(--demo-ink); font-size: clamp(1.1rem, 2.4vw, 1.55rem); font-weight: 800; letter-spacing: -0.04em; }

.rotas-demo__timeline { list-style: none; margin: 10px 0 0; padding: 0; }
.rotas-demo__timeline li { align-items: flex-start; border-top: 1px solid var(--demo-line); display: flex; gap: 7px; padding: 7px 0 0; }
.rotas-demo__timeline li + li { margin-top: 6px; }
.rotas-demo__timeline i { margin-top: 4px; }
.rotas-demo__timeline strong, .rotas-demo__timeline small { display: block; line-height: 1.3; }
.rotas-demo__timeline strong { color: var(--demo-purple); font-size: 0.72rem; }
.rotas-demo__timeline small { color: var(--demo-muted); font-size: 0.68rem; margin-top: 1px; }

@media (max-width: 690px) {
  .rotas-demo { border-radius: 18px; }
  .rotas-demo__grid { grid-template-columns: minmax(0, 1fr); }
  .rotas-demo__heading { align-items: flex-start; flex-direction: column; margin-bottom: 14px; }
  .rotas-demo__side { padding: 12px; }
}

@media (max-width: 420px) {
  .rotas-demo__bar { align-items: flex-start; flex-direction: column; gap: 6px; }
  .rotas-demo__brand svg { height: 25px; width: 25px; }
  .rotas-demo__tabs button { gap: 4px; }
  .rotas-demo__record { align-items: flex-start; }
  #rotas-panel-home .rotas-demo__record { flex-direction: column; }
  .rotas-demo__metric { padding: 8px; }
  .rotas-demo__metrics { gap: 5px; }
}