/* Iconos originales de RIFEO UI KIT; un control en el extremo de la cabecera. */
.appearance-control { position: relative; flex: 0 0 44px; width: 44px; max-width: 100%; margin-inline-start: auto; }
.appearance-control .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.appearance-control [data-appearance-status]:not(.visually-hidden) { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; display: block; width: min(30ch, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--color-danger); border-radius: 8px; background: var(--color-surface); color: var(--color-danger); font-size: .85rem; }
form.theme-switcher { display: flex; margin: 0; padding: 0; border: 0; background: transparent; }
body .theme-switcher button.appearance-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 10px; border: 1px solid var(--color-control-border); border-radius: 12px; background: var(--color-bg); color: var(--color-text); cursor: pointer; }
.appearance-icon { display: block; width: 24px; height: 24px; background: currentColor; mask: var(--appearance-icon) center / contain no-repeat; -webkit-mask: var(--appearance-icon) center / contain no-repeat; }
.appearance-icon[hidden] { display: none; }
body .theme-switcher button.appearance-toggle:hover { background: var(--color-surface-raised); filter: none; }
body .theme-switcher button.appearance-toggle:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
body .theme-switcher button.appearance-toggle:disabled { opacity: 1; background: var(--color-surface-raised); color: var(--color-muted); cursor: wait; }
.header-inner > .appearance-control { align-self: flex-start; }
.host-topline > .host-width { position: relative; min-height: 52px; padding-right: 60px; }
.host-topline .appearance-control { position: absolute; top: 4px; right: 0; }
@media (max-width: 780px) {
  .figma-portal .portal-shell { position: relative; }
  .figma-portal .portal-topbar .appearance-control { position: absolute; top: 16px; right: 20px; }
  .figma-portal .portal-brand { max-width: calc(100% - 60px); min-height: 44px; }
}
@media (max-width: 480px) {
  .header-inner { position: relative; }
  .header-inner > .appearance-control { position: absolute; top: 16px; right: 16px; }
  .header-inner > .brand { display: flex; align-items: center; min-height: 44px; max-width: calc(100% - 60px); }
}
@media (forced-colors: active) {
  .appearance-icon { background: ButtonText; }
}
@media print { .appearance-control { display: none; } }