:root{
  --bg:#0f172a;
  --card:#111827;
  --accent:#22c55e;
  --danger:#ef4444;
  --text:#e5e7eb;
  --border:#1f2937;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,Arial;
  background:var(--bg);
  color:var(--text);
}

/* Layout */
.layout{
  display:flex;
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  width:230px;
  background:#020617;
  border-right:1px solid var(--border);
  padding:12px;
}

.sidebar a{
  display:block;
  padding:12px;
  margin:4px 0;
  text-decoration:none;
  color:#cbd5e1;
  border-radius:6px;
  font-size:15px;
}

.sidebar a:hover{background:#1f2937}

/* Content */
.content{
  flex:1;
  padding:15px;
}

/* Cards */
.card{
  background:var(--card);
  border-radius:10px;
  padding:12px;
  margin-bottom:12px;
}

/* Inputs & Buttons */
input,select,button{
  width:100%;
  padding:14px;
  margin:6px 0;
  border-radius:8px;
  border:1px solid #374151;
  background:#020617;
  color:#fff;
  font-size:16px;
}

button{
  background:var(--accent);
  color:#000;
  font-weight:bold;
  border:none;
}

button.danger{
  background:var(--danger);
  color:#fff;
}

/* Cart */
.cart-item{
  border-bottom:1px solid var(--border);
  padding:8px 0;
}

/* ====== MOBILE ====== */

@media(max-width:900px){

  .layout{flex-direction:column}

  .sidebar{
    width:100%;
    display:flex;
    overflow-x:auto;
  }

  .sidebar a{
    flex:1;
    text-align:center;
    font-size:13px;
    padding:10px;
  }

  .content{padding:10px}
}

@media(max-width:600px){

  body{font-size:14px}

  input,button{font-size:15px;padding:16px}

  .card{padding:10px}

  /* Carrito táctil */
  .cart-item{
    font-size:14px;
  }

  .cart-controls{
    display:flex;
    gap:6px;
  }

  .cart-controls input{
    flex:1;
  }

  .cart-controls button{
    width:auto;
    padding:8px 12px;
  }
}