/* ---Inicio estilos datatable-------- */

/* Estilo base para todas las tablas de datos, ajusta anchura, márgenes, relleno y comportamiento de borde */
table.dataTable {
    width: 100%;
    margin: 10px auto;
    padding: 0px;
    clear: both;
    border-collapse: separate;
    border-spacing: 0;
}

/* Estilos para las celdas de encabezado y cuerpo de la tabla, principalmente ajusta el relleno */
table.dataTable thead th,
table.dataTable tbody td {
    padding: 15px;
}

/* Estilo para la longitud de la tabla de datos, alineada a la izquierda con márgenes */
.dataTables_wrapper .dataTables_length {
    float: left;
    margin: 20px;
}

/* Estilo para el filtro de búsqueda de la tabla de datos, alineado a la derecha con márgenes */
.dataTables_wrapper .dataTables_filter {
    float: right;
    margin: 20px;
}

/* Estilos para los elementos select y input dentro de los controles de longitud y filtro, ajusta bordes, relleno y tamaño de fuente */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #aaa;
    padding: 5px;
    font-size: 14px;
}

/* Estilo para la información de la tabla (ej. "Mostrando 1 a 10 de 50 entradas"), alineado a la izquierda con márgenes y tamaño de fuente */
.dataTables_wrapper .dataTables_info {
    float: left;
    margin: 20px;
    font-size: 14px;
}

/* Estilo para la paginación de la tabla, alineada a la derecha con márgenes */
.dataTables_wrapper .dataTables_paginate {
    float: right;
    margin: 20px;
}

/* Estilos para los botones de paginación, ajusta color, relleno, márgenes, borde y color de fondo */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #333;
    padding: 5px 10px;
    margin-left: 2px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

table.dataTable tr {
    border-bottom-color: #0000000e;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #1111111c !important;
}

.text-xs {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

@media screen and (max-width: 768px) {
    .text-xs {
        max-width: 100px;
    }
}

/* Otra media query para pantallas aún más pequeñas, si es necesario */
@media screen and (max-width: 480px) {
    .text-xs {
        max-width: 50px;
    }
}


.instagram-btn {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    border: none;
    font-weight: bold;
    transition: background 0.3s;
}

.instagram-btn:hover {
    background: linear-gradient(45deg, #bc1888 0%, #cc2366 25%, #dc2743 50%, #e6683c 75%, #f09433 100%);
}


.linkedin-btn {
    background: linear-gradient(45deg, #0072b1 0%, #007bb5 25%, #0084bf 50%, #0096c7 75%, #00a6d9 100%);
    color: white;
    border: none;
    font-weight: bold;
    transition: background 0.3s;
}

.linkedin-btn:hover {
    background: linear-gradient(45deg, #00a6d9 0%, #0096c7 25%, #0084bf 50%, #007bb5 75%, #0072b1 100%);
}


.google-btn {
    background-color: #4285F4;
    color: white;
    border: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.google-btn:hover {
    background-color: #357ae8;
}

.google-btn em {
    color: white;
}


.google-chat-btn {
    background-color: #0F9D58;  /* Google's green color */
    color: white;
    border: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.google-chat-btn:hover {
    background-color: #0C7C43; /* Darker shade for hover */
}

.google-chat-btn em {
    color: white;
}