/* reports.css — legenda/timeline de pontos, cards de tipo de relatório,
   espelho de ponto (tela + impressão) e horas extras simplificadas.
   Estava injetado via JS em app.js (document.head.insertAdjacentHTML) —
   movido pra cá como parte da consolidação de CSS (ver ESTADO-ATUAL.md
   item 39). O @media print abaixo é preservado literalmente: já resolvia
   bugs reais de impressão (colunas embaralhadas, texto vazando) e continua
   funcionando igual, só mudou de arquivo. */

/* A legenda e os pontos (.timeline-legend-dot / .timeline-point) deste bloco
   eram o esquema visual ANTIGO (verde/vermelho cheio = original, branco com
   borda grossa = editado). O esquema atual (pílula única, entrada azul/saída
   vermelha, anel laranja = ajustado) vive inteiro em timeline-detail.css e já
   usa outros nomes de classe pra legenda (.entry/.exit/.edited/.rejected, não
   .entry-orig/.entry-edit/...). Só o ponto em si (.point-entry-edited etc.)
   ainda recebe a classe antiga via app.js (nunca removida, só as classes
   novas são adicionadas por cima) — como este arquivo carrega DEPOIS de
   timeline-detail.css, a regra antiga (fundo branco) ganhava do empate de
   especificidade e deixava o ponto "ajustado" invisível (branco no branco).
   Removido — quem estiliza .timeline-point agora é só timeline-detail.css. */

.record-points-list { display: grid; gap: 10px; margin: 10px 0; }
.record-point-line { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: end; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px; overflow: hidden; }
.record-point-line.highlighted-point { border-color: var(--color-accent); background: var(--color-primary-soft); }

.report-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.report-type-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px; text-align: left; display: flex; gap: 12px; align-items: center; cursor: pointer; transition: all .15s ease; }
.report-type-card:hover, .report-type-card.active { border-color: var(--color-accent); background: var(--color-primary-soft); box-shadow: 0 4px 14px var(--color-accent-soft); }
.report-type-card .card-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; font-size: 18px; font-weight: 700; flex: none; }
.report-type-card.active .card-icon { background: var(--color-primary); color: #fff; }
.report-type-card strong { display: block; font-size: 13px; color: #1e293b; margin-bottom: 2px; }
.report-type-card small { display: block; font-size: 11px; color: #64748b; line-height: 1.3; }

.report-main-actions { display: flex; gap: 10px; align-items: center; }
.report-filter-panel { margin-bottom: 24px; padding-block: 18px; }
.report-filter-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,252px); gap:14px; align-items:start; }
.report-filter-main { min-width:0; }
.report-filter-panel .filter-grid { grid-template-columns: minmax(220px, 1.4fr) minmax(145px, 1fr) minmax(145px, 1fr); align-items:end; }
.report-filter-panel .filter-grid > .report-period-shortcuts {
  grid-column: 2;
  width: auto;
  min-width: 0;
  margin-top: 0;
  align-self: end;
}
.report-filter-panel .filtro-mensal {
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.report-filter-panel .filtro-mensal .period-track { min-width: 0; }
.report-actions-stack { display: grid; gap: 8px; align-self: start; }
.report-actions-stack button { width: 100%; min-height: 38px; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.report-action-wrap { position: relative; }
.report-actions-stack .outline-button:not(:disabled):hover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); box-shadow: 0 6px 16px var(--color-primary-soft); transform: translateY(-1px); }
.report-actions-stack .create-button:not(:disabled):hover { box-shadow: 0 8px 18px var(--color-primary-soft); transform: translateY(-1px); }
.report-actions-stack button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; transform: none; }
.report-action-warning { position:absolute; z-index:20; right:calc(100% + 10px); top:50%; width:260px; padding:11px 12px; border:1px solid #fdba74; border-radius:10px; background:#fff7ed; color:#9a3412; box-shadow:0 12px 30px rgba(120,53,15,.18); font-size:11px; font-weight:700; line-height:1.45; opacity:0; visibility:hidden; pointer-events:none; transform:translate(6px,-50%); transition:opacity .15s ease,transform .15s ease,visibility .15s; }
.report-action-warning::after { content:""; position:absolute; left:100%; top:50%; border:6px solid transparent; border-left-color:#fdba74; transform:translateY(-50%); }
.report-action-wrap.report-action-blocked:hover .report-action-warning,.report-action-wrap.report-action-blocked:focus-within .report-action-warning { opacity:1; visibility:visible; transform:translate(0,-50%); }
.report-action-hint { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); color: #8a98aa; font-size: 10px; line-height: 1.35; }
.report-signature-ready { display: inline-block; color: #64748b; font-size: 11px; font-weight: 700; }
/* Mesmo âmbar do selo EM ABERTO logo acima: a frase explica aquele status, e
   as duas linhas precisam se ler como uma informação só. */
.report-signature-ready.pending { color: #b45309; }

.espelho-sheet { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.espelho-header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 2px solid #e2e8f0; margin-bottom: 10px; }
.espelho-header h2 { margin: 0 0 4px; font-size: 18px; color: #0f172a; }
.espelho-header p { margin: 0; font-size: 12px; color: #64748b; }
.espelho-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; background: #f8fafc; padding: 14px; border-radius: 8px; font-size: 12px; margin-bottom: 18px; border: 1px solid #e2e8f0; }
.espelho-meta strong { display: block; color: #0f172a; font-weight: 700; }
.espelho-meta span { color: #64748b; font-size: 11px; }
.espelho-schedule { display:grid; grid-template-columns:92px 1fr; gap:8px 14px; align-items:start; margin-bottom:10px; padding:9px 12px; border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc; color:#475569; font-size:11px; }
.espelho-schedule>strong { color:#1e293b; text-transform:uppercase; letter-spacing:.05em; font-size:10px; }
.espelho-schedule>div { display:grid; grid-template-columns:55px 82px minmax(0,1fr); gap:3px 10px; align-items:center; }
.espelho-schedule b { color:#1e293b; }
.espelho-schedule small { color:#64748b; }
.espelho-optional-meta { display:flex; flex-wrap:wrap; gap:8px 20px; margin:-2px 0 10px; padding:0 2px; color:#64748b; font-size:10px; }
.espelho-optional-meta b { margin-left:4px; color:#334155; }

.report-table { width: 100%; border-collapse: collapse; font-size: 12px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report-table th { background: #f1f5f9; color: #475569; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-align: left; padding: 10px; border: 1px solid #e2e8f0; }
.report-table td { padding: 9px 10px; border: 1px solid #e2e8f0; color: #334155; }
/* styles.css aplica td:first-child{display:flex} a TODA tabela do site (feito
   para a coluna "pessoa + avatar" das listagens). Nas tabelas de relatório isso
   transformava a 1ª célula em flex container, e text-align deixa de valer em
   flex — era por isso que o valor de PREVISTAS ficava encostado à esquerda
   enquanto as outras colunas apareciam centralizadas. */
.report-table td:first-child { display: table-cell; align-items: initial; gap: 0; }
/* Cabeçalho em duas linhas ("TRABALHADAS" + qualificador). Sem isso, palavras
   longas não cabem nas colunas estreitas da tabela e vazam por cima da coluna
   vizinha — o efeito de nomes embolados que aparecia na impressão/PDF. */
.report-table th .table-sub { display: block; margin-top: 2px; font-size: 9px; font-weight: 600; opacity: .8; letter-spacing: .02em; }
.espelho-table th { hyphens: auto; overflow-wrap:anywhere; line-height:1.15; padding-inline:5px; }
.espelho-table th:not(:nth-child(2)),.espelho-table td:not(:nth-child(2)){text-align:center!important}
.espelho-table th:nth-child(2),.espelho-table td:nth-child(2){text-align:left!important}
.espelho-table th:first-child, .espelho-table td:first-child { white-space: nowrap; }
.report-table tbody tr:nth-child(even) { background: #f8fafc; }
.report-table tr.weekend-row { background: #f1f5f9; }
.report-table tr.summary-row td { background: #e2e8f0; font-weight: 700; border-top: 2px solid #cbd5e1; }
.report-table .negative { color: #ef4444; font-weight: 700; }
.report-table .positive { color: #10b981; font-weight: 700; }
.punch-chain { display: block; white-space: normal; overflow-wrap: anywhere; font-family: monospace; font-size: 12px; font-weight: 600; line-height: 1.45; color: #0f172a; }
.report-legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0;
  color: #64748b;
  font-size: 11px;
  white-space: nowrap;
}
.report-legend-preset { color: var(--color-edit, #ff6b00); font-weight: 700; }
.simplified-hours-wrap { margin: 18px auto 0; max-width: 650px; }

/* border-collapse quebra border-radius em <table>; a moldura fica no
   container (mesmo padrão de cantos arredondados usado nos cards). */
.espelho-table-wrap, .simplified-hours-wrap { border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; }
.espelho-table-wrap .report-table, .simplified-hours-wrap .report-table { border: 0; }
.espelho-table { table-layout: fixed; }
.espelho-table td:nth-child(2) { white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.espelho-table td:not(:nth-child(2)){padding-inline:5px;white-space:nowrap}
.espelho-table th:nth-child(2),.espelho-table td:nth-child(2){padding-inline:9px}

/* Horas Extras Simplificadas: só tem uma linha de somatórios, não precisa
   do mesmo destaque/tamanho da tabela principal. */
.simplified-hours-table { font-size: 12.5px; }
.simplified-hours-table th, .simplified-hours-table td { padding: 5px 8px; text-align: center; }
.simplified-hours-table thead tr:first-child th { padding: 5px 8px; font-size: 11px; background: #334155; color: #fff; text-align: center; letter-spacing: 0.06em; }

/* Os dois cards do resumo, lado a lado como no PDF: horas de um lado, dias do
   outro. O card de horas é o que tem mais células (até sete), então fica com a
   fatia maior. Abaixo de 900px eles empilham — em coluna estreita, sete células
   numa linha só ficariam ilegíveis, e a tela não tem o compromisso de caber na
   página que o PDF tem. */
.espelho-summary-cards { display:grid; grid-template-columns:1.35fr 1fr; gap:14px; align-items:start; max-width:1040px; margin:0 auto; }
.espelho-summary-cards .hours-summary-pill { max-width:none; margin:16px 0 0; }
@media (max-width:900px) { .espelho-summary-cards { grid-template-columns:1fr; gap:0; } }
.hours-summary-pill { max-width:720px; margin:16px auto 0; overflow:hidden; border:1px solid #dbe3ec; border-radius:14px; background:#fff; }
.hours-summary-pill header,.hours-summary-pill footer { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:9px 13px; }
.hours-summary-pill header { background:#334155; color:#fff; }
.hours-summary-pill header span { font-size:11px; font-weight:800; letter-spacing:.08em; }
.hours-summary-pill header strong { font-size:15px; }
/* UMA linha, sempre. Com `auto-fit`/`minmax(105px)` o resumo virava 2 linhas
   assim que aparecia um card condicional (horas em falta, noturnas), deixando
   uma faixa quase vazia embaixo. `grid-auto-flow:column` + colunas de
   `minmax(0,1fr)` dividem a largura entre quantos cards houver: eles ficam mais
   estreitos, nunca quebram para baixo. O rótulo já tinha altura reservada para
   2 linhas (min-height:26px), que é o que "Folgas respeitadas" usa. */
.hours-summary-grid { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); background:#f8fafc; }
.hours-summary-grid div { min-width:0; padding:10px 7px; border-right:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; text-align:center; }
.hours-summary-grid div:last-child { border-right:0; }
.hours-summary-grid span { display:block; min-height:26px; color:#64748b; font-size:10px; line-height:1.3; }
.hours-summary-grid strong { display:block; margin-top:3px; color:#0f172a; font-size:15px; }
.hours-summary-missing { background:#fff8f8; }
.hours-summary-grid .hours-summary-missing span,
.hours-summary-grid .hours-summary-missing strong { color:#dc2626; }
/* Contagem em DIAS. A marca nasceu quando esses números dividiam card com as
   horas — "13/13" ao lado de "00:00" se lia como mais um relógio. Desde 26/08
   os dias têm card próprio, e o azul continua porque é o que diz de relance,
   com os dois cards lado a lado, qual deles é hora e qual é dia. */
.hours-summary-days { background:#f3f7ff; }
.hours-summary-grid .hours-summary-days strong { color:#2d5fd0; }
.hours-summary-pill footer { color:#047857; background:#ecfdf5; }
.hours-summary-pill.negative footer { color:#b91c1c; background:#fef2f2; }
.hours-summary-pill footer div { display:grid; gap:1px; }
.hours-summary-pill footer span { font-size:11px; font-weight:900; letter-spacing:.06em; }
.hours-summary-pill footer small { color:#64748b; font-size:9px; font-weight:600; }
.hours-summary-pill footer>strong { font-size:18px; }
/* Jornada que ainda não terminou: a linha existe para o conferente ver que o
   dia está na escala, mas nada nela foi apurado. Texto mais claro separa o
   "ainda não" do "não teve", sem tirar a linha da tabela. */
.espelho-table tr.pending-row td { color:#94a3b8; }
.espelho-table tr.pending-row .punch-chain { font-style:italic; }
/* Origem dos créditos e frequência: detalhamento do que já está somado no card,
   então fica no mesmo tom da nota legal — presente para conferência, sem
   competir com os números do resumo. */
.espelho-credit-breakdown { margin:8px 0 0; color:#64748b; font-size:10px; text-align:center; }
.espelho-credit-breakdown b { color:#334155; font-weight:800; }
.espelho-credit-breakdown i { font-style:normal; color:#b45309; }
/* Status do período no cabeçalho da folha: quem confere precisa saber, antes de
   olhar os totais, se o mês já pôde ser fechado. */
.espelho-status { font-size:10px; font-weight:800; letter-spacing:.05em; }
.espelho-status.aberto { color:#b45309; }
.espelho-status.fechado { color:#047857; }
.espelho-legal-footer { margin:14px 0 0; color:#94a3b8; font-size:9px; text-align:center; }

.print-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; padding-top: 20px; text-align: center; }
.signature-acknowledgement { margin: 28px 0 0; color: #475569; font-size: 10px; line-height: 1.45; text-align: center; }
.sig-line { border-top: 1px solid #0f172a; margin-bottom: 8px; width: 80%; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .report-type-grid { grid-template-columns: repeat(2, 1fr); }
  .espelho-meta { grid-template-columns: repeat(2, 1fr); }
  .report-filter-layout { grid-template-columns:1fr; }
  .report-filter-panel .filter-grid { grid-template-columns: 1fr 1fr; }
  .report-actions-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-action-warning { left:0; right:auto; top:calc(100% + 8px); transform:translateY(-4px); }
  .report-action-warning::after { left:18px; top:auto; bottom:100%; border-left-color:transparent; border-bottom-color:#fdba74; transform:none; }
  .report-action-wrap.report-action-blocked:hover .report-action-warning,.report-action-wrap.report-action-blocked:focus-within .report-action-warning { transform:translateY(0); }
}

@media (max-width: 620px) {
  .report-filter-panel .filter-grid { grid-template-columns: 1fr; }
  .report-filter-panel .filter-grid > .report-period-shortcuts { grid-column: auto; }
  .report-actions-stack { grid-template-columns: 1fr; }
}

/* Tabela de lotes de recibos (Recibos de pagamento): título do lote fica à
   esquerda, todas as outras colunas centralizadas — pedido do usuário. */
.payroll-batch-table th:not(:first-child), .payroll-batch-table td:not(:first-child) { text-align: center !important; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body { background: #fff !important; color: #000 !important; }
  .sidebar, .topbar, .report-type-grid, .report-filter-panel, .report-main-actions, .eyebrow, .subtitle, .row-button, .create-button, .outline-button { display: none !important; }
  .main-content { margin: 0 !important; width: 100% !important; }
  .page { padding: 0 !important; max-width: 100% !important; }
  .espelho-sheet { border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; page-break-after: always; }
  .espelho-meta { background: #fff !important; border: 1px solid #ccc !important; }
  .espelho-schedule { padding:5px 8px!important; margin-bottom:6px!important; }
  .hours-summary-pill { break-inside:avoid; page-break-inside:avoid; }
  .report-table td { border: 1px solid #999 !important; padding: 5px 4px !important; font-size: 8pt !important; }
  /* Cabeçalho menor que o corpo na impressão: em 9pt as palavras longas
     ("TRABALHADAS", "PREVISTAS") não cabem nas colunas de 9%-11% do papel e
     transbordam por cima da coluna seguinte. */
  .report-table th { border: 1px solid #999 !important; padding: 4px 2px !important; font-size: 6.5pt !important; letter-spacing: 0 !important; }
  .report-table th .table-sub { font-size: 6pt !important; }
  .punch-chain { font-size: 8pt !important; }
  .espelho-table td:nth-child(2){padding-inline:6px!important}
  .report-table, .report-table * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* Marcador do dia sem intervalo registrado (18/08/2026). A Folha de Ponto é
   assinada pelo colaborador: um dia que conta o par cheio precisa dizer por que
   tem mais horas que a escala, aqui e na nota de rodapé do PDF. */
.punch-missing-break{
  display:block;
  margin-top:2px;
  color:#b42335;
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
}

/* FÉRIAS na Folha de Ponto: o dia não é falta, e a contabilidade lê essa
   coluna para saber que a pessoa estava em gozo. */
.punch-chain:has(+ .punch-vacation), .punch-vacation{
  color:#2d5fd0;
  font-weight:800;
  letter-spacing:.04em;
}

/* Estado inicial de Relatórios: nada é montado antes de escolher o
   colaborador (30/08/2026, mesma regra de Registros). Repete a régua visual do
   estado vazio de lá (.records-filter-prompt) — mesma altura, mesma moldura,
   mesmo tom — para as duas telas darem a mesma instrução do mesmo jeito. */
.report-empty-choice{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:220px;
  margin:0;
  padding:28px;
  text-align:center;
  border:1px solid #dfe5ed;
  border-radius:18px;
  background:#fff;
  color:#64748b;
}
.report-empty-choice strong{color:var(--ink);font-size:15px}
.report-empty-choice span{margin-top:6px;font-size:13px}

/* Holerite: esqueleto dos cards-resumo e da tabela de lotes na 1ª visita. */
.payroll-bone { display:inline-block; max-width:100%; vertical-align:middle; line-height:1; border-radius:6px; }
.payroll-loading .metric-icon.skeleton { background:var(--skeleton-base); color:transparent; }