/* ===== ISCOM Asistencia — Kiosko de obra (1.15.0) =====
 * Encima de kiosko.css (misma paleta, mismas cajas). Lo propio de aquí es la
 * pantalla de un solo botón, la cámara y la pantalla de resultado: pensado para
 * una tableta o un teléfono rugerizado al sol, con guantes: botones grandes,
 * texto grande, poco que leer. */
.obra-pantalla { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.obra-cabecera {
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--secundario, #263238); color: var(--sobre-oscuro);
}
.obra-cabecera img { height: 36px; background: var(--fondo-logo); border-radius: 6px; padding: 2px 6px; }
.obra-cabecera .quien { min-width: 0; flex: 1; }
.obra-cabecera .emp { font-weight: 700; font-size: var(--tx-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obra-cabecera .nom { opacity: .85; font-size: var(--tx-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obra-reloj { font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 700; letter-spacing: 1px; }
body:has(#pInicio:not(.oculto)) .tema-flotante,
body:has(#pCamara:not(.oculto)) .tema-flotante,
body:has(#pListo:not(.oculto)) .tema-flotante { display: none; }

.obra-centro {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 20px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left));
  max-width: 560px; width: 100%; margin: 0 auto; box-sizing: border-box;
}
.obra-centro.obra-lista { justify-content: flex-start; align-items: stretch; }
.obra-centro.obra-lista .caja { margin-bottom: 0; }
.obra-titulo { font-size: clamp(22px, 5vw, 30px); margin: 0; text-align: center; line-height: 1.2; }
.obra-estado { color: var(--texto-suave); text-align: center; margin: 0; font-size: var(--tx-m); line-height: 1.5; }
.obra-estado.sin-red { color: var(--aviso-texto); font-weight: 600; }

.obra-boton-grande {
  width: min(100%, 420px); aspect-ratio: 1.4; border: 0; border-radius: 28px; cursor: pointer;
  background: var(--primario, #c62828); color: #fff; box-shadow: var(--sombra-alta);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: clamp(28px, 7vw, 44px); font-weight: 800; letter-spacing: 1px;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.obra-boton-grande:active { transform: scale(.98); }
.obra-boton-grande .icono { width: 64px; height: 64px; }
.obra-boton-grande small { font-size: var(--tx-m); font-weight: 500; opacity: .9; letter-spacing: 0; padding: 0 16px; text-align: center; }

.obra-pie {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); color: var(--texto-suave); font-size: var(--tx-s);
}
.obra-pie .sep { color: var(--texto-tenue); }
.obra-pie .enlace-fila { font-size: var(--tx-s); }

.obra-separador { border: 0; border-top: 1px solid var(--borde); margin: 16px 0 8px; }

/* La cámara: un óvalo grande, la cuenta regresiva encima */
.obra-camara {
  position: relative; width: min(88vw, 360px); aspect-ratio: 3 / 4; border-radius: 50% / 40%;
  overflow: hidden; background: #000; box-shadow: var(--sombra-alta); border: 4px solid var(--superficie);
}
.obra-camara.chica { width: min(60vw, 220px); aspect-ratio: 4 / 3; border-radius: var(--radio-xl); }
.obra-camara video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sólo la cámara frontal se refleja (la persona se ve como en un espejo); la
 * trasera, con la que el supervisor encuadra a otro, se ve tal cual. La foto
 * que viaja nunca va reflejada. */
.obra-camara video.espejo, .obra-foto-mini.espejo { transform: scaleX(-1); }
.obra-cuenta {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 96px; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); pointer-events: none;
}
.obra-cuenta.oculto { display: none; }
.obra-acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.obra-boton-qr { margin-top: -6px; }

/* Leer el gafete QR con la cámara (teléfonos sin escáner): trasera, recuadro guía */
.obra-escaner {
  position: relative; width: min(88vw, 360px); aspect-ratio: 3 / 4; border-radius: var(--radio-xl);
  overflow: hidden; background: #000; box-shadow: var(--sombra-alta);
}
.obra-escaner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.obra-mira {
  position: absolute; inset: 22% 14%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none;
}

/* El resultado */
.obra-resultado {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-xl); box-shadow: var(--sombra-alta);
  padding: 24px 20px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.obra-foto-mini { width: 120px; height: 160px; object-fit: cover; border-radius: 16px; background: #000; }
.obra-check { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-fondo); color: var(--ok); display: flex; align-items: center; justify-content: center; margin-top: -38px; border: 3px solid var(--superficie); }
.obra-check .icono { width: 30px; height: 30px; }
.obra-check.aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.obra-hora { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.obra-ul { list-style: none; margin: 0 0 10px; padding: 0; }
.obra-ul li { padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: var(--tx-m); }
.obra-ul li:last-child { border-bottom: 0; }
.obra-ul .sub { display: block; color: var(--texto-suave); font-size: var(--tx-s); }
.obra-ul .vacio { color: var(--texto-suave); }