body {
    /* Selector para el elemento body */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Define la familia de fuentes para el texto */
    margin: 0;
    /* Elimina el margen por defecto */
    padding: 0;
    /* Elimina el padding por defecto */
    height: 100vh;
    /* Altura fija del viewport para contener el scroll interno */
    overflow: hidden;
    /* Evita que el body crezca más allá del viewport */
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    /* Fondo con gradiente lineal */
    display: flex;
    /* Hace que body sea flexbox */
    flex-direction: column;
    /* Dirección vertical */
    position: relative;
}

header {
    /* Selector para el elemento header */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Fondo con gradiente para el header */
    color: white;
    /* Color del texto en blanco */
    padding: 20px;
    /* Padding interno de 20px */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra del header */
    flex: 1;
    max-height: fit-content;
    /*hace que el header no crezca mucho*/
}

.banner h1 {
    /* Selector para h1 dentro de .banner */
    margin: 0;
    /* Elimina el margen por defecto */
    font-size: 2.5em;
    /* Tamaño de fuente 2.5 veces el normal */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* Sombra del texto */
}

nav ul {
    /* Selector para ul dentro de nav */
    list-style: none;
    /* Elimina los puntos de la lista */
    padding: 0;
    /* Elimina el padding por defecto */
    display: flex;
    /* Usa Flexbox para alinear los items */
    justify-content: center;
    /* Centra los items horizontalmente */
    margin: 10px 0;
    /* Margen superior e inferior de 10px */
}

nav li {
    /* Selector para li dentro de nav */
    margin: 0 20px;
    /* Margen izquierdo y derecho de 20px */
}

nav a {
    /* Selector para a dentro de nav */
    color: white;
    /* Color del enlace en blanco */
    text-decoration: none;
    /* Elimina el subrayado */
    font-weight: bold;
    /* Fuente en negrita */
    transition: color 0.3s ease;
    /* Transición suave para el color */
}

nav a:hover {
    /* Estado hover para a dentro de nav */
    color: #ffd700;
    /* Color amarillo al pasar el mouse */
}

.search-bar {
    /* Selector para .search-bar */
    display: flex;
    /* Usa Flexbox */
    justify-content: center;
    /* Centra el contenido */
    margin-top: 15px;
    /* Margen superior de 15px */
}

.search-bar input {
    /* Selector para input dentro de .search-bar */
    padding: 10px;
    /* Padding interno de 10px */
    width: 250px;
    /* Ancho fijo de 250px */
    border: none;
    /* Sin borde */
    border-radius: 25px 0 0 25px;
    /* Bordes redondeados solo izquierda */
    outline: none;
    /* Sin outline al enfocar */
    font-size: 16px;
    /* Tamaño de fuente */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Sombra ligera */
}

.search-bar button {
    /* Selector para button dentro de .search-bar */
    padding: 10px 20px;
    /* Padding interno */
    border: none;
    /* Sin borde */
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
    /* Fondo gradiente */
    color: white;
    /* Color del texto */
    border-radius: 0 25px 25px 0;
    /* Bordes redondeados solo derecha */
    cursor: pointer;
    /* Cursor de mano */
    font-weight: bold;
    /* Fuente negrita */
    transition: transform 0.2s ease;
    /* Transición para transform */
}

.search-bar button:hover {
    /* Estado hover para button en .search-bar */
    transform: scale(1.05);
    /* Escala al 105% */
}

main {
    /* Selector para main */
    display: flex;
    /* Usa Flexbox para el layout */
    gap: 15px;
    /* Espacio entre items de 30px */
    padding: 15px;
    /* Padding interno de 30px */
    flex: 1;
    /* Hace que main ocupe el espacio restante */
    min-height: 0;
    /* Permite que main se encoja y no crezca por el contenido */
    overflow: hidden;
    /* Contiene el desbordamiento del hijo gallery */
}

.categories,
.cart {
    /* Selector para .categories y .cart */
    flex: 1;
    background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
    /* Fondo gradiente */
    padding: 15px;
    /* Padding interno */
    border-radius: 15px;
    /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra */

}

.categoryList,
.MenuOptions {
    list-style: none;
    /* Sin puntos de lista */
    padding: 0;
    /* Sin padding */
}

.categoryList li {
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.categoryList li:hover {
    background: rgba(255, 255, 255, 0.25);
}

.categoryList li.active {
    background: rgba(255, 255, 255, 0.45);
    font-weight: bold;
    color: #fff;
}

.MenuOtherOptions {
    display: none;
}



.gallery {
    /* Selector para .gallery */
    flex: 5;
    /* Ocupa el espacio restante */
    background-color: #fff;
    /* Fondo blanco */
    border-radius: 15px;
    /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra */
    padding: 20px;
    /* Padding interno */
    min-height: 0;
    /* Clave en flex: permite que el hijo encoja y haga scroll */
    overflow-y: auto;
    /* Scroll vertical interno cuando el contenido desborda */
}

.products {
    /* Selector para .products */
    display: grid;
    /* Usa CSS Grid */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    /* Columnas automáticas min 250px */
    gap: 20px;
    /* Espacio entre productos */
}

.product {
    /* Selector para .product */
    border: 1px solid #ddd;
    /* Borde gris claro */
    padding: 15px;
    /* Padding interno */
    text-align: center;
    /* Texto centrado */
    border-radius: 10px;
    /* Bordes redondeados */
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    /* Fondo gradiente sutil */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Sombra */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Transiciones */
    object-fit: contain;
    /*para que no se deformen las fotos*/
}

.product:hover {
    /* Estado hover para .product */
    transform: translateY(-5px);
    /* Mueve hacia arriba 5px */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Sombra más grande */
}

.product img {
    /* Selector para img dentro de .product */
    width: 100%;
    /* Ancho completo del contenedor */
    height: 150px;
    /* Altura fija */
    object-fit: cover;
    /* Cubre el área sin deformar */
    border-radius: 8px;
    /* Bordes redondeados */
}

.product button {
    /* Selector para button dentro de .product */
    margin-top: 10px;
    /* Margen superior */
    padding: 8px 15px;
    /* Padding interno */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Fondo gradiente */
    color: white;
    /* Color del texto */
    border: none;
    /* Sin borde */
    border-radius: 20px;
    /* Bordes redondeados */
    cursor: pointer;
    /* Cursor de mano */
    font-weight: bold;
    /* Fuente negrita */
    transition: transform 0.2s ease;
    /* Transición */
}

.product button:hover {
    /* Estado hover para button en .product */
    transform: scale(1.1);
    /* Escala al 110% */
}

.cart-items {
    /* Selector para .cart-items */
    list-style: none;
    /* Sin puntos de lista */
    padding: 0;
    /* Sin padding */
}

.cart-items li {
    /* Selector para li dentro de .cart-items */
    padding: 8px 0;
    /* Padding vertical */
    border-bottom: 1px solid #ddd;
    /* Borde inferior */
}

.cart button {
    /* Selector para button dentro de .cart */
    margin-top: 15px;
    /* Margen superior */
    padding: 10px 20px;
    /* Padding interno */
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
    /* Fondo gradiente */
    color: white;
    /* Color del texto */
    border: none;
    /* Sin borde */
    border-radius: 20px;
    /* Bordes redondeados */
    cursor: pointer;
    /* Cursor de mano */
    font-weight: bold;
    /* Fuente negrita */
    transition: transform 0.2s ease;
    /* Transición */
}

.cart button:hover {
    /* Estado hover para button en .cart */
    transform: scale(1.05);
    /* Escala al 105% */
}


/* ===========================================
   MEDIA QUERY PARA PANTALLAS PEQUEÑAS
   =========================================== */

@media (max-width: 1024px) {

    /* Se aplica en tabletas y celulares */

    /*El header va a estar siempre visible cuando este en resolution pequeña*/
    header {
        position: sticky;
        top: 0;
        z-index: 1000;

    }

    header nav ul {
        display: none;
        /* Oculta solo el nav del header, no el toolbar */
    }

    .MenuOtherOptions {
        display: block;

    }

    main {
        flex-direction: column;
        /* Cambia el layout a columna */
        position: relative;
        /* Necesario para el posicionamiento del menú */
    }


    aside.cart {
        display: none;
        /* Oculta el carrito en pantallas menores a 1024px */
    }

    .categories {
        position: fixed;
        /* Posición fija para el menú lateral */
        top: 0;
        /* Desde arriba */
        left: -50%;
        /* Inicialmente oculto a la izquierda (50% del ancho) */
        width: 50%;
        /* Ocupa la mitad del ancho de la pantalla */
        height: 100vh;
        /* Altura completa de la ventana */
        background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
        /* Fondo gradiente */
        transition: left 0.3s ease;
        /* Animación suave al aparecer/desaparecer */
        z-index: 999;
        /* Debajo del toolbar pero encima del contenido */
        padding: 20px;
        /* Espacio interno */
        box-sizing: border-box;
        /* El padding no aumenta el ancho total */
        overflow-y: auto;
        /* Scroll si el contenido es muy largo */
        border-radius: 0;
        /* Sin bordes redondeados */
        box-shadow: none;
        /* Sin sombra */
    }

    .gallery {
        flex: 1;
    }

    footer {
        display: none;
        /* Oculta el footer en pantallas menores a 1024px */
    }

}

/* ===========================================
   MENÚ INFERIOR (FOOTER)
   =========================================== */

footer {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    margin-top: auto; /* Empuja el footer al final de la pantalla */
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
}

.bottom-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.bottom-menu li {
    margin: 0 15px;
}

.bottom-menu a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.bottom-menu a:hover {
    color: #ffd700;
}

/* ===========================================
   BOTTOM TOOLBAR (MÓVIL)
   =========================================== */

.bottom-toolbar {
    display: none;
    /* Oculto por defecto en pantallas grandes */
}

@media (max-width: 1024px) {

    /* Agrega espacio inferior al contenido para que no quede tapado por el toolbar */
    body {
        padding-bottom: 70px;
    }

    .bottom-toolbar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.25);
        border-radius: 16px 16px 0 0;
        z-index: 1100;
        padding: 0 10px;
    }

    .toolbar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-size: 10px;
        font-weight: 600;
        flex: 1;
        padding: 8px 0;
        transition: color 0.2s ease, transform 0.2s ease;
    }

    .toolbar-item svg {
        width: 22px;
        height: 22px;
        stroke: rgba(255, 255, 255, 0.8);
        transition: stroke 0.2s ease;
    }

    .toolbar-item:hover,
    .toolbar-item.active {
        color: #ffffff;
        transform: translateY(-3px);
    }

    .toolbar-item:hover svg,
    .toolbar-item.active svg {
        stroke: #ffffff;
    }
}

.btnAgregar {
    cursor: pointer;
}


/* CAMBIAR ESTILO DEL BOTON DEL "actulizar "  */
/* lo hice como el stilo del btton que habiamos utilizado*/

#btnMostrarTipoCambio {
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s ease;
    margin-top: 10px;
}

#btnMostrarTipoCambio:hover {
    transform: scale(1.05);
}

/* ===========================================
   MANTENIMIENTO DE PRODUCTOS
   =========================================== */

.maintenance-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    padding: 30px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 25px;
}

.form-card {
    flex: 1;
    min-width: 300px;
    max-width: 380px;
}

.list-card {
    flex: 2;
    min-width: 400px;
}

.card h2 {
    margin-top: 0;
    color: #333;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 3px solid #667eea;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.form-group label {
    margin-bottom: 6px;
    font-weight: bold;
    color: #444;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
}

.checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
}

.file-upload {
    display: inline-block;
    padding: 12px;
    border: 2px dashed #aaa;
    border-radius: 8px;
    text-align: center;
    color: #555;
    cursor: pointer;
    transition: background 0.2s ease;
}

.file-upload:hover {
    background: rgba(102, 126, 234, 0.08);
}

#previewImagen {
    display: block;
    width: 80px;
    height: 80px;
    margin-top: 10px;
    object-fit: cover;
    border-radius: 8px;
}

.form-actions {
    display: flex;
    gap: 10px;
}

.btn-primary,
.btn-secondary {
    flex: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #43e97b 0%, #2fb96a 100%);
    color: #fff;
}

.btn-secondary {
    background: #e0e0e0;
    color: #333;
}

.btn-primary:hover,
.btn-secondary:hover {
    transform: scale(1.03);
}

.list-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.list-header input {
    min-width: 200px;
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 20px;
    outline: none;
}

.tabla-productos {
    width: 100%;
    margin-top: 15px;
    border-collapse: collapse;
}

.tabla-productos th {
    padding: 10px;
    text-align: left;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.tabla-productos th:first-child {
    border-radius: 8px 0 0 8px;
}

.tabla-productos th:last-child {
    border-radius: 0 8px 8px 0;
}

.tabla-productos td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.tabla-productos .btnEditar,
.tabla-productos .btnEliminar {
    margin-right: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 15px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.tabla-productos .btnEditar {
    background: #667eea;
}

.tabla-productos .btnEliminar {
    background: #ff6b6b;
}

.tabla-productos .btnEditar:hover,
.tabla-productos .btnEliminar:hover {
    transform: scale(1.05);
}

.empty-msg {
    padding: 20px 0;
    color: #999;
    text-align: center;
    font-style: italic;
}

@media (max-width: 1024px) {
    .maintenance-main {
        flex-direction: column;
    }

    .form-card,
    .list-card {
        width: 100%;
        max-width: 100%;
    }
}