#mark-digital{
    margin:0;
    font-family:Arial;
    background:#000000;
    /* color:white; */
    user-select:none;
}

#mark-digital .mark-contenedor{
    /* width:1500px; */
    margin:auto;
    position:relative;
    min-height:500px;
}

#mark-digital .mark-columnas{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center;
    /* margin-top:60px; */
    position:relative;
    z-index:20;
}

#mark-digital .mark-item{
    background:#000000;
    border:1px solid #5e5b5b;
    padding:10px 10px;
    margin:16px 0;
    border-radius:10px;
    cursor:pointer;
    transition:.25s;
    /* max-width:360px; */
}

#mark-digital .mark-item.activo{
    box-shadow:0 0 12px #0EA597;
}

#mark-digital .mark-item.usado{
    /* opacity:.5; */
    background:#000000;

    color:#fff;
}

#mark-digital #canvas-digital{
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
     z-index:10;
}

#mark-digital .mark-botones{
    text-align:center;
    margin:30px;
}

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

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

/* CORRECTA */

#mark-digital .correcta{

    background:#0ea5979e !important;

    color:#fff;
}

/* INCORRECTA */

#mark-digital .incorrecta{

    background:#656d6cb3 !important;

    color:#fff;
}

/* RESULTADO */

#mark-digital .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);
}

#mark-digital .disabled-btn{

    opacity:.4;

    pointer-events:none;

    background:#555 !important;

    cursor:not-allowed;
}

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

@media(max-width:768px){

/* CONTENEDOR */
#mark-digital .mark-contenedor{

    width:100%;

    padding:0 10px;

    min-height:auto;
}

/* INSTRUCCION */
#mark-digital .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;

    margin-bottom:25px;
}

/* OCULTAR CANVAS */
#mark-digital #canvas-digital{

    display:none;
}

/* COLUMNAS */
#mark-digital .mark-columnas{

    grid-template-columns:1fr;

    gap:30px;
}

/* IZQUIERDA */
#mark-digital #mark-izquierda{

    display:flex;

    flex-direction:column;

    gap:14px;
}

/* DERECHA */
#mark-digital #mark-derecha{

    display:flex;

    flex-direction:column;

    gap:14px;
}

/* ITEMS */
#mark-digital .mark-item{

    width:100%;

    margin:0;

    padding:10px;

    border-radius:16px;

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

    line-height:1.5;

    touch-action:manipulation;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.02)
    );

    backdrop-filter:blur(10px);

    box-shadow:0 8px 24px rgba(0,0,0,.18);

    transition:.25s ease;
}

/* =========================
   COLORES IZQUIERDA
========================= */

#mark-digital .color-1{

    border:3px solid #ffffff;

    box-shadow:0 0 12px rgba(255,122,0,.25);
}

#mark-digital .color-2{

    border:3px solid #31d88a;

    box-shadow:0 0 12px rgba(0,191,255,.25);
}

#mark-digital .color-3{

    border:3px solid #a5dd77;

    box-shadow:0 0 12px rgba(217,70,239,.25);
}

/* ACTIVO */

#mark-digital .mark-item.activo{

    opacity:1;

    transform:scale(1.02);
}

/* HERENCIA DE COLORES */

#mark-digital .borde-1{

    border:3px solid #ffffff;
}

#mark-digital .borde-2{

    border:3px solid #31d88a;
}

#mark-digital .borde-3{

    border:3px solid #a5dd77;
}



/* ITEM USADO */
#mark-digital .mark-item.usado{

    background:#000000;

    color:#fff;
}

/* EFECTO TOUCH */
#mark-digital .mark-item:active{

    transform:scale(.98);
}

/* BOTONES */
#mark-digital .mark-botones{

    position:sticky;

    bottom:0;

    background:#21202E;

    padding:15px 10px;

    margin:20px -10px 0;

    display:flex;

    gap:10px;

    z-index:100;
}

/* BOTONES */
#mark-digital .btn-accion{

    flex:1;

    margin:0;

    border-radius:14px;

    padding:14px 10px;

    font-size:15px;
}

/* BOTON BACK */
#mark-digital .btn-back{

    width:42px;

    height:42px;

    border-radius:12px;
}
}