/* ==========================================================================
   MiMarket — Web pública · auth.css  (formulario de registro · .mm-site)
   ========================================================================== */

.mm-site .mm-auth {
    width: 100%;
    padding-block: var(--mm-space-6);
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(5, 150, 105, 0.06) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Centrado vertical + footer pegado abajo (sticky footer) en las páginas de auth.
   auth.css solo se carga en las pantallas de auth/registro, así que estos
   estilos no afectan al landing. Elimina el hueco grande entre el formulario y
   el footer cuando el contenido es más corto que la pantalla. */
body.mm-site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.mm-site main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mm-site .mm-auth__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mm-space-8);
    align-items: center;
}

/* Columna informativa */
.mm-site .mm-auth__aside-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin-block: var(--mm-space-3) var(--mm-space-4);
}
.mm-site .mm-auth__aside-text {
    font-size: 1.0625rem;
    color: var(--mm-ink-600);
    max-width: 44ch;
    margin-bottom: var(--mm-space-5);
}
.mm-site .mm-auth__list {
    display: flex;
    flex-direction: column;
    gap: var(--mm-space-3);
}
.mm-site .mm-auth__list li {
    display: flex;
    align-items: center;
    gap: var(--mm-space-3);
    color: var(--mm-ink-700);
}
.mm-site .mm-auth__list svg {
    width: 22px; height: 22px; flex-shrink: 0;
    color: var(--mm-primary);
}

/* Tarjeta del formulario */
.mm-site .mm-auth__card {
    background: #fff;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    box-shadow: var(--mm-shadow-md);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.mm-site .mm-auth__card-head { margin-bottom: var(--mm-space-5); }
.mm-site .mm-auth__card-title { font-size: 1.5rem; margin-bottom: var(--mm-space-1); }
.mm-site .mm-auth__card-sub { font-size: 0.95rem; color: var(--mm-ink-600); }

/* Formulario */
.mm-site .mm-form { display: flex; flex-direction: column; gap: var(--mm-space-4); }
.mm-site .mm-field { display: flex; flex-direction: column; gap: var(--mm-space-2); }
.mm-site .mm-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mm-ink-900);
}
.mm-site .mm-input,
.mm-site .mm-select {
    width: 100%;
    min-height: 46px;
    padding: 0.625rem 0.875rem;
    font-size: 0.975rem;
    color: var(--mm-ink-900);
    background: #fff;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.mm-site .mm-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}
.mm-site .mm-input::placeholder { color: var(--mm-ink-400); }
.mm-site .mm-input:focus,
.mm-site .mm-select:focus {
    outline: none;
    border-color: var(--mm-primary);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}
.mm-site .mm-input--error,
.mm-site .mm-select--error {
    border-color: #dc2626;
}
.mm-site .mm-input--error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Campo de contraseña con toggle */
.mm-site .mm-password { position: relative; }
.mm-site .mm-password .mm-input { padding-right: 2.75rem; }
.mm-site .mm-password__toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: var(--mm-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--mm-ink-400);
}
.mm-site .mm-password__toggle:hover { color: var(--mm-ink-700); background: var(--mm-bg-soft); }
.mm-site .mm-password__toggle svg { width: 20px; height: 20px; }
.mm-site .mm-password__toggle .mm-icon-eye-off { display: none; }
.mm-site .mm-password__toggle.is-visible .mm-icon-eye { display: none; }
.mm-site .mm-password__toggle.is-visible .mm-icon-eye-off { display: block; }

/* Errores y ayudas */
.mm-site .mm-error {
    font-size: 0.825rem;
    color: #dc2626;
}
.mm-site .mm-hint { font-size: 0.825rem; color: var(--mm-ink-400); }

/* Alert (errores generales) */
.mm-site .mm-alert {
    display: flex;
    gap: var(--mm-space-3);
    padding: var(--mm-space-3) var(--mm-space-4);
    border-radius: var(--mm-radius-sm);
    font-size: 0.9rem;
    margin-bottom: var(--mm-space-4);
}
.mm-site .mm-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.mm-site .mm-alert svg { width: 20px; height: 20px; flex-shrink: 0; }

.mm-site .mm-form__footer {
    margin-top: var(--mm-space-2);
    text-align: center;
    font-size: 0.925rem;
    color: var(--mm-ink-600);
}
.mm-site .mm-form__footer a { color: var(--mm-primary); font-weight: 600; }
.mm-site .mm-form__footer a:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .mm-site .mm-auth__grid { grid-template-columns: 1fr; gap: var(--mm-space-6); }
    .mm-site .mm-auth__aside { display: none; }
}

/* Variante de alerta: éxito / informativa (login status, verify-email reenviado) */
.mm-site .mm-alert--success {
    background: var(--mm-primary-soft);
    border: 1px solid #a7f3d0;
    color: var(--mm-primary-hover);
}
.mm-site .mm-alert--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}
.mm-site .mm-alert__list {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}
.mm-site .mm-alert__list li + li { margin-top: 0.2rem; }

/* Cabecera de campo con enlace a la derecha (ej: "¿Olvidaste tu contraseña?") */
.mm-site .mm-field__labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mm-space-3);
}
.mm-site .mm-label__link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mm-primary);
}
.mm-site .mm-label__link:hover { text-decoration: underline; }

/* Checkbox "recordarme" */
.mm-site .mm-check {
    display: flex;
    align-items: center;
    gap: var(--mm-space-2);
    font-size: 0.9rem;
    color: var(--mm-ink-700);
    cursor: pointer;
}
.mm-site .mm-check input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--mm-primary);
    cursor: pointer;
}

/* Tarjeta centrada angosta (verify-email, forgot, reset, confirm: sin columna informativa) */
.mm-site .mm-auth__single {
    max-width: 460px;
    margin-inline: auto;
}
.mm-site .mm-auth__card--center { text-align: center; }
.mm-site .mm-auth__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--mm-space-4);
    border-radius: 50%;
    background: var(--mm-primary-soft);
    color: var(--mm-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mm-site .mm-auth__icon svg { width: 30px; height: 30px; }
.mm-site .mm-auth__actions {
    display: flex;
    flex-direction: column;
    gap: var(--mm-space-3);
    margin-top: var(--mm-space-5);
}

/* --------------------------------------------------------------------------
   Botones sólidos en formularios de auth.
   El reset global `.mm-site button { background:none; border:none; color:inherit }`
   (especificidad 0,1,1) anula `.mm-btn--primary`/`--ghost` (0,1,0) y deja los
   <button> sin color. Reaplicamos los colores de marca con mayor especificidad
   (`.mm-site .mm-btn--*` = 0,2,0) para que el botón verde se vea igual que el
   <a> "Crear cuenta gratis" del header. Reutiliza los tokens del landing.
   -------------------------------------------------------------------------- */
.mm-site .mm-btn--primary {
    background-color: var(--mm-primary);
    color: #fff;
}
.mm-site .mm-btn--primary:hover {
    background-color: var(--mm-primary-hover);
    color: #fff;
    box-shadow: var(--mm-shadow-sm);
}
.mm-site .mm-btn--ghost {
    background-color: transparent;
    color: var(--mm-ink-700);
    border: 1px solid var(--mm-border);
}
.mm-site .mm-btn--ghost:hover {
    background-color: var(--mm-bg-soft);
    border-color: #cbd5e1;
    color: var(--mm-ink-900);
}

/* reCAPTCHA v2 — centrado y sin desbordar la tarjeta del formulario */
.mm-site .mm-recaptcha {
    display: flex;
    justify-content: center;
    overflow-x: auto;
}
/* El widget mide 304px de ancho fijo; en pantallas estrechas lo escalamos
   para que no rompa el layout de la tarjeta. */
@media (max-width: 360px) {
    .mm-site .mm-recaptcha .g-recaptcha {
        transform: scale(0.9);
        transform-origin: center;
    }
}