/* CONSTRUYE ECOSISTEMA - ACTIVIDAD */

/* CONTENEDOR */
.contenedor-actividad{
  max-width:900px;
  margin:40px auto;
}

/* 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;
}

/* CATEGORIAS */

.actividad-construye .categorias{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-bottom:40px;
}

.categoria{
border:2px dashed #0EA597;
border-radius:8px;
padding:15px;
min-height:120px;
}

.categoria h3{
margin-top:0;
color:#0EA597;
}

/* TARJETAS */

.tarjetas{
display:flex;
flex-wrap:wrap;
gap:15px;
justify-content:center;
}

.actividad-construye .card{
padding:9px 10px;
border:2px solid #0EA597;
border-radius:6px;
color:rgb(0, 0, 0);
background:white;
cursor:grab;
}

.card:hover{
background:#878f8e;
opacity:0.6;
}

/* BOTONES */

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

.actividad-construye .btn-accion{
 padding:12px 25px;
    margin:10px;
    border:none;
    background:#656d6c;
    color:white;
    font-weight:bold;
    cursor:pointer;
}

.btn-accion:hover{
background:#0EA597;
color:white;
}

/* BOTON DESACTIVADO */
.actividad-construye button:disabled{
  background:#d3aab1; /* tono opaco del rojo */
  cursor:not-allowed;
  opacity:0.6;
}

/* RESULTADO */

.actividad-construye .resultado-mark{

    margin-top:20px;

    text-align:center;

    font-size:22px;

    font-weight:700;

    color:#fff;

    background:
    linear-gradient(
        145deg,
        rgba(14,165,151,.18),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(14,165,151,.25);

    border-radius:16px;

    padding:16px;

    backdrop-filter:blur(10px);

    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

/* BOTON BLOQUEADO */

.actividad-construye .disabled-btn{

    opacity:.45;

    pointer-events:none;

    cursor:not-allowed;

    background:#555 !important;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

/* CONTENEDOR */
.contenedor-actividad{
    width:100%;
    padding:0 12px;
    margin:20px auto;
}

/* INSTRUCCION */
.instruccion{
    flex-direction:column;
    align-items:flex-start !important;
    gap:12px;
    text-align:left;
    font-size:clamp(14px,4vw,17px) !important;
    line-height:1.5;
}

/* CATEGORIAS */
.actividad-construye .categorias{

    grid-template-columns:1fr;
    gap:18px;
}

/* DROP ZONES */
.categoria{

    min-height:140px;

    padding:18px;

    border-radius:16px;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(10px);
}

/* TITULO CATEGORIA */
.categoria h3{

    font-size:clamp(18px,5vw,22px);

    margin-bottom:15px;
}

/* TARJETAS */
.tarjetas{

    gap:12px;

    margin-top:20px;
}

/* CARD */
.actividad-construye .card{

    width:100%;

    padding:16px;

    font-size:clamp(14px,4vw,17px);

    border-radius:14px;

    text-align:center;

    font-weight:600;

    touch-action:none;
}

/* BOTONES */
.actividad-construye .actividad-botones{

    position:sticky;

    bottom:0;

    background:#21202E;

    padding:15px 10px;

    margin:25px -12px 0;

    display:flex;

    gap:10px;

    z-index:50;
}

/* BOTONES */
.actividad-construye .btn-accion{

    flex:1;

    margin:0;

    border-radius:12px;

    font-size:15px;

    padding:14px 10px;
}

/* BOTON BACK */
.btn-back{

    width:42px;
    height:42px;

    border-radius:12px;
}
}