/* Gradientes para los botones */
.btn-gradient-primary {
    background: linear-gradient(45deg, #c7cdd8, #0c8dd8);
    color: white;
}

.btn-gradient-success {
    background: linear-gradient(45deg, #00b09b, #96c93d);
    color: white;
}

.btn-gradient-danger {
    background: linear-gradient(45deg, #ff4b2b, #ff416c);
    color: white;
}

.linear-gradient {
    background: linear-gradient(
        135deg,
        #ff8c00 0%,
        #ff00c8 25%,
        #9a3bff 50%,
        #3d2fff 75%,
        #3d2fff 100%
    ) !important;
    color: white;
}

.linear-gradient-nuevo{
   background: linear-gradient(
        135deg,
        #3d2fff 0%,       /* Azul intenso */
        #3d2fff 40%,      /* Azul aún dominante */
        #9a3bff 60%,      /* Lila */
        #ff00c8 90%,      /* Rosado neón (apenas visible) */
        #ff8c00 97%,      /* Naranja (muy sutil) */
        #ff8c00 100%      /* Último punto fijo */
    ) !important;
}

/* Animación de entrada suave para filas de la tabla */
/* .animated {
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
} */

.fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Mejorar tipografía de la tabla */
table {
    font-family: 'Poppins', sans-serif; /* Usa una fuente más moderna */
    font-size: 14px; /* Tamaño de fuente más legible */
}

th {
    font-weight: 600; /* Un poco más grueso para las cabeceras */
    font-size: 16px;
    text-align: center;
}

td {
    font-weight: 400;
    text-align: center;
}

/* Bordes más gruesos para las celdas */
th, td {
    border: 2px solid #dee2e6 !important;
}

/* Efecto de sombra al pasar el ratón sobre las filas */
tbody tr:hover {
    background-color: #f1f1f1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Estilos de las celdas al hacer hover */
tbody tr:hover td {
    background-color: #e9ecef;
    cursor: pointer;
}

/* Asegurarse de que las tablas sean responsivas */
.table-responsive {
    overflow-x: auto; /* Permite el desplazamiento horizontal */
}

/* Estilos para pantallas pequeñas */
@media (max-width: 767px) {
    table {
        font-size: 12px; /* Reducir tamaño de la fuente en pantallas pequeñas */
    }
    th, td {
        padding: 8px 10px; /* Menor padding para hacer más espacio */
    }
    .btn {
        font-size: 12px; /* Botones más pequeños */
        padding: 6px 8px; /* Botones con menos padding */
    }
}

/* Mantener el estilo de la tabla en pantallas grandes */
@media (min-width: 768px) {
    table {
        font-size: 14px; /* Tamaño de fuente normal para pantallas más grandes */
    }
}


/* Estilo base para botones de acción */
.btn-action-edit,
.btn-action-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Botón de editar - verde degradado */
.btn-action-edit {
    background: linear-gradient(135deg, #1cb941, #1b5026);
}

.btn-action-edit:hover {
    background: linear-gradient(135deg, #218838, #1e7e34);
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(33, 136, 56, 0.4);
}

/* Botón de eliminar - rojo degradado */
.btn-action-delete {
    background: linear-gradient(135deg, #da4d5b, #c7071a);
}

.btn-action-delete:hover {
    background: linear-gradient(135deg, #c82333, #bd2130);
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(220, 53, 69, 0.4);
}

/* Íconos dentro de los botones */
.btn-action-edit i,
.btn-action-delete i {
    pointer-events: none;
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* Animación del ícono al hacer hover en el botón */
.btn-action-edit:hover i,
.btn-action-delete:hover i {
    transform: scale(1.2) rotate(10deg);
}
/* Botón extra - azul degradado formal */
.btn-action-extra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #007bff, #0056b3);
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
}

/* Hover: efecto moderno con sombra y animación */
.btn-action-extra:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 123, 255, 0.4);
}

/* Íconos dentro del botón extra */
.btn-action-extra i {
    pointer-events: none;
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* Animación del ícono al hacer hover */
.btn-action-extra:hover i {
    transform: scale(1.2) rotate(10deg);
}
/* Botón extra1 - rosa degradado formal */
.btn-action-extra1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #f74de9, #3e033b);
    box-shadow: 0 4px 6px rgba(100, 23, 119, 0.2);
}

/* Hover: efecto moderno con sombra y animación */
.btn-action-extra1:hover {
    background: linear-gradient(135deg, #e33cde, #b411ae);
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(168, 24, 187, 0.4);
}

/* Íconos dentro del botón extra */
.btn-action-extra1 i {
    pointer-events: none;
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* Animación del ícono al hacer hover */
.btn-action-extra1:hover i {
    transform: scale(1.2) rotate(10deg);
}