/* ============================================================
   Mockups fiéis do app Integrador PONTO — recriados com os
   MESMOS tokens do produto real (dados fictícios, LGPD-safe).
   ============================================================ */
.mock { --m-azul:#1565c0; --m-navy:#0d3c75; --m-bg:#f4f6f9; --m-ink:#1c2733; --m-muted:#5f6b7a;
  --m-green:#2e7d32; --m-red:#c62828; --m-line:#e6ebf2; font-family:'Inter',sans-serif; }

/* topbar do app */
.mock__top { background: linear-gradient(135deg,#0d3c75,#1565c0); color:#fff; padding: 12px 16px; display:flex; align-items:center; gap:11px; }
.mock__top img { width: 30px; height:30px; }
.mock__top .t { line-height:1.1; min-width:0; overflow:hidden; }
.mock__top .t b { font-size: 14px; font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mock__top .t small { display:block; font-size: 10.5px; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mock__top .spacer { margin-left:auto; display:flex; gap:8px; }
.mock__top .chip { background: rgba(255,255,255,.16); border-radius: 8px; font-size: 11px; padding: 4px 9px; }

/* === Dashboard RH (browser) === */
.mock-dash { background: var(--m-bg); padding: 18px; }
.mock-dash__tabs { display:flex; gap: 6px; margin-bottom: 16px; flex-wrap:wrap; }
.mock-dash__tabs span { font-size: 12px; padding: 7px 12px; border-radius: 9px; color: var(--m-muted); background:#fff; border:1px solid var(--m-line); }
.mock-dash__tabs span.on { background: var(--m-azul); color:#fff; border-color: var(--m-azul); }
.kpis { display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
.kpi { background:#fff; border:1px solid var(--m-line); border-radius: 12px; padding: 14px; }
.kpi small { font-size: 11px; color: var(--m-muted); display:block; margin-bottom:6px; }
.kpi b { font-family:'Sora'; font-size: 24px; color: var(--m-ink); display:block; line-height:1.1; }
.kpi .up { font-size: 11px; color: var(--m-green); font-weight:600; display:block; margin-top:2px; }
.kpi .dn { font-size: 11px; color: var(--m-red); font-weight:600; display:block; margin-top:2px; }
.mock-table { background:#fff; border:1px solid var(--m-line); border-radius: 12px; overflow:hidden; }
.mock-table__h { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 0.9fr; padding: 11px 14px; font-size: 11px; color: var(--m-muted); font-weight:600; background:#f8fafc; border-bottom:1px solid var(--m-line); }
.mock-row { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 0.9fr; padding: 12px 14px; font-size: 12.5px; align-items:center; border-bottom:1px solid #f1f5f9; color: var(--m-ink); }
.mock-row:last-child { border-bottom:0; }
.mock-row .who { display:flex; align-items:center; gap:9px; }
.mock-row .av { width: 28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:700; flex:0 0 auto; }
.badge { font-size: 10.5px; font-weight:700; font-style: normal; padding: 3px 9px; border-radius: 999px; display:inline-block; }
.badge.ok { background: rgba(46,125,50,.12); color: var(--m-green); }
.badge.wait { background: rgba(255,154,77,.16); color:#c9780f; }
.badge.late { background: rgba(198,40,40,.1); color: var(--m-red); }

/* === Tela "bater ponto" (celular) === */
.mock-punch { background: var(--m-bg); height:100%; display:flex; flex-direction:column; }
.mock-punch__body { padding: 22px 20px; text-align:center; flex:1; display:flex; flex-direction:column; }
.mock-punch .greet { font-size: 13px; color: var(--m-muted); margin-top: 8px; }
.mock-punch .name { font-family:'Sora'; font-size: 17px; font-weight:700; color: var(--m-ink); margin-top:2px; }
.mock-punch .clock { font-family:'Sora'; font-size: 46px; font-weight:700; color: var(--m-navy); margin: 18px 0 2px; letter-spacing:-.02em; }
.mock-punch .date { font-size: 12.5px; color: var(--m-muted); }
.mock-punch .loc { display:inline-flex; align-items:center; gap:6px; font-size: 11.5px; color: var(--m-green); background: rgba(46,125,50,.1); padding: 6px 12px; border-radius:999px; margin: 16px auto 0; }
.mock-punch .loc svg { width:13px; height:13px; }
.mock-punch__btn { margin-top:auto; background: linear-gradient(135deg,#1a7f37,#2e7d32); color:#fff; border-radius: 16px; padding: 18px; font-weight:700; font-size: 16px; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 12px 26px rgba(46,125,50,.3); }
.mock-punch__btn svg { width:22px; height:22px; }
.mock-punch .marks { display:flex; justify-content:space-around; margin-top: 18px; }
.mock-punch .marks div { display:flex; flex-direction:column; gap:2px; }
.mock-punch .marks small { font-size: 10.5px; color: var(--m-muted); }
.mock-punch .marks b { font-size: 15px; color: var(--m-ink); font-family:'Sora'; }

/* === Biometria / selfie guiada (celular) === */
.mock-bio { background:#0a1424; height:100%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; overflow:hidden; }
.mock-bio__cam { position:absolute; inset:0; background:
  radial-gradient(circle at 50% 42%, #1c3350 0%, #0a1424 72%); }
.mock-bio__oval { position:relative; width: 190px; height: 240px; border-radius: 50%; border: 3px solid #4ade80;
  box-shadow: 0 0 0 2000px rgba(6,14,26,.62), 0 0 30px rgba(74,222,128,.4); display:grid; place-items:center; }
.mock-bio__oval svg { width: 120px; height:120px; opacity:.5; }
.mock-bio__hint { position:absolute; bottom: 74px; left:0; right:0; text-align:center; }
.mock-bio__hint .pill { display:inline-flex; align-items:center; gap:8px; background: rgba(46,125,50,.9); padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight:600; }
.mock-bio__hint .pill svg { width:15px; height:15px; }
.mock-bio__hint .sub { display:block; margin-top:10px; font-size:11.5px; color: rgba(255,255,255,.7); }
.mock-bio__top { position:absolute; top: 40px; left:0; right:0; text-align:center; font-size:12px; color: rgba(255,255,255,.85); z-index:2; }

/* === Espelho de ponto (card) === */
.mock-mirror { background:#fff; padding: 18px; }
.mock-mirror__h { display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.mock-mirror__h b { font-family:'Sora'; font-size: 15px; color: var(--m-ink); }
.mock-mirror__h span { font-size: 12px; color: var(--m-muted); }
.mirror-row { display:grid; grid-template-columns: .7fr 1fr 1fr 1fr .8fr; gap:8px; padding: 10px 8px; font-size: 12px; border-bottom:1px solid #f1f5f9; align-items:center; }
.mirror-row.head { color: var(--m-muted); font-weight:600; font-size:11px; border-bottom:1px solid var(--m-line); }
.mirror-row .d b { font-weight:700; color: var(--m-ink); } .mirror-row .d small { display:block; color: var(--m-muted); font-size:10px; }
.mirror-row .h { color: var(--m-ink); font-variant-numeric: tabular-nums; }
.mirror-row .tot { font-weight:700; color: var(--m-azul); }
.mock-mirror__sign { margin-top: 14px; display:flex; align-items:center; gap:10px; background: rgba(21,101,192,.06); border:1px dashed rgba(21,101,192,.3); border-radius:10px; padding: 11px 13px; font-size: 11.5px; color: var(--m-navy); }
.mock-mirror__sign svg { width:18px; height:18px; color: var(--m-azul); flex:0 0 auto; }

.av-b1{background:#1565c0} .av-b2{background:#7c4dff} .av-b3{background:#2e7d32} .av-b4{background:#c2185b} .av-b5{background:#0097a7}

/* ---- Mobile: mockups precisam CABER (sem scroll horizontal) ---- */
@media (max-width: 600px) {
  .mock__top { padding: 10px 12px; }
  .mock__top .spacer { display: none; }            /* chip da empresa estourava */
  .mock-dash { padding: 12px; }
  .mock-dash__tabs { gap: 5px; margin-bottom: 12px; }
  .mock-dash__tabs span { padding: 5px 9px; font-size: 10.5px; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
  .kpi { padding: 10px; } .kpi b { font-size: 19px; } .kpi small { font-size: 10px; }
  /* tabela enxuta: Colaborador · Entrada · Status (esconde Intervalo e Saída) */
  .mock-table__h, .mock-row { grid-template-columns: 1.5fr .8fr .8fr; }
  .mock-table__h span:nth-child(3), .mock-table__h span:nth-child(4),
  .mock-row > *:nth-child(3), .mock-row > *:nth-child(4) { display: none; }
  .mock-row { padding: 10px 12px; font-size: 12px; }
  .mock-row .who { gap: 7px; } .mock-row .av { width: 24px; height: 24px; font-size: 10px; }
  /* espelho: cabeçalho quebra em 2 linhas em vez de cortar */
  .mock-mirror { padding: 14px; }
  .mock-mirror__h { flex-wrap: wrap; gap: 2px 10px; }
  .mock-mirror__h b { flex: 1 1 100%; font-size: 13.5px; } .mock-mirror__h span { font-size: 11px; }
  .mirror-row { grid-template-columns: .6fr 1fr 1fr 1fr .8fr; gap: 6px; padding: 9px 4px; font-size: 11px; }
  .mock-mirror__sign { font-size: 11px; padding: 10px; }
  /* celular menos alto p/ não sobrar vão + conteúdo respira */
  .phone { width: 264px; padding: 10px; }
  .phone__screen { aspect-ratio: 9 / 17.5; }
  .mock-punch__body { padding: 18px 16px; }
  .mock-punch .clock { font-size: 40px; margin: 12px 0 2px; }
  .mock-punch__btn { padding: 15px; font-size: 15px; }
  .mock-bio__oval { width: 150px; height: 195px; }
}