/* Importa Open Sans de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

body.bg-registrate {
  background-color: #d5f0ec;
  background-image: linear-gradient(30deg, #c1e8c9 12%, transparent 12.5%, transparent 87%, #c1e8c9 87.5%, #c1e8c9), linear-gradient(150deg, #c1e8c9 12%, transparent 12.5%, transparent 87%, #c1e8c9 87.5%, #c1e8c9), linear-gradient(30deg, #c1e8c9 12%, transparent 12.5%, transparent 87%, #c1e8c9 87.5%, #c1e8c9), linear-gradient(150deg, #c1e8c9 12%, transparent 12.5%, transparent 87%, #c1e8c9 87.5%, #c1e8c9), linear-gradient(60deg, rgba(193, 232, 201, .467) 25%, transparent 25.5%, transparent 75%, rgba(193, 232, 201, .467) 0, rgba(193, 232, 201, .467)), linear-gradient(60deg, rgba(193, 232, 201, .467) 25%, transparent 25.5%, transparent 75%, rgba(193, 232, 201, .467) 0, rgba(193, 232, 201, .467));
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
  background-size: 260px 150px;
  background-size: cover;
  min-height: 100vh;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.registro-wrap {
  display: flex;
  max-width: 1000px;
  margin: 50px auto;
  background: none;
  box-shadow: 7px 7px 13px 0 rgba(0, 0, 0, .5);
  border-radius: 16px;
  overflow: hidden;
}

.registro-card {
  background: #57c5ba;
  color: #22335a;
  flex: 1 1 0%;
  padding: 0px 40px 0px 44px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1rem;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.registro-card h1 {
  font-size: 1.9rem;
  letter-spacing: -0.6px;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: 800;
  color: #22335a;
  margin-bottom: 10px;
  margin-top: 0px;
}

.precio {
  color: #22335a;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 18px;
}

.precio small {
  display: block;
  margin-top: 10px;
  margin-bottom: 3px;
}

.caracteristicas {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
}

.caracteristicas li {
  margin: 3.5px 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.caracteristicas li .fa-check {
  color: #1e9188;
  margin-right: 5px;
  font-size: 1em;
}

.leyenda {
  margin-top: 5px;
  font-size: 0.85rem;
  color: #137a6e;
}

.registro-form-card {
  flex: 1 1 0%;
  background: linear-gradient(135deg, #2e3d56 60%, #425a74 100%);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0 16px 16px 0;
  min-width: 340px;
  color: #fff;
  box-shadow: 3px 8px 32px 0px rgba(62,84,109,0.09);
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.registro-form-card h2 {
  color: #e8fafe;
  margin-bottom: 25px;
  font-size: 1.7rem;
  text-align: center;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.registro-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

/* Input con icono */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.form-control {
  display: block;
}

.invalid-feedback {
    position: absolute;
    bottom: -18px;
    color: #ff7d7d;
    font-size: 13px;
}

.noty_body {
  font-size: 16px !important;
}

/* Oculta los label porque ya no se usan (por si hay legacy) */
.form-group label {
  display: none !important;
}

.input-icon {
  display: flex;
  align-items: center;
  position: relative;
}

.input-icon i {
  position: absolute;
  left: 16px;
  color: #bde8e4;
  z-index: 2;
  pointer-events: none;
}

.input-icon input {
  width: 100%;
  padding: 15px 12px 15px 43px;
  border-radius: 5px;
  border: 1px solid #4f617a;
  font-size: 1rem;
  background: #394b63;
  color: #f4fffe;
  transition: box-shadow 0.2s, border 0.2s;
  box-shadow: none;
  outline: none;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.input-icon input:focus {
  box-shadow: 0 0 0 2px #5af2e9;
  border-color: #54ded9;
  background: #445575;
}

.input-icon input::placeholder {
  color: #bde8e4;
  opacity: 1;
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Estilos para el autocompletado de los inputs */
input:-webkit-autofill {
  -webkit-text-fill-color: #f4fffe !important;
  color: #f4fffe !important;
  transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill:active,
input:-webkit-autofill:active:focus {
  -webkit-text-fill-color: white !important;
  color: white !important;
  transition: background-color 5000s ease-in-out 0s;
}


/* Botón registro */
.btn-registrar {
  background: #54ded9;
  color: #22335a;
  font-weight: 700;
  font-size: 1.13rem;
  padding: 13px 18px;
  border-radius: 7px;
  border: none;
  margin-top: 15px;
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(52,207,200,0.15);
  transition: background 0.18s, color 0.18s;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.btn-registrar:hover {
  background: #2fe6df;
  color: #222;
}

/* Responsive */
@media (max-width: 900px) {
  .registro-wrap {
    flex-direction: column;
    margin: 30px 6px;
    border-radius: 16px;
  }
  .registro-card, .registro-form-card {
    border-radius: 16px;
    padding: 40px 20px;
    min-width: unset;
  }
  .registro-form-card {
    border-radius: 0 0 16px 16px;
  }
}

@media (max-width: 500px) {
  .registro-card, .registro-form-card {
    padding: 28px 6px;
    font-size: 1rem;
  }
  .registro-wrap {
    margin: 14px 2px;
    border-radius: 9px;
  }
}

/* Otros detalles */
header {
  background: transparent;
  padding: 26px 0 10px 0;
}

.logo {
  height: 44px;
  display: block;
  margin: 0 auto;
}

footer {
  background: none;
  text-align: center;
  color: #8cafa7;
  font-size: 1rem;
  margin-top: 40px;
}