/* O QUE SO EXISTE NA WEB (spec 08).
 *
 * Carregado DEPOIS de styles.css, que e servido direto de src/renderer/ — o
 * mesmo arquivo do .exe, sem copia. Aqui entra so o que a janela do Electron
 * nunca precisou:
 *
 *   1. a tela de login da CONTA (a do exe e senha local, com layout proprio)
 *   2. o celular (uma janela de desktop nunca tem 380px)
 *   3. a pagina ocupar a tela toda (no exe ha 32px de titlebar acima do #app)
 *
 * 🔴 Nada de estilo de COMPONENTE aqui. Card, tabela, badge, botao, nav-link,
 * kpi-icon — tudo isso vem do styles.css do exe e tem que continuar vindo de
 * la, senao o painel comeca a divergir do app justamente no visual, que e o
 * que esta decisao existe pra evitar.
 */

html, body { height: 100%; margin: 0; }

/* ------------------------------------------------------------------ login */

.login-tela {
  min-height: 100vh;
  min-height: 100dvh;   /* dvh: no celular, vh conta a barra do navegador e o
                           botao Entrar ficaria fora da area visivel */
  display: grid;
  place-items: center;
  padding: 24px;
  /* o mesmo glow roxo ambiente que o dashboard do exe usa */
  background:
    radial-gradient(circle at 70% 20%, rgba(130, 10, 209, 0.10) 0%, transparent 45%),
    #0d0d12;
}
.login-tela.hidden { display: none; }

/* O widget do Turnstile (spec 18). O iframe dele tem largura fixa de 300px; o
   cartao do login tem 380px, entao sem esta regra ele fica encostado a esquerda
   e a tela parece torta. `min-height` reserva o espaco ANTES do iframe existir:
   sem isso o botao Entrar pula para baixo no meio do carregamento, e pular
   embaixo do cursor e como se erra o clique. */
.cf-turnstile {
  display: flex;
  justify-content: center;
  min-height: 65px;
}
.cf-turnstile[hidden] { display: none; }

/* ------------------------------------------------- login social (spec 17) */

/* A fileira dos tres. `wrap` porque em 380px de largura tres botoes lado a
   lado ficariam com 100px cada — e o do Google carrega texto. Ele ocupa a
   linha inteira; Facebook e Twitter dividem a de baixo. */
.social-fileira {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.btn-social {
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.btn-social:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.24); }

/* O foco visivel importa mais aqui do que na maioria dos lugares: este e o
   primeiro elemento focavel da tela de entrada, entao e onde o Tab para. */
.btn-social:focus-visible {
  outline: 2px solid #820ad1;
  outline-offset: 2px;
}

.btn-social-icone { width: 18px; height: 18px; flex: none; }
.btn-social-texto { line-height: 1; }

/* Facebook e Twitter dividem a segunda linha. */
.btn-social-embreve { flex: 1 1 0; min-width: 0; }

/* 🔴 DESABILITADO DE VERDADE — o CSS e a metade visivel do que o HTML ja
   declarou com `disabled`, `aria-disabled` e `tabindex="-1"`. So opacidade
   seria uma mentira visual: o botao continuaria clicavel e focavel, e quem
   usa teclado chegaria nele sem nada acontecer. `pointer-events: none` fecha
   o hover; o `not-allowed` no wrapper e o que da o cursor certo (um elemento
   sem pointer-events nao muda cursor sozinho). */
.btn-social-embreve[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}
.social-fileira:has(.btn-social-embreve[disabled]) { cursor: default; }

.btn-social-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  line-height: 1;
}

/* O "ou" com a linha atravessando. Separa os dois caminhos sem sugerir que um
   e o principal e o outro o erro. */
.social-ou {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 16px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.social-ou::before,
.social-ou::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

#social-bloco[hidden] { display: none; }

/* ------------------------------------------------- rodape do perfil (23) */

/* O `.id-perfil-btn` de styles.css nasceu numa <div> no .exe, entao ele nao
   zera nada de <button>. Aqui o rodape virou <button> (o Perfil e a unica tela
   sem item de menu — sem isto o teclado nao chega nela), e estas quatro linhas
   sao o que um <button> traz de fabrica e nao queremos.
   Mora no painel.css, e nao no styles.css, de proposito: styles.css e o arquivo
   que o .exe empacota, e esta spec nao pode mexer em nada que ele mostre. */
#profile-row {
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
}

/* ---------------------------------------------------------------- celular */

@media (max-width: 1023px) {
  /* A sidebar vira gaveta. Fora da tela por padrao, entra por cima do
     conteudo — nao empurra, senao a tabela reflui a cada abertura. */
  #app > aside {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.5);
  }
  #app > aside.aberta { transform: translateX(0); }

  #view { padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); }

  /* As telas do exe usam grid de 12 colunas com breakpoints md:/lg: do
     Tailwind, que ja empilham sozinhos no celular. O que sobra sao as tabelas
     largas: elas precisam rolar DENTRO do card, nunca empurrar a pagina. */
  .card { overflow-x: auto; }
  .table { min-width: 560px; }
}

/* Toque: alvo de 40px. No desktop o mouse acerta 24px; o dedo, nao. */
@media (max-width: 1023px) and (pointer: coarse) {
  .btn, .nav-link, .btn-acao { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}