/* =====================================================================
   Padrao visual do Painel de Pedidos — Oggi Sorvetes

   Toda cor e toda fonte do sistema saem daqui. Nenhum outro arquivo
   escreve um valor de cor direto: trocar uma cor e trocar uma linha
   deste arquivo.

   O magenta #D30084 foi lido do arquivo da logo, nao escolhido a olho.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  /* marca */
  --magenta:        #D30084;
  --magenta-escuro: #9C0062;
  --magenta-claro:  #FCEBF4;

  /* texto */
  --tinta:        #2A1721;
  --tinta-media:  #7A6870;
  --tinta-clara:  #A99AA2; /* uso restrito: controle desabilitado ou decoracao sem texto (borda); nunca em texto informativo */
  --tinta-desabilitada: #CFC4CB; /* texto do botao de dia desabilitado */
  --texto-sobre-cor: #FFFFFF; /* texto sobre fundo magenta ou colorido */

  /* superficies */
  --fundo:      #FBF7F9;
  --superficie: #FFFFFF;
  --linha:      #EDDFE7;
  --linha-suave:#F6EDF2;
  --fundo-cabecalho: #FDFAFC; /* fundo do cabecalho da tabela */

  /* alerta: usado so na coluna "Faltam contar" e em filial sem dia */
  --alerta:       #B45309;
  --alerta-fundo: #FDF3E4;

  /* erro: usado so em mensagem de falha */
  --erro:       #B42318;
  --erro-fundo: #FEE4E2;

  --titulo: 'Familjen Grotesk', system-ui, sans-serif;
  --texto:  'Instrument Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 14px;
  line-height: 1.45;
  /* numeros de largura fixa: numa coluna de valores os digitos alinham */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: 0;
}

/* ---------- barra superior ---------- */
.barra {
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px;
}
.marca { display: flex; align-items: center; gap: 7px; }
.marca img { height: 22px; width: auto; display: block; }

.nav { display: flex; gap: 2px; }
.nav a {
  padding: 7px 12px; border-radius: 7px; text-decoration: none;
  color: var(--tinta-media); font-weight: 500;
}
.nav a[aria-current="page"] {
  background: var(--magenta-claro); color: var(--magenta-escuro); font-weight: 600;
}
.nav a:focus-visible, .botao:focus-visible, .botao-fantasma:focus-visible,
.botao-tracejado:focus-visible, .faixa-semana a:focus-visible,
.dia:focus-visible, .tijolinho:focus-visible, .aba:focus-visible,
.eu:focus-visible {
  outline: 2px solid var(--magenta); outline-offset: 2px;
}

/* cracha com as iniciais: e um botao (sair), mas com cara de cracha */
.eu {
  margin-left: auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--magenta); color: var(--texto-sobre-cor);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  border: none; padding: 0; font-family: inherit; cursor: pointer;
}
.eu[hidden] { display: none; }

/* ---------- botoes ---------- */
.botao {
  background: var(--magenta); color: var(--texto-sobre-cor); border: none;
  border-radius: 7px; padding: 8px 14px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.botao:hover { background: var(--magenta-escuro); }
.botao:disabled { background: var(--linha); color: var(--tinta-clara); cursor: not-allowed; }

.botao-fantasma {
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 7px; padding: 7px 13px;
  font: inherit; font-weight: 500; cursor: pointer;
}
.botao-fantasma:hover { border-color: var(--tinta-clara); }
.botao-fantasma:disabled { color: var(--tinta-clara); cursor: not-allowed; }

.botao-tracejado {
  background: var(--superficie); color: var(--magenta-escuro);
  border: 1px dashed var(--magenta); border-radius: 7px; padding: 8px 14px;
  font: inherit; font-weight: 600; cursor: pointer;
}

/* ---------- cabecalho do dia ---------- */
.cabecalho-dia {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 16px 18px 14px; flex-wrap: wrap;
}
.nome-do-dia { font-size: 30px; line-height: 1; letter-spacing: -1px; }
.data-do-dia { color: var(--tinta-media); margin: 5px 0 0; }
.resumo-do-dia { margin-left: auto; text-align: right; }
.resumo-do-dia b {
  display: block; font-family: var(--titulo); font-size: 25px;
  font-weight: 600; letter-spacing: -0.6px; line-height: 1.1;
}
.resumo-do-dia span { color: var(--tinta-media); }

/* ---------- faixa da semana ---------- */
.faixa-semana { display: flex; gap: 3px; padding: 0 18px 14px; }
.faixa-semana a {
  flex: 1; text-align: center; padding: 7px 0 6px;
  border-radius: 7px; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--linha);
  color: var(--tinta-media); font-size: 12px;
}
.faixa-semana a b {
  display: block; font-family: var(--titulo); font-size: 16px;
  font-weight: 600; color: var(--tinta);
}
.faixa-semana a[aria-current="page"] {
  background: var(--magenta); border-color: var(--magenta); color: var(--texto-sobre-cor);
}
.faixa-semana a[aria-current="page"] b { color: var(--texto-sobre-cor); }
.faixa-semana a.vazio, .faixa-semana a.vazio b { color: var(--tinta-media); }

/* ---------- abas do celular ----------
   Escondidas por padrao: so aparecem dentro do media de celular, la' embaixo.
   O DOM existe em qualquer largura -- quem decide mostrar ou nao e' so' o CSS. */
.abas { display: none; gap: 6px; padding: 0 18px 10px; }
.aba {
  font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--superficie); color: var(--tinta-media);
  border: 1px solid var(--linha); border-radius: 7px; padding: 8px 12px; cursor: pointer;
}
.aba.aba-ativa { background: var(--magenta); border-color: var(--magenta); color: var(--texto-sobre-cor); }

/* ---------- quadro ---------- */
.quadro { display: flex; gap: 8px; padding: 0 18px 18px; align-items: flex-start; }
.coluna { flex: 1; min-width: 0; }
.coluna-topo {
  display: flex; align-items: baseline; gap: 6px;
  padding-bottom: 6px; margin-bottom: 7px;
  border-bottom: 2px solid var(--linha);
}
.coluna-topo h3 { font-family: var(--texto); font-size: 12px; font-weight: 600;
                  color: var(--tinta-media); letter-spacing: 0; }
.coluna-topo .conta {
  margin-left: auto; font-family: var(--titulo); font-size: 16px;
  font-weight: 600; line-height: 1;
}
.coluna.atencao .coluna-topo { border-bottom-color: var(--alerta); }
.coluna.atencao h3, .coluna.atencao .conta { color: var(--alerta); }
.coluna.andando .coluna-topo { border-bottom-color: var(--magenta); }
.coluna.andando h3, .coluna.andando .conta { color: var(--magenta); }
.coluna-vazia { color: var(--tinta-media); font-size: 12px; padding: 6px 2px; }

.tijolinho {
  display: flex; gap: 6px; align-items: baseline; width: 100%; text-align: left;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 7px; padding: 7px 9px; margin-bottom: 4px;
  font: inherit; cursor: pointer;
}
.tijolinho:hover { border-color: var(--tinta-clara); }
.tijolinho[aria-pressed="true"] {
  border-color: var(--magenta); box-shadow: 0 0 0 2px var(--magenta-claro);
}
.tijolinho .cod { font-size: 10px; color: var(--tinta-media);
                  font-weight: 600; min-width: 16px; }
.tijolinho .nome { font-size: 12px; font-weight: 500; }
.tijolinho.apagado { opacity: 0.45; }
.tijolinho.avulso { border-style: dashed; border-color: var(--magenta); }
.tijolinho .marca-avulso {
  margin-left: auto; font-size: 9px; font-weight: 600;
  color: var(--magenta-escuro); background: var(--magenta-claro);
  border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}

.cracha-uf {
  font-size: 9px; font-weight: 600; color: var(--tinta-media);
  background: var(--linha-suave); border-radius: 3px; padding: 1px 5px;
}

/* ---------- painel lateral ---------- */
.painel {
  width: 250px; flex-shrink: 0;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 10px; overflow: hidden;
}
/* botao "Voltar ao quadro": so aparece no celular, onde o painel vira uma
   segunda tela -- ver o media abaixo. */
.voltar-quadro { display: none; margin: 10px 15px 0; }
.painel-topo { padding: 13px 15px; border-bottom: 1px solid var(--linha-suave); }
.painel-topo h3 { font-size: 18px; }
.painel-topo p { margin: 3px 0 0; color: var(--tinta-media); font-size: 12px; }
.campo {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 15px; border-bottom: 1px solid var(--linha-suave);
}
.campo span { color: var(--tinta-media); font-size: 13px; }
.campo b { font-weight: 600; }
.painel-acoes { padding: 12px 15px; display: grid; gap: 8px; }
.painel-acoes .botao, .painel-acoes .botao-fantasma { width: 100%; }

/* campos editaveis do painel (caixas, valor e responsavel do pedido) */
.campo.campo-editavel { align-items: flex-start; }
.campo label { color: var(--tinta-media); font-size: 13px; }
.campo-corpo { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.campo-corpo input, .campo-corpo select {
  font: inherit; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: 6px; padding: 5px 8px;
  width: 110px; text-align: right;
}
.campo-corpo select { width: auto; max-width: 140px; text-align: left; }
.campo-corpo input:focus-visible, .campo-corpo select:focus-visible {
  outline: 2px solid var(--magenta); outline-offset: 1px;
}
.campo-corpo input:read-only, .campo-corpo select:disabled {
  background: var(--linha-suave); color: var(--tinta-clara); cursor: not-allowed;
}
.campo-mensagem { margin: 0; font-size: 11px; color: var(--erro); }
.campo-mensagem[hidden] { display: none; }

/* ---------- formulario de incluir/editar filial ---------- */
.acoes-filiais { padding: 14px 18px 0; }

.form-filial {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 10px; margin: 14px 18px; padding: 16px 18px;
}
.form-filial h2 { font-size: 17px; margin-bottom: 10px; }
.form-filial .campo input {
  font: inherit; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: 6px; padding: 6px 9px;
  width: 60%;
}
.form-filial .campo input:focus-visible {
  outline: 2px solid var(--magenta); outline-offset: 1px;
}
.form-filial-acoes { display: flex; gap: 8px; margin-top: 14px; }
.form-filial-perigo {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linha);
}

/* ---------- tabela ---------- */
/* a tabela de filiais tem 12 colunas: numa tela estreita ela rola de lado
   dentro desta caixa, e a pagina em si nunca rola de lado */
.tabela-rolavel { overflow-x: auto; max-width: 100%; }
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabela th {
  text-align: left; font-weight: 500; font-size: 12px; color: var(--tinta-media);
  padding: 9px 18px; background: var(--fundo-cabecalho); border-bottom: 1px solid var(--linha);
}
.tabela th.meio, .tabela td.meio { text-align: center; padding-left: 0; padding-right: 0; }
.tabela td { padding: 9px 18px; border-bottom: 1px solid var(--linha-suave); }
.tabela tr:last-child td { border-bottom: none; }

/* botao de dia da semana, na tela de filiais */
.dia {
  width: 36px; height: 28px; border-radius: 6px;
  border: 1px solid var(--linha); background: var(--superficie);
  font: inherit; font-size: 11px; font-weight: 600;
  color: var(--tinta-media); cursor: pointer; padding: 0;
}
.dia[aria-pressed="true"] {
  background: var(--magenta); border-color: var(--magenta); color: var(--texto-sobre-cor);
}
.dia:disabled { background: var(--linha-suave); border-color: var(--linha-suave);
                color: var(--tinta-desabilitada); cursor: not-allowed; }
/* dia ligado mas travado (quem so le, filial "Nao abriu", sem internet):
   continua dizendo que esta ligado. Sem esta regra, .dia:disabled (mesma
   especificidade de .dia[aria-pressed="true"], e depois no arquivo)
   pintava ligado e desligado iguais, e a rotina sumia da vista de quem
   nao pode mexer nela -- e de quem esta com a loja "Nao abriu", cujos
   dias ficam desligados mas guardados. Contraste do texto: 7:1. */
.dia[aria-pressed="true"]:disabled {
  background: var(--magenta-claro); border-color: var(--magenta-claro);
  color: var(--magenta-escuro);
}

/* ---------- avisos ---------- */
.aviso {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; font-size: 13px;
  background: var(--alerta-fundo); border-bottom: 1px solid var(--linha);
}
.aviso.erro { background: var(--erro-fundo); color: var(--erro); }
.aviso p { margin: 0; }
/* aviso que toma a pagina inteira (configuracao errada, conta sem perfil) */
.aviso-pagina { margin: 24px; border-radius: 8px; flex-wrap: wrap; }
.aviso[hidden] { display: none; }

/* texto so para leitor de tela: fora da vista, mas lido (ex.: o anuncio
   da etapa nova no painel do quadro) */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- celular ---------- */
@media (max-width: 720px) {
  .quadro { flex-direction: column; padding: 0 12px 12px; }
  .coluna { width: 100%; display: none; }
  .coluna.aba-ativa { display: block; }
  .painel { width: 100%; }
  .faixa-semana { overflow-x: auto; }
  .cabecalho-dia { padding: 12px; }
  .nome-do-dia { font-size: 24px; }

  /* as seis colunas viram seis abas */
  .abas { display: flex; overflow-x: auto; padding: 0 12px 10px; }

  /* o botao de voltar so existe (no DOM) quando o painel esta aberto --
     aqui so' precisa ficar visivel */
  .voltar-quadro { display: inline-flex; align-items: center; justify-content: center; }

  /* o painel vira uma segunda tela: com um pedido escolhido, some o
     cabecalho do dia, a faixa da semana, a barra de abas e as colunas */
  body.painel-aberto .cabecalho-dia,
  body.painel-aberto .faixa-semana,
  body.painel-aberto .abas,
  body.painel-aberto .coluna { display: none; }

  /* alvo de toque confortavel */
  .botao, .botao-fantasma, .botao-tracejado, .faixa-semana a, .tijolinho,
  .aba, .voltar-quadro { min-height: 44px; }
  .dia { width: 40px; height: 40px; }
}

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