/*
 * Botón "Iniciar sesión con Google".
 *
 * El marcado de la vista usa las clases del botón de Google, pero NINGUNA hoja las definía: hasta
 * acá el botón era un enlace sin estilo, con el logo al lado. Esto lo corrige.
 *
 * PROCEDENCIA DE LOS VALORES. Los siguientes salen de la guía de marca publicada
 * (https://developers.google.com/identity/branding-guidelines), tema claro:
 *   - relleno #FFFFFF, borde #747775 de 1px por dentro, texto #1F1F1F
 *   - tipografía de 14px con interlineado de 20px
 *   - separaciones: 12px a la izquierda, 10px tras el logo, 12px tras el texto
 *
 * NO están publicados y son decisión local: la altura, el radio de esquina y las opacidades de los
 * estados. Google entrega esos valores por su generador interactivo, que no es consultable como
 * página. Si se quiere cumplimiento exacto, la salida del generador reemplaza este archivo entero.
 *
 * La tipografía de la guía es Google Sans Medium, que exige descargarla de Google Fonts. Se usa la
 * pila del sistema a propósito: traerla en tiempo de ejecución devolvería la dependencia de un
 * tercero que el logo servido localmente existe para evitar, justo en la página que ve alguien que
 * todavía no entró.
 */
.gsi-material-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #747775;
    border-radius: 4px;
    background-color: #fff;
    color: #1f1f1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.25px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.gsi-material-button:hover,
.gsi-material-button:focus {
    background-color: #f8f9fa;
    color: #1f1f1f;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.gsi-material-button:active {
    background-color: #f1f3f4;
}

.gsi-material-button:focus-visible {
    outline: 2px solid #0b57d0;
    outline-offset: 2px;
}

/* 10px tras el logo y 12px tras el texto, según la guía. */
.gsi-material-button img {
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.gsi-material-button-contents {
    padding-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}