/* =====================================================================
   Ponto Eletrônico — estilo das telas de toque
   Alvos grandes (mínimo 64px), alto contraste, sem rolagem lateral.
   ===================================================================== */

:root {
  --bg: #0b1220;
  --card: #16202f;
  --card2: #1e2b3d;
  --linha: #2b3a4f;
  --txt: #f2f7fc;
  --txt2: #90a4bb;
  --cor: #2f80ed;
  --cor-esc: #1b5fc0;
  --verde: #27ae60;
  --laranja: #f2994a;
  --vermelho: #eb5757;
  --raio: 18px;
}

body[data-tema="motoboy"] { --cor: #f2994a; --cor-esc: #c9761f; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(1200px 800px at 50% -10%, #1b2a40 0%, var(--bg) 60%);
  color: var(--txt);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  overflow-x: hidden;
}

/* ---------- estrutura ---------- */

.topo {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; border-bottom: 1px solid var(--linha);
  background: rgba(11, 18, 32, .7); backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 5;
}
.topo .marca { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.topo .marca span { display: block; font-size: 12px; font-weight: 400; color: var(--txt2); }
.topo .relogio { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.topo .relogio b { display: block; font-size: 28px; line-height: 1; }
.topo .relogio small { color: var(--txt2); font-size: 12px; }

.conteudo { padding: 22px; max-width: 1100px; margin: 0 auto; }

.titulo { font-size: 26px; font-weight: 700; margin: 6px 0 4px; }
.sub { color: var(--txt2); margin: 0 0 22px; font-size: 15px; }

.tela { display: none; animation: entra .18s ease-out; }
.tela.ativa { display: block; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- botões ---------- */

.botoes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.bt {
  appearance: none; border: 1px solid var(--linha); background: var(--card);
  color: var(--txt); border-radius: var(--raio); padding: 26px 20px;
  font-size: 22px; font-weight: 600; text-align: left; cursor: pointer;
  min-height: 96px; display: flex; align-items: center; gap: 14px;
  transition: transform .08s, background .15s, border-color .15s;
}
.bt:active { transform: scale(.97); background: var(--card2); }
.bt .ic { font-size: 30px; line-height: 1; }
.bt small { display: block; font-size: 13px; font-weight: 400; color: var(--txt2); margin-top: 3px; }
.bt.primario { background: var(--cor); border-color: var(--cor); }
.bt.primario small { color: rgba(255, 255, 255, .85); }
.bt.feito { border-color: var(--verde); background: rgba(39, 174, 96, .14); }
.bt.feito .ok { margin-left: auto; color: var(--verde); font-size: 15px; font-weight: 700; text-align: right; }
.bt:disabled { opacity: .55; cursor: default; }

.bt-grande { min-height: 190px; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 30px; }
.bt-grande .ic { font-size: 60px; }

.voltar {
  background: none; border: 0; color: var(--txt2); font-size: 16px;
  padding: 12px 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.voltar:active { color: var(--txt); }

/* ---------- PIN ---------- */

.pin-area { max-width: 380px; margin: 0 auto; text-align: center; }
.pin-visor {
  display: flex; justify-content: center; gap: 14px; margin: 20px 0 6px;
}
.pin-visor i {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--linha); background: transparent; transition: .15s;
}
.pin-visor i.on { background: var(--cor); border-color: var(--cor); transform: scale(1.15); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.teclado button {
  min-height: 78px; font-size: 30px; font-weight: 600;
  background: var(--card); color: var(--txt); border: 1px solid var(--linha);
  border-radius: 14px; cursor: pointer;
}
.teclado button:active { background: var(--cor); border-color: var(--cor); }
.teclado button.aux { font-size: 20px; background: var(--card2); }

/* ---------- confirmação ---------- */

.confirma { text-align: center; padding: 40px 20px; }
.selo {
  width: 130px; height: 130px; margin: 0 auto 26px; border-radius: 50%;
  background: var(--verde); display: grid; place-items: center; font-size: 66px;
  animation: pulso .4s ease-out;
}
.selo.aviso { background: var(--laranja); }
@keyframes pulso { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.confirma h2 { font-size: 30px; margin: 0 0 10px; }
.confirma .hora-grande { font-size: 62px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.confirma p { color: var(--txt2); font-size: 17px; margin: 8px 0 0; }

/* ---------- avisos ---------- */

.faixa { padding: 14px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 15px; display: none; }
.faixa.on { display: block; }
.faixa.erro { background: rgba(235, 87, 87, .16); border: 1px solid var(--vermelho); }
.faixa.alerta { background: rgba(242, 153, 74, .16); border: 1px solid var(--laranja); }
.faixa.info { background: rgba(47, 128, 237, .16); border: 1px solid var(--cor); }

/* ---------- minha escala ---------- */

.escala-topo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 16px;
}
.escala-topo .mes {
  flex: 1; text-align: center; font-size: 20px; font-weight: 700; min-width: 160px;
}
.escala-nav {
  background: var(--card); border: 1px solid var(--linha); color: var(--txt);
  min-width: 64px; min-height: 64px; border-radius: 14px; font-size: 24px; cursor: pointer;
}
.escala-nav:active { background: var(--cor); border-color: var(--cor); }

.ficha {
  background: var(--card); border: 1px solid var(--linha); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 16px; font-size: 15px;
}
.ficha b { display: block; font-size: 17px; margin-bottom: 4px; }
.ficha ul { margin: 6px 0 0; padding-left: 18px; color: var(--txt2); font-size: 14px; }

.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-grade .cab {
  text-align: center; color: var(--txt2); font-size: 12px; padding: 4px 0;
  text-transform: uppercase; letter-spacing: .04em;
}
.cal-dia {
  min-height: 74px; border-radius: 12px; border: 1px solid var(--linha);
  background: var(--card); padding: 7px 6px; text-align: left; color: var(--txt);
  font-size: 13px; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.cal-dia:active { transform: scale(.97); }
.cal-dia .n { font-size: 17px; font-weight: 700; }
.cal-dia .m { font-size: 11px; color: var(--txt2); line-height: 1.25; }
.cal-dia.vazio { visibility: hidden; }
.cal-dia.trabalha { background: rgba(47, 128, 237, .18); border-color: rgba(47, 128, 237, .5); }
.cal-dia.folga { background: var(--card); }
.cal-dia.folga .n { color: var(--txt2); }
.cal-dia.feriado { background: rgba(242, 201, 76, .16); border-color: rgba(242, 201, 76, .5); }
.cal-dia.aberto { border-style: dashed; }
.cal-dia.alerta { background: rgba(242, 153, 74, .28); border-color: var(--laranja); }
.cal-dia.hoje { outline: 3px solid var(--txt); outline-offset: -3px; }
.cal-dia .ok { color: var(--verde); font-weight: 700; font-size: 12px; }

.cal-totais {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px;
}
.cal-totais div {
  flex: 1 1 120px; background: var(--card); border: 1px solid var(--linha);
  border-radius: 12px; padding: 12px 14px;
}
.cal-totais b { display: block; font-size: 22px; }
.cal-totais small { color: var(--txt2); font-size: 12px; }

.cal-detalhe {
  margin-top: 14px; background: var(--card2); border: 1px solid var(--linha);
  border-radius: 12px; padding: 14px 16px; font-size: 15px; min-height: 56px;
}
.cal-detalhe b { display: block; margin-bottom: 4px; }

.rodape { text-align: center; color: var(--txt2); font-size: 12px; padding: 26px 20px 40px; }
.rodape a { color: var(--txt2); }

.status-rede {
  position: fixed; left: 14px; bottom: 14px; z-index: 20;
  background: var(--laranja); color: #14202f; font-weight: 700; font-size: 13px;
  padding: 9px 14px; border-radius: 999px; display: none;
}
.status-rede.on { display: block; }

.carregando { color: var(--txt2); padding: 30px 0; font-size: 17px; }

@media (max-width: 520px) {
  .titulo { font-size: 22px; }
  .bt { font-size: 19px; padding: 20px 16px; min-height: 84px; }
  .bt-grande { min-height: 150px; font-size: 26px; }
  .topo .relogio b { font-size: 22px; }
}