.j-admin-design-cards{

    display:grid;

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

    gap:25px;

    margin-top:35px;

}

.j-baraja-card{

    background:#FFFFFF;

    border:1px solid #E5E5E5;

    border-radius:10px;

    padding:18px;

}

.j-baraja-preview{
    height:230px;

    border:2px dashed #DDD;
    border-radius:8px;

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

    overflow:hidden;

}

.j-baraja-placeholder{
    color:#999;
    font-weight:600;
}
.j-baraja-numero,
.j-baraja-nombre {
    width: 100%;
    height: 42px;
    border: 1px solid #DDD;
    border-radius: 8px;
    padding: 0 12px;
    margin-bottom: 15px;
    background: #FFF;
    color: #9A9A9A;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.j-baraja-numero {
    margin-top: 15px;
    color: #9A9A9A;
    justify-content: center;
}

.j-baraja-nombre {
    outline: none;
    transition: border-color 0.2s;
}

.j-baraja-nombre:focus {
    border-color: #24B8C8;
}
.j-baraja-preview img,
.j-baraja-preview-image{

    display:block;

    max-width:100%;
    max-height:100%;

    width:100%;
    height:100%;

    object-fit:contain;

}


.j-baraja-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    margin-top: 10px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    color: #24B8C8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

.j-baraja-delete:hover {
    background: #24B8C8;
    border-color: #24B8C8;
    color: #FFFFFF;
}

/* =====================================================
   VISTA PREVIA DE UBICACIÓN - SOLO MODO LIBRE
===================================================== */

/* Fondo rosa SOLO en modo libre */
.j-grid-preview .cell.libre-fondo {
    background: #FA299C !important;
    position: relative;
    overflow: hidden;
}

/* Icono de relleno para modo libre */
.j-grid-preview .cell .j-per-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
}

/* Asegurar que las celdas tengan posición relativa */
.j-grid-preview .cell {
    position: relative;
    overflow: hidden;
}