/* ========================= */
/* MENÚ RESPONSIVE           */
/* ========================= */

/* Estilos para el contenedor del menú */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2a2626; /* Fondo del menú */
    color: white; /* Color del texto */
    padding: 10px 30px;
    margin-bottom: 20px; 
    position: sticky; /* Permite que el menú permanezca visible al hacer scroll */
    top: 0;
    z-index: 1000;
}

/* Marca o nombre de la aplicación */
.navbar .brand {
    font-size: 20px;
    font-weight: bold;
}

/* Ícono de menú hamburguesa */
.navbar .hamburger {
    font-size: 24px;
    cursor: pointer;
    display: none; /* Oculto por defecto (solo visible en pantallas pequeñas) */
}

/* Menú principal */
.menu {
    display: flex;
    gap: 20px; /* Espaciado entre los enlaces */
}

/* Estilos de los enlaces del menú */
.menu a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.menu a:hover {
    color: #2a2626;
    background-color: #3dd900; /* Efecto hover */
}

/* Botón de cierre de sesión */
.menu .btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background-color: #810202; /* Fondo del botón */
    color: white; /* Color del texto */
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.menu .btn-logout:hover {
    background-color: #680101; /* Cambio de color al hover */
}

/* RESPONSIVE DESIGN */
/* ================= */
/* Menú hamburguesa visible en pantallas pequeñas */
@media (max-width: 768px) {
    .hamburger {
        display: block; /* Hacer visible el ícono de hamburguesa */
    }

    .menu {
        display: none; /* Ocultar el menú por defecto */
        flex-direction: column; /* Alinear los enlaces verticalmente */
        background-color: #333; /* Fondo del menú desplegable */
        position: absolute;
        top: 60px;
        right: 20px;
        width: 200px; /* Ancho del menú desplegable */
        border-radius: 5px;
        overflow: hidden;
    }

    .menu.active {
        display: flex; /* Mostrar el menú al activarlo */
    }

    .menu a {
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid #444; /* Líneas separadoras entre enlaces */
    }

    .menu a:last-child {
        border-bottom: none; /* Eliminar la línea en el último enlace */
    }
}



/* Estilos generales */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0 0 20px 0;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #810202;
}

.container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



/* Estilos para el botón flotante */
#goTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #810202; /* Color del botón */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#goTopBtn i {
    color: #fff;
    font-size: 24px; /* Ajusta el tamaño del icono */
}
#goTopBtn:hover {
    background-color: #680101; /* Color al pasar el mouse */
    transform: translateY(-3px);
}
/* Mostrar/ocultar el botón al hacer scroll */
#goTopBtn.hidden {
    opacity: 0;
    pointer-events: none;
}





/* Carpetas */
.carpeta-header {
    background-color: #f5f5f5;
    font-weight: bold;
    text-align: left;
    padding: 10px;
    border-top: 2px solid #ddd;
}
.carpeta-link {
    display: block;
    padding: 10px;
    color: #810202;
    text-decoration: none;
}
.carpeta-link:hover {
    background-color: #f0f0f0;
    color: #680101;
}


/* SELECTOR */
.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.selector-busqueda {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
}

.selector-busqueda select,
.selector-busqueda input,
.selector-busqueda button {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.selector-busqueda select {
    width: 250px;
}

.selector-busqueda input {
    flex: 1;
    min-width: 200px;
}

.selector-busqueda button {
    background-color: #810202;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.selector-busqueda button:hover {
    background-color: #680101;
}

.selector-busqueda button i {
    margin-right: 5px;
}

@media (max-width: 768px) {
    .selector-busqueda {
        flex-direction: column;
        gap: 15px;
    }
    .selector-busqueda select,
    .selector-busqueda input,
    .selector-busqueda button {
        width: 100%;
    }
}









/* Buscador */
.carpeta-selector {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-right: 20px;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
#searchInput {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ddd;
    flex-grow: 1;
}

.search-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-select {
    padding: 10px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-select:hover {
    border-color: #680101;
}

input[type="text"] {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 300px;
    transition: all 0.3s ease;
}

input[type="text"]:focus {
    border-color: #810202;
    outline: none;
}

button[type="submit"] {
    padding: 10px 20px;
    background-color: #810202;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #680101;
}

.carpeta-header {
    background-color: #f1f1f1;
    font-weight: bold;
}


/* Boton Cerrar Sesion */
.logout-container {
    text-align: right;
    margin-top: 20px;
    margin-right: 20px;
}

.btn-logout {
    display: inline-flex;
    align-items: center;
    background-color: #ddd;
    color: #000;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-logout:hover {
    background-color: #c9c9c9;
    text-decoration: none;
}

.btn-logout:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(255, 75, 92, 0.5);
}



/* Formularios */
.tptrack__id form input, .tptrack__email form input {
    width: 100%;
    height: 60px;
    border: none;
    background-color: #fff;
    padding: 10px 60px;
    border-radius: 6px;
}
.tptrack__id{
    width: 100%;
    height: 60px;
    border: none;
    background-color: #fff;
    padding: 10px 60px;
    border-radius: 6px;
}




/* Tabla de productos */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 16px;
}

.table th, .table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.table th {
    background-color: #810202;
    color: white;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table tr:hover {
    background-color: #f1f1f1;
    transition: background-color 0.3s ease;
}

.table td {
    word-wrap: break-word;
}

.table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Responsive Design */
@media (max-width: 768px) {
    .table th, .table td {
        padding: 10px;
        font-size: 14px;
    }

    .search-container input[type="text"] {
        width: 100%;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    .search-container {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .table thead {
        display: none; /* Ocultar encabezados */
    }

    .table tr {
        display: block;
        margin-bottom: 10px;
    }

    .table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ddd;
    }

    .table td:before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 10px;
        color: #333;
    }
    .product-title {
        font-size: 18px;
        font-weight: bold;
        color: #810202;
        margin-bottom: 5px;
    }
}



/* LOGIN */
.tptrack__id input,
.tptrack__email input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    margin-top: 5px;
}

.tptrack__btn button {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.tptrack__btn button:hover {
    background-color: #0056b3;
}

.tptrack__item-content h4 {
    font-size: 1.5rem;
    color: #333;
    font-weight: bold;
}

.tptrack__item-content p {
    color: #666;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Para un mejor scroll en dispositivos móviles */
    width: 100%;
}

/* Estilo para el precio de oferta */
.oferta-detalle {
    color: #810202; /* Color rojo oscuro */
    font-weight: bold; /* Negrita */
}

/* Estilo para el precio tachado */
.precio-tachado {
    text-decoration: line-through; /* Tachado */
    color: #ccc; /* Gris claro */
}

/* Estilo para productos con stock igual o menor a 0 */
.low-stock {
    color: #ccc; /* Cambiar el color del texto a rojo oscuro */
}

.low-stock td {
    color: #ccc; /* Asegura que todas las celdas de la fila tengan el color */
}