/* ============================================================
   btn-gradiente — Sistema de botones UVP
   Tipos:   principal (default) | secundario | cancelar | labels | icono-solo | login
   Tamaños: g (default) | m | s | xs
   Estados: automáticos vía :hover, :active, :disabledp
   ============================================================ */

/* ---- Base: Principal G (default) — 200px × 44px, Body M ---- */
.btn-gradiente {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    min-width: 200px;
    height: 44px;
    width: fit-content;
    border-radius: 12px;
    background: linear-gradient(to right, #922CEC 0%, #771A75 25%, #91267f 50%, #91267f 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: var(--body-m-size, 16px);
    font-weight: var(--body-m-weight, 300);
    line-height: var(--body-m-line-height, 1.5);
    letter-spacing: var(--body-m-letter-spacing, -0.03em);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: background-position 0.4s ease, box-shadow 0.3s ease;
    -webkit-user-select: none;
    user-select: none;
    font-size: 16px;
    font-weight: bold;
}

/* Hover: desliza el background hacia la mitad derecha (color sólido) */
.btn-gradiente:hover,
.btn-gradiente:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 0 0 4px rgba(166, 76, 151, 0.5);
    color: #fff;
    text-decoration: none;
    outline: none;
}

/* Activo/Click: más oscuro #57174c — instantáneo (es un clic) */
.btn-gradiente:active {
    background: #57174c;
    box-shadow: 0 0 0 2px #91267f;
    color: #fff;
    transition: none;
}

/* Deshabilitado: gris morado neutro #a198a8 */
.btn-gradiente:disabled,
.btn-gradiente[aria-disabled="true"] {
    background: #a198a8;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    color: #fff;
}

/* ---- Tamaño M — 150px × 42px, Body S ---- */
.btn-gradiente--g {
    font-size: 16px;
    font-weight: bold;
}

.btn-gradiente--m {
    padding: 0 16px;
    min-width: 150px;
    height: 42px;
    font-size: var(--body-s-size, 16px);
    font-weight: var(--body-s-weight, 400);
    line-height: var(--body-s-line-height, 1.32);
    letter-spacing: var(--body-s-letter-spacing, -0.03em);
}

/* ---- Tamaño S ---- */
.btn-gradiente--s {
    padding: 12px 16px;
    min-width: 100px;
    font-size: 12px;
    letter-spacing: -0.36px;
}

/* ---- Tamaño XS ---- */
.btn-gradiente--xs {
    padding: 8px 12px;
    min-width: 0;
    font-size: 10px;
    letter-spacing: -0.3px;
    border-radius: 8px;
}

/* ============================================================
   TIPO: Secundario — gradiente cálido (amarillo→naranja→rojo)
   ============================================================ */
.btn-gradiente--secundario {
    /* Mitad izq = sólido hover; mitad der = gradiente visible en default.
       Position 100%→0% anima el barrido de izquierda a derecha. */
    background: linear-gradient(to right,
        #EB2C49 0%, #EB2C49 50%,
        #EB2C49 50%, #F55201 75%, #FCD58C 100%);
    background-size: 200% 100%;
    background-position: 100% 50%;
}

/* Hover: barrido izq→der; background-position 0% muestra el sólido rojo */
.btn-gradiente--secundario:hover {
    background-position: 0% 50%;
    box-shadow: 0 0 0 4px #f7b6c0;
    color: #fff;
}

/* Activo: rojo más oscuro — instantáneo */
.btn-gradiente--secundario:active {
    background: #e10727;
    box-shadow: 0 0 0 2px #f38696;
    color: #fff;
    transition: none;
}

/* Deshabilitado: gris-morado neutro #5c5361 */
.btn-gradiente--secundario:disabled,
.btn-gradiente--secundario[aria-disabled="true"] {
    background: #5c5361;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    color: #fff;
}

/* ============================================================
   TIPO: Cancelar — blanco sólido con borde gris
   Hover: texto morado + borde lavanda
   Activo: fondo morado + texto rosa claro
   ============================================================ */
.btn-gradiente--cancelar {
    background: #fff;
    border: 1px solid #5c5361;
    color: #3b363f;
}

/* Hover: texto morado #7a01e6 + halo lavanda 4px */
.btn-gradiente--cancelar:hover {
    background: #fff;
    border-color: #eedffb;
    box-shadow: 0 0 0 3px #eedffb;
    color: #7a01e6;
    text-decoration: none;
    opacity: 1;
}

/* Activo: fondo morado #9534eb + borde lavanda + texto rosa claro */
.btn-gradiente--cancelar:active {
    background: #9534eb;
    border-color: #eedffb;
    box-shadow: 0 0 0 1px #eedffb;
    color: #f9e6f5;
}

/* Deshabilitado: gris-morado #a198a8, texto blanco */
.btn-gradiente--cancelar:disabled,
.btn-gradiente--cancelar[aria-disabled="true"] {
    background: #a198a8;
    border-color: transparent;
    box-shadow: none;
    color: #fff;
    cursor: not-allowed;
    pointer-events: none;
}

/* Alias backward-compat: labels usa el mismo gradiente que secundario */
.btn-gradiente--labels {
    background: linear-gradient(to right,
        rgb(252, 213, 140) 0%, rgb(245, 82, 1) 12%, rgb(235, 44, 73) 25%,
        #eb2c49 50%, #eb2c49 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    color: #fff;
}

/* ============================================================
   TIPO: Arcoiris — gradiente radial multicolor (amarillo→naranja→rojo→magenta→morado)
   Figma: "Tipo=Icono" — botón con ícono y gradiente rainbow
   ============================================================ */

@property --btn-arcoiris-bg {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

.btn-gradiente--arcoiris {
    background: linear-gradient(to right,
        #FFCC00 0%, #F49E0C 3%, #E87019 6%, #DD4125 9%, #D72A2B 11%,
        #D11331 13%, #B41856 17%, #971D7A 21%, #7B1590 25%, #5F0DA6 29%,
        #5F0DA6 33%,
        #FFCC00 50%, #D11331 67%, #971D7A 83%, #5F0DA6 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
}

/* Hover: desliza hacia el arcoiris condensado */
.btn-gradiente--arcoiris:hover {
    color: #fff;
}

/* Activo: instantáneo con overlay oscuro */
.btn-gradiente--arcoiris:active {
    background: linear-gradient(
        0deg,
        rgba(73, 1, 138, 0.4),
        rgba(73, 1, 138, 0.4)
    ),
    linear-gradient(to right, #FFCC00, #D11331, #971D7A, #5F0DA6);
    color: #fff;
    transition: none;
}

/* Deshabilitado: gris-morado neutro */
.btn-gradiente--arcoiris:disabled,
.btn-gradiente--arcoiris[aria-disabled="true"] {
    background: #5c5361;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    color: #fff;
}

/* ============================================================
   TIPO: Login — gradiente radial multicolor (amarillo→rojo→magenta→violeta)
   Mismo espectro que arcoiris, radial centrado abajo-izquierda en default
   Hover/Active: ring amarillo (box-shadow) sin alterar el layout
   ============================================================ */
.btn-gradiente--login {
    /* background: linear-gradient(to right,
        #FFCC00 0%, #F49E0C 3%, #E87019 7%, #DD4125 10%, #D72A2B 12%,
        #D11331 14%, #B41856 19%, #971D7A 25%, #7B1590 30%, #5F0DA6 35%,
        #5F0DA6 38%,
        #FFCC00 50%, #D11331 67%, #971D7A 83%, #5F0DA6 100%); */
        background: radial-gradient(58.5% 150.96% at 27.25% 110.58%, #FFCC00 0%, #D11331 49.88%, #971D7A 76.93%, #5F0DA6 100%);


    /* background-size: 200% 100%; */
    /* background-position: 0% 50%; */
}

/* Hover: desliza hacia la posición 100% */
.btn-gradiente--login:hover,
.btn-gradiente--login:focus-visible {
    color: #fff;
}

/* Activo: overlay morado + ring amarillo — instantáneo */
.btn-gradiente--login:active {
    background:
        linear-gradient(0deg, rgba(73, 1, 138, 0.4), rgba(73, 1, 138, 0.4)),
        linear-gradient(to right, #FFCC00, #D11331, #971D7A, #5F0DA6);
    box-shadow: 0 0 0 2px #FFCC00;
    color: #fff;
    transition: none;
}

/* Deshabilitado: gris-morado neutro #5c5361 */
.btn-gradiente--login:disabled,
.btn-gradiente--login[aria-disabled="true"] {
    background: #5c5361;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    color: #fff;
}

/* ============================================================
   Ícono dentro del botón
   ============================================================ */
.btn-gradiente__ico {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.btn-gradiente--s .btn-gradiente__ico,
.btn-gradiente--xs .btn-gradiente__ico {
    width: 14px;
    height: 14px;
}

/* ============================================================
   TIPO: Icono Solo — cuadrado o circular, sin texto
   ============================================================ */
.btn-gradiente--icono-solo {
    padding: 12px;
    min-width: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.btn-gradiente--icono-solo.btn-gradiente--m {
    width: 40px;
    height: 40px;
    padding: 8px;
}

.btn-gradiente--icono-solo.btn-gradiente--s {
    width: 32px;
    height: 32px;
    padding: 6px;
}

.btn-gradiente--icono-solo.btn-gradiente--xs {
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 8px;
}