/* ==========================================================================
   AJUSTES — tudo o que é NOSSO mora aqui.

   ⚠️ NUNCA editar `sistema.css`. Aquele arquivo é do handoff do Claude
   Design e será substituído inteiro quando vier versão nova. Este carrega
   DEPOIS, e por isso vence.

   O que este arquivo faz, em ordem:
     1. a chave claro/escuro
     2. a identidade da marca (âmbar, os dois botões, o menu)
     3. A CAMADA DE CELULAR — a parte que não vinha pronta
     4. o login
     5. campos e recados
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. A CHAVE CLARO/ESCURO

   O sistema é CLARO de propósito: a atendente olha para ele oito horas por
   dia, e no celular no meio da loja, com luz do dia batendo, fundo escuro
   vira espelho. O escuro da marca fica onde funciona — no menu.

   Se ele preferir o sistema todo escuro, como o site: trocar as quatro
   linhas abaixo pelos valores do bloco comentado. É isso, não há mais nada.
   -------------------------------------------------------------------------- */
:root {
  /* O âmbar da marca, como no site (--co-amber / taupe do Design System). */
  --co-accent:        #c8912f;
  --co-accent-strong: #a8761f;

  /* A pílula dos botões — o site usa pílula, o sistema vinha com canto. */
  --co-r-btn: 999px;

  /* O alvo mínimo do dedo. 48px é o piso; no celular a gente sobe. */
  --co-alvo: 48px;
  --co-alvo-gordo: 56px;
}

/*  ESCURO (se ele pedir) — trocar o bloco acima por:
    --co-paper: #14181b;  --co-surface: #1b2124;  --co-surface-alt: #20262a;
    --co-ink: #e8e6e3;    --co-border: #2d3639;   --co-gray: #98a0a1;        */

/* --------------------------------------------------------------------------
   2. A IDENTIDADE DA MARCA
   -------------------------------------------------------------------------- */

/* Os DOIS botões do site, e só eles. ⚠️ Não criar variantes: ele já
   rejeitou o prata e o cinza claro no site. */
.co-btn {
  border-radius: var(--co-r-btn);
  min-height: var(--co-alvo);
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: transform .12s ease, filter .12s ease;
}

/* Principal: o degradê preto→taupe da marca. */
.co-btn--primary,
.co-btn--hero {
  background: linear-gradient(120deg, #14181b 30%, #8a7864);
  border-color: transparent;
  color: #fff;
}
/* ⚠️ No hover NÃO escurecer até perder a leitura do texto — regra do site. */
.co-btn--primary:hover,
.co-btn--hero:hover { filter: brightness(1.12); }

/* Secundário: contorno. */
.co-btn--secondary {
  background: transparent;
  border: 1.5px solid var(--co-border-strong);
  color: var(--co-ink);
}
.co-btn--secondary:hover { border-color: var(--co-gray); }

/* O "afunda e volta" do clique (.co-press do site). */
.co-btn:active { transform: translateY(1px) scale(.985); }

/* Botão que ocupa a linha inteira — no celular é o padrão. */
.co-btn--bloco { display: flex; width: 100%; justify-content: center; }

/* O logo no menu escuro. */
.co-side__brand { padding: 22px 18px; justify-content: flex-start; }
.co-side__brand img { width: 100%; max-width: 168px; height: auto; display: block; }

/* O item de menu ativo ganha o filete âmbar da marca. */
.co-nav.is-active {
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 3px 0 0 var(--co-accent);
}

.co-side__user { gap: 10px; align-items: center; }
.co-side__who { min-width: 0; }
.co-side__sair {
  font-size: 12px; color: var(--co-gray-light);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.co-side__sair:hover { color: #fff; border-bottom-color: currentColor; }

/* A barra de cima: no computador mostra só o nome da tela; a marca e o
   botão de sair vivem no menu lateral. */
.co-topbar__marca { display: none; align-items: center; gap: 9px; min-width: 0; }
.co-topbar__marca img { width: 26px; height: 26px; flex: 0 0 26px; }
.co-topbar__marca span {
  font-weight: 800; font-size: 15px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-topbar .co-iconbtn { display: none; }

/* No COMPUTADOR a barra de cima não existe: o menu lateral já tem a marca e
   o Sair, e o título grande já está no conteúdo. Uma faixa vazia de 56px só
   rouba altura. Ela volta a existir quando houver o que pôr nela (a busca
   das conversas) — e no celular ela é o cabeçalho, ver a camada abaixo. */
.co-topbar { display: none; }

/* --------------------------------------------------------------------------
   3. A CAMADA DE CELULAR  ← a parte que não vinha pronta

   ⚠️ Por que uma barra EMBAIXO e não o menu lateral encolhido: o desenho
   do Design vira só ícones abaixo de 1024px, e ícone sozinho obriga a
   decorar desenho. A régua deste sistema é o pai dele, de 84 anos, e a
   atendente de pé no meio da loja. Ícone GRANDE com a palavra embaixo, no
   alcance do polegar.
   -------------------------------------------------------------------------- */

.co-tabbar { display: none; }

/* ⚠️ 1024px, NÃO 820px — e o motivo é o defeito visto em 14/set/2026.
   O sistema.css do Design encolhe o menu para SÓ ÍCONES abaixo de 1024px.
   Com a barra de baixo entrando só em 820, sobrava uma faixa (iPad deitado,
   janela de navegador não maximizada) onde o menu ficava sem palavra nenhuma
   — justamente o estado que este arquivo existe para eliminar.

   Casando o corte com o do Design, o menu só-ícone NUNCA acontece: ou é o
   menu lateral inteiro, com as palavras, ou é a barra de baixo, com as
   palavras. Não há estado do meio.

   Mexeu num? Mexa no outro. */
@media (max-width: 1024px) {

  /* O menu lateral some por inteiro. Quem manda é a barra de baixo. */
  .co-side { display: none; }

  /* No celular ela VOLTA, como cabeçalho do aplicativo: marca e sair. */
  .co-topbar {
    display: flex;
    position: sticky; top: 0; z-index: 30;
    justify-content: space-between; gap: 10px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top));
    background: var(--co-grad-side);
    border-bottom: 0;
    color: #fff;
  }
  .co-topbar__marca { display: flex; color: #fff; }
  .co-topbar .co-iconbtn {
    display: inline-flex; color: #fff; background: rgba(255,255,255,.1);
    border-color: transparent;
    width: var(--co-alvo); height: var(--co-alvo);
  }
  /* Some o que não cabe no celular. */
  .co-topbar .co-search,
  .co-topbar .co-storepick { display: none; }

  /* O conteúdo respira, e sobra espaço para a barra de baixo não tapar
     o fim da página. */
  .co-content {
    padding: 16px 16px calc(96px + env(safe-area-inset-bottom));
  }

  /* ---------- A BARRA DE BAIXO ---------- */
  .co-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--co-surface);
    border-top: 1px solid var(--co-border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 14px rgba(20, 24, 27, .08);
  }

  .co-tabbar__item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    min-height: var(--co-alvo-gordo);
    padding: 8px 2px 7px;
    color: var(--co-gray);
    text-decoration: none;
    font-size: 11px; font-weight: 700; letter-spacing: -.01em;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .co-tabbar__item span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .co-tabbar__item .co-ico { flex: 0 0 auto; }

  /* O ativo: âmbar + filete em cima. Cor NUNCA sozinha — quem não
     enxerga bem cor precisa do traço pra saber onde está. */
  .co-tabbar__item.is-active { color: var(--co-accent-strong); }
  .co-tabbar__item.is-active::before {
    content: ""; position: absolute; top: 0; left: 18%; right: 18%;
    height: 3px; border-radius: 0 0 3px 3px; background: var(--co-accent);
  }
  .co-tabbar__item:active { background: var(--co-chip); }

  /* Título da tela um pouco menor — o cabeçalho já disse onde ela está. */
  .co-h1 { font-size: 22px; }
  .co-pagehead { margin-bottom: 4px; }

  /* Tudo que é toque cresce. */
  .co-btn { min-height: var(--co-alvo-gordo); font-size: 15px; }
  .co-input, .co-textarea, .co-campo__entrada { min-height: var(--co-alvo-gordo); font-size: 16px; }
}

/* ⚠️ 16px no campo não é estética: abaixo disso o iPhone DÁ ZOOM sozinho
   ao tocar, e a tela salta de lugar. Vale em qualquer largura. */
.co-input, .co-textarea, .co-campo__entrada { font-size: 16px; }

/* Telas bem estreitas (iPhone SE): a palavra encolhe antes de quebrar. */
@media (max-width: 360px) {
  .co-tabbar__item { font-size: 10px; }
}

/* --------------------------------------------------------------------------
   4. O LOGIN
   -------------------------------------------------------------------------- */
.co-body--entrar { background: var(--co-grad-side); }

.co-entrar {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.co-entrar__caixa {
  width: 100%; max-width: 380px;
  background: var(--co-surface);
  border-radius: var(--co-r-card);
  padding: 30px 26px 24px;
  box-shadow: 0 18px 50px rgba(12, 16, 19, .38);
  display: flex; flex-direction: column; gap: 16px;
}

.co-entrar__logo { width: 172px; max-width: 70%; height: auto; align-self: center; }

.co-entrar__titulo {
  margin: 0; text-align: center;
  font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  color: var(--co-gray);
}

.co-entrar__rodape {
  margin: 4px 0 0; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--co-gray-light);
}

/* --------------------------------------------------------------------------
   5. CAMPOS E RECADOS
   -------------------------------------------------------------------------- */
.co-campo { display: flex; flex-direction: column; gap: 6px; }

.co-campo__rotulo {
  font-size: 12px; font-weight: 800; color: var(--co-gray);
  text-transform: uppercase; letter-spacing: .12em;
}

.co-campo__entrada {
  width: 100%; box-sizing: border-box;
  min-height: var(--co-alvo);
  padding: 12px 14px;
  border: 1.5px solid var(--co-border-strong);
  border-radius: var(--co-r-field);
  background: var(--co-surface);
  color: var(--co-ink);
  font-family: inherit;
}
.co-campo__dica { font-size: 12px; color: var(--co-gray-light); }

.co-campo__entrada:focus {
  outline: none;
  border-color: var(--co-accent);
  box-shadow: 0 0 0 3px rgba(200, 145, 47, .18);
}

.co-recado {
  padding: 12px 14px; border-radius: var(--co-r-field);
  font-size: 13px; line-height: 1.5; font-weight: 600;
  border: 1px solid transparent;
}
.co-recado--ok {
  background: var(--co-success-bg); color: var(--co-success);
  border-color: color-mix(in srgb, var(--co-success) 26%, transparent);
}
.co-recado--erro {
  background: var(--co-danger-bg); color: var(--co-danger-text);
  border-color: color-mix(in srgb, var(--co-danger) 26%, transparent);
}

/* Quem navega por teclado precisa VER onde está. */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--co-accent);
  outline-offset: 2px;
  border-radius: 6px;
}