/* iPresence PWA - Estilos responsive */
:root {
  --primary: #1a56db;
  --entrada: #057a55;
  --salida:  #b91c1c;
  --bg:      #f0f4ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ── Header ── */
.app-header {
  background: var(--primary);
  color: #fff;
  padding: .85rem 1.25rem;
  flex-shrink: 0;
}
.app-header h1 { font-size: 1.25rem; }

/* ── Main: scroll vertical, centrado horizontal ── */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1.25rem 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.screen {
  width: 100%;
  max-width: 480px;
  padding: .25rem 0;
}

.hidden { display: none !important; }

/* ── Card ── */
.card {
  background: #fff;
  border-radius: 14px;
  padding: 1.75rem 1.25rem;
  box-shadow: 0 2px 16px rgba(0,0,0,.1);
  text-align: center;
  width: 100%;
}
.card h2 { margin-bottom: .6rem; color: #111; font-size: 1.2rem; }
.card p  { color: #555; margin-bottom: .9rem; font-size: .9rem; line-height: 1.5; }

/* ── Formulario ── */
label {
  display: block;
  text-align: left;
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: .3rem;
  color: #374151;
}
input {
  width: 100%;
  padding: .7rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 1rem;
  -webkit-appearance: none;
}
input:focus { outline: 2px solid var(--primary); border-color: transparent; }

/* ── Botones — touch target mínimo 48px ── */
.btn {
  width: 100%;
  min-height: 48px;
  padding: .8rem 1rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: .65rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary  { background: var(--primary); color: #fff; }
.btn-primary:active  { filter: brightness(.9); }
.btn-entrada  { background: var(--entrada); color: #fff; font-size: 1.15rem; min-height: 56px; }
.btn-entrada:active  { filter: brightness(.9); }
.btn-salida   { background: var(--salida);  color: #fff; font-size: 1.15rem; min-height: 56px; }
.btn-salida:active   { filter: brightness(.9); }
.btn-link     { background: none; color: #6b7280; font-size: .85rem;
                text-decoration: underline; min-height: 40px; }
.btn-secondary { background: #6b7280; color: #fff; }
.btn-secondary:active { background: #4b5563; }
.btn-dimmed   { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ── Pantalla marcaje ── */
.mark-buttons { display: flex; flex-direction: column; gap: .65rem; margin: .75rem 0; }

.mark-hint {
  font-size: .8rem; font-weight: 600; text-align: center; color: var(--primary);
  margin: .2rem 0 .4rem; letter-spacing: .02em; min-height: 1.2em;
}

.incidence-select { margin-bottom: .5rem; text-align: left; }
.incidence-select label { font-size: .85rem; }
.incidence-select select {
  width: 100%; padding: .6rem .75rem;
  border: 1px solid #d1d5db; border-radius: 8px;
  font-size: .9rem; background: #fff; color: #111;
  -webkit-appearance: none;
}

.clock {
  font-size: 2.25rem; font-weight: 700; color: var(--primary);
  letter-spacing: .04em; margin: .4rem 0 1.25rem;
}

/* ── Mensajes ── */
.msg {
  font-size: .875rem; padding: .55rem .75rem;
  border-radius: 6px; margin-top: .5rem; line-height: 1.4;
}
.msg.error   { background: #fde8e8; color: #9b1c1c; }
.msg.success { background: #def7ec; color: #03543f; }
.msg.info    { background: #e0f0ff; color: #1a56db; }

/* ── Éxito ── */
.success-icon { font-size: 3.5rem; color: var(--entrada); margin-bottom: .5rem; }

/* ── Spinner ── */
.spinner {
  width: 44px; height: 44px;
  border: 4px solid #d1d5db; border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 2rem auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Pantalla camara ── */
#screen-camera .card {
  padding: .85rem .75rem;
}

#camera-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: .75rem;
  background: #000;
}

#photo-preview-box { margin-bottom: 1rem; }

#photo-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ── Tablet / escritorio (≥ 600px) ── */
@media (min-width: 600px) {
  main { justify-content: center; padding: 2rem 1.5rem; }
  .screen { margin: 0 auto; }
  .card { padding: 2.25rem 2rem; border-radius: 16px; }
  #screen-camera .card { padding: 1.75rem 1.5rem; }
  .card h2 { font-size: 1.4rem; }
  .clock { font-size: 3rem; }
  .btn-entrada, .btn-salida { font-size: 1.25rem; min-height: 60px; }
}

/* ── Pantalla muy pequeña (< 360px) ── */
@media (max-width: 359px) {
  .card { padding: 1.25rem 1rem; }
  #screen-camera .card { padding: .75rem .5rem; }
  .clock { font-size: 1.9rem; }
  .btn-entrada, .btn-salida { font-size: 1rem; }
}