body {
    font-family: Arial, sans-serif;
    margin: 2px;
    background-color: #f8f8f8;
	font-size: 10px;
}

table {
    width: 80%;
    border-collapse: collapse;
    margin: 4px auto;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
	border-radius: 5px; /* Bordes redondeados */
}

th, td {
    border: 1px solid #ddd;
    padding: 2px 2px;
    text-align: center;
}

th {
    background-color: #2C92B8; /* Color azul para el encabezado */
     color:white;
}

/* Aplica un color de fondo gris a las filas pares */
tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Gris claro */
}

/* Aplica un color de fondo blanco a las filas impares (explícitamente, si es necesario) */
tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Efecto hover en las filas */
tbody tr:hover {
    background-color: #dcdcdc; /* Un gris un poco más oscuro al pasar el ratón */
}
.imagen-esquina {
    position: absolute; /* Permite posicionar la imagen con top/left */
    top: 0;            /* 0 píxeles desde el borde superior */
    left: 0;           /* 0 píxeles desde el borde izquierdo */
    width: 100px;      /* Tamaño de ejemplo para la imagen */
    height: auto;
  }
  /* Estilo para todos los input de tipo texto */
input[type="text"] {
  background-color: #f0f8ff; /* AliceBlue */
  color: #191970; /* MidnightBlue */
  border: 1px solid #4169e1; /* RoyalBlue */
  padding: 4px;
  border-radius: 4px;
  font-size: 10px;
}

  /* Estilo para todos los input de tipo text area */
input[type="textarea"] {
  background-color: #f0f8ff; /* AliceBlue */
  color: #191970; /* MidnightBlue */
  border: 1px solid #4169e1; /* RoyalBlue */
  padding: 4px;
  border-radius: 4px;
  font-size: 10px;
}




/* Estilo para el input cuando está enfocado (haciendo clic en él) */
input[type="text"]:focus {
  background-color: #fffacd; /* LemonChiffon */
  border-color: #daa520; /* Goldenrod */
  outline: none; /* Elimina el contorno predeterminado del navegador */
}


/* Estilo para el input textarea cuando está enfocado (haciendo clic en él) */
input[type="textarea"]:focus {
  background-color: #fffacd; /* LemonChiffon */
  border-color: #daa520; /* Goldenrod */
  outline: none; /* Elimina el contorno predeterminado del navegador */
}



/* Estilo para un input específico usando su ID */
#usernameInput {
  background-color: #fffff0; /* Ivory */
  color: #8b0000; /* DarkRed */
  border: 2px solid #a52a2a; /* Brown */
}

/* Estilo para inputs con una clase específica */
.search-box {
  background-color: #f0fdf0; /* Casi blanco verdoso */
  color: #005000; /* Verde oscuro */
  border: 1px solid #6b8e23; /* OliveDrab */
  font-style: italic;
}

div {
    margin-bottom: 10px; /* Espacio entre cada grupo de campo/etiqueta */
		
}
label {
    display: block; /* Para que cada etiqueta esté en su propia línea */
    margin-bottom: 8px; /* Espacio entre la etiqueta y el campo de entrada */
    font-weight: bold; /* Hacer el texto de la etiqueta más prominente */
    color: #555; /* Un color ligeramente más claro que el texto general */
    font-size: 0.95em; /* Un poco más pequeña para diferenciarla del input */
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: calc(100% - 12px); /* Ancho completo menos el padding */
    padding: 12px; /* Espaciado interno */
    border: 1px solid #ccc; /* Borde suave */
    border-radius: 5px; /* Bordes redondeados */
	font-family: 'Arial', sans-serif;
    font-size: 1em; /* Tamaño de fuente estándar */
    line-height: 1.5; /* Altura de línea para legibilidad */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave para efectos hover/focus */
    box-sizing: border-box; /* Incluye padding y borde en el ancho/alto total */
	background-color: #f0f8ff;
}

/* Estilo para el foco (cuando el usuario hace clic en el campo) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: #007bff; /* Cambia el color del borde */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Añade una sombra de enfoque */
    outline: none; /* Elimina el contorno predeterminado del navegador */
}

/* Estilos específicos para textarea */
textarea {
    resize: vertical; /* Permite redimensionar solo verticalmente */
    min-height: 20px; /* Altura mínima */
}
5. Estilos para Checkboxes y Radio Buttons
Estos requieren un tratamiento especial para que se vean bien en todos los navegadores.

CSS

/* Ocultar el input original */
input[type="checkbox"],
input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Crear un reemplazo visual */
.checkbox-container label,
.radio-container label {
    position: relative;
    padding-left: 30px; /* Espacio para el checkbox/radio personalizado */
    cursor: pointer;
    font-size: 1em;
    user-select: none; /* Evitar selección de texto al hacer clic */
}

.checkbox-container label::before,
.radio-container label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px; /* Ajusta la posición vertical */
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px; /* Cuadrado para checkbox, redondo para radio */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Estilo para radio buttons */
.radio-container label::before {
    border-radius: 50%;
}

/* Estilo cuando el input está marcado */
input[type="checkbox"]:checked + label::before {
    background-color: #28a745; /* Fondo verde cuando está marcado */
    border-color: #28a745;
}

input[type="radio"]:checked + label::before {
    background-color: #007bff; /* Fondo azul cuando está marcado */
    border-color: #007bff;
}

/* El "check" o punto dentro del cuadrado/círculo */
.checkbox-container label::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 5px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.radio-container label::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

input[type="checkbox"]:checked + label::after,
input[type="radio"]:checked + label::after {
    opacity: 1;
}

/* Estilos para el estado de focus */
input[type="checkbox"]:focus + label::before,
input[type="radio"]:focus + label::before {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    outline: none;
}
6. Estilos para Botones de Envío (<input type="submit">, <button type="submit">)
Los botones deben ser claros y atractivos para incitar a la acción.

CSS

input[type="submit"],
button[type="submit"] {
    background-color: #D8F999; /* Un color verde amigable */
    color: white; /* Texto blanco */
    padding: 12px 25px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 1.1em; /* Fuente un poco más grande */
    cursor: pointer; /* Cambiar el cursor al pasar por encima */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
    width: 100%; /* Ocupa todo el ancho disponible */
    box-sizing: border-box; /* Asegurar que el padding no añada ancho extra */
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: #D8F999; /* Color más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Un pequeño efecto de levantamiento */
}

input[type="submit"]:active,
button[type="submit"]:active {
    background-color: #D8F999; /* Color más oscuro al hacer clic */
    transform: translateY(0); /* Vuelve a la posición original */
}



7. Estilos para Botones de Limpiar (<input type="reset">, <button type="reset">)
Los botones deben ser claros y atractivos para incitar a la acción.

CSS

input[type="reset"],
button[type="reset"] {
    background-color: #D8F999; /* Un color verde amigable */
    color: white; /* Texto blanco */
    padding: 12px 25px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 1.1em; /* Fuente un poco más grande */
    cursor: pointer; /* Cambiar el cursor al pasar por encima */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
    width: 100%; /* Ocupa todo el ancho disponible */
    box-sizing: border-box; /* Asegurar que el padding no añada ancho extra */
}

input[type="reset"]:hover,
button[type="reset"]:hover {
    background-color: #D8F999; /* Color más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Un pequeño efecto de levantamiento */
}

input[type="reset"]:active,
button[type="reset"]:active {
    background-color: #e6f7ff; /* Color más oscuro al hacer clic */
    transform: translateY(0); /* Vuelve a la posición original */
}





8. Estilos para Mensajes de Error y Éxito
Es vital dar retroalimentación visual al usuario.

CSS

.mensaje-error {
    color: #dc3545; /* Rojo para errores */
    background-color: #f8d7da; /* Fondo suave para errores */
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 5px;
    margin-top: -10px; /* Para que esté más cerca del campo */
    margin-bottom: 20px;
    font-size: 0.9em;
}

.mensaje-exito {
    color: #28a745; /* Verde para éxito */
    background-color: #d4edda; /* Fondo suave para éxito */
    border: 1px solid #c3e6cb;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 0.9em;
}

9. Estilos para area de texto.
textarea {
  /* Dimensions */
  width: 100%; /* Make it span the full width of its container */
  height: 150px; /* Set a fixed height */
  min-height: 100px; /* Minimum height */
  max-height: 100px; /* Maximum height */

  /* Font and Text */
  font-family: Arial, sans-serif; /* Choose a legible font */
  font-size: 16px; /* Adjust font size */
  line-height: 1.5; /* Spacing between lines of text */
  color: #333; /* Text color */

  /* Border */
  border: 1px solid #ccc; /* Simple gray border */
  border-radius: 5px; /* Slightly rounded corners */

  /* Spacing */
  padding: 10px; /* Space between text and border */
  margin-bottom: 15px; /* Space below the textarea */

  /* Background */
  background-color: #f9f9f9; /* Light background color */

  /* Outline on focus (optional but recommended for accessibility) */
  outline: none; /* Remove default blue outline */
  transition: border-color 0.3s ease-in-out; /* Smooth transition for border */
}

/* Style when the textarea is focused (clicked on) */
textarea:focus {
  border-color: #007bff; /* Highlight border with a primary color */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add a subtle shadow */
}

/* Disable user resizing if desired */
textarea {
  resize: none; /* Allow vertical resizing only (default is both, 'none' disables it completely) */
}

10 Estilos para Botones de Limpiar (<input type="reset">, <button type="reset">)
Los botones deben ser claros y atractivos para incitar a la acción.

CSS

input[type="button"],
button[type="button"] {
    background-color: #D8F999; /* Un color verde amigable */
    color: white; /* Texto blanco */
    padding: 12px 25px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 1.1em; /* Fuente un poco más grande */
    cursor: pointer; /* Cambiar el cursor al pasar por encima */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
    width: 100%; /* Ocupa todo el ancho disponible */
    box-sizing: border-box; /* Asegurar que el padding no añada ancho extra */
}

input[type="button"]:hover,
button[type="button"]:hover {
    background-color: #D8F999; /* Color más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Un pequeño efecto de levantamiento */
}

input[type="button"]:active,
button[type="button"]:active {
    background-color: #e6f7ff; /* Color más oscuro al hacer clic */
    transform: translateY(0); /* Vuelve a la posición original */
}