/*
==========================================
PM UI Framework
Badges
Version: 0.1.0
==========================================
*/

/* ==========================================
   BADGE BASE
========================================== */

.pm-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;

    padding:.35rem .75rem;

    font-family:inherit;
    font-size:.75rem;
    font-weight:600;
    line-height:1;

    white-space:nowrap;

    border-radius:var(--pm-radius-pill);

    border:1px solid transparent;

    background:var(--pm-primary);

    color:#fff;

    text-decoration:none;

    user-select:none;

    vertical-align:middle;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

    box-shadow:var(--pm-shadow-sm);
}

.pm-badge svg{
    width:.9em;
    height:.9em;
    flex-shrink:0;
}

.pm-badge:hover{
    transform:translateY(-1px);
}

.pm-badge:focus-visible{
    outline:3px solid rgba(25,118,210,.25);
    outline-offset:2px;
}


/* ==========================================
   TAMAÑOS
========================================== */

.pm-badge-sm{

    padding:.25rem .55rem;

    font-size:.68rem;
}

.pm-badge-lg{

    padding:.5rem 1rem;

    font-size:.9rem;
}

.pm-badge-xl{

    padding:.65rem 1.25rem;

    font-size:1rem;
}


/* ==========================================
   BADGE SOLO ICONO
========================================== */

.pm-badge-icon{

    width:2rem;
    height:2rem;

    padding:0;

    border-radius:50%;
}
/* ==========================================
   COLORES
========================================== */

.pm-badge-primary{
    background:var(--pm-primary);
    color:#fff;
}

.pm-badge-secondary{
    background:var(--pm-secondary);
    color:#fff;
}

.pm-badge-success{
    background:var(--pm-success);
    color:#fff;
}

.pm-badge-warning{
    background:var(--pm-warning);
    color:#212529;
}

.pm-badge-danger{
    background:var(--pm-danger);
    color:#fff;
}

.pm-badge-info{
    background:var(--pm-info);
    color:#fff;
}

.pm-badge-dark{
    background:var(--pm-dark);
    color:#fff;
}

.pm-badge-light{
    background:var(--pm-light);
    color:var(--pm-dark);
    border-color:var(--pm-border-color);
}

/* ==========================================
   HOVER
========================================== */

.pm-badge-primary:hover{
    background:var(--pm-primary-dark);
}

.pm-badge-secondary:hover{
    filter:brightness(.92);
}

.pm-badge-success:hover{
    filter:brightness(.92);
}

.pm-badge-warning:hover{
    filter:brightness(.96);
}

.pm-badge-danger:hover{
    filter:brightness(.92);
}

.pm-badge-info:hover{
    filter:brightness(.92);
}

.pm-badge-dark:hover{
    filter:brightness(.88);
}

.pm-badge-light:hover{
    background:#f3f4f6;
}
/* ==========================================
   VARIANTES
========================================== */

/* Badge Outline */

.pm-badge-outline{
    background:transparent;
    border:1px solid currentColor;
    box-shadow:none;
}

/* Badge Soft */

.pm-badge-soft{
    box-shadow:none;
    border-color:transparent;
}

.pm-badge-soft.pm-badge-primary{
    background:rgba(46,125,50,.12);
    color:var(--pm-primary);
}

.pm-badge-soft.pm-badge-secondary{
    background:rgba(25,118,210,.12);
    color:var(--pm-secondary);
}

.pm-badge-soft.pm-badge-success{
    background:rgba(40,167,69,.12);
    color:var(--pm-success);
}

.pm-badge-soft.pm-badge-warning{
    background:rgba(255,193,7,.18);
    color:#8a6d00;
}

.pm-badge-soft.pm-badge-danger{
    background:rgba(220,53,69,.12);
    color:var(--pm-danger);
}

.pm-badge-soft.pm-badge-info{
    background:rgba(23,162,184,.12);
    color:var(--pm-info);
}

.pm-badge-soft.pm-badge-dark{
    background:rgba(52,58,64,.10);
    color:var(--pm-dark);
}


/* Badge Pill */

.pm-badge-pill{
    border-radius:999px;
}


/* Badge Cuadrado */

.pm-badge-square{
    border-radius:var(--pm-radius-sm);
}


/* Badge Redondeado */

.pm-badge-rounded{
    border-radius:var(--pm-radius-md);
}


/* Badge Gradient */

.pm-badge-gradient.pm-badge-primary{
    background:linear-gradient(
        135deg,
        var(--pm-primary),
        var(--pm-primary-dark)
    );
}

.pm-badge-gradient.pm-badge-secondary{
    background:linear-gradient(
        135deg,
        var(--pm-secondary),
        #42a5f5
    );
}

.pm-badge-gradient.pm-badge-success{
    background:linear-gradient(
        135deg,
        var(--pm-success),
        #4caf50
    );
}

.pm-badge-gradient.pm-badge-warning{
    background:linear-gradient(
        135deg,
        #ffd54f,
        var(--pm-warning)
    );

    color:#212529;
}

.pm-badge-gradient.pm-badge-danger{
    background:linear-gradient(
        135deg,
        #ef5350,
        var(--pm-danger)
    );
}
/* ==========================================
   BADGES PREMIUM
========================================== */

/* ==========================================
   BEST SELLER
========================================== */

.pm-badge-best{

    background:linear-gradient(
        135deg,
        #FFD54F,
        #F9A825
    );

    color:#3E2723;

    font-weight:700;

    box-shadow:
        0 4px 12px rgba(249,168,37,.28);
}


/* ==========================================
   AMAZON CHOICE
========================================== */

.pm-badge-choice{

    background:linear-gradient(
        135deg,
        #232F3E,
        #131A22
    );

    color:#FF9900;

    font-weight:700;

    box-shadow:
        0 4px 12px rgba(19,26,34,.30);
}


/* ==========================================
   RECOMENDADO
========================================== */

.pm-badge-editor{

    background:linear-gradient(
        135deg,
        #2E7D32,
        #1B5E20
    );

    color:#fff;

    font-weight:700;
}


/* ==========================================
   TOP VENTA
========================================== */

.pm-badge-top{

    background:linear-gradient(
        135deg,
        #E53935,
        #C62828
    );

    color:#fff;

    font-weight:700;
}


/* ==========================================
   NUEVO
========================================== */

.pm-badge-new{

    background:linear-gradient(
        135deg,
        #26C6DA,
        #0097A7
    );

    color:#fff;

    font-weight:700;
}


/* ==========================================
   OFERTA
========================================== */

.pm-badge-sale{

    background:linear-gradient(
        135deg,
        #EC407A,
        #C2185B
    );

    color:#fff;

    font-weight:700;
}


/* ==========================================
   POPULAR
========================================== */

.pm-badge-hot{

    background:linear-gradient(
        135deg,
        #FF7043,
        #E64A19
    );

    color:#fff;

    font-weight:700;
}


/* ==========================================
   PREMIUM
========================================== */

.pm-badge-premium{

    background:linear-gradient(
        135deg,
        #6A1B9A,
        #4A148C
    );

    color:#fff;

    font-weight:700;
}


/* ==========================================
   DESTACADO
========================================== */

.pm-badge-featured{

    background:linear-gradient(
        135deg,
        #1976D2,
        #0D47A1
    );

    color:#fff;

    font-weight:700;
}
/* ==========================================
   POSICIONAMIENTO
========================================== */

/*
   El contenedor padre debe tener:
   position: relative;
*/

.pm-badge-floating{

    position:absolute;

    z-index:20;
}


/* ==========================================
   ESQUINAS
========================================== */

.pm-badge-top-left{

    top:1rem;
    left:1rem;
}

.pm-badge-top-right{

    top:1rem;
    right:1rem;
}

.pm-badge-bottom-left{

    bottom:1rem;
    left:1rem;
}

.pm-badge-bottom-right{

    bottom:1rem;
    right:1rem;
}


/* ==========================================
   CENTRADO
========================================== */

.pm-badge-top-center{

    top:1rem;

    left:50%;

    transform:translateX(-50%);
}

.pm-badge-bottom-center{

    bottom:1rem;

    left:50%;

    transform:translateX(-50%);
}


/* ==========================================
   CINTA SUPERIOR
========================================== */

.pm-badge-ribbon{

    position:absolute;

    top:1rem;

    right:-2.25rem;

    width:10rem;

    text-align:center;

    transform:rotate(45deg);

    border-radius:0;

    box-shadow:var(--pm-shadow-md);

    z-index:25;
}


/* ==========================================
   STICKY
========================================== */

.pm-badge-sticky{

    position:sticky;

    top:1rem;

    z-index:50;
}


/* ==========================================
   APILADO
========================================== */

.pm-badge-stack{

    display:flex;

    flex-direction:column;

    gap:.5rem;

    position:absolute;

    top:1rem;

    left:1rem;

    z-index:20;
}

.pm-badge-stack .pm-badge{

    width:max-content;
}
/* ==========================================
   EFECTOS Y ANIMACIONES
========================================== */

/* Hover Elevation */

.pm-badge-hover:hover{
    transform:translateY(-2px);
    box-shadow:var(--pm-shadow-md);
}


/* Hover Scale */

.pm-badge-scale:hover{
    transform:scale(1.05);
}


/* Glow */

.pm-badge-glow{
    box-shadow:
        0 0 0 rgba(0,0,0,0);
}

.pm-badge-glow:hover{
    box-shadow:
        0 0 18px rgba(255,193,7,.45);
}


/* Pulse */

.pm-badge-pulse{
    animation:pmBadgePulse 2s infinite;
}

@keyframes pmBadgePulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.06);
    }

    100%{
        transform:scale(1);
    }

}


/* Float */

.pm-badge-float{
    animation:pmBadgeFloat 3s ease-in-out infinite;
}

@keyframes pmBadgeFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-3px);
    }

    100%{
        transform:translateY(0);
    }

}


/* Shine */

.pm-badge-shine{

    position:relative;

    overflow:hidden;
}

.pm-badge-shine::after{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:60%;

    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

    transform:skewX(-25deg);
}

.pm-badge-shine:hover::after{

    animation:pmBadgeShine .9s ease;
}

@keyframes pmBadgeShine{

    from{
        left:-150%;
    }

    to{
        left:180%;
    }

}


/* Bounce */

.pm-badge-bounce:hover{
    animation:pmBadgeBounce .45s;
}

@keyframes pmBadgeBounce{

    0%{
        transform:translateY(0);
    }

    30%{
        transform:translateY(-5px);
    }

    60%{
        transform:translateY(2px);
    }

    100%{
        transform:translateY(0);
    }

}
/* ==========================================
   ACCESIBILIDAD
========================================== */

/* Reduce las animaciones cuando el usuario
   así lo solicita en su sistema operativo */

@media (prefers-reduced-motion: reduce){

    .pm-badge,
    .pm-badge::before,
    .pm-badge::after{

        animation:none !important;

        transition:none !important;

        transform:none !important;

    }

}


/* ==========================================
   ESTADOS
========================================== */

.pm-badge[disabled],
.pm-badge.is-disabled{

    opacity:.6;

    pointer-events:none;

    cursor:not-allowed;
}


/* ==========================================
   IMPRESIÓN
========================================== */

@media print{

    .pm-badge{

        box-shadow:none !important;

        text-shadow:none !important;

    }

}


/* ==========================================
   UTILIDADES
========================================== */

.pm-badge-full{

    width:100%;

    justify-content:center;
}

.pm-badge-inline{

    display:inline-flex;
}

.pm-badge-block{

    display:flex;
}


/* ==========================================
   FIN DEL ARCHIVO
========================================== */