/* A mesma linguagem visual do VTT, isolada na tela de autenticação. */
/* Define a apresentação, cores e espaçamento deste componente. */
body.login-page {
  min-height: 100vh;
  padding: 32px 18px;
  align-items: center;
  color: #e8e6dc;
  background: radial-gradient(ellipse at 50% 15%, #1b2d2d, #101313 48%, #090b0b 90%);
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* Organiza os painéis e sua distribuição no espaço da tela. */
.login-page .auth-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 570px;
  padding: 30px 26px 32px;
  border: 5px solid #090b0b;
  border-radius: 3px;
  background: linear-gradient(110deg, #0000000a, #00000035), url('../assets/ui/manga-paper.svg');
  box-shadow:
    0 0 0 1px #686b66,
    0 0 0 5px #202423,
    0 20px 65px #0009,
    0 0 65px #27c1d71c;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.login-page .auth-shell::before,
/* Acrescenta a camada decorativa de borda, textura ou destaque. */
.login-page .auth-shell::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  background: url('../assets/ui/ink-splatter.svg') center / contain no-repeat;
  pointer-events: none;
}
/* Acrescenta a camada decorativa de borda, textura ou destaque. */
.login-page .auth-shell::before {
  bottom: -18px;
  left: -35px;
}
/* Acrescenta a camada decorativa de borda, textura ou destaque. */
.login-page .auth-shell::after {
  top: -27px;
  right: -42px;
  transform: rotate(180deg);
}

/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-brand {
  position: relative;
  margin-bottom: 22px;
}
.login-page .auth-brand::before,
/* Acrescenta a camada decorativa de borda, textura ou destaque. */
.login-page .auth-panel::before {
  content: '';
  position: absolute;
  height: 15px;
  background: url('../assets/ui/brush-strip.svg') center / 500px 21px repeat-x;
  pointer-events: none;
}
/* Acrescenta a camada decorativa de borda, textura ou destaque. */
.login-page .auth-brand::before {
  top: -30px;
  left: -26px;
  right: -26px;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-logo {
  display: block;
  width: 232px;
  height: 126px;
  margin: 0 auto 10px;
  object-fit: contain;
  filter: drop-shadow(0 4px 2px #000);
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-brand > p {
  color: #d8d9cc;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px #000;
}

/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-panel {
  position: relative;
  padding: 20px;
  border: 5px solid #080a09;
  background: linear-gradient(145deg, #21231ff7, #101211fc 65%);
  box-shadow:
    3px 4px 0 #111511a6,
    0 0 0 1px #51534c;
}
/* Acrescenta a camada decorativa de borda, textura ou destaque. */
.login-page .auth-panel::before {
  bottom: -32px;
  left: -31px;
  right: -31px;
  transform: rotate(180deg);
}
/* Acrescenta a camada decorativa de borda, textura ou destaque. */
.login-page .auth-panel::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: url('../assets/ui/panel-corners.svg') center / 100% 100% no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page #box-abas {
  gap: 7px;
  border: 0;
  margin: -3px -3px 23px;
}
/* Apresenta o estado de visibilidade ou indisponibilidade do controle. */
.login-page #box-abas:not(.hidden) {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page #box-abas > button {
  min-height: 43px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 3px solid #545a4d;
  color: #bcc2b0;
  background: #30352c;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page #box-abas > button.text-red-500 {
  color: #141812;
  border-color: #9c293b;
  background: linear-gradient(175deg, #eeede4, #b9bcb0);
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page #box-abas > button:hover {
  color: #fff4d9;
  background: #4b4e41;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page #box-abas > button.text-red-500:hover {
  color: #141812;
  background: #eeede4;
}

/* Define a apresentação, cores e espaçamento deste componente. */
.login-page form label {
  color: #d8dbcb;
  font-size: 12px;
  margin-bottom: 6px;
}
/* Mantém legibilidade e dimensões dos campos de entrada. */
.login-page .auth-panel :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #697160;
  border-radius: 0;
  color: #e9eddf;
  background-color: #0e130f;
  font-size: 13px;
  font-family: inherit;
  box-shadow: inset 2px 2px 0 #080a09;
}
/* Mantém legibilidade e dimensões dos campos de entrada. */
.login-page .auth-panel input::placeholder {
  color: #8f9b87;
}
.login-page .auth-panel input:focus,
/* Mantém legibilidade e dimensões dos campos de entrada. */
.login-page .auth-panel select:focus {
  border-color: #84d4df;
  outline: 2px solid #84d4df33;
  outline-offset: 2px;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page .auth-panel :is(button, input, select):focus-visible {
  outline: 2px solid #85dff0;
  outline-offset: 3px;
}

.login-page .auth-panel button[type='submit'],
/* Apresenta o comando interativo e seu estado visual. */
.login-page button[onclick='abrirFormNovoPersonagem()'] {
  position: relative;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #c1b3a3;
  border-radius: 0;
  color: #f2ece0;
  background:
    url('../assets/ui/panel-corners.svg') center / 100% 100% no-repeat,
    linear-gradient(110deg, #681a2c, #a5263c 62%, #651827);
  box-shadow:
    2px 3px 0 #060806,
    inset 0 0 0 3px #35151b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.035em;
  transition:
    border-color 140ms,
    box-shadow 140ms;
}
.login-page .auth-panel button[type='submit']:hover,
/* Apresenta o comando interativo e seu estado visual. */
.login-page button[onclick='abrirFormNovoPersonagem()']:hover {
  border-color: #efcfb8;
  box-shadow:
    2px 3px 0 #060806,
    inset 0 0 0 3px #35151b,
    0 0 14px #a5263c44;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page .auth-panel button:disabled {
  opacity: 0.6;
  cursor: wait;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page button[onclick='abrirFormNovoPersonagem()'] {
  color: #ade8e8;
  background:
    url('../assets/ui/panel-corners.svg') center / 100% 100% no-repeat,
    linear-gradient(160deg, #26342d, #101611);
  box-shadow:
    2px 3px 0 #060806,
    inset 0 0 0 3px #101611;
}

/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-user-bar {
  padding: 13px;
  border-color: #66705b;
  border-radius: 0;
  background: #1b241b;
  gap: 10px;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-user-bar > div {
  min-width: 0;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page #user-nome-display {
  font-size: 17px;
  overflow-wrap: anywhere;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page button[onclick='logout()'] {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #78404a;
  border-radius: 0;
  color: #e6afb5;
  background: #25161b;
  text-decoration: none;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page #painel-dashboard > .border-t {
  border-color: #535d49;
  padding-top: 15px;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page #lista-meus-personagens {
  max-height: 220px;
  padding: 2px 4px 2px 0;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page #lista-meus-personagens > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 11px;
  border: 1px solid #5c6553;
  border-radius: 0;
  background: #0c120e;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page #lista-meus-personagens > div > div:first-child > span:first-child {
  font-size: 13px;
  overflow-wrap: anywhere;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page #lista-meus-personagens > div > div:first-child > span:last-child {
  color: #a4ae97;
  line-height: 1.6;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page #lista-meus-personagens button {
  min-height: 33px;
  padding: 7px 9px;
  border: 1px solid #8c6e6b;
  border-radius: 0;
  font-size: 10px;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page #lista-meus-personagens button:first-child {
  color: #f5ece0;
  background: #772034;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page #lista-meus-personagens button:last-child {
  color: #b8bcab;
  background: #1c211a;
  border-color: #58604e;
}

/* Define a apresentação, cores e espaçamento deste componente. */
.login-page #form-novo-shinigami {
  padding-top: 17px;
  border-color: #58634d;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-character-fields {
  gap: 10px;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page #p-divisao {
  color: #decf94;
  font-size: 12px;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-points {
  gap: 10px;
  margin-bottom: 15px;
  padding: 8px 0;
  border-bottom: 1px solid #495442;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-points > span:first-child {
  color: #c8cfb8;
  font-size: 11px;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-points > span:last-child {
  color: #97dde0;
  white-space: nowrap;
  font-size: 11px;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-attributes {
  gap: 8px;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-attributes > div {
  min-width: 0;
  padding: 7px 9px;
  gap: 6px;
  border: 1px solid #526047;
  border-radius: 0;
  background: #172016;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-attributes > div > span {
  color: #d7dfc8;
  font-size: 11px;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-attributes > div > div {
  gap: 4px;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page .auth-attributes button {
  width: 29px;
  height: 30px;
  padding: 0;
  border: 1px solid #5b6c4e;
  border-radius: 0;
  color: #e4ead9;
  background: #283324;
  font-size: 16px;
}
/* Apresenta o comando interativo e seu estado visual. */
.login-page .auth-attributes button:hover {
  color: #b6f0ee;
  border-color: #75aaa5;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.login-page .auth-attributes span[id] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 40px;
  padding: 5px 0 0;
  color: #141812;
  background: url('../assets/ui/attribute-badge.svg') center / contain no-repeat;
  font-size: 16px;
}

@media (max-width: 540px) {
  /* Define a apresentação, cores e espaçamento deste componente. */
  body.login-page {
    padding: 20px 12px;
  }
  /* Organiza os painéis e sua distribuição no espaço da tela. */
  .login-page .auth-shell {
    padding: 26px 16px 28px;
    border-width: 4px;
  }
  /* Define a apresentação, cores e espaçamento deste componente. */
  .login-page .auth-panel {
    padding: 16px;
    border-width: 4px;
  }
  /* Acrescenta a camada decorativa de borda, textura ou destaque. */
  .login-page .auth-brand::before {
    top: -26px;
    left: -16px;
    right: -16px;
  }
  /* Acrescenta a camada decorativa de borda, textura ou destaque. */
  .login-page .auth-panel::before {
    left: -20px;
    right: -20px;
    bottom: -28px;
  }
  /* Define a apresentação, cores e espaçamento deste componente. */
  .login-page .auth-logo {
    width: 214px;
    height: 117px;
  }
  /* Define a apresentação, cores e espaçamento deste componente. */
  .login-page .auth-brand > p {
    font-size: 11px;
  }
  /* Define a apresentação, cores e espaçamento deste componente. */
  .login-page .auth-character-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Define a apresentação, cores e espaçamento deste componente. */
  .login-page .auth-points {
    flex-wrap: wrap;
  }
  /* Apresenta o comando interativo e seu estado visual. */
  .login-page .auth-attributes button {
    width: 25px;
    height: 29px;
  }
  /* Define a apresentação, cores e espaçamento deste componente. */
  .login-page .auth-attributes > div {
    padding: 6px;
  }
}

@media (max-width: 440px) {
  /* Define a apresentação, cores e espaçamento deste componente. */
  .login-page .auth-attributes {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Define a apresentação, cores e espaçamento deste componente. */
  .login-page .auth-attributes > div {
    grid-column: auto;
    padding: 5px 10px;
  }
  /* Apresenta o comando interativo e seu estado visual. */
  .login-page .auth-attributes button {
    width: 32px;
    height: 32px;
  }
  /* Define a apresentação, cores e espaçamento deste componente. */
  .login-page #lista-meus-personagens > div {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Define a apresentação, cores e espaçamento deste componente. */
  .login-page #lista-meus-personagens > div > div:last-child {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-page *,
  .login-page *::before,
/* Acrescenta a camada decorativa de borda, textura ou destaque. */
  .login-page *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* Define a apresentação, cores e espaçamento deste componente. */
.auth-studio-link {
  display: block;
  padding: 12px;
  border: 1px solid #b8a87a;
  background:
    url('../assets/ui/panel-corners.svg') center/100% 100% no-repeat,
    #20251c;
  color: #eddfb4;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.auth-studio-link span {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: #a6b59d;
  margin-top: 5px;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.auth-studio-link:hover {
  border-color: #84d6da;
  color: #9ee8ed;
}