/*
 * oauth-buttons.css — botones de inicio de sesión social (migración 093).
 *
 * Componente sub-compartido (css/components/), cargado por página vía
 * $pageStyles en /login, /register y /profile. NO va en
 * components.css (el índice canónico del Gate C) ni en preauth.css (se
 * necesita también en /profile, que no lleva .preauth).
 *
 * TOKEN-ONLY: ni un solo color cromático hardcoded. Los colores de marca de
 * los proveedores viven en el sprite SVG (brand-sprite.svg), no aquí — así el
 * Gate A del design pack (que solo escanea css/html/js) no entra en conflicto
 * con las guías de marca (que prohíben recolorear los logos). El chrome del
 * botón usa --color-surface (blanco), que es justo lo que Google exige de
 * fondo para su "G".
 *
 * FORMATO HÍBRIDO (decisión owner #7): Google ancho con texto —sus guías
 * prohíben el icono suelto sin borde ni etiqueta—; GitHub y Microsoft como
 * cuadrados solo-logo. El texto de los cuadrados se oculta VISUALMENTE (no
 * con display:none ni aria-hidden) para conservar el nombre accesible.
 */

.oauth-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Fila de los cuadrados (GitHub + Microsoft), centrada bajo el botón ancho. */
.oauth-row {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--btn-radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

/* body.preauth pone `a { color: inherit }` (preauth.css); el color explícito
   garantiza que /profile (sin .preauth) rinda igual. */
.oauth-btn,
.oauth-btn:hover {
    color: var(--color-text-primary);
}

.oauth-btn:hover {
    background: var(--color-surface-sunken);
    border-color: var(--color-border-strong);
}

/* Google: ancho completo con logo + etiqueta. */
.oauth-btn--wide {
    width: 100%;
}

/* GitHub / Microsoft: cuadrados solo-logo. */
.oauth-btn--square {
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    gap: 0;
}

/* NO usa .icon: esa clase trae stroke-width de Lucide (preauth.css) y los
   logos de marca son fill, no stroke. */
.oauth-btn-logo {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.oauth-btn--square .oauth-btn-logo {
    width: 22px;
    height: 22px;
}

.oauth-btn-label {
    flex: 0 1 auto;
}

/* En los cuadrados el texto se oculta VISUALMENTE pero sigue en el DOM →
   el nombre accesible se conserva (lectores de pantalla lo leen). */
.oauth-btn--square .oauth-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.oauth-btn.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* Separador "o continúa con tu correo": líneas a ambos lados de un texto real
   (no aria-hidden: explica que abajo hay otra vía). */
.oauth-sep {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-4);
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
}

.oauth-sep::before,
.oauth-sep::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border);
}

@media (max-width: 359px) {
    .oauth-btn--wide {
        gap: var(--space-2);
        padding: 0 var(--space-2);
        font-size: var(--text-xs);
    }
}