/**
 * Estilos para Iconos de Ordenamiento
 * Nomina Torrent Services
 * Tamaño: 13px según especificación
 */

/* Estilos base para iconos de ordenamiento */
.sort-icon {
    display: inline-block;
    margin-left: 4px;
    cursor: pointer;
    font-size: 13px !important;
    color: #666;
    opacity: 0.5;
    transition: all 0.2s ease;
    user-select: none;
    vertical-align: middle;
}

.sort-icon:hover {
    opacity: 1;
    color: #333;
    transform: scale(1.1);
}

.sort-icon.active-asc {
    opacity: 1;
    color: #28a745;
    font-weight: bold;
}

.sort-icon.active-desc {
    opacity: 1;
    color: #dc3545;
    font-weight: bold;
}

/* Estilos para headers de tabla con ordenamiento */
th.sortable {
    position: relative;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortable:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Contenedor de iconos */
.sort-icons-container {
    display: inline-flex;
    flex-direction: column;
    margin-left: 5px;
    line-height: 0.5;
    vertical-align: middle;
}

.sort-icons-container .sort-icon {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Separación entre iconos ascendente y descendente */
.sort-icon[data-sort] + .sort-icon[data-sort] {
    margin-left: 2px;
}

/* Responsive - ocultar iconos en pantallas pequeñas si es necesario */
@media (max-width: 768px) {
    .sort-icon {
        font-size: 11px !important;
    }
}

/* Animación al hacer clic */
.sort-icon:active {
    transform: scale(0.95);
}

/* Tooltip opcional */
.sort-icon[title] {
    position: relative;
}

/* Estado deshabilitado */
.sort-icon.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}