/* =====================================================
   SUMINET
   REGISTRO DE PROVEEDORES
   admin-register.css
   ===================================================== */


/* =====================================================
   PAGE
   ===================================================== */

.register-page {
  width: 100%;
  min-height: 100vh;

  padding:
    34px
    clamp(24px, 5vw, 76px)
    48px;
}


/* =====================================================
   SHELL
   ===================================================== */

.register-shell {
  width: min(1320px, 100%);

  min-height: 760px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(390px, .82fr)
    minmax(600px, 1.18fr);

  overflow: hidden;

  background: #ffffff;

  border-radius: 14px;

  box-shadow:
    0 24px 70px rgba(18, 56, 70, .15);
}


/* =====================================================
   PANEL IZQUIERDO
   ===================================================== */

.register-brand {
  position: relative;

  min-width: 0;

  overflow: hidden;

  color: #ffffff;

  background:
    linear-gradient(
      90deg,
      rgba(4, 49, 63, .97) 0%,
      rgba(4, 49, 63, .92) 38%,
      rgba(4, 49, 63, .70) 68%,
      rgba(4, 49, 63, .38) 100%
    ),
    url("hero-industrial.png");

  background-size: cover;

  background-position:
    64% center;

  background-repeat: no-repeat;
}


/* PROFUNDIDAD */

.register-brand::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 15% 12%,
      rgba(11, 159, 186, .10),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .04) 48%,
      rgba(0, 0, 0, .28) 100%
    );

  pointer-events: none;
}


.register-brand-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(6, 56, 71, .14),
      transparent
    );

  pointer-events: none;
}


/* =====================================================
   CONTENIDO IZQUIERDO
   ===================================================== */

.register-brand-content {
  position: relative;

  z-index: 2;

  min-height: 100%;

  padding:
    46px
    42px
    42px;

  display: flex;

  flex-direction: column;
}


.register-brand-main {
  margin-top: 58px;
}


.register-brand h1 {
  max-width: 510px;

  margin:
    18px
    0
    20px;

  color: #ffffff;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(40px, 3.5vw, 54px);

  font-weight: 800;

  line-height: 1.03;

  letter-spacing: -.04em;
}


.register-brand h1 em {
  display: block;

  color: var(--orange);

  font-style: normal;
}


.register-brand-main > p {
  max-width: 460px;

  margin: 0;

  color:
    rgba(255, 255, 255, .9);

  font-size: 14px;

  line-height: 1.62;
}


/* =====================================================
   PANEL DERECHO
   ===================================================== */

.register-card {
  min-width: 0;

  display: flex;

  align-items: center;

  background: #ffffff;
}


.register-card-inner {
  width: 100%;

  max-width: 760px;

  margin: 0 auto;

  padding:
    50px
    54px;
}


/* =====================================================
   CABECERA
   ===================================================== */

.register-card h2 {
  margin:
    13px
    0
    8px;

  color: #102f3a;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 36px;

  font-weight: 800;

  line-height: 1.08;

  letter-spacing: -.035em;
}


.register-intro {
  max-width: 520px;

  margin:
    0
    0
    34px;

  color: #52676f;

  font-size: 14px;

  line-height: 1.55;
}


/* =====================================================
   FORMULARIO
   ===================================================== */

.register-card form {
  width: 100%;

  display: grid;

  gap: 30px;
}


/* =====================================================
   SECCIONES DEL FORM
   ===================================================== */

.register-section {
  min-width: 0;

  margin: 0;

  padding: 0;

  border: 0;
}


.register-section legend {
  width: 100%;

  margin:
    0
    0
    16px;

  padding:
    0
    0
    10px;

  border-bottom:
    1px solid #e2e7e8;

  color: #173845;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: -.01em;
}


/* =====================================================
   GRID
   ===================================================== */

.register-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    16px
    18px;
}


.register-grid .wide {
  grid-column:
    1 / -1;
}


/* =====================================================
   CAMPOS
   ===================================================== */

.register-card .login-field {
  min-width: 0;

  display: grid;

  gap: 8px;

  color: #173845;

  font-size: 11px;

  font-weight: 700;
}


.register-card input {
  width: 100%;

  height: 52px;

  padding:
    0
    14px;

  border:
    1px solid #cfd9dc;

  border-radius: 7px;

  background: #ffffff;

  color: var(--ink);

  font-family:
    "DM Sans",
    sans-serif;

  font-size: 12px;

  outline: none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}


.register-card input::placeholder {
  color: #9ba8ad;
}


.register-card input:hover {
  border-color: #b8c7cc;
}


.register-card input:focus {
  border-color: var(--teal);

  box-shadow: var(--focus-ring);
}


/* inválido solamente después de interacción */

.register-card input:user-invalid {
  border-color: #c45e50;

  background: #fffafa;
}


.register-card input:user-valid {
  border-color: #b9d8cf;
}


/* =====================================================
   AYUDA DE CAMPO
   ===================================================== */

.field-help {
  margin-top: 1px;

  color: #7a8b91;

  font-size: 9px;

  font-weight: 500;

  line-height: 1.45;
}


/* =====================================================
   ERROR
   ===================================================== */

.register-card .login-error {
  margin:
    0
    0
    26px;

  padding:
    13px
    14px;

  border-left:
    3px solid #c45e50;

  border-radius: 5px;

  background: #fbeae7;

  color: #873e34;

  font-size: 12px;

  line-height: 1.45;
}


/* =====================================================
   CTA
   ===================================================== */

.register-submit-area {
  display: grid;

  gap: 10px;
}


.register-submit {
  width: 100%;

  min-height: 54px;

  margin-top: 0;
}


.register-note {
  display: block;

  color: #77888e;

  font-size: 9px;

  line-height: 1.5;

  text-align: center;
}


/* =====================================================
   YA TENGO CUENTA
   ===================================================== */

.register-login-link {
  margin-top: 34px;

  padding-top: 26px;

  border-top:
    1px solid #e2e7e8;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;
}


.register-login-link > span {
  color: #52676f;

  font-size: 11px;

  font-weight: 600;
}


.register-login-link a {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--orange);

  font-size: 13px;

  font-weight: 800;

  transition:
    color .2s ease,
    transform .2s ease;
}


.register-login-link a:hover {
  color: #d9681e;

  transform: translateX(2px);
}


.register-login-link a:focus-visible {
  outline: none;

  box-shadow: var(--focus-ring);

  border-radius: 4px;
}


/* =====================================================
   DESKTOP CHICO
   ===================================================== */

@media
  (min-width: 901px)
  and
  (max-width: 1180px) {

  .register-page {
    padding:
      28px
      30px
      40px;
  }


  .register-shell {
    grid-template-columns:
      minmax(350px, .8fr)
      minmax(520px, 1.2fr);

    min-height: 710px;
  }


  .register-brand-content {
    padding:
      38px
      32px
      34px;
  }


  .register-brand-main {
    margin-top: 42px;
  }


  .register-brand h1 {
    font-size: 40px;
  }


  .register-brand-main > p {
    font-size: 12px;
  }


  .register-card-inner {
    padding:
      42px
      38px;
  }


  .register-card h2 {
    font-size: 32px;
  }


  .register-intro {
    margin-bottom: 28px;

    font-size: 13px;
  }


  .register-card form {
    gap: 26px;
  }


  .register-card input {
    height: 50px;
  }

}


/* =====================================================
   TABLET
   ===================================================== */

@media
  (min-width: 701px)
  and
  (max-width: 900px) {

  .register-page {
    padding:
      24px
      22px
      34px;
  }


  .register-shell {
    min-height: 680px;

    grid-template-columns:
      40%
      60%;
  }


  /* BRAND */

  .register-brand {
    background-position:
      67% center;
  }


  .register-brand-content {
    padding:
      30px
      26px;
  }


  .register-brand-main {
    margin-top: 34px;
  }


  .register-brand h1 {
    font-size: 31px;

    line-height: 1.04;
  }


  .register-brand-main > p {
    font-size: 10px;

    line-height: 1.55;
  }


  .register-brand .login-benefits {
    margin-top: 26px;

    grid-template-columns: 1fr;

    gap: 12px;
  }


  .register-brand .login-benefit {
    display: grid;

    grid-template-columns:
      34px
      1fr;

    grid-template-rows:
      auto auto;

    column-gap: 9px;
  }


  .register-brand .benefit-icon {
    width: 32px;

    height: 32px;

    margin-bottom: 0;

    grid-row:
      1 / 3;
  }


  .register-brand .login-benefit strong {
    font-size: 9px;
  }


  .register-brand .login-benefit small {
    font-size: 8px;
  }


  .register-brand .login-brand-footer {
    display: none;
  }


  /* FORM */

  .register-card-inner {
    padding:
      34px
      28px;
  }


  .register-card h2 {
    font-size: 28px;
  }


  .register-intro {
    margin-bottom: 25px;

    font-size: 11px;
  }


  .register-card form {
    gap: 24px;
  }


  .register-section legend {
    margin-bottom: 13px;

    font-size: 11px;
  }


  .register-grid {
    gap:
      13px
      12px;
  }


  .register-card input {
    height: 47px;

    font-size: 11px;
  }


  .register-card .login-field {
    font-size: 9px;
  }

}


/* =====================================================
   MOBILE / TABLET VERTICAL
   ===================================================== */

@media (max-width: 700px) {

  .register-page {
    padding:
      18px
      16px
      30px;
  }


  .register-page .back-home {
    margin-bottom: 16px;

    font-size: 12px;
  }


  .register-shell {
    width: 100%;

    min-height: 0;

    grid-template-columns: 1fr;

    border-radius: 10px;
  }


  /* ===================================================
     BRAND MOBILE
     =================================================== */

  .register-brand {
    min-height: auto;

    background-position:
      65% 52%;
  }


  .register-brand-content {
    min-height: auto;

    padding:
      28px
      25px
      30px;
  }


  .register-brand-main {
    margin-top: 30px;
  }


  .register-brand h1 {
    max-width: 520px;

    margin:
      14px
      0
      15px;

    font-size: 34px;

    line-height: 1.04;
  }


  .register-brand-main > p {
    max-width: 520px;

    font-size: 12px;
  }


  .register-brand .login-benefits {
    margin-top: 27px;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 12px;
  }


  .register-brand .benefit-icon {
    width: 34px;

    height: 34px;

    margin-bottom: 8px;

    font-size: 15px;
  }


  .register-brand .login-benefit strong {
    font-size: 10px;
  }


  .register-brand .login-benefit small {
    font-size: 9px;
  }


  .register-brand .login-brand-footer {
    display: none;
  }


  /* ===================================================
     FORM MOBILE
     =================================================== */

  .register-card {
    display: block;
  }


  .register-card-inner {
    width: 100%;

    max-width: none;

    padding:
      34px
      26px
      38px;
  }


  .register-card h2 {
    margin-top: 10px;

    font-size: 29px;
  }


  .register-intro {
    margin-bottom: 27px;

    font-size: 12px;
  }


  .register-card form {
    gap: 28px;
  }


  .register-section legend {
    font-size: 12px;
  }


  .register-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      15px
      13px;
  }


  .register-card input {
    height: 49px;

    font-size: 11px;
  }


  .register-card .login-field {
    font-size: 10px;
  }


  .register-submit {
    min-height: 50px;

    font-size: 13px;
  }


  .register-login-link {
    margin-top: 30px;

    padding-top: 23px;
  }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 520px) {

  .register-page {
    padding:
      15px
      12px
      25px;
  }


  .register-brand-content {
    padding:
      24px
      20px
      26px;
  }


  .register-brand-main {
    margin-top: 26px;
  }


  .register-brand h1 {
    font-size: 29px;
  }


  .register-brand-main > p {
    font-size: 11px;
  }


  /* beneficios compactos */

  .register-brand .login-benefits {
    grid-template-columns: 1fr;

    gap: 13px;
  }


  .register-brand .login-benefit {
    display: grid;

    grid-template-columns:
      36px
      1fr;

    grid-template-rows:
      auto auto;

    column-gap: 10px;
  }


  .register-brand .benefit-icon {
    grid-row:
      1 / 3;

    width: 34px;

    height: 34px;

    margin: 0;
  }


  .register-brand .login-benefit strong,
  .register-brand .login-benefit small {
    align-self: center;
  }


  /* formulario */

  .register-card-inner {
    padding:
      31px
      20px
      34px;
  }


  .register-card h2 {
    font-size: 27px;
  }


  .register-intro {
    margin-bottom: 24px;

    font-size: 11px;
  }


  .register-grid {
    grid-template-columns: 1fr;

    gap: 15px;
  }


  .register-grid .wide {
    grid-column: 1;
  }


  .register-card input {
    height: 48px;
  }


  .register-login-link {
    align-items: flex-start;

    flex-direction: column;

    gap: 7px;
  }

}


/* =====================================================
   MOBILE MINI
   ===================================================== */

@media (max-width: 390px) {

  .register-page {
    padding:
      12px
      10px
      20px;
  }


  .register-page .back-home {
    margin-bottom: 12px;

    font-size: 11px;
  }


  .register-brand-content {
    padding:
      22px
      18px
      24px;
  }


  .register-brand-main {
    margin-top: 22px;
  }


  .register-brand h1 {
    font-size: 26px;
  }


  .register-brand-main > p {
    font-size: 10px;
  }


  .register-brand .brand-eyebrow {
    font-size: 7px;
  }


  .register-card-inner {
    padding:
      27px
      18px
      30px;
  }


  .register-card h2 {
    font-size: 24px;
  }


  .register-card input {
    height: 46px;

    font-size: 10px;
  }


  .register-card .login-field {
    font-size: 9px;
  }


  .register-section legend {
    font-size: 11px;
  }


  .field-help {
    font-size: 8px;
  }


  .register-submit {
    min-height: 48px;

    padding:
      0
      14px;

    gap: 14px;

    font-size: 11px;
  }


  .register-note {
    font-size: 8px;
  }


  .register-login-link > span {
    font-size: 10px;
  }


  .register-login-link a {
    font-size: 12px;
  }

}


/* =====================================================
   NOTEBOOK BAJO / VIEWPORT POCO ALTO
   ===================================================== */

@media
  (min-width: 701px)
  and
  (max-height: 760px) {

  .register-page {
    padding-top: 20px;

    padding-bottom: 28px;
  }


  .register-page .back-home {
    margin-bottom: 14px;
  }


  .register-shell {
    min-height: 640px;
  }


  .register-brand-content {
    padding-top: 30px;

    padding-bottom: 28px;
  }


  .register-brand-main {
    margin-top: 30px;
  }


  .register-brand h1 {
    margin-top: 13px;

    margin-bottom: 14px;
  }


  .register-brand .login-benefits {
    margin-top: 24px;
  }


  .register-brand .login-brand-footer {
    display: none;
  }


  .register-card-inner {
    padding-top: 30px;

    padding-bottom: 30px;
  }


  .register-intro {
    margin-bottom: 24px;
  }


  .register-card form {
    gap: 22px;
  }

}


/* =====================================================
   REDUCED MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    transition-duration: .01ms !important;

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;
  }

}
/* =====================================================
   POLISH FINAL — REGISTRO ALINEADO CON LOGIN
   ===================================================== */


/* VOLVER A SUMINET
   Le damos el mismo aire que en Login
   ===================================================== */

.register-page {
  padding-top: 34px;
}

.register-page .back-home {
  margin-left: 0;
  margin-bottom: 22px;

  display: inline-flex;
  align-items: center;

  gap: 9px;

  color: #244b59;

  font-size: 14px;
  font-weight: 600;

  line-height: 1.2;
}


/* =====================================================
   PANEL IZQUIERDO
   Más parecido al Login
   ===================================================== */

.register-brand-content {
  padding:
    46px
    42px
    42px;
}


/* LOGO
   Evitamos que tome dimensiones gigantes
   ===================================================== */

.register-brand .login-logo {
  display: flex;
  align-items: center;

  gap: 16px;
}

.register-brand .login-logo img {
  width: 72px;
  height: 72px;

  max-width: 72px;
  max-height: 72px;

  object-fit: contain;

  flex: 0 0 72px;
}

.register-brand .login-logo div {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.register-brand .login-logo strong {
  color: #ffffff;

  font-family: "Manrope", sans-serif;

  font-size: 30px;
  font-weight: 800;

  line-height: 1;

  letter-spacing: .025em;
}

.register-brand .login-logo span {
  margin-top: 5px;

  color: rgba(255,255,255,.88);

  font-size: 12px;

  line-height: 1.3;
}


/* =====================================================
   COPY IZQUIERDA
   Igualamos ritmo visual con Login
   ===================================================== */

.register-brand-main {
  margin-top: 58px;
}

.register-brand .brand-line {
  width: 52px;
  height: 4px;

  margin-bottom: 28px;
}

.register-brand .brand-eyebrow {
  color: var(--orange);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .17em;
}

.register-brand h1 {
  max-width: 500px;

  margin:
    18px
    0
    20px;

  font-size: clamp(42px, 3.7vw, 56px);

  line-height: 1.02;
}

.register-brand-main > p {
  max-width: 455px;

  font-size: 14px;

  line-height: 1.62;
}


/* =====================================================
   BENEFICIOS
   ===================================================== */

.register-brand .login-benefits {
  margin-top: 42px;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 20px;
}

.register-brand .benefit-icon {
  width: 40px;
  height: 40px;

  margin-bottom: 12px;
}

.register-brand .login-benefit strong {
  font-size: 12px;
}

.register-brand .login-benefit small {
  font-size: 11px;
}


/* =====================================================
   FORMULARIO DERECHO
   Le devolvemos aire visual
   ===================================================== */

.register-card-inner {
  max-width: 760px;

  padding:
    58px
    54px;
}

.register-card h2 {
  margin:
    14px
    0
    8px;

  font-size: 38px;
}

.register-intro {
  margin-bottom: 36px;

  font-size: 15px;
}


/* =====================================================
   BOTÓN
   Igual que Login
   ===================================================== */

.register-submit {
  border:
    1px
    solid
    var(--navy);

  background:
    linear-gradient(
      90deg,
      #063847 0%,
      #0a4f61 100%
    );

  color: #ffffff;
}

.register-submit:hover {
  background:
    linear-gradient(
      90deg,
      #0a4758 0%,
      #0d5a6d 100%
    );
}


/* =====================================================
   DESKTOP CHICO
   ===================================================== */

@media
  (min-width: 901px)
  and
  (max-width: 1180px) {

  .register-brand .login-logo img {
    width: 56px;
    height: 56px;

    max-width: 56px;
    max-height: 56px;

    flex-basis: 56px;
  }

  .register-brand .login-logo strong {
    font-size: 24px;
  }

  .register-brand .login-logo span {
    font-size: 10px;
  }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 700px) {

  .register-page {
    padding-top: 20px;
  }

  .register-page .back-home {
    margin-bottom: 16px;

    font-size: 13px;
  }

  .register-brand .login-logo img {
    width: 50px;
    height: 50px;

    max-width: 50px;
    max-height: 50px;

    flex-basis: 50px;
  }

  .register-brand .login-logo strong {
    font-size: 20px;
  }

  .register-brand .login-logo span {
    font-size: 10px;
  }

}


/* =====================================================
   MOBILE CHICO
   ===================================================== */

@media (max-width: 480px) {

  .register-page {
    padding-top: 16px;
  }

  .register-page .back-home {
    margin-bottom: 14px;

    font-size: 12px;
  }

  .register-brand .login-logo img {
    width: 44px;
    height: 44px;

    max-width: 44px;
    max-height: 44px;

    flex-basis: 44px;
  }

  .register-brand .login-logo strong {
    font-size: 18px;
  }

  .register-brand .login-logo span {
    font-size: 9px;
  }

}
/* =====================================================
   RECUPERACIÓN DE CONTRASEÑA
   ===================================================== */

.forgot-shell {
  min-height: 620px;
}


/* PANEL DERECHO */

.forgot-card-inner {
  max-width: 520px;
}


/* BENEFICIOS IZQUIERDOS */

.forgot-benefits {
  margin-top: 42px;

  display: grid;

  gap: 16px;
}

.forgot-benefit {
  display: flex;

  align-items: center;

  gap: 12px;
}

.forgot-benefit .benefit-icon {
  width: 38px;
  height: 38px;

  margin-bottom: 0;

  flex: 0 0 38px;
}

.forgot-benefit div {
  min-width: 0;
}

.forgot-benefit strong,
.forgot-benefit small {
  display: block;
}

.forgot-benefit strong {
  color: #ffffff;

  font-size: 12px;

  font-weight: 700;
}

.forgot-benefit small {
  margin-top: 2px;

  color: rgba(255,255,255,.72);

  font-size: 10px;
}


/* =====================================================
   SUCCESS
   ===================================================== */

.login-success {
  margin-bottom: 24px;

  padding:
    16px
    17px;

  display: flex;

  align-items: flex-start;

  gap: 12px;

  border-left:
    3px solid #32936f;

  border-radius: 5px;

  background: #e8f6ef;

  color: #22684f;
}

.login-success-icon {
  width: 28px;
  height: 28px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 28px;

  border-radius: 50%;

  background: rgba(50,147,111,.12);

  font-size: 14px;

  font-weight: 800;
}

.login-success strong {
  display: block;

  margin-bottom: 3px;

  font-size: 12px;
}

.login-success p {
  margin: 0;

  color: #437363;

  font-size: 11px;

  line-height: 1.5;
}


/* =====================================================
   BOTÓN VOLVER DESPUÉS DEL ENVÍO
   ===================================================== */

.forgot-return-button {
  text-decoration: none;
}


/* =====================================================
   VOLVER AL LOGIN
   ===================================================== */

.forgot-back-login {
  margin-top: 30px;

  padding-top: 24px;

  border-top:
    1px solid #e2e7e8;
}

.forgot-back-login a {
  width: fit-content;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #06718a;

  font-size: 12px;

  font-weight: 700;

  transition:
    color .2s ease,
    transform .2s ease;
}

.forgot-back-login a:hover {
  color: var(--orange);

  transform:
    translateX(-2px);
}

.forgot-back-login a:focus-visible {
  outline: none;

  box-shadow: var(--focus-ring);

  border-radius: 4px;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 900px) {

  .forgot-shell {
    min-height: 570px;
  }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 700px) {

  .forgot-shell {
    min-height: 0;
  }

  .forgot-benefits {
    margin-top: 28px;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 12px;
  }

  .forgot-card-inner {
    max-width: none;
  }

}


/* =====================================================
   MOBILE CHICO
   ===================================================== */

@media (max-width: 480px) {

  .forgot-benefits {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .forgot-back-login {
    margin-top: 26px;
  }

}