/* V2 — estilos da área inicio (um arquivo por trabalhador): tela inicial, Meus dados e botão de ajuda.
   Só cores do tema (var(--…)); o #fff é o texto sobre marinho, como em .botao--principal. */

/* ---------- tela inicial: três blocos grandes ---------- */
.inicio-blocos { display: grid; gap: 0.75rem; margin: 1.25rem 0 0; }
.inicio-bloco {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.875rem; row-gap: 0.125rem;
  align-items: center; min-height: 6rem; padding: 1rem; border: 2px solid var(--texto); border-radius: 6px;
  background: var(--fundo); color: var(--texto); text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.inicio-bloco:hover { background: var(--painel); }
.inicio-bloco:active { transform: translateY(1px); }
.inicio-bloco:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; }
.inicio-bloco__icone { grid-column: 1; grid-row: 1 / span 2; width: 2.25rem; height: 2.25rem; color: var(--acao); }
.inicio-bloco__titulo { grid-column: 2; align-self: end; font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.inicio-bloco__desc { grid-column: 2; align-self: start; font-size: 0.875rem; color: var(--texto-2); }
.inicio-bloco__seta { grid-column: 3; grid-row: 1 / span 2; color: var(--acao); }
.inicio-bloco--principal { background: var(--acao); border-color: var(--acao); color: #fff; }
.inicio-bloco--principal:hover { background: var(--acao-escuro); border-color: var(--acao-escuro); }
.inicio-bloco--principal .inicio-bloco__icone { color: var(--laranja); }
.inicio-bloco--principal .inicio-bloco__desc { color: rgba(255, 255, 255, 0.82); }
.inicio-bloco--principal .inicio-bloco__seta { color: #fff; }

.inicio-outros { display: flex; flex-wrap: wrap; column-gap: 1.25rem; margin-top: 2rem; padding-top: 0.25rem; border-top: 1px solid var(--fio); }
.inicio-outros a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--acao); font-weight: 500; text-decoration: none; }
.inicio-outros a:hover { text-decoration: underline; }
.inicio-saldo { margin: 0.5rem 0 0.25rem; font-size: 0.8125rem; color: var(--texto-2); max-width: 65ch; }

/* ---------- Meus dados ---------- */
.md-form .perfil-imagens { margin: 0.25rem 0 0; }
.md-arquivo__rotulo { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-form .campo-arquivo .botao { min-width: 0; padding-inline: 0.5rem; }
.md-mais { margin-top: 0.5rem; }
.md-mais > .formulario { margin-top: 0.5rem; }
.md-subtitulo { margin: 0.5rem 0 -0.5rem; }
.md-numero { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; }

/* ---------- botão de ajuda: "?" na barra do topo, ao lado do ícone do app (M21) ----------
   A barra já é fixa (sticky), então o "?" não cobre nada e não precisa de espaço extra no fim das telas.
   Alvo de toque de 44 px; o círculo visível é menor, para não pesar ao lado do ícone. */
.topo__ajuda, .ajuda-entrada {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  color: var(--acao); text-decoration: none; border-radius: 50%;
}
.topo__ajuda { margin-right: -0.5rem; }
.topo__ajuda span, .ajuda-entrada span {
  display: inline-flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; border-radius: 50%;
  border: 2px solid var(--acao); background: var(--fundo); font-size: 1.0625rem; font-weight: 700; line-height: 1;
  transition: background-color 150ms ease-out;
}
.topo__ajuda:hover span, .ajuda-entrada:hover span { background: var(--painel); }
.topo__ajuda:active span, .ajuda-entrada:active span { transform: translateY(1px); }
.topo__ajuda:focus-visible, .ajuda-entrada:focus-visible { outline: 3px solid var(--laranja); outline-offset: 0; }
/* tela de entrada (fundo marinho, sem barra do topo): no alto, à direita, rolando com a página; borda branca */
.ajuda-entrada { position: absolute; z-index: 1; top: calc(0.5rem + env(safe-area-inset-top)); right: calc(0.75rem + env(safe-area-inset-right)); }
.ajuda-entrada span { border-color: #fff; }
@media print { .topo__ajuda, .ajuda-entrada { display: none; } }

/* ---------- páginas de ajuda ---------- */
.ajuda-url { font-size: 0.875rem; color: var(--texto-2); overflow-wrap: anywhere; }
.ajuda-previa { margin: 1.5rem 0 0.5rem; padding: 0.75rem 0.875rem; background: var(--painel); border-radius: 6px; }
.ajuda-previa__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; }
.ajuda-lista { list-style: none; margin: 1rem 0 0; padding: 0; }
.ajuda-item { padding: 0.75rem 0; border-bottom: 1px solid var(--fio); }
.ajuda-item p { margin: 0 0 0.25rem; }
.ajuda-item__meta { font-size: 0.875rem; color: var(--texto-2); }
.ajuda-item__tela { font-weight: 600; overflow-wrap: anywhere; }
.ajuda-item__texto { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 65ch; }
.ajuda-item--nova .ajuda-item__situacao { color: var(--laranja); font-weight: 600; }
.ajuda-item--resolvida .ajuda-item__texto { color: var(--texto-2); }