/* =========================================================
   CooBook Auth (Login / Signup) — SOLO para páginas con:
   body.cb-auth  (ej: cb-auth cb-login / cb-auth cb-signup)
   ========================================================= */

.cb-auth {
  /* NO toques el font del body global; solo fondo de auth */
  background: radial-gradient(1100px 500px at 50% 10%, rgba(0, 82, 255, 0.10), transparent 55%),
              radial-gradient(900px 420px at 15% 35%, rgba(0, 82, 255, 0.08), transparent 60%),
              radial-gradient(900px 420px at 85% 35%, rgba(0, 82, 255, 0.06), transparent 60%),
              #ffffff;
}

/* 1) Evitar que el auth “pise” el footer: reserva espacio inferior */
.cb-auth #wrapper,
.cb-auth .site,
.cb-auth main,
.cb-auth .container-component {
  padding-bottom: 180px; /* ajusta 140–240 según tu footer */
}

/* 2) Asegura que el footer NO herede estilos raros del auth */
.cb-auth footer,
.cb-auth .footer,
.cb-auth .site-footer,
.cb-auth .footer-modules,
.cb-auth .footer a,
.cb-auth .footer p,
.cb-auth .footer h1,
.cb-auth .footer h2,
.cb-auth .footer h3,
.cb-auth .footer h4,
.cb-auth .footer h5,
.cb-auth .footer h6 {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

/* 3) Centrado elegante del componente de usuarios */
.cb-auth .container-component {
  max-width: 1100px;
}

.cb-auth .container-component > .com-users,
.cb-auth .container-component > .com-users__form,
.cb-auth .container-component > .com-users form,
.cb-auth .container-component form {
  display: grid;
  place-items: start center;
}

/* 4) Tarjeta CooBook: no genérica */
.cb-auth .com-users,
.cb-auth .com-users__form,
.cb-auth .login,
.cb-auth .registration,
.cb-auth .reset,
.cb-auth .remind {
  width: min(560px, calc(100% - 32px));
  margin: clamp(28px, 4vw, 56px) auto 0;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 22px 60px rgba(0, 20, 80, 0.12),
    0 1px 0 rgba(255,255,255,0.6) inset;
}

/* Detalle superior (línea tecnológica) */
.cb-auth .com-users::before,
.cb-auth .com-users__form::before,
.cb-auth .login::before,
.cb-auth .registration::before,
.cb-auth .reset::before,
.cb-auth .remind::before {
  content: "";
  display: block;
  height: 3px;
  margin: -32px -32px 22px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, rgba(0, 82, 255, 0.0), rgba(0, 82, 255, 0.55), rgba(0, 82, 255, 0.0));
}

/* 5) Títulos y microcopy */
.cb-auth h1, .cb-auth h2, .cb-auth h3 {
  margin: 0 0 10px;
  color: #0b1220;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.cb-auth .form-text,
.cb-auth small,
.cb-auth .help-block,
.cb-auth .form-text.text-muted {
  color: rgba(11, 18, 32, 0.65);
}

/* 6) Labels y spacing */
.cb-auth .control-group,
.cb-auth .form-group {
  margin-bottom: 16px;
}

.cb-auth label {
  display: inline-block;
  margin-bottom: 8px;
  color: rgba(11, 18, 32, 0.85);
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* 7) Inputs: premium */
.cb-auth input[type="text"],
.cb-auth input[type="email"],
.cb-auth input[type="password"],
.cb-auth input[type="tel"],
.cb-auth input[type="url"],
.cb-auth textarea,
.cb-auth select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(11, 18, 32, 0.14);
  background: rgba(255,255,255,0.92);
  padding: 12px 14px;
  outline: none;
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset;
}

.cb-auth input:focus,
.cb-auth select:focus,
.cb-auth textarea:focus {
  border-color: rgba(0, 82, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(0, 82, 255, 0.12);
}

/* 8) Checkbox “Recuérdeme” alineado bonito */
.cb-auth .form-check,
.cb-auth .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.cb-auth input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #0052ff;
}

/* 9) Botones */
.cb-auth .btn,
.cb-auth button,
.cb-auth input[type="submit"] {
  border-radius: 14px !important;
}

.cb-auth .btn-primary,
.cb-auth button[type="submit"],
.cb-auth input[type="submit"] {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  cursor: pointer;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: linear-gradient(180deg, #0a57ff, #0047da);
  box-shadow: 0 16px 35px rgba(0, 82, 255, 0.28);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.cb-auth .btn-primary:hover,
.cb-auth button[type="submit"]:hover,
.cb-auth input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 45px rgba(0, 82, 255, 0.34);
}

.cb-auth .btn-primary:active,
.cb-auth button[type="submit"]:active,
.cb-auth input[type="submit"]:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* 10) Links del formulario (sin tocar links del footer) */
.cb-auth .com-users a,
.cb-auth .login a,
.cb-auth .registration a,
.cb-auth .reset a,
.cb-auth .remind a {
  color: #0a57ff;
  text-decoration: none;
  font-weight: 650;
}

.cb-auth .com-users a:hover,
.cb-auth .login a:hover,
.cb-auth .registration a:hover,
.cb-auth .reset a:hover,
.cb-auth .remind a:hover {
  text-decoration: underline;
}

/* 11) Dropdown/acciones debajo del login: que se vea pro */
.cb-auth .com-users .list-group,
.cb-auth .login .list-group {
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(11, 18, 32, 0.10);
  background: rgba(255,255,255,0.78);
}

.cb-auth .list-group-item {
  border: 0;
  padding: 12px 14px;
  background: transparent;
}

.cb-auth .list-group-item + .list-group-item {
  border-top: 1px solid rgba(11, 18, 32, 0.08);
}

/* =========================================================
   OJO (toggle password) A LA DERECHA — sin tocar HTML
   ========================================================= */

/* Compat: Joomla suele envolver password en .input-group */
.cb-auth .input-group {
  position: relative;
  width: 100%;
}

/* Deja espacio a la derecha para el botón */
.cb-auth .input-group > input[type="password"],
.cb-auth .input-group > input[type="text"] {
  padding-right: 48px;
}

/* Botón del ojo al lado derecho, centrado */
.cb-auth .input-group .btn,
.cb-auth .input-group button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px !important;
  border: 1px solid rgba(11, 18, 32, 0.10);
  background: rgba(245, 248, 255, 0.9);
  box-shadow: 0 10px 18px rgba(0, 20, 80, 0.10);
  display: grid;
  place-items: center;
}

/* Si el botón del ojo trae icono svg/i */
.cb-auth .input-group .btn svg,
.cb-auth .input-group button svg,
.cb-auth .input-group .btn i,
.cb-auth .input-group button i {
  pointer-events: none;
}

/* =========================================================
   Responsive: no se rompa en móvil
   ========================================================= */
@media (max-width: 640px) {
  .cb-auth .com-users,
  .cb-auth .com-users__form,
  .cb-auth .login,
  .cb-auth .registration,
  .cb-auth .reset,
  .cb-auth .remind {
    width: calc(100% - 24px);
    margin-top: 18px;
    padding: 18px;
    border-radius: 16px;
  }

  .cb-auth .com-users::before,
  .cb-auth .com-users__form::before,
  .cb-auth .login::before,
  .cb-auth .registration::before,
  .cb-auth .reset::before,
  .cb-auth .remind::before {
    margin: -18px -18px 16px;
  }

  .cb-auth #wrapper,
  .cb-auth .site,
  .cb-auth main,
  .cb-auth .container-component {
    padding-bottom: 100px; /* más aire en móvil */
  }
}