/* login.css (usa variables de main.css) */

body{
  background: var(--brand-bg);
  color: var(--brand-text);
}

/* Card principal del login */
.card{
  background: var(--ui-card);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--brand-text);
  box-shadow: var(--ui-shadow);
}

/* textos secundarios */
.muted{ color: var(--ui-muted); }

/* logo / badge */
.brand{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(238,120,38,.30);
  background: rgba(238,120,38,.12);
  color: var(--brand-orange-2);
  font-weight: 900;
}

/* Inputs */
.form-control{
  background: var(--ui-input-bg);
  border: 1px solid var(--ui-input-border);
  color: var(--brand-text);
}

.form-control::placeholder{
  color: rgba(68,68,68,.55);
}

.form-control:focus{
  background: var(--brand-white);
  border-color: var(--brand-orange);
  color: var(--brand-text);
  box-shadow: 0 0 0 .2rem var(--ui-focus);
  outline: none;
}

/* Botón estilo "Microsoft" (claro, pero con toque marca) */
.btn-microsoft{
  border: 1px solid var(--ui-input-border);
  background: rgba(255,255,255,.85);
  color: var(--brand-text);
}

.btn-microsoft:hover{
  background: rgba(238,120,38,.10);
  border-color: rgba(238,120,38,.35);
  color: var(--brand-text);
}

/* Botón principal de marca (si lo usas) */
.btn-brand{
  background: var(--brand-orange);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--brand-white);
  box-shadow: 0 8px 18px rgba(238,120,38,.22);
}

.btn-brand:hover{
  background: var(--brand-orange-2);
  color: var(--brand-white);
}

/* Alertas */
.alert{
  background: rgba(238,120,38,.10);
  border: 1px solid rgba(238,120,38,.22);
  color: var(--brand-text);
}

/* Links */
a{ color: var(--brand-orange-2); }
a:hover{ color: var(--brand-orange); }