/* ESTILOS OFICIALES BOTÓN CLAVEÚNICA (Versión 2.0)
   Basado en Manual de Normas Gráficas - Gobierno Digital
*/

/* 1. Contenedor Principal (El Botón) */
.btn-cu {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrado horizontal */
    
    /* Dimensiones Oficiales */
    height: 48px; /* "Altura total: 2rem + 16px" */
    padding: 8px 14px; /* "Horizontal: 14px, Vertical: 8px" */
    width: 100%; /* Para que llene el contenedor del login (Fluid) */
    
    /* Colores y Bordes */
    background-color: #0F69C4; /* Azul Oficial */
    border: none;
    border-radius: 4px; /* Tu elección (Opciones: 0, 4px, 99px) */
    
    /* Tipografía */
    font-family: 'Roboto', sans-serif;
    text-decoration: none !important; /* QUITA EL UNDERLINE */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* 2. El Ícono (SVG) */
.btn-cu .cl-claveunica {
    display: block;
    width: 24px;
    height: 24px;
    
    background-image: url('../icon/cu-blanco.svg'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    /* AJUSTE FINAL: Exactamente lo que pide el manual */
    margin-right: 4px; 
}

/* 3. El Texto */
.btn-cu .texto {
    color: #FFFFFF;
    font-size: 16px; /* 1rem */
    font-weight: 700; /* BOLD (Requisito clave) */
    line-height: 1;
    text-decoration: none !important; /* Asegura sin subrayado */
}

/* --- ESTADOS (Hover, Active, Focus) --- */

/* Hover: Cuando pasas el mouse */
.btn-cu:hover {
    background-color: #0B4E91; /* Alternativa Hex Manual */
    text-decoration: none;
    color: #FFFFFF;
}

/* Active: Cuando haces clic */
.btn-cu:active {
    background-color: #07305A; /* Alternativa Hex Manual */
    transform: translateY(1px); /* Efecto sutil de presión */
}

/* Focus: Navegación por teclado */
.btn-cu:focus-visible {
    outline: 4px solid rgba(255, 190, 92, 1); /* Anillo naranja oficial */
    outline-offset: 2px;
}