.demo-access-brand { display: none; }
.is-public-demo .access-view { padding: var(--atende-space-6); background: var(--atende-color-background); }
.is-public-demo .access-card { width: min(32rem, 100%); padding: var(--atende-space-8); text-align: left; border-color: var(--atende-color-border); border-radius: var(--atende-radius-xl); box-shadow: var(--atende-shadow-md); }
.is-public-demo .access-card > .logo { display: none; }
.is-public-demo .demo-access-brand { display: flex; align-items: center; gap: var(--atende-space-3); margin-bottom: var(--atende-space-8); color: var(--atende-color-brand-strong); }
.is-public-demo .demo-access-brand img { flex: 0 0 auto; }
.is-public-demo .demo-access-brand span { display: grid; gap: var(--atende-space-1); }
.is-public-demo .demo-access-brand strong { font-size: 1.125rem; line-height: 1.2; }
.is-public-demo .demo-access-brand small { font-size: .75rem; }
.is-public-demo .access-card .eyebrow { margin: 0 0 var(--atende-space-3); color: var(--atende-color-brand); }
.is-public-demo .access-card h1 { margin: 0 0 var(--atende-space-4); font-size: 1.75rem; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
/* The heading receives programmatic focus for announcement, not keyboard interaction. */
.is-public-demo .access-card h1:focus { outline: none; box-shadow: none; }
.is-public-demo .access-card #access-message { margin: 0; line-height: 1.6; color: var(--atende-color-muted-strong); }
.is-public-demo .access-card #retry-access { width: 100%; min-height: var(--atende-control-height); margin-top: var(--atende-space-6); }
.is-public-demo .access-card .btn { font-family: inherit; font-weight: 650; }
.is-public-demo .establishment-demo-access-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--atende-space-3); margin-top: var(--atende-space-4); }
.is-public-demo .establishment-demo-access-actions > a { display: grid; place-items: center; min-height: var(--atende-control-height); text-align: center; }
.is-public-demo .establishment-demo-access-actions > a:first-child { grid-column: 1 / -1; }
.is-public-demo [data-demo-access-state="unavailable"] .establishment-demo-access-actions > a:first-child { background: var(--atende-color-surface); color: var(--atende-color-brand); border-color: var(--atende-color-border-strong); }
.is-public-demo .establishment-demo-access-actions > a:not(:first-child) { border-color: transparent; color: var(--atende-color-brand); background: transparent; text-decoration: underline; text-underline-offset: .2em; }
.is-public-demo .access-card :is(a,button):focus-visible { outline: 3px solid var(--atende-focus-ring); outline-offset: 2px; }
@media (max-width: 35rem) {
  .is-public-demo .access-view { min-height: 100dvh; padding: var(--atende-space-4); overflow-y: auto; }
  .is-public-demo .access-card { padding: var(--atende-space-6); }
  .is-public-demo .access-card h1 { font-size: 1.5rem; }
  .is-public-demo .establishment-demo-access-actions { grid-template-columns: minmax(0, 1fr); }
}

.is-public-demo .establishment-demo-container { padding-block: var(--atende-space-6) 0; }
.establishment-demo-container:has(> .establishment-demo-banner[hidden]) { display: none; }
.establishment-demo-banner {
  width: min(100%, var(--establishment-content-max));
  margin: 0 auto;
  padding: var(--atende-space-5);
  border: 1px solid var(--atende-color-border);
  border-radius: var(--atende-radius-card);
  background: var(--atende-color-brand-soft);
  color: var(--atende-color-text);
}
.establishment-demo-banner svg {
  flex: 0 0 auto;
  width: var(--atende-space-5);
  height: var(--atende-space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.demo-overview-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--atende-space-4);
}
.demo-overview-icon, .demo-role-icon {
  display: grid;
  place-items: center;
  width: var(--atende-space-12);
  height: var(--atende-space-12);
  border-radius: var(--atende-radius-md);
  color: var(--atende-color-brand-strong);
  background: var(--atende-color-surface);
}
.demo-overview-icon svg { width: var(--atende-space-6); height: var(--atende-space-6); }
#demo-panel-toggle { display: none; }
.demo-overview-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: var(--atende-space-1) var(--atende-space-3);
}
#demo-status-title { font-size: 1.5rem; line-height: 1.25; font-weight: 750; }
.demo-fiction-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--atende-space-1);
  padding: var(--atende-space-1) var(--atende-space-2);
  border: 1px solid var(--atende-color-border);
  border-radius: var(--atende-radius-sm);
  color: var(--atende-color-brand-strong);
  background: var(--atende-color-surface);
  font-size: .75rem;
  line-height: 1.5;
  white-space: nowrap;
}
.demo-fiction-badge svg { width: var(--atende-space-4); height: var(--atende-space-4); }
.demo-overview-copy > p {
  flex: 1 0 100%;
  margin: 0;
  color: var(--atende-color-muted-strong);
  font-size: .875rem;
  line-height: 1.5;
}
.establishment-demo-clock {
  display: inline-flex;
  align-items: center;
  gap: var(--atende-space-2);
  padding: var(--atende-space-2) var(--atende-space-3);
  border: 1px solid var(--atende-color-border);
  border-radius: var(--atende-radius-sm);
  color: var(--atende-color-brand-strong);
  background: var(--atende-color-surface);
  font-size: .875rem;
  white-space: nowrap;
}
.establishment-demo-clock strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.demo-primary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--atende-space-3) var(--atende-space-4);
  margin-top: var(--atende-space-4);
}
#demo-whatsapp-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--atende-space-2);
  min-height: var(--atende-control-height);
  padding-inline: var(--atende-space-5);
  white-space: normal;
}
#demo-binding-status {
  margin: var(--atende-space-2) 0 0;
  color: var(--atende-color-muted-strong);
  font-size: .875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.establishment-demo-feedback, #demo-copy-feedback {
  margin: var(--atende-space-2) 0 0;
  color: var(--atende-color-text-soft);
  font-size: .875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.establishment-demo-banner .alert { margin: 0 0 var(--atende-space-3); }
.establishment-demo-information {
  margin-top: var(--atende-space-3);
  border-top: 1px solid var(--atende-color-border);
}
.demo-information-toggle {
  min-height: var(--atende-control-height);
  align-content: center;
  padding-block: var(--atende-space-2);
  color: var(--atende-color-brand-strong);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
}
.demo-information-toggle::marker { color: var(--atende-color-brand); }
.demo-information-toggle:hover { color: var(--atende-color-brand); }
.demo-information-toggle small { margin-left: var(--atende-space-2); color: var(--atende-color-muted-strong); font-size: .75rem; font-weight: 400; }
.demo-information-body { display: grid; gap: var(--atende-space-4); padding-top: var(--atende-space-2); }
.demo-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--atende-space-3); }
.demo-role-card {
  display: flex;
  align-items: center;
  gap: var(--atende-space-3);
  min-width: 0;
  padding: var(--atende-space-4);
  border: 1px solid var(--atende-color-border);
  border-radius: var(--atende-radius-md);
  background: var(--atende-color-surface);
}
.demo-role-card:last-child { background: var(--atende-color-info-soft); }
.demo-role-icon { flex: 0 0 auto; background: var(--atende-color-brand-soft); }
.demo-role-card:last-child .demo-role-icon { color: var(--atende-color-info); background: var(--atende-color-surface); }
.demo-role-card h3 { margin: 0; color: var(--atende-color-text); font-size: 1rem; font-weight: 700; line-height: 1.4; }
.demo-role-card p { margin: var(--atende-space-1) 0 0; color: var(--atende-color-muted-strong); font-size: .875rem; line-height: 1.5; }
.demo-quick-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--atende-space-4);
  margin: 0;
  padding: var(--atende-space-4);
  border-radius: var(--atende-radius-md);
  background: var(--atende-color-surface);
  list-style: none;
}
.demo-quick-steps > li { display: flex; align-items: flex-start; gap: var(--atende-space-3); min-width: 0; }
.demo-step-number {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--atende-space-10);
  height: var(--atende-space-10);
  border-radius: 50%;
  color: var(--atende-color-brand-strong);
  background: var(--atende-color-brand-soft);
  font-weight: 750;
}
.demo-quick-steps strong { display: block; font-size: .875rem; line-height: 1.5; }
.demo-quick-steps p { margin: var(--atende-space-1) 0 0; color: var(--atende-color-muted-strong); font-size: .8125rem; line-height: 1.5; }
.demo-message-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--atende-space-3); }
.demo-suggestion-title { margin: 0; color: var(--atende-color-text-soft); font-size: .875rem; font-weight: 600; }
.demo-suggestion-actions { display: flex; flex-wrap: wrap; gap: var(--atende-space-2); min-width: 0; }
.demo-copy-suggestion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--atende-space-2);
  min-height: var(--atende-control-height);
  padding: var(--atende-space-2) var(--atende-space-3);
  border: 1px solid var(--atende-color-border-strong);
  border-radius: var(--atende-radius-sm);
  color: var(--atende-color-brand-strong);
  background: var(--atende-color-surface);
  font-size: .875rem;
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
}
.demo-copy-suggestion > span { user-select: text; }
.demo-copy-suggestion:hover:not(:disabled) { border-color: var(--atende-color-brand); background: var(--atende-color-brand-soft); }
.demo-copy-suggestion:disabled { opacity: .65; cursor: not-allowed; }
.demo-information-footer {
  display: flex;
  align-items: center;
  gap: var(--atende-space-2);
  padding: var(--atende-space-2) var(--atende-space-3);
  border: 1px solid var(--atende-color-border);
  border-radius: var(--atende-radius-sm);
  background: var(--atende-color-surface);
}
.demo-information-footer > svg { color: var(--atende-color-brand); }
.establishment-demo-contact { min-width: 0; margin: 0; color: var(--atende-color-muted-strong); font-size: .8125rem; line-height: 1.5; }
.establishment-demo-contact a { display: inline-flex; align-items: center; max-width: 100%; min-height: var(--atende-control-height); color: var(--atende-color-brand-strong); overflow-wrap: anywhere; }
.establishment-demo-access-actions { display: flex; flex-wrap: wrap; gap: var(--atende-space-3); margin-top: var(--atende-space-4); }
.establishment-demo-banner :is(button, a, summary):focus-visible { outline: 3px solid var(--atende-focus-ring); outline-offset: 2px; border-radius: var(--atende-radius-sm); }
.establishment-demo-banner[hidden], .establishment-demo-banner [hidden], .establishment-demo-access-actions[hidden] { display: none !important; }
@media (max-width: 900px) {
  .is-public-demo .main.establishment-shell-main:has(> .establishment-demo-container > .establishment-demo-banner:not([hidden])) {
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .is-public-demo .main:has(> #content > .more-page) .establishment-demo-banner {
    min-height: 0;
    max-height: min(45dvh, 24rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-bottom: var(--atende-space-3);
  }
  .is-public-demo .establishment-demo-container { padding-block: var(--atende-space-3) 0; }
  .establishment-demo-banner { padding: var(--atende-space-4); }
  .demo-overview-header { gap: var(--atende-space-3); }
  #demo-status-title { font-size: 1.25rem; }
  .demo-clock-label { display: none; }
}
@media (max-width: 767px) {
  .demo-primary-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  #demo-whatsapp-action { width: 100%; white-space: nowrap; }
  .demo-role-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-quick-steps { grid-template-columns: minmax(0, 1fr); gap: var(--atende-space-3); }
  .demo-suggestion-actions { width: 100%; }
  .demo-copy-suggestion { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .establishment-demo-access-actions > a { flex: 1 1 100%; }
}
@media (max-width: 42rem) {
  .is-public-demo .establishment-demo-container { display: contents; }
  .is-public-demo .establishment-demo-banner {
    width: min(calc(100% - var(--atende-space-3) * 2), var(--establishment-content-max));
    margin: var(--atende-space-3) auto;
    min-height: 0;
    max-height: min(45dvh, 24rem);
    overflow-y: auto;
    padding: var(--atende-space-3);
  }
  .demo-overview-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--atende-space-1) var(--atende-space-2); }
  .demo-overview-copy { display: contents; }
  .demo-overview-icon { display: none; }
  #demo-panel-toggle {
    display: grid;
    grid-column: 1;
    grid-row: 1 / 3;
    place-items: center;
    width: var(--establishment-mobile-touch);
    min-width: var(--establishment-mobile-touch);
    height: var(--establishment-mobile-touch);
    padding: 0;
    border: 1px solid var(--atende-color-border);
    border-radius: var(--atende-radius-sm);
    color: var(--atende-color-brand-strong);
    background: var(--atende-color-surface);
    cursor: pointer;
  }
  #demo-panel-toggle:hover { border-color: var(--atende-color-brand); background: var(--atende-color-brand-soft); }
  #demo-panel-toggle:focus-visible { outline: 3px solid var(--atende-focus-ring); outline-offset: 2px; }
  #demo-panel-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .establishment-demo-banner[data-demo-collapsed="true"] #demo-overview-content,
  .establishment-demo-banner[data-demo-collapsed="true"] .demo-overview-copy > p { display: none; }
  #demo-status-title { grid-column: 2; font-size: 1rem; }
  .demo-fiction-badge { grid-column: 2; justify-self: start; font-size: .6875rem; padding-block: 0; }
  .demo-overview-copy > p { grid-column: 1 / -1; margin-top: var(--atende-space-1); font-size: .8125rem; }
  .establishment-demo-clock { grid-column: 3; grid-row: 1 / 3; gap: var(--atende-space-1); padding: var(--atende-space-2); }
  .establishment-demo-clock strong { font-size: 1rem; }
  .establishment-demo-clock svg { width: var(--atende-space-4); height: var(--atende-space-4); }
  .demo-primary-actions { gap: var(--atende-space-2); margin-top: var(--atende-space-3); }
  .demo-role-card { padding: var(--atende-space-3); }
  .demo-role-icon { width: var(--atende-space-10); height: var(--atende-space-10); }
  .demo-role-card h3 { font-size: .875rem; }
  .demo-role-card p { font-size: .8125rem; }
  .demo-information-body { gap: var(--atende-space-3); }
  .demo-information-toggle small { display: none; }
  .is-public-demo .establishment-demo-banner :is(button, a, summary) { min-height: var(--establishment-mobile-touch); }
}
.is-public-demo .establishment-setup-status-copy .badge {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}