/* Layout común de pantallas de autenticación (login, registro, onboarding). */

.auth-bg {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--ic-bg, #000000);
    background-image: radial-gradient(color-mix(in srgb, var(--ic-primary) 12%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top, 0px))
        max(16px, env(safe-area-inset-right, 0px))
        max(24px, env(safe-area-inset-bottom, 0px))
        max(16px, env(safe-area-inset-left, 0px));
    overflow-x: hidden;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--ic-surface, #1A282E);
    border: 1px solid var(--ic-border, rgba(148, 163, 184, 0.12));
    border-radius: 20px;
    padding: 2rem 2rem 1.75rem;
}

@media (max-width: 480px) {
    .auth-card {
        padding: 1.5rem 1.25rem 1.5rem;
        border-radius: 16px;
    }
}

/* Cabecera de marca */

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.75rem;
}

.auth-brand--compact {
    margin-bottom: 1.25rem;
}

.auth-brand__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--ic-brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-brand__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ic-text, #E2E8F0);
    line-height: 1.2;
}

/* FocusOnNavigate (App.razor, Selector="h1") enfoca este título al cargar/recargar la página
   para anunciar el encabezado a lectores de pantalla. El foco programático es correcto, pero el
   anillo visible sobra en un título no interactivo: lo ocultamos sin perder el foco de a11y. */
.auth-brand__name:focus,
.auth-brand__name:focus-visible {
    outline: none;
}

.auth-brand__sub {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--ic-muted, #94A3B8);
    line-height: 1.3;
}

/* Facebook (login social; comparte layout con .auth-btn-google, más abajo) */
.auth-btn-facebook {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    border: 1px solid rgba(24, 119, 242, 0.35);
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--ic-font);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ic-text, #E2E8F0);
    transition: background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 1.25rem;
}

.auth-btn-facebook:hover {
    background: rgba(24, 119, 242, 0.08);
    border-color: rgba(24, 119, 242, 0.5);
}

.auth-btn-facebook:active {
    background: rgba(24, 119, 242, 0.12);
}

.auth-btn-facebook:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-subtle-actions {
    margin: 0.15rem 0 0.5rem;
    text-align: center;
}

.auth-text-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--ic-font);
    font-size: 0.72rem;
    color: var(--ic-muted, #94A3B8);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-text-link:hover {
    color: var(--ic-text, #E2E8F0);
}

.auth-text-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────────────
   A partir de aquí: estilos que vivían dentro del <style> de Login.razor. Se
   movieron a esta hoja global porque los usan también /registrar-negocio y el
   componente compartido GoogleSignInButton; un <style> de página desaparece al
   desmontarse el componente y dejaba esas pantallas sin estilo (p. ej. el
   .auth-alert--error de RegistrarNegocio nunca llegaba a pintarse).
   ───────────────────────────────────────────────────────────────────────────── */

/* Overlay durante signInWithRedirect (Safari iOS u OAuth con redirect activo).
   El usuario sale de la app a Google y luego vuelve — mientras tanto, indicar visualmente
   que algo está pasando y bloquear interacción con los botones de la card. */
.auth-redirect-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--ic-bg-rgb), 0.82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--ic-text, #E2E8F0);
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Error */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.auth-alert--error {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.25);
    color: #EF9A9A;
}

/* Aviso, no error: datos guardados que no se pudieron actualizar. Ámbar porque la pantalla
   sigue siendo usable —lo que no es cierto es que esté al día—. */
.auth-alert--warn {
    background: rgba(255, 167, 38, 0.10);
    border: 1px solid rgba(255, 167, 38, 0.28);
    color: #FFCC80;
    align-items: center;
}

/* Formulario */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.auth-field {
    margin-bottom: 1rem !important;
}

.auth-btn-primary {
    height: 48px !important;
    border-radius: 12px !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    margin-top: 0.25rem !important;
}

/* Separador */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.25rem 0;
}

.auth-divider__line {
    flex: 1;
    height: 1px;
    background: var(--ic-border, rgba(148,163,184,0.12));
}

.auth-divider__text {
    font-size: 0.75rem;
    color: var(--ic-muted, #94A3B8);
    white-space: nowrap;
    font-weight: 500;
}

/* Contenedor del botón OFICIAL de Google (renderButton) en iOS PWA. Google inyecta un iframe;
   solo centramos y reservamos altura para evitar salto de layout mientras carga. */
.auth-gsi-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    margin-bottom: 0.65rem;
}

/* Botón Google */
.auth-btn-google {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    border: 1px solid var(--ic-border, rgba(148,163,184,0.2));
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--ic-font);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ic-text, #E2E8F0);
    transition: background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 0.65rem;
}

.auth-btn-google:hover {
    background: rgba(148, 163, 184, 0.06);
    border-color: rgba(148, 163, 184, 0.3);
}

.auth-btn-google:active {
    background: rgba(148, 163, 184, 0.1);
}

.auth-btn-google:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variante destacada: el alta Google-first (/registrar-negocio) usa Google como acción
   PRINCIPAL, no como alternativa al formulario. Más alto y con relleno de marca. */
.auth-btn-google--primario {
    height: 52px;
    font-size: 0.9375rem;
    font-weight: 600;
    background: #FFFFFF;
    color: #1F2937;
    border-color: #FFFFFF;
    margin-bottom: 0.9rem;
}

.auth-btn-google--primario:hover {
    background: #F1F5F9;
    border-color: #F1F5F9;
}

.auth-btn-google--primario:active {
    background: #E2E8F0;
}

/* Navegador interno de una app (Instagram, Facebook, TikTok…): Google bloquea ahí el login, así
   que GoogleSignInButton pinta este aviso en lugar del botón. */
.auth-inapp {
    text-align: left;
    background: var(--ic-surface-2);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    padding: var(--ic-space-4);
    margin-bottom: 0.9rem;
}

.auth-inapp__titulo {
    margin: 0 0 var(--ic-space-1);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ic-text);
}

.auth-inapp__texto {
    margin: 0 0 var(--ic-space-3);
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--ic-muted);
}

.auth-inapp__texto:last-child {
    margin-bottom: 0;
}

/* El enlace de «Abrir en Chrome» reutiliza el botón de Google: sin subrayado de <a>. */
.auth-inapp a.auth-btn-google {
    text-decoration: none;
}

.auth-inapp .auth-btn-google {
    height: auto;
    min-height: var(--ic-touch-min);
}

.auth-inapp .auth-btn-google:last-child {
    margin-bottom: 0;
}

.auth-inapp__url {
    display: block;
    margin-top: var(--ic-space-1);
    color: var(--ic-text);
    word-break: break-all;
    -webkit-user-select: all;
    user-select: all;
}

/* Footer */
.auth-footer-text {
    margin: 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--ic-muted, #94A3B8);
}

.auth-link {
    color: var(--ic-nav-accent);
    text-decoration: none;
    font-weight: 500;
}

.auth-link:hover {
    color: var(--lc-accent);
    text-decoration: underline;
}

/* Botón teléfono */
.auth-btn-phone {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    border: 1px solid var(--ic-border, rgba(148,163,184,0.2));
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--ic-font);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ic-text, #E2E8F0);
    transition: background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 1.25rem;
}

.auth-btn-phone:hover {
    background: rgba(148, 163, 184, 0.06);
    border-color: rgba(148, 163, 184, 0.3);
}

.auth-btn-phone:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Panel de teléfono */
.auth-phone-panel {
    border: 1px solid var(--ic-border, rgba(148,163,184,0.12));
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1.25rem;
    background: color-mix(in srgb, var(--ic-primary) 4%, transparent);
}

.auth-phone-hint {
    font-size: 0.78rem;
    color: var(--ic-muted, #94A3B8);
    margin: 0 0 0.75rem;
}

.auth-phone-sent-info {
    font-size: 0.8125rem;
    color: #86EFAC;
    background: rgba(134, 239, 172, 0.08);
    border: 1px solid rgba(134, 239, 172, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 0.75rem;
}

.auth-phone-actions {
    display: flex;
    gap: 8px;
    margin-top: 0.75rem;
}

.auth-btn-primary-sm {
    flex: 1;
    height: 40px;
    border-radius: 10px;
    background: var(--ic-primary);
    color: var(--ic-on-primary);
    border: none;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--ic-font);
    transition: background 0.15s ease;
}

.auth-btn-primary-sm:hover { background: color-mix(in srgb, var(--ic-primary) 85%, var(--ic-text)); }

.auth-btn-primary-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-btn-cancel {
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: transparent;
    color: var(--ic-muted, #94A3B8);
    border: 1px solid var(--ic-border, rgba(148,163,184,0.2));
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: var(--ic-font);
    transition: background 0.15s ease;
}

.auth-btn-cancel:hover { background: rgba(148,163,184,0.07); }

.auth-btn-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-link-btn {
    background: none;
    border: none;
    color: var(--ic-nav-accent);
    font-size: 0.78rem;
    cursor: pointer;
    font-family: var(--ic-font);
    padding: 4px 0 0;
    text-decoration: underline;
}

.auth-link-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-phone-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.auth-phone-prefix {
    flex: 0 0 auto;
    min-width: 160px;
}

.auth-phone-field {
    flex: 1 1 180px;
    min-width: 160px;
}