/* General: Estiliza la tabla */
.conte_table {
    max-width: 100%;
    overflow-x: auto; /* Para scroll horizontal si es necesario */
    margin: 20px 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    background-color: #ffffff;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); /* Sombra para la tabla */
    border-radius: 8px;
    overflow: hidden;
}

/* Encabezados */
table th {
    background-color: #f1f1f1;
    color: #555;
    font-weight: bold;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #e3e6ec;
    text-transform: uppercase;
}


/* Estilo para la columna de botones de acciones */
table th:first-child, 
table td:first-child {
    width: 120px; /* Ancho fijo para la columna de botones */
    text-align: center; /* Centrar el contenido */
}

/* Filas */
table td {
    padding: 10px;
    border-bottom: 1px solid #e3e6ec;
    text-align: left;
    vertical-align: middle;
    color: #555;
    user-select: text; /* Permitir seleccionar texto */
}
/* Aplicar white-space: pre-line solo a las columnas excepto la primera */
table td:not(:first-child) {
    white-space: pre-line; /* Respeta los saltos de línea */
}

/* Estilo de los enlaces */
table td a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

table td a:hover {
    text-decoration: underline;
}

/* Botones de acciones */
.btnacciones button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin: 0 5px;
    padding: 5px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.btnacciones button:hover {
    transform: scale(1.2); /* Aumenta tamaño al pasar el mouse */
    color: #007bff;
}

/* Estilo para la fila al pasar el mouse */
table tr:hover {
    background-color: #f0f8ff; /* Color más claro al pasar el mouse */
    transition: background-color 0.3s ease;
}

/* Estilo para la fila activa (cuando se hace clic) */
table tr.active-row {
    background-color: #d1ecf1; /* Color más oscuro para la fila activa */
    border-left: 5px solid #007bff; /* Indicador visual */
    transition: background-color 0.3s ease, border-left 0.3s ease;
}


/* Estilo para imágenes dentro de la tabla */
table td img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    table th, table td {
        font-size: 12px;
        padding: 8px;
    }

    .btnacciones .accion {
        font-size: 12px;
        padding: 6px 10px;
    }
}
