/*
 * Botón ClaveÚnica — estilos oficiales
 * Fuente: Manual de uso botón ClaveÚnica, Secretaría de Gobierno Digital de Chile.
 * https://wiki.digital.gob.cl/manual-boton-claveunica
 *
 * NOTA: El isotipo se carga desde icon/cu-blanco.svg (relativo a esta carpeta css/).
 */

/* ── Base ─────────────────────────────────────────────────────────────── */
.btn-cu {
    display: flex;
    align-items: center;        /* funcional: alinea verticalmente icono y texto */
    justify-content: center;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 0;           /* req. 3: bordes curvos 0 */
    border: 0;
    cursor: pointer;
}

.btn-cu:hover {
    text-decoration: none;
}

/* ── Isotipo ──────────────────────────────────────────────────────────── */
.btn-cu .cl-claveunica {
    display: inline-block;      /* funcional: permite width/height sobre el span */
    text-indent: -9999px;
    overflow: hidden;
    background: url(../icon/cu-blanco.svg) center center no-repeat;
    flex-shrink: 0;
    /* background-size se define por variante de tamaño (.btn-m, etc.) */
}

/* ── Texto (rem) ──────────────────────────────────────────────────────── */
.btn-cu .text,
.btn-cu .texto {
    padding-left: 4px;
    text-decoration: none;
    font-family: "Roboto", sans-serif;  /* req. 2: tipografía Roboto */
    font-weight: bold;                  /* req. 2: peso Bold          */
    color: #FFFFFF;                     /* req. 2: color #FFFFFF      */
    text-rendering: geometricPrecision;
}

/* ── Texto (px — fallback sin soporte rem) ────────────────────────────── */
.btn-cu .text-px {
    font-size: 16px;
    text-decoration: none;
    padding-left: 4px;
    text-rendering: optimizeLegibility;
}

/* ── Color estándar ── req. 3: fondo #0F69C4, border-radius 0 ─────────── */
.btn-cu.btn-color-estandar {
    background-color: #0F69C4;  /* req. 3: color contenedor */
    color: #FFF;
}

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

.btn-cu.btn-color-estandar:active {
    background-color: #07305A;
    color: #FFF;
}

/*
 * !important necesario para vencer "* { outline: none !important; }" de main.css.
 * Requerido para WCAG 2.1 criterio 2.4.7 (Focus Visible).
 */
.btn-cu.btn-color-estandar:focus {
    background-color: #0B4E91;
    color: #FFF;
    outline: 4px solid #FFBE5C !important;
    outline-offset: 0 !important;
}

/* ── Tamaño M ─────────────────────────────────────────────────────────── */
/* min-height: 48px — la guía oficial tiene un typo ("48x"); aquí corregido */
.btn-cu.btn-m {
    width: fit-content;
    min-height: 48px;
    padding: 8px 14px 8px 14px !important;
    font-size: 16px;
    line-height: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.btn-cu.btn-m .cl-claveunica {
    width: 24px;            /* req. 1: ancho  24px */
    height: 24px;           /* req. 1: alto   24px */
    background-size: 24px 24px;
    margin: auto 4px auto 0px;
    /* req. 1: color #FFFFFF definido en el fill del SVG cu-blanco.svg */
}

/* ── Bordes redondeados ───────────────────────────────────────────────── */
.btn-cu.rounded-none   { border-radius: 0%; }
.btn-cu.rounded-middle { border-radius: 4px 4px; }
.btn-cu.rounded-full   { border-radius: 99px 99px; }

/* ── Alto contraste / dark mode ───────────────────────────────────────── */
.btn-cu.btn-color-highContrast {
    background-color: #625AF6;
    color: #FFF;
}

.btn-cu.btn-color-highContrast:hover {
    background-color: #4943B6;
    color: #FFF;
}

.btn-cu.btn-color-highContrast:active {
    background-color: #2D2971;
    color: #FFF;
}

.btn-cu.btn-color-highContrast:focus {
    background-color: #4943B6;
    color: #FFF;
    outline: 4px solid rgba(216, 215, 250, 1) !important;
    outline-offset: 0 !important;
}

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