/* Tokens e casca do Lab DM1.

   Tema definido: claro com azul #648DCB. Não é configurável — foi decidido, não
   é preferência. Tudo que é cor sai daqui.

   A cadeia de alturas é a parte delicada: o app ocupa a tela inteira e QUEM
   rola é a lista de cards, nunca a página. Em flex column, os irmãos do meio
   precisam de `flex:1; min-height:0` — um `height:100%` ali empurra o rodapé
   pra fora da tela e corta o fim do conteúdo. */

:root {
  --fundo:      #f7f8fa;
  --superficie: #ffffff;
  --superficie2:#f1f3f6;
  --linha:      #e4e8ed;
  --linha-forte:#c6cfd9;
  --texto:      #10141a;
  --texto2:     #59636f;
  --texto3:     #8a94a0;
  --sombra: 0 8px 24px rgba(16,20,26,.12);
  --veu: rgba(16,20,26,.32);

  /* Azul da marca. Texto em cima dele é SEMPRE branco. */
  --acao:       #648dcb;
  --sobre-acao: #ffffff;
  --acao-fraca: rgba(100,141,203,.15);
  /* Quando o próprio azul vira texto miúdo sobre o fundo claro (aba ativa,
     "✓ hook"), um tom fechado do mesmo azul: #648DCB tem 3,2:1 sobre branco e
     sumiria em 10px. É o mesmo azul, só mais fundo. */
  --acao-txt:   #3f6ba8;

  /* Uma cor por tipo e por formato, para a etiqueta do card. Escuras porque
     aparecem como texto sobre uma tinta clara da própria cor — e porque assim
     aceitam texto branco quando viram chip preenchido. */
  --cor-conteudo:     #15803d;
  --cor-anuncio:      #be123c;
  --cor-lofi:         #b45309;
  --cor-slide:        #4338ca;
  --cor-vlog:         #a21caf;
  --cor-documentario: #0e7490;

  /* Sistema de cor da régua, separado do de tipo/formato pra não confundir. */
  --regua-verde:    #15a05e;
  --regua-amarelo:  #c07807;
  --regua-vermelho: #d32f35;

  /* Escala ÚNICA de canto. Nada de border-radius solto no resto das folhas:
     havia nove valores diferentes espalhados e o app ficava sem sotaque.
     Círculo (50%) só onde a forma é um ponto ou avatar, e o pill de 99px só na
     chave liga/desliga e nas barrinhas da régua, que são linhas de 3-5px e
     ficariam quebradas com canto reto. */
  --raio-p: 5px;    /* etiqueta, contador, badge */
  --raio:   8px;    /* padrão: botão, campo, chip, card */
  --raio-g: 12px;   /* superfície grande: painel, bloco de captura */
  /* Largura do trilho: cabe "Automações" (o rótulo mais longo) dentro do botão
     com folga. Com 76px o texto vazava pra fora do fundo destacado. */
  --trilho: 92px;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* Rodapé do celular. O safe-area de baixo (34px no iPhone 15 Pro) é a faixa
     do indicador de início; reservá-lo inteiro deixava a barra alta demais.
     Descontamos 12px e ainda sobra folga de sobra pro indicador, que ocupa uns
     5px. Os botões nunca chegam perto dele. */
  --tabbar-pad: max(4px, calc(var(--safe-b) - 12px));
  --tabbar-bt: 44px;
  --tabbar-h: calc(var(--tabbar-bt) + var(--tabbar-pad) + 1px);
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  height: 100vh;               /* base segura em qualquer navegador */
  overflow: hidden;
  background: var(--fundo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;   /* sem "puxar pra atualizar" derrubando a tela */
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }

/* 16px NÃO É ESCOLHA DE ESTILO. Abaixo disso o Safari do iOS dá zoom ao focar
   o campo, e o zoom deixa a página arrastável na horizontal. Nenhum campo pode
   descer daqui: densidade se ajusta pelo padding, nunca pela fonte.
   tests/test_css_zoom.mjs falha se alguma regra violar isso. */
button, input, select, textarea { font-family: inherit; font-size: 16px; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }

input[type=text], input[type=url], input[type=password], input[type=number],
input[type=search], select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie2);
  color: var(--texto);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .12s, background .12s;
}
input:focus, select:focus, textarea:focus { border-color: var(--acao); background: var(--fundo); }
input::placeholder, textarea::placeholder { color: var(--texto3); }
textarea { resize: vertical; line-height: 1.55; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* No navegador, dvh acompanha a barra de endereço aparecendo e sumindo. */
@supports (height: 100dvh) {
  body { height: 100dvh; }
}
/* Instalado na tela de início NÃO existe barra de navegador — mas o iOS segue
   descontando a altura dela do dvh, e sobra uma faixa vazia embaixo do rodapé.
   Em standalone, 100vh é a altura real da tela.

   Isto tem que ser SÓ CSS. Já tentei medir window.innerHeight no JS como reforço
   e saiu pior: no iOS instalado o teclado dispara `resize` com a altura reduzida,
   e o valor em linha travava o body naquele tamanho — o rodapé subia ao focar um
   campo e não voltava. 100vh não se mexe com o teclado. */
@media all and (display-mode: standalone) {
  body { height: 100vh; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linha); border-radius: var(--raio-p); border: 3px solid var(--fundo); }

/* ─────────────────────────── Casca ───────────────────────────
   Desktop: trilho lateral + corpo. Celular: corpo + barra inferior. */

#app { display: flex; height: 100%; }
#app[hidden] { display: none; }

.corpo {
  flex: 1;
  min-width: 0;
  min-height: 0;               /* NÃO usar height:100% aqui: empurra a tabbar pra fora */
  display: flex;
  flex-direction: column;
}

#tela { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Trilho lateral (Mac) */
.trilho {
  width: var(--trilho);
  flex: none;
  background: var(--superficie);
  border-right: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 0 calc(14px + var(--safe-b));
  padding-left: var(--safe-l);
}
.trilho-marca { display: block; margin-bottom: 10px; }
.trilho-marca svg { width: 32px; height: 32px; display: block; }
.trilho-aba {
  width: 76px; padding: 9px 4px; border-radius: var(--raio);
  display: grid; gap: 3px; justify-items: center;
  color: var(--texto3); font-size: 10px; font-weight: 600;
  transition: color .12s, background .12s;
}
.trilho-aba .ic { font-size: 18px; line-height: 1; }
.trilho-aba .ic svg { width: 20px; height: 20px; display: block; }
/* Garantia estrutural: o rótulo nunca escapa do botão, mesmo que um nome novo
   seja mais longo do que a largura prevista. */
.trilho-aba .rot, .tabbar button span:not(.ic) {
  max-width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  line-height: 1.25;
}
.trilho-aba:hover { color: var(--texto2); background: var(--superficie2); }
.trilho-aba.ativa { color: var(--acao-txt); background: var(--acao-fraca); }
.trilho-aba.sair { margin-top: auto; }

.tabbar { display: none; }

@media (max-width: 860px) {
  #app { flex-direction: column; }
  .trilho { display: none; }

  .tabbar {
    display: flex;
    flex: none;
    background: var(--superficie);
    border-top: 1px solid var(--linha);
    padding-bottom: var(--tabbar-pad);
  }
  .tabbar button {
    flex: 1; min-width: 0; padding: 0 4px;
    min-height: var(--tabbar-bt);
    display: flex; flex-direction: column; gap: 1px;
    align-items: center; justify-content: center;
    color: var(--texto3); font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  }
  .tabbar button .ic { display: block; height: 19px; }
  .tabbar button .ic svg { width: 19px; height: 19px; display: block; }
  .tabbar button.ativa { color: var(--acao-txt); }
  .tabbar button.ativa .ic { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acao) 40%, transparent)); }
}

/* ─────────────────────────── Login ─────────────────────────── */

#login {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b));
  background: var(--fundo);
}
#login[hidden] { display: none; }
#login form { width: 100%; max-width: 320px; display: grid; gap: 12px; text-align: center; }
.login-marca svg { width: 56px; height: 56px; margin: 0 auto; display: block; }
#login h1 { font-size: 19px; margin-bottom: 6px; }
#login button[type=submit] {
  background: var(--acao); color: var(--sobre-acao); font-weight: 700;
  padding: 14px; border-radius: var(--raio);
}
#login .erro { color: var(--regua-vermelho); font-size: 13px; min-height: 18px; }

/* ─────────────────────────── Utilitários ─────────────────────────── */

.carregando {
  position: fixed; inset: 0; display: grid; place-items: center;
  color: var(--texto3); font-size: 14px; background: var(--fundo); z-index: 70;
}
.carregando[hidden] { display: none; }

#aviso {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(12px);
  bottom: calc(var(--tabbar-h) + 14px);
  background: var(--superficie2); color: var(--texto);
  border: 1px solid var(--linha-forte);
  padding: 10px 18px; border-radius: var(--raio); font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 100; box-shadow: var(--sombra); max-width: calc(100vw - 32px); text-align: center;
}
#aviso.ver { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 861px) { #aviso { bottom: 24px; } }

.chip {
  font-size: 12px; padding: 3px 10px; border-radius: var(--raio-p);
  background: var(--superficie2); border: 1px solid var(--linha);
  color: var(--texto2); white-space: nowrap; display: inline-block;
}
.chip.on { color: var(--regua-verde); border-color: color-mix(in srgb, var(--regua-verde) 40%, transparent); background: color-mix(in srgb, var(--regua-verde) 12%, transparent); }
.chip.erro { color: var(--regua-vermelho); border-color: color-mix(in srgb, var(--regua-vermelho) 40%, transparent); background: color-mix(in srgb, var(--regua-vermelho) 12%, transparent); }

.vazio { color: var(--texto3); font-size: 14px; }

.bt {
  padding: 11px 16px; border-radius: var(--raio); font-size: 14px; font-weight: 700;
  background: var(--acao); color: var(--sobre-acao); transition: filter .12s, opacity .12s;
}
.bt:active { filter: brightness(.92); }
.bt.sec { background: var(--superficie2); color: var(--texto); border: 1px solid var(--linha); }
.bt.sec:active { background: var(--linha); }
.bt.perigo { background: transparent; color: var(--regua-vermelho); border: 1px solid color-mix(in srgb, var(--regua-vermelho) 40%, transparent); }
.bt:disabled { opacity: .4; cursor: default; filter: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}