body {
  font-family: system-ui, sans-serif;
  max-width: 820px;
  margin: 20px auto;
  padding: 10px;
  background: #f5f5f5;
  color: #222;
}

h1, h2, h3, h4 {
  text-align: center;
  margin: 6px 0;
}

button {
  margin: 6px 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button.editar { background-color: #ff9800; color: white; }
button.comprado { background-color: #4caf50; color: white; }
button.eliminar { background-color: #f44336; color: white; }
button.añadir { background-color: #2196f3; color: white; }

ul { list-style:none; padding:0; margin:0; }

li {
  background: white;
  margin: 8px 0;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  display:flex;
  flex-direction:column;
}

/* comprado: fondo gris medio (#ccc) */
li.comprado {
  background: #ccc;
}

/* Categoria header in list */
li.categoria-header {
  background: transparent;
  box-shadow: none;
  padding: 6px 4px;
  font-weight: 700;
  border-radius: 4px;
}

/* Primera línea (nombre/unidad y cantidad a la derecha) */
li .linea1 {
  font-weight: 600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

/* Nombre y meta info agrupada a la izquierda */
.linea1 .meta {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Nombre tachado si comprado (span dentro de meta) */
li.comprado .linea1 .meta span {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Cantidad a la derecha */
.linea1 .cantidad {
  font-weight:700;
}

/* Segunda línea (botones a la izquierda, precio a la derecha) */
li .linea2 {
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

/* agrupación de botones */
.linea2 .botones { display:flex; gap:8px; flex-wrap:wrap; }

/* dot (small colored circle) next to price */
.price-dot {
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.03) inset;
}

/* show small price + dot container */
.price-with-dot { display:flex; align-items:center; gap:8px; }

/* Autocomplete hover */
#sugerencias div:hover { background:#eee; }

/* Modal básico */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  z-index: 2000;
}
.modal .modal-content {
  background: white;
  padding: 16px;
  border-radius: 10px;
  width: min(820px, 96%);
  max-width: 720px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* inputs precios en modal */
#modalPreciosArea div { margin:6px 0; display:flex; gap:8px; align-items:center; }

/* list items in settings */
#listaSuper li, #listaCats li { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid #eee; }

/* Responsive tweaks */
@media (max-width:520px) {
  li .linea1 { font-size: 0.95rem; }
  button { padding:6px 8px; }
  .linea1 .meta { flex-direction:column; align-items:flex-start; }
  .linea1 .cantidad { margin-top:6px; }
  .modal .modal-content { padding:10px; }
}/* Hacer que el panel de ajustes pueda hacer scroll */
#panelAjustes .modal-content {
  max-height: 80vh;      /* límite de altura */
  overflow-y: auto;      /* scroll interno */
}