/* Estilos generales para el cuerpo de la página */
body {
    display: flex; /* Usa flexbox para alinear el contenido */
    margin: 0; /* Elimina el margen predeterminado del body */
	padding: 0; /* Elimina el padding predeterminado */
    font-family: Arial, sans-serif; /* Fuente predeterminada */
    min-height: 100vh; /* Altura mínima del cuerpo igual al 100% del viewport */
    overflow: hidden; /* Oculta el desbordamiento del contenido */
    position: relative; /* Posición relativa para contener elementos absolutos */
    background: radial-gradient(circle, #ff0000, #990000); /* Fondo con degradado */
}

/* Efecto de rayas en el fondo */
.rays {
    position: absolute; /* Posiciona el elemento de forma absoluta */
    width: 100%; /* Ocupa el 100% del ancho del contenedor */
    height: 100%; /* Ocupa el 100% de la altura del contenedor */
    background: repeating-conic-gradient(
        from 0deg, /* Inicia el gradiente cónico desde 0 grados */
        rgba(150, 140, 140, 0.5) 0deg 10deg, /* Define un color semi-transparente */
        transparent 10deg 20deg /* Define una sección transparente */
    );
    mix-blend-mode: multiply; /* Aplica un modo de mezcla "multiply" */
    z-index: -1; /* Asegura que esté detrás del contenido */
}

/* Marca de agua en la parte inferior derecha */
body::before {
    content: "Desarrollador: HERNAN TORRES ARAGON \a Diseño Imagenes: Alan Sierra \a INF: 3015266958"; /* Usamos \a para un salto de línea */
    position: absolute;
    top: 40px; /* Ajusta la posición vertical */
    left: 25px; /* Ajusta la posición horizontal */
    font-size: 15px; /* Tamaño del texto */
    color: rgba(0, 0, 0, 0.7); /* Blanco transparente opaco */
    pointer-events: none;
    z-index: 1;
    font-weight: bold;
    white-space: pre; /* Permite respetar los saltos de línea (\a) */
    text-align: center; /* Centra el texto horizontalmente */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
}

/* Marca de agua en la parte inferior derecha */
body::after {
    content: "Desarrollador: HERNAN TORRES ARAGON \a Diseño Imagenes: Alan Sierra \a INF: 3015266958"; /* Usamos \a para un salto de línea */
    position: absolute;
    bottom: 40px; /* Ajusta la posición vertical */
    right: 425px; /* Ajusta la posición horizontal */
    font-size: 18px; /* Tamaño del texto */
    color: rgba(0, 0, 0, 0.5); /* Blanco transparente opaco */
    pointer-events: none;
    z-index: 1;
    font-weight: bold;
    white-space: pre; /* Permite respetar los saltos de línea (\a) */
    text-align: center; /* Centra el texto horizontalmente */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
}

/* Contenedor del formulario de login */
form {
    background-color: gainsboro; /* Color de fondo del formulario */
    font-weight: bold; /* Texto en negrita */
    padding: 20px; /* Espaciado interno */
    border-radius: 7px; /* Bordes redondeados */
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center; /* Centra el contenido del formulario */
    width: 300px; /* Ancho fijo para el formulario */
    margin-left: auto;
	margin-right: 0px; /* Margen izquierdo para separar del borde */
    z-index: 2; /* Asegura que el formulario esté por encima de la imagen de fondo */
    position: relative; /* Posición relativa para ajustar el z-index */
}

/* Estilos para el título del formulario */
h1 {
    font-family: 'Arial', cursive; /* Fuente personalizada para el título */
    font-size: 1.5rem; /* Tamaño del título */
    text-align: center; /* Centra el texto */
    margin-bottom: 20px; /* Espacio debajo del título */
    color: #333; /* Color del texto */
}

/* Estilos para los inputs de texto y contraseña */
input[type="text"],
input[type="password"] {
    width: 80%; /* Ocupa el 80% del ancho del contenedor */
    padding: 10px; /* Espaciado interno */
    border: 1px solid #ccc; /* Borde del input */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 1rem; /* Tamaño de la fuente */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    height: 40px; /* Altura fija para los inputs */
    margin-bottom: 15px; /* Espacio entre los inputs */
}

/* Estilos para el botón de envío */
input[type="submit"] {
    background-color: red; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    padding: 10px 20px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor a una mano al pasar el mouse */
    font-size: 1rem; /* Tamaño de la fuente */
    margin-top: 10px; /* Espacio superior */
    width: 40%; /* Ocupa el 40% del ancho del contenedor */
    height: 40px; /* Altura fija para el botón */
}

/* Estilos para el botón de envío al pasar el mouse */
input[type="submit"]:hover {
    background-color: midnightblue; /* Cambia el color de fondo al pasar el mouse */
}

/* Estilos para la imagen de fondo */
.imagen-fondo {
    position: absolute; /* Posiciona el elemento de forma absoluta */
    top: 0px; /* Alinea la imagen en la parte superior */
    right: 250px; /* Coloca la imagen a la derecha del formulario */
	width: calc(100% - 160px); /* Ocupa el ancho restante de la pantalla */
    height: 100%; /* Ocupa toda la altura de la pantalla (viewport height) */
	max-height: 100%; /* Asegura que la imagen ocupe al menos el 100% de la altura de la pantalla */
    background-image: url('imagenes_votos_colegial/Total.jpeg'); /* Ruta de la imagen */
    background-size: 90%; /* Ajusta la imagen al tamaño del contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen en el contenedor */
    opacity: 0.5; /* Hace la imagen semi-transparente (50% de opacidad) */
    z-index: 1; /* Asegura que la imagen esté detrás del formulario */
}

/* Estilos para el mensaje de error */
.error-mensaje {
    color: red; /* Color del texto */
    font-weight: bold; /* Texto en negrita */
    text-align: center; /* Centra el texto */
    margin-top: 10px; /* Espacio superior */
}