/* Complementos do site real (o estilo-base vem de estilo.css, o mesmo do protótipo aprovado). */
[hidden] { display: none !important; }
body { font-family: var(--fonte); }
input, select, textarea { font: inherit; color: var(--fg); }

.m-tarefas { --hue: var(--tarefas); }
.m-financeiro { --hue: var(--financeiro); }
.m-rh { --hue: var(--rh); }
.m-compras { --hue: var(--compras); }
.modulo.em-breve { opacity: .55; cursor: default; }
.modulo.em-breve:hover { transform: none; background: var(--card); border-color: var(--line); box-shadow: var(--sombra); }
.selo { font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 10px; align-self: flex-start; }

.landing { min-height: 80vh; display: grid; place-items: center; text-align: center; }
.landing h1 { font-size: clamp(34px, 6vw, 56px); }
.landing p { color: var(--muted); margin: 8px 0 0; }

.login { max-width: 420px; margin: 28px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.login h2 { font-size: 20px; }
.login p { margin: 0; color: var(--muted); font-size: 14px; }
.login input { background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-controle); padding: 12px 14px; width: 100%; font-size: 18px; }
.login input.codigo { letter-spacing: .4em; text-align: center; font-size: 24px; }
.btn.grande { padding: 12px 16px; font-size: 15px; }
.btn.azul { background: var(--tarefas); border-color: var(--tarefas); color: #091D37; font-weight: 600; }
.btn.azul:hover { filter: brightness(1.08); }
.canto-marca { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: block; opacity: .75; transition: opacity .2s ease; }
.canto-marca:hover, .canto-marca:focus-visible { opacity: 1; }
.canto-marca img { height: 16px; width: auto; display: block; }
body { padding-bottom: 56px; }
.erro { color: var(--bad); font-size: 14px; min-height: 1.2em; }

.usuario { color: var(--muted); font-size: 13px; }
.cabecalho-pagina { margin-bottom: 14px; }
.badge { background: var(--bad); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 6px; }
.relatorio { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; font-family: var(--fonte); margin: 0; }
.pilula.ok { background: color-mix(in srgb, var(--ok) 16%, var(--surface-2)); color: var(--ok); }
.cartao-form .btn { align-self: flex-start; }
.campo-form.check { flex-direction: row; align-items: center; gap: 8px; }
.campo-form.check input { width: auto; }
.tabela td .acao-linha { justify-content: flex-start; }
.fotos { display: flex; gap: 8px; flex-wrap: wrap; }
.fotos img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.dias-semana { display: flex; gap: 10px 16px; flex-wrap: wrap; font-size: 14px; }
.dias-semana label { display: inline-flex; align-items: center; gap: 6px; }
.previa.vazia { color: var(--muted); font-weight: 500; font-size: 13px; }