/* -------------------------------------------------------------- Site-wide Styles - Global styles applied to the entire website -------------------------------------------------------------- */ /* === Reset and General Styles === */ /* Resetear márgenes y rellenos para todos los elementos. */ * { /* Establece el margen exterior de todos los elementos a 0 pixeles. */ padding: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; } /* Opera Fix. */ body:before { content: ''; /* Crea un contenido pseudo-elemento vacío antes del contenido real del cuerpo. */ float: left; /* Flota el pseudo-elemento a la izquierda. */ height: 100%; /* Establece la altura del pseudo-elemento al 100% de la altura del cuerpo. */ margin-top: -32767px; /* Desplaza el pseudo-elemento hacia arriba, fuera del área visible de la página. */ width: 0; /* Establece el ancho del pseudo-elemento a 0. */ } /* Asegura que tanto el elemento como el ocupen el 100% de la altura disponible. */ html, body { height: 100%; /* Establece la altura de ambos elementos al 100% de la altura disponible en la ventana del navegador. */ } /* - 'table': Aplica el colapso de bordes para combinar bordes de celdas adyacentes en tablas. - 'tr': Define el comportamiento de las filas dentro de las tablas. - 'td': Define el comportamiento de las celdas de la tabla. */ table, tr, td { border-collapse: collapse; /* Combina los bordes de las celdas adyacentes en una sola línea sólida. */ table-layout: fixed; /* Fija el diseño de la tabla, de modo que todas las celdas de una fila tengan el mismo ancho. Esto puede mejorar el rendimiento de renderizado y asegurar un diseño más predecible. */ } /* Establece estilos para el pie de página. */ footer { position: fixed; /* Fija la posición del pie de página en la ventana del navegador. */ height: 50px; /* Establece la altura del pie de página en 50 píxeles. */ bottom: 0; /* Alinea el pie de página en la parte inferior de la ventana del navegador. */ width: 100%; /* Establece el ancho del pie de página al 100% del ancho de la ventana del navegador. */ } /* Establece estilos para el contenedor principal (#main). */ #main { overflow: auto; /* Permite el desbordamiento automático si el contenido es más grande que el contenedor. */ padding-bottom: 180px; /* Añade un relleno de 180 píxeles en la parte inferior del contenedor. */ } /* Establece el comportamiento del contenedor (#wrap). */ #wrap { min-height: 100%; /* Establece la altura mínima del contenedor al 100% del tamaño del viewport. */ } /* Define estilos para el menú. */ .menu { /* No se especifican estilos directamente para el contenedor del menú, pero aquí se podrían añadir si es necesario. */ } /* Estilos para los elementos de lista dentro del menú. */ .menu ul li { background: #4196D2; /* Fondo azul para los elementos de lista. */ color: #ffffff; /* Color de texto blanco. */ text-align: left; /* Alineación del texto a la izquierda. */ width: 180px; /* Ancho fijo de 180px para cada elemento de lista. */ } /* Estilos cuando se pasa el cursor sobre los elementos de lista. */ .menu ul li:hover { background: #4196d2; /* Fondo azul al pasar el cursor. */ color: #000000; /* Color de texto negro al pasar el cursor. */ } /* Estilos para los enlaces dentro de los elementos de lista. */ .menu ul li a { color: #ffffff; /* Color de texto blanco para los enlaces. */ padding: 0px 1px 0px 1px; /* Relleno de 0px arriba y abajo, 1px a izquierda y derecha. */ border: 1px solid #000000; /* Borde de 1px sólido negro alrededor. */ border-bottom: 0; /* Sin borde inferior. */ } /* Estilos cuando se pasa el cursor sobre los enlaces. */ .menu ul li a:hover { color: #000000; /* Color de texto negro al pasar el cursor sobre los enlaces. */ } /* Estilos para enlaces y sus imágenes dentro de la clase .linkButton */ a.linkButton, a.linkButton:visited, a.linkButton img { border: none; /* Elimina cualquier borde alrededor del enlace o su imagen. */ color: #ffffff; /* Establece el color del texto del enlace a blanco. */ outline: none; /* Elimina el contorno alrededor del enlace cuando está enfocado. */ } .pagination { /*display: inline-block;*/ /* Se omite la propiedad display para permitir el comportamiento predeterminado del elemento. */ padding-left: 0; /* Elimina el relleno izquierdo del contenedor para alinear los elementos correctamente. */ margin: 20px 0; /* Establece márgenes superiores e inferiores de 20px y margen izquierdo y derecho automático para centrar el contenedor horizontalmente. */ border-radius: 4px; /* Aplica esquinas redondeadas al contenedor con un radio de 4px. */ } .pagination table > tbody > tr > td { display: inline; /* Establece que los elementos se muestren como elementos en línea dentro de la tabla. */ } .pagination table > tbody > tr > td > a, .pagination table > tbody > tr > td > span { position: relative; /* Establece posición relativa para que los elementos enlazados (a) y los spans tengan un contexto de posicionamiento adecuado. */ float: left; /* Alinea los elementos enlazados y los spans a la izquierda. */ padding: 8px 12px; /* Establece el relleno interno de 8px arriba y abajo, y 12px a la izquierda y derecha para los elementos enlazados y los spans. */ line-height: 1.42857143; /* Establece la altura de línea para asegurar un espacio adecuado entre líneas de texto. */ text-decoration: none; /* Elimina la decoración de subrayado predeterminada de los enlaces. */ color: #161f36; /* Establece el color del texto a un tono oscuro. */ background-color: #ffffff; /* Establece el color de fondo blanco para los enlaces y los spans. */ border: 1px solid #dddddd; /* Establece un borde sólido de 1px con un color gris claro. */ margin-left: -1px; /* Elimina el margen izquierdo para evitar espacios no deseados entre elementos enlazados y spans adyacentes. */ } .pagination table > tbody > tr > td > span { position: relative; /* Mantiene la posición relativa para los spans, asegurando un contexto de posicionamiento coherente. */ float: left; /* Alinea los spans a la izquierda junto con los elementos enlazados. */ padding: 8px 12px; /* Mantiene el mismo relleno interno de 8px arriba y abajo, y 12px a la izquierda y derecha para los spans. */ line-height: 1.42857143; /* Mantiene la misma altura de línea para los spans. */ text-decoration: none; /* Elimina la decoración de subrayado predeterminada de los spans. */ margin-left: -1px; /* Mantiene el mismo ajuste de margen izquierdo para los spans como se establece para los elementos enlazados. */ z-index: 2; /* Establece un índice z para asegurar que los spans estén por encima de otros elementos en la pila de capas. */ color: #aea79f; /* Establece un tono de color más claro para el texto de los spans. */ background-color: #f5f5f5; /* Establece un color de fondo gris claro para los spans. */ border-color: #dddddd; /* Mantiene el mismo color de borde gris claro para los spans. */ cursor: default; /* Establece el cursor predeterminado para indicar que no hay ninguna acción adicional al pasar el cursor sobre los spans. */ } .pagination table > tbody > tr > td:first-child > a, .pagination table > tbody > tr > td:first-child > span { margin-left: 0; /* Restablece el margen izquierdo a 0 para el primer enlace o span dentro de su contenedor padre. */ border-bottom-left-radius: 4px; /* Establece esquinas redondeadas en la parte inferior izquierda con un radio de 4px para el primer enlace o span. */ border-top-left-radius: 4px; /* Establece esquinas redondeadas en la parte superior izquierda con un radio de 4px para el primer enlace o span. */ } .pagination table > tbody > tr > td:last-child > a, .pagination table > tbody > tr > td:last-child > span { border-bottom-right-radius: 4px; /* Establece esquinas redondeadas en la parte inferior derecha con un radio de 4px para el último enlace o span dentro de su contenedor padre. */ border-top-right-radius: 4px; /* Establece esquinas redondeadas en la parte superior derecha con un radio de 4px para el último enlace o span dentro de su contenedor padre. */ } .pagination table > tbody > tr > td > a:hover, .pagination table > tbody > tr > td > span:hover, .pagination table > tbody > tr > td > a:focus, .pagination table > tbody > tr > td > span:focus { color: #161f36; /* Cambia el color del texto a un tono oscuro al pasar el cursor sobre los enlaces o spans. */ background-color: #eeeeee; /* Cambia el color de fondo a gris claro al pasar el cursor sobre los enlaces o spans. */ border-color: #dddddd; /* Cambia el color del borde a gris claro al pasar el cursor sobre los enlaces o spans. */ } /* Establece márgenes para etiquetas dentro de listas de radio o checkbox formateadas. */ .formatRadioButtonList label { margin-left: 5px; /* Establece un margen izquierdo de 5px para todas las etiquetas. */ margin-right: 15px; /* Establece un margen derecho de 15px para todas las etiquetas. */ } /* Establece el tamaño del elemento div que contiene el mapa. */ #map { height: 400px; /* La altura es de 400 píxeles */ width: 100%; /* El ancho es igual al ancho de la página web */ } /* Estilos para el contenedor de información de contraseña. */ #pswd_info { background: #eeeeee none repeat scroll 0 0; /* Fondo gris claro sin repetición */ color: #000000; /* Color de texto negro */ left: 20px; /* Posición a 20px desde el borde izquierdo */ top: 115px; /* Posición a 115px desde el borde superior */ } /* Estilos para el encabezado dentro de #pswd_info. */ #pswd_info h4 { background: #4196d2 none repeat scroll 0 0; /* Fondo azul con color de texto blanco */ color: #ffffff; /* Color de texto blanco */ display: block; /* Mostrar como bloque */ font-size: 14px; /* Tamaño de fuente de 14px */ letter-spacing: 0; /* Espaciado entre letras normal */ padding: 17px 0; /* Relleno superior e inferior de 17px, 0 a los lados */ text-align: center; /* Alineación centrada del texto */ text-transform: uppercase; /* Transformación de texto a mayúsculas */ } /* Estilos para la lista desordenada dentro de #pswd_info. */ #pswd_info ul { list-style: outside none none; /* Establece la lista sin viñetas */ } /* Estilos para los elementos de la lista dentro de #pswd_info. */ #pswd_info ul li { padding: 10px 45px; /* Relleno superior e inferior de 10px, 45px a los lados */ } /* Estilos para la clase .valid (indicador de contraseña válida). */ .valid { background: rgba(0, 0, 0, 0) url("../images/valid.png") no-repeat scroll 2px 6px; /* Icono de marca de verificación verde */ color: #008000; /* Color de texto verde. */ line-height: 21px; /* Altura de línea de 21px. */ padding-left: 22px; /* Relleno a la izquierda de 22px. */ } /* Estilos para la clase .invalid (indicador de contraseña inválida). */ .invalid { background: rgba(0, 0, 0, 0) url("../images/invalid.png") no-repeat scroll 2px 6px; /* Icono de marca de error rojo */ color: #ff0000; /* Color de texto rojo. */ line-height: 21px; /* Altura de línea de 21px. */ padding-left: 22px; /* Relleno a la izquierda de 22px. */ } /* Oculta inicialmente el contenedor #pswd_info. */ #pswd_info { display: none; /* Establece que el contenedor no sea visible inicialmente en la página. */ }