/* Checadu — pantalla de checada. Móvil primero: todo alcanzable con el pulgar. */
body.app-reloj{background:#f2f6f4;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
.reloj-app button,.reloj-app .pantalla-ok,.reloj-app .reloj-hora,.reloj-app .teclado{user-select:none;-webkit-user-select:none}
.reloj-app{min-height:100svh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;
  padding:env(safe-area-inset-top,0px) 16px calc(16px + env(safe-area-inset-bottom,0px))}

/* ---------- barra superior */
.reloj-barra{display:flex;align-items:center;gap:10px;min-height:60px;padding-top:8px}
.reloj-marca{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--tinta)}
.reloj-marca .logo-marca{width:30px;height:30px;font-size:1rem}
.lugar-chip{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;
  background:#fff;border:1px solid var(--linea);border-radius:999px;padding:7px 14px 7px 7px;font:inherit;
  text-align:left;box-shadow:var(--sombra)}
.lugar-inicial{width:34px;height:34px;border-radius:50%;background:var(--verde-10);color:var(--verde-700);
  display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:0 0 auto}
.lugar-texto{flex:1;min-width:0;line-height:1.2}
.lugar-texto strong{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lugar-texto small{color:var(--tinta-50);font-size:.8rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block}
.lugar-cambiar{color:var(--tinta-50);flex:0 0 auto}
.offline-chip{flex:0 0 auto}

/* ---------- pantallas */
.pantalla{flex:1;display:flex;flex-direction:column;padding:6px 0 0}
.pantalla[hidden],[hidden]{display:none!important}
.pantalla-titulo{font-size:1.6rem;margin:10px 0 4px}
.pantalla-sub{color:var(--tinta-70);margin:0 0 16px}
.pantalla-nota{color:var(--tinta-50);font-size:.85rem;text-align:center;margin:14px 0 0}
.caja-error{margin:12px 0 0}
.pie-legal-app{text-align:center;color:var(--tinta-50);font-size:.78rem;margin:14px 0 4px}
.pie-legal-app a{color:var(--tinta-50)}
.enlace{background:none;border:0;font:inherit;color:var(--tinta-50);text-decoration:underline;cursor:pointer;
  padding:10px}

/* ---------- reloj */
.pantalla-reloj{justify-content:flex-start}
.reloj-cabeza{text-align:center;margin:4px 0 10px}
.reloj-hora{font-size:clamp(3.6rem,19vw,5.4rem);font-weight:800;letter-spacing:-.03em;margin:0;
  font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.reloj-hora-chica{font-size:clamp(2.4rem,11vw,3.2rem);text-align:center;margin:2px 0 14px;color:var(--tinta)}
.reloj-fecha{color:var(--tinta-50);margin:6px 0 0;font-size:.95rem;text-transform:capitalize}
.teclado-ayuda{text-align:center;font-weight:650;margin:0 0 8px}
.teclado-visor{display:block;height:58px;background:#fff;border:1.5px solid var(--linea);
  border-radius:var(--r);font-size:2rem;font-weight:700;letter-spacing:.22em;text-align:center;
  line-height:58px;font-variant-numeric:tabular-nums;margin-bottom:14px;color:var(--tinta)}
.teclado-visor:empty::before{content:"—";color:var(--linea)}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto}
.tecla{font:inherit;font-size:1.9rem;font-weight:600;color:var(--tinta);background:#fff;cursor:pointer;
  border:1px solid var(--linea);border-radius:var(--r);min-height:clamp(58px,9.5vh,76px);
  box-shadow:var(--sombra);transition:transform .06s,background .12s}
.tecla:active{transform:scale(.96);background:var(--verde-10)}
.tecla-sec{color:var(--tinta-50);font-size:1.5rem}
.tecla-ok{background:var(--verde);color:#fff;border-color:var(--verde);font-size:1.6rem}
.tecla-ok:active{background:var(--verde-600)}

/* ---------- acción */
.pantalla-accion{justify-content:flex-start}
.persona{display:flex;align-items:center;gap:14px;margin:8px 0 6px}
.persona-avatar{width:56px;height:56px;border-radius:50%;background:var(--verde-10);color:var(--verde-700);
  display:grid;place-items:center;font-weight:700;font-size:1.25rem;flex:0 0 auto}
.persona-nombre{font-size:1.45rem;margin:0}
.persona-estado{color:var(--tinta-70);margin:2px 0 0;font-size:.95rem}
.btn-checar{margin-top:auto;width:100%;min-height:clamp(112px,18vh,148px);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--verde);color:#fff;border:0;border-radius:var(--r-lg);font:inherit;
  box-shadow:0 10px 24px rgba(14,138,95,.28);transition:transform .06s,background .12s}
.btn-checar:active{transform:scale(.985);background:var(--verde-600)}
.btn-checar[disabled]{opacity:.6}
.btn-checar.es-salida{background:var(--tinta);box-shadow:0 10px 24px rgba(14,34,51,.22)}
.btn-checar.es-salida:active{background:#081722}
.btn-checar.es-comida{background:var(--ambar);box-shadow:0 10px 24px rgba(224,163,58,.28)}
.btn-checar-tipo{font-size:1.9rem;font-weight:800;letter-spacing:-.01em}
.btn-checar-pie{font-size:.9rem;opacity:.85}
.acciones-sec{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.acciones-sec:empty{display:none}
.btn-sec{font:inherit;font-weight:600;cursor:pointer;background:#fff;color:var(--tinta-70);
  border:1px solid var(--linea);border-radius:var(--r);padding:14px 10px;min-height:54px}
.btn-sec:active{background:var(--verde-10)}
.pie-accion{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:10px}
.recordar{display:flex;align-items:center;gap:8px;color:var(--tinta-70);font-size:.88rem;padding:8px}

/* ---------- confirmación */
.pantalla-ok{align-items:center;justify-content:center;text-align:center;gap:2px}
.ok-sello{width:112px;height:112px;border-radius:50%;background:var(--verde);color:#fff;
  display:grid;place-items:center;font-size:3.4rem;margin-bottom:18px;
  animation:sello .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes sello{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.ok-tipo{font-size:1.15rem;color:var(--tinta-70);margin:0;text-transform:uppercase;letter-spacing:.1em}
.ok-hora{font-size:clamp(3.4rem,18vw,5rem);font-weight:800;margin:2px 0 6px;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.ok-nombre{font-size:1.1rem;font-weight:650;margin:0}
.ok-nota{color:var(--tinta-50);font-size:.9rem;margin:8px 0 22px;max-width:28ch}
.pantalla-ok .btn{max-width:320px}

/* ---------- lista de empresas y sucursales */
.lista-tarjetas{display:grid;gap:10px;margin:14px 0}
.lista-tarjetas:empty{display:none}
.tarjeta-op{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:14px;font:inherit;
  box-shadow:var(--sombra);min-height:68px}
.tarjeta-op:active{background:var(--verde-10);border-color:var(--verde-20)}
.tarjeta-op .lugar-inicial{width:44px;height:44px;font-size:1rem}
.tarjeta-op strong{display:block}
.tarjeta-op span{display:block;color:var(--tinta-50);font-size:.87rem}
.tarjeta-op .flecha{margin-left:auto;color:var(--tinta-50);font-size:1.3rem}

@media (min-height:760px){
  .reloj-app{padding-left:24px;padding-right:24px}
  .teclado{gap:12px}
}
@media (prefers-reduced-motion:reduce){.ok-sello{animation:none}}

/* ---------- alta y firma */
.alta-app .pantalla{padding-bottom:20px}
.alta-app .reloj-barra{gap:12px}
.acuerdo-caja{max-height:280px;overflow-y:auto;background:#fff;border:1px solid var(--linea);
  border-radius:var(--r);padding:16px;font-size:.92rem;line-height:1.6;color:var(--tinta-70);
  -webkit-overflow-scrolling:touch}
.acepto{display:flex;gap:10px;align-items:flex-start;background:var(--verde-10);border-radius:var(--r);
  padding:14px;margin:14px 0 4px;font-size:.94rem}
.acepto input{margin-top:3px}
.firma-marco{position:relative;background:#fff;border:1.5px dashed var(--linea);border-radius:var(--r);
  padding:1px;touch-action:none}
.firma-marco canvas{display:block;border-radius:var(--r);background:#fff;cursor:crosshair;touch-action:none}
.firma-limpiar{position:absolute;right:10px;bottom:10px}
.firma-vista{max-width:320px;border:1px solid var(--linea);border-radius:var(--r);background:#fff}

.lugar-logo{height:34px;max-width:120px;object-fit:contain;flex:0 0 auto}
.alta-app .lugar-logo{height:40px}

/* ---------- estación fija (tableta o pantalla en la entrada) */
.es-estacion{max-width:1100px}
.es-estacion .recordar{display:none}
@media (min-width:900px) and (orientation:landscape){
  .es-estacion .pantalla-reloj{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .es-estacion .reloj-cabeza{grid-row:1/4;text-align:left;align-self:center}
  .es-estacion .reloj-hora{font-size:clamp(4rem,9vw,7rem)}
  .es-estacion .reloj-fecha{font-size:1.3rem}
  .es-estacion .teclado{gap:14px}
  .es-estacion .tecla{min-height:clamp(70px,11vh,96px);font-size:2.3rem}
  .es-estacion .pantalla-accion{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .es-estacion .btn-checar{grid-column:2;min-height:180px}
  .es-estacion .btn-checar-tipo{font-size:2.6rem}
}

.estacion-pie{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:14px}
.estacion-pie .chip{cursor:default}
.estacion-pie button.chip{cursor:pointer;border:0;font:inherit;font-size:.8rem;font-weight:650}

/* ---------- mapa de geocerca al checar */
.geo-caja{margin:0 0 12px;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;background:#fff}
.mapa-mini{height:160px;background:#eef1f0}
.geo-estado{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:.9rem;font-weight:650}
.geo-estado.dentro{color:var(--verde-700);background:var(--verde-10)}
.geo-estado.fuera{color:#a83f38;background:#fdeeed}
.geo-estado.remoto{color:var(--tinta-70);background:#f4f6f5}
.geo-estado.buscando{color:var(--tinta-50)}

/* ---------- barras de la PWA */
.pwa-barra{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--linea);border-radius:var(--r-lg);
  box-shadow:0 10px 30px rgba(14,34,51,.18);padding:12px 14px;font-size:.92rem;max-width:520px;margin:0 auto}
.pwa-barra>span{flex:1;min-width:0}
.pwa-barra small{color:var(--tinta-50)}
.pwa-nueva{background:var(--verde-10);border-color:var(--verde-20)}
html.en-app .pie-legal-app{display:none}
html.en-app #ok-salir{display:none!important}
html.en-app .reloj-app{padding-top:calc(env(safe-area-inset-top,0px) + 6px)}