/*
 * Mi OAuth Plugin Styles
 * Version: 2.2.1
 * Description: Estilos para los botones de login dinámicos.
 */

/* ---- Botones de Login Dinámicos ---- */

/* Estilos Comunes */
.mi-oauth-login-button {
  transition: transform 0.1s ease-out;
  display: inline-block; /* Asegura que el contenedor del SVG se comporte bien */
  line-height: 0; /* Previene espacios extra debajo del SVG */
}
.mi-oauth-login-button:hover {
  transform: scale(1.02); /* Efecto sutil al pasar el ratón */
}

/* --- MODO CLARO (POR DEFECTO) --- */

/* Fondo para ambos botones */
.mi-oauth-login-button svg .btn-background {
    fill: #f2f2f2; /* Gris claro */
    stroke: #dcdcdc; /* Borde sutil */
    stroke-width: 1px;
}
.mi-oauth-login-button:hover svg .btn-background {
    fill: #e8e8e8;
}

/* Texto específico para Google */
.mi-oauth-google-button svg .btn-text {
    fill: #1f1f1f; /* Negro de Google */
}

/* Texto específico para Facebook */
.mi-oauth-facebook-button svg .btn-text {
    fill: #1877f2; /* Azul de Facebook */
}


/* --- MODO OSCURO --- */
@media (prefers-color-scheme: dark) {

    /* Fondo para ambos botones en modo oscuro */
    .mi-oauth-login-button svg .btn-background {
        fill: #2e2e2e; /* Gris oscuro */
        stroke: #444;  /* Borde sutil oscuro */
    }
    .mi-oauth-login-button:hover svg .btn-background {
        fill: #3a3a3a;
    }

    /* Texto de Google en modo oscuro */
    .mi-oauth-google-button svg .btn-text {
        fill: #e8eaed; /* Blanco de Google para modo oscuro */
    }

    /* Texto de Facebook en modo oscuro (el azul tiene buen contraste, podemos mantenerlo o aclararlo) */
    .mi-oauth-facebook-button svg .btn-text {
        /* Opción 1: Mantener el azul original */
        fill: #1877f2; 
        
        /* Opción 2: Un azul un poco más brillante si se ve muy oscuro */
        /* fill: #4a90e2; */
    }
}