/* ===== ESTRUCTURA GENERAL ===== */
html, body {
  height: 100%;           /* Hace que ambos ocupen toda la altura de la ventana */
  margin: 0;              /* Elimina márgenes por defecto */
  padding: 0;             /* Elimina el padding por defecto */
}

body {
  display: flex;          /* Coloca los hijos (imagen y formulario) uno al lado del otro */
  align-items: stretch;   /* Hace que ambos lados (izq y der) se estiren a la misma altura */
  font-family: 'Segoe UI', Arial, sans-serif; /* Fuente general */
  background: #f5f7fb;    /* Fondo gris claro */
  box-sizing: border-box; /* Incluye el padding y border dentro del tamaño total */
}

/* ===== LADO IZQUIERDO CON IMAGEN ===== */
.left-container {
  width: 85%;             /* Ocupa la mitad izquierda de la pantalla */
  min-height: 100vh;      /* Asegura que tenga el alto completo del viewport */
  display: flex;          /* Para centrar la imagen dentro */
  align-items: center;    /* Centra verticalmente */
  justify-content: center;/* Centra horizontalmente */
  overflow: hidden;       /* Oculta cualquier parte de la imagen que sobresalga */
}

.left-container .main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== LADO DERECHO CON EL FORMULARIO ===== */
.register-container {
  width: 50%;             /* Ocupa la mitad derecha */
  min-height: 100vh;      /* Llena toda la altura de la ventana */
  display: flex;          /* Para alinear internamente */
  flex-direction: column; /* Elementos apilados verticalmente */
  justify-content: center;/* Centra el contenido verticalmente */
  padding: 40px;          /* Espacio interno alrededor del formulario */
  background-color: #ffffff; /* Fondo blanco */
  border-radius: 10px;    /* Bordes redondeados */
  box-shadow: 0 8px 30px rgba(17,24,39,0.08); /* Sombra suave */
  box-sizing: border-box; /* Incluye el padding en el tamaño total */
  margin: auto;           /* Centra el contenedor si sobra espacio */
}

/* ===== TÍTULOS ===== */
.register-container h2 {
  font-size: 26px;        /* Tamaño del título principal */
  margin: 0 0 10px;       /* Espacio inferior */
  text-align: center;     /* Centrado */
}

.register-container p {
  margin: 0 0 20px;       /* Espacio inferior */
  font-size: 14px;        /* Tamaño del texto secundario */
  color: #555;            /* Color gris medio */
  text-align: center;     /* Centrado */
}

/* ===== FORMULARIO ===== */
form {
  display: flex;          /* Coloca los campos uno debajo del otro */
  flex-direction: column; /* Estructura vertical */
  gap: 15px;              /* Espacio entre cada grupo de campos */
}

/* ===== CONTROLES ===== */
.form-group {
  display: flex;
  flex-direction: column; /* Etiqueta arriba y campo abajo */
}

.form-group label {
  margin-bottom: 6px;     /* Espacio entre etiqueta y campo */
  font-weight: 600;       /* Negrita moderada */
  font-size: 13px;        /* Tamaño del texto de etiqueta */
  color: #333;            /* Gris oscuro */
}

/* ===== CAMPOS DE ENTRADA ===== */
input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 12px;          /* Espacio interno */
  font-size: 15px;        /* Tamaño de letra */
  border-radius: 8px;     /* Bordes redondeados */
  border: 1px solid #ccc; /* Borde gris claro */
  width: 100%;            /* Ocupan todo el ancho disponible */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
  transition: border-color .2s; /* Suaviza el cambio de color al enfocar */
}

input:focus {
  outline: none;          /* Quita el contorno azul por defecto */
  border-color: #007bff;  /* Cambia el borde al color azul principal */
}

/* ===== MENSAJES DE ERROR ===== */
.help-block {
  color: #d64545;         /* Rojo para indicar error */
  font-size: 13px;        /* Tamaño pequeño */
  margin-top: 4px;        /* Pequeño espacio arriba */
}

/* ===== BOTÓN DE ENVÍO ===== */
input[type="submit"] {
  padding: 12px 16px;     /* Tamaño del botón */
  font-size: 16px;        /* Tamaño del texto */
  font-weight: 600;       /* Texto más grueso */
  background-color: #007bff; /* Azul principal */
  color: #fff;            /* Texto blanco */
  border: none;           /* Sin borde */
  border-radius: 8px;     /* Bordes redondeados */
  cursor: pointer;        /* Cursor de mano al pasar encima */
  transition: background-color .2s, transform .1s; /* Suaviza el hover */
}

input[type="submit"]:hover {
  background-color: #005ce6; /* Azul más oscuro al pasar el mouse */
  transform: translateY(-1px); /* Efecto leve de elevación */
}

/* ===== ENLACES INFERIORES ===== */
.register-container p a {
  color: #007bff;         /* Azul igual al botón */
  text-decoration: none;  /* Sin subrayado */
}

.register-container p a:hover {
  text-decoration: underline; /* Subrayado al pasar el mouse */
}

/* ===== DISEÑO RESPONSIVE (pantallas pequeñas) ===== */
@media (max-width: 900px) {
  body {
    display: block;       /* Deja de usar flex para apilar verticalmente */
    min-height: auto;     /* Altura automática */
  }

  .left-container {
    display: none;        /* Oculta la imagen en pantallas pequeñas */
  }

  .register-container {
    width: 90%;           /* Se ajusta al ancho del móvil */
    margin: 5vh auto;     /* Centrado con espacio vertical */
    min-height: auto;     /* Altura automática */
    box-shadow: none;     /* Sin sombra para simplificar */
    border-radius: 0;     /* Bordes rectos */
  }
}