/* Vista de mesero. Movil primero: un pulgar, una columna, blancos de toque
   grandes. Solo tokens de css/styles.css. */

.mes { max-width: 560px; margin: 0 auto; }
.mes-top { margin-bottom: var(--sp-2); }
.mes-aviso {
  margin: var(--sp-1) 0; padding: var(--sp-2);
  border: 1px solid var(--warn); border-radius: var(--radius-sm);
  color: var(--warn); font-size: var(--fs-1);
}

/* mis mesas */
.mes-mesas, .mes-libres, .mes-menu, .mes-asiento ul { list-style: none; margin: 0; padding: 0; }
.mes-mesa {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-2);
  align-items: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-2); margin-bottom: var(--sp-1);
}
.mes-mesa:hover { border-color: var(--accent); }
.mes-mesa .nm { font-weight: 700; font-size: var(--fs-2); }
.mes-mesa .rest-precio { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.mes-libre {
  cursor: pointer; padding: var(--sp-2); border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline;
}
.mes-libre:hover { background: var(--surface-2); }

/* menu */
.mes-buscador { margin-bottom: var(--sp-2); }
.mes-buscador input { width: 100%; padding: 10px var(--sp-2); font-size: var(--fs-2); }
.mes-cats { margin-bottom: var(--sp-2); overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--sp-1); }
.mes-item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2); border-bottom: 1px solid var(--border); cursor: pointer;
  touch-action: manipulation; user-select: none;
}
.mes-item:hover { background: var(--surface-2); }
.mes-item .nm { font-weight: 600; }
.mes-item.agotado { cursor: not-allowed; opacity: 0.6; }
.mes-item.agotado .nm { text-decoration: line-through; }
.mes-86 { color: var(--danger); font-size: var(--fs-0); font-weight: 600; }
.mes-item-lado { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }

/* configurador de linea */
.mes-config .mes-campo { margin-top: var(--sp-2); }
.mes-config .k { display: block; font-size: var(--fs-0); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-1); }
.mes-config input[type="number"] { width: 80px; }
.mes-nota { flex: 1; min-width: 180px; }
.mes-nota input { width: 100%; }

/* orden */
.mes-tiempo { margin-top: var(--sp-2); }
.mes-asiento { margin-top: var(--sp-2); }
.mes-asiento .k { font-size: var(--fs-0); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.mes-asiento.compartir { border-left: 2px solid var(--gold); padding-left: var(--sp-2); }
.mes-linea {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-1) 0; border-bottom: 1px solid var(--border);
}
.mes-linea .nm { font-weight: 600; }
.mes-nota-txt { font-size: var(--fs-0); color: var(--gold); }
.mes-linea-lado { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
/* el estado nunca depende solo del color: el texto de .rest-estado lo dice */
.mes-linea.estado-lista .pt { background: var(--ok); }
.mes-linea.estado-en_preparacion .pt { background: var(--warn); }
.mes-linea.estado-enviada .pt { background: var(--info); }
.mes-linea.estado-cancelada .pt { background: var(--danger); }
.mes-linea.estado-cortesia .pt { background: var(--gold); }

@media (min-width: 700px) {
  .mes { max-width: 720px; }
  .mes-menu { columns: 1; }
}