/* =========================================================
   ARMAZÉM INTELIGENTE — entrar e começar o turno
   Só arrumação: o que fica onde nos ecrãs e1, e2 e e3.
   ========================================================= */

/* ---------- entrar ----------
   Desenho de 17 de setembro (segunda versão). É o único ecrã do PDA com
   fotografia e com a marca: o resto do turno é trabalho, e ali é a porta.

   As medidas do desenho, levadas a 320 × 533 dp, davam letra de 8 sp e
   campos de 30 dp. Aqui ficam no mínimo do sistema — 10 sp e 48 dp — e o
   que se ajustou para caber foram as folgas. */

.entrar { background: var(--c-fundo); }

/* A fotografia ocupa o topo e desvanece para o fundo cinzento. O véu escuro
   em cima é o que deixa ler o branco sobre as prateleiras claras. */
.entrar__foto {
  position: absolute; inset: 0 0 auto 0; height: 330px;
  background:
    linear-gradient(180deg, var(--c-veu) 0%, transparent 45%, var(--c-fundo) 100%),
    url('../img/armazem.png') center top / cover;
}
.entrar__topo, .entrar__boas-vindas, .sessao, .versao { position: relative; }

.entrar__topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--e-lg) var(--e-lg) 0 var(--e-xl); color: var(--c-sobre-marca);
}

.aparelho { text-align: right; }
.aparelho__nome { font-size: var(--t-small); font-weight: 500; }
.aparelho__estado { display: flex; align-items: center; gap: var(--e-sm); font-size: var(--t-tiny); }
.aparelho__estado svg { height: 11px; width: auto; }

.entrar__boas-vindas { padding: var(--e-md) var(--e-xl) 0; color: var(--c-sobre-marca); }
.entrar__titulo { font-size: var(--t-huge); font-weight: 700; line-height: 1.1; }
.entrar__lema   { font-size: var(--t-small); }
.entrar__risco  { display: block; width: 30px; height: 3px; margin-top: var(--e-md); background: var(--c-acao); }

.sessao {
  margin: var(--e-lg) var(--e-md) 0; padding: var(--e-lg);
  display: flex; flex-direction: column; gap: var(--e-md);
  background: var(--c-cartao); border-radius: var(--r-lg);
}
.sessao__titulo { font-size: var(--t-big); font-weight: 700; line-height: 1.15; }
.sessao__sub    { font-size: var(--t-small); color: var(--c-texto-2); margin-top: calc(-1 * var(--e-md)); }

.entrada-texto { display: flex; flex-direction: column; gap: var(--e-xs); }
.entrada-texto__rotulo { font-size: var(--t-small); font-weight: 700; }
.entrada-texto__caixa {
  display: flex; align-items: center; gap: var(--e-sm); min-height: var(--alvo);
  padding-left: var(--e-md); background: var(--c-fundo);
  border: 1px solid var(--c-cinzento); border-radius: var(--r-md);
}
.entrada-texto__caixa:focus-within { border-color: var(--c-acento); }
.entrada-texto__icone { width: 18px; height: 18px; flex: none; color: var(--c-invertido); }
.entrada-texto__campo {
  flex: 1; min-width: 0; align-self: stretch; padding: 0 var(--e-md) 0 0;
  border: 0; background: none; outline: none;
  font: 400 var(--t-body) var(--f-base); color: var(--c-texto);
}
.entrada-texto__campo::placeholder { color: var(--c-texto-3); }
.entrada-texto__ver {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 36px; align-self: stretch; border: 0; background: none; color: var(--c-texto-2);
}
.entrada-texto__ver svg { width: 20px; height: 20px; }

/* passo 2: o utilizador do passo 1 fica à vista, com «mudar» */
.sessao__quem {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-sm);
  padding: var(--e-sm) var(--e-md); border-radius: var(--r-sm, 6px);
  background: var(--c-fundo); font-size: var(--t-small);
}
.sessao__nome  { font-weight: 700; }
.sessao__mudar { color: var(--c-acento); font-weight: 700; }
.sessao__entrar { position: relative; margin-top: var(--e-sm); }
.sessao__seta { position: absolute; right: var(--e-lg); width: 22px; height: 22px; }

.versao { margin-top: auto; padding-bottom: var(--e-md); text-align: center; font-size: var(--t-micro); color: var(--c-texto-3); letter-spacing: .03em; }

/* ---------- o início da função ----------
   Desenho de 22 de setembro. «Trabalho»: uma opção só, começar as
   tarefas. Arrumar e corrigir posição não são menus — são tarefas, e vêm
   pela fila. Por baixo, as «Operações», em quatro quadrados: o que a
   função faz por iniciativa própria. Em baixo, a barra de abas. */
.menu { background: var(--c-cartao); }
.menu__corpo { gap: var(--e-sm); padding-top: var(--e-xs); }

/* Trabalho: o cartão grande que começa as tarefas, com o contorno de
   acento e o círculo cheio. O .fazer__opcao sem --primeira fica para um
   cartão secundário, se voltar a haver. */
.fazer { display: flex; flex-direction: column; gap: var(--e-xs); }
.fazer--outras { padding-top: var(--e-sm); border-top: 1px solid var(--c-neutro-suave); }

/* As operações: quatro quadrados, 2 × 2, a toda a largura do corpo.
   Ícone por cima do nome, como os mosaicos de um telemóvel. */
.quadrados { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-sm); }
.quadrados--linhas { gap: var(--e-xs); }
/* Uma por linha, a toda a largura: o ícone à esquerda e o nome a seguir.
   Lê-se de cima para baixo e o alvo é a linha inteira. */
.quadrados--linhas { grid-template-columns: 1fr; }
/* Três por linha, quando são poucos e o nome é curto — o menu do gestor. */
.quadrados--tres { grid-template-columns: repeat(3, 1fr); gap: var(--e-xs); }
.quadrados--tres .quadrado { aspect-ratio: auto; min-height: 72px; gap: var(--e-xs); padding: var(--e-xs); }
.quadrados--tres .quadrado__circulo { width: 30px; height: 30px; }
.quadrados--tres .quadrado__circulo svg { width: 18px; height: 18px; }
.quadrados--tres .quadrado__nome { font-size: var(--t-tiny); }
.quadrados--linhas .quadrado {
  flex-direction: row; justify-content: flex-start; gap: var(--e-md);
  aspect-ratio: auto; min-height: var(--alvo); padding: var(--e-xs) var(--e-md); text-align: left;
}
.quadrado {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-sm);
  min-height: var(--alvo-lg); aspect-ratio: 1.6; padding: var(--e-sm); text-align: center;
  background: var(--c-cartao); border: 1px solid var(--c-cinzento); border-radius: var(--r-md);
  font: 700 var(--t-small) var(--f-base); color: var(--c-texto); line-height: 1.2;
}
.quadrado__circulo {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--c-neutro-suave); color: var(--c-invertido);
}
.quadrado__circulo svg { width: 22px; height: 22px; }
.fazer__titulo { font-size: var(--t-lead); font-weight: 700; }
.fazer__opcao {
  display: flex; align-items: center; gap: var(--e-md); width: 100%; min-height: var(--alvo-lg);
  padding: var(--e-md); text-align: left; font: inherit; color: var(--c-texto);
  background: var(--c-cartao); border: 1px solid var(--c-cinzento); border-radius: var(--r-md);
}
.fazer__opcao--primeira { background: var(--c-neutro-suave); border: 2px solid var(--c-acento); }
.fazer__circulo {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--c-neutro-suave); color: var(--c-invertido);
}
.fazer__opcao--primeira .fazer__circulo { background: var(--c-acento); color: var(--c-sobre-marca); }
.fazer__circulo svg { width: 26px; height: 26px; }
.fazer__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-xs); }
.fazer__nome  { font-size: var(--t-lead); font-weight: 700; line-height: 1.2; }
.fazer__conta { font-size: var(--t-body); color: var(--c-texto-2); }
.fazer__opcao .atalho__seta { width: 16px; height: 16px; }
.fazer__opcao--primeira .atalho__seta { color: var(--c-acento); }

/* A barra de abas: ícone por cima do nome. A aba em que se está leva a cor
   de acento, um círculo por trás do ícone e um traço por baixo. */
.abas-fundo {
  display: grid; grid-template-columns: repeat(3, 1fr); flex: none;
  padding: var(--e-sm) var(--e-lg) var(--e-md);
  margin: 0 var(--e-sm) var(--e-sm);
  background: var(--c-invertido); border-radius: var(--r-lg);
}
.abas-fundo__aba {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e-xs);
  min-height: var(--alvo); padding: var(--e-xs) 0 var(--e-sm); border: 0; background: none;
  font: 500 var(--t-tiny) var(--f-base); color: rgba(255,255,255,.72);
}
.abas-fundo__icone {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
}
.abas-fundo__icone svg { width: 22px; height: 22px; }
.abas-fundo__aba[aria-current="page"] { color: var(--c-acao); font-weight: 700; }
.abas-fundo__aba[aria-current="page"] .abas-fundo__icone { background: rgba(255,255,255,.12); }
.abas-fundo__aba[aria-current="page"]::after {
  content: ""; position: absolute; bottom: 0; width: 24px; height: 3px;
  border-radius: var(--r-pill); background: var(--c-acao);
}
.abas-fundo__contador {
  position: absolute; top: 0; right: -4px; display: flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 var(--e-xs); border-radius: var(--r-pill);
  background: var(--c-acao); color: var(--c-sobre-marca); font-size: var(--t-micro); font-weight: 700;
}

.saudacao__titulo { font-size: var(--t-big); font-weight: 700; line-height: 1.2; }
.saudacao__sub    { font-size: var(--t-small); color: var(--c-texto-2); }

.seccao-menu { display: flex; flex-direction: column; gap: var(--e-sm); }
.seccao-menu--separada { padding-top: var(--e-lg); border-top: 1px solid var(--c-neutro-suave); }
.seccao-menu__cabeca { display: flex; align-items: center; gap: var(--e-md); }
.seccao-menu__titulo { font-size: var(--t-lead); font-weight: 700; white-space: nowrap; }
.seccao-menu__traco  { flex: 1; height: 1px; background: var(--c-neutro-suave); }
.seccao-menu__ver {
  display: flex; align-items: center; gap: var(--e-xs); white-space: nowrap;
  font-size: var(--t-tiny); color: var(--c-texto-2); text-decoration: none;
}
.seccao-menu__ver svg { width: 12px; height: 12px; }

.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-sm); }
/* poucos atalhos: um por linha, a toda a largura, que se acertam melhor com o polegar */
.atalhos--lista { grid-template-columns: 1fr; }
.atalho {
  display: flex; align-items: center; gap: var(--e-sm); min-height: var(--alvo); width: 100%;
  padding: var(--e-sm); text-align: left;
  background: var(--c-cartao); border: 1px solid var(--c-cinzento); border-radius: var(--r-md);
  font: inherit; color: var(--c-texto);
}
.atalho__circulo {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--r-pill);
  background: var(--c-neutro-suave); color: var(--c-invertido);
}
.atalho__circulo svg { width: 18px; height: 18px; }
.atalho__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.atalho__nome  { font-size: var(--t-small); font-weight: 700; line-height: 1.2; }
.atalho__conta { font-size: var(--t-tiny); line-height: 1.25; }
.atalho__seta  { width: 12px; height: 12px; flex: none; }

/* As tarefas da função: fundo de acento e um círculo invertido por trás do
   ícone. Têm o alvo grande porque são o caminho do turno. */
.atalho--tarefa {
  min-height: var(--alvo-lg); border-color: transparent;
  background: var(--c-acento); color: var(--c-sobre-marca);
}
.atalho--tarefa .atalho__circulo { width: 36px; height: 36px; background: var(--c-invertido); color: var(--c-sobre-marca); }
.atalho--tarefa .atalho__circulo svg { width: 20px; height: 20px; }

.navegacao {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-sm); flex: none;
  padding: var(--e-md) var(--e-lg) var(--e-lg); background: var(--c-fundo);
}
.navegacao--duas { grid-template-columns: repeat(2, 1fr); }
.navegacao__botao {
  display: flex; align-items: center; justify-content: center; gap: var(--e-sm); min-height: var(--alvo);
  border: 0; border-radius: var(--r-md); background: var(--c-acento); color: var(--c-sobre-marca);
  font: 700 var(--t-small) var(--f-base);
}
.navegacao__botao svg { width: 18px; height: 18px; flex: none; }
.navegacao__contador {
  display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 var(--e-sm);
  border-radius: var(--r-pill); background: var(--c-acao); color: var(--c-sobre-marca);
  font-size: var(--t-tiny); font-weight: 700;
}