*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#f3f4f6;
    color:#222;

}

.topbar{

    position:sticky;
    top:0;

    background:rgb(255, 255, 255);

    padding:15px 25px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

    z-index:999;

}

.top-buttons{

    display:flex;
    gap:10px;

}

button{

    cursor:pointer;

    border:none;

    padding:12px 18px;

    border-radius:8px;

    background:#15b42b;

    color:white;

    font-size:15px;

}

button:hover{

    background:#096e17;

}

.controls{

    display:flex;

    gap:22px;

    align-items:flex-end;
    padding:10px 20px;

}

.nombre-group{

    width:220px;

}

.codigo-group{

    width: 500px;

}

.input-group{

    display:flex;
    flex-direction:column;
    gap:8px;

}

input{

    padding:10px;

    font-size:12px;

}

.codigo-container{

    display:flex;
    gap:10px;


}

.codigo-container input{

    flex:1;

}

.editor{

    display:grid;

    grid-template-columns:450px 1fr;

    gap:30px;

    padding:20px;

}

#plantilla{

    position:relative;

    width:420px;

}

.fondo-carta{

    width:100%;
    display:block;

}

#gridCarta{

    position: absolute;

    top: 50px;
    left: 22px;

    right: 22px;
    bottom: 42px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);

    gap: 15px;

}

.casilla{

    border: 1.6px solid black;


    border-radius:0px;

}

.casilla img{

    width:100%;

    height:100%;

    object-fit:fill;

    display:block;

}

.banco-container{

    background:white;

    padding:20px;

    border-radius:10px;

}

#bancoCartas{

    margin-top:20px;

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(70px,1fr));

    gap:12px;

}

.cartaBanco{

    width:60px;

    cursor:pointer;

    transition:.2s;

}

.cartaBanco:hover{

    transform:scale(1.05);

}

@media(max-width:900px){

    .editor{

        grid-template-columns:1fr;

    }

    #plantilla{

        width:100%;
        max-width:420px;
        margin:auto;

    }

    .codigo-container{

        flex-direction:column;

    }

    .topbar{

        flex-direction:column;
        gap:15px;

    }

    .top-buttons{

        width:100%;

    }

    .top-buttons button{

        flex:1;

    }

}


.cartaPlantilla{

    width:100%;
    height:100%;

    object-fit:contain;

    cursor:grab;

}

#zonaExportar{

width: fit-content;

}



#tituloExportacion{

    font-family: "Times New Roman", serif;


    display: none;

    position: absolute;

    top: 18px;

    right: 20px;

    margin: 0;

    color: black;

    font-size: 20px;

    font-weight: bold;

    z-index: 10;

}


.menu-exportar{

    position:absolute;

    top:calc(100% + 8px);

    right:0;

    display:none;
    flex-direction:column;

    background:#ffffff;

    border:1px solid #ddd;

    border-radius:8px;

    box-shadow:0 6px 16px rgba(0,0,0,.15);

    overflow:hidden;

    min-width:220px;

    z-index:2000;

}

.menu-guardar{

    position: relative;

    display: inline-block;

}

.menu-exportar{

    position: absolute;

    top: calc(100% + 8px);

    right: 0;

    display: none;

    flex-direction: column;

    background: #ffffff;

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 6px 16px rgba(0,0,0,.15);

    overflow: hidden;

    min-width: 220px;

    z-index: 2000;

}

.menu-exportar button{

    width:100%;

    padding:12px;

    border:none;

    background:white;

    color:#333;

    cursor:pointer;

    text-align:left;

}
.menu-exportar button:hover{

    background: #9af79f;

}

.menu-exportar.mostrar{

    display: flex;

}

/*
=========================================
Selecciones
=========================================
*/

.seleccionCarta{

    outline:4px solid #2196f3;

    outline-offset:2px;

}