/* CSS oficial de Clave Única */
.btn-cu {
    display: flex;
    justify-content: center;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    text-align: center;
    border-radius: 0;
    border: 0;
    cursor: pointer;
}

.btn-cu.btn-color-estandar {
    background-color: #0F69C4;
    color: #FFF;
}

.btn-cu.btn-color-estandar:hover {
    background-color: #0B4E91;
    color: #FFF;
}

.btn-cu.btn-color-estandar:focus {
    background-color: #0B4E91;
    color: #FFF;
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

.btn-cu.btn-m {
    width: fit-content;
    min-height: 48px;
    padding: 8px 14px 8px 14px !important;
    font-size: 16px;
    line-height: 2rem;
}

.btn-cu .cl-claveunica {
    text-indent: -9999px;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    margin: auto 4px auto 0px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M11.47,14a.65.65,0,0,1-.21-.54.64.64,0,0,1,.29-.5.68.68,0,0,1,.53-.19.73.73,0,0,1,.49.27.75.75,0,0,1-.08,1,.7.7,0,0,1-.53.19.71.71,0,0,1-.49-.27Zm3.8-8.66A9,9,0,0,1,21,13.57a9,9,0,0,1-18,0A8.78,8.78,0,0,1,8.45,5.32c.37-.09.64-.09.82.36a.76.76,0,0,1-.36,1,7.52,7.52,0,1,0,5.82-.09.66.66,0,0,1-.4-.37.64.64,0,0,1,0-.54.62.62,0,0,1,.37-.39A.64.64,0,0,1,15.27,5.32Zm-7.77,8a4.64,4.64,0,0,1,3.75-4.59V2.33A.91.91,0,0,1,12,1.5h3.31a.75.75,0,0,1,.7.75.78.78,0,0,1-.7.75H12.75V8.76a4.5,4.5,0,0,1,3.75,4.58A4.61,4.61,0,0,1,12,18,4.61,4.61,0,0,1,7.5,13.33Zm7.5.09a3.1,3.1,0,0,0-3-3.12,3.12,3.12,0,0,0,0,6.2A3.09,3.09,0,0,0,15,13.42Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.btn-cu .texto {
    text-decoration: none;
    font-size: 16px;
    padding-left: 4px;
    text-rendering: optimizeLegibility;
}

/* Responsive design para móvil */
@media (max-width: 768px) {
    .btn-cu.btn-m {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

/* Estados de accesibilidad */
.btn-cu:focus:not(:focus-visible) {
    outline: none;
}

.btn-cu:focus-visible {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* Animaciones suaves */
.btn-cu {
    transition: background-color 0.2s ease-in-out;
}

/* Soporte para modo oscuro */
@media (prefers-color-scheme: dark) {
    .btn-cu.btn-color-estandar {
        background-color: #0F69C4;
        color: #FFF;
    }
    
    .btn-cu.btn-color-estandar:hover {
        background-color: #0B4E91;
        color: #FFF;
    }
}