/*
 * Acceso a /my/: login (authentication), registro (registration) y
 * recuperar contraseña (password). Formulario a la izquierda y panel de
 * argumentos a la derecha; en móvil y dentro de la app, solo el formulario.
 * Todo cuelga de #content #gx-auth: dos ids, para ganar a las reglas del
 * tema (#authentication #login-form …) sin !important.
 */

body#authentication main,
body#authentication #wrapper,
body#registration main,
body#registration #wrapper,
body#password main,
body#password #wrapper {
  background: #f4f6f8;
}

body#authentication #content,
body#registration #content,
body#password #content {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body #content #gx-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1080px;
  min-height: 580px;
  margin: 32px auto 56px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .08);
}

body #content #gx-auth.gx-auth--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 520px;
  min-height: 0;
}

body #content #gx-auth .gx-auth-main {
  display: flex;
  align-items: center;
  padding: 56px 64px;
}

body #content #gx-auth.gx-auth--single .gx-auth-main {
  padding: 48px 56px;
}

body #content #gx-auth .gx-auth-main-inner {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

body #content #gx-auth .gx-auth-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 0 20px;
  color: #007299;
  background: #e6f2f6;
  border-radius: 12px;
}

body #content #gx-auth .gx-auth-badge svg {
  width: 24px;
  height: 24px;
}

body #content #gx-auth .gx-auth-badge--ok {
  color: #067647;
  background: #dcfae6;
}

body #content #gx-auth .gx-auth-title {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
  color: #1d1d1f;
}

body #content #gx-auth .gx-auth-lead {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.5;
  color: #667085;
}

/* Campos: etiqueta visible encima, sin la rejilla col-md-3 / col-md-6. */
body #content #gx-auth .login-form,
body #content #gx-auth .register-form,
body #content #gx-auth .forgotten-password,
body #content #gx-auth .renew-password {
  margin: 0;
  padding: 0;
}

body #content #gx-auth .form-group {
  display: block;
  margin: 0 0 18px;
  text-align: left;
}

body #content #gx-auth .form-group > [class*="col-md-"] {
  position: static;
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0;
}

body #content #gx-auth .form-control-label {
  display: block;
  width: auto;
  max-width: none;
  flex: none;
  margin: 0 0 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  color: #344054;
}

body #content #gx-auth .form-group:has(.custom-checkbox) > .form-control-label {
  display: none;
}

body #content #gx-auth .input-group {
  display: block;
  position: relative;
  width: 100%;
}

body #content #gx-auth .form-control {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  height: 48px;
  padding: 12px 14px;
  font-size: 15px;
  color: #1d1d1f;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}

body #content #gx-auth .form-control.js-visible-password {
  padding-right: 52px;
}

body #content #gx-auth input[name="email"]::placeholder,
body #content #gx-auth input[name="password"]::placeholder {
  color: transparent;
}

body #content #gx-auth .form-control:focus {
  border-color: #007299;
  box-shadow: 0 0 0 3px rgba(0, 114, 153, .15);
  outline: none;
}

body #content #gx-auth .input-group.focus {
  outline: none;
}

body #content #gx-auth .input-group .input-group-btn {
  top: 0;
  right: 14px;
  height: 100%;
  padding: 0;
}

/* «opcional» a la altura de la etiqueta, alineado a la derecha. */
body #content #gx-auth .form-group-with-comment {
  position: relative;
}

body #content #gx-auth .form-control-comment {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #667085;
}

/* Registro: nombre y apellidos en la misma fila. */
body #content #gx-auth #customer-form > section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 16px;
}

body #content #gx-auth #customer-form > section > * {
  grid-column: 1 / -1;
}

body #content #gx-auth #customer-form > section > .form-group:has(input[name="firstname"]),
body #content #gx-auth #customer-form > section > .form-group:has(input[name="lastname"]) {
  grid-column: auto;
}

/* Casilla de privacidad. */
body #content #gx-auth .custom-checkbox {
  display: block;
}

body #content #gx-auth .custom-checkbox label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

body #content #gx-auth .custom-checkbox input[type="checkbox"] + span {
  flex: 0 0 20px;
  margin: 1px 0 0;
}

body #content #gx-auth .custom-checkbox-label {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #667085;
}

/* Enlaces y botón. */
body #content #gx-auth .gx-auth-forgot {
  margin: -6px 0 24px;
  font-size: 13px;
  text-align: right;
}

body #content #gx-auth .gx-auth-forgot a,
body #content #gx-auth .gx-auth-alt a {
  font-weight: 600;
  color: #007299;
}

body #content #gx-auth .gx-auth-forgot a:hover,
body #content #gx-auth .gx-auth-alt a:hover {
  color: #005a7a;
  text-decoration: underline;
}

body #content #gx-auth .form-footer {
  margin: 8px 0 0;
  text-align: center;
}

body #content #gx-auth .form-footer .btn-primary,
body #content #gx-auth .gx-auth-submit {
  display: block;
  float: none;
  width: 100%;
  min-width: 0;
  height: 50px;
  margin: 0;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 50px;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  background: #007299;
  border: 0;
  border-radius: 999px;
  transition: background-color .15s;
}

body #content #gx-auth .form-footer .btn-primary:hover,
body #content #gx-auth .form-footer .btn-primary:focus,
body #content #gx-auth .gx-auth-submit:hover,
body #content #gx-auth .gx-auth-submit:focus {
  background: #005a7a;
}

body #content #gx-auth .gx-auth-alt {
  margin: 28px 0 0;
  font-size: 14px;
  text-align: center;
  color: #667085;
}

/* Mensajes de PrestaShop: errores del formulario y aviso de enlace enviado. */
body #content #gx-auth .help-block ul,
body #content #gx-auth .ps-alert-error,
body #content #gx-auth .ps-alert-success {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

body #content #gx-auth .ps-alert-error:empty {
  display: none;
}

body #content #gx-auth .help-block .alert-danger,
body #content #gx-auth .ps-alert-error .item,
body #content #gx-auth .ps-alert-success .item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  border: 0;
  border-radius: 10px;
}

body #content #gx-auth .help-block .alert-danger,
body #content #gx-auth .ps-alert-error .item {
  color: #b42318;
  background: #fef3f2;
}

/* Error de un campo (correo ya en uso…): texto pegado al campo, sin caja. */
body #content #gx-auth .form-group .help-block {
  margin: 0;
  padding: 0;
}

body #content #gx-auth .form-group .help-block ul {
  margin: 6px 0 0;
}

body #content #gx-auth .form-group .help-block .alert-danger {
  padding: 0;
  font-size: 13px;
  background: transparent;
}

body #content #gx-auth .ps-alert-success .item {
  color: #067647;
  background: #ecfdf3;
}

body #content #gx-auth .ps-alert-error .item i,
body #content #gx-auth .ps-alert-success .item i {
  display: none;
}

body #content #gx-auth .ps-alert-error .item p,
body #content #gx-auth .ps-alert-success .item p {
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
}

/* Panel de argumentos: foto arriba y texto normal sobre blanco. */
body #content #gx-auth .gx-auth-aside {
  display: flex;
  flex-direction: column;
  color: #344054;
  background: #fff;
  border-left: 1px solid #eaecf0;
}

body #content #gx-auth .gx-auth-aside-photo {
  height: 240px;
  overflow: hidden;
  background: #d9cfc1;
}

body #content #gx-auth .gx-auth-aside-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

body #content #gx-auth .gx-auth-aside-head {
  padding: 36px 56px 0;
}

body #content #gx-auth .gx-auth-aside-title {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-transform: none;
  color: #1d1d1f;
}

body #content #gx-auth .gx-auth-aside-body {
  padding: 0 56px 40px;
}

body #content #gx-auth .gx-auth-aside ul {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body #content #gx-auth .gx-auth-aside li {
  display: flex;
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: inherit;
}

body #content #gx-auth .gx-auth-aside-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: #007299;
  background: #e6f2f6;
  border-radius: 10px;
}

body #content #gx-auth .gx-auth-aside-icon svg {
  width: 20px;
  height: 20px;
}

/* Móvil y tableta: solo el formulario, sin tarjeta. */
@media (max-width: 991px) {
  body#authentication main,
  body#authentication #wrapper,
  body#registration main,
  body#registration #wrapper,
  body#password main,
  body#password #wrapper {
    background: #fff;
  }

  body #content #gx-auth,
  body #content #gx-auth.gx-auth--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body #content #gx-auth .gx-auth-main,
  body #content #gx-auth.gx-auth--single .gx-auth-main {
    padding: 24px 4px 40px;
  }

  body #content #gx-auth .gx-auth-aside {
    display: none;
  }
}

@media (max-width: 400px) {
  body #content #gx-auth #customer-form > section > .form-group:has(input[name="firstname"]),
  body #content #gx-auth #customer-form > section > .form-group:has(input[name="lastname"]) {
    grid-column: 1 / -1;
  }
}

/*
 * Dentro de la app (html.gx-app, ver head.tpl): sin panel ni enlaces que
 * lleven al login web. La app tiene su propio login y su botón «Volver».
 */
html.gx-app body#authentication main,
html.gx-app body#authentication #wrapper,
html.gx-app body#registration main,
html.gx-app body#registration #wrapper,
html.gx-app body#password main,
html.gx-app body#password #wrapper {
  background: #fff;
}

html.gx-app body #content #gx-auth,
html.gx-app body #content #gx-auth.gx-auth--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

html.gx-app body #content #gx-auth .gx-auth-main {
  padding: 16px 4px 32px;
}

html.gx-app body #content #gx-auth .gx-auth-aside,
html.gx-app body #content #gx-auth .gx-auth-alt {
  display: none;
}