/* Reproductor del timelapse de la webcam (/webcamlapse, js/webcam/timelapse.js).
   Las pastillas siguen el estilo de las del dial de /actuales (.dial-actuales__selector),
   algo más grandes porque aquí mandan sobre la página. */

.lapse {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
}

.lapse__modos,
.lapse__velocidades,
.webcam-selector,
.webcam-capturas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.lapse__modos { margin: 0 0 12px; }

/* /actuales: "Última imagen | Timelapse" sobre la webcam. Va fuera de .lapse, así que
   la letra se le pone aparte (heredaría la del bloque de la webcam). */
.webcam-selector {
  margin: 16px 0 12px;   /* aire con el título «Webcam. Últ. Captura» de encima */
  font-family: Verdana, Geneva, sans-serif;
}

.lapse__modos button,
.lapse__velocidades button,
.webcam-selector button,
.webcam-capturas button,
.lapse__compartir button {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 7px 13px;
  border: 1px solid #d5d5cd;
  border-radius: 999px;
  background: #fff;
  color: #666;
  cursor: pointer;
}

.lapse__velocidades button,
.webcam-capturas button {
  font-size: 12px;
  padding: 5px 10px;
}

/* Los tramos, un poco más ajustados que el resto: así los ocho caben en una línea también
   justo por encima del móvil (480-500 px), donde ya no aplica su versión pequeña */
.lapse__modos button { padding: 7px 11px; }

/* /actuales: capturas de las horas anteriores bajo la última imagen (previos_webcam.js),
   del mismo tamaño que las velocidades del timelapse */
.webcam-capturas {
  margin-top: 8px;
  font-family: Verdana, Geneva, sans-serif;
}

.lapse__modos button:hover,
.lapse__velocidades button:hover,
.webcam-selector button:hover,
.webcam-capturas button:hover,
.lapse__compartir button:hover { border-color: #b9b9ae; }

.lapse__modos button.activo,
.lapse__velocidades button.activo,
.webcam-selector button.activo,
.webcam-capturas button.activo {
  background: #f3f1e8;
  border-color: #b9b9ae;
  color: #333;
  font-weight: bold;
}

.lapse__pantalla {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #1b1b1b;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.lapse__pantalla canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Botón de play grande encima de la imagen mientras está parado */
.lapse__play-grande {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;   /* el clic lo recoge la pantalla entera */
  transition: opacity .2s;
}

.lapse__play-grande svg {
  width: 30px;
  height: 30px;
  fill: #fff;
  margin-left: 4px;       /* el triángulo, centrado a ojo */
}

.lapse--reproduciendo .lapse__play-grande,
.lapse--iniciado .lapse__play-grande { opacity: 0; }

/* Esperando a que acaben de llegar las fotos tras pulsar play: el botón, a media luz */
.lapse--esperando .lapse__play-grande { opacity: 0.35; }

/* "Cargando… 45 %" bajo el botón grande (vacío cuando ya están todas) */
.lapse__carga {
  position: absolute;
  top: calc(50% + 46px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.lapse--reproduciendo .lapse__carga { display: none; }

/* Lo que se va cargando: una raya fina bajo la imagen, que desaparece al terminar */
.lapse__progreso {
  height: 3px;
  background: #e6e6e0;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 3px;
  transition: opacity .6s;
}

.lapse__progreso i {
  display: block;
  height: 100%;
  width: 0;
  background: #8aa3bd;
}

.lapse__progreso.completo { opacity: 0; }

.lapse__controles {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.lapse__controles > button:not(.btn-exportar-png) {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d5d5cd;
  border-radius: 50%;
  background: #fff;
  color: #444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lapse__controles > button:not(.btn-exportar-png):hover { border-color: #b9b9ae; }

/* El de guardar/compartir, como en las gráficas: el icono solo, sin círculo. Sus colores
   los pone ExportarPng; aquí, por si la página no lo carga. */
.lapse__controles > .btn-exportar-png {
  flex: none;
  display: inline-flex;
  padding: 2px;
  margin-left: 2px;
  border: 0;
  background: none;
  color: #8a8a8a;
  cursor: pointer;
  line-height: 0;
}

.lapse__controles > .btn-exportar-png:hover { color: #337ab7; }

.lapse__controles > .btn-exportar-png svg { width: 18px; height: 18px; fill: none; }

.lapse__controles svg { width: 16px; height: 16px; fill: currentColor; }

.lapse__controles input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: #8aa3bd;
}

.lapse__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.lapse__info {
  font-size: 12px;
  color: #777;
  text-align: left;
}

/* Crear y compartir el vídeo: un recuadro bajo los controles con el progreso y, al acabar,
   Compartir / Descargar */
.lapse__compartir {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #e6e6e0;
  border-radius: 8px;
  background: #fbfaf6;
  font-size: 13px;
  color: #555;
}

.lapse__compartir p { margin: 0; }

.lapse__compartir-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.lapse__compartir button[data-video="compartir"] {
  background: #f3f1e8;
  border-color: #b9b9ae;
  color: #333;
  font-weight: bold;
}

.lapse__aviso {
  padding: 40px 10px;
  font-size: 13px;
  color: #777;
}

.lapse__icono-sol {
  display: block;
  width: 20px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media screen and (max-width: 480px) {
  /* Los ocho modos, en una sola línea: letra y relleno algo menores */
  .lapse__modos { flex-wrap: nowrap; gap: 4px; }
  .lapse__modos button {
    font-size: 11px;
    padding: 6px 7px;
    white-space: nowrap;
  }
  .lapse__pie { justify-content: center; }
  .lapse__info { text-align: center; }
}

/* Móviles muy estrechos (320 px): un punto más apretados para que sigan en una línea */
@media screen and (max-width: 360px) {
  .lapse__modos { gap: 3px; }
  .lapse__modos button { font-size: 10px; padding: 5px 5px; }
  .lapse__icono-sol { width: 17px; height: 11px; }
}

/* Guardar la imagen fija con los datos del tiempo (js/webcam/captura_datos.js). El botón,
   como el de guardar del timelapse: el icono solo, al final de la fila de capturas aunque
   estas lleguen después. */
.webcam-capturas > button.btn-exportar-png {
  order: 99;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #8a8a8a;
  line-height: 0;
}

.webcam-capturas > button.btn-exportar-png:hover { color: #337ab7; }

.webcam-capturas > button.btn-exportar-png svg { width: 18px; height: 18px; fill: none; }

.webcam-guardar {
  max-width: 800px;
  margin: 12px auto 0;
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
}

.webcam-guardar__estado { margin: 0 0 8px !important; }
.webcam-guardar__estado[hidden] { display: none; }

.webcam-guardar button[data-video="datos"].activo {
  background: #f3f1e8;
  border-color: #b9b9ae;
  color: #333;
  font-weight: bold;
}

.webcam-guardar__opciones { margin-top: 10px; }

.webcam-guardar__datos {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.webcam-guardar__datos button {
  font-size: 12px;
  padding: 5px 10px;
}

.webcam-guardar__datos button.activo {
  background: #f3f1e8;
  border-color: #b9b9ae;
  color: #333;
  font-weight: bold;
}

.webcam-guardar__vista {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
}

.webcam-guardar__vista[hidden] { display: none; }

/* «Con etiqueta | Con icono | Solo el dato»: es una elección de una sola opción, así que
   va como un selector segmentado (botones pegados, la elegida rellena en gris oscuro) y
   no como las pastillas de los datos, que se marcan varias */
/* Los dos selectores (formato y posición), en una fila que baja a dos si no cabe */
.webcam-guardar__segmentados {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 12px;
}

/* Dónde van los datos: una miniatura de la foto con un hueco por sitio (la franja de abajo
   y una pastillita a cada lado arriba, en el centro y abajo). El elegido, relleno. */
/* La miniatura con su etiqueta encima */
.webcam-guardar__ubicacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #777;
}

.webcam-guardar__mapa {
  position: relative;
  width: 120px;
  height: 90px;   /* 4:3, como la foto; los huecos, de buen tamaño para el dedo */
  border: 1px solid #b9b9ae;
  border-radius: 6px;
  background: #fff;
}

.webcam-guardar .webcam-guardar__mapa button {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #d9d7ce;
  cursor: pointer;
}

.webcam-guardar .webcam-guardar__mapa button:hover { background: #a9a79d; }
.webcam-guardar .webcam-guardar__mapa button.activo { background: #5f5f5a; }

.webcam-guardar .webcam-guardar__hueco--abajo { left: 5px; right: 5px; bottom: 4px; height: 16px; }

.webcam-guardar [class*="webcam-guardar__hueco--izq"],
.webcam-guardar [class*="webcam-guardar__hueco--der"] { width: 26px; height: 19px; }

.webcam-guardar [class*="webcam-guardar__hueco--izq"] { left: 5px; }
.webcam-guardar [class*="webcam-guardar__hueco--der"] { right: 5px; }

.webcam-guardar [class*="-arriba"] { top: 4px; }
.webcam-guardar [class*="-centro"] { top: 25px; }
.webcam-guardar .webcam-guardar__hueco--izq-abajo,
.webcam-guardar .webcam-guardar__hueco--der-abajo { top: 46px; }

.webcam-guardar__estilos {
  display: inline-flex;
  border: 1px solid #b9b9ae;
  border-radius: 6px;
  overflow: hidden;
}

.webcam-guardar .webcam-guardar__estilos button {
  font-size: 12px;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #555;
}

.webcam-guardar .webcam-guardar__estilos button + button { border-left: 1px solid #b9b9ae; }

.webcam-guardar .webcam-guardar__estilos button:hover { background: #f3f1e8; }

.webcam-guardar .webcam-guardar__estilos button.activo {
  background: #5f5f5a;
  color: #fff;
  font-weight: bold;
}

/* El mismo recuadro dentro del panel del timelapse (la foto en pausa): ya va en su caja */
.webcam-guardar--dentro { margin: 0; max-width: none; }