/* Secao 627: Gestao de Horas no visual novo. Gabarito: mockup aprovado em
   https://claude.ai/artifact/MwswzjZJk1BHYTtChnikHA (cores, fontes, medidas). Tudo sob .gh. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap");

.gh {
    --gh-chao: #f1f3f7; --gh-folha: #ffffff; --gh-tinta: #17202d; --gh-tinta2: #5a6676; --gh-tinta3: #8a94a3;
    --gh-linha: #e2e6ee; --gh-fundo2: #f4f6fa;
    --gh-azul: #3d5bd9; --gh-azul-suave: #e9eefc; --gh-verde: #11866a; --gh-verde-suave: #dcf3ec;
    --gh-ambar: #a8670c; --gh-ambar-suave: #fbefd9; --gh-vermelho: #c2362b; --gh-vermelho-suave: #fbe1de;
    --gh-lilas: #7c5cd6; --gh-lilas-suave: #eee8fb; --gh-ceu: #1a7fb5; --gh-ceu-suave: #e1f1fa;
    --gh-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --gh-texto: "Figtree", "Segoe UI", system-ui, sans-serif;
    --gh-num: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-family: var(--gh-texto); color: var(--gh-tinta); display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
[data-theme="dark"] .gh, [data-bs-theme="dark"] .gh {
    --gh-chao: #0d1118; --gh-folha: #161c26; --gh-tinta: #e8ecf2; --gh-tinta2: #a6afbd; --gh-tinta3: #7a8494; --gh-linha: #29313d; --gh-fundo2: #1d2430;
    --gh-azul: #7d95ff; --gh-azul-suave: #232c4a; --gh-verde: #4fcca6; --gh-verde-suave: #173a31; --gh-ambar: #f0b45a; --gh-ambar-suave: #3a2c15;
    --gh-vermelho: #ff7b6e; --gh-vermelho-suave: #3d1f1c; --gh-lilas: #b29cff; --gh-lilas-suave: #2c2547; --gh-ceu: #6cc3f0; --gh-ceu-suave: #163445;
}
.gh *, .gh *::before, .gh *::after { box-sizing: border-box; }
.gh h2 { font-family: var(--gh-titulo); font-size: 24px; font-weight: 800; margin: 0; letter-spacing: -.01em; color: var(--gh-tinta); }
.gh h3 { font-size: 15px; font-weight: 700; margin: 0; color: var(--gh-tinta); }
.gh .gh-num { font-family: var(--gh-num); font-variant-numeric: tabular-nums; }
.gh-etq { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gh-tinta3); }
.gh-dica { font-size: 12.5px; color: var(--gh-tinta2); }

/* topo e botoes */
.gh-topo { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; justify-content: space-between; }
.gh-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gh-bt { border: 0; border-radius: 12px; padding: 9px 14px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; text-decoration: none; cursor: pointer; line-height: 1.2; }
.gh-bt.pri { background: var(--gh-azul); color: #fff; }
.gh-bt.sec { background: var(--gh-folha); border: 1px solid var(--gh-linha); color: var(--gh-tinta); }
.gh-bt.verde { background: var(--gh-verde); color: #fff; }
.gh-bt.perigo { background: var(--gh-vermelho-suave); color: var(--gh-vermelho); }
.gh-bt.pq { padding: 5px 10px; font-size: 12.5px; border-radius: 10px; }
.gh-bt:disabled { opacity: .5; cursor: not-allowed; }

/* numeros */
.gh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.gh-kpi { background: var(--gh-folha); border: 1px solid var(--gh-linha); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gh-kpi b { font-family: var(--gh-titulo); font-size: 26px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-kpi > span:last-child { font-size: 12px; color: var(--gh-tinta2); }
.gh-kpi.ruim b { color: var(--gh-vermelho); } .gh-kpi.bom b { color: var(--gh-verde); } .gh-kpi.aviso b { color: var(--gh-ambar); }

/* filtros */
.gh-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gh-chip { border: 1.5px solid var(--gh-linha); background: var(--gh-folha); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--gh-tinta2); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.gh-chip[aria-pressed="true"], .gh-chip.ativo { border-color: var(--gh-azul); color: var(--gh-azul); background: var(--gh-azul-suave); }
.gh-chip b { color: var(--gh-tinta); }
.gh-chips select.gh-chip { padding-right: 26px; }
.gh-busca { flex: 1 1 200px; border: 1.5px solid var(--gh-linha); border-radius: 10px; padding: 5px 10px; background: var(--gh-folha); color: var(--gh-tinta); min-width: 0; }
.gh-campo { border: 1.5px solid var(--gh-linha); border-radius: 10px; padding: 5px 9px; background: var(--gh-folha); color: var(--gh-tinta); min-width: 0; }
.gh-seg { display: inline-flex; border: 1.5px solid var(--gh-linha); border-radius: 999px; padding: 2px; background: var(--gh-folha); }
.gh-seg button { border: 0; background: none; border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 600; color: var(--gh-tinta2); cursor: pointer; }
.gh-seg button[aria-pressed="true"], .gh-seg button.ativo { background: var(--gh-tinta); color: var(--gh-folha); }
.gh-olho { border: 1.5px solid var(--gh-linha); background: var(--gh-folha); border-radius: 10px; padding: 5px 10px; font-weight: 600; color: var(--gh-tinta2); cursor: pointer; }
.gh-olho[aria-pressed="true"] { border-color: var(--gh-ambar); color: var(--gh-ambar); }
.gh-oculto { letter-spacing: .15em; color: var(--gh-tinta3); }

/* cartoes, etiquetas, avatares */
.gh-cartao { background: var(--gh-folha); border: 1px solid var(--gh-linha); border-radius: 16px; padding: 14px 16px; min-width: 0; }
.gh-pil { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; display: inline-block; }
.gh-pil.verde { background: var(--gh-verde-suave); color: var(--gh-verde); } .gh-pil.ambar { background: var(--gh-ambar-suave); color: var(--gh-ambar); }
.gh-pil.azul { background: var(--gh-azul-suave); color: var(--gh-azul); } .gh-pil.cinza { background: var(--gh-fundo2); color: var(--gh-tinta2); }
.gh-pil.vermelho { background: var(--gh-vermelho-suave); color: var(--gh-vermelho); } .gh-pil.ceu { background: var(--gh-ceu-suave); color: var(--gh-ceu); }
.gh-pil.lilas { background: var(--gh-lilas-suave); color: var(--gh-lilas); }
.gh-av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 11.5px; flex: none; vertical-align: middle; }
.gh-trilho { height: 7px; border-radius: 4px; background: var(--gh-fundo2); overflow: hidden; }
.gh-trilho i { display: block; height: 100%; background: var(--gh-azul); border-radius: 4px; }
.gh-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--gh-tinta2); }
.gh-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; }

/* tabelas */
.gh-rolo { overflow-x: auto; border: 1px solid var(--gh-linha); border-radius: 16px; background: var(--gh-folha); }
.gh-rolo table { border-collapse: collapse; width: 100%; font-size: 13px; color: var(--gh-tinta); margin: 0; }
.gh-rolo th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gh-tinta3); background: var(--gh-fundo2); text-align: left; padding: 8px 10px; white-space: nowrap; font-weight: 700; border: 0; }
.gh-rolo td { padding: 8px 10px; border: 0; border-top: 1px solid var(--gh-linha); vertical-align: middle; background: transparent; }
.gh-rolo tr.sel td { background: var(--gh-azul-suave); }
.gh-rolo tr.dia td { background: var(--gh-fundo2); font-weight: 700; }
.gh-dir { text-align: right; }

/* grades de layout */
.gh-duas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.gh-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gh-blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

/* barra de acoes fixa (selecao) */
.gh-barra { position: sticky; bottom: 10px; z-index: 20; background: var(--gh-tinta); color: var(--gh-folha); border-radius: 16px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5); }
.gh-barra .gh-bt.sec { background: transparent; color: var(--gh-folha); border-color: rgba(255, 255, 255, .3); }
.gh-barra > span { flex: 1; min-width: 180px; }

/* grade de horas (timesheet) */
.gh-grade { width: auto !important; min-width: 100%; }
.gh-grade td, .gh-grade th { padding: 0 !important; text-align: center; }
.gh-grade th { padding: 6px 2px !important; font-size: 10.5px; }
.gh-grade th.fds { color: var(--gh-tinta3); background: var(--gh-chao); }
.gh-grade th:not(:first-child):not(:last-child), .gh-grade td.cel { min-width: 36px; }
.gh-grade td.nome { text-align: left; padding: 6px 10px !important; white-space: nowrap; position: sticky; left: 0; background: var(--gh-folha); z-index: 1; min-width: 170px; }
.gh-grade td.cel { height: 36px; font-family: var(--gh-num); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.gh-grade td.cel span { display: grid; place-items: center; margin: 3px; height: 28px; border-radius: 7px; }
.gh-grade td.tot { font-family: var(--gh-num); font-weight: 700; padding: 0 10px !important; position: sticky; right: 0; background: var(--gh-folha); }
.gh-grade .h-ok span { background: var(--gh-verde-suave); color: var(--gh-verde); }
.gh-grade .h-meia span { background: var(--gh-ambar-suave); color: var(--gh-ambar); }
.gh-grade .h-falta span { background: var(--gh-vermelho-suave); color: var(--gh-vermelho); }
.gh-grade .h-off span { background: var(--gh-ceu-suave); color: var(--gh-ceu); font-family: var(--gh-texto); font-size: 9.5px; }
.gh-grade .h-fds span { background: transparent; color: var(--gh-tinta3); }
.gh-grade .h-hoje span { outline: 2px solid var(--gh-azul); outline-offset: -2px; }
.gh-grade .h-sel span { box-shadow: 0 0 0 2px var(--gh-tinta); }

/* listas e lancamentos */
.gh-lanc { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--gh-linha); min-width: 0; }
.gh-lanc:first-child { border-top: 0; }
.gh-lanc .gh-meio { flex: 1; min-width: 0; }
.gh-lanc small { display: block; color: var(--gh-tinta3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-vazio { border: 1.5px dashed var(--gh-ambar); background: var(--gh-ambar-suave); border-radius: 12px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--gh-ambar); }
.gh-alerta { border-radius: 12px; padding: 9px 12px; font-size: 13px; font-weight: 600; }
.gh-alerta.ruim { background: var(--gh-vermelho-suave); color: var(--gh-vermelho); }
.gh-alerta.aviso { background: var(--gh-ambar-suave); color: var(--gh-ambar); }
.gh-alerta.bom { background: var(--gh-verde-suave); color: var(--gh-verde); }
.gh-lista-sel label { display: flex; gap: 10px; align-items: center; padding: 7px 2px; border-top: 1px solid var(--gh-linha); cursor: pointer; margin: 0; }
.gh-lista-sel label:first-child { border-top: 0; }
.gh-lista-sel .gh-meio { flex: 1; min-width: 0; }

/* atividades */
.gh-pres { display: grid; gap: 3px; align-items: center; }
.gh-pres i { width: 12px; height: 12px; border-radius: 50%; display: block; margin: auto; }
.gh-agora { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.gh-agora .gh-cartao { display: flex; gap: 10px; align-items: center; border-left: 4px solid var(--gh-verde); }
.gh-agora .gh-cartao.esquecido { border-left-color: var(--gh-vermelho); }
.gh-pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--gh-verde); display: inline-block; animation: gh-pulso 1.6s infinite; margin-right: 4px; }
@keyframes gh-pulso { 0% { box-shadow: 0 0 0 0 rgba(17, 134, 106, .5); } 70% { box-shadow: 0 0 0 8px rgba(17, 134, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(17, 134, 106, 0); } }

/* passos (importar) */
.gh-passos { display: flex; gap: 8px; flex-wrap: wrap; }
.gh-passo { display: flex; gap: 8px; align-items: center; border: 1.5px solid var(--gh-linha); border-radius: 999px; padding: 4px 12px 4px 5px; font-weight: 600; font-size: 13px; color: var(--gh-tinta2); background: var(--gh-folha); }
.gh-passo b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gh-fundo2); font-size: 12px; }
.gh-passo.feito { border-color: var(--gh-verde); color: var(--gh-verde); } .gh-passo.feito b { background: var(--gh-verde); color: #fff; }
.gh-passo.agora { border-color: var(--gh-azul); color: var(--gh-azul); } .gh-passo.agora b { background: var(--gh-azul); color: #fff; }
.gh-soltar { border: 2px dashed var(--gh-linha); border-radius: 16px; padding: 28px; text-align: center; color: var(--gh-tinta2); background: var(--gh-fundo2); cursor: pointer; display: block; }
.gh-anel { --p: 0; width: 86px; height: 86px; border-radius: 50%; background: conic-gradient(var(--gh-azul) calc(var(--p) * 1%), var(--gh-fundo2) 0); display: grid; place-items: center; flex: none; }
.gh-anel span { width: 66px; height: 66px; border-radius: 50%; background: var(--gh-folha); display: grid; place-items: center; font-family: var(--gh-titulo); font-weight: 800; font-size: 18px; }

/* previa de documento (enviar relatorio) */
.gh-folha-pdf { background: #fff; color: #1b2430; border-radius: 10px; padding: 18px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .4); font-size: 12px; }
.gh-folha-pdf h4 { font-family: var(--gh-titulo); margin: 0 0 6px; font-size: 16px; color: #1b2430; }
.gh-folha-pdf table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.gh-folha-pdf td { border-top: 1px solid #e5e7eb; padding: 4px 6px; color: #1b2430; }
.gh-folha-pdf th { background: #f3f4f6; color: #6b7280; padding: 4px 6px; text-align: left; }

@media (max-width: 991.98px) { .gh-duas, .gh-tres { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .gh-pulso { animation: none; } }