/* ─────────────────────────────────────────────────────────────
   Mi Registro con Google - Estilos adaptados al theme Social V
   El theme usa fondo azul oscuro y botones azul primario
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

/* ── Divisor "o continúa con" ────────────────────────────────── */
.mrg-divider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 14px;
}

.mrg-divider-wrap::before,
.mrg-divider-wrap::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.mrg-divider-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    font-family: 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0.03em;
}

/* ── Botón de Google integrado en el formulario Social V ─────── */
.mrg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    box-sizing: border-box;
}

.mrg-btn-google.mrg-standalone {
    width: 100%;
    padding: 11px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin-bottom: 4px;
    display: flex;
}

.mrg-btn-google.mrg-standalone:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.mrg-btn-google.mrg-standalone:active {
    transform: translateY(0);
    box-shadow: none;
}

.mrg-google-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Alertas ─────────────────────────────────────────────────── */
.mrg-alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 14px;
    font-family: 'DM Sans', system-ui, sans-serif;
}

.mrg-alert-error {
    background: rgba(192, 57, 43, 0.2);
    color: #ff8a80;
    border: 1px solid rgba(192, 57, 43, 0.4);
}

.mrg-alert-success {
    background: rgba(39, 174, 96, 0.15);
    color: #69f0ae;
    border: 1px solid rgba(39, 174, 96, 0.3);
}

.mrg-alert-warning {
    background: rgba(133,100,4,0.2);
    color: #ffd740;
    border: 1px solid rgba(133,100,4,0.4);
    font-size: 0.82rem;
}
.mrg-alert-warning a { color: #ffe57f; }

/* ── Shortcode independiente [mi_login_google] ───────────────── */
.mrg-box {
    font-family: 'DM Sans', system-ui, sans-serif;
    max-width: 400px;
    margin: 2rem auto;
    padding: 2.5rem 2rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    text-align: center;
    color: #fff;
}

.mrg-title { font-size: 1.4rem; font-weight: 600; color: #fff; margin: 0 0 .5rem; }
.mrg-subtitle { color: rgba(255,255,255,.6); font-size: .9rem; margin: 0 0 1.5rem; }
.mrg-note { margin: 1rem 0 0; font-size: .75rem; color: rgba(255,255,255,.35); }
.mrg-note a { color: rgba(255,255,255,.5); }
.mrg-avatar { width:64px; height:64px; border-radius:50%; border:2px solid rgba(255,255,255,.2); margin-bottom:12px; }
.mrg-welcome { color:#fff; font-size:1rem; margin:0 0 16px; }

.mrg-btn-secondary {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.15);
    margin-top: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}