/* ==========================================================================
   CRM-FOR-ADS · Client login (passwordless) — ported verbatim from the
   approved design export "Ingreso Cliente.html". Tokens come from
   clientes.css (AdGrid set); nothing here redefines a token.
   ========================================================================== */

/* ===== Auth screen (standalone, no app shell) ===== */
.auth{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-xl) var(--space-md); background:var(--surface-app);}
.auth__wrap{width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center;}
.auth__brand{display:flex; align-items:center; gap:10px; margin-bottom:var(--space-lg);}
.auth__brand img{width:34px; height:34px;}
.auth__brand .name{font-family:var(--font-mono); font-weight:600; font-size:var(--text-xl); color:var(--text-strong); letter-spacing:var(--tracking-tight);}
.auth-card{
  width:100%; background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-xl);
}
.auth-card__icon{
  width:46px; height:46px; border-radius:var(--radius-lg); background:var(--blue-50);
  color:var(--blue-600); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-md);
}
.auth-card h1{font-size:var(--text-xl); color:var(--text-strong); margin-bottom:6px;}
.auth-card .lead{font-size:var(--text-sm); color:var(--text-muted); line-height:1.55; margin:0 0 var(--space-lg);}
.auth-card .lead b{color:var(--text-strong); font-weight:600; word-break:break-word;}
.btn--block{width:100%; justify-content:center;}
.auth__foot{margin-top:var(--space-lg); font-size:var(--text-xs); color:var(--text-faint); text-align:center; line-height:1.6; max-width:360px;}
.auth__foot a{color:var(--text-muted); font-weight:600;}
.auth__foot a:hover{color:var(--text-accent);}

/* success/security note shown after sending */
.auth-note{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--radius-md);
  background:var(--info-bg); border:1px solid var(--blue-100); color:var(--blue-900);
  font-size:var(--text-xs); line-height:1.5; margin-bottom:var(--space-lg);
}
.auth-note svg{flex-shrink:0; color:var(--blue-600); margin-top:1px;}

/* confirmation hint after resend */
.resend-hint{font-size:var(--text-xs); color:var(--success); font-weight:600; display:none; align-items:center; gap:6px; margin-top:10px;}
.resend-hint.show{display:flex;}
.resend-hint svg{stroke:var(--success);}

/* ===== 6-digit code input ===== */
.code-input{display:flex; gap:10px; justify-content:space-between;}
.code-input input{
  width:100%; aspect-ratio:1/1; min-width:0; text-align:center;
  font-family:var(--font-mono); font-size:var(--text-2xl); font-weight:600; color:var(--text-strong);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface-card);
  transition:border-color var(--base) var(--ease), box-shadow var(--base) var(--ease), background var(--base) var(--ease);
  -moz-appearance:textfield;
}
.code-input input::-webkit-outer-spin-button,.code-input input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.code-input input:focus{outline:none; border-color:var(--color-primary); box-shadow:var(--ring-focus);}
.code-input input.is-filled{border-color:var(--color-primary); background:var(--blue-50);}
.code-input.is-error input{border-color:var(--destructive);}
.code-input.is-error input:focus{box-shadow:0 0 0 3px rgba(220,38,38,.22);}

/* code-level error line */
.code-error{font-size:var(--text-xs); color:var(--destructive); margin-top:12px; display:none; align-items:flex-start; gap:6px; line-height:1.5;}
.code-error svg{flex-shrink:0; margin-top:1px;}
.code-error.show{display:flex;}
.code-error b{font-weight:600;}

/* secondary action row */
.auth-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:var(--space-lg); flex-wrap:wrap;}
.auth-link{background:none; border:none; padding:6px 4px; margin:-6px -4px; cursor:pointer; font-family:var(--font-sans); font-size:var(--text-sm); font-weight:600; color:var(--text-accent); border-radius:var(--radius-sm); transition:color var(--base) var(--ease);}
.auth-link:hover:not(:disabled){color:var(--amber-700);}
.auth-link:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.auth-link:disabled{color:var(--text-faint); cursor:not-allowed;}
.auth-link.is-count{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

.field .error-msg.show{display:flex;}

@media (max-width:400px){
  .auth-card{padding:var(--space-lg);}
  .code-input{gap:7px;}
}