/*
 * Botón ClaveÚnica
 * Estilos gráficos oficiales adaptados para el Portal de Pacientes.
 */

.btn-cu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    color: #ffffff;
    cursor: pointer;
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
}

.btn-cu:hover,
.btn-cu:focus {
    color: #ffffff;
    text-decoration: none;
}

.btn-cu .cl-claveunica {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: auto 4px auto 0;
    overflow: hidden;
    background-image: url("../icon/cu-blanco.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    text-indent: -9999px;
}

.btn-cu .texto {
    display: block;
    padding-left: 4px;
    color: inherit;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    text-rendering: geometricPrecision;
    white-space: nowrap;
}

/* Variante de color oficial estándar */
.btn-cu.btn-color-estandar {
    background-color: #0f69c4;
    color: #ffffff;
}

.btn-cu.btn-color-estandar:hover {
    background-color: #0b4e91;
    color: #ffffff;
}

.btn-cu.btn-color-estandar:active {
    background-color: #07305a;
    color: #ffffff;
}

.btn-cu.btn-color-estandar:focus-visible {
    outline: 4px solid #ffbe5c;
    outline-offset: 0;
}

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

/* Bordes */
.btn-cu.rounded-none {
    border-radius: 0;
}

.btn-cu.rounded-middle {
    border-radius: 4px;
}

.btn-cu.rounded-full {
    border-radius: 99px;
}

/* Ancho completo */
.btn-cu.btn-fw {
    display: flex;
    width: 100%;
    max-width: 550px;
    justify-content: center;
}

/* Alto contraste */
.btn-cu.btn-color-highContrast {
    background-color: #625af6;
    color: #ffffff;
}

.btn-cu.btn-color-highContrast:hover {
    background-color: #4943b6;
    color: #ffffff;
}

.btn-cu.btn-color-highContrast:active {
    background-color: #2d2971;
    color: #ffffff;
}

.btn-cu.btn-color-highContrast:focus-visible {
    outline: 4px solid #d8d7fa;
    outline-offset: 0;
}

@media (max-width: 640px) {
    .btn-cu.btn-m {
        min-height: 48px;
        padding: 8px 14px !important;
    }
}

@media (max-width: 640px) {
    .btn-cu.btn-m {
        min-height: 48px;
        padding: 8px 14px !important;
    }

    /* Centrar botón ClaveÚnica en móvil */
    .hero-login {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero-login .btn-cu {
        margin: 16px auto 0;
    }
}