/* public/register.css - Estilos para la página de registro */

/* Estilos generales para el cuerpo de la página */
body {
    font-family: 'Arial', sans-serif; /* Fuente limpia */
    background-color: #f8f8f8; /* Fondo blanco roto o gris muy claro */
    margin: 0;
    padding: 0;
    display: flex; /* Usamos flexbox para centrar el contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    min-height: 100vh; /* Asegura que ocupe al menos la altura de la ventana */
    padding: 20px; /* Espacio alrededor si el contenido es más grande */
    box-sizing: border-box; /* Incluye padding en el tamaño total */
}

/* Estilos para el contenedor principal del formulario */
.register-container {
    width: 100%; /* Ocupa el ancho completo en pantallas pequeñas */
    max-width: 550px; /* Ancho máximo en pantallas más grandes, un poco más amplio para más campos */
    padding: 40px; /* Más padding interno para espacio */
    background-color: #ffffff; /* Fondo blanco puro para el contenedor */
    border-radius: 10px; /* Bordes más redondeados */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Sombra más suave y moderna */
    text-align: center;
}

/* Estilos para el logo en la página de registro */
#app-logo-register {
    width: 100px; /* Tamaño del logo */
    margin-bottom: 30px; /* Espacio debajo del logo */
    display: block; /* Permite centrar con margin: auto */
    margin-left: auto;
    margin-right: auto;
}

/* Estilos para el título */
.register-container h1 {
    font-size: 2.5em; /* Tamaño del título más grande */
    margin-bottom: 35px;
    color: #333; /* Color de texto oscuro */
}

/* Estilos para los grupos de formulario (label + input/select) */
.form-group {
    margin-bottom: 20px; /* Espacio entre grupos de formulario */
    text-align: left; /* Alinea el texto dentro del grupo a la izquierda */
}

.form-group label {
    display: block; /* Etiqueta en su propia línea */
    margin-bottom: 8px; /* Espacio entre etiqueta e input */
    font-weight: bold; /* Texto de etiqueta en negrita */
    color: #555; /* Color de texto de etiqueta */
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select {
    width: 100%; /* Ocupa todo el ancho del contenedor padre */
    padding: 12px 15px; /* Más padding interno */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    box-sizing: border-box; /* Incluye padding y border en el tamaño total */
    font-size: 1em; /* Tamaño de fuente estándar */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transición suave */
}

.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="number"]:focus,
.form-group select:focus {
    border-color: #007bff; /* Color de borde al enfocar (azul común para enfoque) */
 border-color: #7e1d87; /* Usar color de marca para el borde al enfocar */
 box-shadow: 0 0 8px rgba(126, 29, 135, 0.2); /* Sombra suave con color de marca */
}

/* Estilos para el div de información del vehículo */
#vehicle-info-div {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee; /* Línea separadora */
}

#vehicle-info-div h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #333;
}

/* Estilos para el botón de registro */
.register-container button {
    width: 100%; /* Ocupa todo el ancho */
    padding: 15px; /* Más padding */
 background-color: #7e1d87; /* Usar color de marca para el fondo del botón */
    color: white; /* Texto blanco */
    border: none;
    border-radius: 5px;
    font-size: 1.2em; /* Tamaño de fuente más grande */
    cursor: pointer;
    transition: background-color 0.3s ease-in-out; /* Transición suave al pasar el mouse */
 margin-top: 20px; /* Espacio arriba del botón */
}

.register-container button:hover {
    background-color: #0056b3; /* Color de fondo más oscuro al pasar el mouse */
}

/* Estilos para el área de mensajes */
.msg {
    margin-top: 20px;
    font-size: 1em;
    min-height: 1.2em; /* Espacio para el mensaje aunque esté vacío */
}

/* Estilos para el enlace de inicio de sesión */
.login-link {
    margin-top: 20px;
    font-size: 1em;
    color: #555;
}

.login-link a {
    color: #007bff; /* Color del enlace */
    text-decoration: none; /* Sin subrayado por defecto */
    transition: color 0.3s ease-in-out;
}

.login-link a:hover {
    color: #0056b3; /* Color más oscuro al pasar el mouse */
    text-decoration: underline; /* Subrayado al pasar el mouse */
}

/* Clase para ocultar elementos */
.hidden {
    display: none;
}

/* Estilos para hacer el formulario responsive */
@media (max-width: 600px) {
    .register-container {
        padding: 20px; /* Menos padding en pantallas pequeñas */
    }

    .register-container h1 {
        font-size: 2em; /* Tamaño de título ligeramente más pequeño */
    }

    .form-group input[type="text"],
    .form-group input[type="date"],
    .form-group input[type="tel"],
    .form-group input[type="email"],
    .form-group input[type="password"],
     .form-group input[type="number"],
    .form-group select {
        padding: 10px 12px; /* Menos padding en inputs */
    }

    .register-container button {
        font-size: 1.1em; /* Tamaño de fuente del botón ligeramente más pequeño */
        padding: 12px;
    }
}