/* ================================================================
   ARM EMPRENDEDORES — LOGIN.CSS
   Pantallas sin sesión: entrar, registrarse, recuperar clave y el
   asistente de "crear mi primer negocio".
   ================================================================ */

.auth-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-page);
    padding: calc(var(--safe-t) + var(--s-5)) var(--s-4) calc(var(--safe-b) + var(--s-6));
}

/* En pantalla ancha la tarjeta se centra; en celular ocupa todo el
   alto para que el teclado no deje el formulario a medias. */
.auth-caja {
    width: 100%;
    max-width: 420px;
    margin: auto;
}

/* ── Marca ───────────────────────────────────────────────────── */
.auth-marca {
    text-align: center;
    margin-bottom: var(--s-6);
}
.auth-logo {
    width: 68px; height: 68px;
    margin: 0 auto var(--s-3);
    border-radius: var(--r-lg);
    background: var(--brand);
    color: var(--brand-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: var(--fw-x);
    box-shadow: var(--sh-brand);
}
.auth-marca h1 {
    font-size: var(--f-2xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--s-1);
}
.auth-marca p { font-size: var(--f-sm); color: var(--tx-3); }

/* ── Tarjeta del formulario ──────────────────────────────────── */
.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--bd);
    border-radius: var(--r-xl);
    box-shadow: var(--sh);
    padding: var(--s-6) var(--s-5);
}
.auth-card h2 { font-size: var(--f-lg); margin-bottom: var(--s-1); }
.auth-card .intro {
    font-size: var(--f-sm);
    color: var(--tx-3);
    margin-bottom: var(--s-5);
    line-height: 1.55;
}

.auth-pie {
    text-align: center;
    margin-top: var(--s-5);
    font-size: var(--f-sm);
    color: var(--tx-3);
}
.auth-pie a { font-weight: var(--fw-sb); }

.auth-links {
    display: flex;
    justify-content: flex-end;
    margin: calc(var(--s-2) * -1) 0 var(--s-4);
}
.auth-links a { font-size: var(--f-sm); font-weight: var(--fw-m); }

/* ── Mensajes de resultado ───────────────────────────────────── */
/* role="alert" en el HTML: el lector de pantalla lo anuncia solo. */
.mensaje {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3);
    border-radius: var(--r-md);
    font-size: var(--f-sm);
    font-weight: var(--fw-m);
    line-height: 1.5;
    margin-bottom: var(--s-4);
    animation: slide-up var(--t-md);
}
.mensaje-error { background: var(--alert-bg); color: var(--alert-tx); }
.mensaje-ok    { background: var(--ok-bg);    color: var(--ok-tx); }
.mensaje-info  { background: var(--info-bg);  color: var(--info-tx); }
.mensaje[hidden] { display: none; }

/* ── Campo de contraseña con botón mostrar/ocultar ───────────── */
.password-campo { position: relative; }
.password-campo .input { padding-right: 52px; }
.password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--f-lg);
    color: var(--tx-3);
}
.password-toggle:hover { background: var(--bg-hover); }

/* Medidor de fortaleza: tres barras y una etiqueta de texto, para
   que la señal no dependa solo del color. */
.fuerza { display: flex; gap: 4px; margin-top: var(--s-2); }
.fuerza span {
    flex: 1;
    height: 4px;
    border-radius: var(--r-full);
    background: var(--bd);
    transition: background var(--t);
}
.fuerza[data-nivel="1"] span:nth-child(1) { background: var(--alert); }
.fuerza[data-nivel="2"] span:nth-child(-n+2) { background: var(--warn); }
.fuerza[data-nivel="3"] span { background: var(--ok); }

/* ================================================================
   ASISTENTE DE PRIMER NEGOCIO
   Se muestra dentro de app.html cuando el usuario entra y todavía
   no tiene ningún negocio creado.
   ================================================================ */
.onboarding {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-5) var(--s-4);
    background: var(--bg-page);
}
.onboarding-caja { width: 100%; max-width: 460px; }

.onboarding-pasos {
    display: flex;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
}
.onboarding-pasos span {
    flex: 1;
    height: 5px;
    border-radius: var(--r-full);
    background: var(--bd);
}
.onboarding-pasos span.activo { background: var(--brand); }

/* Grilla de rubros para elegir de un toque. */
.rubros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-2);
}
.rubro-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    min-height: 84px;
    padding: var(--s-2);
    border-radius: var(--r-md);
    border: 2px solid var(--bd);
    background: var(--bg-card);
    font-size: var(--f-xs);
    font-weight: var(--fw-sb);
    color: var(--tx-2);
    text-align: center;
    line-height: 1.2;
    transition: all var(--t);
}
.rubro-btn .rubro-icono { font-size: var(--f-2xl); }
.rubro-btn[aria-pressed="true"] {
    border-color: var(--brand);
    background: var(--brand-bg);
    color: var(--brand);
}