/* assets/css/camaras.css — Franja de cámaras de caseta */

.cameras-strip {
  background: #1a1a1a;
  border-radius: 8px;
  padding: 8px;
  margin-top: 1.5rem;
  transition: padding 0.25s ease;
}

/* Cuando está colapsada se ancla al fondo del viewport como barra delgada */
.cameras-strip[data-collapsed="true"] {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  margin: 0;
  border-radius: 8px 8px 0 0;
  z-index: 1040;
  padding: 4px 8px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.cameras-strip[data-collapsed="true"] .camera-grid { display: none; }
.cameras-strip[data-collapsed="true"] .cameras-header { margin-bottom: 0; }

.cameras-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ddd;
  font-size: 13px;
  margin-bottom: 8px;
}
.cameras-header .live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  margin-right: 6px;
  animation: cam-pulse 1.5s infinite;
}
@keyframes cam-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.btn-cam-toggle {
  background: transparent;
  border: 1px solid #444;
  color: #aaa;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 12px;
}
.btn-cam-toggle:hover { color: #fff; border-color: #888; }

.camera-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.camera {
  position: relative;
  aspect-ratio: 16/10;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}
.camera img.cam-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transition: transform 0.05s linear;
}

/* Flip persistente para la cámara de ID */
.camera[data-flipped="true"] img.cam-img {
  transform: rotate(180deg) scale(var(--cam-zoom, 1)) translate(var(--cam-tx, 0px), var(--cam-ty, 0px));
}
.camera:not([data-flipped="true"]) img.cam-img {
  transform: scale(var(--cam-zoom, 1)) translate(var(--cam-tx, 0px), var(--cam-ty, 0px));
}

.camera-label {
  position: absolute; top: 6px; left: 8px;
  color: #fff; font-size: 11px; font-weight: 600;
  background: rgba(0,0,0,0.5);
  padding: 2px 8px; border-radius: 3px;
  pointer-events: none;
}
.camera-zoom-indicator {
  position: absolute; bottom: 6px; left: 8px;
  color: #fff; font-size: 10px;
  background: rgba(0,0,0,0.55);
  padding: 2px 6px; border-radius: 3px;
  pointer-events: none;
  display: none;  /* solo aparece cuando hay zoom != 1 */
}
.camera[data-zoomed="true"] .camera-zoom-indicator { display: block; }

.camera-controls {
  position: absolute; top: 4px; right: 4px;
  display: flex; gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.camera:hover .camera-controls { opacity: 1; }
.cam-btn {
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 3px;
  width: 26px; height: 26px;
  font-size: 12px;
  cursor: pointer;
}
.cam-btn:hover { background: rgba(0,0,0,0.85); }
.cam-btn.is-loading { pointer-events: none; opacity: 0.5; }

/* Cursor de zoom sobre la cámara de placa */
.camera[data-tipo="placa"] { cursor: zoom-in; }
.camera[data-tipo="placa"][data-zoomed="true"] { cursor: grab; }
.camera[data-tipo="placa"][data-zoomed="true"]:active { cursor: grabbing; }

/* ============================================================
   Rediseño B — "Modo Verificación": layout de Control de Acceso
   (portado del mockup docs/mockups/redesign-index/B*.html)
   Tarjeta-héroe unificada (cámaras grandes + info del visitante) arriba;
   lista + riel oscuro de cámaras abajo. Las cámaras las MUEVE camaras.js
   a .hero-cams / .rail-cams según el tab. Todo scopeado bajo .acceso-pane
   para no afectar el resto del panel.
   ============================================================ */
.acceso-pane {
  --vs-green: #3aaa35; --vs-green-d: #2e8a2a; --vs-muted: #6b7280;
  --vs-line: #e6e8ec; --vs-amber: #b9791f; --vs-live: #ff3b30; --vs-ink2: #3a4150;
  display: flex; flex-direction: column; gap: 14px; min-height: 0;
  padding: 0 4px;
}

/* ---- Tarjeta héroe de verificación ---- */
.acceso-pane .verif-card {
  flex: 0 0 auto;
  background: #fff; border: 1px solid var(--vs-line); border-radius: 12px;
}
.acceso-pane .verif-inner { display: flex; gap: 16px; padding: 14px 16px; align-items: stretch; }

/* Zona de cámaras del héroe (JS mueve aquí rostro/identificación) */
.acceso-pane .hero-cams { display: flex; gap: 12px; flex: 1; min-width: 0; align-items: center; justify-content: center; }
.acceso-pane .hero-cams .camera {
  flex: 1 1 0; min-width: 0; max-width: 300px; height: 216px; aspect-ratio: auto; border-radius: 8px;
}
/* Flecha ⟷ entre las dos cámaras del héroe: indica visualmente "compáralas" */
.acceso-pane .cam-arrow { flex: 0 0 auto; color: #c2c9d2; font-size: 22px; display: flex; align-items: center; }
/* Foto registrada (con-foto): cuadrada, junto a la cámara de rostro */
.acceso-pane .hero-foto { flex: 1 1 0; min-width: 0; max-width: 300px; display: flex; flex-direction: column; }
.acceso-pane .hero-foto .ref-box {
  position: relative;
  width: 100%; height: 216px; border-radius: 8px; background: #eef1f4;
  overflow: hidden; cursor: grab;
}
.acceso-pane .hero-foto .ref-box.grabbing { cursor: grabbing; }
/* El span (#preferente-foto/#personal-foto) y la img deben LLENAR el marco
   para que object-fit:cover recorte y object-position (arrastre) reencuadre. */
.acceso-pane .hero-foto .ref-box > span { display: block; width: 100%; height: 100%; }
.acceso-pane .hero-foto .ref-box img,
.acceso-pane .hero-foto .ref-box .avatar-preferente {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; pointer-events: none;
}
.acceso-pane .hero-foto .cap,
.acceso-pane .hero-rostro .cap { font-size: 11px; color: var(--vs-muted); text-align: center; margin-top: 5px; }
/* Columna del rostro (con-foto): cámara + pie, para igualar a la foto y no quedar "chueco" */
.acceso-pane .hero-rostro { flex: 1 1 0; min-width: 0; max-width: 300px; display: flex; flex-direction: column; }
/* modo-con-foto se aplica al tab-pane (ancestro de .acceso-pane), no dentro.
   Foto y rostro se comportan como las cámaras de Visitas: casi cuadradas, llenan. */
.modo-con-foto .hero-cams { flex: 1; width: 100%; }
.modo-con-foto .hero-cams .camera { flex: 1; width: 100%; max-width: none; height: 216px; }

/* Columna de información del visitante + campos + botón */
.acceso-pane .hero-info {
  flex: 0 0 290px; border-left: 1px solid var(--vs-line); padding-left: 16px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.acceso-pane .hero-info .visitante-nombre { font-size: 18px; font-weight: 700; line-height: 1.15; }
.acceso-pane .hero-info .visitante-sub { color: var(--vs-muted); font-size: 13px; }
.acceso-pane .hero-info .hero-hint {
  font-size: 11px; color: var(--vs-amber); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.acceso-pane .hero-info .form-group { margin-bottom: 0; }
.acceso-pane .hero-info label { display: block; font-size: 11px; color: var(--vs-muted); font-weight: 600; margin-bottom: 3px; }
.acceso-pane .hero-info label small { font-weight: 400; }
.acceso-pane .hero-info input.form-control,
.acceso-pane .hero-info textarea.form-control {
  width: 100%; border: 1px solid var(--vs-line); border-radius: 8px;
  padding: 7px 10px; font-size: 13px;
}
.acceso-pane .hero-info textarea.form-control { min-height: 40px; height: 40px; }
.acceso-pane .hero-info .btn-go {
  width: 100%; background: var(--vs-green); color: #fff; border: none; border-radius: 9px;
  padding: 11px; font-size: 15px; font-weight: 700; margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 12px rgba(58,170,53,.3);
}
.acceso-pane .hero-info .btn-go:hover { background: var(--vs-green-d); }

/* Overlay "EN VIVO" en la cámara principal del héroe */
.acceso-pane .hero-cams .camera .camera-label .live-dot,
.acceso-pane .rail-cams .live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--vs-live); margin-right: 5px; animation: cam-pulse 1.4s infinite;
}

/* ---- Fila inferior: lista + riel oscuro ---- */
.acceso-pane .lower-row { flex: 1; display: flex; gap: 14px; min-height: 0; }
.acceso-pane .lower-table { flex: 1; min-width: 0; display: flex; }
.acceso-pane .lower-table > .card { flex: 1; min-width: 0; }
.acceso-pane .lower-table .card-body { overflow-x: auto; }
.acceso-pane .rail-cams {
  flex: 0 0 288px; align-self: flex-start; background: #15171c; border-radius: 12px; padding: 11px;
  display: flex; flex-direction: column; gap: 9px;
}
.acceso-pane .rail-cams .rail-title {
  color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px;
}
/* Relación ~1.59:1 fija (no estirar a la lista) para que object-fit:cover no deforme */
.acceso-pane .rail-cams .camera { flex: 0 0 auto; width: 100%; aspect-ratio: 1.59; height: auto; }

/* La franja global #camStrip ya no se usa: las cámaras viven en el héroe de
   cada pane y en Salidas no se necesitan. Se oculta siempre (las 3 cámaras se
   "estacionan" ahí, ocultas, cuando no hay pane que las muestre). */
#camStrip { display: none; }

/* Proveedores: logo + identidad del proveedor sobre la columna de info.
   Las cámaras usan la misma proporción que las demás vistas (casi cuadradas). */
.acceso-pane .prov-head { display: flex; align-items: center; gap: 10px; }
.acceso-pane .prov-logo { flex: 0 0 auto; display: inline-flex; }
.acceso-pane .prov-logo img { max-width: 56px; max-height: 42px; object-fit: contain; }
.acceso-pane .prov-ident { min-width: 0; }
.acceso-pane .prov-adic { font-size: 12px; color: var(--vs-muted); margin-top: 2px; }

/* Responsive: apilar en pantallas angostas */
@media (max-width: 991px) {
  .acceso-pane .verif-inner { flex-wrap: wrap; }
  .acceso-pane .hero-info { flex: 1 1 100%; border-left: none; padding-left: 0; border-top: 1px solid var(--vs-line); padding-top: 10px; }
  .acceso-pane .lower-row { flex-direction: column; }
  .acceso-pane .rail-cams { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; }
  .acceso-pane .rail-cams .camera { flex: 1 1 160px; }
}