/* =========================================================================
   EBC Frenos — Login + Registro (customer/authentication.tpl + registration.tpl)
   Layout partido del Auth.jsx del Design System: panel de marca negro + form.
   El formulario lo sigue renderizando PrestaShop (login-form / customer-form):
   aquí solo maquetamos el contenedor y damos polish a los campos Bootstrap.
   Scopeado bajo .ebc-auth (solo existe en estas vistas).
   ========================================================================= */

.ebc-auth {
  max-width: 1040px;
  margin: clamp(8px, 3vw, 32px) auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
}

/* ---------- Panel de marca (negro) ---------- */
.ebc-auth__brand {
  position: relative;
  background: var(--black);
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 4vw, 48px);
  min-height: 520px;
}
.ebc-auth__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(224,2,9,.18), transparent 45%);
  pointer-events: none;
}
.ebc-auth__brand::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -16%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 26px solid rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 14px rgba(255,255,255,.03);
  opacity: .7;
  pointer-events: none;
}
.ebc-auth__brand-inner { position: relative; }
.ebc-auth__brand-logo { height: 28px; width: auto; margin-bottom: 24px; background: #fff; padding: 5px 9px; border-radius: 6px; box-sizing: content-box; box-shadow: 0 1px 3px rgba(0,0,0,.38), inset 0 0 0 1px rgba(0,0,0,.06); }
.ebc-auth__brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin: 0 0 20px;
  color: #fff;
}
.ebc-auth__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ebc-auth__point { display: flex; align-items: center; gap: 12px; }
.ebc-auth__point-ico {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--red-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ring-onblack);
}
.ebc-auth__point > span:last-child {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: rgba(255,255,255,.85);
  line-height: 1.4;
}
.ebc-auth__badges { margin-top: 24px; display: flex; gap: 6px; flex-wrap: wrap; }
.ebc-auth__badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}

/* ---------- Columna de formulario ---------- */
.ebc-auth__form {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ebc-auth__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0 0 6px;
}
.ebc-auth__lead {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 24px;
}

/* Polish de los campos que pinta PrestaShop (Bootstrap form-group) */
.ebc-auth__form .form-group,
.ebc-auth__form .form-field { margin-bottom: 14px; }
.ebc-auth__form label:not(.form-check-label):not(.custom-control-label):not(.psgdpr_consent_message) {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
  margin-bottom: 6px;
}
.ebc-auth__form .form-control {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 13px;
  font-size: 15px;
  background: var(--surface-card);
  color: var(--text-strong);
  width: 100%;
}
.ebc-auth__form .form-control:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(0,55,141,.12);
  outline: none;
}
.ebc-auth__form .form-control-comment,
.ebc-auth__form .help-block,
.ebc-auth__form small {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}
.ebc-auth__form .text-danger,
.ebc-auth__form .help-block-error li,
.ebc-auth__form .js-invalid-feedback-browser {
  color: var(--red-600);
  font-size: 12.5px;
}

/* Botones — el submit es la ACCIÓN principal de la vista → rojo (regla EBC:
   primary = acción). Se pisa el mapping global de .btn-primary (azul) solo aquí.
   Scopeado al submit (buttons-wrapper / form-control-submit) para NO arrastrar
   al botón de "mostrar contraseña", que vive dentro de un .input-group. */
.ebc-auth__form .buttons-wrapper .btn-primary,
.ebc-auth__form .btn-primary.form-control-submit {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--action);
  border: 1.5px solid var(--action);
  color: var(--action-on);
}
.ebc-auth__form .buttons-wrapper .btn-primary:hover,
.ebc-auth__form .buttons-wrapper .btn-primary:focus,
.ebc-auth__form .btn-primary.form-control-submit:hover,
.ebc-auth__form .btn-primary.form-control-submit:focus {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--action-on);
}

/* Botón de mostrar/ocultar contraseña: neutro, ancho automático (Bootstrap lo
   mete dentro de un .input-group y por defecto heredaría el rojo del submit). */
.ebc-auth__form .input-group .btn,
.ebc-auth__form .password-field .btn {
  width: auto;
  flex: none;
  background: var(--surface-2, #f1f3f6);
  border: 1px solid var(--border);
  border-left: 0;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.ebc-auth__form .input-group .btn:hover { color: var(--text-strong); }
.ebc-auth__form .buttons-wrapper {
  display: flex;
  flex-direction: column-reverse; /* submit arriba (full width), olvidé-contraseña debajo */
  align-items: stretch;
  gap: 12px;
  margin-top: 6px;
}
.ebc-auth__form .btn-basic {
  background: transparent;
  border: none;
  color: var(--text-link);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: center;
  padding: 2px;
}
.ebc-auth__form .btn-basic:hover { color: var(--text-link-hover); text-decoration: underline; }

/* Checkboxes (RGPD, recordarme, newsletter) */
.ebc-auth__form .custom-checkbox,
.ebc-auth__form .form-check { font-family: var(--font-body); font-size: 13.5px; color: var(--text-body); }
.ebc-auth__form .custom-checkbox a,
.ebc-auth__form .form-check a { color: var(--text-link); }

.ebc-auth hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 20px 0;
}
.ebc-auth__alt {
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  margin: 22px 0 0;
}
.ebc-auth__alt a { color: var(--text-link); font-weight: 600; }
.ebc-auth__alt a:hover { color: var(--text-link-hover); }

/* ---------- Registro: bloque más ancho + formulario a 2 columnas ----------
   El registro tiene ~10 campos; con el layout del login (1040px, 50/50) la
   columna del formulario queda en ~420px y la página se alarga mucho. En
   escritorio ensanchamos el bloque, damos más peso a la columna del formulario
   y repartimos los campos en dos columnas. Nombre/apellidos, email/contraseña,
   etc. van lado a lado; tratamiento, RGPD y demás checkboxes a ancho completo. */
@media (min-width: 992px) {
  .ebc-auth--register {
    max-width: 1180px;
    grid-template-columns: 42% 58%;
  }
  .ebc-auth--register .ebc-auth__form { padding: clamp(32px, 3.2vw, 52px); }

  .ebc-auth--register .ebc-auth__form form > section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 14px;
    align-items: start;
  }
  /* cada celda no debe desbordar el track */
  .ebc-auth--register .ebc-auth__form form > section > * { min-width: 0; }
  /* el gap controla la separación: anulamos los márgenes de Bootstrap (.mb-3) */
  .ebc-auth--register .ebc-auth__form form > section .mb-3 { margin-bottom: 0; }
  /* filas a ancho completo: tratamiento (radios) y todos los checkboxes RGPD */
  .ebc-auth--register .ebc-auth__form form > section > .mb-3:has(.form-check) {
    grid-column: 1 / -1;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .ebc-auth { grid-template-columns: 1fr; max-width: 520px; }
  .ebc-auth__brand {
    min-height: 0;
    justify-content: flex-start;
    padding: clamp(24px, 6vw, 32px);
  }
  .ebc-auth__brand::after { width: 220px; height: 220px; right: -20%; bottom: -24%; }
}