/* === Login form centered & compact === */
.com-users-login {
	max-width: 480px;
	margin: 4rem auto;
	padding: 2.5rem;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Center page vertically a bit more on large screens */
@media (min-width: 992px) {
	.com-users-login {
		margin-top: 6rem;
	}
}

/* Buttons full width (login looks cleaner) */
.com-users-login .btn-primary {
	width: 100%;
}

/* Space between actions row */
.com-users-login__links {
	margin-top: 1rem;
}

/* Register button aligned nicely */
.com-users-login__links .btn-success {
	white-space: nowrap;
}


/* === Fine-tuning: username shorter, password full, centered buttons === */

/* Username input: narrower and centered */
.com-users-login input#username {
	max-width: 260px;        /* ajustá 220–300 a gusto */
	margin-left: auto;
	margin-right: auto;
}

/* Center the username label too */
.com-users-login label[for="username"] {
	display: block;
	max-width: 260px;
	margin-left: auto;
	margin-right: auto;
}

/* Password stays full width (default), but keep label aligned naturally */
.com-users-login input#password {
	width: 100%;
}

/* Login button smaller and centered */
.com-users-login .btn-primary {
	width: auto;             /* override previous 100% */
	min-width: 160px;
	padding-left: 2rem;
	padding-right: 2rem;
	display: inline-block;
}

/* Center the submit button container */
.com-users-login .com-users-login__submit {
	text-align: center;
}

/* Register button centered at the bottom */
.com-users-login__links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

/* If your "Forgot..." links should remain left, but Register centered:
   comment the block above and use this instead:
*/
/*
.com-users-login__links {
	position: relative;
}
.com-users-login__links a.btn-success {
	display: block;
	width: fit-content;
	margin: 1rem auto 0;
}
*/

/* ===== Login links layout fix ===== */

/* Convertimos el bloque en columna */
.com-users-login__links {
	flex-direction: column;
	align-items: center !important;
	text-align: center;
	gap: 0.75rem;
}

/* Los links "Forgot..." alineados juntos */
.com-users-login__links .com-users-login__link {
	margin: 0;
}

/* Anulamos el empuje a la derecha del botón */
.com-users-login__links .btn-success {
	margin-left: 0 !important;   /* mata ms-auto */
	margin-top: 0.75rem;
}

/* Botón Register centrado */
.com-users-login__links .btn-success {
	display: inline-block;
}

/* ===== Centered login alert ===== */

/* Contenedor general del mensaje */
#system-message-container {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

/* El alert en sí */
#system-message-container joomla-alert {
	max-width: 420px;          /* similar al login card */
	width: 100%;
	text-align: left;
}

/* Opcional: un poco más de aire */
#system-message-container .alert {
	border-radius: 6px;
}

/* ===== Compact spacing between alert and login card ===== */

#system-message-container {
	display: flex;
	justify-content: center;
	margin-top: 1rem;      /* antes 1.5rem */
	margin-bottom: 0.25rem; /* 👈 clave: mucho más chico */
}

#system-message-container joomla-alert {
	max-width: 420px;
	width: 100%;
}

/* Reducir espacio superior del card SOLO en login */
.com-users-login {
	margin-top: 0 !important;
	padding-top: 0.75rem;
}

/* =========================================================
   Joomla Users Profile Edit - Card layout
   URL típica: com_users / view=profile / layout=edit
   ========================================================= */

/* Fondo suave */
body.com_users.view-profile.layout-edit {
  background: #f5f7fb;
}

/* Limitar ancho y centrar el “component” */
body.com_users.view-profile.layout-edit main,
body.com_users.view-profile.layout-edit #component,
body.com_users.view-profile.layout-edit .site-component,
body.com_users.view-profile.layout-edit .container-component,
body.com_users.view-profile.layout-edit .container {
  /* no todos existen según template; por eso varios */
}

/* Card sobre el form */
body.com_users.view-profile.layout-edit form#member-profile,
body.com_users.view-profile.layout-edit form#profile-form,
body.com_users.view-profile.layout-edit form {
  max-width: 820px;
  margin: 28px auto 60px auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 28px 28px 22px 32px;
}

/* Título */
/*body.com_users.view-profile.layout-edit h1,
body.com_users.view-profile.layout-edit h2 {
  max-width: 980px;
  margin: 0 auto 14px auto;
  padding: 0 4px;
}*/
body.com_users.view-profile.layout-edit h1,
body.com_users.view-profile.layout-edit h2,
body.com_users.view-profile.layout-edit .alert,
body.com_users.view-profile.layout-edit .system-message {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
/* Inputs: que no se estiren infinito */
body.com_users.view-profile.layout-edit input[type="text"],
body.com_users.view-profile.layout-edit input[type="email"],
body.com_users.view-profile.layout-edit input[type="password"],
body.com_users.view-profile.layout-edit select,
body.com_users.view-profile.layout-edit textarea {
  max-width: 520px;
}

/* Mensaje “privacy policy” como card centrado */
body.com_users.view-profile.layout-edit .alert,
body.com_users.view-profile.layout-edit .system-message,
body.com_users.view-profile.layout-edit .joomla-alert,
body.com_users.view-profile.layout-edit .message {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile */
@media (max-width: 700px) {
  body.com_users.view-profile.layout-edit form#member-profile,
  body.com_users.view-profile.layout-edit form#profile-form,
  body.com_users.view-profile.layout-edit form {
    padding: 18px;
    margin: 16px 12px 40px 12px;
  }

  body.com_users.view-profile.layout-edit input[type="text"],
  body.com_users.view-profile.layout-edit input[type="email"],
  body.com_users.view-profile.layout-edit input[type="password"],
  body.com_users.view-profile.layout-edit select,
  body.com_users.view-profile.layout-edit textarea {
    max-width: 100%;
  }
}