﻿/* Estilos específicos para la tabla de proyectos */

/* Contenedor para el scroll */
.table-scroll-container {
    max-height: 60vh; /* Altura máxima para el contenedor antes de que aparezca el scroll. Ajusta este valor según tus necesidades (vh = viewport height) */
    overflow-y: auto; /* Permite el scroll vertical si el contenido excede max-height */
    border: 1px solid #dee2e6; /* Borde similar al de las tablas de Bootstrap */
    border-radius: 0.25rem; /* Bordes redondeados */
}

/* Estilos de la tabla dentro del contenedor */
.portfolio-table {
    width: 100%; /* Asegura que la tabla ocupe todo el ancho del contenedor */
    margin-bottom: 0; /* Quita el margen inferior predeterminado de Bootstrap */
    border-collapse: separate; /* Necesario para que border-spacing funcione con border-radius en thead */
    border-spacing: 0; /* Elimina el espacio entre celdas */
}

    /* Encabezado fijo */
    .portfolio-table thead {
        position: sticky; /* Hace que el encabezado se "pegue" */
        top: 0; /* Se pega en la parte superior del contenedor */
        background-color: #f8f9fa; /* Color de fondo para que el encabezado sea visible al hacer scroll */
        z-index: 10; /* Asegura que el encabezado esté por encima del contenido al hacer scroll */
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Sutil sombra para dar efecto de "elevación" */
    }

    /* Estilos de las celdas del encabezado (th) */
    .portfolio-table th {
        background-color: #e9ecef; /* Un color ligeramente diferente para los th */
        padding: 0.75rem;
        text-align: left;
        white-space: nowrap; /* Evita que el texto de la cabecera se rompa en varias líneas */
    }

    /* Estilos de las celdas del cuerpo (td) */
    .portfolio-table td {
        padding: 0.75rem;
        vertical-align: middle;
    }

    /* Estilos para las filas alternas (Bootstrap .table-striped ya lo maneja, pero si necesitas más personalización) */
    /* .portfolio-table tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
} */

    /* Estilos para las imágenes en miniatura */
    .portfolio-table img {
        border-radius: 4px; /* Bordes ligeramente redondeados para las miniaturas */
        object-fit: cover; /* Asegura que las imágenes se recorten y cubran el espacio sin distorsionarse */
    }

    /* Ajustes para el padding de los botones dentro de las celdas de acción */
    .portfolio-table td button {
        margin-right: 5px; /* Espacio entre los botones */
    }
