/*+++++++ UNIR CONCEPTOS - ACTIVIDAD +++++++*/

/* TITULO */
.titulo-actividad{
  color:#21202E;
  font-weight:bold;
}

/* TEXTO */
  .instruccion{
  text-align:center;
  margin-bottom:30px;
  font-size:22px !important;     
  font-weight:600 !important; 
  color:#ffffff;
}

/* CONTENEDOR */

.actividad-unir .contenedor{
max-width:900px;
margin:auto;
position:relative;

user-select:none;
}

/* COLUMNAS */

.actividad-unir .columnas{
display:flex;
justify-content:space-between;
gap:120px;
}

/* TARJETAS */

.actividad-unir .item{
border:2px solid #0EA597;
padding:16px;
margin-bottom:18px;
border-radius:8px;
/* background:white; */
cursor:pointer;
transition:.25s;
position:relative;
}

.item:hover{
background:#000000;
transform:scale(1.02);
}

/* PUNTOS DE CONEXION */

.item::after{
content:"";
position:absolute;
right:-10px;
top:50%;
transform:translateY(-50%);
width:10px;
height:10px;
background:#0EA597;
border-radius:50%;
}

.derecha .item::after{
left:-10px;
right:auto;
}

/* ESTADOS */

.item.conectado{
background:#0EA597;
cursor:default;
}

/* CANVAS */

#lineas{
position:absolute;
top:0;
left:0;
pointer-events:none;
}

/* BOTONES */

.actividad-unir .botones{
text-align:center;
margin-top:30px;
}

.actividad-unir button{
padding:12px 25px;
margin:10px;
/* border:2px solid #0EA597; */
background:#656d6c;
color:#ffffff;
font-weight:bold;
cursor:pointer;
transition:.2s;
}

button:hover{
background:#0EA597;
color:white;
}

#resultado{
font-size:22px;
margin-top:15px;
font-weight:bold;
}