:root {
    --primario: #ffc107;
    --secundario: #25d366;
    --oscuro: #121212;
    --tarjeta: #1a1a1a;
    --texto: #ffffff;
}

* { 
box-sizing: border-box; 
-webkit-tap-highlight-color: transparent; 
}

body { 
font-family: 'Poppins', sans-serif; 
background-color: var(--oscuro); 
color: var(--texto); 
margin: 0; 
}

/* NAVEGACIÓN */

nav { 
background: #000; 
padding: 15px 20px; 
display: flex; 
justify-content: space-between; 
align-items: center; 
position: sticky; 
top: 0; 
z-index: 1000; 
border-bottom: 2px solid var(--primario); 
}

.logo-nav { 
font-family: 'Bangers', cursive; 
font-size: 1.8rem; 
color: var(--primario); 
}

.cart-icon-container { 
position: relative; 
cursor: pointer; 
font-size: 1.5rem; 
color: var(--primario); 
}

.badge { 
position: absolute; 
top: -8px; 
right: -10px; 
background: var(--secundario); 
color: #fff; 
font-size: 0.7rem; 
padding: 2px 6px; 
border-radius: 50%; 
font-weight: bold; 
border: 2px solid #000; 
}

 /* Estilo para el punto de estatus */
        
.status-dot {
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
box-shadow: 0 0 8px;
}
        
.online { 
background-color: #25d366; 
color: #25d366; 
box-shadow: 0 0 8px #25d366; 
}

.offline { 
background-color: #e63946; 
color: #e63946; 
box-shadow: 0 0 8px #e63946; 
}

/* ESTATUS ABIERTO O CERRADO */

.status-text { 
font-weight: bold; 
}
.open { 
color: var(--secundario); 
}
.closed { 
color: #e63946; 
} 


.status-text { 
font-size: 0.6rem; 
font-family: 'Poppins', sans-serif; 
text-transform: uppercase; 
vertical-align: middle; 
letter-spacing: 1px; 
}

/* CATALOGO */

.container { 
padding: 20px; 
max-width: 800px; 
margin: auto; 
}

.titulo-cat { 
color: var(--primario); 
margin-bottom: 20px; 
font-size: 1.2rem; 
text-transform: uppercase; 
}

.grid-categorias { 
display: grid; 
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
gap: 10px; 
margin-bottom: 30px; 
}

.cat-card { 
background: var(--tarjeta); 
border-radius: 12px; 
text-align: center; 
padding: 10px; 
cursor: pointer; 
border: 1px solid #333; 
}

.cat-card img { 
width: 100%; 
aspect-ratio: 1/1; 
object-fit: cover; 
border-radius: 8px; 
margin-bottom: 8px; 
}

.cat-card p { 
margin: 0; 
font-size: 0.7rem; 
font-weight: 600; 
text-transform: uppercase; 
color: #fff; 
}

/* MODAL FLOTANTE */

#modal-producto { 
display: none; 
position: fixed; 
top: 0; left: 0; 
width: 100%; 
height: 100%; 
background: rgba(0,0,0,0.9); 
z-index: 9999; 
justify-content: center; 
align-items: center; 
padding: 15px; 
}

.modal-content { 
background: #1a1a1a; 
width: 100%; 
max-width: 400px; 
border-radius: 20px; 
position: relative; 
overflow: hidden; 
border: 1px solid #333; 
}

.close-modal { 
position: absolute; 
top: 10px; 
right: 15px; 
font-size: 2.5rem; 
color: #fff; 
cursor: pointer; 
z-index: 10; 
}

.modal-img-container { 
background: #000; 
height: 250px; 
display: flex; 
align-items: center; 
justify-content: center; 
}

.modal-img-container img { 
max-width: 100%; 
max-height: 100%; 
object-fit: contain; 
}

.modal-body { 
padding: 20px; 
}

.modal-body h2 { 
color: var(--primario); 
margin: 0 0 10px 0; 
font-size: 1.4rem; 
}

.modal-body p { 
color: #bbb; 
font-size: 0.85rem; 
line-height: 1.4; 
margin-bottom: 20px; 
}

.modal-footer-ui { 
display: flex; 
justify-content: space-between; 
align-items: center; 
border-top: 1px solid #333; 
padding-top: 15px; 
}

.btn-add-modal { 
background: var(--secundario); 
color: white; 
border: none; 
padding: 12px 25px; 
border-radius: 10px; 
font-weight: bold; 
cursor: pointer; 
}

/* CARRITO */

#side-cart { 
position: fixed; 
top: 0; 
right: -100%; 
width: 100%; 
max-width: 400px; 
height: 100%; 
background: #fff; 
z-index: 5000; 
transition: 0.4s; 
display: flex; 
flex-direction: column; 
}

#side-cart.active { 
right: 0; 
}

.cart-header { 
padding: 20px; 
background: #f8f8f8; 
display: flex; 
justify-content: space-between; 
align-items: center; 
color: #333; 
}

.close-cart { 
background: none; 
border: none; 
font-size: 2.5rem; 
color: #999; 
cursor: pointer; 
}

#items-carrito { 
flex-grow: 1; 
overflow-y: auto; 
padding: 15px; 
color: #333;
}

.metodo-envio-box { 
background: #f0f0f0; 
padding: 15px; 
border-radius: 12px; 
margin-bottom: 15px; 
display: flex; 
justify-content: space-around; 
}

.radio-label { 
display: flex; 
align-items: center; 
gap: 8px; 
color: #333 !important; 
font-weight: 600; 
font-size: 0.9rem; 
cursor: pointer; 
}

.radio-label input { 
accent-color: var(--secundario); 
width: 18px; 
height: 18px; 
}

.cart-footer { 
padding: 20px; 
background: white; 
border-top: 1px solid #eee; 
}

.input-estilo { 
width: 100%; 
padding: 12px; 
margin-bottom: 10px; 
border-radius: 8px; 
border: 1px solid #ddd; 
color: #333; 
font-size: 0.9rem; 
}

.titulo-seccion { 
color: #555; 
font-size: 0.8rem; 
font-weight: bold; 
margin-bottom: 5px; 
text-transform: uppercase; 
}

.total-box { 
display: flex; 
justify-content: space-between; 
font-size: 1.3rem; 
font-weight: bold; 
margin: 15px 0; 
color: #333; 
}

.total-num { 
color: var(--secundario); 
}

.btn-enviar-wa { 
width: 100%; 
padding: 16px; 
background: #25d366; 
color: white; 
border: none; 
border-radius: 12px; 
font-weight: bold; 
font-size: 1.1rem; 
cursor: pointer; 
}

.btn-continuar { 
width: 100%; 
background: none; 
border: 1px solid #ddd; 
color: #999; 
padding: 10px; 
border-radius: 10px; 
margin-top: 10px; 
cursor: pointer; 
}

/* NOTIFICACIÓN (TOAST) */

#toast {
position: fixed; 
bottom: 30px; 
left: 50%; 
transform: translateX(-50%) translateY(200px);
background: #1a1a1a; 
color: #fff; 
padding: 12px 25px; 
border-radius: 50px;
display: flex; 
align-items: center; 
gap: 12px; 
z-index: 10000;
transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 2px solid var(--primario); 
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

#toast.show { 
transform: translateX(-50%) translateY(0); 
}

#toast i { 
color: var(--secundario); 
font-size: 1.2rem; 
}

/* FOOTER */

.footer-contact { 
text-align: center; 
padding: 40px 20px; 
border-top: 1px solid #222; 
}

.btn-footer-wa { 
display: inline-flex; 
align-items: center; 
gap: 10px; 
background: #25d366; 
color: #fff; padding: 12px 25px; 
border-radius: 50px; 
text-decoration: none; 
font-weight: bold; 
}