/* =============================================================================
   Workee Staff — CSS de tela.

   Este arquivo e o antigo public/workee_pro/css/staffapp.css movido para cima dos
   tokens de base.css. O layout e o MESMO de antes de proposito: aqui so as cores
   literais viraram token. O redesign das telas e das Tasks 14/15.

   Tres coisas nao sao traducao literal e estao comentadas onde acontecem:
   1. fundo solido sob texto branco usa token INVARIANTE de tema (--wk-primary-solid,
      --wk-positive-solid) e declara o color explicitamente — antes o branco vinha do
      body, que agora e --wk-text e reprovaria em AA;
   2. as pilulas de status trocaram preenchimento saturado por par soft/-text, porque
      nao existe --wk-warning-solid e branco sobre --wk-warning reprova nos DOIS temas —
      2.77:1 no claro (#D98A04) e 2.26:1 no escuro (#E3A008), recalculadas em 05/08/2026
      a partir dos valores de token, contra os 4.5:1 de AA;
   3. a marca (logo) e branca em todos os arquivos de /images, entao ela anda sempre
      sobre preenchimento de marca — no tema claro ela sumiria sobre --wk-bg.
   ========================================================================== */

/* --------------------------------------------------------------- cabecalho */

/* Azul de marca no claro, grafite no escuro — mas isso agora e assunto do token, nao
   desta regra. Ate a Task 6 o tema estava ramificado AQUI, em tres regras (a base mais
   um @media e um :root[data-theme=dark]), e era a unica ramificacao de tema em nivel de
   regra do projeto: em todo o resto o tema mora nos tokens, que e onde ele deve morar.
   Com --wk-header-bg/--wk-header-ink o mesmo hex serve a regra, o
   <meta name="theme-color"> e o theme.js sem ser digitado tres vezes.

   O motivo de a faixa nao ser transparente e o logo: /images/logo-workee-branca.png e
   branco e nao existe versao de tinta escura no repo, entao sobre --wk-bg claro
   (#F6F8FB) ele desapareceria. No claro o par e o mesmo da barra do Panel (.bg-workee,
   workee-back-office.css:26).

   NAO TIRE os fallbacks. Eles cobrem a janela em que o browser ja tem este arquivo novo
   mas ainda serve o base.css ANTIGO do cache, onde --wk-header-bg nao existe. Sem
   fallback o token nao resolve, background-color (que nao herda) cai para transparent e
   o logo branco some sobre --wk-bg claro. --wk-primary-solid e --wk-on-primary existem
   no base.css pre-Task-6, sao invariantes de tema e dao 5.80:1 — a faixa volta a ser o
   azul de antes em vez de nada. Viram codigo morto quando a Task 19 subir o
   versao_cache; morto de proposito, para o proximo ajuste de cache nao reabrir o buraco. */
.wsa_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    background-color: var(--wk-header-bg, var(--wk-primary-solid));
    color:            var(--wk-header-ink, var(--wk-on-primary));
}

.wsa_header .title {
    margin: 0;
    font-size: 1.3rem;
}

.wsa_header .dropdown {
    position: relative;
    display: inline-block;
}

/* O background-image real vem inline do layout (foto do funcionario ou o avatar
   padrao). O que estava aqui era um 'path/to/profile-picture.jpg' de exemplo.

   40px viraram 44px porque este botao e o unico caminho para o menu (tema e logout) e
   estava abaixo do alvo minimo de toque — pendencia que a Task 5 deixou anotada para ca.
   Como o fundo e background-size:cover, crescer o botao cresce a foto junto, sem recorte. */
.wsa_header .dropbtn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--wk-surface-2);
    background-size: cover;
    background-position: center;
    border: none;
    cursor: pointer;
}

/* O anel de foco generico do base.css e --wk-primary, e no tema claro --wk-primary e
   --wk-header-bg sao o MESMO #0063C8: medido no browser, outline rgb(0,99,200) sobre
   background rgb(0,99,200) = 1.00:1. Com outline-offset:2px o anel cai inteiro sobre a
   faixa e desaparece — e este botao e o unico controle do cabecalho, a unica porta para o
   tema e para o Logout. No escuro o mesmo anel da 6.21:1, entao o defeito so existia em
   um dos temas: revisao feita no escuro passa batido.

   A tinta e --wk-header-ink pelo mesmo motivo que a do texto da faixa: os dois variam
   JUNTOS com --wk-header-bg, entao a razao vale nos dois temas por construcao — 5.80:1 no
   claro (#FFFFFF sobre #0063C8) e 15.36:1 no escuro (#E6EDF3 sobre #12161C), ambas medidas
   no browser sobre o valor que o getComputedStyle resolve. O fallback e o mesmo do
   .wsa_header e existe pela mesma razao: cache com o base.css antigo, onde o token nao
   existe.

   So a COR muda. Espessura e offset continuam vindo do :focus-visible do base.css, para o
   anel do cabecalho ser o mesmo desenho do resto do app. */
.wsa_header .dropbtn:focus-visible {
    outline-color: var(--wk-header-ink, var(--wk-on-primary));
}

/* O menu e um cartao proprio, nao segue a cor do cabecalho: no tema claro
   --wk-surface e branco sobre --wk-bg quase branco, entao a borda existe para o
   menu ter contorno mesmo quando a sombra some em tela com pouco brilho. */
.wsa_header .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    /* 120px cabiam so em "Logout". Com "Light mode" ao lado o menu precisa de mais
       largura, senao o item mais longo quebra em duas linhas. */
    min-width: 160px;
    background-color: var(--wk-surface);
    border: 1px solid var(--wk-border);
    box-shadow: var(--wk-shadow-lg);
    border-radius: var(--wk-radius);
    overflow: hidden;
    z-index: 20;
}

/* 12px + 15px de linha (1.5) + 12px = 46.5px de alvo de toque, acima do minimo. */
.wsa_header .dropdown-content a {
    display: block;
    padding: var(--wk-space-3) var(--wk-space-4);
    color: var(--wk-text);
    font-size: .9375rem;
}

/* O #3498db de antes era fundo de item de menu. Trocado por --wk-surface-2 e nao por
   --wk-primary-solid porque o texto do item continua --wk-text: preto sobre azul de
   marca da 2.5:1. Fundo azul aqui exigiria pintar o texto de branco, o que muda a
   tinta do item so no hover. */
.wsa_header .dropdown-content a:hover {
    background-color: var(--wk-surface-2);
}

/* O menu tem overflow:hidden para o hover nao vazar do canto arredondado, e o item ocupa
   a largura inteira dele — entao o anel de :focus-visible de base.css, que fica 2px FORA
   da caixa, seria recortado justamente nos lados. Puxado para dentro ele aparece inteiro,
   e o teclado volta a enxergar onde esta. */
.wsa_header .dropdown-content a:focus-visible {
    outline-offset: -2px;
}

.wsa_header .show {
    display: block;
}

/* ------------------------------------------- navegacao primaria (barra inferior) */

/* Aqui morava .wsa_tabs: a faixa de <button> no topo. Ela saiu inteira, e o botao
   Refresh com ela — ele era position:absolute; right:20px, e num aparelho de 320px a
   aba "Holidays" invadia 66px dele (medido na Task 5). O gesto que substitui o Refresh
   e o pull-to-refresh da Task 16.

   z-index 30 e o degrau do meio da pilha do app: acima do conteudo em fluxo, abaixo do
   .workee-loading (9999), que PRECISA cobrir a barra — enquanto a tela carrega nao pode
   sobrar alvo clicavel. O indicador de pull-to-refresh da Task 16 entra em 40, entre os
   dois; ele vive no topo e a barra embaixo, entao os dois nunca disputam pixel. */
.wsa_bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    background-color: var(--wk-surface);
    border-top: 1px solid var(--wk-border);
    /* A borda sozinha da 1.13:1 contra a pagina no claro: a lista rolando por baixo
       encosta na barra sem separacao visivel. --wk-shadow-nav e o instrumento que falta,
       e ele troca de natureza por tema (sombra no claro, linha no escuro) — o porque
       esta no base.css, junto do token. */
    box-shadow: var(--wk-shadow-nav);
    /* Sem isto os rotulos ficam por baixo da barra do gesto de home do iPhone. */
    padding-bottom: env(safe-area-inset-bottom);
    /* left/right: 0 num aparelho com entalhe DEITADO poe o primeiro e o ultimo item sob
       o canto arredondado da tela. Os insets laterais so valem nessa orientacao; em pe
       sao 0 e nao mudam nada. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* --wk-nav-h vale 64px: acima do minimo de 44px de alvo de toque, e o item ocupa a
   largura inteira da fatia, entao o alvo e o retangulo todo — nao so o texto de 11px. */
.wsa_bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--wk-nav-h);
    padding: var(--wk-space-2) 0;
    color: var(--wk-text-3);
    font-size: .6875rem;
    font-weight: 500;
}

/* 5.80:1 no claro e 5.67:1 no escuro sobre --wk-surface. A cor nao e o unico sinal de
   qual tela esta aberta: o aria-current="page" do markup diz o mesmo sem depender de
   enxergar azul. */
.wsa_bottom-nav__item.is-active { color: var(--wk-primary); }

/* O anel de :focus-visible de base.css fica 2px FORA da caixa. Aqui isso cai fora da
   tela embaixo (a barra encosta em bottom:0) e por cima do item vizinho dos lados.
   Puxado para dentro ele aparece inteiro — mesmo motivo do menu do avatar acima. */
.wsa_bottom-nav__item:focus-visible { outline-offset: -2px; }

/* O conteudo nao pode terminar embaixo da barra: sem esta reserva o ultimo cartao da
   lista fica escondido atras dela.

   A reserva e por CLASSE e nao no seletor `body` porque as telas de auth usam o layout
   workee_staff_aberto, que carrega este mesmo arquivo e nao tem barra nenhuma — la os
   64px seriam so um vao morto embaixo de um formulario que ja esta centralizado em
   100vh. A classe entra no <body> do layout que inclui a barra, e so nele.

   O +1px e o border-top da barra: a altura ocupada e --wk-nav-h (min-height do item)
   MAIS a borda. Sem ele o ultimo pixel de conteudo fica embaixo da linha da borda.

   As duas linhas de padding-bottom sao o padrao do .workee-loading: a primeira e o
   fallback. env() nao existe antes do iOS 11.2 / Chrome 69, e o calc() inteiro seria
   descartado por causa dela — a reserva sumiria e o defeito voltaria justamente no
   aparelho velho. */
.wsa_app_body {
    padding-bottom: calc(var(--wk-nav-h) + 1px);
    padding-bottom: calc(var(--wk-nav-h) + 1px + env(safe-area-inset-bottom));
}

/* ------------------------------------------- puxar para atualizar */

/* O indicador vive FORA do fluxo e e revelado pelo arrasto. Um spinner que so
   aparece depois de soltar nao ensina que o gesto existe — o ponto e a pessoa ver
   algo acontecer enquanto ainda esta puxando.

   z-index 40: acima da barra inferior (30) e abaixo do .workee-loading (9999). Ele e
   aria-hidden e pointer-events:none — nao e alvo de toque, entao o piso de 44px nao
   se aplica; 36px e o tamanho da moeda que o dedo revela, nao do que ele acerta.

   --wk-surface e preenchimento e --wk-primary e tinta: a seta sobre a moeda da 5.80:1
   no tema claro e 5.67:1 no escuro (os mesmos pares ja medidos para o item ativo da
   barra inferior, que usa exatamente estes dois tokens). */
.wsa_ptr {
    position: fixed;
    top: 0; left: 50%;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    margin-left: -18px;
    border-radius: 50%;
    background-color: var(--wk-surface);
    border: 1px solid var(--wk-border);
    box-shadow: var(--wk-shadow-lg);
    color: var(--wk-primary);
    opacity: 0;
    transform: translateY(-48px);
    pointer-events: none;
}

/* Sem transicao durante o arrasto: a posicao segue o dedo, quadro a quadro. A
   transicao entra so no retorno, quando o JS tira esta classe. */
.wsa_ptr.e-arrastando { transition: none; }
.wsa_ptr:not(.e-arrastando) { transition: opacity .2s, transform .2s; }

.wsa_ptr svg { transition: transform .12s linear; }

/* Passou do limiar: a seta vira para cima, "solte para atualizar". */
.wsa_ptr.e-pronto svg { transform: rotate(180deg); }

.wsa_ptr.e-girando svg { animation: wk-girar .8s linear infinite; }

@keyframes wk-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .wsa_ptr.e-girando svg { animation: none; }
    .wsa_ptr svg { transition: none; }
}

/* Desliga o pull-to-refresh NATIVO do Chrome/Android, que senao dispara junto com o
   nosso e recarrega duas vezes. Nao afeta o scroll normal.

   Nao ha container interno para receber isto: quem rola nestas telas e o DOCUMENTO.
   As folhas do Staff declaram overflow em exatamente quatro lugares — o menu do avatar
   e a .wsa_barra (app.css), o `overflow-x: hidden` do body e a .visually-hidden
   (base.css) — e nenhum deles e overflow-y rolavel. As views do staffapp nao declaram
   nenhum. Entao o alvo do gesto e a viewport, nao um elemento.

   Por que nos DOIS elementos, e nao so no `body` como manda a receita corrente: a
   viewport nao le a propriedade de um elemento fixo, ela le a do "viewport-defining
   element", e QUAL dos dois e esse depende do overflow da raiz. O layout do Staff poe
   `style="overflow-x: hidden"` no proprio <html> (workee_staff.blade.php, linha 2), o
   que tira a raiz do caso `visible` em que a receita body-so foi escrita.

   Nao da para medir aqui de qual dos dois o Chrome le: suprimir o gesto nativo so e
   observavel em Chrome de Android com toque real, e nao ha nada em JS que exponha o
   valor efetivo da viewport. Entao a regra vale nos dois — declarar em ambos custa uma
   linha e acerta sob qualquer um dos modelos, enquanto errar o elemento devolve
   exatamente o defeito da recarga dupla, sem sintoma nenhum no desktop. */
html { overscroll-behavior-y: contain; }
body { overscroll-behavior-y: contain; }

/* --------------------------------------------------------------- tela Today */

/* A home do Staff. Todas as razoes citadas nesta secao foram calculadas a partir dos
   valores dos DOIS blocos de tema de base.css (claro / escuro, nesta ordem) — token que
   muda de valor por tema tem numero para cada um, senao a medida so vale em metade dos
   aparelhos. Nenhum token novo nasce aqui de proposito: a secao inteira e composta dos
   que ja existem, entao nao ha o risco de acrescentar em :root e esquecer os dois blocos
   escuros. */
.wsa_hoje { padding: var(--wk-space-4); }

/* --wk-text sobre --wk-bg: 16.68:1 / 15.36:1. */
.wsa_hoje__saudacao { font-size: 1.375rem; margin-bottom: var(--wk-space-4); }

/* Texto herdado (--wk-text) sobre --wk-surface: 17.75:1 / 14.00:1. A borda existe porque
   no claro o cartao branco fica sobre --wk-bg quase branco e a sombra sozinha some em
   tela com pouco brilho — mesma razao do menu do avatar la em cima. */
.wsa_card {
    background-color: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow);
    padding: var(--wk-space-4);
    margin-bottom: var(--wk-space-4);
}

/* O proximo turno e a resposta que a pessoa abriu o app para ver, entao ele e o unico
   cartao com borda de marca. --wk-primary contra --wk-bg da 5.45:1 / 6.21:1 — acima dos
   3:1 de 1.4.11 —, mas o destaque nao depende so da cor: e o primeiro cartao da tela e o
   unico com o horario em corpo grande. */
.wsa_card--destaque { border-color: var(--wk-primary); }

/* --wk-text-3 sobre --wk-surface: 5.50:1 / 5.52:1. Passa AA mesmo a 12px, que e o
   tamanho onde --fc-texto-3 do Panel nao passaria — o motivo de base.css ter escurecido
   um passo esta comentado la. */
.wsa_card__titulo {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wk-text-3);
    margin-bottom: var(--wk-space-3);
}

/* Cor de link herdada do seletor `a` de base.css: --wk-primary sobre --wk-surface da
   5.80:1 / 5.67:1.

   O min-height NAO estava no desenho original: la o link era inline-block e media os
   21px da propria linha de texto — abaixo do piso de 44px que o resto do app respeita
   (.btn, .dropbtn, .wsa_bottom-nav__item). Estes sao os unicos dois links de acao da
   tela; deixa-los como alvo de 21px seria repetir, em tela nova, o defeito de toque que
   a Task 5 mediu na barra antiga. inline-flex e nao block para o alvo terminar no fim do
   texto, e nao atravessar o cartao inteiro. */
.wsa_card__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--wk-space-1);
    font-size: .875rem;
    font-weight: 500;
}

/* --wk-text-2 sobre --wk-surface: 7.69:1 / 7.86:1 nas tres linhas de apoio. O horario
   fica em --wk-text (17.75:1 / 14.00:1) porque e o dado principal do cartao.

   Estes .wsa_turno__* deixaram de ser so da home na Task 14: os cartoes do Schedule e do
   Finance sao o MESMO elemento e herdam estas quatro regras. Quem mexer aqui mexe nas
   tres telas. A unica diferenca esta escrita la embaixo, no escopo .wsa_turno: o corpo do
   horario, que na lista e menor. */
.wsa_turno__quando    { margin: 0 0 var(--wk-space-1); font-size: 1rem; color: var(--wk-text-2); }
.wsa_turno__horas     { margin: 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; }
.wsa_turno__intervalo { margin: var(--wk-space-1) 0 0; font-size: .875rem; color: var(--wk-text-2); }
.wsa_turno__total     { margin: var(--wk-space-2) 0 0; font-size: .9375rem; color: var(--wk-text-2); }

/* O separador e texto de verdade (um "·" no fluxo), entao ele tambem tem de passar AA:
   --wk-text-3 sobre --wk-surface, 5.50:1 / 5.52:1. */
.wsa_ponto { color: var(--wk-text-3); }

/* A base e NEUTRA de proposito. O fallback de status usa modificador vazio
   (`wsa_pilula ` + ""), entao qualquer cor na base faria um status desconhecido
   herda-la — e "desconhecido" pintado de azul de marca mente igual ao laranja de
   "aguardando" que esta regra veio substituir. Cor so por modificador explicito.

   --wk-text-2 sobre --wk-surface-2: 7.02:1 / 6.86:1. */
.wsa_pilula {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--wk-radius-pill);
    background-color: var(--wk-surface-2);
    color: var(--wk-text-2);
    font-size: .75rem;
    font-weight: 500;
}

/* --wk-primary sobre --wk-primary-soft. No escuro o soft e rgba(0,99,200,.18) e nao um
   hex: composto sobre --wk-surface ele vira #152B44, e e contra ESSE valor que a razao
   foi medida — 5.14:1 no claro, 4.92:1 no escuro. Ler o alpha como se fosse opaco daria
   um numero que nao existe em tela nenhuma. */
.wsa_pilula.e-info { background-color: var(--wk-primary-soft); color: var(--wk-primary); }

.wsa_card--destaque .wsa_pilula { margin-top: var(--wk-space-3); }

/* O estado vazio e prosa, nao um numero zerado: line-height maior e --wk-text-2
   (7.69:1 / 7.86:1) porque ele se le como frase e nao como dado. */
.wsa_vazio { margin: 0; color: var(--wk-text-2); line-height: 1.6; }

.wsa_barra__rotulo {
    display: flex;
    justify-content: space-between;
    font-size: .875rem;
    color: var(--wk-text-2);
    margin-bottom: var(--wk-space-2);
}

/* O trilho contra o cartao da 1.09:1 / 1.15:1 — de proposito: quem carrega a informacao
   e o PREENCHIMENTO, que da 5.30:1 / 4.95:1 contra o trilho e 5.80:1 / 5.67:1 contra o
   cartao. E a proporcao nao depende de enxergar a barra: o rotulo acima dela ja diz os
   dois numeros por extenso, e o role="progressbar" leva o percentual ao leitor de tela. */
.wsa_barra {
    height: 8px;
    border-radius: var(--wk-radius-pill);
    background-color: var(--wk-surface-2);
    overflow: hidden;
}
.wsa_barra > span {
    display: block;
    height: 100%;
    background-color: var(--wk-primary);
    border-radius: inherit;
}

/* --wk-text-3 nos rotulos (5.50:1 / 5.52:1) e --wk-text nos valores (17.75:1 / 14.00:1).
   Os dois modificadores semanticos usam os tokens -text e nao os de preenchimento: como
   texto sobre o cartao, --wk-positive da 3.38:1 e --wk-warning da 2.77:1 no tema claro,
   os dois reprovados. Com os -text: 5.85:1 / 6.51:1 e 7.52:1 / 7.33:1.

   A cor nao e o unico sinal de qual valor e qual: cada um tem o proprio <dt> escrito. */
/* O flex-wrap nao e enfeite: item de flex nasce com min-width:auto e por isso NAO encolhe
   abaixo do proprio conteudo. Sem ele, as tres caixas de Holiday somam ~261px de texto e o
   cartao oferece 256px num aparelho de 320px (a largura que a Task 5 usou para medir a
   barra antiga) — e como o layout poe overflow-x:hidden no body, o excedente seria
   CORTADO em silencio em vez de virar barra de rolagem. Com o wrap, a terceira caixa desce
   uma linha. */
.wsa_valores { display: flex; flex-wrap: wrap; gap: var(--wk-space-5); margin: var(--wk-space-4) 0 0; }
.wsa_valores--tres { gap: var(--wk-space-4); }
.wsa_valores dt { font-size: .75rem; color: var(--wk-text-3); margin-bottom: 2px; }
.wsa_valores dd { margin: 0; font-size: 1.125rem; font-weight: 600; }
.wsa_valores dd.e-positivo { color: var(--wk-positive-text); }
.wsa_valores__nota { font-size: .8125rem; font-weight: 400; color: var(--wk-text-3); }
.wsa_valores dd.e-atencao  { color: var(--wk-warning-text); }

/* ------------------------------------------- semana: telas Schedule e Finance */

/* As duas telas compartilham o seletor de semana e a MESMA anatomia de cartao
   (.wsa_turno), que nasceu na home. Todas as razoes citadas aqui foram medidas com os
   valores dos DOIS blocos de tema de base.css (claro / escuro, nesta ordem), compondo o
   alpha dos tokens -soft sobre o fundo real de tras: no escuro eles sao rgba, e ler o hex
   como se fosse opaco daria um numero que nao existe em tela nenhuma. Os numeros nao sao
   derivados da tabela de tokens: sairam de uma medicao em Chrome headless sobre o
   fragmento renderizado (400 nos de texto, duas telas x cheia/vazia x dois temas x
   320/390px, zero reprovacoes). Nenhum token novo
   nasce nesta secao de proposito — assim nao ha como acrescentar em :root e esquecer os
   dois blocos escuros. */

/* A faixa perdeu o fundo --wk-surface e a caixinha em volta do rotulo. Ela nao e um
   painel: e a barra de navegacao da tela, e quem precisa de destaque e a lista abaixo.
   O min-width das setas e o piso de toque de 44px que o resto do app respeita — a altura
   ja vem do .btn de base.css. --wk-text-2 no icone: 7.23:1 / 8.62:1 contra a pagina, bem
   acima dos 3:1 de 1.4.11 para componente. */
.wsa_week-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wk-space-2) var(--wk-space-3);
}
.wsa_week-selector .btn { min-width: 44px; color: var(--wk-text-2); }
.wsa_week-selector .week-display { font-weight: 600; text-align: center; }

/* A marca de "agora", usada em dois lugares: "This week" na barra (fundo = pagina) e
   "Today" no cabecalho do cartao (fundo = card). --wk-primary sobre --wk-primary-soft da
   5.14:1 / 5.39:1 no primeiro e 5.14:1 / 4.91:1 no segundo. Ela e TEXTO, e nao so uma
   cor: e o que faz "hoje" continuar legivel para quem nao distingue o azul. */
.wsa_agora {
    display: inline-block;
    margin-left: var(--wk-space-2);
    padding: 1px 8px;
    border-radius: var(--wk-radius-pill);
    background-color: var(--wk-primary-soft);
    color: var(--wk-primary);
    font-size: .6875rem;
    font-weight: 600;
    vertical-align: middle;
}

/* So aparece quando a pessoa saiu da semana atual, entao nao pode empurrar o layout
   quando aparece: margem embaixo e nada de altura reservada. */
.wsa_voltar-hoje { text-align: center; margin-bottom: var(--wk-space-2); }

/* O total estimado era preenchimento solido azul com texto branco — um bloco saturado
   ocupando a largura da tela para dizer dois numeros. Vira o par -soft/tinta, que e mais
   leve e passa nos dois temas: 5.14:1 / 5.39:1 sobre a pagina. O separador "·" e texto de
   verdade e tambem foi medido: --wk-text-3 sobre o mesmo fundo da 4.87:1 / 5.25:1. */
.wsa_estimate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--wk-space-3);
    margin: 0 var(--wk-space-4) var(--wk-space-4);
    padding: var(--wk-space-3) var(--wk-space-4);
    border-radius: var(--wk-radius);
    background-color: var(--wk-primary-soft);
    color: var(--wk-primary);
    font-size: .9375rem;
}
.wsa_estimate__valor { font-weight: 600; }

/* A regua da semana. Antes cada dia era um circulo de 30px com a palavra "work"/"off"
   escrita dentro a 9.6px — ilegivel, e dizendo a mesma coisa que a cor do circulo.
   Agora a palavra vai para o texto escondido (leitor de tela) e a marca informa por
   TAMANHO: o dia de trabalho tem o dobro do diametro e e preenchido, o dia de folga e um
   circulo vazado. Cor sozinha nao decide nada aqui. */
.wsa_week-days {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0 var(--wk-space-4) var(--wk-space-4);
    padding: 0;
}
.wsa_week-days__dia { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* --wk-text-3 sobre --wk-bg: 5.17:1 / 6.05:1. */
.wsa_week-days__inicial { font-size: .75rem; color: var(--wk-text-3); }

/* O contorno e --wk-text-3 e nao --wk-border porque a marca fica sobre a PAGINA: a borda
   da 1.13:1 / 1.44:1 contra --wk-bg, ou seja, o dia de folga simplesmente desapareceria e
   a regua perderia o ritmo que faz os dias de trabalho lerem como padrao. Vazado da
   5.17:1 / 6.05:1; preenchido da 5.45:1 / 6.21:1. */
.wsa_week-days__marca {
    width: 12px; height: 12px;
    border: 1px solid var(--wk-text-3);
    border-radius: 50%;
    background-color: transparent;
}
.wsa_week-days__marca.e-trabalho {
    width: 18px; height: 18px;
    border-color: var(--wk-primary);
    background-color: var(--wk-primary);
}

/* Hoje na regua: anel de marca MAIS a inicial em negrito e no tom cheio de texto. Sao
   duas pistas de propriedades diferentes, entao a marcacao sobrevive sem cor.
   O anel interno repete --wk-bg porque ele e o VAO entre a marca e o anel colorido, e a
   regua vive sobre a pagina — com --wk-surface o vao sairia mais claro que o fundo no
   tema escuro e leria como um segundo aro. */
.wsa_week-days__dia.e-hoje .wsa_week-days__inicial { color: var(--wk-text); font-weight: 700; }
.wsa_week-days__dia.e-hoje .wsa_week-days__marca { box-shadow: 0 0 0 2px var(--wk-bg), 0 0 0 4px var(--wk-primary); }

.wsa_shifts, .wsa_finance-details { padding: 0 var(--wk-space-4); }

/* O cartao de turno das duas telas. Mesmas medidas do .wsa_card da home: a borda existe
   porque no tema claro o cartao branco fica sobre uma pagina quase branca (1.05:1) e a
   sombra sozinha some em tela com pouco brilho. */
.wsa_turno {
    background-color: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow);
    padding: var(--wk-space-4);
    margin-bottom: var(--wk-space-3);
}
/* A borda de hoje da 5.45:1 / 6.21:1 contra a pagina, mas ela nao carrega a informacao
   sozinha: o cabecalho do cartao traz a pilula "Today" escrita. */
.wsa_turno.e-hoje { border-color: var(--wk-primary); }

.wsa_turno__cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--wk-space-2);
    margin-bottom: var(--wk-space-3);
}
/* --wk-text sobre --wk-surface: 17.75:1 / 14.00:1. */
.wsa_turno__data { font-weight: 600; font-size: .9375rem; }

/* Na home o horario e o dado UNICO da tela e mede 28px; aqui ele se repete uma vez por
   cartao numa lista, entao desce para 22px. O bloco .wsa_turno na frente do seletor NAO
   e enfeite: a home usa este mesmo nome de elemento FORA de um .wsa_turno (o cartao de la
   e .wsa_card--destaque), e sem o escopo esta regra encolheria o horario de la junto.
   O .wsa_turno__intervalo nao se repete aqui de proposito — e o mesmo elemento, com o
   mesmo valor, ja declarado na secao da home. */
.wsa_turno .wsa_turno__horas { font-size: 1.375rem; }

/* --wk-text-2 sobre o cartao: 7.69:1 / 7.86:1. O ganho volta para --wk-text (17.75:1 /
   14.00:1) porque e o numero que a pessoa procura. */
.wsa_turno__rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--wk-space-2);
    margin-top: var(--wk-space-3);
    padding-top: var(--wk-space-3);
    border-top: 1px solid var(--wk-border);
    font-size: .875rem;
    color: var(--wk-text-2);
}
.wsa_turno__ganho { font-size: 1rem; font-weight: 600; color: var(--wk-text); margin-left: auto; }

/* A observacao do gestor sobre o turno. Fundo -soft com tinta -text, que e o par para o
   qual esses tokens existem: 7.21:1 / 5.73:1. --wk-warning como TEXTO daria 2.77:1 no
   claro. */
.wsa_turno__obs {
    margin: var(--wk-space-3) 0 0;
    padding: var(--wk-space-2) var(--wk-space-3);
    border-radius: var(--wk-radius-sm);
    background-color: var(--wk-warning-soft);
    color: var(--wk-warning-text);
    font-size: .8125rem;
}

/* Os modificadores da pilula de status. A base neutra e o .wsa_pilula la em cima, na
   secao da tela Today deste MESMO arquivo — base.css nao tem regra de .wsa_pilula
   nenhuma. O motivo esta comentado junto da base: status desconhecido cai no modificador
   VAZIO e sai cinza, nunca no ambar de "aguardando". 5.55:1 / 5.17:1 e 7.21:1 / 5.73:1. */
.wsa_pilula.e-positivo { background-color: var(--wk-positive-soft); color: var(--wk-positive-text); }
.wsa_pilula.e-atencao  { background-color: var(--wk-warning-soft);  color: var(--wk-warning-text); }

/* Era uma linha flex sem wrap: In/Out/Break/Total estouravam em tela estreita, e item de
   flex nasce com min-width:auto — nao encolhe abaixo do proprio conteudo. Como o layout
   poe overflow-x:hidden no body, o excedente era CORTADO em silencio. Grade de duas
   colunas resolve por construcao: 2x2 em qualquer largura.
   --wk-text-3 nos rotulos (5.50:1 / 5.52:1) e --wk-text nos valores (17.75:1 / 14.00:1);
   cada valor tem <dt> proprio, entao a cor deixou de ser o que diz qual e qual — antes
   In/Out/Break eram verde/vermelho/ambar sem legenda. */
.wsa_marcacoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wk-space-3); margin: 0; }
.wsa_marcacoes dt { font-size: .75rem; color: var(--wk-text-3); }
.wsa_marcacoes dd { margin: 0; font-size: .9375rem; }

/* Tres caixas, e nao duas: "Earnings" somava aprovado com pendente, e o £ que a pessoa
   lia nao era o que ela ia receber. Sao numeros de naturezas diferentes — o pendente
   ainda pode ser corrigido pelo gestor. Mesma separacao da home (Task 13). */
.wsa_totais {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wk-space-2);
    margin: 0 var(--wk-space-4) var(--wk-space-4);
}
/* A base de 84px com wrap, e nao `flex: 1` puro, e medida: item de flex nasce com
   min-width:auto e NAO encolhe abaixo do proprio conteudo, entao "Approved" (51px) mais
   o padding trava as tres caixas em ~247px. Em 320px (o piso de 1.4.10) as tres cabem
   numa linha — 3x84 + 16 de gap = 268, contra 288 disponiveis; abaixo disso elas
   empilham em vez de vazarem por baixo do overflow-x:hidden do body, que cortaria o
   numero em silencio. Mesmo motivo do flex-wrap do .wsa_valores. */
.wsa_totais__item {
    flex: 1 1 84px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--wk-space-3);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius);
    background-color: var(--wk-surface);
}
/* 5.50:1 / 5.52:1 no rotulo e 17.75:1 / 14.00:1 no valor. */
.wsa_totais__rotulo { font-size: .6875rem; color: var(--wk-text-3); }
.wsa_totais__valor  { font-size: 1rem; font-weight: 600; }

/* Os dois modificadores semanticos de TEXTO usam os tokens -text: --wk-positive daria
   3.38:1 e --wk-warning 2.77:1 sobre o cartao no tema claro. Com eles: 5.85:1 / 6.51:1 e
   7.52:1 / 7.33:1. E a cor nao e o unico sinal — cada caixa tem o proprio rotulo. */
.e-positivo { color: var(--wk-positive-text); }
.e-atencao  { color: var(--wk-warning-text); }

/* O estado vazio ocupa o lugar da lista e se le como frase (o .wsa_vazio de cima ja da a
   cor e a entrelinha): 7.23:1 / 8.62:1 sobre a pagina. */
.wsa_vazio--tela {
    text-align: center;
    padding: var(--wk-space-6) var(--wk-space-4);
}

.wsa_publicada {
    margin: var(--wk-space-4);
    text-align: right;
    font-size: .75rem;
    color: var(--wk-text-2);
}

/* O bloco de service charge do Finance. Mora nesta secao, e nao numa nova, de proposito:
   e a varredura de token da secao (StaffTelasSemanaTest) que impede um nome inventado de
   entrar aqui — declaracao com token inexistente nao e erro de sintaxe, ela e
   simplesmente descartada e a propriedade cai para o herdado, sem nada em log. (A
   varredura le o arquivo cru, comentario incluso: citar um nome de token que nao existe
   NESTE texto tambem reprova, e foi o que aconteceu na primeira versao dele.)
   Nenhum token novo nasce aqui, e nenhum PAR novo tambem: a caixa e a do .wsa_totais__item
   (--wk-surface com borda --wk-border) e as tres tintas sao as que esta secao ja poe sobre
   ela — --wk-text no valor, --wk-text-2 no periodo e --wk-text-3 na nota. Os tres pares
   estao medidos nos comentarios acima, nos dois temas; por isso nao ha numero novo a citar
   aqui, e nao ha como esquecer os dois blocos de tema escuro do base.css.

   Nenhuma cor SEMANTICA (positivo/atencao): a distincao entre gorjeta e salario e feita
   pelo rotulo e pela caixa separada, nao pela cor — quem nao distingue verde de cinza
   leria as duas caixas como a mesma coisa. */
.wsa_gorjeta {
    margin: 0 var(--wk-space-4) var(--wk-space-4);
    padding: var(--wk-space-3);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius);
    background-color: var(--wk-surface);
}
.wsa_gorjeta__titulo {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--wk-text-2);
}
.wsa_gorjeta__lista { list-style: none; margin: 0; padding: 0; }
/* flex-wrap e min-width:0 pela mesma razao medida no .wsa_totais__item: item de flex
   nasce com min-width:auto e nao encolhe abaixo do proprio conteudo, e o body do app tem
   overflow-x:hidden — o que vazasse seria CORTADO em silencio, e o que sai da tela e
   justo o numero.

   MEDIDO em Chrome headless (08/08/2026) sobre a parcial renderizada no pior caso de
   largura — rotulo que atravessa o mes ("28 Dec–03 Jan"), valor de quatro digitos, linha
   zerada com a frase extra e o Total —, em 320px e 390px, nos dois temas: nenhum elemento
   do bloco com scrollWidth > clientWidth, e a pagina sem rolagem horizontal. */
.wsa_gorjeta__linha,
.wsa_gorjeta__total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wk-space-2);
    padding: var(--wk-space-2) 0 0;
}
.wsa_gorjeta__linha + .wsa_gorjeta__linha,
.wsa_gorjeta__total {
    margin: var(--wk-space-2) 0 0;
    border-top: 1px solid var(--wk-border);
}
.wsa_gorjeta__total { font-weight: 600; }
.wsa_gorjeta__periodo { min-width: 0; font-size: .875rem; color: var(--wk-text-2); }
.wsa_gorjeta__valor { font-size: 1rem; font-weight: 600; color: var(--wk-text); }
/* A linha zerada explica o proprio £0.00, e o flex-basis:100% a poe embaixo do par
   periodo/valor em vez de disputar a mesma linha com eles. */
.wsa_gorjeta__zerado {
    flex: 1 0 100%;
    font-size: .75rem;
    color: var(--wk-text-3);
}
.wsa_gorjeta__nota,
.wsa_gorjeta__vazio {
    margin: var(--wk-space-3) 0 0;
    font-size: .75rem;
    color: var(--wk-text-3);
}
/* O estado vazio e a unica coisa dentro da caixa, entao ele nao leva a margem de
   separacao que a nota leva — ela abriria um vao entre o titulo e a frase. */
.wsa_gorjeta__vazio { margin-top: var(--wk-space-2); }

/* --------------------------------------------------------------- holidays */

/* A tela Leave. Como nas duas secoes acima, todas as razoes citadas aqui foram medidas
   com os valores dos DOIS blocos de tema do base.css (claro / escuro, nesta ordem),
   compondo o alpha dos tokens -soft sobre o fundo REAL de tras — no escuro eles sao
   rgba, e ler o hex como se fosse opaco daria um numero que nao existe em tela nenhuma.
   Os numeros sairam de medicao em Chrome headless sobre a tela renderizada, nao da
   tabela de tokens. Nenhum token novo nasce aqui de proposito: assim nao ha como
   acrescentar em :root e esquecer os dois blocos escuros.

   Saiu daqui a .wsa_finance-consolidated — a faixa de dois badges solidos (azul "Leave
   year", verde "Balance") do topo. Ela nasceu no Finance, o Finance saiu dela na Task 14
   e esta tela era a ultima dona, entao o nome mentia por inteiro. O saldo virou o cartao
   abaixo, com horas, dias e extrato, e o leave year virou o TITULO dele. Com ela foi
   junto o .badge do base.css: era o unico uso que a classe tinha no Staff.

   Sumiu tambem a .wsa_holiday-list. Ela era o container da lista de pedidos e existia para
   afastar os cartoes da borda; com o padding no .wsa_folgas ela virava `padding: 0` num
   <div>, que ja e o default — regra sem efeito e o mesmo problema de regra sem dono. Os
   cartoes de pedido sao o .wsa_turno das telas de semana, sem nada em volta. */
.wsa_folgas { padding: var(--wk-space-4); }

/* O saldo em horas continua sendo a verdade — os dias sao a leitura. Por isso as horas
   mandam no tamanho e os dias vem em seguida, nao o contrario.
   Sobre o cartao: --wk-text no numero (17.75:1 / 14.00:1), --wk-text-2 nos dias
   (7.69:1 / 7.86:1) e --wk-text-3 na linha do contrato (5.50:1 / 5.52:1).

   O flex-wrap e o mesmo caso do .wsa_valores e do .wsa_totais: item de flex nasce com
   min-width:auto e NAO encolhe abaixo do proprio conteudo. Medido: com saldo de tres
   digitos ("138.50h" a 32px mais "= 17.3 days") e sem o wrap, os dias chegam a 196px num
   viewport de 195 (390 com zoom de 200%) e o layout poe overflow-x:hidden no body — o
   excedente e CORTADO em silencio, justamente o numero que a pessoa abriu a tela para ver.
   E o corte NAO aparece no scrollWidth do documento, exatamente por causa do overflow
   hidden: quem denuncia e a borda direita do elemento passar da largura do viewport. */
.wsa_saldo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wk-space-2); margin: 0; }
.wsa_saldo__horas { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; }
.wsa_saldo__dias  { font-size: 1rem; color: var(--wk-text-2); }
.wsa_saldo__base  { margin: var(--wk-space-1) 0 0; font-size: .8125rem; color: var(--wk-text-3); }

/* O extrato do leave year. Grade de tres colunas e nao flex: a data e as horas tem largura
   propria e a descricao fica com o que sobra. O min-width:0 na descricao nao e enfeite: o
   minimo automatico de uma faixa 1fr e min-content, a mesma armadilha do min-width:auto do
   flex. Medido a 195px, sem ele — e ja com as descricoes NORMAIS do banco, que tem espaco —
   a coluna de horas e empurrada para 203..225px e o valor sai cortado. O overflow-wrap
   cobre a descricao sem espaco nenhum, que a coluna livre nao consegue quebrar.
   --wk-text-3 na data (5.50:1 / 5.52:1) e --wk-text-2 na descricao (7.69:1 / 7.86:1); a
   cor do valor vem sempre de um dos dois modificadores abaixo. */
.wsa_extrato { list-style: none; margin: var(--wk-space-3) 0 0; padding: 0; }
.wsa_extrato__item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--wk-space-2);
    align-items: baseline;
    padding: var(--wk-space-2) 0;
    border-top: 1px solid var(--wk-border);
    font-size: .875rem;
}
.wsa_extrato__data  { color: var(--wk-text-3); font-variant-numeric: tabular-nums; }
.wsa_extrato__desc  { min-width: 0; overflow-wrap: anywhere; color: var(--wk-text-2); }
.wsa_extrato__horas { font-weight: 600; font-variant-numeric: tabular-nums; }

/* O terceiro global do trio semantico; os outros dois (.e-positivo e .e-atencao) estao na
   secao das telas de semana, que foi quem os criou.
   O token de preenchimento aqui nao reprova por pouco — medido, --wk-negative como tinta
   sobre o cartao da 4.83:1 no claro, acima do piso. Ele fica de fora por PAPEL, nao por
   numero: base.css separa fundo de tinta em tokens distintos, e --wk-negative e o de
   preenchimento (borda de campo invalido, .text-danger). Com o -text a folga tambem cresce:
   6.57:1 / 5.96:1. E a cor nao carrega nada sozinha — o sinal escrito (+ / -) diz o mesmo. */
.e-negativo { color: var(--wk-negative-text); }

/* O dia inteiro e alvo de toque. Antes cada dia era uma checkbox de 20px numa col-2, com
   o rotulo numa col-6 que nao era <label> — ou seja, o alvo era a caixinha e mais nada. */
.wsa_dias { display: flex; flex-direction: column; gap: var(--wk-space-1); }
.wsa_dias__item {
    display: flex;
    align-items: center;
    gap: var(--wk-space-3);
    min-height: 48px;
    margin: 0;
    padding: var(--wk-space-2) var(--wk-space-3);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-sm);
    color: var(--wk-text);
    font-size: .9375rem;
    cursor: pointer;
}
/* O destaque do dia marcado e REDUNDANTE de proposito: quem responde "este dia entra" e a
   propria checkbox, que o leitor de tela anuncia. Por isso o :has() nao ser suportado
   (Safari < 15.4, Chrome < 105) nao tira informacao nenhuma — o cartao so nao fica
   realcado. --wk-text sobre --wk-primary-soft composto: 15.73:1 / 12.13:1. */
.wsa_dias__item:has(.check-dia-folga:checked) {
    border-color: var(--wk-primary);
    background-color: var(--wk-primary-soft);
}
.wsa_dias__data  { flex: 1; }
/* --wk-text-2: 7.69:1 / 7.86:1 sobre o cartao e 6.81:1 / 6.81:1 sobre o dia marcado. */
.wsa_dias__horas { color: var(--wk-text-2); font-variant-numeric: tabular-nums; }

.wsa_dias__total { margin: var(--wk-space-3) 0 0; text-align: right; }

/* O "(optional)" e o unico jeito de a pessoa saber que pode pular o campo sem tentar
   enviar. --wk-text-3 sobre o cartao: 5.50:1 / 5.52:1. O font-weight volta para 400
   porque o <label> em volta nao e negrito, mas o reset do browser deixaria o <span>
   herdar peso em alguns temas de sistema. */
.wsa_opcional { color: var(--wk-text-3); font-weight: 400; }

/* O quarto modificador da pilula de status, que so esta tela tem: folga recusada e folga
   cancelada. Os outros tres estao na secao das telas de semana, junto da base neutra.
   Fundo -soft com tinta -text, que e o par para o qual esses tokens existem: 6.05:1 /
   4.88:1. Aqui o token de preenchimento REPROVA de verdade: --wk-negative sobre o proprio
   -soft foi medido em 4.44:1 no claro — e no escuro os dois tokens tem o mesmo valor,
   entao a troca so quebraria metade dos aparelhos e passaria batido numa revisao no
   tema escuro. */
.wsa_pilula.e-negativo { background-color: var(--wk-negative-soft); color: var(--wk-negative-text); }

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

/* O bloco de Login antigo tinha 12 regras; 9 sairam porque base.css ja faz o mesmo
   (form-control, form-group, label, ::placeholder, o seletor de elemento a,
   btn-primary e o hover dele) ou porque nunca casavam com nada
   (.wsa_login_container .form-check-label e .wsa_login_container .form-check-input —
   as unicas checkboxes do Staff sao as dos dias do pedido de folga, que a Task 15 poe em
   .wsa_dias__item; ate ela o dono era a .wsa_holiday-form, que nao existe mais).

   Sairam outras duas agora: a linha do "First Access / Forgot Password" (os dois
   links viraram um so, e nenhuma tela de auth tem mais .form-check) e a largura do
   botao (o markup passou a declarar .w-100, que base.css ja resolve).

   O que saiu de graca junto: o #4c6ef5 que .wsa_login_container .btn-primary pintava
   no botao. Branco em cima dele da 4.32:1 — reprovado em AA e VIVO em producao hoje.
   Com a regra apagada, o botao herda o .btn-primary de base.css, que usa
   --wk-primary-solid (5.80:1). */
.wsa_login_body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 0 20px;
}

/* O max-width e por causa do desktop: sem ele o formulario esticava a largura inteira
   da janela e os campos ficavam com 1200px de linha. No celular, que e onde o Staff
   vive, o width:100% continua mandando. */
.wsa_login_container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: var(--wk-space-5);
}

/* 1.75rem e nao 2.5rem: "First time here, or forgot your password?" com titulo de
   40px empurrava o botao para fora da dobra num iPhone SE. */
.wsa_login_container .title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: var(--wk-space-2);
    text-align: center;
}

.wsa_login_container .subtitle {
    font-size: 1rem;
    color: var(--wk-text-2);
    text-align: center;
    margin: 0 0 var(--wk-space-5);
}

/* O unico caminho de recuperar senha do app, e era o unico link de acao do Staff sem piso
   de toque. Como <a> inline ele nao tinha caixa propria: media as linhas de texto, medido
   no browser em 221.3x20.0 + 82.0x20.0 a 320, 360, 375 e 390px. Os 44px que o
   getBoundingClientRect devolve ali enganam — sao a UNIAO das duas linhas com o vao entre
   elas no meio, e o que o dedo acerta e uma faixa de 20px, menos da metade do piso.

   Mesma receita da .wsa_card__link, que e o link de acao das telas logadas: inline-flex
   para o alvo terminar no fim do texto em vez de atravessar a coluna inteira, e
   align-items:center para o texto centrar na caixa.

   Com caixa propria o alvo passa a ser continuo e medir 48px nas quatro larguras (232.0,
   272.0, 287.0 e 302.0 de largura) — 48 e nao 44 porque o texto ainda ocupa duas linhas de
   24px, e o min-height e piso, nao teto.

   O mt-2/mb-1 saiu do markup para pagar a diferenca: em 375x667 o botao Sign in sai de
   511.3px do topo para 505.3px, o documento continua com 667px de altura (sem rolagem) e
   o scrollWidth continua igual a largura da tela. O formulario nao se mexe de forma
   perceptivel. */
.wsa_login_container .wsa_login_link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* O botao de ver a senha fica DENTRO do campo, entao o campo precisa de espaco a
   direita para o texto nao passar por baixo dele. */
.wsa_campo-senha {
    position: relative;
}

.wsa_campo-senha .form-control {
    padding-right: 72px;
}

.wsa_ver-senha {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    min-width: 64px;
    padding: 0 var(--wk-space-3);
    border: none;
    background: transparent;
    color: var(--wk-primary);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

/* min-height fixo de proposito: sem ele, a mensagem de erro aparecendo empurra o
   botao para baixo justo quando o dedo ja esta indo nele.

   --wk-negative-text e nao --wk-negative pelo mesmo criterio ja escrito na regra
   .e-negativo: por PAPEL, e nao por numero. base.css separa preenchimento de tinta, e
   --wk-negative e o de preenchimento (borda de campo invalido, .text-danger).
   Recalculado em 05/08/2026, sobre --wk-bg, que e o fundo desta tela: o -text da 6.18:1
   no claro e 6.54:1 no escuro; o de preenchimento da 4.54:1 no claro — ou seja, tambem
   passaria AA — e no escuro os dois tokens tem o MESMO valor (#FF6B6B), os mesmos 6.54:1.
   A versao anterior deste comentario dizia 4.5:1 para o -text e implicava reprovacao do
   outro: errado nas duas metades, e citando uma razao so para dois tokens que mudam com
   o tema. */
.wsa_erro-campo {
    min-height: 20px;
    margin: var(--wk-space-2) 0 0;
    color: var(--wk-negative-text);
    font-size: .875rem;
}

/* Todos os logos de /images sao brancos (ou brancos sobre azul) — nao existe versao
   de tinta escura. Sobre --wk-bg no tema claro a marca sumiria, entao ela recebe a
   placa de marca, que e invariante de tema.

   NAO TIRE o box-sizing. O reset de base.css poe border-box em tudo, e as telas de
   auth declaram o logo com width:100px inline. Com border-box aqueles 100px passam a
   ser a CAIXA, o padding come 32px por dentro e a imagem renderiza a 68px — vira um
   chip, nao uma marca. Com content-box os 100px sao a imagem e o padding faz a placa
   crescer em volta.

   A classe existe para o markup OPTAR pela placa: com o seletor de elemento (img)
   qualquer ilustracao ou QR code futuro nessas telas ganharia fundo azul sem pedir.
   E por ser seletor de CLASSE ela e silenciosa: reescrever uma view sem ela nao muda
   nada no tema escuro e faz a marca sumir no claro. StaffAuthRotasTest confere que
   todo <img> destas telas a carrega. */
.wsa_login_container .wsa_marca {
    box-sizing: content-box;
    padding: var(--wk-space-2) var(--wk-space-4);
    border-radius: var(--wk-radius);
    background-color: var(--wk-primary-solid);
}