@import 'style.css';

.PrincipalMerketPlace .tarjeta-merketplace {
    position: relative;
    background-color: var(--color-comisiones-tarjeta);
    border-radius: 10px;
    border: 1px solid #cccccc;
    padding: 7px;
    width: 100%;
    margin-bottom: 0.6rem;
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

    .PrincipalMerketPlace .tarjeta-merketplace:hover {
        box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.2);
    }

/*-----------------------------------------------------------------------------------------------*/
.PrincipalMerketPlace .card-iconos-merketplace {
    position: relative;
    background-color: var(--color-comisiones-tarjeta);
    border-radius: 10px;
    border: 1px dashed #cccccc;
    padding: 7px;
    text-align: center;
    width: 100%;
    max-width: 45px;
    box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 0.6rem;
}

.PrincipalMerketPlace .style-iconos-card-merketplace svg {
    fill: var(--color-ico-maestro-productos);
    width: 32px;
    height: 32px;
    cursor: pointer;
}

    .PrincipalMerketPlace .style-iconos-card-merketplace svg:hover {
        fill: var(--color-ico-maestro-productos-hover);
    }
/*-----------------------------------------------------------------------------------------------*/


.PrincipalMerketPlace .card-style-tabla-merketplace {
    position: relative;
    background-color: var(--color-comisiones-tarjeta);
    border-radius: 10px;
    border: 1px dashed #cccccc;
    border-left: 4px solid var(--color-themes-t1);
    padding: 7px;
    width: 99%;
    margin-bottom: 0.6rem !important;
    margin-left: 0.6rem;
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

    .PrincipalMerketPlace .card-style-tabla-merketplace.color-rojo {
        border-left: 4px solid var(--color-danger-darkt);
    }

    .PrincipalMerketPlace .card-style-tabla-merketplace:hover {
        box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.2);
    }

.PrincipalMerketPlace .style-icono-tabla-row svg {
    fill: var(--color-gray-light);
    width: 32px;
    height: 32px;
    transition: fill 0.5s ease, transform 0.5s ease; /* Transición para el color y el movimiento */
}

.PrincipalMerketPlace .style-icono-tabla-row:hover svg {
    fill: var(--color-themes-t1);
    transform: translateX(-3px); /* Mueve el ícono 10px hacia la izquierda */
}

.PrincipalMerketPlace .text-table {
    color: var(--color-gray-light);
}

.PrincipalMerketPlace .icono-absolute-cantidad {
    position: absolute;
    top: -10px;
    right: -5px;
    font-size: 1.2rem;
    width: 2.4rem;
    height: 2.4rem; /* 🔹 igual que el width */
    background-color: var(--color-themes-t1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white; /* opcional: contraste */
    box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.2);
}

.drop-zone-adjuntar-global {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 2px dashed #ccc;
    width: 300px;
    height: 350px;
    text-align: center;
    font-size: 18px;
    border-radius: 5%;
    background: var(--color-white);
    cursor: pointer;
    transition: background 0.5s ease, fill 0.5s ease; /* Transición para el color y el movimiento */
}

    .drop-zone-adjuntar-global span {
        color: var(--color-themes-t5);
    }

    .drop-zone-adjuntar-global svg {
        padding-top: 5px;
        fill: var(--color-themes-t5);
        width: 12rem;
        height: 12rem;
    }

    .drop-zone-adjuntar-global h1 {
        color: var(--color-themes-t5);
        font-size: 16px !important;
        line-height: 1.5;
        font-weight: bold;    }

    .drop-zone-adjuntar-global:hover {
        background: var(--color-themes-t2);
    }

        .drop-zone-adjuntar-global:hover h1 {
            color: var(--color-white);
        }

        .drop-zone-adjuntar-global:hover svg {
            fill: var(--color-white);
        }

.style-font-canvas h3 {
    color: var(--color-gray-light) !important;
}

.PrincipalMerketPlace .style-icono-global:hover svg {
    fill: var(--color-themes-t1);
}

.style-offcanvas-historico svg {
    width: 4rem;
    height: 4rem;
    fill: var(--color-themes-iconos-t7);
}

.PrincipalMerketPlace .card-style-tabla-merketplace.color-rojo-historico {
    border-left: 4px solid var(--color-danger-darkt);
}

.PrincipalMerketPlace .card-style-tabla-merketplace.color-verde-historico {
    border-left: 4px solid var(--color-themes-iconos-t7);
}

.PrincipalMerketPlace .icono-absolute-estado {
    position: absolute;
    top: 7px;
    right: 7px;
    font-size: 1.2rem;
    width: 2.4rem;
    height: 2.4rem; /* 🔹 igual que el width */
    background-color: var(--color-themes-iconos-t7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white; /* opcional: contraste */
    box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.2);
}

    .PrincipalMerketPlace .icono-absolute-estado.refresh-rojo {
        background-color: var(--color-danger-darkt);
    }

    .PrincipalMerketPlace .icono-absolute-estado.refresh-rojo svg {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 1.5rem;
        height: 1.5rem;
    }

        .PrincipalMerketPlace .icono-absolute-estado.refresh-rojo:hover svg {
            fill:var(--color-white)
        }

        .PrincipalMerketPlace .icono-absolute-estado.refresh-rojo .spinner-border {
            position: absolute;
            top: 2px;
            right: 2px;
        }

        .PrincipalMerketPlace .icono-absolute-estado.refresh-rojo .spinner-border svg {
            fill: var(--color-white) !important;
        }