body {
    font-family: 'Myriad Pro', sans-serif !important;
}

.table-responsive {
    overflow: unset;
}

.table-container,
.card-container,
.detail-container {
    display: none;
}

.table-container.active,
.card-container.active,
.detail-container.active {
    display: block;
}

.card-container .card {
    margin-bottom: 20px;
}

/* Filters */

.hidden {
    display: none !important;
}

/* Inputs */
.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Añade un poco de espacio entre los elementos */
}

.search-container label {
    margin-right: 10px; /* Espacio entre la etiqueta y el selector */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    margin-left: 20px;
    font-weight: bold;
    margin-top: 10px;
}

.search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a nuevas líneas si es necesario */
}

.left-side,
.right-side {
    display: flex;
    align-items: center;
}

.form-control {
    padding: 8px 12px;
    border-radius: 4px;
}

.row-select {
    appearance: none; /* Remove default styling on select elements */
    -webkit-appearance: none; /* Remove default styling on WebKit browsers */
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="%23333" stroke-width="2" d="M8 9l4 4 4-4"/></svg>'); /* Imagen SVG de la flecha */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: right 10px center;
}

#searchInput {
    flex-grow: 1; /* Permite que el input de búsqueda ocupe más espacio */
    max-width: 650px; /* Establece un ancho máximo para el input de búsqueda */
    width: 650px; /* Fija el ancho para pantallas grandes */
    box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho total */
}

.right-side {
    flex-shrink: 0; /* Evita que los select se encojan */
    margin-left: 20px; /* Agrega margen a la izquierda para separarlo del lado izquierdo */
}

#typeFilter,
#kitFilter {
    width: 300px; /* Establece un ancho específico para los selects */
    box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho total */
}

/* Media queries para pantallas pequeñas */
@media (max-width: 767px) {
    .search-container {
        flex-direction: column; /* Cambia la dirección del flex para pantallas pequeñas */
        align-items: stretch; /* Alinea los elementos para ocupar todo el ancho */
        gap: 10px; /* Añade espacio entre los elementos */
    }

    .left-side,
    .right-side {
        width: 100%; /* Ocupa todo el ancho del contenedor */
        justify-content: space-between; /* Ajusta los elementos a lo largo del ancho */
    }

    #searchInput,
    #typeFilter,
    #kitFilter {
        width: 100%; /* Asegura que los elementos ocupen todo el ancho en móviles */
        max-width: none; /* Remueve el máximo de ancho para pantallas pequeñas */
    }

    .right-side {
        margin-left: 0; /* Remueve el margen izquierdo */
    }

    #kitFilter {
        margin-left: 0; /* Remueve el margen izquierdo para móviles */
    }
}

/* Tooltip */
.tooltip-container {
    position: relative;
    cursor: pointer;
}

.tooltip-text {
    visibility: hidden;
    width: 180px; /* Ajusta el ancho del tooltip según sea necesario */
    background-color: #333; /* Color de fondo del tooltip */
    color: #fff; /* Color del texto */
    text-align: center;
    border-radius: 4px;
    padding: 8px;
    position: absolute;
    z-index: 100; /* Asegura que el tooltip esté por encima de otros elementos */
    bottom: 100%; /* Ajusta la posición del tooltip para que aparezca encima */
    left: 50%; /* Posiciona el tooltip en el centro horizontal del contenedor */
    transform: translateX(-50%); /* Centra horizontalmente el tooltip */
    opacity: 0; /* Comienza como invisible */
    transition: opacity 0.3s; /* Transición suave para el tooltip */
    font-size: 14px;
    font-family: 'Arial', sans-serif;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    pointer-events: none; /* El tooltip no interfiere con eventos del mouse */
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1; /* Hace visible el tooltip al pasar el cursor */
}

.tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%; /* Posiciona la flecha en la parte inferior del tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Table Styles */
.table thead th {
    background-color: transparent; /* No background color */
    border-top: 1px solid #e8f1f0; /* Top border */
    border-bottom: 1px solid #e8f1f0; /* Bottom border */
    font-weight: 600 !important;
}

.table tbody tr {
    border: none; /* Remove borders from table rows */
}

.table tbody tr:nth-child(odd) {
    background-color: #f4f3f3; /* Background color for odd rows */
}

.table tbody tr:nth-child(even) {
    background-color: #ebecec; /* Background color for even rows */
}

.table td {
    border: none; /* Ensure no border on table cells */
}

.table {
    width: 100%;
    border-collapse: separate; /* Necessary for border-spacing to work */
    border-spacing: 0 12px; /* 0 horizontal spacing, 10px vertical spacing */
}