/* ========================================================= */
/* Modo Escuro */
/* ========================================================= */

.app-breadcrumb,
.breadcrumb,
.page-breadcrumb,
.subheader {
    background-color: transparent !important;
}

.subheader-title {
    color: var(--bs-body-color, inherit) !important;
}

nav.bg-body[aria-label="breadcrumb"],
div[data-controller="menu-hub"] > .bg-body.border-bottom {
    background-color: transparent !important;
}

div[data-controller="menu-hub"] h1,
div[data-controller="menu-hub"] .text-dark {
    color: var(--bs-body-color, inherit) !important;
}

/* ========================================================= */
/* Sidebar Recolhida - Quadrados e Expansão Total NATIVA     */
/* ========================================================= */

.set-nav-minified #js-primary-nav:not(:hover) .nav-link-text,
.nav-function-minify #js-primary-nav:not(:hover) .nav-link-text {
    display: none !important;
}

.set-nav-minified #js-primary-nav:not(:hover) .nav-icon,
.nav-function-minify #js-primary-nav:not(:hover) .nav-icon,
.set-nav-minified #js-primary-nav:not(:hover) .nav-icon > *,
.nav-function-minify #js-primary-nav:not(:hover) .nav-icon > * {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.set-nav-minified #js-primary-nav:not(:hover) li,
.nav-function-minify #js-primary-nav:not(:hover) li {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.set-nav-minified #js-primary-nav:not(:hover) .nav-link,
.nav-function-minify #js-primary-nav:not(:hover) .nav-link {
    padding: 0 !important;
    gap: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    margin: 4px 0 4px -18px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px !important;
    position: static !important;
}

.is-required {
  border-left: 3px solid #dc3545;
}

/* Mantém as ações dos componentes compartilhados no rodapé, sem sobreposição. */
.ui-show-table__actions--footer {
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

.ui-show-table__actions-group {
  align-items: center;
  flex-wrap: wrap;
}

.ui-show-table__actions-group--start {
  flex: 1 1 36rem;
  margin-left: 0;
}

.ui-show-table__actions-group--end {
  flex: 0 0 auto;
  margin-left: auto;
}

.ui-show-table__actions-group form {
  margin: 0;
}

.ui-show-table__actions-group .btn,
.ui-form-table__actions .btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 160px;
}

.person-record-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.person-record-actions .btn {
  gap: .5rem;
  min-height: 42px;
  min-width: 0;
  padding: .6rem .9rem;
  white-space: nowrap;
}

.person-record-actions .btn i {
  font-size: .9em;
  opacity: .8;
}

@media (max-width: 991.98px) {
  .ui-show-table__actions-group,
  .ui-show-table__actions-group form,
  .ui-show-table__actions-group .btn,
  .ui-form-table__actions-group,
  .ui-form-table__actions-group form,
  .ui-form-table__actions .btn {
    width: 100%;
  }

  .person-record-actions {
    width: 100%;
  }
}

/* Dashboard operacional de acessos */
.access-dashboard {
  --access-panel: var(--bs-body-bg, #fff);
  --access-border: var(--bs-border-color, #e0e5eb);
  --access-muted: var(--bs-secondary-color, #6c7786);
  --access-primary: #397ff0;
  --access-success: #20b99a;
  --access-danger: #ef5b6c;
  --access-warning: #e79b22;
}

.access-dashboard__header,
.access-dashboard__panel-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.access-dashboard__header {
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.access-dashboard__filter {
  align-items: end;
  background: var(--access-panel);
  border: 1px solid var(--access-border);
  border-radius: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
}

.access-dashboard__filter-form {
  align-items: end;
  display: flex;
  gap: .75rem;
}

.access-dashboard__filter-field {
  min-width: 155px;
}

.access-dashboard__filter-field .form-label {
  color: var(--access-muted);
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: .3rem;
  text-transform: uppercase;
}

.access-dashboard__shortcuts {
  align-items: center;
  background: var(--bs-tertiary-bg, #f4f6f8);
  border-radius: .7rem;
  display: flex;
  gap: .25rem;
  padding: .25rem;
}

.access-dashboard__shortcuts a {
  border-radius: .5rem;
  color: var(--access-muted);
  font-size: .78rem;
  font-weight: 600;
  padding: .5rem .7rem;
  text-decoration: none;
  white-space: nowrap;
}

.access-dashboard__shortcuts a:hover,
.access-dashboard__shortcuts a.active {
  background: var(--access-panel);
  box-shadow: 0 2px 8px rgba(27, 39, 51, .08);
  color: var(--access-primary);
}

.access-dashboard__header h1 {
  font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  margin: 0 0 .35rem;
}

.access-dashboard__header p,
.access-dashboard__panel-heading p {
  color: var(--access-muted);
  margin: 0;
}

.access-dashboard__eyebrow {
  color: var(--access-primary) !important;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.access-dashboard__layout {
  align-items: start;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr);
}

.access-dashboard__main,
.access-dashboard__charts {
  display: grid;
  gap: 1.5rem;
}

.access-dashboard__charts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.access-dashboard__panel {
  background: var(--access-panel);
  border: 1px solid var(--access-border);
  border-radius: 1rem;
  box-shadow: 0 7px 24px rgba(27, 39, 51, .05);
  padding: 1.5rem;
}

.access-dashboard__panel-heading {
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.access-dashboard__panel-heading h2 {
  font-size: 1.2rem;
  margin: 0 0 .2rem;
}

.access-dashboard__date {
  background: var(--bs-tertiary-bg, #f4f6f8);
  border-radius: 999px;
  color: var(--access-muted);
  font-size: .78rem;
  padding: .45rem .8rem;
  white-space: nowrap;
}

.access-dashboard__metrics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.access-metric {
  --metric-color: var(--access-primary);
  --metric-bg: color-mix(in srgb, var(--metric-color) 11%, var(--access-panel));
  background: var(--metric-bg);
  border: 1px solid color-mix(in srgb, var(--metric-color) 18%, transparent);
  border-radius: .85rem;
  color: inherit;
  min-height: 145px;
  padding: 1.1rem;
  position: relative;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.access-metric:hover {
  box-shadow: 0 9px 22px color-mix(in srgb, var(--metric-color) 16%, transparent);
  color: inherit;
  transform: translateY(-2px);
}

.access-metric--success { --metric-color: var(--access-success); }
.access-metric--danger { --metric-color: var(--access-danger); }
.access-metric--warning { --metric-color: var(--access-warning); }

.access-metric__icon {
  align-items: center;
  background: color-mix(in srgb, var(--metric-color) 17%, transparent);
  border-radius: 50%;
  color: var(--metric-color);
  display: flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.access-metric__icon svg,
.access-timeline__avatar svg {
  fill: none;
  height: 23px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 23px;
}

.access-metric strong {
  color: var(--metric-color);
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  margin: .9rem 0 .4rem;
}

.access-metric > span:last-child {
  color: var(--access-muted);
  font-size: .82rem;
  font-weight: 600;
}

.access-chart-panel {
  min-width: 0;
}

.access-dashboard__panel-link {
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
}

.access-timeline {
  max-height: 780px;
  overflow: hidden;
  padding-right: .75rem;
}

.access-timeline__list {
  list-style: none;
  margin: 0;
  max-height: 690px;
  overflow-y: auto;
  padding: 0 .5rem 0 0;
}

.access-timeline__item {
  --result-color: var(--access-primary);
  align-items: center;
  display: grid;
  grid-template-columns: 48px 20px minmax(0, 1fr);
  min-height: 82px;
  position: relative;
}

.access-timeline__item--permitido { --result-color: var(--access-success); }
.access-timeline__item--negado { --result-color: var(--access-danger); }
.access-timeline__item--erro { --result-color: var(--access-warning); }

.access-timeline__item time {
  color: var(--access-muted);
  display: flex;
  flex-direction: column;
  font-size: .7rem;
  text-align: right;
}

.access-timeline__item time strong {
  color: var(--bs-body-color);
  font-size: .82rem;
}

.access-timeline__marker {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
}

.access-timeline__marker::before {
  background: var(--access-border);
  content: "";
  height: 100%;
  left: calc(50% - 1px);
  position: absolute;
  top: 0;
  width: 2px;
}

.access-timeline__marker::after {
  background: var(--access-panel);
  border: 3px solid var(--result-color);
  border-radius: 50%;
  content: "";
  height: 13px;
  position: relative;
  width: 13px;
}

.access-timeline__content {
  align-items: center;
  border-radius: .7rem;
  color: inherit;
  display: flex;
  gap: .75rem;
  min-width: 0;
  padding: .55rem;
  text-decoration: none;
}

.access-timeline__content:hover {
  background: var(--bs-tertiary-bg, #f5f7f9);
  color: inherit;
}

.access-timeline__avatar {
  align-items: center;
  background: var(--bs-tertiary-bg, #eef1f4);
  border: 2px solid color-mix(in srgb, var(--result-color) 55%, transparent);
  border-radius: 50%;
  color: var(--access-muted);
  display: flex;
  flex: 0 0 48px;
  height: 48px;
  justify-content: center;
  overflow: hidden;
  width: 48px;
}

.access-timeline__avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.access-timeline__details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.access-timeline__details strong,
.access-timeline__details span,
.access-timeline__details small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-timeline__details span,
.access-timeline__details small {
  color: var(--access-muted);
  font-size: .72rem;
}

.access-timeline__details small {
  color: var(--result-color);
}

.access-timeline__empty {
  align-items: center;
  color: var(--access-muted);
  display: flex;
  flex-direction: column;
  min-height: 330px;
  justify-content: center;
  text-align: center;
}

.access-timeline__empty > span {
  font-size: 3rem;
  margin-bottom: .75rem;
}

.access-timeline__empty p {
  margin: .25rem 0 0;
}

@media (max-width: 1199.98px) {
  .access-dashboard__layout { grid-template-columns: 1fr; }
  .access-timeline { max-height: none; }
  .access-timeline__list { max-height: 520px; }
}

@media (max-width: 767.98px) {
  .access-dashboard__header { align-items: flex-start; flex-direction: column; }
  .access-dashboard__header .btn { width: 100%; }
  .access-dashboard__filter { align-items: stretch; flex-direction: column; }
  .access-dashboard__filter-form { align-items: stretch; }
  .access-dashboard__filter-field { flex: 1; min-width: 0; }
  .access-dashboard__shortcuts { align-self: flex-start; }
  .access-dashboard__metrics,
  .access-dashboard__charts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575.98px) {
  .access-dashboard__filter-form { flex-direction: column; }
  .access-dashboard__metrics,
  .access-dashboard__charts { grid-template-columns: 1fr; }
  .access-dashboard__panel { padding: 1rem; }
  .access-dashboard__date { display: none; }
}

/* Consentimentos de responsáveis */
.guardian-consents-page {
  --consent-primary: var(--access-primary, #397ff0);
  --consent-success: var(--access-success, #20b99a);
  --consent-danger: var(--access-danger, #ef5b6c);
  --consent-warning: var(--access-warning, #e79b22);
  --consent-muted: var(--access-muted, #6c7786);
  --consent-border: var(--access-border, #e0e5eb);
  --consent-panel: var(--access-panel, #fff);
}

.guardian-consents-section {
  background: var(--consent-panel);
  border: 1px solid var(--consent-border);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(29, 45, 65, .06);
  overflow: hidden;
}

.guardian-consents-section__heading {
  align-items: center;
  background: color-mix(in srgb, var(--consent-primary) 4%, var(--consent-panel));
  border-bottom: 1px solid var(--consent-border);
  display: flex;
  justify-content: space-between;
  padding: 1.15rem 1.35rem;
}

.guardian-consents-section__heading h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
.guardian-consents-section__heading p { color: var(--consent-muted); font-size: .82rem; margin: 0; }
.guardian-consents-count {
  align-items: center;
  background: color-mix(in srgb, var(--consent-primary) 12%, transparent);
  border-radius: 999px;
  color: var(--consent-primary);
  display: flex;
  font-size: .78rem;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  min-width: 30px;
}

.guardian-consents-list { display: grid; gap: 1rem; padding: 1rem; }
.guardian-consent-card { border: 1px solid var(--consent-border); border-radius: .9rem; overflow: hidden; }
.guardian-consent-card__header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.1rem 1.2rem;
}

.guardian-consent-person { align-items: center; display: flex; gap: .8rem; min-width: 0; }
.guardian-consent-person__avatar {
  align-items: center;
  background: color-mix(in srgb, var(--consent-primary) 12%, var(--consent-panel));
  border: 1px solid color-mix(in srgb, var(--consent-primary) 24%, transparent);
  border-radius: 50%;
  color: var(--consent-primary);
  display: flex;
  flex: 0 0 46px;
  font-size: .78rem;
  font-weight: 800;
  height: 46px;
  justify-content: center;
}

.guardian-consent-card__eyebrow {
  color: var(--consent-muted);
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.guardian-consent-person h3 { font-size: 1rem; margin: .05rem 0; }
.guardian-consent-person p { color: var(--consent-muted); font-size: .8rem; margin: 0; }
.guardian-consent-status {
  --status-color: var(--consent-muted);
  align-items: center;
  background: color-mix(in srgb, var(--status-color) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-color) 24%, transparent);
  border-radius: 999px;
  color: var(--status-color);
  display: inline-flex;
  font-size: .72rem;
  font-weight: 800;
  gap: .4rem;
  padding: .38rem .65rem;
  white-space: nowrap;
}

.guardian-consent-status > span { background: currentColor; border-radius: 50%; height: 7px; width: 7px; }
.guardian-consent-status--success { --status-color: var(--consent-success); }
.guardian-consent-status--danger { --status-color: var(--consent-danger); }
.guardian-consent-status--warning { --status-color: var(--consent-warning); }
.guardian-consent-facts {
  background: var(--bs-tertiary-bg, #f7f8fa);
  border-block: 1px solid var(--consent-border);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guardian-consent-facts > div { border-right: 1px solid var(--consent-border); padding: .85rem 1rem; }
.guardian-consent-facts > div:last-child { border-right: 0; }
.guardian-consent-facts span { color: var(--consent-muted); display: block; font-size: .68rem; margin-bottom: .18rem; }
.guardian-consent-facts strong { display: block; font-size: .8rem; overflow-wrap: anywhere; }
.guardian-consent-card__body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
.guardian-consent-history { min-width: 0; padding: 1.2rem; }
.guardian-consent-subheading { align-items: end; display: flex; justify-content: space-between; margin-bottom: .75rem; }
.guardian-consent-subheading h4 { font-size: 1rem; margin: 0; }
.guardian-consent-subheading > span { color: var(--consent-muted); font-size: .72rem; }
.guardian-consent-timeline { list-style: none; margin: 0; padding: 0; }
.guardian-consent-timeline__item {
  --event-color: var(--consent-primary);
  align-items: stretch;
  display: grid;
  grid-template-columns: 82px 22px minmax(0, 1fr);
  min-height: 64px;
}

.guardian-consent-timeline__item--success { --event-color: var(--consent-success); }
.guardian-consent-timeline__item--danger { --event-color: var(--consent-danger); }
.guardian-consent-timeline__item--warning { --event-color: var(--consent-warning); }
.guardian-consent-timeline__item--info { --event-color: #6f6ee8; }
.guardian-consent-timeline__item--muted { --event-color: var(--consent-muted); }
.guardian-consent-timeline time {
  color: var(--consent-muted);
  display: flex;
  flex-direction: column;
  font-size: .67rem;
  padding-top: .55rem;
  text-align: right;
}

.guardian-consent-timeline time strong { color: var(--bs-body-color); font-size: .78rem; }
.guardian-consent-timeline__rail { display: block; position: relative; }
.guardian-consent-timeline__rail::before {
  background: var(--consent-border);
  content: "";
  height: 100%;
  left: calc(50% - 1px);
  position: absolute;
  width: 2px;
}

.guardian-consent-timeline__rail::after {
  background: var(--consent-panel);
  border: 3px solid var(--event-color);
  border-radius: 50%;
  content: "";
  height: 13px;
  left: calc(50% - 6.5px);
  position: absolute;
  top: .65rem;
  width: 13px;
}

.guardian-consent-timeline__item:first-child .guardian-consent-timeline__rail::before { top: .65rem; }
.guardian-consent-timeline__item:last-child .guardian-consent-timeline__rail::before { height: .75rem; }
.guardian-consent-timeline__content { padding: .45rem .4rem .8rem .65rem; }
.guardian-consent-timeline__content strong { display: block; font-size: .82rem; }
.guardian-consent-timeline__content span,
.guardian-consent-timeline__content small { color: var(--consent-muted); display: block; font-size: .72rem; }
.guardian-consent-action {
  background: color-mix(in srgb, var(--consent-primary) 3%, var(--consent-panel));
  border-left: 1px solid var(--consent-border);
  padding: 1.2rem;
}

.guardian-consent-action h4 { font-size: .95rem; margin: .2rem 0 .35rem; }
.guardian-consent-action > p { color: var(--consent-muted); font-size: .78rem; margin-bottom: 1rem; }
.guardian-responsibilities-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 1rem; }
.guardian-responsibility-card { border: 1px solid var(--consent-border); border-radius: .85rem; padding: 1rem; }
.guardian-responsibility-card__top { align-items: start; display: flex; justify-content: space-between; }
.guardian-responsibility-card h3 { font-size: .95rem; margin: .8rem 0 .15rem; }
.guardian-responsibility-card h3 a { text-decoration: none; }
.guardian-responsibility-card > p { color: var(--consent-muted); font-size: .78rem; margin-bottom: .8rem; }
.guardian-responsibility-card dl { border-top: 1px solid var(--consent-border); margin: 0; padding-top: .65rem; }
.guardian-responsibility-card dl > div { display: flex; font-size: .72rem; justify-content: space-between; }
.guardian-responsibility-card dt { color: var(--consent-muted); font-weight: 500; }
.guardian-responsibility-card dd { font-weight: 700; margin: 0; }
.guardian-consents-empty { align-items: center; color: var(--consent-muted); display: flex; gap: .8rem; padding: 1.5rem; }
.guardian-consents-empty > span {
  align-items: center;
  background: var(--bs-tertiary-bg, #f1f3f5);
  border-radius: 50%;
  display: flex;
  flex: 0 0 42px;
  height: 42px;
  justify-content: center;
}

.guardian-consents-empty strong { color: var(--bs-body-color); display: block; font-size: .85rem; }
.guardian-consents-empty p { font-size: .76rem; margin: .15rem 0 0; }

@media (max-width: 991.98px) {
  .guardian-consent-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guardian-consent-facts > div:nth-child(2) { border-right: 0; }
  .guardian-consent-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--consent-border); }
  .guardian-consent-card__body { grid-template-columns: 1fr; }
  .guardian-consent-action { border-left: 0; border-top: 1px solid var(--consent-border); }
  .guardian-responsibilities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .guardian-consent-card__header { align-items: flex-start; flex-direction: column; }
  .guardian-consent-facts { grid-template-columns: 1fr; }
  .guardian-consent-facts > div { border-bottom: 1px solid var(--consent-border); border-right: 0; }
  .guardian-consent-facts > div:last-child { border-bottom: 0; }
  .guardian-consent-timeline__item { grid-template-columns: 68px 20px minmax(0, 1fr); }
  .guardian-responsibilities-grid { grid-template-columns: 1fr; }
}

/* Controle visual da porta */
.door-control__panel {
  --door-state: var(--bs-secondary);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 1.25rem;
  box-shadow: 0 .75rem 2rem rgba(18, 38, 63, .08);
  display: grid;
  grid-template-columns: minmax(280px, 42%) minmax(280px, 1fr);
  min-height: 360px;
  overflow: hidden;
}

.door-control__panel.is-closed { --door-state: var(--bs-success); }
.door-control__panel.is-open { --door-state: #d98b18; }
.door-control__visual {
  align-items: center;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--door-state) 12%, transparent), transparent 58%),
    var(--bs-tertiary-bg);
  display: flex;
  justify-content: center;
  min-height: 360px;
  padding: 2rem;
}

.door-control__wall {
  align-items: end;
  border-bottom: 8px solid color-mix(in srgb, var(--bs-body-color) 18%, transparent);
  display: flex;
  height: 270px;
  justify-content: center;
  perspective: 900px;
  width: 230px;
}

.door-control__frame {
  background: color-mix(in srgb, var(--bs-body-color) 22%, var(--bs-body-bg));
  border-radius: .3rem .3rem 0 0;
  box-shadow: 0 .8rem 1.2rem rgba(0, 0, 0, .12);
  height: 250px;
  padding: 10px 10px 0;
  position: relative;
  width: 174px;
}

.door-control__inside {
  align-items: center;
  background: linear-gradient(135deg, #253445, #101820);
  color: rgba(255, 255, 255, .62);
  display: flex;
  inset: 10px 10px 0;
  justify-content: center;
  position: absolute;
}

.door-control__passage-icon { font-size: 2rem; }
.door-control__leaf {
  background: linear-gradient(100deg, #b87942, #8d542b 72%, #71401f);
  box-shadow: inset -8px 0 14px rgba(0, 0, 0, .16);
  height: 240px;
  left: 10px;
  position: absolute;
  top: 10px;
  transform: rotateY(0deg);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .55s ease, box-shadow .55s ease;
  width: 154px;
  z-index: 2;
}

.is-open .door-control__leaf {
  box-shadow: 14px 8px 18px rgba(0, 0, 0, .24);
  transform: rotateY(-68deg);
}

.door-control__inset {
  border: 2px solid rgba(70, 35, 13, .32);
  border-radius: .15rem;
  inset: 22px 20px 76px;
  position: absolute;
}

.door-control__handle {
  background: #d9b568;
  border: 2px solid #72551c;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  height: 14px;
  position: absolute;
  right: 14px;
  top: 53%;
  width: 14px;
}

.door-control__question {
  color: rgba(255, 255, 255, .7);
  font-size: 4rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -55%);
}

.is-unknown .door-control__leaf { filter: grayscale(1); opacity: .72; }
.door-control__content {
  align-self: center;
  padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
}

.door-control__status-dot {
  background: var(--door-state);
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--door-state) 15%, transparent);
  height: 10px;
  width: 10px;
}

.door-control__eyebrow {
  color: var(--bs-secondary-color);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.door-control__status { font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 750; letter-spacing: -.04em; }
.door-control__open-button { min-height: 54px; }
.door-control__open-message {
  background: color-mix(in srgb, var(--door-state) 10%, var(--bs-body-bg));
  border: 1px solid color-mix(in srgb, var(--door-state) 28%, transparent);
  border-radius: .6rem;
  color: var(--door-state);
  font-weight: 700;
  padding: .9rem 1rem;
  text-align: center;
}

.door-control__identifier {
  color: var(--bs-secondary-color);
  font-size: .7rem;
  margin-top: 1.25rem;
  text-align: center;
}

.door-control__activity {
  align-items: center;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .8rem;
  display: flex;
  gap: .9rem;
  padding: .85rem 1rem;
}

.door-control__activity > i { color: var(--bs-secondary-color); font-size: 1.2rem; }
.door-control__developer {
  border-top: 1px dashed var(--bs-border-color);
  color: var(--bs-secondary-color);
  padding-top: 1rem;
}

.door-control__developer summary { cursor: pointer; font-size: .8rem; font-weight: 600; width: fit-content; }

@media (max-width: 767.98px) {
  .door-control__panel { grid-template-columns: 1fr; }
  .door-control__visual { min-height: 280px; }
  .door-control__wall { height: 235px; transform: scale(.86); }
  .door-control__content { padding: 1.5rem; }
}