/* Página del trabajador (celular): marcar entrada y salida con foto y ubicación. */
body.marcar { font-size: 16px; min-height: 100vh; min-height: 100dvh; }
.marcar main { max-width: 480px; margin: 0 auto; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.vista { animation: entra .25s ease-out; }

/* encabezado oscuro con franja de obra */
.hero {
  position: relative; background: var(--asfalto); color: #fff; overflow: hidden;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 22px 34px;
  border-radius: 0 0 28px 28px;
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(245, 184, 0, .16), transparent 55%),
                    radial-gradient(90% 70% at 0% 100%, rgba(255, 255, 255, .05), transparent 60%);
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--franja); opacity: .9; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca .empresa { font: 700 17px/1.1 var(--display); letter-spacing: .4px; margin: 0; }
.marca .sub { margin: 2px 0 0; font-size: 13px; color: #AEB6BB; }
.hero h1 { font: 700 40px/1 var(--display); margin: 26px 0 8px; letter-spacing: .2px; }
.hero-texto { color: #C3CACE; margin: 0; font-size: 15px; }

/* contenido blanco que sube sobre el encabezado */
.hoja { padding: 0 16px; margin-top: -18px; position: relative; z-index: 1; }
.tarjeta { background: var(--tarjeta); border-radius: 20px; padding: 20px; box-shadow: var(--sombra-2); }
.tarjeta + .tarjeta { margin-top: 14px; }
.titulo-hoja { font: 700 30px/1.05 var(--display); margin: 22px 4px 14px; }

/* ingreso */
.campo-grande {
  font: 600 26px/1 var(--display) !important; letter-spacing: 2px; min-height: 58px !important; padding: 12px 16px !important;
}
#pin.campo-grande { letter-spacing: 3px; }
#pin.campo-grande::placeholder { letter-spacing: .5px; }
.privacidad { margin: 6px 0 0 34px; font-size: 14px; color: var(--gris); }
.privacidad summary { cursor: pointer; font-weight: 600; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.privacidad p { margin: 8px 0 0; line-height: 1.5; }
.marcar .check { font-size: 15px; }
.rol-admin { margin: 14px 0 0; padding: 10px 12px; border-radius: 11px; background: var(--senal-suave); color: var(--aviso); font-size: 14px; font-weight: 600; }
.pie-ingreso { margin: 18px 0 0; text-align: center; color: var(--gris); font-size: 14px; }
.salir + .salir { margin-left: 8px; }
a.salir { text-decoration: none; }

/* botón principal grande */
.btn.grande {
  width: 100%; min-height: 72px; margin-top: 18px; border-radius: 18px;
  font: 700 28px/1 var(--display); letter-spacing: .4px; gap: 12px;
  box-shadow: 0 8px 20px rgba(28, 34, 39, .25);
}
.btn.grande .ico { width: 30px; height: 30px; stroke-width: 2.2; }
.btn.grande.entrada { background: var(--senal); color: var(--asfalto); box-shadow: 0 10px 24px rgba(245, 184, 0, .45); }
.btn.grande.entrada:hover { background: var(--senal-2); }
.btn.grande.secundario { background: var(--tarjeta); color: var(--tinta); font-size: 22px; min-height: 58px; box-shadow: inset 0 0 0 2px var(--linea); }

/* pantalla principal */
.fila-usuario { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--senal); color: var(--asfalto); font: 700 18px/1 var(--display); letter-spacing: .5px;
}
.fila-usuario strong { display: block; font: 700 20px/1.1 var(--display); letter-spacing: .2px; }
.fila-usuario .empresa { display: block; font-size: 13px; color: #AEB6BB; }
.salir {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: #E3E7E9; border: 0; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600;
}
.salir:hover { background: rgba(255, 255, 255, .14); }
.reloj { font: 700 108px/.9 var(--display); letter-spacing: -3px; margin: 26px 0 4px; font-variant-numeric: tabular-nums; }
.reloj small { font-size: 32px; letter-spacing: 0; margin-left: 8px; color: var(--senal); }
.fecha { color: #C3CACE; font-weight: 500; margin: 0 0 16px; }
.fecha::first-letter { text-transform: uppercase; }
.estado {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); color: #E3E7E9; font-size: 14px; font-weight: 500; line-height: 1.35;
}
.estado::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #8C9499; flex: none; }
.estado.abierta { background: rgba(46, 160, 82, .18); color: #CFF0DA; }
.estado.abierta::before { background: #3CCB6A; box-shadow: 0 0 0 4px rgba(60, 203, 106, .25); animation: late 1.8s ease-in-out infinite; }
@keyframes late { 50% { box-shadow: 0 0 0 7px rgba(60, 203, 106, 0); } }

.obra label { margin-top: 0; display: flex; align-items: center; gap: 8px; color: var(--gris); font-size: 13px; text-transform: uppercase; letter-spacing: .8px; }
.obra select { font: 600 22px/1.2 var(--display); min-height: 54px; letter-spacing: .2px; }
.gps {
  display: flex; gap: 10px; align-items: center; margin: 12px 0 0; padding: 10px 12px; border-radius: 11px;
  background: var(--suave); font-size: 14px; font-weight: 500;
}
.punto { width: 11px; height: 11px; border-radius: 50%; background: var(--gris-2); flex: none; }
.gps.ok { background: var(--ok-suave); color: var(--ok); }
.gps.ok .punto { background: var(--ok); }
.gps.lejos { background: var(--alerta-suave); color: var(--alerta); font-weight: 600; }
.gps.lejos .punto { background: var(--alerta); }
.gps.buscando { background: var(--senal-suave); color: var(--aviso); }
.gps.buscando .punto { background: var(--senal); animation: pulso 1.1s infinite; }
@keyframes pulso { 50% { opacity: .25; transform: scale(.7); } }
.ayuda { display: flex; gap: 10px; align-items: flex-start; color: var(--gris); font-size: 14px; margin: 14px 6px 0; }
.ayuda .ico { margin-top: 2px; color: var(--gris-2); }

/* confirmar */
.marco-foto { position: relative; border-radius: 20px; overflow: hidden; background: #000; box-shadow: var(--sombra-2); }
.foto { width: 100%; aspect-ratio: 1; max-height: 46vh; object-fit: cover; display: block; }
.marco-foto .sello-tipo {
  position: absolute; left: 12px; top: 12px; background: rgba(28, 34, 39, .78); color: #fff; backdrop-filter: blur(6px);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .3px;
}
.resumen { margin: 0; padding: 0; list-style: none; }
.resumen li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--suave); }
.resumen li:last-child { border-bottom: 0; padding-bottom: 0; }
.resumen li:first-child { padding-top: 0; }
.resumen li span:first-child { color: var(--gris); }
.resumen li span:last-child { font-weight: 600; text-align: right; }
.cancelar { display: block; margin: 18px auto 0; color: var(--gris); }

/* hecho */
.hecho { text-align: center; padding: calc(54px + env(safe-area-inset-top, 0px)) 22px 0; }
.sello {
  width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 22px; display: grid; place-items: center;
  background: var(--ok); color: #fff; box-shadow: 0 0 0 12px var(--ok-suave), 0 16px 40px rgba(30, 123, 59, .35);
  animation: sello .45s cubic-bezier(.2, 1.4, .4, 1);
}
.sello .ico { width: 58px; height: 58px; stroke-width: 2.6; }
.hecho.revisar .sello { background: var(--senal); color: var(--asfalto); box-shadow: 0 0 0 12px var(--senal-suave), 0 16px 40px rgba(245, 184, 0, .4); }
.hecho h2 { font: 700 38px/1.05 var(--display); margin: 0; }
.hecho .hora { font: 700 76px/1 var(--display); margin: 10px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.hecho .lugar { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; background: var(--tarjeta); padding: 8px 14px; border-radius: 999px; box-shadow: var(--sombra-1); }
.hecho .nota { max-width: 340px; margin: 16px auto 0; font-size: 14px; }
.hecho .btn.grande { margin-top: 30px; }
@keyframes sello { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* coordenadas */
.coords { font: 600 28px/1.25 var(--display); background: var(--suave); border-radius: 14px; padding: 16px; margin: 14px 0 0; word-break: break-all; letter-spacing: .3px; }

@media (min-width: 520px) {
  .marcar main { padding-top: 24px; }
  .hero { border-radius: 28px; }
}
@media (max-width: 360px) {
  .reloj { font-size: 86px; }
  .hero h1 { font-size: 34px; }
  .btn.grande { font-size: 24px; }
}