/*
 * Visual do FireBee Transfer: o mesmo padrão do Connect Web.
 *
 * Os valores vêm do CSS do Connect (connect-web/src/assets/css/main.css,
 * Responsive.css e views/content/Login/Login.vue): tema só escuro, Arial, azul
 * #4375ef como única cor de destaque, cartão de "vidro" na entrada, quadros
 * #292d32 com barra de título #1a1a22 e cartões #36393f nas telas internas.
 * Mudou lá? Mude aqui.
 *
 * Sem estilo embutido no HTML nem pelo JavaScript: a política de segurança da
 * página (CSP) só aceita esta folha.
 */

:root {
  color-scheme: dark;
  --fundo: #1a1a22;
  --quadro: #292d32;
  --cartao: #36393f;
  --linha-par: #36393f;
  --linha-impar: #26292f;
  --campo: #1e2227;
  --tinta: #ffffff;
  --tinta-2: #e8eaed;
  --suave: #c5c5c5;
  --apagado: #8b9096;
  --borda: rgba(255, 255, 255, 0.12);
  --azul: #4375ef;
  --azul-forte: #365fd1;
  --azul-claro: #6d94f5;
  --cinza-botao: #46494f;
  --perigo: #ff2a2a;
  --erro: #ff3c3c;
  --erro-texto: rgba(255, 100, 100, 0.9);
  --ok: #29cb72;
  --atencao: #ffc22d;
  --desligado: #999999;
  --fonte: Arial, Helvetica, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sombra-botao: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  --sombra-cartao: 0 0 15px 0 rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font: 400 16px/1.45 var(--fonte);
  color: var(--tinta);
  background: var(--fundo);
}

h1, h2, h3 { margin: 0; font-weight: 700; }
h3 { font-size: 16px; margin: 22px 0 8px; color: var(--tinta-2); }
p { margin: 0 0 12px; }

:focus-visible {
  outline: 2px solid var(--azul-claro);
  outline-offset: 2px;
}

.suave { color: var(--suave); }
.dica { color: var(--apagado); font-size: 14px; margin: 6px 0 0; }

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- link (o .link do Connect) ---------- */

.link {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size 0.25s ease, color 0.25s ease;
  padding-bottom: 2px;
}
.link:hover { color: #ffffff; background-size: 100% 1px; }

/* ---------- faixa do topo (o menu do Connect em tela estreita) ---------- */

.cabecalho { background: var(--quadro); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); }
.cabecalho-miolo {
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 16px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
.marca-logo { display: block; }
.conta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.conta-email {
  color: var(--suave);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ---------- área de conteúdo ---------- */

.conteudo {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 10px 40px;
}

/* quadro: a área de conteúdo de uma tela do Connect (.ResponsiveContentBoard) */
.quadro { background: var(--quadro); padding: 0 10px 14px; }
.quadro--estreito { max-width: 620px; margin: 0 auto; }

/* barra de título: o .mainTitle do Connect (60px, #1a1a22, texto centralizado) */
.barra-titulo {
  min-height: 60px;
  margin: 0 -10px 10px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fundo);
  font-size: 20px;
  font-weight: 400;
  text-align: center;
}
.barra-titulo--lista {
  margin-top: 14px;
  justify-content: space-between;
  min-height: 52px;
}
.barra-titulo--lista h2 { font-size: 20px; font-weight: 400; }

.cartao {
  background: var(--cartao);
  border-radius: 5px;
  box-shadow: var(--sombra-cartao);
  padding: 18px;
}

/* ---------- telas de entrada: o login do Connect ---------- */

body[data-tela="login"],
body[data-tela="sem-permissao"],
body[data-tela="erro"],
body[data-tela="carregando"] {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.8) 0%, rgba(18, 18, 18, 0.8) 30%, rgba(31, 31, 31, 0.8) 70%, rgba(42, 42, 42, 0.8) 100%),
    linear-gradient(135deg, #121212 0%, #1e1e1e 50%, #121212 100%);
  background-attachment: fixed;
}
body[data-tela="login"] .cabecalho,
body[data-tela="sem-permissao"] .cabecalho,
body[data-tela="erro"] .cabecalho,
body[data-tela="carregando"] .cabecalho { display: none; }

body[data-tela="login"] .conteudo,
body[data-tela="sem-permissao"] .conteudo,
body[data-tela="erro"] .conteudo,
body[data-tela="carregando"] .conteudo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* cartão de vidro (.glassLikeContainer) */
.cartao--entrada {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  padding: 30px;
  border-radius: 16px;
  background: rgba(25, 25, 25, 0.6);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-align: center;
  animation: surgir 0.45s ease both;
}
/* o brilho de 1px que varre o topo do cartão do Connect */
.cartao--entrada::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: varrer 3s linear infinite;
}
@keyframes surgir {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes varrer { to { left: 100%; } }

.entrada-logo {
  display: block;
  margin: 0 auto 14px;
  filter: brightness(1.2) contrast(1.1);
}
.cartao--entrada h1 {
  font-size: 28px;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.entrada-dica { font-size: 14px; margin-bottom: 20px; color: rgba(255, 255, 255, 0.6); }
.cartao--entrada form { display: flex; flex-direction: column; gap: 16px; }
.cartao--entrada .campo { margin: 0; }
.cartao--entrada .campo input {
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.95);
  box-shadow: none;
}
.cartao--entrada .campo input:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
  outline: none;
}
.cartao--entrada .campo input::placeholder { color: rgba(255, 255, 255, 0.35); }
.cartao--entrada .dica { text-align: left; }
.cartao--entrada .aviso {
  margin: 16px 0 0;
  text-align: left;
}
.conta-destaque {
  font-size: 18px;
  font-weight: 700;
  overflow-wrap: anywhere;
  margin-bottom: 16px;
}
#sem-permissao-motivo { color: rgba(255, 255, 255, 0.8); margin-bottom: 22px; }
#tela-erro h1, #tela-sem-permissao h1 { font-size: 24px; margin-bottom: 14px; }
#tela-erro .suave { margin-bottom: 22px; }

/* mostrar e esconder a senha */
.campo--com-botao { position: relative; }
.campo--com-botao input { padding-right: 52px; }
.olho {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #ffffff;
  opacity: 0.6;
  cursor: pointer;
}
.olho:hover { opacity: 1; }
.olho .olho-aberto,
.olho[aria-pressed="true"] .olho-fechado { display: none; }
.olho[aria-pressed="true"] .olho-aberto { display: block; }

/* carregando: o spinner do Connect (61px, borda 8px, lado esquerdo azul) */
.centro { text-align: center; }
.girando {
  display: block;
  width: 61px;
  height: 61px;
  margin: 0 auto 16px;
  border: 8px solid #1a1a22;
  border-left-color: var(--azul);
  border-radius: 50%;
  animation: girar 1s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- campos ---------- */

.campo { margin-bottom: 16px; }
label { display: block; font-weight: 500; margin-bottom: 6px; color: var(--tinta-2); }
label .suave { font-weight: 400; color: var(--apagado); }

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  color: var(--tinta);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
input:focus-visible { outline: none; border-color: var(--azul); }
input::placeholder { color: rgba(255, 255, 255, 0.35); }

/* zona de escolher ou soltar o arquivo */
.rotulo { display: block; font-weight: 500; margin-bottom: 6px; color: var(--tinta-2); }
.soltar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.18);
}
.soltar.arrastando { border-color: var(--azul); background: rgba(67, 117, 239, 0.14); }
.soltar .botao { margin: 0; flex: none; }
.soltar input:focus-visible + .botao { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.soltar-texto { color: var(--apagado); overflow-wrap: anywhere; min-width: 0; }
.soltar.com-arquivo { border-style: solid; border-color: rgba(255, 255, 255, 0.2); }
.soltar.com-arquivo .soltar-texto { color: var(--tinta); font-weight: 700; }

/* ---------- botões (.btn do Connect) ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  color: #ffffff;
  background: var(--cinza-botao);
  border: 0;
  border-radius: 4px;
  box-shadow: var(--sombra-botao);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.botao:hover { background: #55585f; }
.botao:disabled { opacity: 0.5; cursor: default; }
.botao--primario { background: var(--azul); }
.botao--primario:hover { background: var(--azul-forte); }
.botao--perigo { background: var(--perigo); }
.botao--perigo:hover { background: #e01f1f; }
.botao--pequeno { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.botao--grande { min-height: 52px; padding: 12px 32px; font-size: 18px; }
.botao--cheio { width: 100%; }
.botao--texto,
.botao--texto:hover {
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}
.botao--texto:hover { color: #ffffff; }

/* o botão "Entrar" do Connect: cinza translúcido, letras espaçadas */
.botao--entrar,
.cartao--entrada .botao--cheio {
  min-height: 48px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(135deg, rgba(80, 80, 80, 0.4), rgba(60, 60, 60, 0.4));
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.botao--entrar:hover,
.cartao--entrada .botao--cheio:hover {
  background: linear-gradient(135deg, rgba(90, 90, 90, 0.5), rgba(70, 70, 70, 0.5));
  border-color: rgba(255, 255, 255, 0.25);
}
.cartao--entrada .botao--texto { border: 0; box-shadow: none; background: transparent; letter-spacing: 0; min-height: 36px; }

.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.acoes--fim { justify-content: flex-end; }

/* ---------- avisos ---------- */

.aviso {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--erro);
  background: rgba(255, 60, 60, 0.1);
  color: #ffb3b3;
  font-size: 15px;
  border-radius: 0 4px 4px 0;
}
.aviso--info { border-left-color: var(--apagado); background: rgba(255, 255, 255, 0.06); color: var(--tinta-2); }
.aviso--atencao {
  margin: 0 0 14px;
  border-left-color: var(--atencao);
  background: rgba(255, 194, 45, 0.1);
  color: #ffdf8a;
}

/* ---------- abas (os botões do menu do Connect: ativo em azul) ---------- */

.abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.aba {
  flex: 1 1 220px;
  min-height: 44px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  color: var(--tinta-2);
  background: var(--quadro);
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.aba:hover { background: #30343a; }
.aba[aria-selected="true"] { background: var(--azul); color: #ffffff; }

/* ---------- envio ---------- */

.progresso-titulo { font-weight: 700; overflow-wrap: anywhere; }
progress {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 26px;
  border: 0;
  border-radius: 4px;
  background: #101018;
  box-shadow: inset 0 12px 20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  margin-bottom: 8px;
}
progress::-webkit-progress-bar { background: #101018; border-radius: 4px; }
progress::-webkit-progress-value { background: var(--azul); border-radius: 3px; }
progress::-moz-progress-bar { background: var(--azul); border-radius: 3px; }

.ok-titulo { color: var(--ok); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.link-grande {
  font-family: var(--mono);
  font-size: 17px;
  padding: 12px 14px;
  background: var(--campo);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  overflow-wrap: anywhere;
  user-select: all;
}
.comando {
  margin: 0;
  padding: 14px;
  font: 14px/1.5 var(--mono);
  color: var(--tinta-2);
  background: #101018;
  border-radius: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow: auto;
  user-select: all;
}
.situacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--quadro);
  border-radius: 5px;
}
.situacao .acoes { margin: 0; }
.situacao .estado-chegada { margin: 0; font-size: 17px; }
.explicacao { margin-top: 12px; }
.estado-chegada { margin: 12px 0; font-weight: 700; min-height: 1.45em; }
.estado-chegada[data-estado="aguardando"] { color: var(--atencao); }
.estado-chegada[data-estado="concluido"] { color: var(--ok); }
.estado-chegada[data-estado="erro"],
.estado-chegada[data-estado="cancelado"],
.estado-chegada[data-estado="expirado"] { color: #ff8b8b; }

/* ---------- meus envios: linhas alternadas, como as tabelas do Connect ---------- */

#lista-estado { margin: 0; padding: 0 4px; }
#lista-estado:not(:empty) { padding: 14px 4px; }
.lista-envios { list-style: none; margin: 0; padding: 0; }
.envio { padding: 14px; background: var(--linha-par); }
.envio:nth-child(even) { background: var(--linha-impar); }
.envio-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.envio-nome { font-weight: 700; overflow-wrap: anywhere; }
.envio-meta { color: var(--suave); font-size: 14px; margin: 4px 0 0; }
.envio-descricao { color: var(--tinta-2); font-size: 15px; margin: 6px 0 0; overflow-wrap: anywhere; }
.envio .acoes { margin-top: 10px; }

/* o que não está mais guardado: recolhido, mais apagado */
.antigos { margin-top: 14px; }
.antigos summary {
  padding: 12px 14px;
  background: var(--fundo);
  color: var(--suave);
  cursor: pointer;
  user-select: none;
}
.antigos summary:hover { color: var(--tinta); }
.antigos-dica { margin: 0; padding: 10px 14px; }
.antigos .envio-nome { color: var(--suave); font-weight: 400; }

/* etiqueta de estado (a .healthTag do Connect) */
.etiqueta {
  flex: none;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.etiqueta--concluido { background: #143b26; color: #8ee9b4; }
.etiqueta--aguardando { background: #33291a; color: #ffc22d; }
.etiqueta--cancelado { background: #3a1f22; color: #ff8b8b; }
.etiqueta--expirado { background: #2c2f34; color: var(--desligado); }

/* ---------- baixar ---------- */

.detalhes { margin: 0; }
.detalhes > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  background: var(--linha-impar);
}
.detalhes > div:nth-child(odd) { background: var(--quadro); }
.detalhes dt { color: var(--suave); flex: none; }
.detalhes dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 700; }
#tela-download .acoes { justify-content: center; margin-top: 18px; }
.rodape-tela { margin: 16px 0 0; text-align: center; }

/* ---------- diálogo de confirmação (o PopUp do Connect) ---------- */

.dialogo {
  width: min(440px, calc(100vw - 32px));
  padding: 28px;
  border: 0;
  border-radius: 16px;
  color: var(--tinta);
  background: rgba(25, 25, 25, 0.92);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-align: center;
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.7); }
.dialogo h2 { font-size: 22px; margin-bottom: 12px; }
.dialogo p { color: var(--suave); overflow-wrap: anywhere; margin-bottom: 22px; }
.dialogo .acoes { flex-wrap: nowrap; gap: 14px; margin: 0; }
.dialogo .botao { flex: 1 1 0; min-height: 48px; }

/* ---------- miudezas ---------- */

.copia-oculta { position: fixed; top: -1000px; left: -1000px; opacity: 0; }

@media (max-width: 600px) {
  .cabecalho-miolo { padding: 8px 10px; }
  .marca { font-size: 17px; }
  .conta-email { display: none; }
  .conteudo { padding: 6px 6px 28px; }
  .cartao { padding: 14px; }
  .cartao--entrada { padding: 24px 20px; }
  .acoes .botao:not(.botao--pequeno) { flex: 1 1 100%; }
  .dialogo .acoes .botao { flex: 1 1 0; }
  .detalhes > div { flex-direction: column; gap: 2px; }
  .detalhes dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .cartao--entrada, .cartao--entrada::before { animation: none; }
  .girando { animation-duration: 2.5s; }
  .link, .botao { transition: none; }
}