@import url('/padroes/base/tokens.css');

:where(.mb-botao, .mb-form-botao) {
  padding: 5px var(--botao-padding-x-pequeno);
  border: var(--botao-borda) solid transparent !important;
  border-radius: var(--botao-radius);
  background: var(--botao-primario-fundo);
  color: var(--cor-superficie);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--botao-gap);
  position: relative;
  font-family: var(--fonte-familia-principal);
  font-size: var(--botao-fonte);
  font-weight: var(--peso-botao) !important;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--transicao-rapida),
    border-color var(--transicao-rapida),
    color var(--transicao-rapida),
    box-shadow var(--transicao-rapida),
    opacity var(--transicao-rapida),
    transform var(--transicao-rapida);
}

:where(.mb-botao, .mb-form-botao):hover {
  background: var(--botao-primario-fundo-hover);
}

:where(.mb-botao, .mb-form-botao):focus-visible,
.mb-botao-icone:focus-visible,
:where(.mb-botao-fechar, .mb-form-botao-fechar):focus-visible {
  outline: var(--foco-outline-largura) solid var(--foco-outline-cor);
  outline-offset: var(--foco-outline-offset);
}

:where(.mb-botao, .mb-form-botao):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
}

:where(.mb-botao, .mb-form-botao).primario {
  border-color: var(--botao-primario-borda);
  background: var(--botao-primario-fundo);
  color: var(--cor-superficie);
  font-weight: var(--peso-botao);
}

:where(.mb-botao, .mb-form-botao).primario:hover {
  border-color: var(--botao-primario-borda-hover);
  background: var(--botao-primario-fundo-hover);
}

:where(.mb-botao, .mb-form-botao).destaque {
  border-color: var(--botao-destaque-borda);
  background: var(--botao-destaque-fundo);
  color: var(--cor-superficie);
  font-weight: var(--peso-botao);
}

:where(.mb-botao, .mb-form-botao).destaque:hover {
  border-color: var(--botao-destaque-borda-hover);
  background: var(--botao-destaque-fundo-hover);
}

:where(.mb-botao, .mb-form-botao).secundario {
  border-color: var(--botao-secundario-borda) !important;
  background: var(--botao-secundario-fundo);
  color: var(--botao-secundario-texto);
}

:where(.mb-botao, .mb-form-botao).secundario:hover {
  border-color: var(--botao-secundario-borda-hover)!important;
  background: var(--botao-secundario-fundo-hover);
  color: var(--botao-secundario-texto);
}

:where(.mb-botao, .mb-form-botao).sucesso {
  border-color: var(--botao-sucesso-borda) !important;
  background: var(--botao-sucesso-fundo) !important;
  color: var(--cor-superficie) !important;
}

:where(.mb-botao, .mb-form-botao).sucesso:hover {
  border-color: var(--botao-sucesso-borda-hover) !important;
  background: var(--botao-sucesso-fundo-hover) !important;
}

:where(.mb-botao, .mb-form-botao).perigo,
:where(.mb-form-botao[data-mb-form-fechar]) {
  border-color: var(--botao-perigo-borda);
  background: var(--botao-perigo-fundo);
  color: var(--cor-superficie);
  font-weight: var(--peso-botao);
}

:where(.mb-botao, .mb-form-botao).perigo:hover,
:where(.mb-form-botao[data-mb-form-fechar]):hover {
  border-color: var(--botao-perigo-borda-hover);
  background: var(--botao-perigo-fundo-hover);
  color: var(--cor-superficie);
}

:where(.mb-botao, .mb-form-botao).alerta {
  border-color: var(--botao-alerta-borda);
  background: var(--botao-alerta-fundo);
  color: var(--cor-superficie);
}

:where(.mb-botao, .mb-form-botao).alerta:hover {
  border-color: var(--botao-alerta-borda-hover);
  background: var(--botao-alerta-fundo-hover);
}

:where(.mb-botao, .mb-form-botao).neutro {
  border-color: var(--botao-neutro-borda);
  background: var(--botao-neutro-fundo);
  color: var(--cor-superficie);
}

:where(.mb-botao, .mb-form-botao).neutro:hover {
  border-color: var(--botao-neutro-borda-hover);
  background: var(--botao-neutro-fundo-hover);
}

:where(.mb-botao, .mb-form-botao).fantasma {
  border-color: var(--botao-fantasma-borda);
  background: var(--botao-fantasma-fundo);
  color: var(--botao-link-texto);
}

:where(.mb-botao, .mb-form-botao).fantasma:hover {
  border-color: var(--botao-fantasma-borda-hover);
  background: var(--botao-fantasma-fundo-hover);
  color: var(--botao-link-texto);
}

:where(.mb-botao, .mb-form-botao).link {
  min-height: auto;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: var(--botao-link-fundo);
  color: var(--botao-link-texto);
}

:where(.mb-botao, .mb-form-botao).link:hover {
  background: var(--botao-link-fundo);
  color: var(--botao-link-texto-hover);
  text-decoration: underline;
}

.mb-botao-icone {
  width: var(--botao-largura-icone);
  height: var(--botao-altura-icone);
  padding: 0;
  border: var(--botao-borda) solid var(--botao-icone-borda);
  border-radius: var(--botao-radius);
  background: var(--botao-icone-fundo);
  color: var(--botao-icone-texto);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--fonte-familia-principal);
  font-size: var(--botao-fonte-icone);
  font-weight: var(--peso-botao);
  line-height: var(--botao-line-height-icone);
  transition:
    background-color var(--transicao-rapida),
    border-color var(--transicao-rapida),
    color var(--transicao-rapida),
    transform var(--transicao-rapida);
}

.mb-botao-icone:hover {
  border-color: var(--botao-icone-borda-hover);
  background: var(--botao-icone-fundo-hover);
}

.mb-botao-icone.perigo {
  border-color: var(--botao-icone-perigo-borda);
  background: var(--botao-icone-perigo-fundo);
  color: var(--cor-superficie);
}

.mb-botao-icone.perigo:hover {
  border-color: var(--botao-icone-perigo-borda-hover);
  background: var(--botao-icone-perigo-fundo-hover);
}

.mb-form-switch,
.mb-switch {
  min-height: var(--form-switch-altura-minima);
  border: var(--form-switch-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--form-switch-gap);
  padding: var(--form-switch-padding);
  cursor: pointer;
  user-select: none;
}

.mb-form-switch-texto,
.mb-switch-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mb-form-switch-texto strong,
.mb-switch-texto strong {
  color: var(--cor-primaria);
  font-size: var(--fonte-md);
  font-weight: var(--peso-titulo);
}

.mb-form-switch-texto small,
.mb-switch-texto small {
  color: var(--cor-texto-suave);
  font-size: var(--fonte-xs);
  font-weight: var(--peso-texto);
}

.mb-form-switch input,
.mb-switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mb-form-slider,
.mb-switch-slider {
  width: var(--form-slider-largura);
  height: var(--form-slider-altura);
  border-radius: var(--raio-pill);
  background: var(--form-slider-fundo);
  position: relative;
  flex: 0 0 auto;
  transition: background-color var(--transicao-rapida);
}

.mb-form-slider::before,
.mb-switch-slider::before {
  content: "";
  position: absolute;
  top: var(--form-slider-knob-topo);
  left: var(--form-slider-knob-esquerda);
  width: var(--form-slider-knob-tamanho);
  height: var(--form-slider-knob-tamanho);
  border-radius: 50%;
  background: var(--cor-superficie);
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicao-rapida);
}

.mb-form-switch input:checked + .mb-form-slider,
.mb-switch-input:checked + .mb-switch-slider {
  background: var(--cor-secundaria);
}

.mb-form-switch input:checked + .mb-form-slider::before,
.mb-switch-input:checked + .mb-switch-slider::before {
  transform: translateX(var(--form-slider-knob-deslocamento));
}

.mb-form-switch input:focus-visible + .mb-form-slider,
.mb-switch-input:focus-visible + .mb-switch-slider {
  outline: var(--foco-outline-largura) solid var(--foco-outline-cor);
  outline-offset: var(--foco-outline-offset);
}

:where(.mb-botao-fechar, .mb-form-botao-fechar) {
  width: var(--botao-largura-fechar);
  height: var(--botao-altura-fechar);
  padding: 0;
  border: var(--botao-borda) solid var(--botao-fechar-borda);
  border-radius: var(--botao-radius);
  background: var(--botao-fechar-fundo);
  color: var(--cor-superficie);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-familia-principal);
  font-size: var(--botao-fonte-fechar);
  font-weight: var(--peso-botao);
  line-height: var(--botao-line-height-icone);
  transition:
    background-color var(--transicao-rapida),
    border-color var(--transicao-rapida),
    transform var(--transicao-rapida);
}

:where(.mb-botao-fechar, .mb-form-botao-fechar):hover {
  border-color: var(--botao-fechar-borda-hover);
  background: var(--botao-fechar-fundo-hover);
}

:where(.mb-botao, .mb-form-botao).pequeno {
  min-height: var(--botao-altura-pequena);
  padding: 0 var(--botao-padding-x-pequeno);
  gap: var(--botao-gap-pequeno);
  font-size: var(--botao-fonte-pequena);
}

:where(.mb-botao, .mb-form-botao).grande {
  min-height: var(--botao-altura-grande);
  padding: 0 var(--botao-padding-x-grande);
  font-size: var(--botao-fonte-grande);
}

:where(.mb-botao, .mb-form-botao).bloco {
  width: 100%;
}

:where(.mb-botao, .mb-form-botao) .mb-botao-icone-conteudo {
  width: var(--botao-icone-conteudo-tamanho);
  height: var(--botao-icone-conteudo-tamanho);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

:where(.mb-botao, .mb-form-botao) .mb-botao-icone-conteudo svg,
.mb-botao-icone svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.mb-botao-atalho {
  min-width: var(--botao-atalho-min-width);
  min-height: var(--botao-altura-atalho);
  padding: var(--botao-atalho-padding);
  border: var(--botao-borda) solid currentColor;
  border-bottom-width: var(--botao-atalho-borda-inferior);
  border-radius: var(--botao-radius-atalho);
  background: var(--botao-atalho-fundo);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center; 
  font-family: var(--fonte-familia-principal);
  font-size: var(--botao-fonte-atalho);
  font-weight: var(--peso-botao); 
  opacity: var(--botao-atalho-opacidade);
  pointer-events: none;
}

:where(.mb-botao, .mb-form-botao).secundario .mb-botao-atalho,
:where(.mb-botao, .mb-form-botao).fantasma .mb-botao-atalho,
:where(.mb-botao, .mb-form-botao).link .mb-botao-atalho {
  background: var(--botao-atalho-fundo-claro);
}

.mb-botoes-grupo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--botao-gap-grupo);
}

.mb-botoes-grupo.espacado {
  justify-content: space-between;
}

.mb-botoes-segmentados {
  padding: var(--botao-segmentado-padding);
  border: var(--botao-borda) solid var(--botao-segmentado-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  display: inline-flex;
  align-items: center;
  gap: var(--botao-segmentado-gap);
}

.mb-botoes-segmentados .mb-botao {
  min-height: var(--botao-altura-pequena);
  padding: 0 var(--botao-padding-x-pequeno);
  border-color: transparent;
  background: transparent;
  color: var(--cor-texto-suave);
  box-shadow: none;
}

.mb-botoes-segmentados .mb-botao:hover {
  background: var(--botao-fantasma-fundo-hover);
  color: var(--botao-link-texto);
}

.mb-botoes-segmentados .mb-botao.ativo,
.mb-botoes-segmentados .mb-botao[aria-pressed="true"] {
  background: var(--botao-destaque-fundo);
  color: var(--cor-superficie);
}

:where(.mb-botao, .mb-form-botao).carregando,
:where(.mb-botao, .mb-form-botao)[aria-busy="true"] {
  cursor: wait;
  pointer-events: none;
}

:where(.mb-botao, .mb-form-botao).carregando::before,
:where(.mb-botao, .mb-form-botao)[aria-busy="true"]::before {
  content: "";
  width: var(--botao-loading-tamanho);
  height: var(--botao-loading-tamanho);
  border: var(--botao-loading-borda) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  flex: 0 0 auto;
  animation: mb-botao-girar var(--botao-loading-duracao) linear infinite;
}

:where(.mb-botao, .mb-form-botao).mb-button-loading::before {
  content: none;
  display: none;
}

:where(.mb-botao, .mb-form-botao):disabled,
:where(.mb-botao, .mb-form-botao)[aria-disabled="true"],
.mb-botao-icone:disabled,
.mb-botao-icone[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
  pointer-events: none;
  transform: none;
}

@keyframes mb-botao-girar {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 600px) {
  .mb-botoes-grupo.responsivo {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .mb-botoes-grupo.responsivo :where(.mb-botao, .mb-form-botao) {
    width: 100%;
  }

  .mb-botoes-segmentados {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .mb-botao-atalho {
    display: none;
  }
}

.mb-catalogo-comandos {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 4, 52, .58);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao-media), visibility var(--transicao-media);
}

.mb-catalogo-comandos[hidden] {
  display: none !important;
}

.mb-catalogo-comandos.ativo {
  opacity: 1;
  visibility: visible;
}

.mb-catalogo-painel {
  width: min(940px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cor-borda-ciano-media);
  border-radius: var(--raio-modal);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-modal);
  transform: translateY(10px);
  transition: transform var(--transicao-media);
}

.mb-catalogo-comandos.ativo .mb-catalogo-painel {
  transform: translateY(0);
}

.mb-catalogo-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--cor-borda);
}

.mb-catalogo-cabecalho h2,
.mb-catalogo-cabecalho p {
  margin: 0;
}

.mb-catalogo-cabecalho h2 {
  color: var(--cor-primaria);
  font-size: var(--fonte-xl);
  font-weight: var(--peso-titulo);
}

.mb-catalogo-cabecalho p {
  margin-top: 4px;
  color: var(--cor-texto-suave);
  font-size: var(--fonte-sm);
  font-weight: var(--peso-texto);
}

.mb-catalogo-fechar {
  flex: 0 0 auto;
}

.mb-catalogo-conteudo {
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cor-secundaria) transparent;
}

.mb-catalogo-conteudo::-webkit-scrollbar {
  width: 7px;
}

.mb-catalogo-conteudo::-webkit-scrollbar-track {
  background: transparent;
}

.mb-catalogo-conteudo::-webkit-scrollbar-thumb {
  border-radius: var(--raio-pill);
  background: var(--cor-secundaria);
}

.mb-catalogo-grupo + .mb-catalogo-grupo {
  margin-top: 20px;
}

.mb-catalogo-grupo h3 {
  margin: 0 0 10px;
  color: var(--cor-primaria);
  font-size: var(--fonte-md);
  font-weight: var(--peso-botao);
}

.mb-catalogo-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mb-catalogo-item {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(48px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
}

.mb-catalogo-tecla {
  min-width: 44px;
  min-height: 34px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cor-borda-ciano-media);
  border-bottom-width: 3px;
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--cor-primaria);
  font-family: var(--fonte-familia-principal);
  font-size: var(--fonte-sm);
  font-weight: var(--peso-botao);
  white-space: nowrap;
}

.mb-catalogo-informacao {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mb-catalogo-informacao strong {
  color: var(--cor-texto);
  font-size: var(--fonte-sm);
  font-weight: var(--peso-botao);
}

.mb-catalogo-informacao span {
  color: var(--cor-texto-suave);
  font-size: var(--fonte-xs);
  font-weight: var(--peso-texto);
  line-height: 1.35;
}

.mb-catalogo-modelo {
  pointer-events: none;
  white-space: nowrap;
}

.mb-catalogo-modelo .mb-botao-atalho {
  display: inline-flex;
}

.mb-catalogo-rodape {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 20px;
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: var(--fonte-xs);
  font-weight: var(--peso-texto);
}

.mb-catalogo-rodape kbd {
  min-width: 28px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cor-borda-ciano-media);
  border-bottom-width: 3px;
  border-radius: var(--raio-sm);
  color: var(--cor-primaria);
  font-family: var(--fonte-familia-principal);
  font-weight: var(--peso-botao);
}

.mb-catalogo-rodape-acoes {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .mb-catalogo-comandos {
    align-items: flex-end;
    padding: 10px;
  }

  .mb-catalogo-painel {
    max-height: calc(100vh - 20px);
  }

  .mb-catalogo-cabecalho,
  .mb-catalogo-conteudo {
    padding-left: 14px;
    padding-right: 14px;
  }

  .mb-catalogo-lista {
    grid-template-columns: 1fr;
  }

  .mb-catalogo-item {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .mb-catalogo-modelo {
    display: none;
  }

  .mb-catalogo-rodape {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.mb-botao, .mb-form-botao),
  .mb-botao-icone,
  :where(.mb-botao-fechar, .mb-form-botao-fechar) {
    transition: none;
  }

  :where(.mb-botao, .mb-form-botao).carregando::before,
  :where(.mb-botao, .mb-form-botao)[aria-busy="true"]::before {
    animation-duration: var(--botao-loading-duracao-reduzida);
  }
}