/* Ponto KATIVEIRO: cabeçalho e login em preto e branco, uma cor clean por módulo */
:root {
  --fundo: #f4f4f2; --papel: #ffffff; --texto: #161616; --suave: #6b6b6b; --linha: #e2e2de;
  --preto: #0a0a0a; --branco: #ffffff; --mod: #2f6fb3; --mod-claro: #eaf1f9;
  --ok: #1f8a4c; --alerta: #c77700; --erro: #c62828; --raio: 10px;
}
body.noturno {
  --fundo: #121212; --papel: #1c1c1c; --texto: #ececec; --suave: #a0a0a0; --linha: #2e2e2e; --mod-claro: #20262d;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; background: var(--fundo); color: var(--texto); font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }
.oculto { display: none !important; }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--preto); color: var(--branco); padding: 20px; }
.login-caixa { width: 100%; max-width: 380px; text-align: center; }
.login-caixa img { width: 110px; filter: invert(1); margin-bottom: 8px; }
.login-caixa h1 { letter-spacing: 4px; font-weight: 600; font-size: 20px; margin: 4px 0 24px; }
.login-caixa input { width: 100%; padding: 12px 14px; margin-bottom: 10px; border-radius: var(--raio); border: 1px solid #333; background: #151515; color: #fff; }
.login-caixa .btn-login { width: 100%; padding: 12px; border-radius: var(--raio); border: 1px solid #fff; background: #fff; color: #000; font-weight: 700; letter-spacing: 2px; cursor: pointer; }
.login-caixa .btn-quiosque { margin-top: 12px; width: 100%; padding: 11px; border-radius: var(--raio); border: 1px solid #555; background: transparent; color: #fff; letter-spacing: 1px; cursor: pointer; }
.login-teste { margin-top: 22px; font-size: 12px; color: #9a9a9a; text-align: left; border-top: 1px solid #2a2a2a; padding-top: 12px; line-height: 1.6; }
.login-caps { color: #ffcc80; font-size: 13px; font-weight: 700; text-align: left; margin: -4px 0 6px; }
.login-erro { color: #ff8a80; min-height: 18px; font-size: 13px; }

/* ---------- Estrutura ---------- */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--preto); color: var(--branco); }
.topo img { height: 34px; filter: invert(1); }
.topo .marca { font-weight: 700; letter-spacing: 3px; font-size: 13px; }
.topo .info { margin-left: auto; text-align: right; font-size: 12px; line-height: 1.3; color: #cfcfcf; }
.topo .info b { color: #fff; }
.topo button { background: transparent; border: 1px solid #555; color: #fff; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 12px; }
.topo .sair { border-color: #e53935; color: #ff6b66; font-weight: 700; }
.topo .menu-btn { display: none; }
.corpo { display: flex; min-height: calc(100vh - 50px); }
.lateral { width: 230px; flex-shrink: 0; background: var(--papel); border-right: 1px solid var(--linha); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.lateral h4 { margin: 4px 4px 6px; font-size: 11px; letter-spacing: 2px; color: var(--suave); text-transform: uppercase; }
.etiqueta { display: block; width: 100%; text-align: left; border: 1.5px solid var(--c); color: var(--c); background: transparent; border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.etiqueta:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.etiqueta.ativa { background: var(--c); color: #fff; }
.area { flex: 1; min-width: 0; padding: 18px 22px 60px; position: relative; }
.area::before { content: ""; position: fixed; right: 30px; bottom: 30px; width: 220px; height: 260px; background: url(../icons/logo.png) no-repeat center / contain; opacity: .04; pointer-events: none; }
body.noturno .area::before { filter: invert(1); }
.titulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 3px solid var(--mod); padding-bottom: 8px; margin-bottom: 16px; }
.titulo h2 { margin: 0; font-size: 20px; color: var(--mod); letter-spacing: 1px; text-transform: uppercase; }
.titulo .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Componentes ---------- */
.btn { border: 1.5px solid var(--mod); color: var(--mod); background: transparent; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; }
.btn.cheio { background: var(--mod); color: #fff; }
.btn.perigo { border-color: var(--erro); color: var(--erro); }
.btn.pequeno { padding: 3px 10px; font-size: 11px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 14px; }
.cartao h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--mod); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kpi { background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--mod); border-radius: var(--raio); padding: 12px 14px; }
.kpi .v { font-size: 26px; font-weight: 700; }
.kpi .r { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: 1px; }
table { width: 100%; border-collapse: collapse; background: var(--papel); }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--suave); background: var(--mod-claro); }
tr:hover td { background: color-mix(in srgb, var(--mod) 4%, transparent); }
.tabela-rolo { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; border: 1.5px solid currentColor; border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.ok { color: var(--ok); } .alerta { color: var(--alerta); } .erro { color: var(--erro); } .suave { color: var(--suave); }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.form label, .campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .5px; }
.form .largo { grid-column: 1 / -1; }
input, select, textarea { padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); text-transform: none; letter-spacing: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--mod); outline-offset: -1px; }
.check { flex-direction: row !important; align-items: center; gap: 8px !important; text-transform: none !important; color: var(--texto) !important; font-size: 13px !important; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.nota { font-size: 12px; color: var(--suave); line-height: 1.5; }
.caixa-alerta { border-left: 4px solid var(--alerta); background: color-mix(in srgb, var(--alerta) 8%, var(--papel)); padding: 10px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; line-height: 1.5; }
.caixa-info { border-left: 4px solid var(--mod); background: var(--mod-claro); padding: 10px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; line-height: 1.5; }

/* Escala */
.escala td, .escala th { padding: 4px; text-align: center; font-size: 12px; min-width: 30px; }
.escala td:first-child, .escala th:first-child { text-align: left; min-width: 170px; position: sticky; left: 0; background: var(--papel); z-index: 1; }
.dia { cursor: pointer; border-radius: 6px; font-weight: 700; user-select: none; }
.dia.T { color: var(--mod); } .dia.F { background: #e8f5e9; color: var(--ok); } .dia.FE { background: #fff3e0; color: var(--alerta); }
body.noturno .dia.F { background: #1b3322; } body.noturno .dia.FE { background: #3a2c14; }
.dia.viol { outline: 2px solid var(--erro); }
th.dom { color: var(--erro); }

/* Ponto / câmera */
.camera { position: relative; width: 100%; max-width: 520px; aspect-ratio: 4 / 3; background: #000; border-radius: 14px; overflow: hidden; margin: 0 auto; }
.camera video, .camera canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera .msg { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; background: rgba(0,0,0,.6); color: #fff; text-align: center; font-weight: 600; }
.relogio { font-size: 54px; font-weight: 300; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.relogio-data { text-align: center; color: var(--suave); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; }
.quiosque { min-height: 100vh; background: var(--preto); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 20px; gap: 10px; }
.quiosque .relogio-data { color: #aaa; }
.quiosque .sel { display: flex; gap: 10px; align-items: center; color: #aaa; font-size: 12px; }
.quiosque select { background: #151515; color: #fff; border-color: #333; }
.comprovante { font-family: Consolas, "Courier New", monospace; font-size: 12px; background: #fff; color: #000; border: 1px dashed #999; padding: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; }

/* Modal e aviso */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal-caixa { background: var(--papel); color: var(--texto); border-radius: 14px; width: 100%; max-width: 760px; max-height: 92vh; overflow: auto; padding: 18px 20px; border-top: 5px solid var(--mod); }
.modal-caixa h3 { margin-top: 0; color: var(--mod); text-transform: uppercase; letter-spacing: 1px; }
.rodape-modal { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.aviso { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 10px 18px; border-radius: 999px; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.3); font-weight: 600; }
.aviso.erro { background: var(--erro); color: #fff; } .aviso.ok { background: var(--ok); color: #fff; }

/* Barras do simulador */
.barra { height: 14px; background: var(--linha); border-radius: 999px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--mod); }

.abas-baixo { display: none; }
.abas-baixo .icone { width: 22px; height: 22px; margin: 0; vertical-align: middle; }
.btn .icone { margin-right: 6px; }
.icone { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 4px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.campo .nota, .form .nota { text-transform: none; letter-spacing: 0; }
/* Barra fixa no topo de janelas grandes: o botão Fechar fica sempre visível ao rolar */
.janela-topo { position: sticky; top: -18px; z-index: 5; display: flex; justify-content: flex-end; background: var(--papel); margin: -18px -20px 10px; padding: 10px 20px; border-bottom: 1px solid var(--linha); }
.preench { background: var(--mod-claro); }
.chips-dias { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chip-dia input { display: none; }
.chip-dia span { display: inline-block; min-width: 50px; text-align: center; padding: 7px 10px; border: 1.5px solid var(--mod); border-radius: 999px; color: var(--mod); font-weight: 700; font-size: 12px; cursor: pointer; user-select: none; background: var(--papel); }
.chip-dia input:checked + span { background: var(--mod); color: #fff; }
.mapa { height: 300px; border-radius: var(--raio); border: 1px solid var(--linha); overflow: hidden; background: var(--fundo); }
.etapas-face { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.etapas-face span { border: 1.5px solid var(--linha); color: var(--suave); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.etapas-face span.atual { border-color: var(--mod); color: var(--mod); }
.etapas-face span.feita { border-color: var(--ok); background: var(--ok); color: #fff; }
.etapas-face span.feita::before { content: "✔ "; }
.lista-dias { display: flex; flex-direction: column; gap: 8px; }
.dia-card { background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--mod); border-radius: var(--raio); padding: 10px 12px; }
.dia-card.folga { border-left-color: var(--linha); opacity: .75; }
.dia-card.problema { border-left-color: var(--erro); }
.dia-card .l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dia-card .l1 b { font-size: 15px; }
.dia-card .marcs { font-size: 18px; font-weight: 600; letter-spacing: 1px; margin: 4px 0; font-variant-numeric: tabular-nums; }
.dia-card .l3 { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--suave); }

/* ---------- Celular (iPhone e Android) e app instalado (PWA) ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
.so-mobile, .fundo-menu { display: none; }
.lateral button.etiqueta { font-family: inherit; }
.login { min-height: 100dvh; padding: calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); }
.topo { padding-top: calc(8px + env(safe-area-inset-top)); padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
.quiosque { min-height: 100dvh; padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.tabela-rolo { -webkit-overflow-scrolling: touch; }

@media (max-width: 820px) {
  /* Cabeçalho enxuto: menu, logo, nome e SAIR; noturno e senha vão para o menu lateral */
  .topo { gap: 10px; padding-left: calc(10px + env(safe-area-inset-left)); padding-right: calc(10px + env(safe-area-inset-right)); }
  .topo img { height: 30px; }
  .topo .marca { font-size: 12px; letter-spacing: 2px; }
  .topo .info { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topo .info .perfil { display: none; }
  .topo button { padding: 8px 12px; font-size: 13px; flex-shrink: 0; }
  .topo .menu-btn { font-size: 18px; padding: 6px 12px; }
  .so-desktop { display: none !important; }
  .so-mobile { display: block; }
  /* Menu lateral como gaveta, com fundo escuro que fecha ao tocar */
  .lateral { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 84vw); z-index: 45; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 4px 0 24px rgba(0,0,0,.25); overflow-y: auto; padding: calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); }
  body.menu-aberto .lateral { transform: none; }
  body.menu-aberto .fundo-menu { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.45); }
  .lateral .etiqueta { padding: 11px 16px; font-size: 13px; }
  /* Área de conteúdo */
  .area { padding: 14px calc(12px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
  .area::before { width: 140px; height: 170px; right: 12px; bottom: 80px; }
  .titulo { gap: 8px; }
  .titulo h2 { font-size: 18px; }
  .titulo .acoes { margin-left: 0; width: 100%; }
  .titulo .acoes .btn { flex: 1 1 auto; }
  .btn { min-height: 40px; padding: 8px 14px; }
  .btn.pequeno { min-height: 34px; padding: 6px 12px; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 10px 12px; }
  .kpi .v { font-size: 22px; }
  .kpi .r { font-size: 11px; }
  .cartao { padding: 12px; }
  .filtros { gap: 8px; }
  .filtros .campo { flex: 1 1 140px; min-width: 0; }
  .filtros .campo input, .filtros .campo select { width: 100%; }
  .form { grid-template-columns: 1fr; }
  /* 16px nos campos: o iPhone não dá zoom ao tocar */
  input, select, textarea { font-size: 16px; padding: 10px 12px; }
  table { font-size: 13px; }
  th, td { padding: 8px 6px; }
  /* Câmera em pé, como a câmera frontal do celular */
  .camera { aspect-ratio: 3 / 4; max-width: 420px; max-height: 52dvh; }
  /* Janelas viram uma folha que sobe de baixo, com os botões sempre visíveis */
  .modal { place-items: end center; padding: 0; }
  .modal-caixa { max-width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .modal-caixa h3 { font-size: 16px; }
  .rodape-modal { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); background: var(--papel); margin: 16px -16px calc(-16px - env(safe-area-inset-bottom)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); flex-wrap: wrap; }
  .rodape-modal .btn { flex: 1 1 auto; }
  .janela-topo { margin: -16px -16px 10px; padding: 10px 16px; top: -16px; }
  .aviso { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); border-radius: 14px; text-align: center; }
  body.perfil-func .topo .menu-btn { display: none; }
  body.perfil-func .area { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .abas-baixo { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--papel); border-top: 1px solid var(--linha); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .abas-baixo a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--suave); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 4px; border-radius: 10px; }
  .abas-baixo a span { font-size: 20px; }
  .abas-baixo a.ativa { color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
  .comprovante { font-size: 11px; }
  .topo .menu-btn { display: inline-block; }
  .topo .info .sec { display: none; }
  .relogio { font-size: 42px; }
}
@media print {
  .topo, .lateral, .titulo .acoes, .filtros, .nao-imprime { display: none !important; }
  body, .area { background: #fff; color: #000; padding: 0; }
  .area::before { display: none; }
  th { position: static; background: #eee; color: #000; }
  .titulo { border-color: #000; } .titulo h2 { color: #000; }
  .cartao { border-color: #999; break-inside: avoid; }
}