/* Rotinas Safety — identidade do brandbook (Oswald + Montserrat, vermelho
   #C3161C, cinza #383838) e a mesma linguagem visual do painel comercial.

   As cores de série foram escolhidas pelo método e conferidas no validador
   de paleta nos dois modos: faixa de luminosidade, piso de croma, separação
   para daltonismo (protan/deutan) e contraste contra o fundo. Não troque um
   hex sem revalidar. */

:root {
  --brand:      #C3161C;
  --brand-deep: #9E0F16;
  --ink:        #231f1f;
  --ink-2:      #5d5453;
  --ink-3:      #8b8180;
  --bg:         #f7f4f3;
  --card:       #ffffff;
  --line:       #e6dedd;
  --line-soft:  #efe8e7;
  --campo:      #ffffff;

  /* Situação da tarefa — escala reservada, sempre com rótulo e ícone. */
  --ok:     #42B662;   /* feita no prazo   */
  --atraso: #F2B826;   /* feita com atraso */
  --just:   #8b8180;   /* justificada      */
  --disp:   #6E7E86;   /* dispensada pela gestão — fora da conta */
  --falha:  #C3161C;   /* não feita        */
  --pend:   #A6BFD0;   /* ainda pendente   */
  --ok-txt:     #2f7d48;
  --atraso-txt: #8a6200;
  --falha-txt:  #a81319;

  /* Identidade de área — ordem fixa, nunca reciclada. */
  --a0: #0096FF;
  --a1: #FE5E08;
  --a2: #844685;
  --a3: #B06A42;

  --shadow: 0 1px 2px rgba(35,31,31,.06), 0 8px 24px -16px rgba(35,31,31,.22);
  --font-d: Oswald, "Arial Narrow", Impact, sans-serif;
  --font-b: Montserrat, "Segoe UI", system-ui, sans-serif;
  --r: 10px;
  --alto: 42px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #EC2024; --brand-deep: #C3222A;
    --ink: #f6f1f0; --ink-2: #bdb2b1; --ink-3: #8e8382;
    --bg: #161313; --card: #201b1b; --line: #352d2d; --line-soft: #2b2424;
    --campo: #171313;
    --ok: #4fc07a; --atraso: #e0a33a; --just: #8e8382; --disp: #7C8C94; --falha: #EF6A6E; --pend: #566970;
    --ok-txt: #7fd79f; --atraso-txt: #e8bb6b; --falha-txt: #f4918f;
    --a0: #1C93E8; --a1: #E06410; --a2: #A96BAA; --a3: #C07E52;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #EC2024; --brand-deep: #C3222A;
  --ink: #f6f1f0; --ink-2: #bdb2b1; --ink-3: #8e8382;
  --bg: #161313; --card: #201b1b; --line: #352d2d; --line-soft: #2b2424;
  --campo: #171313;
  --ok: #4fc07a; --atraso: #e0a33a; --just: #8e8382; --disp: #7C8C94; --falha: #EF6A6E; --pend: #566970;
  --ok-txt: #7fd79f; --atraso-txt: #e8bb6b; --falha-txt: #f4918f;
  --a0: #1C93E8; --a1: #E06410; --a2: #A96BAA; --a3: #C07E52;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px -18px rgba(0,0,0,.8);
}

/* O invólucro do artifact dava isto de graça; fora dele é obrigatório,
   senão [hidden] não esconde quem tem display: grid ou flex. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-b); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
h1, h2, h3 { font-family: var(--font-d); font-weight: 500; letter-spacing: .01em; margin: 0; }
p { margin: 0; }
a { color: var(--brand); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px 72px; }
/* `minmax(0, 1fr)` e não o `auto` implícito: sem isso a coluna da grade
   cresce até caber o filho mais largo (a fileira de abas do cadastro, uma
   tabela), a página fica maior que a tela e o celular responde reduzindo o
   zoom — tudo encolhe junto. Zerar o mínimo no filho não resolve, porque
   quem cresce é a COLUNA, não o filho. */
.col { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }

/* ── Marca ───────────────────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; padding-right: 10px; }
/* A marca na barra é um botão que volta ao início; aqui ela larga a
   aparência de botão e fica só com o alvo de clique. */
.brand-btn { background: none; border: 0; padding: 0 10px 0 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; border-radius: 8px; }
.brand-btn:hover .mk-sim, .brand-btn:hover .mk-pal { background: var(--brand-deep); }
.mk-sim {
  flex: none; display: block; width: 32px; height: 23px; background: var(--brand);
  -webkit-mask: url("safety-simbolo.png") no-repeat center / contain;
          mask: url("safety-simbolo.png") no-repeat center / contain;
}
.mk-pal {
  display: block; width: 76px; height: 24px; background: var(--brand);
  -webkit-mask: url("safety-logotipo.png") no-repeat left center / contain;
          mask: url("safety-logotipo.png") no-repeat left center / contain;
}
.brand-sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 2px;
}

/* ── Entrada ─────────────────────────────────────────────────────────── */
/* A entrada é a primeira coisa que o colaborador vê todo dia: em vez de
   fundo liso, uma fotografia de treinamento de brigada — nítida, não
   apagada como a marca d'água da capa. Aqui ela pode aparecer, porque não
   há texto solto por cima; só o cartão opaco de entrada.

   O véu escuro por cima não é enfeite: a foto tem céu claro e concreto
   claro, e sem ele o cartão branco encostaria em áreas de luminosidade
   parecida. Com o véu, o contraste é o mesmo em qualquer recorte que a
   tela do aparelho faça. */
#login {
  position: relative; isolation: isolate;
  min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
}
#login::before, #login::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
#login::before {
  /* 58% e não 50%: em tela mais estreita que 16:9 o recorte morde as
     laterais, e é o leque do jato, à direita, que se perderia primeiro. */
  background: url("login-fundo.jpg") no-repeat 58% center / cover;
}
#login::after {
  background:
    radial-gradient(130% 100% at 38% 50%, rgba(0,0,0,.10), rgba(0,0,0,.55)),
    linear-gradient(to right, rgba(20,12,10,.12), rgba(20,12,10,.45));
}
#login > * { position: relative; z-index: 1; }
/* Em tela larga o cartão sai do meio: centrado, ele taparia justamente os
   três bombeiros. Encostado à direita, cobre só a névoa aberta do jato,
   que é a parte da foto sem informação. No celular o recorte é vertical e
   não sobra essa escolha — volta ao centro. */
@media (min-width: 900px) {
  #login { justify-items: end; padding-right: clamp(24px, 8vw, 130px); }
}
/* No celular a tela é mais alta que larga: o recorte come as laterais e,
   no ponto padrão, sobrava só fumaça. 30% traz os três bombeiros de volta
   para dentro do quadro, que é o motivo da foto estar ali. */
@media (max-width: 899px) {
  #login::before { background-position: 30% center; }
}
/* No escuro o cartão já é escuro: o véu aperta mais para ele não sumir
   dentro da própria foto. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #login::after { filter: brightness(.72); }
}
:root[data-theme="dark"] #login::after { filter: brightness(.72); }
.cartao-login {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); padding: 28px 24px 24px;
}
.cartao-login .brand { justify-content: center; margin-bottom: 22px; }
.cartao-login h1 { font-size: 21px; margin-bottom: 4px; }
.cartao-login .sub { color: var(--ink-2); font-size: 13px; margin-bottom: 20px; }

/* ── Campos ──────────────────────────────────────────────────────────── */
label.campo { display: block; margin-bottom: 13px; }
label.campo > span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px;
}
input[type=text], input[type=password], input[type=date], input[type=time],
input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: var(--alto); font-family: var(--font-b); font-size: 15px;
  color: var(--ink); background: var(--campo); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 12px;
}
select {
  /* A seta nativa muda de tamanho entre navegadores e desalinha a fileira. */
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238b8180' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
textarea { resize: vertical; min-height: 72px; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, .tar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dica-campo { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-b); font-size: 14px; font-weight: 700; color: #fff;
  background: var(--brand); border: 1px solid transparent; border-radius: var(--r);
  min-height: var(--alto); padding: 11px 17px; cursor: pointer; transition: background .15s;
}
.btn:hover { background: var(--brand-deep); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.larga { width: 100%; }
.btn.fraca { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.fraca:hover { background: var(--line-soft); }
.btn.peq { font-size: 13px; min-height: 36px; padding: 7px 12px; }
.btn.perigo { background: var(--card); color: var(--falha-txt); border-color: color-mix(in srgb, var(--falha) 45%, var(--line)); }
.btn.perigo:hover { background: var(--falha); border-color: var(--falha); color: #fff; }
.btn.verde { background: var(--ok-txt); }
.btn.verde:hover { filter: brightness(.92); }

.erro {
  background: color-mix(in srgb, var(--falha) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--falha) 40%, transparent);
  color: var(--falha-txt); border-radius: var(--r); padding: 10px 12px;
  font-size: 13px; margin-bottom: 14px;
}

/* ── Barra e abas ────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.bar-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.bar-sp { flex: 1 1 10px; }
.quem { text-align: right; line-height: 1.25; min-width: 0; }
.quem b { display: block; font-size: 13px; font-weight: 700; }
.quem span { font-size: 11px; color: var(--ink-3); }

.sino { position: relative; background: none; border: 0; cursor: pointer; padding: 6px; color: var(--ink-2); }
.sino .cont {
  position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--brand); color: #fff; border-radius: 9px;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.abas {
  /* `width: 100%` é obrigatório: com `margin: 0 auto`, um item de grade
     deixa de se esticar e passa a se medir pelo conteúdo — a fileira de
     abas do cadastro ficava com 681px numa tela de 390 e arrastava a
     página. Com a largura presa, o `overflow-x` faz o que devia: rolar
     por dentro. */
  display: flex; gap: 4px; width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 10px 16px 0; overflow-x: auto; scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  flex: none; font-family: var(--font-b); font-size: 13.5px; font-weight: 700;
  color: var(--ink-2); background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 12px; cursor: pointer; white-space: nowrap;
}
.aba[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }

/* O rótulo curto só existe no celular; no desktop vale o nome inteiro. */
.aba-curto { display: none; }

/* ── A barra de abas no celular ───────────────────────────────────────
   Com os nomes inteiros a fileira pedia 502px numa tela de 375 e rolava
   por dentro: quem não arrastasse não descobria que havia "Cadastro".
   Aba escondida não é aba. Aqui elas dividem a largura em partes iguais,
   com o nome curto e a fonte um ponto menor — cinco cabem até num
   aparelho de 320px, que é o menor que ainda aparece no time. */
@media (max-width: 640px) {
  /* Partes iguais cortavam "Histórico" e "Cadastro" no meio da palavra, o
     que é pior do que rolar: some a letra e ninguém sabe o que faltou.
     Aqui cada aba ocupa o que o nome precisa, e o que não couber desce
     para uma segunda linha. Duas linhas legíveis valem mais que uma
     linha picotada — e com tres abas, que é o caso de quem só executa,
     continua tudo numa linha só. */
  .abas {
    gap: 0; padding: 8px 6px 0;
    overflow-x: hidden; flex-wrap: wrap; justify-content: center;
    row-gap: 2px;
  }
  .aba {
    flex: 0 1 auto; min-width: 0; text-align: center;
    font-size: 11.5px; letter-spacing: -.01em; padding: 9px 6px;
  }
  .aba-longo { display: none; }
  .aba-curto { display: inline; }
}

/* ── Cartões ─────────────────────────────────────────────────────────── */
.cartao {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); padding: 18px;
}
.cartao > h2 { font-size: 15px; letter-spacing: .02em; }
.leg { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); margin: 3px 0 14px; }
.cartao > .leg:last-child, .leg:empty { margin-bottom: 0; }
.topo-sec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.topo-sec h2 { font-size: 17px; }

/* ── Cabeçalho do dia ────────────────────────────────────────────────── */
.capa { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.capa-txt { flex: 1 1 200px; min-width: 0; }
.capa-txt h1 { font-size: 22px; }
.capa-txt .data { font-size: 13px; color: var(--ink-2); }
.capa-txt .data::first-letter { text-transform: uppercase; }
.capa-txt .area { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.anel { flex: none; display: grid; place-items: center; position: relative; width: 92px; height: 92px; }
.anel svg { transform: rotate(-90deg); }
.anel .num {
  position: absolute; text-align: center; font-family: var(--font-d);
  font-size: 23px; line-height: 1; color: var(--ink);
}
.anel .num small { display: block; font-family: var(--font-b); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }

/* ── Listas de tarefas ───────────────────────────────────────────────── */
.grupo { margin-top: 18px; }
.grupo > h3 {
  font-family: var(--font-b); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.grupo > h3 .qt { color: var(--ink-3); font-weight: 600; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.tar {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--pend);
  border-radius: var(--r); padding: 12px 13px;
}
.tar.feita      { border-left-color: var(--ok); }
.tar.atrasada   { border-left-color: var(--atraso); }
.tar.dispensada { border-left-color: var(--disp); }
.tar.justificada{ border-left-color: var(--just); }
.tar.nao_feita  { border-left-color: var(--falha); }
.tar.vencida    { border-left-color: var(--falha); }

.marca {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--card); color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.marca:hover { border-color: var(--ink-3); }
.tar.feita .marca, .tar.atrasada .marca { background: var(--ok); border-color: var(--ok); color: #fff; }
.tar.atrasada .marca { background: var(--atraso); border-color: var(--atraso); color: #40320a; }
.tar.justificada .marca { background: var(--just); border-color: var(--just); color: #fff; }
.tar.dispensada .marca { background: var(--disp); border-color: var(--disp); color: #fff; }
.tar.vencida .marca, .tar.nao_feita .marca { border-color: var(--falha); color: var(--falha); }

.tar-txt { min-width: 0; }
.tar-tit { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.tar.feita .tar-tit, .tar.atrasada .tar-tit { color: var(--ink-2); }
.tar-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tar-desc { font-size: 13px; color: var(--ink-2); margin-top: 7px; white-space: pre-wrap; }
.tar-nota {
  font-size: 12.5px; color: var(--ink-2); margin-top: 7px; padding: 7px 9px;
  background: var(--line-soft); border-radius: 8px; white-space: pre-wrap;
}
.tar-nota b { font-weight: 700; color: var(--ink); }
.tar-acoes { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; padding: 3px 8px; border-radius: 20px;
  background: var(--line-soft); color: var(--ink-2); white-space: nowrap;
}
.chip.hora   { background: color-mix(in srgb, var(--a0) 15%, transparent); color: var(--ink); }
.chip.alto   { background: color-mix(in srgb, var(--falha) 15%, transparent); color: var(--falha-txt); }
.chip.medio  { background: color-mix(in srgb, var(--atraso) 24%, transparent); color: var(--atraso-txt); }
.chip.extra  { background: color-mix(in srgb, var(--a2) 18%, transparent); color: var(--ink); }

/* Anexo da tarefa extra: dois botões e o nome do arquivo escolhido. */
.extra-anexo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.extra-arquivo {
  font-size: 12px; color: var(--ink-2); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── Lançar tarefa extra, no celular ─────────────────────────────────
   Tarefa extra nasce no meio do serviço, com o celular na mão: ela tem
   de estar a um toque de qualquer tela. Por isso o botão flutua, vem
   escrito e usa a cor da marca — e some no desktop, onde a porta é o
   botão dentro de "Meu dia", que já está à vista. */
.extra-flutua { display: none; }

@media (max-width: 640px) {
  .extra-flutua {
    display: inline-flex; align-items: center; gap: 8px;
    position: fixed; right: 14px; z-index: 40;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 13px 18px; border: 0; border-radius: 26px; cursor: pointer;
    font-family: var(--font-b); font-size: 13.5px; font-weight: 700;
    background: var(--brand); color: #fff;
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .5);
  }
  .extra-flutua:active { transform: scale(.96); }
  .extra-flutua svg { display: block; }
}

/* No papel ele não existe. */
@media print { .extra-flutua { display: none !important; } }
.chip.minha  { background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); }
.chip.ok     { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok-txt); }
.chip.aviso  { background: color-mix(in srgb, var(--atraso) 24%, transparent); color: var(--atraso-txt); }
.chip.ruim   { background: color-mix(in srgb, var(--falha) 15%, transparent); color: var(--falha-txt); }

.vazio { text-align: center; color: var(--ink-3); font-size: 13.5px; padding: 26px 10px; }

/* ── Faixa de alerta ─────────────────────────────────────────────────── */
.faixa {
  display: flex; gap: 10px; align-items: flex-start; border-radius: var(--r);
  padding: 11px 13px; font-size: 13px; margin-bottom: 14px;
}
.faixa.atencao {
  background: color-mix(in srgb, var(--atraso) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--atraso) 45%, transparent); color: var(--ink);
}
.faixa.grave {
  background: color-mix(in srgb, var(--falha) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--falha) 38%, transparent); color: var(--ink);
}
.faixa.info {
  background: color-mix(in srgb, var(--a0) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--a0) 35%, transparent); color: var(--ink);
}
.faixa b { display: block; margin-bottom: 1px; }

/* ── Indicadores ─────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px 16px; }
.kpi .rot { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); }
.kpi .val { font-family: var(--font-d); font-size: 30px; line-height: 1.1; margin-top: 5px; }
.kpi .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.kpi.destaque { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }

/* ── Gráficos ────────────────────────────────────────────────────────── */
.graf { width: 100%; display: block; overflow: visible; }
.graf text { font-family: var(--font-b); fill: var(--ink-3); }
.graf .eixo { stroke: var(--line); stroke-width: 1; }
.graf .rot-v { font-size: 10px; fill: var(--ink-3); }
.graf .rot-d { font-size: 11px; font-weight: 700; fill: var(--ink); }
.legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.legenda i { width: 11px; height: 11px; border-radius: 3px; display: block; }

#dica {
  position: fixed; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.45;
  padding: 8px 10px; border-radius: 8px; max-width: 230px; box-shadow: var(--shadow);
}
#dica b { color: #fff; }
:root[data-theme="dark"] #dica, .modo-escuro #dica { background: #000; }

details.tabela-graf { margin-top: 10px; }
details.tabela-graf > summary {
  font-size: 12px; color: var(--ink-3); cursor: pointer; padding: 4px 0;
}

/* ── Tabelas ─────────────────────────────────────────────────────────── */
.rolar { overflow-x: auto; }
table.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tab th, table.tab td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.tab th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
table.tab td.n, table.tab th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.tab tbody tr:hover { background: var(--line-soft); }
table.tab .nome { font-weight: 600; }

.pilula {
  display: inline-block; min-width: 46px; text-align: center; font-weight: 700;
  font-size: 12px; padding: 3px 8px; border-radius: 20px;
}
.pilula.b-ok     { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok-txt); }
.pilula.b-aviso  { background: color-mix(in srgb, var(--atraso) 26%, transparent); color: var(--atraso-txt); }
.pilula.b-ruim   { background: color-mix(in srgb, var(--falha) 16%, transparent); color: var(--falha-txt); }

.bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

/* ── Filtros ─────────────────────────────────────────────────────────── */
.filtros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px 12px; align-items: end; margin-bottom: 14px;
}
.filtros label.campo { margin: 0; min-width: 0; }
.filtros select, .filtros input { min-width: 0; }
/* Botões e selo ao vivo ocupam a faixa inteira, embaixo dos campos. */
.filtros .btn, .filtros .ao-vivo { grid-column: 1 / -1; justify-self: start; align-self: center; }
.filtros .btn ~ .btn { grid-column: auto; }
@media (min-width: 700px) {
  .filtros .btn, .filtros .ao-vivo { grid-column: auto; }
}
.filtros .ao-vivo { padding-bottom: 0; }

/* ── Diálogos ────────────────────────────────────────────────────────── */
dialog {
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink);
  padding: 0; width: min(520px, calc(100vw - 28px)); box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
.dlg-topo { padding: 18px 20px 0; }
.dlg-topo h2 { font-size: 18px; }
.dlg-topo .leg { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.dlg-corpo { padding: 16px 20px; max-height: 68dvh; overflow-y: auto; }
.dlg-pe {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--line-soft);
}
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.escolhas { display: grid; gap: 8px; margin-bottom: 14px; }
.escolha {
  display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line);
  border-radius: var(--r); padding: 11px 12px; cursor: pointer;
}
.escolha:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, transparent); }
.escolha input { margin-top: 2px; }
.escolha b { display: block; font-size: 14px; }
.escolha span { font-size: 12.5px; color: var(--ink-2); }
.dias { display: flex; flex-wrap: wrap; gap: 6px; }
.dias label {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px;
  font-size: 12px; font-weight: 700; border: 1px solid var(--line); border-radius: 20px;
  padding: 6px 9px; cursor: pointer; color: var(--ink-2);
}
.dias label:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; }
.dias input { position: absolute; opacity: 0; pointer-events: none; }

/* ── Fechamento do dia ───────────────────────────────────────────────── */
.nota-dia { text-align: center; padding: 6px 0 14px; }
.nota-dia .n { font-family: var(--font-d); font-size: 54px; line-height: 1; }
.nota-dia .faixa-nome { font-size: 13px; font-weight: 700; margin-top: 4px; }
.comp { display: grid; gap: 9px; margin-top: 6px; }
.comp-l { display: grid; grid-template-columns: 112px 1fr 46px; gap: 10px; align-items: center; font-size: 12.5px; }
.comp-b { height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.comp-b i { display: block; height: 100%; border-radius: 4px; background: var(--a0); }
.medias { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-top: 16px; }
.media { text-align: center; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 6px; }
.media .r { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.media .v { font-family: var(--font-d); font-size: 22px; margin-top: 3px; }

/* ── Avisos ──────────────────────────────────────────────────────────── */
.aviso {
  border: 1px solid var(--line); border-left: 4px solid var(--a0);
  border-radius: var(--r); padding: 12px 13px; margin-bottom: 10px;
}
.aviso.importante { border-left-color: var(--atraso); }
.aviso.critico { border-left-color: var(--falha); }
.aviso h4 { font-family: var(--font-b); font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.aviso p { font-size: 13px; color: var(--ink-2); white-space: pre-wrap; }
.aviso .pe { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.aviso .quando { font-size: 11px; color: var(--ink-3); }

/* ── Toast ───────────────────────────────────────────────────────────── */
#toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(14px);
  z-index: 95; background: var(--ink); color: var(--bg); font-size: 13.5px; font-weight: 600;
  padding: 11px 16px; border-radius: 22px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  max-width: calc(100vw - 32px); text-align: center;
}
#toast.ver { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Carregando ──────────────────────────────────────────────────────── */
#carregando { min-height: 100dvh; display: grid; place-items: center; color: var(--ink-3); font-size: 14px; }

.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.sep { height: 1px; background: var(--line-soft); margin: 16px 0; }
.sumiu { color: var(--ink-3); font-size: 13px; }

/* ── Cabeçalho de folha ──────────────────────────────────────────────
   Não aparece no monitor: é o que dá ao papel o que a tela já tinha em
   volta — de que período o relatório fala, com que filtro e quando foi
   gerado. Sem isso, uma folha solta na mesa não se explica. */
.folha-topo { display: none; }
@media print {
  @page { margin: 12mm; }

  /* O modo escuro é da tela. No papel, a paleta clara de volta — senão o
     cartão sai preto, e com print-color-adjust: exact sai preto mesmo.
     O !important é necessário: o seletor do modo escuro
     (:root:not([data-theme="light"])) tem especificidade maior que :root e
     continua valendo dentro de @media print. */
  :root {
    --brand: #C3161C !important; --brand-deep: #9E0F16 !important;
    --ink: #231f1f !important; --ink-2: #4a4342 !important; --ink-3: #6f6665 !important;
    --bg: #fff !important; --card: #fff !important;
    --line: #bbb !important; --line-soft: #e6e6e6 !important; --campo: #fff !important;
    --ok: #42B662 !important; --atraso: #F2B826 !important; --just: #8b8180 !important;
    --disp: #6E7E86 !important;
    --falha: #C3161C !important; --pend: #A6BFD0 !important;
    --ok-txt: #2f7d48 !important; --atraso-txt: #8a6200 !important;
    --falha-txt: #a81319 !important;
    --a0: #0096FF !important; --a1: #FE5E08 !important;
    --a2: #844685 !important; --a3: #B06A42 !important;
    --shadow: none !important;
  }

  .bar, .abas, .tar-acoes, .btn, .filtros, .busca, .linha-botoes,
  #dica, #toast, #inicio-atalhos, #lembretes-botoes { display: none !important; }

  /* O período já está no cabeçalho da folha: na tela ele repõe a barra de
     filtros que some, no papel seria eco. */
  #painel-periodo, #hist-periodo { display: none !important; }

  body { background: #fff; color: #000; }
  .wrap { padding: 0 !important; max-width: none !important; }
  .cartao, .kpi { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .cols, .barras, .medias, .kpis, table.tab { break-inside: avoid; }
  .rolar { overflow: visible !important; }
  .tab th { background: #f1f1f1 !important; }

  /* "Ver como tabela" é um gesto de tela; no papel a tabela só abre. */
  details.tabela-graf > summary { display: none; }

  .folha-topo {
    display: flex !important; align-items: flex-start; gap: 12px;
    padding-bottom: 10px; margin-bottom: 14px;
    border-bottom: 2px solid var(--brand);
  }
  .folha-topo .mk-sim { flex: 0 0 auto; }
  .folha-topo h1 { font-family: var(--font-d); font-size: 17px; margin: 0; }
  .folha-topo p { font-size: 11.5px; color: #333; margin: 2px 0 0; }
  .folha-topo .folha-pe { margin-left: auto; text-align: right; white-space: nowrap; }

  /* A cor é informação aqui — barra, pilula e anel perdem o sentido em
     cinza, e o navegador descarta fundo por padrão. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Gráficos em HTML ────────────────────────────────────────────────
   Barra em <div> e não em SVG: o texto fica no tamanho do CSS em
   qualquer largura de tela, em vez de encolher junto com o viewBox. */
.barras { display: grid; gap: 9px; }
.barra {
  display: grid; grid-template-columns: minmax(92px, 150px) 1fr auto;
  gap: 10px; align-items: center;
}
.barra .rot { font-size: 13px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra .rot small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.barra .trilho { height: 14px; background: var(--line-soft); border-radius: 7px; overflow: hidden; }
.barra .trilho i { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.barra .v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 58px; text-align: right; }

.cols { display: flex; align-items: flex-end; gap: 3px; height: 180px; }
/* O teto de largura evita que um período de poucos dias vire um paredão. */
.col-d {
  flex: 1 1 0; min-width: 0; max-width: 54px; height: 100%;
  display: flex; flex-direction: column-reverse;
  gap: 2px; justify-content: flex-start; border-radius: 4px 4px 0 0;
}
.col-d:hover { background: var(--line-soft); }
.col-d i { display: block; width: 100%; }
.col-d i:last-child { border-radius: 4px 4px 0 0; }
.cols-x { display: flex; gap: 3px; margin-top: 7px; }
.cols-x span {
  flex: 1 1 0; min-width: 0; max-width: 54px; font-size: 10px; color: var(--ink-3);
  text-align: center; white-space: nowrap; overflow: hidden;
}

/* ── Evidência fotográfica ───────────────────────────────────────────── */
input[type=file] {
  width: 100%; font-family: var(--font-b); font-size: 13px; color: var(--ink-2);
  background: var(--campo); border: 1px dashed var(--line); border-radius: var(--r);
  padding: 10px 12px;
}
/* Tira de prévias: quadradas e do mesmo tamanho, para a lista não dançar
   conforme a foto seja retrato ou paisagem. */
.fotos-previa {
  display: grid; gap: 8px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
.fotos-previa .fp { position: relative; margin: 0; }
.fotos-previa img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r); display: block;
}
.fotos-previa .fp-x {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
  border: 0; border-radius: 50%; cursor: pointer; line-height: 1;
  background: rgba(0,0,0,.62); color: #fff; font-size: 16px; font-weight: 700;
}
.btn-foto {
  background: none; border: 0; cursor: pointer; color: var(--ok-txt);
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700;
  padding: 2px 4px;
}
.sem-foto { color: var(--ink-3); font-size: 12px; }
.foto-vis img { width: 100%; border-radius: var(--r); display: block; margin-bottom: 14px; }
.foto-meta { display: grid; gap: 7px; font-size: 13px; }
.foto-meta div { display: grid; grid-template-columns: 128px 1fr; gap: 10px; }
.foto-meta dt { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }

/* ── Tela de início ──────────────────────────────────────────────────── */
.cartao.inicio { text-align: center; padding: 30px 20px 26px; }
.cartao.inicio h1 { font-size: 27px; margin: 2px 0 4px; }
.cartao.inicio .data { font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }
.cartao.inicio .area { font-size: 13px; color: var(--ink-2); margin-bottom: 20px; }

.btn.gigante {
  font-family: var(--font-d); font-size: 23px; font-weight: 500; letter-spacing: .06em;
  padding: 18px 44px; border-radius: 14px; width: min(100%, 320px);
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--brand) 70%, transparent);
}
.resumo-inicio {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px;
}
.resumo-inicio span {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  background: var(--line-soft); border-radius: 20px; padding: 7px 14px;
}
.resumo-inicio span b { font-family: var(--font-d); font-size: 17px; }
.folga {
  background: color-mix(in srgb, var(--a0) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--a0) 35%, transparent);
  border-radius: var(--r); padding: 16px; margin-bottom: 20px;
}
.folga b { display: block; font-size: 15px; margin-bottom: 3px; }

.alerta-item {
  display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--line);
  border-left: 4px solid var(--falha); border-radius: var(--r);
  padding: 11px 13px; margin-bottom: 9px;
}
.alerta-item.importante { border-left-color: var(--atraso); }
.alerta-item .txt { flex: 1 1 auto; min-width: 0; }
.alerta-item b { display: block; font-size: 13.5px; }
.alerta-item p { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.alerta-item .quando { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
/* Alerta que abre alguma coisa se comporta como botão: cursor, realce e
   foco por teclado. O alerta de rotina continua só informando. */
.alerta-item.clicavel { cursor: pointer; }
.alerta-item.clicavel:hover { background: var(--line-soft); }
.alerta-item.clicavel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Ficha da tarefa extra. */
.det-titulo { font-family: var(--font-d); font-size: 19px; margin: 0 0 12px; }
.det { display: grid; gap: 8px; margin: 0; }
.det > div { display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: baseline; }
.det dt { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); }
.det dd { margin: 0; font-size: 13.5px; }
.det-sec { font-family: var(--font-b); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line); padding-bottom: 5px; margin: 18px 0 9px; }
@media (max-width: 560px) {
  .det > div { grid-template-columns: 1fr; gap: 1px; }
}

/* ── Painel ao vivo ──────────────────────────────────────────────────── */
.ao-vivo {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  font-weight: 600; color: var(--ink-3); padding-bottom: 10px;
}
.ao-vivo i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent);
  animation: pulso 2.4s ease-out infinite;
}
.ao-vivo.parado i { background: var(--ink-3); animation: none; box-shadow: none; }
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 65%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .ao-vivo i { animation: none; } }

/* ── Rotina com tarefas dentro ───────────────────────────────────────── */
.tar-rotina {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}
tr.linha-rotina > td { border-top: 1px solid var(--line); }
tr.linha-rotina > td.nome { font-weight: 700; }
tr.linha-item > td { border-bottom-color: var(--line-soft); }
tr.linha-item > td.nome { padding-left: 22px; font-weight: 500; }
tr.linha-item > td:not(.nome) { color: var(--ink-2); }
.galho { color: var(--ink-3); margin-right: 2px; }
td.acoes-linha { white-space: nowrap; display: flex; gap: 6px; }

/* ── Busca nas listas ────────────────────────────────────────────────── */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
label.busca { display: block; position: relative; margin-bottom: 12px; }
label.busca input {
  width: 100%; padding-left: 34px; font-size: 14px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8180' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 11px center;
}
label.busca input::-webkit-search-cancel-button { cursor: pointer; }
.nada-achado {
  text-align: center; color: var(--ink-3); font-size: 13.5px; padding: 22px 10px;
}
.nada-achado b { color: var(--ink); }


/* ── Caber na tela do celular ────────────────────────────────────────
   Filho de grid ou de flex nasce com min-width: auto, o que significa
   "não encolho abaixo do meu conteúdo". Uma tabela de dez colunas então
   empurrava o cartão, o cartão empurrava a página, e o celular respondia
   reduzindo o zoom até tudo caber — a tela inteira ficava miúda e o
   usuário não tinha como saber por quê. Zerar o mínimo devolve a rolagem
   para dentro do .rolar, que é onde ela sempre deveria ter ficado. */
.col, .col > *, .cartao, .kpis > *, .lista > *, .tar, .tar-txt,
.barra, .barra > *, .comp-l > *, .filtros > *, .alerta-item,
.capa, .capa-txt, .bar-in, .bar-in > * { min-width: 0; }

/* Rede para o conteúdo que ainda não existe. `clip` e não `hidden`:
   `hidden` criaria contexto de rolagem e mataria o sticky da barra. */
@media screen { body { overflow-x: clip; } }   /* na folha, não: cortaria tabela larga */

/* O nome da pessoa não pode empurrar a barra para fora da tela. */
.quem b, .quem span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 820px) {
  /* Abaixo de 16px o iOS dá zoom ao focar o campo e a tela "pula" para
     o lado — a correção é o tamanho, não desligar o zoom do usuário. */
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 560px) {
  :root { --alto: 46px; }           /* alvo de toque confortável */
  .wrap { padding: 0 14px 84px; }
  .bar { padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }

  /* A barra do celular só cabe com o essencial. O nome e o cargo saem:
     eles ficavam espremidos a poucos pixels, viravam um resto de texto
     ilegível no meio dos botões — e a mesma informação está na saudação
     da tela de início. */
  .bar-in { gap: 6px; }
  .quem { display: none; }
  .brand-sub { display: none; }
  .brand-btn { flex: 0 1 auto; padding-right: 0; }
  .brand-btn .mk-pal { width: 68px; }
  .tema, .sino { flex: none; width: 36px; height: 36px; }
  .sino { display: grid; place-items: center; padding: 0; }
  #btn-sair { flex: none; padding: 7px 11px; }

  .cartao { padding: 15px 14px; border-radius: 12px; }
  .cartao.inicio { padding: 26px 16px 22px; }
  .cartao.inicio h1 { font-size: 24px; }
  .topo-sec h2 { font-size: 16px; }

  .linha-campos { grid-template-columns: 1fr; }
  .capa-txt h1 { font-size: 19px; }
  .kpi .val { font-size: 26px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
  .tar { padding: 11px; gap: 10px; }
  .medias { grid-template-columns: repeat(2, 1fr); }
  .filtros { grid-template-columns: 1fr 1fr; }
  .filtros label.campo:first-child, .filtros label.busca { grid-column: 1 / -1; }

  /* Botão que vira linha inteira é mais fácil de acertar com o polegar. */
  .linha-botoes .btn, .dlg-pe .btn { flex: 1 1 100%; }
  .anel { width: 78px; height: 78px; }
  .nota-dia .n { font-size: 46px; }
  .comp-l { grid-template-columns: 92px 1fr 40px; }
}

/* ── Tema claro e escuro ─────────────────────────────────────────────
   O padrão continua sendo o do aparelho; o botão é para quem trabalha
   num galpão claro de dia e quer a tela escura à noite, sem mexer no
   sistema. A escolha fica no próprio aparelho (localStorage). */
.tema {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-2); cursor: pointer; padding: 0;
}
.tema:hover { background: var(--line-soft); color: var(--ink); }
.tema svg { display: block; }

/* ── Marca d'água da capa ────────────────────────────────────────────
   Uma fotografia de turma em treinamento, que é o que a empresa faz. Ela
   é fundo, não ilustração: entra dessaturada, bem apagada, e com um
   degradê que a dissolve justo onde ficam o nome e a data. Marca d'água
   que disputa leitura com o texto deixou de ser marca d'água.

   A opacidade é maior no escuro porque foto apagada sobre fundo preto
   some; o mesmo número nos dois temas daria um lado invisível. */
/* A fotografia deixou de ser um detalhe dentro do cartão: agora ela ocupa
   a tela inteira, centralizada, atrás de tudo. Continua dessaturada e
   apagada — é a sala onde o trabalho acontece, não um cartaz —, mas no
   tamanho certo dá para ver gente trabalhando, que é o ponto.

   Posição fixa, e não absoluta: assim ela não rola junto com o conteúdo
   nem se repete, e fica do tamanho da tela em qualquer aparelho. */
#tela-inicio { position: relative; }
#tela-inicio::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: url("marca-dagua.jpg") no-repeat center center / cover;
  filter: grayscale(1) contrast(1.06);
  opacity: .20;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 42%, #000 32%, transparent 86%);
          mask-image: radial-gradient(130% 100% at 50% 42%, #000 32%, transparent 86%);
}
#tela-inicio > * { position: relative; z-index: 1; }

/* Os cartões ficam translúcidos para a foto atravessar a tela toda. Sem
   isso ela só apareceria nas beiradas, e o pedido era o contrário. */
.cartao.inicio, .cartao.inicio-ind {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tela-inicio::before { opacity: .30; }
}
:root[data-theme="dark"] #tela-inicio::before { opacity: .30; }

/* No papel ela só gastaria tinta e atrapalharia a leitura. */
@media print {
  #tela-inicio::before { display: none; }
  .cartao.inicio, .cartao.inicio-ind { background: var(--card); backdrop-filter: none; }
}

/* ── Indicadores do mês ──────────────────────────────────────────────
   Quadrinhos com ícone e número. O que entra depende de quem olha: quem
   executa vê o próprio mês, quem gere vê o da área. Mesma moldura para
   os dois — o que muda é o conteúdo, não o desenho. */
.cartao.inicio-ind { margin-top: 12px; }
.ind-titulo {
  font-family: var(--font-b); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 12px;
}
.ind-grade {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.ind {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
/* Cinza por padrão: cor aqui quer dizer alguma coisa. Guardar verde,
   amarelo e vermelho para o que de fato vai bem, pede atenção ou está
   ruim faz o olho achar o problema sem ler a grade inteira. */
.ind-icone {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink-3) 15%, transparent);
  color: var(--ink-2);
}
/* Blocos, não linhas: em span o número e o rótulo ficavam colados. */
.ind-txt { display: block; min-width: 0; }
.ind-num {
  display: block;
  font-family: var(--font-d); font-size: 22px; font-weight: 600;
  line-height: 1.05; color: var(--ink);
}
.ind-rot {
  display: block;
  font-size: 11px; color: var(--ink-2); line-height: 1.3; margin-top: 3px;
}
.ind.bom    .ind-icone { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok-txt); }
.ind.atencao .ind-icone { background: color-mix(in srgb, var(--atraso) 22%, transparent); color: var(--atraso-txt); }
.ind.ruim   .ind-icone { background: color-mix(in srgb, var(--falha) 15%, transparent); color: var(--falha-txt); }

@media (max-width: 560px) {
  .ind-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind { padding: 10px; gap: 8px; }
  .ind-num { font-size: 19px; }
}

/* ── Rodapé ──────────────────────────────────────────────────────────
   A marca fecha todas as telas, com o lema e a versão. A versão não é
   enfeite: quando alguém liga dizendo que o app está estranho, a primeira
   pergunta é qual versão está no aparelho dele. */
.rodape {
  margin: 28px auto 0; padding: 22px 16px 26px;
  max-width: 980px; text-align: center;
  border-top: 1px solid var(--line);
}
.rodape-marca {
  display: inline-flex; align-items: center; gap: 9px;
  opacity: .55; margin-bottom: 9px;
}
.rodape-marca .mk-sim { width: 26px; height: 19px; background: var(--ink-2); }
.rodape-marca .mk-pal { width: 72px; height: 22px; background: var(--ink-2); }
.rodape-lema {
  font-family: var(--font-d); font-size: 12.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 6px;
}
.rodape-leg { font-size: 11px; color: var(--ink-3); margin: 0; line-height: 1.6; }

@media print { .rodape { display: none !important; } }

/* ── Folha do relatório ──────────────────────────────────────────────
   Esta tela existe para virar papel: é a folha que se entrega a alguém,
   se arquiva ou se leva a uma reunião. Por isso ela tem cabeçalho e
   legenda próprios, e linhas de assinatura no fim — o painel não tem
   nada disso porque ninguém assina uma tela. */
.folha { padding: 26px 28px; }
.folha-cab {
  display: flex; gap: 13px; align-items: flex-start;
  border-bottom: 2px solid var(--brand); padding-bottom: 12px; margin-bottom: 18px;
}
.folha-cab h1 { font-size: 19px; margin: 0; }
.folha-cab p { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.folha-sec { margin-bottom: 20px; }
.folha-sec > h2 {
  font-family: var(--font-b); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line); padding-bottom: 5px; margin-bottom: 9px;
}
.folha-linha-resumo { font-size: 12.5px; color: var(--ink-2); margin-bottom: 9px; }
.folha-tab { font-size: 12px; }
.folha-tab th, .folha-tab td { padding: 6px 8px; vertical-align: top; }
.folha-tab tbody tr:hover { background: none; }
.folha-legenda ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ink-2); }
.folha-legenda li { margin-bottom: 5px; }
.folha-legenda b { color: var(--ink); }
.folha-ass {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 34px;
  font-size: 11.5px; color: var(--ink-2);
}
.folha-ass div { flex: 1 1 180px; text-align: center; }
.folha-ass span { display: block; border-top: 1px solid var(--ink-3); margin-bottom: 4px; }

@media print {
  .folha { padding: 0; border: 0; }
  /* Cabeçalho da tabela repetido a cada página: sem isso a segunda folha
     chega com colunas sem nome. */
  .folha-tab thead { display: table-header-group; }
  .folha-tab tr { break-inside: avoid; }
  .folha-sec { break-inside: auto; }
  .folha-legenda, .folha-ass { break-inside: avoid; }
  .folha-ass { margin-top: 26px; }
}

@media (max-width: 560px) {
  .folha { padding: 16px 14px; }
  .folha-cab h1 { font-size: 17px; }
}

/* ── Mostrar senha ───────────────────────────────────────────────────
   O invólucro envolve **só o campo**, não o rótulo: assim o olho
   centraliza na altura do próprio campo, sem depender da margem do
   rótulo nem de número mágico nenhum. O botão sobrepõe em vez de ficar
   ao lado, para a largura da caixa não mudar e o alinhamento com os
   outros campos se manter. */
.com-olho { display: block; margin-bottom: 13px; }
.rot-campo {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px;
}
.so-campo { position: relative; display: block; }
.so-campo input { padding-right: 46px; }
.olho {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 34px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r);
  color: var(--ink-3); cursor: pointer; padding: 0;
}
.olho:hover { color: var(--ink); }
.olho[aria-pressed="true"] { color: var(--brand); }

/* ── Régua de botões ─────────────────────────────────────────────────
   Os botões saíram de dentro da grade de filtros: lá cada um virava uma
   coluna e eles terminavam de larguras diferentes, em degraus. Numa
   fileira própria ficam todos na mesma linha, do mesmo tamanho. */
.acoes-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px;
}
.acoes-barra .btn { flex: 0 0 auto; }
.acoes-barra .ao-vivo { padding-bottom: 0; margin-left: 4px; }
@media (max-width: 560px) {
  /* No celular a fileira vira coluna: dois botões meio-a-meio ficam
     estreitos demais para o polegar. */
  .acoes-barra .btn { flex: 1 1 100%; }
}

/* Select compacto dentro do cabeçalho de um cartão. O seletor precisa
   da mesma especificidade de `label.campo`, senão a margem de 13px dele
   vence e desalinha o select em relação ao título. */
label.campo.campo-inline { margin: 0; max-width: 230px; }
.campo-inline select { min-height: 34px; padding: 4px 30px 4px 10px; font-size: 13px; }

/* ── Prévia dos próximos dias ────────────────────────────────────────
   Propositalmente diferente do cartão de hoje: sem botão redondo, sem
   ação. O banco só aceita registro do dia, então um item que parecesse
   clicável prometeria o que não se cumpre. */
.previa { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.previa li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-left: 3px solid var(--pend);
  border-radius: var(--r); padding: 9px 11px; background: var(--card);
}
.prev-h {
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.prev-txt { min-width: 0; }
.prev-txt b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.prev-txt small { display: block; font-size: 11px; color: var(--ink-3); }
.prev-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 560px) {
  .previa li { grid-template-columns: 1fr auto; }
  .prev-h { grid-column: 1 / -1; }
}

/* ── Impressão reservada à gestão ────────────────────────────────────
   O colaborador acompanha o próprio desempenho na tela; relatório em
   papel é da gestão. Esconder o botão não bastava — o Ctrl+P do
   navegador passa por fora dele. Aqui a folha sai com o aviso e nada
   mais.

   É um freio, não um lacre: foto da tela ninguém impede. O que isto
   evita é a cópia fácil circulando fora do sistema. */
@media print {
  :root[data-impressao="bloqueada"] #app,
  :root[data-impressao="bloqueada"] #login,
  :root[data-impressao="bloqueada"] .folha-topo { display: none !important; }

  :root[data-impressao="bloqueada"] body::after {
    content: "Rotinas Safety — a impressão de relatórios é reservada à gestão. "
             "Consulte o seu desempenho no aplicativo, em Meu histórico.";
    display: block; padding: 40mm 20mm; text-align: center;
    font-family: var(--font-b); font-size: 13px; line-height: 1.6; color: #231f1f;
  }
}

/* Aviso de véspera no Início: uma linha, nunca um bloco. */
.amanha {
  margin-top: 14px; font-size: 13px; color: var(--ink-2);
  border-top: 1px solid var(--line-soft); padding-top: 12px;
}
.amanha b { color: var(--ink); }
.btn-link {
  background: none; border: 0; padding: 0 0 0 4px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--brand); text-decoration: underline;
}
.btn-link:hover { color: var(--brand-deep); }

/* ── Fim da folha ────────────────────────────────────────────────────
   O recuo final da página mora aqui, e não junto do botão flutuante,
   porque a regra de .wrap do bloco de 820px vem depois dele no arquivo e
   venceria por ordem. Sem este espaço o botão tapa a última linha. */
@media (max-width: 640px) {
  .wrap { padding-bottom: 104px; }
}