.linkBoton {
    font-size: medium;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
    background-color: #3f3f3f;
    color: White;
    border-style: none;
    margin-right: 15px;
}

.linkBotonGrande {
    font-size: medium;
    font-weight: bold;
    padding: 25px 15px 25px 15px;
    border: 1px;
    border-style: solid;
    border-radius: 5px;
    border-color: var(--colorFondoBoton);
}
    .linkBotonGrande:hover {
        background-color: var(--colorFondoBoton);
        color: var(--colorTextoBoton) !important;
    }

.linkBotonGrandeVerde {
    font-size: medium;
    font-weight: bold;
    padding: 25px 15px 25px 15px;
    border: 1px;
    border-style: solid;
    border-radius: 5px;
    border-color: var(--bs-success);
    color: var(--bs-success) !important;
}
    .linkBotonGrandeVerde:hover {
        background-color: var(--bs-success);
        color: white !important;
    }

/* Limpiamos el CSS para que no haya reglas contradictorias */
.hover-button {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

/* Ajuste en el contenedor principal */
.linkBotonGrande.hover-button {
    position: relative;
    display: inline-flex; /* Cambiamos a flex para centrar contenido */
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 40px; /* Asegura que el botón tenga altura suficiente */
    overflow: hidden; /* Evita que el texto largo se salga de los bordes redondeados */
}

/* El texto que aparece */
.text-hover {
    position: absolute;
    width: 100%;       /* Ocupa todo el ancho del botón */
    left: 0;
    top: 50%;          /* Lo centramos verticalmente */
    transform: translateY(-50%); /* Ajuste fino del centro vertical */
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 0 10px;   /* Un poco de aire a los lados */
    box-sizing: border-box; 
    white-space: normal; /* Permite que el texto largo haga salto de línea si es necesario */
    pointer-events: none;
}

/* El texto original */
.text-default {
    opacity: 1;
    transition: opacity 0.3s ease;
    display: block;
}

.text-default {
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Las reglas de activación */
.is-hovered .text-default {
    opacity: 0 !important;
}

.is-hovered .text-hover {
    opacity: 1 !important;
}

.lnkBotonGrande {
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
    transition: all 0.1s ease-in-out;
    width: 100%;
    padding: 20px;
    font-size: 25px;
    font-weight: bold;
}

    .lnkBotonGrande > i {
        font-size: 40px;
        vertical-align: middle;
    }

    .lnkBotonGrande > span {
        vertical-align: text-bottom;
    }

.lnkBotonGrandeRedondeado {
    display: inline-block;
    vertical-align: middle;
    border-radius: 10px;
    transition: all 0.1s ease-in-out;
    width: 100%;
    padding: 8px;
    font-size: 18px;
    border: solid 1px;
}

    .lnkBotonGrandeRedondeado > i {
        font-size: 18px;
        vertical-align: middle;
    }

    .lnkBotonGrandeRedondeado > span {
        vertical-align: text-bottom;
    }

.lnkBotonGrandeVerde {
    /*background-color: #FFF !important;*/
    color: var(--bs-success) !important;
}

    .lnkBotonGrandeVerde:hover {
        background-color: var(--bs-success) !important;
        color: #FFF !important;
    }

.lnkBotonGrandeVerdeConBorde {
    /*background-color: #FFF !important;*/
    color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

    .lnkBotonGrandeVerdeConBorde:hover {
        background-color: var(--bs-success) !important;
        color: #FFF !important;
    }

.lnkBotonGrandeAzul {
    /*background-color: #FFF !important;*/
    color: var(--bs-primary) !important;
}

    .lnkBotonGrandeAzul:hover {
        background-color: var(--bs-primary) !important;
        color: #FFF !important;
    }

.lnkBotonGrandeAzulConBorde {
    /*background-color: #FFF !important;*/
    color: var(--colorFondoBoton) !important;
    border-color: var(--colorFondoBoton) !important;
}

    .lnkBotonGrandeAzulConBorde:hover {
        background-color: var(--colorFondoBoton) !important;
        color: #FFF !important;
    }

.lnkBotonGrandeRojo {
    /*background-color: #FFF !important;*/
    color: var(--bs-danger) !important;
}

    .lnkBotonGrandeRojo:hover {
        background-color: var(--bs-danger) !important;
        color: #FFF !important;
    }


.lnkBotonGrandeNaranja {
    /*background-color: #FFF !important;*/
    color: var(--bs-warning) !important;
}

    .lnkBotonGrandeNaranja:hover {
        background-color: var(--bs-warning) !important;
        color: #FFF !important;
    }

.lnkBotonMediano {
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
    padding: 7px;
    font-size: 25px;
    font-weight: bold;
}

    .lnkBotonMediano:hover {
        cursor: pointer;
    }

    .lnkBotonMediano > i {
        font-size: 40px;
        vertical-align: middle;
    }

    .lnkBotonMediano > span {
        vertical-align: middle;
    }

.lnkBotonMedianoAzul {
    background-color: #FFF;
    color: #466CB0 !important;
    border: 3px solid #466CB0;
}

    .lnkBotonMedianoAzul:hover {
        background-color: #466CB0;
        color: #FFF !important;
    }

.lnkBotonRellenoMedianoAzul {
    background-color: #466CB0;
    color: #fff !important;
    border: 3px solid #466CB0;
}

    .lnkBotonRellenoMedianoAzul:hover {
        background-color: #fff;
        color: #466CB0 !important;
    }