added things

2025-10-27 13:57:33 -06:00
parent 79c1b610c6
commit 559bd4f32d
4 changed files with 442 additions and 3 deletions
@@ -0,0 +1,163 @@
+.pestaña {
+  position: absolute;
+  top: 50%;
+  left: 62%; 
+  transform: translate(-50%, -50%);
+  
+  display: flex;
+  justify-content: space-around; /* espacio igual entre los tres textos */
+  align-items: center;
+  width: 45%; /* controla el ancho total del bloque central */
+  font-size: 18px;
+  color: #003366;
+  font-weight: bold;
+  z-index: 5; /* por encima del logo */
+}
+
+.pestaña span {
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.pestaña span:hover {
+  color: #b8870b; /* cambia de color al pasar el cursor */
+}
+
+.titulo-reporte{
+  font-weight: bold;  /* negrita */
+  font-size: 24px;    /* tamaño de texto */
+  font-family: Arial, sans-serif;
+}
+
+/*BUSCADOR*/
+
+input[type="text"] {
+  width: 500px;   /* más ancho, más largo */
+  padding: 7px;  /* mantiene espacio cómodo dentro */
+  font-size: 18px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 8px 12px;
+  font-size: 16px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+.contenedor{
+  margin-left: 80px;
+}
+
+.filtro-rec{
+  border: 2px solid #003366; /* Color del borde */
+  border-radius: 10px;       /* Bordes redondeados */
+  padding: 10px;             /* Espacio interno */
+  margin: 80px 550px;            /* Separación del resto del contenido */
+  background-color: #f9f9f9; 
+  position: relative;
+  left: 380px; 
+  font-family: Arial, sans-serif;
+  top: -570px; /* sube 50px respecto a su posición original */
+  
+
+}
+
+/* Estilos para los selects */
+select {
+  padding: 8px 12px;
+  border: 1px solid #003366;
+  border-radius: 5px;
+  background-color: white;
+  font-size: 14px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+select:focus {
+  border-color: #003366;
+  box-shadow: 0 0 4px rgba(0, 51, 102, 0.3);
+  outline: none;
+}
+
+/* Botón de buscar */
+form[action="/buscar"] {
+  display: flex;
+  gap: 10px;
+  margin: 20px 0;
+  
+}
+
+form[action="/buscar"] input {
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  width: 300px;
+}
+
+form[action="/buscar"] button {
+  background-color: #003366;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.botones-filtro {
+  display: flex;
+  justify-content: flex-end; /* botones a la derecha */
+  gap: 10px;                 /* espacio entre botones */
+  margin-top: 15px;          /* separación del resto del formulario */
+}
+
+.aplicar {
+  background-color: #003366;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.limpiar {
+  background-color: #b8870b;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.tabla-rec{
+  border: 2px solid #003366; /* Color del borde */
+  border-radius: 10px;        /* Bordes redondeados */
+  padding: 10px;              /* Espacio interno */
+  margin: 50px 700px 0 80px;      /* superior, derecha, inferior, izquierda */
+  background-color: #f9f9f9; 
+  font-family: Arial, sans-serif;
+   height: 400px;
+}
+
+.boton-descargar{
+  padding: 8px 12px;
+  font-size: 16px;
+  border: none;
+  background-color: #003366;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  right: 30px;
+  margin-left: 700px;
+}