/* Estilos para content.php */

.item1 img {
    width: 795px; /* Ancho de la imagen */
    height: 750px; /* Altura de la imagen */
    display: block; /* Asegura que la imagen sea tratada como un bloque */
    margin: auto; /* Centrar la imagen */
    border-radius: 10px; /* Esquinas redondeadas para la imagen del cuadro 1 */
}

/* Ajustar el cuadro 2 */
.item2 {
    background-color: #99ccff;
    height: auto; /* Puedes ajustar esta altura según tu preferencia */
}

/* Cuadro 3 ocupa toda la fila debajo de cuadro 1 y 2 */
.item3 {
    background-color: #99ff99;
    grid-column: span 2; /* Este cuadro ocupa las dos columnas (se extiende a lo ancho de la cuadrícula) */
    /*height: 300px;*/ /* Puedes ajustar la altura según sea necesario */
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; /* Espacio entre los cuadros */
}

.grid-item {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
}

.item1 {
    position: relative; /* Para que el visor se posicione sobre este elemento */
}

.img-cuadro {
    width: 800px; /* Ajusta el ancho de la imagen del cuadro 1 */
    height: 800px; /* Ajusta la altura de la imagen del cuadro 1 */
}

.photo-viewer {
    position: absolute;
    top: 110px; /* Alinea el visor con la parte superior del cuadro 1 */
    left: 89px; /* Alinea el visor con el lado izquierdo del cuadro 1 */
    width: 637px; /* Tamaño del visor */
    height: 486px; /* Tamaño del visor */
    background-color: rgba(0, 0, 0, 0.8); /* Fondo semitransparente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Asegúrate de que esté por encima de la imagen */
    visibility: hidden; /* Oculto inicialmente */
    border-radius: 10px; /* Esquinas redondeadas */
}

.photo-viewer img {
    max-width: 100%; /* Adaptar imagen al visor */
    max-height: 100%; /* Adaptar imagen al visor */
    border-radius: 15px; /* Esquinas redondeadas para la imagen del visor */
}

.image-info {
    color: #FFFFFF; /* Texto en blanco */
    background-color: rgba(0, 0, 0, 0.2); /* Fondo negro translúcido */
    text-align: center;
    margin-top: 10px;
    position: absolute; /* Coloca el texto sobre el visor */
    bottom: 10px; /* Coloca el texto en la parte inferior del visor */
    padding: 5px; /* Espacio alrededor del texto */
    border-radius: 5px; /* Esquinas redondeadas para el fondo */
}

.info-row {
    margin: 5px 0;
}

/* Estilos para las listas dentro de las pestañas */
.tabs {
    text-align: center; /* Centrar las pestañas */
    margin-bottom: 20px; /* Espacio inferior */
}

.tab-links {
    display: inline-block; /* Hacer que las pestañas se alineen en línea */
    padding: 0; /* Sin padding */
    margin: 0; /* Sin margen */
    list-style: none; /* Sin estilo de lista */
}

.tab-links li {
    display: inline; /* Hacer que los elementos de la lista se alineen horizontalmente */
}

.tab-links a {
    display: inline-block; /* Hacer que el enlace se comporte como un bloque en línea */
    padding: 10px 20px; /* Espaciado interno */
    background-color: #f1f1f1; /* Color de fondo */
    border: 1px solid #ccc; /* Borde */
    border-radius: 5px 5px 0 0; /* Bordes redondeados en la parte superior */
    text-decoration: none; /* Sin subrayado */
    color: #333; /* Color de texto */
    transition: background-color 0.3s; /* Transición de fondo al pasar el ratón */
}

.tab-links a:hover {
    background-color: #ddd; /* Color de fondo al pasar el ratón */
}
.tab-links li.active a {
    background-color: #99ccff; /* Color de fondo al pasar el ratón o al estar activo */
}

.tab-content {
    background-color: #f9f9f9; /* Color de fondo para el contenido de las pestañas */
    border: 1px solid #ccc; /* Borde alrededor del contenido */
    border-radius: 5px; /* Esquinas redondeadas */
    padding: 15px; /* Espacio interior */
}
.tab.active {
    display: block; /* Mostrar la pestaña activa */
}
.tab {
    padding: 20px; /* Espacio interno en el contenido de la pestaña */
    border: 1px solid #ccc; /* Borde de la pestaña */
    border-top: none; /* Sin borde superior para que se vea como una pestaña */
    border-radius: 0 0 5px 5px; /* Bordes redondeados en la parte inferior */
    background-color: #fff; /* Color de fondo del contenido */
    display: none; /* Ocultar por defecto */
}


.tab ul {
    list-style-type: none; /* Eliminar viñetas de la lista */
    padding: 0; /* Eliminar margen */
    margin: 0; /* Eliminar margen */
}

.tab li {
    padding: 5px 0; /* Espacio entre los elementos de la lista */
    border-bottom: 1px solid #ddd; /* Línea separadora */
}

.tab li:last-child {
    border-bottom: none; /* Eliminar línea en el último elemento */
}

.tab li a {
    text-decoration: none; /* Eliminar subrayado */
    color: #5B3A29; /* Color del texto */
}

.tab li a:hover {
    color: #007BFF; /* Color al pasar el ratón */
}

.column-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.column-container ul {
    list-style-type: none; /* Quitar los puntos de la lista */
    padding: 0;
    margin: 0;
    width: 100%; /* Para que ocupe el 100% del ancho */
    border: none; /* Asegúrate de que no haya borde */
}

.column-container li {
    text-align: center; /* Centrar el texto */
    overflow: hidden; /* Ocultar el desbordamiento */
    white-space: nowrap; /* Evitar saltos de línea */
    text-overflow: ellipsis; /* Añadir puntos suspensivos */
    width: calc(33.33% - 10px); /* Dividir el espacio en 3 partes, restando margen */
    margin: 5px; /* Espacio entre elementos */
    border: none; /* Asegúrate de que no haya borde */
}

.pagination {
    text-align: center; /* Centrar la paginación */
    margin-top: 20px; /* Espacio superior */
}

.page-link {
    margin: 0 5px; /* Espaciado entre los links de paginación */
    text-decoration: none; /* Sin subrayado */
    color: blue; /* Color de texto */
}

.pagination .page-link {
    margin: 0 5px;
    padding: 5px 10px;
    text-decoration: none;
    border: 1px solid #ccc;
    color: #000;
}

.pagination .page-link:hover {
    background-color: #f0f0f0;
}
.clickable {
    cursor: pointer;
    padding: 10px;
    border: 1px solid transparent; /* Puedes ajustar el borde */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s;
}

.clickable:hover {
    background-color: #f0f0f0; /* Cambia el color al pasar el mouse */
}