:root{
  --accent:#0ea5a4;
  --card-bg: #fff4eae0;
  --muted:#6b7280;
  --shadow: 0 6px 18px rgba(19, 24, 33, 0.08);
  --radius: 12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

body{
  margin:0;
}

/* --- Header --- */

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fff6ea;
  position: sticky;
  top: 0;
  z-index: 100;
}

header h1 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

header button {
  background: #651c32;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
}

header button:hover {
  background: #2563eb;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center
}

.logo{
  width:44px;
  height:44px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#60a5fa);
  display:flex;align-items:center;
  justify-content:center;color:white;
  font-weight:700
}

h1{font-size:18px;margin:0}
.controls {
  padding: 5px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.search{display:flex;align-items:center;background:#fff;padding:8px 12px;border-radius:999px;box-shadow:var(--shadow);min-width:220px}
.search input{border:0;outline:none;font-size:14px}
.select, .btn{background:#fff;border:0;padding:8px 12px;border-radius:10px;box-shadow:var(--shadow);cursor:pointer}

nav{
  padding: 5px;
  background-color: #fff6ea;
}

main{
  padding:24px;
  background-color: #e4fff6;
  min-height:calc(100vh - 72px - 40px);
  box-sizing: border-box;
}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.filters{display:flex;gap:8px;align-items:center}
.chips{display:flex;gap:8px}
.chip{padding:8px 12px;border-radius:999px;background:#fff;box-shadow:var(--shadow);cursor:pointer;font-size: 10px;border: none;}

/* Grid */
.products-grid{
  display:grid;
  gap:18px;
  /* default: responsive columns using auto-fit */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Card */
.card{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.media{height:180px;background:linear-gradient(180deg,#fff8ee,#fcfaf8);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:600}
.meta {
    height: 100%;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.title{font-size:15px;margin:0}
.desc{font-size:13px;color:var(--muted);margin:0}
.price-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.price{font-weight:700}
.actions{display:flex;gap:8px}
.btn-ghost{background:transparent;border:1px solid #e6e9ef;padding:8px 10px;border-radius:8px;cursor:pointer}
.badge{background:linear-gradient(90deg,#fde68a,#fb923c);padding:6px 8px;border-radius:8px;font-size:12px}

/* Responsive tweaks using explicit breakpoints so you get 2/3/4 columns as requested */
@media (min-width: 1200px){
  .products-grid{grid-template-columns: repeat(4, 1fr);}
}
@media (min-width: 900px) and (max-width:1199px){
  .products-grid{grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 600px) and (max-width:899px){
  .products-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width:599px){
  
  .products-grid{grid-template-columns: 1fr;}
  header{padding:12px; display: flow;gap:12px;flex-direction:column;align-items:flex-start}
  .search{min-width:140px}
}

/* small helpers */
.muted{color:var(--muted);font-size:13px}


footer {
    color: var(--muted);
    text-align: center;
    padding: 16px;
    font-size: 0.9rem;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}

/* simple modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.45)}
.modal.open{display:flex}
.modal-card{background:#fff;padding:18px;border-radius:12px;max-width:560px;box-shadow:var(--shadow)}

    /* 🔹 Tabla dentro del modal */
#m-extra table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.9rem;
}
#m-extra th, #m-extra td {
  border: 1px solid #ddd;
  padding: 6px 8px;
  text-align: left;
}
#m-extra th {
  background: #f1f5f9;
  font-weight: 600;
  width: 40%;
}

#loginModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
#loginModal .modalContent {
  background: white;
  padding: 24px;
  border-radius: 8px;
  width: 320px;
  position: relative;
}


/* Estilo para el contenedor del botón */


/* Estilo para el botón "Iniciar sesión" */
#openLoginBtn {
  padding: 5px 10px;
  font-size: 16px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  background-color: #f5ebd1; /* Azul tipo Bootstrap */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover para el botón */
#openLoginBtn:hover {
  background-color: #b37100; /* Azul más oscuro al pasar el mouse */
}



/*  */

/* Fondo del modal (pantalla oscurecida) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Contenido del modal */
.modal-content {
  background-color: #fff;
  padding: 30px 40px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  /* text-align: center; */
}

/* Botón para cerrar */
.close-modal {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #555;
}

/* Estilo para los encabezados */
.modal-content h2 {
  margin-bottom: 20px;
  color: #333;
}

/* Inputs */
.modal-content input[type="email"],
.modal-content input[type="password"] {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  box-sizing: border-box;
}

/* Botones */
.modal-content button {
  /* width: 100%; */
  padding: 12px;
  background-color: #ffbf00;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.modal-content button:hover {
  background-color: #ffbf00;
}

/* Texto de alternar login/registro */
.modal-content p {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

.modal-content span {
  color: #ffbf00;
  cursor: pointer;
  font-weight: bold;
}


/* --- Productos --- */

.card img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.card .title {
  font-size: 1rem;
  font-weight: bold;
  text-transform:uppercase;
}

.card .desc {
  font-size: 0.85rem;
  color: #475569;
}

.card .price {
  font-size: 1rem;
  font-weight: bold;
  margin: 6px 0;
}

.card .actions {
  display: flex;
  gap: 8px;
}

.btn-ghost, .chip {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}

.btn-ghost {
  background: #f1f5f9;
  color: #334155;
}

.btn-ghost:hover {
  background: #e2e8f0;
}

.chip {
  background: #3b82f6;
  color: white;
}

.chip:hover {
  background: #2563eb;
}

/* --- Modal base (login, carrito, producto) --- */
.modal, #loginModal, #cartModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

.modal.open,
#loginModal:not(.hidden),
#cartModal:not(.hidden) {
  display: flex;
}

.modal-card, .modal-content, .cart-content {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  position: relative;
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Botón cerrar modal */
.close-modal, #cartClose, #m-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  /* background: transparent; */
  font-size: 1.2rem;
  cursor: pointer;
}

/* --- Carrito --- */
.cart-content {
  max-width: 500px;
}

#cartItems {
  margin: 12px 0;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 6px;
}

#cartItems div {
  background: #f1f5f9;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
}

#cartTotal {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 8px;
}

#checkoutBtn {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: #10b981;
  color: white;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#checkoutBtn:hover {
  background: #059669;
}

.botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-right:5px ;
}

button {
    padding: 5px 10px;
    background-color: #3b82f6;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: white;
}