/* ============================================================
   COMPARADOR ANTES / DESPUES - aspecto compartido
   Va SIEMPRE junto al mecanismo, que vive en estilos.css (.ba) y en
   js/main.js. Este archivo solo cambia como SE VE dentro del sistema
   nuevo: sin esquinas redondeadas, con la linea divisoria dorada de
   1px y el control cuadrado en vez del circulo con sombra.

   Esta en su propio archivo, y no dentro del CSS de una pagina,
   porque lo usan proyectos.html y las paginas de proyecto de
   remodelacion. Cuando el aspecto de un componente vive dentro del
   archivo de UNA pagina, la siguiente que lo use aparece sin
   estilos: es exactamente lo que le paso al lightbox.

   Las paginas que lo cargan ponen la PROPORCION de la caja, porque
   ahi si cambia segun el contexto (una banda ancha no pide lo mismo
   que una cuadricula de cuatro).
   ============================================================ */

.ba{border-radius:var(--radius);border:0;background:var(--color-bg-dark)}

/* Aviso visible cuando el deslizador tiene el foco del teclado: el
   <input> es transparente, asi que su contorno no se veria. */
.ba:focus-within{outline:1px solid var(--color-accent-gold);outline-offset:var(--space-1)}

/* La linea divisoria: 1px dorado, sin nudo redondo ni sombra */
.ba .handle{width:1px;background:var(--color-accent-gold);transform:none}
.ba .knob{width:auto;height:auto;border-radius:var(--radius);padding:var(--space-1) var(--space-2);background:rgba(15,15,17,.72);border:1px solid var(--color-accent-gold);color:var(--color-accent-gold);box-shadow:none;font-size:var(--text-label);line-height:1}

/* Etiquetas ANTES y DESPUES abajo, una en cada esquina */
.ba .tag{top:auto;bottom:var(--space-2);border-radius:var(--radius);background:rgba(15,15,17,.72);font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--tracking-label);padding:var(--space-1) var(--space-2);color:var(--color-text-on-dark)}
.ba .t-antes{left:var(--space-2)}
.ba .t-despues{right:var(--space-2);color:var(--color-text-on-dark)}

@media(max-width:880px){
  /* En pantalla pequena las etiquetas se pegan mas a la esquina */
  .ba .tag{bottom:var(--space-1)}
  .ba .t-antes{left:var(--space-1)}
  .ba .t-despues{right:var(--space-1)}
}

/* ============================================================
   MENOS MOVIMIENTO
   El comparador no lleva ninguna transicion a proposito: al
   arrastrar, la linea tiene que seguir al dedo sin retraso. Esta
   regla es la red de seguridad por si alguien anade una despues.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .ba,.ba .handle,.ba .knob,.ba .after{transition:none!important}
}