/* ==========================================================
   styles.css — complementa a Tailwind con lo que es más claro
   escribir a mano: el escenario video+canvas y los componentes.
   ========================================================== */

/* ---------- Escenario: video y canvas apilados ---------- */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;            /* vertical por defecto (móvil) */
  max-height: 75vh;
  background: #11161c;
  border-radius: 14px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .stage { aspect-ratio: 16 / 10; }  /* apaisado en escritorio */
}

/* Ambos elementos ocupan todo el escenario y se ajustan igual.
   Como el canvas tiene la resolución nativa del video, object-fit: contain
   los alinea píxel a píxel sin cálculos extra en JavaScript. */
.stage video,
.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stage canvas { pointer-events: none; }  /* el overlay no captura toques */

.stage-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
  color: #9fb0c0;
  font-size: 0.95rem;
}
.stage.live .stage-placeholder { display: none; }

/* ---------- Botones ---------- */
.btn {
  min-height: 48px;                /* objetivo táctil cómodo */
  padding: 0 1.25rem;
  border-radius: 10px;
  font-weight: 700;
  transition: background-color 0.15s, opacity 0.15s;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:focus-visible,
input:focus-visible { outline: 3px solid #2F5BEA; outline-offset: 2px; }

.btn-primary { background: #2F5BEA; color: #fff; }
.btn-primary:not(:disabled):hover { background: #2549c2; }
.btn-secondary { background: #fff; color: #1B2733; border: 1px solid #b8c2cc; }
.btn-secondary:not(:disabled):hover { background: #e4e9ee; }

/* ---------- Tarjetas y métricas ---------- */
.panel { background: #fff; border: 1px solid #d5dce3; border-radius: 12px; padding: 1rem; }
.stat  { background: #fff; border: 1px solid #d5dce3; border-radius: 10px; padding: 0.5rem; }
.stat dt { font-size: 0.75rem; color: #5b6b7a; }
.stat dd { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.file-input { width: 100%; font-size: 0.85rem; }

/* Estados del indicador (los pone script.js con classList) */
#status.ok    { background: #dff5e6; border-color: #8fd3a3; }
#status.busy  { background: #fff2cf; border-color: #e6c25c; }
#status.error { background: #fde2e2; border-color: #e59a9a; }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}