/* Login compact theme – minimal, moderno y ahorrador de espacio
   ⤷ NO cambia nombres de inputs ni rutas; solo estilos.  */
:root{
  --brand-primary: #38475f;   /* color barra principal */
  --brand-accent:  #2563eb;   /* acento (botón/enfoque) */
  --surface:       #f7f8fb;
  --border:        #a6a6a6;
  --text:          #111827;
  --muted:         #95989c;
  --radius:        8px;
  --radius-sm:     5px;
  --shadow:        0 16px 48px rgba(15,23,42,.12);
}

html, body{ height: 100%; }
body.login-compact{
  margin: 0;
  background: var(--surface);
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px !important;
  color: var(--text);
}

/* Tarjeta compacta */
.login-card{
  width: min(92vw, 340px);  /* más pequeño */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Encabezado minimal */
.login-header{
  background: var(--brand-primary);
  color: #fff;
  padding: .55rem .8rem;
  text-align: center;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .2px;
}

/* Cuerpo con poco padding */
.login-body{ padding: 12px; }

/* Etiquetas e inputs delgados */
.login-body .form-label{
  margin-bottom: .25rem;
  font-weight: 700;
  font-size: .85rem;
  color: var(--text);
}
.login-body .form-control{
  height: 32px;                   /* input delgado */
  padding: .2rem .5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.login-body .form-control:focus{
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 .14rem rgba(37,99,235,.16);
}

/* Toggle de contraseña integrado al input-group */
.login-body .input-group .btn.toggle-pass{
  height: 32px;
  padding: 0 .5rem;
  border: 1px solid var(--border);
  border-left: 0;
  color: var(--muted);
  background: #fff;
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.login-body .btn-brand:hover{ filter: brightness(0.96); }

/* Meta / mensajes */
.login-meta{ color: var(--muted); font-size: .78rem; }
.alert{ border-radius: var(--radius-sm); padding: .4rem .6rem; font-size: .85rem; }

/* Utilidad opcional si ya tenías contenedores previos */
.container-login-center{
  min-height: 80dvh;
  display: grid;
  justify-content: center;   /* centrado horizontal */
  align-content: start;      /* anclar arriba */
  padding-top: 8vh;          /* separarlo del borde superior */
}