/* App del empleado: una columna, el botón al alcance del pulgar */

/* ---------- Acceso ---------- */
.login { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.login-art {
  background: var(--in); color: #fff; padding: 28px 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
}
.login-clock { font-stretch: 125%; font-weight: 800; font-size: clamp(3.2rem, 16vw, 7.5rem); line-height: .9; letter-spacing: -0.02em; }
.login-art p { max-width: 30ch; opacity: .85; }
.login-form { padding: 28px 24px 40px; max-width: 460px; width: 100%; justify-self: center; }
.login-form h1 { margin: 18px 0 22px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-stretch: 112%; font-size: 1.2rem; }
@media (min-width: 900px) {
  .login { grid-template-columns: 1.1fr 1fr; }
  .login-art { padding: 56px; }
  .login-form { align-self: center; padding: 56px; }
}

/* ---------- Estructura ---------- */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--rule); background: var(--sheet);
}
.who { display: grid; line-height: 1.25; }
.top-actions { display: flex; gap: 8px; }
.top-actions .btn { min-height: 40px; padding: 6px 14px; }

.punch {
  width: 100%; max-width: 520px; margin: 0 auto; padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
  display: grid; gap: 22px;
}

/* ---------- Reloj: el protagonista ---------- */
.clock-block { text-align: center; }
.date { font-weight: 600; color: var(--ink-2); text-transform: none; }
.clock {
  font-stretch: 125%; font-weight: 800; font-size: clamp(4rem, 22vw, 6.6rem); line-height: 1; letter-spacing: -0.03em;
  margin: 4px 0 6px; color: var(--ink);
}
.clock .sec { font-size: .38em; font-weight: 700; color: var(--ink-2); letter-spacing: 0; margin-left: .08em; vertical-align: .9em; }

/* ---------- Evidencia ---------- */
.capture { display: grid; justify-items: center; gap: 12px; }
.lens {
  position: relative; width: 168px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--card); box-shadow: 0 0 0 4px var(--sheet), 0 0 0 6px var(--rule);
}
.lens video, .lens img { width: 100%; height: 100%; object-fit: cover; }
.lens video { transform: scaleX(-1); }
.lens-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-2); font-size: .85rem; text-align: center; padding: 20px; }
.lens.live .lens-empty { display: none; }
.checks { display: flex; gap: 8px; padding: 0; margin: 0; list-style: none; flex-wrap: wrap; justify-content: center; }

/* ---------- Botón de checar ---------- */
.punch-btn {
  font: inherit; width: 100%; min-height: 96px; border: 0; border-radius: var(--r-l); cursor: pointer;
  display: grid; gap: 2px; place-content: center; text-align: center; padding: 16px;
  background: var(--in); color: #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--in) 60%, #000);
  transition: transform .08s, box-shadow .08s;
}
.punch-btn.out { background: var(--out); box-shadow: 0 6px 0 color-mix(in srgb, var(--out) 60%, #000); }
.punch-btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 color-mix(in srgb, var(--in) 60%, #000); }
.punch-btn:disabled { opacity: .5; cursor: not-allowed; }
.punch-kind { font-size: 1.6rem; font-weight: 800; font-stretch: 115%; }
.punch-hint { font-size: .88rem; opacity: .85; }
@media (prefers-color-scheme: dark) { .punch-btn, .punch-btn.out { color: #0D1A1D; } }

/* ---------- Tarjeta de hoy ---------- */
.today { display: grid; gap: 10px; }
.today-head { display: flex; justify-content: space-between; align-items: baseline; }
.timecard .row-line .label { display: grid; }
.timecard .row-line .label small { color: var(--ink-2); }
.history summary { cursor: pointer; font-weight: 650; padding: 10px 0; min-height: var(--tap); display: flex; align-items: center; }
.day { margin: 6px 0 14px; }
.day h3 { font-size: .95rem; color: var(--ink-2); margin-bottom: 6px; }
.row-line.fresh .stamp { animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stamp { from { transform: scale(1.8) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Comprobante ---------- */
.receipt {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 45%, transparent);
  display: grid; align-items: end; justify-items: center; padding: 16px; z-index: 10;
}
.receipt-card { width: 100%; max-width: 440px; padding: 24px 22px 22px 34px; background: var(--sheet); animation: rise .35s ease-out; }
.receipt-card::before { background: radial-gradient(circle, var(--paper) 3.2px, transparent 3.6px) 0 0 / 8px 16px repeat-y; }
.rc-time { font-size: clamp(2.3rem, 11.5vw, 4rem); white-space: nowrap; line-height: 1; margin: 10px 0 14px; animation: stamp .5s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
.rc-meta { margin: 0 0 14px; display: grid; gap: 6px; }
.rc-meta div { display: grid; grid-template-columns: 70px 1fr; gap: 8px; }
.rc-meta dt { color: var(--ink-2); } .rc-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) { .receipt { align-items: center; } }

/* Aviso del trabajador */
.consent-card { display: grid; gap: 12px; max-height: 92vh; overflow-y: auto; }
.consent-text { font-size: .95rem; line-height: 1.5; background: var(--paper); border-radius: var(--r-s); padding: 12px 14px; max-height: 42vh; overflow-y: auto; }
.consent-text p { margin: 0 0 6px; }
.check { display: flex; gap: 10px; }
.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--in); }
.consent-check { align-items: flex-start; font-weight: 600; line-height: 1.4; }
.consent-check input { margin-top: 3px; flex: none; }

.by { font-size: .78rem; color: var(--ink-2); margin-top: 6px; }
.by a { color: inherit; }

.login-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 10px; }
.linkish { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .92rem; color: var(--in); text-decoration: underline; cursor: pointer; min-height: 0; }