/* App do funcionário — «O meu tempo» (app.staff fase 1, T4): o Início, o horário e as picagens. Só usa os tokens de app.css; acrescenta-se aqui (e não em app.css)
   para as tarefas paralelas não chocarem no mesmo ficheiro. Telemóvel primeiro, alvos de toque ≥ 48 px, a cor nunca vai sozinha (cada pílula leva a sua palavra). */

/* ---- início ---- */
.in { display: grid; gap: 14px; }
.in-saudacao { display: grid; line-height: 1.3; }
.in-saudacao b { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.in-saudacao span { color: var(--texto-3); font-size: .9375rem; }
.in-cartao { gap: 8px; }
.in-cartao p { margin: 0; }
.in-rotulo { margin: 0; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); }
.in-grande { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.3; }
.in-picar { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 6px; }
.in-ausencias { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 10px; }
.in-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.in-lista li + li { border-top: 1px solid var(--linha); }
.in-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 0; color: var(--texto); text-decoration: none; }
a.in-linha:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
.in-texto { min-width: 0; overflow-wrap: anywhere; }
.in-pilula { flex: none; font-size: .75rem; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: var(--cinza-fundo); color: var(--texto-2); }
.in-pilula.laranja { background: var(--laranja-fundo); color: var(--laranja); }
.in-pilula.amarelo { background: var(--aviso-fundo); color: #6B4E00; }
.in-pilula.vermelho { background: var(--erro-fundo); color: var(--erro); }
.in-saldo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.in-saldo b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* ---- horário (as classes do tablet, hor-*) ---- */
.hor { display: grid; gap: 18px; }
.hor-semana { display: grid; gap: 6px; }
.hor-semana h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.hor-dia { display: grid; gap: 2px; padding: 10px 12px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; }
.hor-dia.hoje { border-color: var(--azul); box-shadow: inset 4px 0 0 var(--azul); }
.hor-dia .dia-data { font-size: .8125rem; font-weight: 600; color: var(--texto-2); }
.hor-corpo { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hor-turno { font-weight: 600; }
.hor-folga { font-weight: 600; color: var(--verde); }
.hor-sub { color: var(--texto-3); font-size: .875rem; }
.hor-riscado { color: var(--texto-3); text-decoration: line-through; font-size: .875rem; }

/* ---- picagens ---- */
.pg { display: grid; gap: 10px; }
.pg-dia { display: grid; gap: 6px; padding: 10px 12px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; }
.pg-dia > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pg-data { font-weight: 600; text-transform: capitalize; font-variant-numeric: tabular-nums; }
.pg-total { font-variant-numeric: tabular-nums; }
.pg-dia.vazio { background: transparent; border-style: dashed; }
.pg-dia.vazio .pg-data { color: var(--texto-3); font-weight: 500; }
.pg-dia.incompleto { background: var(--aviso-fundo); border-color: #E3C85A; }
.pg-dia p { margin: 0; }
.pg-corrige { font-weight: 600; color: #6B4E00; }
.pg-dia .pc-hoje li { background: transparent; border: 0; padding: 4px 0; }